/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║              SGTM — Design System v1.0                      ║
 * ║  Sistema de Gestión de Taller Mecánico                      ║
 * ║                                                             ║
 * ║  Paleta principal                                           ║
 * ║    Slate-950  #0f172a  — fondos oscuros, headers            ║
 * ║    Slate-900  #1e293b  — texto principal                    ║
 * ║    Slate-500  #64748b  — texto secundario                   ║
 * ║    Blue-500   #3b82f6  — acento primario                    ║
 * ║    Slate-50   #f8fafc  — fondo de página                    ║
 * ║                                                             ║
 * ║  Uso: agregar DESPUÉS de bootstrap.css                      ║
 * ║  <link rel="stylesheet" href="~/css/sgtm.css" />           ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ================================================================
   1. VARIABLES / TOKENS
   ================================================================ */
:root {
  /* — Colores base — */
  --s-ink-950:   #0f172a;   /* headers de tabla, sidebar, modal header   */
  --s-ink-900:   #1e293b;   /* texto principal                            */
  --s-ink-700:   #334155;   /* texto secundario oscuro                    */
  --s-ink-500:   #64748b;   /* labels, texto muted                        */
  --s-ink-400:   #94a3b8;   /* placeholders, íconos inactivos             */
  --s-ink-200:   #e2e8f0;   /* bordes                                     */
  --s-ink-100:   #f1f5f9;   /* fondo de row hover, input readonly         */
  --s-ink-50:    #f8fafc;   /* fondo de página, topbar                    */

  /* — Acento — */
  --s-blue:      #3b82f6;   /* primary                                    */
  --s-blue-dark: #2563eb;   /* hover primary                              */
  --s-blue-xdk:  #1d4ed8;   /* active primary                             */
  --s-blue-lite: #eff6ff;   /* fondos sutiles                             */
  --s-blue-ring: rgba(59, 130, 246, 0.20); /* focus ring                 */

  /* — Semánticos — */
  --s-success:        #16a34a;
  --s-success-lite:   #f0fdf4;
  --s-success-border: #bbf7d0;

  --s-danger:         #dc2626;
  --s-danger-lite:    #fef2f2;
  --s-danger-border:  #fecaca;

  --s-warning:        #92400e;
  --s-warning-lite:   #fffbeb;
  --s-warning-border: #fde68a;

  --s-info:           #0369a1;
  --s-info-lite:      #f0f9ff;
  --s-info-border:    #7dd3fc;

  /* — Tipografía — */
  --s-font:       'Segoe UI', system-ui, -apple-system, sans-serif;
  --s-font-mono:  'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --s-text-xs:    0.72rem;   /* 11.5px  labels en mayús               */
  --s-text-sm:    0.8125rem; /* 13px    texto de tabla, campos        */
  --s-text-base:  0.9375rem; /* 15px    texto general                 */
  --s-text-lg:    1.0625rem; /* 17px    títulos de sección            */
  --s-text-xl:    1.25rem;   /* 20px    títulos de página             */
  --s-text-2xl:   1.5rem;    /* 24px    headings grandes              */

  /* — Radios — */
  --s-r-sm:   6px;
  --s-r-md:   8px;
  --s-r-lg:   10px;
  --s-r-xl:   12px;
  --s-r-pill: 999px;

  /* — Sombras — */
  --s-shadow-xs: 0 1px 3px rgba(15,23,42,.06);
  --s-shadow-sm: 0 2px 6px rgba(15,23,42,.08);
  --s-shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --s-shadow-lg: 0 12px 40px rgba(15,23,42,.14);
  --s-shadow-xl: 0 20px 60px rgba(15,23,42,.20);

  /* — Transición — */
  --s-t: .18s cubic-bezier(.4,0,.2,1);
}


/* ================================================================
   2. RESET / BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--s-font);
  font-size: var(--s-text-base);
  color: var(--s-ink-900);
  background-color: var(--s-ink-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* — Links — */
