/* static/common/css/base.css */
/* =========================================================
   Base UI Theme – CristecnoViajes
   Paleta HSL dinámica + intensidades + fallbacks reales
   ========================================================= */
   /* static\common\css\base.css */

/* ======= Paleta controlada por variables HSL + intensidad ======= */
:root{
  /* Color de marca (HSL): OMSTA Blue 600 #2F6FB3. El personalizador de tema
     puede sobreescribirlo; este es el valor de fábrica del ecosistema. */
  --brand-h: 211;     /* H: 0-360 (azul ~210-225) */
  --brand-s: 58%;     /* S: saturación */
  --brand-l: 44%;     /* L: luminosidad */

  /* Intensidad general y mezcla sidebar */
  --intensity: 0.18;  /* 0.10=suave · 0.18=media · 0.28=fuerte · 0.38=deep */
  --mix: 9%;         /* mezcla de color en la sidebar (con white). ↑ = más azul */

  /* Extras ajustables desde el customizer */
  --nav-blur: 8px;
  --shadow-alpha: 0.10;

  /* Derivadas */
  --primary-color: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --secondary-color: hsl(calc(var(--brand-h) + 10) var(--brand-s) calc(var(--brand-l) + 6%));
  /* Estado de reserva Voucher: deliberadamente distinto de Pago/Pagado. */
  --voucher-color: #6d28d9;
  --voucher-color-accent: #7c3aed;
  --voucher-color-border: #5b21b6;
  --voucher-color-ring: rgba(109, 40, 217, 0.22);
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --light-bg: #f8fafc;

  /* Navbar con tinte azul dinámico */
  --navbar-bg:
    linear-gradient(
      180deg,
      hsla(var(--brand-h) var(--brand-s) var(--brand-l) / calc(var(--intensity) + 0.06)),
      hsla(var(--brand-h) var(--brand-s) var(--brand-l) / calc(max(var(--intensity) - 0.06, 0.04)))
    ),
    rgba(255,255,255,0.92);
  --navbar-border: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / calc(var(--intensity) + 0.15));

  /* Sidebar (la variable usa color-mix; el fallback real está en la regla .sidebar) */
  --sidebar-border: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.18);
  --sidebar-bg: color-mix(in srgb, white calc(100% - var(--mix)), var(--primary-color) var(--mix));
  --hover-bg: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / calc(var(--intensity) + 0.10));

  /* Sombras */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-xl: 0 15px 35px rgba(0,0,0,0.15);
  --shadow-blue: 0 8px 20px hsla(var(--brand-h) var(--brand-s) var(--brand-l) / var(--shadow-alpha));

  /* Tamaños */
  --sidebar-width: 280px;
  --nav-height: 64px;

  /* Radios (fase 4 de la segunda auditoría, 2026-10): los controles
     (botones, campos, selects, grupos) comparten 8px para alinear en una
     misma fila; las tarjetas y paneles 12px; modales y superficies grandes
     16px. Antes convivían 9, 10, 12, 13,6 y 15,2px en controles vecinos. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-control: var(--radius-md);
  --border-radius: var(--radius-lg);

  /* Marca en RGB. Bootstrap compone sus utilidades (`.text-primary`,
     `.bg-primary`, enlaces, `bg-opacity-*`) con tripletas r, g, b que CSS no
     sabe derivar de un HSL: las fija el script del <head>
     (`user_ui_bootstrap`) y el personalizador de tema. Estos valores son
     los de la marca de fábrica (211 58% 44%) por si el script no corre. */
  --brand-rgb: 47, 110, 177;
  --brand-ink-rgb: 41, 95, 153;           /* L-6: texto de marca, 5,9:1 sobre blanco */
  --brand-ink-hover-rgb: 32, 75, 121;     /* L-14 */
  --brand-ink-dark-rgb: 142, 182, 225;    /* L 72 %: texto de marca en oscuro */
  --brand-ink-dark-hover-rgb: 174, 203, 234;
  --brand-ink: rgb(var(--brand-ink-rgb));

  /* Texto secundario que llega a 4,5:1 también sobre los grises claros de
     las tarjetas (#f1f5f9). #94a3b8 y #8b99a8, que usaban varias hojas
     como «muted», se quedaban en 2,5-2,9:1. */
  --color-text-subtle: #5b6b7f;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.16);

  /* Tinta de los tonos semánticos para texto e iconos: ≥4,5:1 sobre blanco
     y sobre su fondo sutil. Los verdes, ámbar y cian «de relleno» (#16a34a,
     #f59e0b, #06b6d4) quedaban en 2-3,3:1 como texto. Cambian solos en
     oscuro (bloque [data-bs-theme="dark"] de abajo). */
  --tone-success-ink: #157347;
  --tone-warning-ink: #b45309;
  --tone-danger-ink: #b02a37;
  --tone-info-ink: #0e7490;
  --tone-violet-ink: #6d28d9;

  /* Anillo de foco: 2px de la marca separados 2px del control. Sobre blanco
     la marca da 4,7:1 (WCAG 2.2 pide 3:1 para el indicador). */
  --focus-ring-color: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --focus-ring-halo: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.22);

  /* Sombras de superficie: tarjeta en reposo, elevada y flotante. */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-raised: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-overlay: 0 16px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);

  /* Espaciado */
  --space-unit: 1rem;
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: var(--space-unit);
  --space-lg: calc(1.5 * var(--space-unit));
  --space-xl: calc(2 * var(--space-unit));

  /* Transiciones */
  --transition: 180ms ease;
}

