/* ================================================================
   VDN Design System — ds.css  v2.0
   Cargar DESPUÉS de Bootstrap 5.3
   ================================================================ */


/* ── 0. ESCALAS GLOBALES (Fase 4 DS · independientes del tema) ─
   Fuente única de spacing y tipografía. Regla: NUNCA valores arbitrarios,
   usar estos tokens. Documentado en docs/DesignSystem/04_SPACING/03_TYPOGRAPHY. */
:root {
  /* Spacing — escala 4·8·12·16·24·32·48·64 */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Tipografía — escala en rem */
  --fs-2xs: .68rem;
  --fs-xs:  .72rem;
  --fs-sm:  .80rem;
  --fs-md:  .875rem;
  --fs-base: 1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --ff-head: 'Outfit','Inter',sans-serif;
  --ff-body: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Botón — métrica canónica única (la usa el macro btn() del DS) */
  --btn-pad-y: .5rem;    --btn-pad-x: .9rem;
  --btn-pad-y-sm: .38rem; --btn-pad-x-sm: .65rem;
  --btn-radius: 10px;
  --btn-fs: var(--fs-md); --btn-fs-sm: var(--fs-sm);
}

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */

[data-bs-theme="light"] {
  /* Paleta de marca */
  --color-primary:        #4f46e5;
  --color-primary-hover:  #4338ca;
  --color-primary-subtle: rgba(79, 70, 229, 0.08);
  --color-gradient:       linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* Semánticos */
  --color-success:        #059669;
  --color-success-subtle: rgba(5, 150, 105, 0.09);
  --color-warning:        #b45309;
  --color-warning-subtle: rgba(180, 83, 9, 0.09);
  --color-danger:         #dc2626;
  --color-danger-subtle:  rgba(220, 38, 38, 0.09);
  --color-info:           #0369a1;
  --color-info-subtle:    rgba(3, 105, 161, 0.09);

  /* Superficies */
  --surface-body:   #f3f4f6;
  --surface-card:   #ffffff;
  --surface-input:  #ffffff;
  --surface-hover:  #f1f3f7;
  --surface-nav:    linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* Texto */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --text-disabled:  #d1d5db;

  /* Bordes */
  --border-default: #e5e7eb;
  --border-strong:  #d1d5db;

  /* Aliases legacy — compatibilidad con templates existentes */
  --primary:   var(--color-primary);
  --bg-body:   var(--surface-body);
  --bg-card:   var(--surface-card);
  --bg-input:  var(--surface-input);
  --text-main: var(--text-primary);
  --border:    var(--border-default);
  --gradient:  var(--color-gradient);
  /* Aliases usados por gastos/, documents/ y mace/ (antes sin definir:
     caían al fallback claro y rompían el tema oscuro) */
  --surface:   var(--surface-card);
  --surface-2: var(--surface-hover);
  --text:      var(--text-primary);
  --text-soft: var(--text-muted);

  /* Destinos / módulos nuevos */
  --glass:        #ffffff;
  --glass-border: #e5e7eb;
  --accent-color: #4f46e5;

  /* Bootstrap overrides — propagan a todas las utilidades bs */
  --bs-primary:           #4f46e5;
  --bs-primary-rgb:       79, 70, 229;
  --bs-success:           #059669;
  --bs-success-rgb:       5, 150, 105;
  --bs-warning:           #d97706;
  --bs-warning-rgb:       217, 119, 6;
  --bs-danger:            #dc2626;
  --bs-danger-rgb:        220, 38, 38;
  --bs-info:              #0284c7;
  --bs-info-rgb:          2, 132, 199;
  --bs-secondary:         #6b7280;
  --bs-secondary-rgb:     107, 114, 128;
  --bs-body-bg:           #f3f4f6;
  --bs-body-color:        #111827;
  --bs-border-color:      #e5e7eb;
  --bs-border-color-translucent: rgba(0,0,0,0.1);
}