a {
  color: var(--s-blue);
  text-decoration: none;
  transition: color var(--s-t);
}
a:hover { color: var(--s-blue-dark); text-decoration: underline; }

/* — Headings — */
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  color: var(--s-ink-950);
  font-weight: 700;
  line-height: 1.25;
}

/* — Code — */
code, pre, kbd, samp {
  font-family: var(--s-font-mono);
  font-size: 0.85em;
}
code {
  background: var(--s-ink-100);
  color: var(--s-blue-xdk);
  padding: 1px 6px;
  border-radius: var(--s-r-sm);
}

/* — HR — */
hr {
  border: none;
  border-top: 1px solid var(--s-ink-200);
  margin: 20px 0;
}

/* — Scrollbar — */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s-ink-100); }
::-webkit-scrollbar-thumb { background: var(--s-ink-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s-ink-400); }
* { scrollbar-width: thin; scrollbar-color: var(--s-ink-200) var(--s-ink-100); }


/* ================================================================
   3. TIPOGRAFÍA
   ================================================================ */

/* — Page title — */
.sgtm-page-title {
  font-size: var(--s-text-xl);
  font-weight: 800;
  color: var(--s-ink-950);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}

/* — Section header (igual que doc-section) — */
.sgtm-section-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--s-ink-200);
  margin-bottom: 14px;
}
.sgtm-section-hdr i { color: var(--s-blue); font-size: 14px; }

/* — Muted text — */
.sgtm-muted { color: var(--s-ink-500); font-size: var(--s-text-sm); }

/* — Label estándar — */
.sgtm-label {
  display: block;
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-ink-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

/* — Overrides Bootstrap headings — */
.display-1, .display-2, .display-3, .display-4,
.display-5, .display-6 { color: var(--s-ink-950); font-weight: 800; }

small, .small { color: var(--s-ink-500); font-size: var(--s-text-xs); }
.text-muted   { color: var(--s-ink-400) !important; }
.fw-semibold  { font-weight: 600; }
.fw-extrabold { font-weight: 800; }


/* ================================================================
   4. COLORES UTILITARIOS
   ================================================================ */
.text-primary   { color: var(--s-blue)     !important; }
.text-success   { color: var(--s-success)  !important; }
.text-danger    { color: var(--s-danger)   !important; }
.text-warning   { color: var(--s-warning)  !important; }
.text-info      { color: var(--s-info)     !important; }
.text-dark      { color: var(--s-ink-900)  !important; }
.text-secondary { color: var(--s-ink-500)  !important; }

.bg-primary   { background-color: var(--s-blue)        !important; }
.bg-success   { background-color: var(--s-success)     !important; }
.bg-danger    { background-color: var(--s-danger)      !important; }
.bg-warning   { background-color: var(--s-warning)     !important; }
.bg-light     { background-color: var(--s-ink-100)     !important; }
.bg-dark      { background-color: var(--s-ink-950)     !important; }
.bg-white     { background-color: #ffffff               !important; }
.bg-slate     { background-color: var(--s-ink-50)      !important; }


/* ================================================================
   5. BOTONES
   ================================================================ */

/* — Base — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 18px;
  font-size: var(--s-text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--s-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--s-t), border-color var(--s-t),
              color var(--s-t), box-shadow var(--s-t), transform var(--s-t);
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled {
  opacity: .5;
  pointer-events: none;
}
.btn i { font-size: 15px; flex-shrink: 0; }

/* — Tamaños — */
.btn-xs  { padding: 4px 10px;  font-size: 0.7rem;          border-radius: var(--s-r-sm); gap: 5px; }
.btn-sm  { padding: 6px 13px;  font-size: var(--s-text-xs); border-radius: var(--s-r-sm); gap: 5px; }
.btn-lg  { padding: 11px 24px; font-size: var(--s-text-base); border-radius: var(--s-r-lg); }
.btn-xl  { padding: 14px 30px; font-size: var(--s-text-lg);  border-radius: var(--s-r-xl); }
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--s-r-md);
  flex-shrink: 0;
}
.btn-icon.btn-sm  { width: 28px; height: 28px; border-radius: var(--s-r-sm); }
.btn-icon.btn-lg  { width: 44px; height: 44px; border-radius: var(--s-r-lg); }