/* ══════════════════════════════════════════════════════════════════════
   Bootstrap atado a la marca (fase 4 de la segunda auditoría, 2026-10)
   El botón primario ya seguía al personalizador, pero el resto de Bootstrap
   no: `.text-primary`, los enlaces, las casillas marcadas, las pestañas en
   píldora, la paginación activa, `.bg-primary` y las insignias seguían con
   el azul de fábrica #0d6efd. Convivían dos azules en la misma pantalla
   (medido: 520 textos con #0d6efd en 45 pantallas) y el color elegido en
   Personalización solo llegaba a la mitad de la interfaz.

   Los tonos semánticos de texto también se ajustan en claro: Bootstrap
   pinta `.text-warning` (#ffc107, 1,6:1 sobre blanco) y `.text-info`
   (#0dcaf0, 2,0:1) pensando en rellenos, y aquí se usan como texto de
   importes y estados. Las variantes de énfasis pasan de casi negro a un
   tono 700-800 del mismo color: insignias y alertas sutiles quedan en
   4,5-6,6:1 sin perder el color.
   ══════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
  --bs-primary: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-text-emphasis: hsl(var(--brand-h) var(--brand-s) 32%);
  --bs-primary-bg-subtle: hsl(var(--brand-h) var(--brand-s) 94%);
  --bs-primary-border-subtle: hsl(var(--brand-h) var(--brand-s) 82%);
  --bs-link-color: rgb(var(--brand-ink-rgb));
  --bs-link-color-rgb: var(--brand-ink-rgb);
  --bs-link-hover-color: rgb(var(--brand-ink-hover-rgb));
  --bs-link-hover-color-rgb: var(--brand-ink-hover-rgb);
  --bs-focus-ring-color: var(--focus-ring-halo);

  --bs-success-text-emphasis: #146c43;
  --bs-danger-text-emphasis: #b02a37;
  --bs-warning-text-emphasis: #92400e;
  --bs-info-text-emphasis: #0b5c70;
  --bs-secondary-text-emphasis: #41464b;
  /* `code` (códigos de cuenta, NCF): el rosa de fábrica quedaba en 4,3:1
     sobre las tablas grises. */
  --bs-code-color: #b02a6b;

  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
}

[data-bs-theme="dark"] {
  --brand-ink: rgb(var(--brand-ink-dark-rgb));
  --tone-success-ink: #75b798;
  --tone-warning-ink: #fcd34d;
  --tone-danger-ink: #f19aa2;
  --tone-info-ink: #67e8f9;
  --tone-violet-ink: #c4b5fd;
  --color-text-subtle: #94a3b8;
  --color-border: rgba(148, 163, 184, 0.18);
  --color-border-strong: rgba(148, 163, 184, 0.28);
  --focus-ring-color: hsl(var(--brand-h) var(--brand-s) 70%);
  --focus-ring-halo: hsla(var(--brand-h) var(--brand-s) 70% / 0.28);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 18px 44px rgba(0, 0, 0, 0.55);

  --bs-primary-text-emphasis: hsl(var(--brand-h) var(--brand-s) 76%);
  --bs-primary-bg-subtle: hsl(var(--brand-h) calc(var(--brand-s) * 0.6) 16%);
  --bs-primary-border-subtle: hsl(var(--brand-h) var(--brand-s) 34%);
  --bs-link-color: rgb(var(--brand-ink-dark-rgb));
  --bs-link-color-rgb: var(--brand-ink-dark-rgb);
  --bs-link-hover-color: rgb(var(--brand-ink-dark-hover-rgb));
  --bs-link-hover-color-rgb: var(--brand-ink-dark-hover-rgb);

  /* Los de Bootstrap para oscuro ya son claros: se restauran porque el
     bloque de arriba los cambió para claro. */
  --bs-success-text-emphasis: #75b798;
  --bs-danger-text-emphasis: #ea868f;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-info-text-emphasis: #6edff6;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-code-color: #e685b5;
}

/* Componentes de Bootstrap que fijan #0d6efd en su propia clase. */
.btn-primary {
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 7%));
  --bs-btn-active-border-color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 7%));
  --bs-btn-disabled-color: var(--brand-ink);
  --bs-btn-disabled-border-color: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.4);
}
.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.6);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-halo);
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2847, 110, 177, 0.6%29'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--focus-ring-halo); }
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}
.list-group {
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--bs-primary);
}
.pagination {
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring-halo);
}
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring-halo);
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

/* Tonos de texto en claro (ver cabecera del bloque). En oscuro manda el
   bloque «Modo oscuro del armazón», más abajo. */