[data-bs-theme="dark"] {
  /* Paleta de marca */
  --color-primary:        #6366f1;
  --color-primary-hover:  #818cf8;
  --color-primary-subtle: rgba(99, 102, 241, 0.12);
  --color-gradient:       linear-gradient(135deg, #5b5ea6 0%, #7c3aed 100%);

  /* Semánticos */
  --color-success:        #10b981;
  --color-success-subtle: rgba(16, 185, 129, 0.12);
  --color-warning:        #f59e0b;
  --color-warning-subtle: rgba(245, 158, 11, 0.12);
  --color-danger:         #f87171;
  --color-danger-subtle:  rgba(248, 113, 113, 0.12);
  --color-info:           #38bdf8;
  --color-info-subtle:    rgba(56, 189, 248, 0.12);

  /* Superficies */
  --surface-body:   #0f0f1a;
  --surface-card:   #16162a;
  --surface-input:  #1c1c32;
  --surface-hover:  #1e1e36;
  --surface-nav:    linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);

  /* Texto */
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-disabled:  #475569;

  /* Bordes */
  --border-default: #2d2d50;
  --border-strong:  #3d3d62;

  /* Aliases legacy */
  --primary:   var(--color-primary);
  --bg-body:   var(--surface-body);
  --bg-card:   var(--surface-card);
  --bg-input:  var(--surface-input);
  --text-main: var(--text-primary);
  --border:    var(--border-default);
  --gradient:  var(--color-gradient);
  --surface:   var(--surface-card);
  --surface-2: var(--surface-hover);
  --text:      var(--text-primary);
  --text-soft: var(--text-muted);

  /* Destinos / módulos nuevos */
  --glass:        #16162a;
  --glass-border: #2d2d50;
  --accent-color: #6366f1;

  /* Bootstrap overrides */
  --bs-primary:           #6366f1;
  --bs-primary-rgb:       99, 102, 241;
  --bs-success:           #10b981;
  --bs-success-rgb:       16, 185, 129;
  --bs-warning:           #f59e0b;
  --bs-warning-rgb:       245, 158, 11;
  --bs-danger:            #f87171;
  --bs-danger-rgb:        248, 113, 113;
  --bs-info:              #38bdf8;
  --bs-info-rgb:          56, 189, 248;
  --bs-secondary:         #94a3b8;
  --bs-secondary-rgb:     148, 163, 184;
  --bs-body-bg:           #0f0f1a;
  --bs-body-color:        #f1f5f9;
  --bs-border-color:      #2d2d50;
  --bs-border-color-translucent: rgba(255,255,255,0.07);
}


/* ── 2. BASE ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  background: var(--surface-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

p { color: var(--text-secondary); }

.text-muted { color: var(--text-muted) !important; }


/* ── 3. TRANSICIONES SELECTIVAS ─────────────────────────────── */
/*
  Reemplaza el anti-patrón `* { transition: all 0.3s }`.
  Solo se animan propiedades visuales en elementos interactivos.
*/
a,
.btn,
.nav-link,
.dropdown-item,
.card,
.form-control,
.form-select,
.badge,
.alert,
.modal-content,
.page-link,
.list-group-item {
  transition:
    color .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    opacity .2s ease;
}


/* ── 4. NAVBAR ──────────────────────────────────────────────── */

.app-navbar {
  background: var(--surface-nav) !important;
  height: 56px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.app-navbar .container-fluid {
  height: 100%;
  padding: 0 0.75rem;
  gap: 0;
  flex-wrap: nowrap;
  align-items: center;
}

.app-navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff !important;
  padding: 0 1rem 0 0.25rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.app-navbar .navbar-nav {
  gap: 0.1rem;
  align-items: center;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem !important;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.app-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.13);
}

.app-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.app-navbar .dropdown-toggle::after { opacity: 0.6; }

.app-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
}

.app-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Sección derecha del navbar */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 56px;
  padding-left: 0.5rem;
  flex-shrink: 0;
}

/* Selector de agencia */
.nav-agency-select {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 0 0.6rem;
  height: 34px;
  min-width: 150px;
  cursor: pointer;
}
.nav-agency-select option { background: #1c1c32; color: #fff; }

/* Botón de tema */
.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
}
.theme-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* Botón de usuario */
.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #fff !important;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  height: 34px;
  white-space: nowrap;
}
.nav-user-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Menú desplegable en tema claro/oscuro unificado */
.dropdown-menu-dark,
.navbar-actions .dropdown-menu {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-default) !important;
}
.dropdown-menu-dark .dropdown-item {
  color: var(--text-secondary) !important;
}
.dropdown-menu-dark .dropdown-item:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
.dropdown-menu-dark .dropdown-divider {
  border-color: var(--border-default) !important;
}