/* — Variantes sólidas — */
.btn-primary {
  background: var(--s-blue);
  border-color: var(--s-blue);
  color: #fff;
  box-shadow: 0 1px 4px rgba(59,130,246,.30);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--s-blue-dark);
  border-color: var(--s-blue-dark);
  color: #fff;
  box-shadow: 0 3px 10px rgba(59,130,246,.40);
}
.btn-primary:active { background: var(--s-blue-xdk); }

.btn-secondary {
  background: #ffffff;
  border-color: var(--s-ink-200);
  color: var(--s-ink-700);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--s-ink-100);
  border-color: var(--s-ink-400);
  color: var(--s-ink-900);
}

.btn-dark {
  background: var(--s-ink-950);
  border-color: var(--s-ink-950);
  color: #fff;
}
.btn-dark:hover { background: var(--s-ink-700); border-color: var(--s-ink-700); color: #fff; }

.btn-success {
  background: var(--s-success);
  border-color: var(--s-success);
  color: #fff;
  box-shadow: 0 1px 4px rgba(22,163,74,.25);
}
.btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; }

.btn-danger {
  background: var(--s-danger);
  border-color: var(--s-danger);
  color: #fff;
  box-shadow: 0 1px 4px rgba(220,38,38,.25);
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }

.btn-info {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}
.btn-info:hover { background: #0284c7; border-color: #0284c7; color: #fff; }

/* — Variantes ghost (outline) — */
.btn-outline-primary {
  background: transparent;
  border-color: var(--s-blue);
  color: var(--s-blue);
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
  background: var(--s-blue-lite);
  color: var(--s-blue-dark);
}
.btn-outline-primary:active { background: #dbeafe; }

.btn-outline-secondary {
  background: transparent;
  border-color: var(--s-ink-200);
  color: var(--s-ink-500);
}
.btn-outline-secondary:hover { background: var(--s-ink-100); color: var(--s-ink-900); }

.btn-outline-danger {
  background: transparent;
  border-color: var(--s-danger-border);
  color: var(--s-danger);
}
.btn-outline-danger:hover { background: var(--s-danger-lite); }

.btn-outline-success {
  background: transparent;
  border-color: var(--s-success-border);
  color: var(--s-success);
}
.btn-outline-success:hover { background: var(--s-success-lite); }

/* — Variante ghost sin borde — */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--s-ink-500);
}
.btn-ghost:hover { background: var(--s-ink-100); color: var(--s-ink-900); }
.btn-ghost-primary {
  background: transparent;
  border-color: transparent;
  color: var(--s-blue);
}
.btn-ghost-primary:hover { background: var(--s-blue-lite); }

/* — Variante destructiva suave — */
.btn-soft-danger {
  background: var(--s-danger-lite);
  border-color: var(--s-danger-border);
  color: var(--s-danger);
}
.btn-soft-danger:hover { background: #fee2e2; }

.btn-soft-primary {
  background: var(--s-blue-lite);
  border-color: #bfdbfe;
  color: var(--s-blue-dark);
}
.btn-soft-primary:hover { background: #dbeafe; }

/* — Focus accesible — */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--s-blue-ring);
}


/* ================================================================
   6. FORMULARIOS
   ================================================================ */

/* — Label — */
.form-label {
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-ink-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

/* — Inputs, selects, textareas — */
.form-control,
.form-select {
  font-family: var(--s-font);
  font-size: var(--s-text-sm);
  color: var(--s-ink-900);
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--s-r-md);
  padding: 8px 11px;
  transition: border-color var(--s-t), box-shadow var(--s-t);
  width: 100%;
}
.form-control::placeholder { color: var(--s-ink-400); }
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--s-blue);
  box-shadow: 0 0 0 3px var(--s-blue-ring);
  background-color: #ffffff;
  color: var(--s-ink-950);
}
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--s-ink-100);
  color: var(--s-ink-400);
  cursor: default;
  border-color: var(--s-ink-200);
}
.form-control[readonly]:focus { box-shadow: none; border-color: var(--s-ink-200); }