[data-bs-theme="light"] .text-primary { color: rgba(var(--brand-ink-rgb), var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .text-success { color: rgba(21, 115, 71, var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .text-danger { color: rgba(176, 42, 55, var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .text-warning { color: rgba(180, 83, 9, var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .text-info { color: rgba(14, 116, 144, var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .text-secondary { color: rgba(92, 99, 106, var(--bs-text-opacity, 1)) !important; }
[data-bs-theme="light"] .link-primary { color: rgba(var(--brand-ink-rgb), var(--bs-link-opacity, 1)) !important; }
[data-bs-theme="light"] .link-secondary { color: rgba(92, 99, 106, var(--bs-link-opacity, 1)) !important; }
[data-bs-theme="light"] .link-success { color: rgba(21, 115, 71, var(--bs-link-opacity, 1)) !important; }
[data-bs-theme="light"] .link-danger { color: rgba(176, 42, 55, var(--bs-link-opacity, 1)) !important; }
/* Botones de contorno cuyo color de fábrica no llega a 3:1 como texto. */
[data-bs-theme="light"] .btn-outline-warning {
  --bs-btn-color: #b45309;
  --bs-btn-border-color: #f59e0b;
  --bs-btn-hover-color: #1c1400;
  --bs-btn-hover-bg: #fbbf24;
  --bs-btn-hover-border-color: #f59e0b;
  --bs-btn-active-color: #1c1400;
  --bs-btn-active-bg: #f59e0b;
}
[data-bs-theme="light"] .btn-outline-info {
  --bs-btn-color: #0e7490;
  --bs-btn-border-color: #22a6c4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0e7490;
  --bs-btn-hover-border-color: #0e7490;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0b5c70;
}
[data-bs-theme="light"] .btn-outline-success {
  --bs-btn-color: #157347;
  --bs-btn-border-color: #198754;
}
[data-bs-theme="light"] .btn-outline-danger {
  --bs-btn-color: #b02a37;
  --bs-btn-border-color: #dc3545;
}
[data-bs-theme="light"] .btn-outline-secondary {
  --bs-btn-color: #4b5563;
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: #1f2937;
  --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: rgba(15, 23, 42, 0.24);
  --bs-btn-active-color: #111827;
  --bs-btn-active-bg: #e2e8f0;
  --bs-btn-active-border-color: rgba(15, 23, 42, 0.24);
}

/* Insignias y fondos sutiles con su texto: `text-{tono}` sobre
   `bg-{tono}-subtle` quedaba en 3,4:1. El texto pasa al énfasis del tono. */
.badge.bg-primary-subtle, .bg-primary-subtle.text-primary { color: var(--bs-primary-text-emphasis) !important; }
.badge.bg-success-subtle, .bg-success-subtle.text-success { color: var(--bs-success-text-emphasis) !important; }
.badge.bg-danger-subtle, .bg-danger-subtle.text-danger { color: var(--bs-danger-text-emphasis) !important; }
.badge.bg-warning-subtle, .bg-warning-subtle.text-warning { color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-info-subtle, .bg-info-subtle.text-info { color: var(--bs-info-text-emphasis) !important; }
.badge.bg-secondary-subtle, .bg-secondary-subtle.text-secondary { color: var(--bs-secondary-text-emphasis) !important; }
/* El mismo patrón con relleno al 10 % (`bg-success bg-opacity-10 text-success`). */
.badge.bg-opacity-10.text-primary, .badge.bg-opacity-25.text-primary { color: var(--bs-primary-text-emphasis) !important; }
.badge.bg-opacity-10.text-success, .badge.bg-opacity-25.text-success { color: var(--bs-success-text-emphasis) !important; }
.badge.bg-opacity-10.text-danger, .badge.bg-opacity-25.text-danger { color: var(--bs-danger-text-emphasis) !important; }
.badge.bg-opacity-10.text-warning, .badge.bg-opacity-25.text-warning { color: var(--bs-warning-text-emphasis) !important; }
.badge.bg-opacity-10.text-info, .badge.bg-opacity-25.text-info { color: var(--bs-info-text-emphasis) !important; }
.badge.bg-opacity-10.text-secondary, .badge.bg-opacity-25.text-secondary { color: var(--bs-secondary-text-emphasis) !important; }
/* Un enlace dentro de una insignia toma el color de la insignia. */
.badge[class*="-subtle"] a:not(.btn) { color: inherit; }

/* Utilidades semánticas del estado Voucher. Se mantienen en la hoja global
   porque el estado aparece en reservas, Caja y Pagos, suplidores y dashboard. */
.bg-voucher,
.bg-voucher-subtle {
  background: linear-gradient(135deg, var(--voucher-color), var(--voucher-color-accent)) !important;
}

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

.bg-voucher.text-voucher,
.bg-voucher-subtle.text-voucher {
  color: #fff !important;
}

.border-voucher,
.border-voucher-subtle {
  border-color: var(--voucher-color-border) !important;
}

/* ========== Base ========== */
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
/* Familia, tamaño base e interlineado los define common/css/typography.css:
   aquí solo queda lo que es del tema, no del sistema tipográfico. */
body {
  background-color: #ffffff;
  min-height: 100vh;
  color: #333;
  padding-bottom: 80px;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--text-dark); margin-bottom: 1.5rem; }
/* Un título dentro de una superficie de color con texto claro (cabecera
   `bg-primary text-white`, `text-bg-*`) hereda ese color: con el color
   oscuro de arriba quedaba en 3,8:1 sobre la marca. */
:is(.text-white, .text-light, [class*="text-bg-"]) :is(h1, h2, h3, h4, h5, h6),
:is(.bg-primary, .bg-dark, .bg-success, .bg-danger, .bg-secondary):not([class*="bg-opacity"]) > :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}
:is(.bg-primary, .bg-dark, .bg-success, .bg-danger, .bg-secondary):not([class*="bg-opacity"]):not([class*="text-"]) > :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

/* ========== Layout con Sidebar ========== */
.layout.has-sidebar .main-shell { transition: margin-left var(--transition); }

/* Sidebar fija (desktop) */
.sidebar{
  background: var(--sidebar-bg);
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  z-index: 1029;
  padding: calc(var(--nav-height) + 8px) 0 var(--space-lg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 3px 0 12px rgba(50,120,173,0.06);
  transition: transform var(--transition);
  overflow-y: auto;
}

/* Header de la sidebar */
.sidebar .sidebar-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--sidebar-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(244,248,253,0.9));
}

/* Links sidebar */
.sidebar .nav-link{
  color: #0f172a;
  padding: 0.85rem 1rem;
  margin: 0.25rem 0.75rem;
  border-radius: var(--border-radius);
  display: flex; align-items: center; gap: .5rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  position: relative;
}
.sidebar .nav-link .bi{ font-size: 1.2rem; width: 24px; color: #334155; }
.sidebar .nav-link:hover{ background: var(--hover-bg); color: #0b1220; transform: translateX(2px); }
.sidebar .nav-link.active{
  background: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.14);
  color: #0b1220;
  box-shadow: var(--shadow-xs) inset;
}
.sidebar .nav-link.active::before{
  content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px; background: var(--primary-color);
}
.sidebar .section-label{ letter-spacing: .08em; color: #3f4c5a; }

/* Ocultar totalmente la sidebar cuando se elige hidden */
.sidebar-hidden .sidebar { transform: translateX(-100%); pointer-events: none; }
/* La barra fija aparece desde 992px: a 768 dejaba 488px de contenido y las
   rejillas col-md-* (pensadas para ~720px) se apretaban. Debajo, el menú es
   el panel deslizante, como en el teléfono. Mismo corte en layout.css,
   layout.js y la barra del formulario de reservas. */
@media (min-width: 992px){
  .layout.has-sidebar .main-shell { margin-left: var(--sidebar-width); }
  .sidebar-hidden.layout.has-sidebar .main-shell { margin-left: 0; }
}

/* En móvil y tableta, la sidebar fija no se usa (offcanvas manda) */
@media (max-width: 991.98px){
  .sidebar { transform: translateX(-100%); pointer-events: none; }
  .layout.has-sidebar .main-shell { margin-left: 0 !important; }
}

/* ========== Offcanvas móvil ========== */
.offcanvas-nav{
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}
.offcanvas-nav .offcanvas-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(244,248,253,0.95));
  border-bottom: 1px solid var(--sidebar-border);
}
.offcanvas-nav .section-title{
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 1rem 0 .25rem;
}
.offcanvas-nav .list-group-item{ border: 0; border-radius: .6rem; margin-bottom: .25rem; }
.offcanvas-nav .list-group-item.active,
.offcanvas-nav .list-group-item:hover{ background: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.14); color: #0b1220; }

/* ========== Tarjetas ========== */
/* Borde fino + sombra corta: la tarjeta se separa del fondo sin flotar.
   Antes no tenía borde y la sombra de 4px se perdía sobre fondos claros. */
.card{
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--bs-body-bg); overflow: hidden; position: relative;
}

.card-header{
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
}
.card-footer{ background: var(--bs-tertiary-bg); border-top: 1px solid var(--color-border); }
/* Cabecera de tarjeta con título a un lado y acciones al otro (44
   plantillas): en el teléfono las acciones bajan de fila en vez de dejar
   el título en una columna estrecha. */
@media (max-width: 575.98px){
  .card-header.d-flex.justify-content-between{ flex-wrap: wrap; row-gap: .5rem; }
}

/* ========== Botones ========== */
/* Un solo radio para todos los controles: un botón junto a un campo o a
   otro botón de contorno queda alineado (el primario no tenía borde y
   medía 2px menos que el de contorno de al lado). */
/* Medida única: 14px (la base de la aplicación) y 40px de alto. Bootstrap
   los dejaba en 16px, más grandes que el texto que acompañan, y el primario
   llevaba relleno propio: medía 40px junto a botones de 36px. */
.btn{
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: var(--text-base);
  --bs-btn-line-height: 1.5;
  font-weight: 500; border-radius: var(--radius-control); transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-lg{
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: var(--text-md);
}
.btn-primary:hover{ box-shadow: var(--shadow-raised); }
/* Un icono dentro de un botón relleno toma el color del botón. Reglas de
   sección como `.room-header i { color: marca }` lo pintaban con la tinta de
   marca sobre el propio relleno de marca (2,4:1, alta de hotel). */
:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-dark, .btn-info, .btn-warning) :is(i, .bi){ color: inherit; }
.btn-hover-scale{ transition: transform 0.2s ease; }
.btn-hover-scale:hover{ transform: scale(1.05); }

/* ========== Formularios ========== */
.form-control{ border-radius: var(--radius-control); border: 1px solid var(--color-border-strong); transition: var(--transition); }
/* Campos a la medida de los botones en escritorio: 14px y 40px de alto
   (Bootstrap los dejaba en 16px y 38px junto a etiquetas y botones de
   14px). En el teléfono siguen a 16px: por debajo, iOS hace zoom al
   enfocar. */
@media (min-width: 768px) {
  /* :where() deja la especificidad en la de Bootstrap: una hoja de módulo
     que ajusta sus campos sigue mandando. */
  .form-control:where(:not(.form-control-sm, .form-control-lg, [type="file"], textarea)),
  .form-select:where(:not(.form-select-sm, .form-select-lg)) {
    font-size: var(--text-base);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  textarea.form-control:where(:not(.form-control-sm, .form-control-lg)) { font-size: var(--text-base); }
  .input-group:where(:not(.input-group-sm, .input-group-lg)) > .input-group-text { font-size: var(--text-base); }
}
.form-control:focus{ border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-ring-halo); }
.select2-container .select2-selection{ border-radius: var(--radius-control) !important; min-height: 42px; }
/* Texto de ejemplo de select2: #999 de fábrica (2,85:1). */
.select2-container .select2-selection__placeholder{ color: var(--color-text-subtle) !important; }

/* ========== Dropdowns ========== */
.dropdown-menu{ border: 1px solid var(--color-border); box-shadow: var(--shadow-overlay); border-radius: var(--radius-lg); margin-top: var(--space-xs); padding: 0.375rem; }
.dropdown-menu .dropdown-item{ border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; transition: var(--transition); }
.dropdown-menu .dropdown-item:hover{ background: rgba(15, 23, 42, 0.05); }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{ background: var(--bs-primary); color: #fff; }

/* ========== Interactivos ========== */
.interactive{ transition: var(--transition); cursor: pointer; }
.interactive:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ========== Overlay de Carga ========== */
.loading-overlay{ position: absolute; inset: 0; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius); z-index: 10; }

/* ========== Modales ========== */
.modal-content{ border: none; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-overlay); }
.modal-header{ background: var(--bs-body-bg); border-bottom: 1px solid var(--color-border); padding: 1.125rem var(--space-lg); }
.modal-footer{ background: var(--bs-tertiary-bg); border-top: 1px solid var(--color-border); }

/* ========== Avatares ========== */
.avatar-xs { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.9rem; }
.avatar-md { width: 48px; height: 48px; font-size: 1.1rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* ========== Paginación ========== */
/* Siete botones no caben en 320px: la lista salta de línea en vez de
   desbordar el documento (medido en /reservas/ a 375px: 406px de ancho). */
.pagination{ flex-wrap: wrap; row-gap: 0.35rem; }
.pagination .page-item{ margin: 0 0.25rem; }
.pagination .page-link{
  border-radius: var(--border-radius);
  border: none; min-width: 38px; text-align: center; transition: var(--transition);
}
.pagination .page-link:hover{ background: var(--light-bg); }
.pagination .page-item.active .page-link{ background: var(--primary-color); color: white; }

/* El enlace medía 38x29px: ancho suficiente, alto no. La paginacion se usa en
   22 pantallas, asi que la medida va aqui y no en cada listado. Antes solo
   regía bajo 768px; el objetivo de 40px del proyecto vale en todo ancho. */
.pagination .page-link{
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
}

/* ========== Subrayado hover para nav genérica ========== */
.nav-link::after{
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--secondary-color); transition: width var(--transition);
}
.nav-link:hover::after{ width: 100%; }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--light-bg); }
::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 575.98px){
  body{ font-size: 0.925rem; }
  .main-content{ padding: 1rem !important; }
  .btn{ font-size: 0.9rem; padding: 0.5rem 1rem; }
}
@media (max-width: 767.98px){
  .main-content{ margin-left: 0 !important; padding: 1.5rem; padding-bottom: 80px; }
  .table-responsive{ margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
  .table-responsive::after{ content: ''; display: block; width: 1rem; flex: 0 0 1rem; }
}
@media (min-width: 768px){
  body{ padding-bottom: 0; }
  .main-content{ padding: 2.5rem; }
}

@media (min-width: 1600px){
  :root{ --sidebar-width: 320px; }
  .main-content{ padding: 3rem 4rem; }
}

/* ========== SweetAlert2 ========== */
.custom-swal-container { font-family: var(--font-ui); }
.custom-swal-popup { border-radius: 12px !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); }
.custom-swal-title { font-size: 1.5rem !important; font-weight: 600 !important; color: var(--text-dark) !important; margin-bottom: 1rem !important; }
.custom-swal-html { font-size: 1rem !important; color: #475569 !important; line-height: 1.6 !important; text-align: left !important; max-height: 60vh; overflow-y: auto; padding: 0 0.5rem; }
.custom-swal-confirm-btn { font-size: 1rem !important; font-weight: 500 !important; padding: 0.75rem 1.5rem !important; border-radius: 8px !important; transition: all 0.2s ease !important; margin-top: 1.5rem !important; }
.error-swal .swal2-icon { font-size: 1.5rem !important; margin: 1rem auto 0.5rem !important; }
.error-swal .swal2-x-mark-line { background-color: #dc2626 !important; }
.error-confirm-btn { background: #2563eb !important; border: none !important; }
.error-confirm-btn:hover { background: #1d4ed8 !important; transform: translateY(-1px); }
.success-swal .swal2-success { border-color: #22c55e !important; }
.success-swal .swal2-success-ring { border-color: rgba(34, 197, 94, 0.3) !important; }
.success-confirm-btn { background: #22c55e !important; border: none !important; }
.success-confirm-btn:hover { background: #16a34a !important; transform: translateY(-1px); }

.custom-alert-content { max-width: 100%; word-wrap: break-word; }
.custom-alert-content ul { list-style-type: disc; margin-left: 1.5rem; padding-left: 0.5rem; margin-top: 0.5rem; }
.custom-alert-content li { margin-bottom: 0.5rem; }
.custom-alert-content p { margin-bottom: 0.75rem; }

/* ========== Theme Customizer (offcanvas) ========== */
.theme-customizer{ width: 360px; border-left: 1px solid rgba(0,0,0,0.08); }
.theme-customizer .offcanvas-header{
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(244,248,253,0.7));
}
.swatch-btn{
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  background: var(--swatch, #2563eb);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.swatch-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* =========================================================
   Fallbacks reales y prioridad para sidebar y offcanvas
   (pegar al final del archivo para máximo efecto)
   ========================================================= */

/* --- Fallbacks reales y prioridad para la sidebar y el offcanvas --- */
.sidebar{
  /* Fallback para navegadores sin color-mix */
  background: #f4f8fd;
  /* Valor principal controlado por variables → si color-mix es válido, se aplica; si no, queda el fallback */
  background: var(--sidebar-bg) !important;

  /* Nuestro borde con prioridad (por si queda alguna clase de BS rondando) */
  border-right: 1px solid var(--sidebar-border) !important;
}

/* El offcanvas móvil debe verse igual que la sidebar */
.offcanvas-nav{
  background: #f4f8fd;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

/* Para los items activos/hover en sidebar/offcanvas usamos el tinte de marca */
.sidebar .nav-link.active,
.offcanvas-nav .list-group-item.active,
.offcanvas-nav .list-group-item:hover{
  background: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.14) !important;
  color: #0b1220;
}

/* Si el navegador NO soporta color-mix, aseguramos el fallback */
@supports not (background: color-mix(in srgb, black, white)) {
  :root { --sidebar-bg: #f4f8fd; }
}

.shadow-sm-hover{ transition: box-shadow .15s ease; }
.shadow-sm-hover:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.app-breadcrumb .breadcrumb{ --bs-breadcrumb-divider: "›"; }
.app-breadcrumb .breadcrumb a{ text-decoration: none; }

.dropzone{
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
  cursor: pointer; transition: .15s ease;
}
.dropzone:hover{ background:#f1f5f9; }
.dropzone.dragover{ background:#e2e8f0; border-color:#94a3b8; }
.dropzone .dz-icon{
  width: 40px; height: 40px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: #eef2ff; color:#4f46e5;
  font-size: 20px;
}
.dropzone .dz-title{ font-weight: 600; }

/* Insignias sutiles: el fondo es el sutil del tono y el texto su énfasis
   (bloque «Bootstrap atado a la marca»). Antes fijaban fondos y textos
   propios, con el info en #0aa2c0 (2,6:1). */
.badge.bg-primary-subtle { background: var(--bs-primary-bg-subtle); }
.badge.bg-success-subtle { background: #e3f3ea; }
.badge.bg-secondary-subtle { background: #eef1f5; }
.badge.bg-info-subtle { background: #e0f5fa; }
.badge.bg-warning-subtle { background: #fff1d6; }
.badge.text-decoration-none:hover { filter: brightness(0.97); }

/* =========================================================
   Mejoras globales para consistencia
   ========================================================= */

/* Mejorar consistencia de avatares */
.avatar, .avatar-fallback, .employee-avatar {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avatar:hover, .employee-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Las migas de pan se definen en layout.css (una sola definición). */

/* Toast consistente */
#liveToast .toast-body .toast-icon {
  font-size: 1.1rem;
}

/* Agrega al final de static/common/css/base.css */

/* Mejoras para select2 global */
.select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1060 !important; /* Mayor que modales */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #3b82f6 !important;
    color: white !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
    background-color: #f3f4f6;
    color: #111827;
}

/* Mejoras para placeholders */
::placeholder {
    color: var(--color-text-subtle) !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: var(--color-text-subtle) !important;
}

::-ms-input-placeholder {
    color: var(--color-text-subtle) !important;
}

/* Scrollbar mejorado para tablas */
.table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ================================================================
   NAV ENHANCED — CristecnoViajes
   Mejoras visuales para sidebar, topbar y offcanvas móvil
   ================================================================ */

/* ─── 1. TOPBAR ─────────────────────────────────────────────── */

.navbar-clean {
  height: var(--nav-height);
  backdrop-filter: saturate(200%) blur(var(--nav-blur, 10px));
  -webkit-backdrop-filter: saturate(200%) blur(var(--nav-blur, 10px));
}

/* Botones de ícono más refinados */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: #374151;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background: rgba(15, 23, 42, 0.07);
  border-color: rgba(15, 23, 42, 0.09);
  color: #0f172a;
}
.icon-btn:active {
  background: rgba(15, 23, 42, 0.12);
}

/* Avatar con mejor anillo */
.avatar,
.avatar-fallback {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 3.5px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.avatar:hover,
.avatar-fallback:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--primary-color);
  transform: scale(1.04);
}

/* Brand tipografía refinada */
.brand-fallback {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

/* ─── 2. SIDEBAR — estructura general ───────────────────────── */

/* Quitar subrayado hover (herencia de nav-link::after en base.css) */
.sidebar .nav-link::after,
.sidebar button.nav-link::after {
  display: none !important;
}

/* Ajuste de scroll y padding */
.sidebar {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.12) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 4px;
}

/* ─── 3. SIDEBAR — cabecera ─────────────────────────────────── */

.sidebar .sidebar-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(244, 248, 253, 0.92) 100%
  );
  border-bottom: 1px solid var(--sidebar-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sidebar-brand-name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
}
.sidebar-brand-tagline {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--primary-color);
  text-transform: uppercase;
  opacity: 0.75;
}

/* ─── 4. SIDEBAR — etiquetas de sección ────────────────────── */

.sidebar .section-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0 0.9rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.sidebar .section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(148, 163, 184, 0.35), transparent);
  border-radius: 1px;
}

/* Sub-etiqueta dentro de Contabilidad */
.sidebar .nav-subgroup-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b0bec7;
  padding: 0.7rem 1.1rem 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar .nav-subgroup-label::before {
  content: '';
  width: 14px;
  height: 1px;
  background: rgba(148, 163, 184, 0.4);
  border-radius: 1px;
}

/* ─── 5. SIDEBAR — nav items ────────────────────────────────── */

.sidebar .nav-link {
  padding: 0.575rem 0.85rem;
  margin: 0.1rem 0.6rem;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.855rem;
  font-weight: 500;
  color: #1e293b;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  position: relative;
  line-height: 1.3;
  /* Quitar el translate del base.css */
  transform: none !important;
}

.sidebar .nav-link .bi {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.14s ease;
}

.sidebar .nav-link:hover {
  background: var(--hover-bg);
  color: #0f172a;
}
.sidebar .nav-link:hover .bi {
  color: var(--primary-color);
}

/* Estado activo */
.sidebar .nav-link.active {
  background: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.11);
  color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sidebar .nav-link.active .bi {
  color: var(--primary-color);
}

/* Indicador activo — barra izquierda */
.sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary-color);
}

/* ─── 6. SIDEBAR — dropdown toggle (Notas, etc.) ────────────── */

.sidebar button.nav-link.dropdown-toggle {
  border: none;
  background: none;
  width: calc(100% - 1.2rem);
  text-align: left;
  cursor: pointer;
  /* Corregir para que sea consistente con links */
  padding: 0.575rem 0.85rem;
  margin: 0.1rem 0.6rem;
}

/* Ocultar flecha nativa de Bootstrap */
.sidebar button.nav-link.dropdown-toggle::after { display: none !important; }

/* Flecha rotable */
.sidebar .snav-arrow {
  margin-left: auto;
  font-size: 0.72rem;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.14s ease;
  flex-shrink: 0;
}
.sidebar button.nav-link[aria-expanded="true"] .snav-arrow {
  transform: rotate(90deg);
  color: var(--primary-color);
}
.sidebar button.nav-link[aria-expanded="true"] {
  color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 5%));
}
.sidebar button.nav-link[aria-expanded="true"] .bi:first-child {
  color: var(--primary-color);
}

/* Sub-items (dentro del collapse, ej. Notas > Proveedores, Clientes) */
.sidebar .collapse .nav,
.sidebar .collapsing .nav {
  border-left: 2px solid hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.18);
  margin-left: 1.5rem;
  padding-left: 0.25rem;
}
.sidebar .collapse .nav .nav-link,
.sidebar .collapsing .nav .nav-link {
  font-size: 0.82rem;
  font-weight: 400;
  color: #475569;
  padding: 0.45rem 0.65rem;
  margin: 0.05rem 0.35rem;
}
.sidebar .collapse .nav .nav-link.active,
.sidebar .collapsing .nav .nav-link.active {
  color: var(--primary-color);
  font-weight: 600;
}
.sidebar .collapse .nav .nav-link::before { display: none; }

/* ─── 7. SIDEBAR — pie de página ────────────────────────────── */

.sidebar > div:last-child {
  border-top: 1px solid var(--sidebar-border);
  background: linear-gradient(0deg, rgba(255,255,255,0.7), transparent);
}

/* ─── 8. OFFCANVAS — navegación móvil ───────────────────────── */

/* Quitar subrayado de hover */
.offcanvas-nav .list-group-item-action::after { display: none !important; }

.offcanvas-nav .section-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 1rem 0 0.3rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.offcanvas-nav .section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(148, 163, 184, 0.3), transparent);
}

.offcanvas-nav .nav-subgroup-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b0bec7;
  padding: 0.6rem 0.25rem 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.offcanvas-nav .nav-subgroup-label::before {
  content: '';
  width: 12px;
  height: 1px;
  background: rgba(148, 163, 184, 0.4);
}

.offcanvas-nav .list-group-item {
  border: 0;
  border-radius: 9px;
  margin-bottom: 0.15rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #1e293b;
  transition: background 0.13s ease, color 0.13s ease;
}
.offcanvas-nav .list-group-item .bi {
  font-size: 1rem;
  width: 18px;
  text-align: center;
  color: #64748b;
  flex-shrink: 0;
}
.offcanvas-nav .list-group-item.active,
.offcanvas-nav .list-group-item:hover {
  background: hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.10);
  color: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
}
.offcanvas-nav .list-group-item.active .bi,
.offcanvas-nav .list-group-item:hover .bi {
  color: var(--primary-color);
}
.offcanvas-nav .list-group-item.active {
  font-weight: 600;
}

/* Sub-items en offcanvas (ej. Notas) */
.offcanvas-nav .list-group.ms-2.mt-2 {
  border-left: 2px solid hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.18);
  padding-left: 0.3rem;
}
.offcanvas-nav .list-group.ms-2.mt-2 .list-group-item {
  font-size: 0.83rem;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
  color: #475569;
}

/* Dropdown toggle en offcanvas */
.offcanvas-nav button.list-group-item.dropdown-toggle::after { display: none !important; }
.offcanvas-nav button.list-group-item[aria-expanded="true"] .snav-arrow {
  transform: rotate(90deg);
}

/* ─── 9. SIDEBAR — separadores entre secciones ──────────────── */

.sidebar .nav-section-gap {
  height: 0.65rem;
}

/* ─── 10. ANIMACIÓN de apertura del collapse ────────────────── */

.sidebar .collapse.show + .nav-subgroup-label,
.sidebar .collapsing + .nav-subgroup-label {
  margin-top: 0.25rem;
}

/* ─── 11. Offcanvas header refinado ─────────────────────────── */

.offcanvas-nav .offcanvas-header {
  padding: 1rem 1.1rem;
}

.offcanvas-nav .offcanvas-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* ─── 12. Estado de focus mejorado ──────────────────────────── */

.sidebar .nav-link:focus-visible,
.offcanvas-nav .list-group-item:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
  box-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════
   Modo oscuro del armazón (auditoría contable 2026-09, fase 8)
   El personalizador ofrece el tema oscuro, pero el armazón fijaba fondos y
   textos claros: el cuerpo seguía blanco y la barra lateral clara, y cada
   pantalla quedaba a medias. Aquí el armazón toma los colores del tema de
   Bootstrap 5.3; en modo claro no cambia nada.
   ══════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --text-dark: #e2e8f0;
  --text-muted: #94a3b8;
  --light-bg: #111827;
  --sidebar-bg: #111827;
  --sidebar-border: rgba(148, 163, 184, 0.16);
  --hover-bg: rgba(148, 163, 184, 0.12);
  --navbar-bg:
    linear-gradient(
      180deg,
      hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.18),
      hsla(var(--brand-h) var(--brand-s) var(--brand-l) / 0.08)
    ),
    rgba(17, 24, 39, 0.94);
}