/* Navbar colapsado en móvil */
@media (max-width: 991px) {
  .app-navbar { height: auto; }
  .app-navbar .container-fluid { flex-wrap: wrap; padding: 0.5rem 0.75rem; gap: 0; }
  .app-navbar .navbar-brand { height: 40px; }
  .app-navbar .navbar-collapse {
    background: rgba(0, 0, 0, 0.2);
    margin: 0.5rem -0.75rem -0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .app-navbar .navbar-nav { flex-direction: column; align-items: flex-start; width: 100%; gap: 0.1rem; }
  .app-navbar .nav-link { width: 100%; }
  .app-navbar .dropdown-menu {
    position: static !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 1rem;
  }
  .app-navbar .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.8) !important; }
  .app-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
  .app-navbar .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,0.15) !important; }
  .navbar-actions { height: auto; padding: 0.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.25rem; width: 100%; }
}


/* ── 5. ÁREA PRINCIPAL ──────────────────────────────────────── */

.app-main {
  padding: 1.5rem 1.25rem;
  min-height: calc(100vh - 56px);
}

@media (max-width: 768px) {
  .app-main { padding: 1rem 0.75rem; }
}


/* ── 6. PAGE HEADER COMPONENT ───────────────────────────────── */
/* Unificado 2026-07: mismo lenguaje visual que .cmd-hero (tarjeta
   con radial sutil y blob de gradiente) para que TODAS las páginas
   compartan un solo patrón de encabezado. */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  border-radius: var(--tk-radius-lg, 22px);
  border: 1px solid var(--tk-glass-border, var(--border-default));
  padding: 1.15rem 1.5rem;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--tk-primary-subtle, var(--color-primary-subtle)) 0%, transparent 55%),
    var(--surface-card);
}
.page-header::after {
  content: ""; position: absolute; right: -80px; top: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: var(--tk-gradient, var(--color-gradient)); opacity: .14; filter: blur(20px);
  pointer-events: none;
}
.page-header > * { position: relative; z-index: 1; }

.page-header-title {
  font-family: 'Outfit','Inter',sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.3;
}
.page-header-title i { color: var(--color-primary-text); }

.page-header-subtitle {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .page-header { flex-direction: column; gap: 0.75rem; }
  .page-header-title { font-size: 1.15rem; }
  .page-actions { width: 100%; flex-wrap: wrap; }
}


/* ── 7. CARDS ───────────────────────────────────────────────── */

.card {
  --bs-card-bg: var(--surface-card);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-default);
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 12px 12px 0 0 !important;
}

.card-body {
  padding: 1.25rem;
  color: var(--text-secondary);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--border-default);
  padding: 0.875rem 1.25rem;
}

/* Variantes semánticas para card-header —
   reemplazan `bg-success text-white`, `bg-warning text-dark`, etc. */
.card-header-primary { background: var(--color-primary-subtle) !important; color: var(--color-primary-text) !important; border-bottom-color: transparent !important; }
.card-header-success { background: var(--color-success-subtle) !important; color: var(--color-success) !important; border-bottom-color: transparent !important; }
.card-header-warning { background: var(--color-warning-subtle) !important; color: var(--color-warning) !important; border-bottom-color: transparent !important; }
.card-header-danger  { background: var(--color-danger-subtle)  !important; color: var(--color-danger)  !important; border-bottom-color: transparent !important; }
.card-header-info    { background: var(--color-info-subtle)    !important; color: var(--color-info)    !important; border-bottom-color: transparent !important; }
.card-header-neutral { background: var(--surface-hover)        !important; color: var(--text-primary)  !important; border-bottom-color: transparent !important; }

/* Normalizar clases Bootstrap bg-* en .card-header para respetar el design system.
   Esto corrige los templates que usan `bg-primary text-white`, `bg-info`, etc.
   en vez de las clases semánticas del design system. */
.card-header[class*="bg-primary"]   { background: var(--color-primary-subtle) !important; color: var(--color-primary-text) !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-success"]   { background: var(--color-success-subtle) !important; color: var(--color-success) !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-info"]      { background: var(--color-info-subtle)    !important; color: var(--color-info)    !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-warning"]   { background: var(--color-warning-subtle) !important; color: var(--color-warning) !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-danger"]    { background: var(--color-danger-subtle)  !important; color: var(--color-danger)  !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-secondary"] { background: var(--surface-hover)        !important; color: var(--text-muted)    !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-dark"]      { background: var(--surface-hover)        !important; color: var(--text-primary)  !important; border-bottom-color: transparent !important; }
.card-header[class*="bg-light"]     { background: var(--surface-hover)        !important; color: var(--text-secondary)!important; border-bottom-color: transparent !important; }