/* — Tamaños — */
.form-control-sm, .form-select-sm { padding: 5px 9px; font-size: var(--s-text-xs); border-radius: var(--s-r-sm); }
.form-control-lg, .form-select-lg { padding: 11px 14px; font-size: var(--s-text-base); border-radius: var(--s-r-lg); }

/* — Input group — */
.input-group-text {
  background-color: var(--s-ink-100);
  border-color: #cbd5e1;
  color: var(--s-ink-500);
  font-size: var(--s-text-sm);
  font-weight: 600;
}

/* — Textarea — */
textarea.form-control { resize: vertical; min-height: 80px; }

/* — Check / Radio — */
.form-check-input {
  width: 16px;
  height: 16px;
  border-color: #cbd5e1;
  cursor: pointer;
  transition: border-color var(--s-t), background-color var(--s-t), box-shadow var(--s-t);
}
.form-check-input:checked {
  background-color: var(--s-blue);
  border-color: var(--s-blue);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--s-blue-ring);
  border-color: var(--s-blue);
}
.form-check-label { font-size: var(--s-text-sm); color: var(--s-ink-700); cursor: pointer; }

/* — Switch — */
.form-switch .form-check-input { width: 36px; border-radius: 999px; }

/* — Validation — */
.form-control.is-valid    { border-color: var(--s-success); }
.form-control.is-invalid  { border-color: var(--s-danger); }
.form-control.is-valid:focus   { box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.valid-feedback   { color: var(--s-success); font-size: var(--s-text-xs); font-weight: 600; }
.invalid-feedback { color: var(--s-danger);  font-size: var(--s-text-xs); font-weight: 600; }

/* — Form text (hint) — */
.form-text {
  font-size: var(--s-text-xs);
  color: var(--s-ink-400);
  margin-top: 4px;
}


/* ================================================================
   7. CARDS
   ================================================================ */
.card {
  background: #ffffff;
  border: 1px solid var(--s-ink-200);
  border-radius: var(--s-r-xl);
  box-shadow: var(--s-shadow-xs);
  overflow: hidden;
}

.card-header {
  background: var(--s-ink-50);
  border-bottom: 1px solid var(--s-ink-200);
  padding: 14px 20px;
  font-weight: 700;
  font-size: var(--s-text-sm);
  color: var(--s-ink-950);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header i { color: var(--s-blue); }

/* Header oscuro (como modal, tablas importantes) */
.card-header-dark {
  background: var(--s-ink-950);
  border-color: var(--s-ink-950);
  color: #f1f5f9;
}
.card-header-dark i { color: #93c5fd; }

.card-body  { padding: 20px; }
.card-footer {
  background: var(--s-ink-50);
  border-top: 1px solid var(--s-ink-200);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* — Variantes semánticas — */
.card-primary { border-left: 4px solid var(--s-blue); }
.card-success { border-left: 4px solid var(--s-success); }
.card-danger  { border-left: 4px solid var(--s-danger); }
.card-warning { border-left: 4px solid #f59e0b; }

/* — Stat card (KPI) — */
.sgtm-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}
.sgtm-stat-label {
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-ink-500);
  text-transform: uppercase;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sgtm-stat-label i { color: var(--s-blue); }
.sgtm-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--s-ink-950);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.sgtm-stat-sub {
  font-size: var(--s-text-xs);
  color: var(--s-ink-400);
}
.sgtm-stat-up   { color: var(--s-success); font-weight: 700; }
.sgtm-stat-down { color: var(--s-danger);  font-weight: 700; }


/* ================================================================
   8. TABLAS
   ================================================================ */
.table {
  width: 100%;
  font-size: var(--s-text-sm);
  border-collapse: collapse;
  --bs-table-border-color: var(--s-ink-100);
}

/* — Thead oscuro (estilo único SGTM) — */
.table thead th {
  background: var(--s-ink-950);
  color: #f1f5f9;
  font-size: var(--s-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 10px 12px;
  border: none;
  white-space: nowrap;
}
/* Radio en esquinas del thead */
.table thead tr th:first-child { border-radius: 8px 0 0 0; }
.table thead tr th:last-child  { border-radius: 0 8px 0 0; }

/* — Tbody — */
.table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--s-ink-100);
  vertical-align: middle;
  color: var(--s-ink-900);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td {
  background-color: #eff6ff;
}

/* — Striped — */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--s-ink-900);
  --bs-table-bg-type: var(--s-ink-50);
}

/* — Bordered — */
.table-bordered td,
.table-bordered th { border: 1px solid var(--s-ink-200); }

/* — Wrappers responsivos — */
.table-responsive {
  border: 1px solid var(--s-ink-200);
  border-radius: var(--s-r-xl);
  overflow: hidden;
  box-shadow: var(--s-shadow-xs);
}


/* ================================================================
   9. BADGES / PILLS
   ================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--s-r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-primary  { background: var(--s-blue-lite);      color: var(--s-blue-xdk);  border-color: #bfdbfe; }
.badge-success  { background: var(--s-success-lite);   color: var(--s-success);   border-color: var(--s-success-border); }
.badge-danger   { background: var(--s-danger-lite);    color: var(--s-danger);    border-color: var(--s-danger-border); }
.badge-warning  { background: var(--s-warning-lite);   color: var(--s-warning);   border-color: var(--s-warning-border); }
.badge-info     { background: var(--s-info-lite);      color: var(--s-info);      border-color: var(--s-info-border); }
.badge-dark     { background: var(--s-ink-950);        color: #f1f5f9;            border-color: var(--s-ink-950); }
.badge-neutral  { background: var(--s-ink-100);        color: var(--s-ink-700);   border-color: var(--s-ink-200); }

/* Dot indicator */
.badge-dot {
  padding: 3px 9px 3px 6px;
}
.badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Override BS bg utilities en badges */
.badge.bg-primary { background: var(--s-blue)    !important; color: #fff; border-color: transparent; }
.badge.bg-success { background: var(--s-success) !important; color: #fff; border-color: transparent; }
.badge.bg-danger  { background: var(--s-danger)  !important; color: #fff; border-color: transparent; }
.badge.bg-warning { background: #f59e0b          !important; color: #fff; border-color: transparent; }
.badge.bg-secondary { background: var(--s-ink-500) !important; color: #fff; border-color: transparent; }


/* ================================================================
   10. ALERTS
   ================================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--s-r-lg);
  border-left-width: 4px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  font-size: var(--s-text-sm);
}
.alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-heading { font-weight: 700; margin-bottom: 3px; font-size: var(--s-text-base); }

.alert-primary {
  background: var(--s-blue-lite);
  border-color: #93c5fd;
  color: var(--s-blue-xdk);
}
.alert-success {
  background: var(--s-success-lite);
  border-color: var(--s-success-border);
  color: #166534;
}
.alert-danger {
  background: var(--s-danger-lite);
  border-color: var(--s-danger-border);
  color: #991b1b;
}
.alert-warning {
  background: var(--s-warning-lite);
  border-color: var(--s-warning-border);
  color: var(--s-warning);
}
.alert-info {
  background: var(--s-info-lite);
  border-color: var(--s-info-border);
  color: var(--s-info);
}
.alert-dark {
  background: var(--s-ink-950);
  border-color: var(--s-ink-700);
  color: #f1f5f9;
}


/* ================================================================
   11. MODALS
   ================================================================ */
.modal-content {
  border: none;
  border-radius: var(--s-r-xl);
  box-shadow: var(--s-shadow-xl);
  overflow: hidden;
}

.modal-header {
  background: var(--s-ink-950);
  color: #f1f5f9;
  border: none;
  padding: 16px 24px;
  border-radius: 0;
}
.modal-header .modal-title {
  font-weight: 700;
  font-size: var(--s-text-base);
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-header .modal-title i { color: #93c5fd; }
.modal-header .btn-close { filter: invert(1) brightness(2); opacity: .7; }
.modal-header .btn-close:hover { opacity: 1; }

.modal-body { padding: 22px 24px; background: #fff; }

.modal-footer {
  background: var(--s-ink-50);
  border-top: 1px solid var(--s-ink-200);
  padding: 12px 24px;
  gap: 8px;
  border-radius: 0;
}

/* Sizes */
.modal-sm .modal-dialog  { max-width: 420px; }
.modal-xl .modal-dialog  { max-width: 1100px; }


/* ================================================================
   12. DROPDOWNS
   ================================================================ */
.dropdown-menu {
  border: 1px solid var(--s-ink-200);
  border-radius: var(--s-r-xl);
  box-shadow: var(--s-shadow-md);
  padding: 6px;
  font-size: var(--s-text-sm);
  min-width: 180px;
}

.dropdown-header {
  font-size: var(--s-text-xs);
  font-weight: 700;
  color: var(--s-ink-400);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 6px 10px 4px;
}

.dropdown-item {
  border-radius: var(--s-r-sm);
  padding: 7px 10px;
  font-size: var(--s-text-sm);
  font-weight: 500;
  color: var(--s-ink-700);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--s-t), color var(--s-t);
}
.dropdown-item i { font-size: 15px; color: var(--s-ink-400); flex-shrink: 0; }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--s-blue-lite);
  color: var(--s-blue-xdk);
}
.dropdown-item:hover i, .dropdown-item:focus i { color: var(--s-blue); }
.dropdown-item.active {
  background: var(--s-blue);
  color: #fff;
}
.dropdown-item.active i { color: rgba(255,255,255,.75); }

/* Danger item */
.dropdown-item.text-danger:hover {
  background: var(--s-danger-lite);
  color: var(--s-danger);
}

.dropdown-divider { border-color: var(--s-ink-200); margin: 4px 0; }


/* ================================================================
   13. NAVBAR
   ================================================================ */
.navbar {
  background: var(--s-ink-950) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 20px;
  min-height: 56px;
}
.navbar-brand {
  color: var(--s-blue) !important;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.navbar .nav-link {
  color: #94a3b8 !important;
  font-size: var(--s-text-sm);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--s-r-sm);
  transition: color var(--s-t), background var(--s-t);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.07);
}


/* ================================================================
   14. NAVEGACIÓN (tabs, pills)
   ================================================================ */

/* — Tabs estilo underline — */
.nav-tabs {
  border-bottom: 2px solid var(--s-ink-200);
  gap: 2px;
}
.nav-tabs .nav-link {
  color: var(--s-ink-500);
  font-weight: 600;
  font-size: var(--s-text-sm);
  border: none;
  padding: 9px 16px;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: color var(--s-t), border-color var(--s-t);
}
.nav-tabs .nav-link:hover {
  color: var(--s-blue);
  border-bottom-color: #93c5fd;
  background: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--s-blue);
  border-bottom: 2px solid var(--s-blue);
  background: transparent;
}

/* — Pills — */
.nav-pills .nav-link {
  color: var(--s-ink-500);
  font-size: var(--s-text-sm);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--s-r-md);
  transition: background var(--s-t), color var(--s-t);
}
.nav-pills .nav-link:hover { background: var(--s-ink-100); color: var(--s-ink-900); }
.nav-pills .nav-link.active {
  background: var(--s-blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(59,130,246,.30);
}


/* ================================================================
   15. PAGINACIÓN
   ================================================================ */
.pagination { gap: 3px; }
.page-link {
  border-radius: var(--s-r-sm) !important;
  border-color: var(--s-ink-200);
  color: var(--s-blue);
  font-size: var(--s-text-sm);
  font-weight: 600;
  padding: 6px 11px;
  transition: background var(--s-t), border-color var(--s-t);
}
.page-link:hover {
  background: var(--s-blue-lite);
  border-color: #93c5fd;
  color: var(--s-blue-dark);
}
.page-item.active .page-link {
  background: var(--s-blue);
  border-color: var(--s-blue);
  color: #fff;
  box-shadow: 0 1px 4px rgba(59,130,246,.3);
}
.page-item.disabled .page-link { color: var(--s-ink-400); border-color: var(--s-ink-200); }


/* ================================================================
   16. BREADCRUMB
   ================================================================ */
.breadcrumb { font-size: var(--s-text-xs); font-weight: 600; }
.breadcrumb-item a { color: var(--s-blue); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--s-blue-dark); text-decoration: underline; }
.breadcrumb-item.active { color: var(--s-ink-500); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--s-ink-400); }


/* ================================================================
   17. LIST GROUP
   ================================================================ */
.list-group-item {
  border-color: var(--s-ink-200);
  font-size: var(--s-text-sm);
  color: var(--s-ink-900);
  padding: 10px 16px;
  transition: background var(--s-t);
}
.list-group-item:first-child { border-radius: var(--s-r-xl) var(--s-r-xl) 0 0; }
.list-group-item:last-child  { border-radius: 0 0 var(--s-r-xl) var(--s-r-xl); }
.list-group-item.active {
  background: var(--s-blue);
  border-color: var(--s-blue);
  color: #fff;
}
.list-group-item-action:hover { background: var(--s-blue-lite); color: var(--s-blue-xdk); }


/* ================================================================
   18. PROGRESS
   ================================================================ */
.progress {
  background: var(--s-ink-200);
  border-radius: var(--s-r-pill);
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  background: var(--s-blue);
  border-radius: var(--s-r-pill);
  transition: width .4s ease;
}
.progress-bar.bg-success { background: var(--s-success); }
.progress-bar.bg-danger  { background: var(--s-danger);  }
.progress-bar.bg-warning { background: #f59e0b;          }


/* ================================================================
   19. TOOLTIPS & POPOVERS
   ================================================================ */
.tooltip-inner {
  background: var(--s-ink-950);
  color: #f1f5f9;
  font-size: var(--s-text-xs);
  font-weight: 600;
  border-radius: var(--s-r-sm);
  padding: 5px 10px;
}
.bs-tooltip-auto[data-popper-placement^=top]    .tooltip-arrow::before,
.bs-tooltip-top                                 .tooltip-arrow::before { border-top-color:    var(--s-ink-950); }
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom                              .tooltip-arrow::before { border-bottom-color: var(--s-ink-950); }
.bs-tooltip-auto[data-popper-placement^=start]  .tooltip-arrow::before,
.bs-tooltip-start                               .tooltip-arrow::before { border-left-color:   var(--s-ink-950); }
.bs-tooltip-auto[data-popper-placement^=end]    .tooltip-arrow::before,
.bs-tooltip-end                                 .tooltip-arrow::before { border-right-color:  var(--s-ink-950); }

.popover {
  border: 1px solid var(--s-ink-200);
  border-radius: var(--s-r-xl);
  box-shadow: var(--s-shadow-lg);
  font-size: var(--s-text-sm);
}
.popover-header {
  background: var(--s-ink-50);
  border-color: var(--s-ink-200);
  font-weight: 700;
  font-size: var(--s-text-sm);
  color: var(--s-ink-950);
  border-radius: var(--s-r-xl) var(--s-r-xl) 0 0;
}


/* ================================================================
   20. SPINNERS / LOADING
   ================================================================ */
.spinner-border {
  border-color: var(--s-ink-200);
  border-top-color: var(--s-blue);
}
.spinner-border.text-primary { border-top-color: var(--s-blue);    }
.spinner-border.text-success { border-top-color: var(--s-success); }
.spinner-border.text-danger  { border-top-color: var(--s-danger);  }

/* Overlay de carga global */
.sgtm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.sgtm-overlay.show  { display: flex; }
.sgtm-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: var(--s-text-sm);
  font-weight: 600;
}
.sgtm-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sgtm-spin .65s linear infinite;
}
@keyframes sgtm-spin { to { transform: rotate(360deg); } }


/* ================================================================
   21. COMPONENTES PROPIOS SGTM
   ================================================================ */

/* — Topbar de página (título + acciones) — */
.sgtm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.sgtm-topbar-left { display: flex; align-items: center; gap: 12px; }
.sgtm-topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* — Empty state — */
.sgtm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--s-ink-400);
  text-align: center;
  gap: 8px;
}
.sgtm-empty i { font-size: 36px; color: var(--s-ink-200); }
.sgtm-empty-title { font-weight: 700; color: var(--s-ink-500); font-size: var(--s-text-base); }
.sgtm-empty-sub   { font-size: var(--s-text-sm); color: var(--s-ink-400); }