[data-bs-theme="dark"] body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .sidebar {
  background: #111827 !important;
  color: #e2e8f0;
}

[data-bs-theme="dark"] .sidebar .nav-link,
[data-bs-theme="dark"] .sidebar .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-link.active,
[data-bs-theme="dark"] .offcanvas-nav .list-group-item:hover,
[data-bs-theme="dark"] .offcanvas-nav .list-group-item.active {
  color: #e2e8f0;
}

[data-bs-theme="dark"] .sidebar .nav-link .bi {
  color: #94a3b8;
}

[data-bs-theme="dark"] .sidebar .section-label {
  color: #94a3b8;
}

[data-bs-theme="dark"] .offcanvas-nav .offcanvas-header {
  background: #111827;
}

/* select2 (temas default y bootstrap-5) fija fondos blancos y grises fijos
   en el control, la lista y las etiquetas. */
[data-bs-theme="dark"] .select2-container .select2-selection {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__rendered {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__placeholder,
[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__clear {
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .select2-container .select2-selection .select2-selection__choice {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container.select2-container--disabled .select2-selection {
  background-color: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-container .select2-search__field {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container .select2-results__option.select2-results__option--selected {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .select2-container .select2-results__option.select2-results__option--highlighted {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Bootstrap deja .text-success/.text-danger/.text-primary con el tono de modo
   claro: sobre fondo oscuro no llegan a 3:1. En oscuro usan su variante clara. */
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .link-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .link-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-color) !important; }
/* .btn-light pasa a terciario en oscuro (más abajo): su acento sube a 76 % de luminosidad. */
[data-bs-theme="dark"] .btn-light.text-primary { color: hsl(var(--brand-h) var(--brand-s) 76%) !important; }
/* .btn-outline-dark es texto casi negro: en oscuro desaparece. */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: var(--bs-emphasis-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-emphasis-color);
  --bs-btn-active-border-color: var(--bs-emphasis-color);
}

/* ══════════════════════════════════════════════════════════════════════
   Modo oscuro por tema (auditoría contable 2026-09, fase 8)
   Esta hoja fijaba fondos claros y textos oscuros: en el tema oscuro
   quedaban tarjetas blancas con texto claro. Aquí toman los colores del
   tema de Bootstrap 5.3; en modo claro no cambia nada.
   ══════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .card {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .card-header {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover {
  background: rgba(148, 163, 184, 0.12);
}

[data-bs-theme="dark"] .card-footer {
  border-top: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .form-control {
  border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .loading-overlay {
  background: rgba(var(--bs-body-bg-rgb), 0.8);
}

[data-bs-theme="dark"] .modal-header {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .modal-footer {
  border-top: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .custom-swal-html {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .dropzone {
  border: 1px dashed var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .dropzone:hover {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .dropzone.dragover {
  background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .dropzone .dz-icon {
  background: var(--bs-tertiary-bg);
  color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .badge.bg-primary-subtle {
  background: var(--bs-tertiary-bg);
  color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .badge.bg-success-subtle {
  background: var(--bs-success-bg-subtle);
}

[data-bs-theme="dark"] .badge.bg-secondary-subtle {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .badge.bg-info-subtle {
  background: var(--bs-info-bg-subtle);
}

[data-bs-theme="dark"] .badge.bg-warning-subtle {
  background: var(--bs-warning-bg-subtle);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-track {
  background: var(--bs-tertiary-bg);
}

/* ── Modo oscuro, fase 1 (2026-10-03): piezas del armazón medidas bajo 3:1 ──
   Avatar de la barra (azul sobre azul), offcanvas móvil (texto #1e293b sobre
   #111827), botones .btn-light usados como acción neutra en los listados y los
   subenlaces de la navegación (#475569 sobre #111827 = 2,3:1). */
[data-bs-theme="dark"] .avatar-fallback {
  background: hsla(var(--brand-h) var(--brand-s) 70% / 0.18);
  color: hsl(var(--brand-h) var(--brand-s) 80%);
  border-color: hsla(var(--brand-h) var(--brand-s) 70% / 0.35);
}
[data-bs-theme="dark"] .avatar-fallback:hover {
  box-shadow: 0 0 0 2px #111827, 0 0 0 4px hsl(var(--brand-h) var(--brand-s) 70%);
}
[data-bs-theme="dark"] .offcanvas-nav .offcanvas-title,
[data-bs-theme="dark"] .offcanvas-nav .list-group-item {
  color: #e2e8f0;
}
[data-bs-theme="dark"] .offcanvas-nav .list-group-item .bi,
[data-bs-theme="dark"] .offcanvas-nav .section-title,
[data-bs-theme="dark"] .offcanvas-nav .nav-subgroup-label {
  color: #94a3b8;
}
[data-bs-theme="dark"] .offcanvas-nav .list-group-item:hover,
[data-bs-theme="dark"] .offcanvas-nav .list-group-item.active {
  background: hsla(var(--brand-h) var(--brand-s) 70% / 0.16) !important;
  color: hsl(var(--brand-h) var(--brand-s) 80%);
}
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--bs-tertiary-bg);
  --bs-btn-disabled-bg: var(--bs-tertiary-bg);
  --bs-btn-disabled-border-color: var(--bs-border-color);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .sidebar .collapse .nav .nav-link,
[data-bs-theme="dark"] .sidebar .collapsing .nav .nav-link,
[data-bs-theme="dark"] .offcanvas-nav .list-group.ms-2.mt-2 .list-group-item {
  color: #cbd5e1;
}

/* ── Modo oscuro, fase 1: controles compartidos que seguían con tonos de día ──
   El botón de contorno primario usa la marca (hsl 206 55% 44%) como texto:
   2,6:1 sobre #212529. Los widgets de terceros (flatpickr, SweetAlert2) fijan
   fondos blancos. */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: hsl(var(--brand-h) var(--brand-s) 74%);
  --bs-btn-border-color: hsl(var(--brand-h) var(--brand-s) 60%);
  --bs-btn-hover-bg: hsl(var(--brand-h) var(--brand-s) 60%);
  --bs-btn-hover-border-color: hsl(var(--brand-h) var(--brand-s) 60%);
  --bs-btn-hover-color: #0b1220;
  --bs-btn-active-bg: hsl(var(--brand-h) var(--brand-s) 60%);
  --bs-btn-active-color: #0b1220;
}
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months {
  background: transparent;
  color: var(--bs-body-color);
  fill: var(--bs-body-color);
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay:hover {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  color: var(--bs-tertiary-color);
}
[data-bs-theme="dark"] .swal2-popup {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .custom-swal-html {
  color: var(--bs-body-color) !important;
}

/* ── Modo oscuro, fases 2-4: insignias sutiles y botones de contorno ────────
   `.badge.bg-success-subtle.text-success` y compañía quedaban con el texto de
   día (#166534 sobre verde al 15 %: 1,7:1, medido en Catálogos y Sucursales).
   Los botones de contorno secundario/peligro usan los grises y rojos de
   Bootstrap para claro (2,8-2,9:1 sobre #212529). Van al final de la hoja
   para ganar a las hojas de módulo por orden. */
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .badge.bg-primary-subtle.text-primary,
[data-bs-theme="dark"] .badge.text-bg-primary-subtle { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .badge.bg-success-subtle.text-success,
[data-bs-theme="dark"] .badge.text-bg-success-subtle { background: rgba(74, 222, 128, 0.16) !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle,
[data-bs-theme="dark"] .badge.bg-danger-subtle.text-danger,
[data-bs-theme="dark"] .badge.text-bg-danger-subtle { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .badge.bg-warning-subtle.text-warning,
[data-bs-theme="dark"] .badge.bg-warning-subtle.text-warning-emphasis,
[data-bs-theme="dark"] .badge.text-bg-warning-subtle { background: rgba(251, 191, 36, 0.18) !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .badge.bg-info-subtle.text-info,
[data-bs-theme="dark"] .badge.bg-info-subtle.text-info-emphasis,
[data-bs-theme="dark"] .badge.text-bg-info-subtle { background: rgba(34, 211, 238, 0.16) !important; color: #67e8f9 !important; }
[data-bs-theme="dark"] .badge.bg-secondary-subtle,
[data-bs-theme="dark"] .badge.bg-secondary-subtle.text-secondary,
[data-bs-theme="dark"] .badge.bg-secondary-subtle.text-secondary-emphasis,
[data-bs-theme="dark"] .badge.text-bg-secondary-subtle,
[data-bs-theme="dark"] .badge.text-bg-dark-subtle,
[data-bs-theme="dark"] .badge.bg-dark-subtle { background: rgba(148, 163, 184, 0.2) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #cbd5e1;
  --bs-btn-border-color: #64748b;
  --bs-btn-hover-bg: #475569;
  --bs-btn-hover-border-color: #64748b;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-active-bg: #475569;
  --bs-btn-active-color: #f8fafc;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #fca5a5;
  --bs-btn-border-color: #f87171;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #86efac;
  --bs-btn-border-color: #4ade80;
  --bs-btn-hover-bg: #16a34a;
  --bs-btn-hover-color: #052e16;
}
[data-bs-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #fcd34d;
  --bs-btn-border-color: #fbbf24;
  --bs-btn-hover-color: #1c1900;
}
[data-bs-theme="dark"] .btn-outline-info {
  --bs-btn-color: #67e8f9;
  --bs-btn-border-color: #22d3ee;
  --bs-btn-hover-color: #052c3a;
}
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #e2e8f0;
  --bs-btn-border-color: #94a3b8;
  --bs-btn-hover-bg: #e2e8f0;
  --bs-btn-hover-color: #0b1220;
}