/* Etiqueta de sección (eg. "CONFIGURACIÓN DE VIAJE") */
.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}


/* ── 8. BOTONES ─────────────────────────────────────────────── */

.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.475rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-gradient);
  color: #fff !important;
  border-color: transparent;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-primary-hover);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  border-color: transparent;
}

.btn-secondary {
  background: var(--surface-hover);
  color: var(--text-secondary) !important;
  border-color: var(--border-default);
}
.btn-secondary:hover {
  background: var(--border-default);
  color: var(--text-primary) !important;
  border-color: var(--border-strong);
}

.btn-success {
  background: var(--color-success-solid);
  color: #fff !important;
  border-color: transparent;
}
.btn-success:hover {
  filter: brightness(0.9);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

.btn-danger {
  background: var(--color-danger-solid);
  color: #fff !important;
  border-color: transparent;
}
.btn-danger:hover {
  filter: brightness(0.9);
  color: #fff !important;
}

.btn-warning {
  background: var(--color-warning-solid);
  color: #fff !important;
  border-color: transparent;
}
.btn-warning:hover {
  filter: brightness(0.9);
  color: #fff !important;
}

.btn-info {
  background: var(--color-info);
  color: #fff !important;
  border-color: transparent;
}
.btn-info:hover {
  filter: brightness(0.9);
  color: #fff !important;
}

.btn-dark {
  background: var(--surface-hover);
  color: var(--text-primary) !important;
  border-color: var(--border-strong);
}
.btn-dark:hover {
  background: var(--border-default);
  color: var(--text-primary) !important;
}

.btn-outline-primary {
  background: transparent;
  color: var(--color-primary-text) !important;
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary-text) !important;
}

.btn-outline-secondary {
  background: transparent;
  color: var(--text-muted) !important;
  border-color: var(--border-default);
}
.btn-outline-secondary:hover {
  background: var(--surface-hover);
  color: var(--text-primary) !important;
}

.btn-outline-success {
  background: transparent;
  color: var(--color-success) !important;
  border-color: var(--color-success);
}
.btn-outline-success:hover {
  background: var(--color-success-subtle);
  color: var(--color-success) !important;
}

.btn-outline-danger {
  background: transparent;
  color: var(--color-danger) !important;
  border-color: var(--color-danger);
}
.btn-outline-danger:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger) !important;
}

.btn-outline-warning {
  background: transparent;
  color: var(--color-warning) !important;
  border-color: var(--color-warning);
}
.btn-outline-warning:hover {
  background: var(--color-warning-subtle);
  color: var(--color-warning) !important;
}

.btn-outline-info {
  background: transparent;
  color: var(--color-info) !important;
  border-color: var(--color-info);
}
.btn-outline-info:hover {
  background: var(--color-info-subtle);
  color: var(--color-info) !important;
}

.btn-outline-dark {
  background: transparent;
  color: var(--text-primary) !important;
  border-color: var(--border-strong);
}
.btn-outline-dark:hover {
  background: var(--surface-hover);
  color: var(--text-primary) !important;
}

.btn-outline-light {
  background: transparent;
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
}

.btn-sm {
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
}

/* .btn-xs — acción compacta dentro de tablas densas (Pagar, Ver, etc.).
   Bootstrap 5 la eliminó y en las plantillas se venía usando sin definir,
   así que esos botones salían a tamaño completo y desbordaban la celda. */
.btn-xs {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  gap: 0.25rem;
  line-height: 1.35;
}
.btn-xs i { font-size: 0.72rem; }

.btn-lg {
  font-size: 1rem;
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
}


/* ── 9. FORMULARIOS ─────────────────────────────────────────── */

.form-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 0.55rem 0.875rem;
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  background: var(--surface-input);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
  color: var(--text-primary);
  outline: none;
}

.form-control::placeholder { color: var(--text-disabled); }