/* — Search bar — */
.sgtm-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sgtm-search i {
  position: absolute;
  left: 10px;
  color: var(--s-ink-400);
  font-size: 15px;
  pointer-events: none;
}
.sgtm-search .form-control { padding-left: 33px; }

/* — Action bar (toolbar encima de tabla) — */
.sgtm-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--s-ink-50);
  border-bottom: 1px solid var(--s-ink-200);
}
.sgtm-action-bar-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sgtm-action-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* — Status dot — */
.sgtm-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sgtm-dot-green  { background: var(--s-success); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.sgtm-dot-blue   { background: var(--s-blue);    box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.sgtm-dot-red    { background: var(--s-danger);  box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.sgtm-dot-amber  { background: #f59e0b;          box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.sgtm-dot-gray   { background: var(--s-ink-400); }

/* — Divider con texto — */
.sgtm-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--s-ink-400);
  font-size: var(--s-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 20px 0;
}
.sgtm-divider::before,
.sgtm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--s-ink-200);
}

/* — Avatar — */
.sgtm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--s-blue), #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.sgtm-avatar-sm { width: 26px; height: 26px; font-size: 0.65rem; }
.sgtm-avatar-lg { width: 48px; height: 48px; font-size: 1rem; }


/* ================================================================
   22. LAYOUT HELPERS
   ================================================================ */