/* ── Acento COMO TEXTO (2026-08-21) ──────────────────────────────────────
   `--color-primary` cumple dos papeles: fondo de pastillas sólidas (con
   texto blanco encima) y color de texto/íconos. En tema oscuro no puede
   servir para los dos: aclararlo arregla el texto (2.8:1 → 6.4:1) pero
   rompería el blanco sobre la pastilla. Por eso el texto usa su propio
   token y los fondos siguen con `--color-primary` intacto.
   El color de cada agencia pisa `--color-primary` desde layout.html, así
   que esto se calcula a partir de él y respeta la marca. */
:root { --color-primary-text: color-mix(in srgb, var(--color-primary) 70%, black);
        --primary-text: var(--color-primary-text); }

/* ── Semánticos SÓLIDOS: fondo con texto blanco encima (2026-08-21) ──────
   Mismo problema de dos papeles que el acento, al revés: el DS ACLARA
   --color-success/-danger/-warning en tema oscuro —correcto cuando son
   TEXTO sobre una tarjeta oscura— pero esos mismos tokens pintan el fondo
   de .btn-success y compañía, y el blanco encima se caía a 2.5:1. Estos no
   dependen del tema: son el tono oscuro que sostiene texto blanco.
       blanco sobre #047857 → 5.5:1   (antes 2.5:1 en oscuro, 3.8:1 en claro)
       blanco sobre #b91c1c → 6.5:1
       blanco sobre #b45309 → 5.0:1 */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --color-success-solid: #047857;
  --color-danger-solid:  #b91c1c;
  --color-warning-solid: #b45309;
}
[data-bs-theme="dark"] {
  --color-primary-text: color-mix(in srgb, var(--color-primary) 60%, white);
}

/* Campos de SOLO LECTURA: un valor que se calcula, no se escribe (el total de
   un servicio, la identificación de un tercero encontrado, el resumen del
   último viaje). El DS no los distinguía, así que cada plantilla se inventaba
   el fondo en línea —y con literales claros (#f9fafb, #f5f5f5, #f2f7ff) o
   tokens inexistentes, que en tema oscuro dejaban texto claro sobre un
   recuadro blanco: ilegible. 2026-08-21.
   `background` va con !important porque los estilos en línea que quedaran por
   ahí ganarían por especificidad y el campo volvería a verse mal. */
.form-control[readonly],
.form-control[readonly]:focus,
.form-control[readonly]:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: none;
}

/* Inputs de archivo: botón "Elegir archivo" alineado al sistema */
.form-control[type="file"]::file-selector-button {
  background: var(--surface-hover);
  color: var(--text-primary);
  border: 0;
  border-right: 1px solid var(--border-default);
  border-radius: 6px 0 0 6px;
  padding: 0.55rem 0.875rem;
  margin: -0.55rem 0.875rem -0.55rem -0.875rem;
  transition: background .15s;
}
.form-control[type="file"]:hover::file-selector-button {
  background: var(--color-primary-subtle);
}

.form-control-sm, .form-select-sm {
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
}

.form-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.form-control.is-invalid,
.was-validated .form-control:invalid { border-color: var(--color-danger); }

.form-control.is-valid,
.was-validated .form-control:valid   { border-color: var(--color-success); }

.input-group-text {
  background: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--text-muted);
  font-size: 0.875rem;
}


/* ── 10. TABLAS ─────────────────────────────────────────────── */

.table {
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-default);
  --bs-table-striped-bg: var(--surface-hover);
  --bs-table-hover-bg: var(--surface-hover);
  --bs-table-hover-color: var(--text-primary);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Cabecera unificada — reemplaza table-dark y table-light */
.table thead th,
.table > thead > tr > th {
  background: var(--surface-card) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  border-top: none !important;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 0.875rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.65rem 0.875rem;
  vertical-align: middle;
  color: var(--text-secondary);
  background: transparent;
}

.table tbody tr { border-bottom: 1px solid var(--border-default); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover td { color: var(--text-primary); }

/* Filas de estado en tablas */
.table-danger  > td,
.table-danger  td { background: var(--color-danger-subtle)  !important; color: var(--color-danger)  !important; }
.table-warning > td,
.table-warning td { background: var(--color-warning-subtle) !important; color: var(--color-warning) !important; }
.table-success > td,
.table-success td { background: var(--color-success-subtle) !important; color: var(--color-success) !important; }
.table-info    > td,
.table-info    td { background: var(--color-info-subtle)    !important; color: var(--color-info)    !important; }


/* ── 11. BADGES ─────────────────────────────────────────────── */

.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 99px;
  letter-spacing: 0.02em;
}