/* Grilla responsive de campos de formulario */
.sgtm-fields   { display: grid; gap: 14px; }
.sgtm-fields-2 { grid-template-columns: repeat(2, 1fr); }
.sgtm-fields-3 { grid-template-columns: repeat(3, 1fr); }
.sgtm-fields-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .sgtm-fields-3,
  .sgtm-fields-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sgtm-fields-2,
  .sgtm-fields-3,
  .sgtm-fields-4 { grid-template-columns: 1fr; }
}

/* Spacing helpers adicionales */
.gap-6  { gap: 6px !important; }
.gap-8  { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.gap-14 { gap: 14px !important; }


/* ================================================================
   23. RESPONSIVE OVERRIDES
   ================================================================ */
@media (max-width: 576px) {
  .btn-responsive-full { width: 100%; justify-content: center; }
  .sgtm-topbar         { flex-direction: column; align-items: flex-start; }
  .sgtm-topbar-actions { width: 100%; }
  .sgtm-action-bar     { flex-direction: column; align-items: flex-start; }
}

@media print {
  body { background: #fff !important; }
  .sidebar, #sidebar, #topbar, .sgtm-overlay { display: none !important; }
  #main-wrapper { margin-left: 0 !important; }
  .doc-footer, .items-toolbar .btn-secondary { display: none !important; }
  .card, .table-responsive { box-shadow: none !important; border: 1px solid #ddd !important; }
  .table thead th { background: #0f172a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}