/* Badges con estilo "soft pill" — reemplazan sólidos por sutiles */
.badge.bg-success  { background: var(--color-success-subtle) !important; color: var(--color-success) !important; }
.badge.bg-warning  { background: var(--color-warning-subtle) !important; color: var(--color-warning) !important; }
.badge.bg-danger   { background: var(--color-danger-subtle)  !important; color: var(--color-danger)  !important; }
.badge.bg-primary  { background: var(--color-primary-subtle) !important; color: var(--color-primary-text) !important; }
.badge.bg-info     { background: var(--color-info-subtle)    !important; color: var(--color-info)    !important; }
.badge.bg-secondary{ background: var(--surface-hover)        !important; color: var(--text-muted)    !important; }
.badge.bg-dark     { background: var(--surface-hover)        !important; color: var(--text-primary)  !important; }
.badge.bg-light    { background: var(--surface-hover)        !important; color: var(--text-secondary)!important; }

/* Para los pocos lugares que necesitan badge sólido */
.badge.badge-solid.bg-success { background: var(--color-success-solid) !important; color: #fff !important; }
.badge.badge-solid.bg-danger  { background: var(--color-danger-solid)  !important; color: #fff !important; }
.badge.badge-solid.bg-warning { background: var(--color-warning-solid) !important; color: #fff !important; }
.badge.badge-solid.bg-primary { background: var(--color-primary) !important; color: #fff !important; }


/* ── 12. DROPDOWNS ──────────────────────────────────────────── */

.dropdown-menu {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.375rem;
  min-width: 200px;
}

.dropdown-item {
  color: var(--text-secondary);
  font-size: 0.875rem;
  border-radius: 7px;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--border-default);
  margin: 0.25rem 0;
}

.dropdown-header {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem 0.25rem;
}


/* ── 13. MODALES ────────────────────────────────────────────── */

.modal-content {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-default);
  padding: 1.25rem 1.5rem;
  border-radius: 16px 16px 0 0;
}

.modal-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  color: var(--text-secondary);
}

.modal-footer {
  border-top: 1px solid var(--border-default);
  padding: 1rem 1.5rem;
  gap: 0.5rem;
  border-radius: 0 0 16px 16px;
}


/* ── 14. ALERTS (flash messages) ────────────────────────────── */

.alert {
  border: none;
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ⚠ `.alert` es un contenedor FLEX en fila: sirve para el patrón habitual
   «icono + texto», pero convierte en ítem suelto CADA etiqueta inline que
   tenga dentro. Una alerta con varios <b> intercalados con texto queda
   repartida en columnas y se desborda de la caja — así se veía cortado el
   bloque de pago por Nequi (medido 2026-08-22: 7 ítems, 670px de contenido
   en 496px de caja). Para alertas que son PROSA de varias líneas, usa este
   modificador; el texto vuelve a fluir y los <br> separan de verdad. */
.alert--prosa { display: block; }

.alert-success { background: var(--color-success-subtle); color: var(--color-success); }
.alert-danger  { background: var(--color-danger-subtle);  color: var(--color-danger);  }
.alert-warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.alert-info    { background: var(--color-info-subtle);    color: var(--color-info);    }

.alert .btn-close { opacity: 0.5; margin-left: auto; }


/* ── 15. PAGINACIÓN ─────────────────────────────────────────── */

.page-link {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 0.375rem 0.65rem;
}
.page-link:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.page-item.disabled .page-link {
  background: var(--surface-card);
  color: var(--text-disabled);
  border-color: var(--border-default);
}


/* ── 16. LIST GROUPS ────────────────────────────────────────── */

.list-group-item {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-secondary);
}
.list-group-item:hover { background: var(--surface-hover); }

.list-group-item-danger  { background: var(--color-danger-subtle)  !important; color: var(--color-danger)  !important; border-color: transparent !important; }
.list-group-item-warning { background: var(--color-warning-subtle) !important; color: var(--color-warning) !important; border-color: transparent !important; }
.list-group-item-info    { background: var(--color-info-subtle)    !important; color: var(--color-info)    !important; border-color: transparent !important; }
.list-group-item-success { background: var(--color-success-subtle) !important; color: var(--color-success) !important; border-color: transparent !important; }


/* ── 17. WIDGET DE ALERTA FLOTANTE ──────────────────────────── */

#alerta-flotante .card {
  border: 1px solid var(--color-danger-subtle);
  max-width: 300px;
}
#alerta-flotante .card-header {
  background: var(--color-danger) !important;
  color: #fff !important;
  border-bottom: none;
}


/* ── 18. STAT CARDS (métricas dashboard) ────────────────────── */

.stat-card {
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: default;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  font-weight: 500;
}

.stat-primary .stat-icon { background: var(--color-primary-subtle); color: var(--color-primary-text); }
.stat-success .stat-icon { background: var(--color-success-subtle); color: var(--color-success); }
.stat-warning .stat-icon { background: var(--color-warning-subtle); color: var(--color-warning); }
.stat-danger  .stat-icon { background: var(--color-danger-subtle);  color: var(--color-danger); }
.stat-info    .stat-icon { background: var(--color-info-subtle);    color: var(--color-info); }
.stat-neutral .stat-icon { background: var(--surface-hover);        color: var(--text-muted); }

/* ── 19. UTILIDADES ─────────────────────────────────────────── */

.text-primary { color: var(--color-primary-text) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger  { color: var(--color-danger)  !important; }
.text-info    { color: var(--color-info)    !important; }

.border { border-color: var(--border-default) !important; }
.border-primary { border-color: var(--color-primary) !important; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade { animation: fadeIn 0.3s ease-out; }


/* ── 19. SCROLLBAR ──────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); }


/* ── 20. RESPONSIVE GENERAL ─────────────────────────────────── */

@media (max-width: 768px) {
  .card-body { padding: 1rem; }
  .card-header { padding: 0.75rem 1rem; }
  .table { font-size: 0.8rem; }
  .table td, .table th { padding: 0.5rem 0.65rem; }
  .modal-dialog { margin: 0.5rem; }
  h1 { font-size: 1.3rem; }
}

@media (max-width: 576px) {
  .btn { font-size: 0.8rem; }
  .btn-sm { font-size: 0.72rem; padding: 0.22rem 0.5rem; }
  .btn-xs { font-size: 0.67rem; padding: 0.12rem 0.4rem; }
  .badge { font-size: 0.65rem; }
  .modal-content { border-radius: 12px; }
  .table { font-size: 0.75rem; }
}

/* ── 21. MEGA-MENÚ DE CONFIGURACIÓN ─────────────────────────── */

.config-megamenu {
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius: 12px;
}
.config-megamenu .dropdown-item {
  font-size: 0.875rem;
  white-space: normal;
}
.config-megamenu .dropdown-item:hover {
  background-color: rgba(13, 110, 253, 0.08);
}
.config-megamenu h6 {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 0.35rem;
}
@media (min-width: 768px) {
  .config-megamenu-inner {
    min-width: 600px;
    max-width: 720px;
  }
}
@media (max-width: 767.98px) {
  .config-megamenu {
    max-width: 90vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   §DARK-FIX (2026-07-25) — Capa de saneamiento para modo oscuro.
   Muchas plantillas usan utilidades Bootstrap de color FIJO claro
   (bg-white, bg-light, text-dark, table-light) o colores quemados.
   En dark las remapeamos a tokens del DS para que nada quede
   "fondo blanco con letras blancas" ni "fondo oscuro con letras negras".
   ═══════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--surface-card) !important;
}
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface-hover) !important;
}
[data-bs-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
  --bs-table-bg: var(--surface-hover);
  --bs-table-color: var(--text-primary);
  background-color: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: var(--surface-hover);
  --bs-table-color: var(--text-primary);
}
/* Badges claros de Bootstrap sobre fondo oscuro */
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.text-dark {
  background-color: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
/* Estilos inline "background:#fff|white" en vistas de app (no impresión):
   neutralizarlos vía atributo — cubre plantillas viejas sin tocarlas 1 a 1. */
[data-bs-theme="dark"] .app-content [style*="background:#fff"],
[data-bs-theme="dark"] .app-content [style*="background: #fff"],
[data-bs-theme="dark"] .app-content [style*="background:white"],
[data-bs-theme="dark"] .app-content [style*="background: white"],
[data-bs-theme="dark"] .app-content [style*="background-color:#fff"],
[data-bs-theme="dark"] .app-content [style*="background-color: #fff"],
[data-bs-theme="dark"] .app-content [style*="background-color:white"],
[data-bs-theme="dark"] .app-content [style*="background-color: white"] {
  background-color: var(--surface-card) !important;
  color: var(--text-primary);
}