/*
|--------------------------------------------------------------------------
| asm-oscuro.css — el tema oscuro donde no llegaba
|--------------------------------------------------------------------------
|
| POR QUÉ ESTE ARCHIVO EXISTE
| ---------------------------
| El tema oscuro se había escrito pantalla a pantalla: hay 417 reglas bajo
| data-theme="dark", pero 85 de ellas cuelgan de .asm-public-page y el resto
| de .asm-wallet, .asm-orders, .asm-orden, .asm-reserva… es decir, de las
| pantallas rediseñadas.
|
| Los resultados de búsqueda no están en ninguna de esas. Se inyectan con
| $('#contenedor').html(...), y #contenedor cuelga de
|
|     body > #main-wrapper > main.asm-home > #contenedor
|
| donde .asm-public-page no aparece. Como body SÍ se oscurece, el efecto no
| era "el oscuro no funciona" sino algo peor: el marco oscuro y encima
| tarjetas blancas. Este archivo cierra ese hueco para vuelos, seguros
| (Privilege) y hoteles (RateHawk).
|
| LA REGLA DE SEGURIDAD
| ---------------------
| TODA regla de este archivo va bajo :root[data-theme="dark"]. Sin ese
| atributo ninguna puede llegar a aplicarse, así que el tema claro queda
| intacto por construcción, no por cuidado. El peor caso de un error aquí es
| un oscuro feo; nunca un claro roto.
|
| ORDEN DE CARGA
| --------------
| Va EL ÚLTIMO en inicio.php, después de asm-marca.css. Así gana a igualdad
| de especificidad sin tener que inflar selectores. El !important se usa
| SÓLO donde la regla clara ya lo trae —.gray, .gray-simple y las utilidades
| de Bootstrap—, porque contra un !important no hay especificidad que valga.
|
| DE DÓNDE SALEN LOS COLORES
| --------------------------
| De los tokens que ya define asm-marca.css. Aquí no se inventa paleta:
|
|     --asm-surface        tarjeta, panel, campo de formulario
|     --asm-surface-soft   fondo de sección, cabecera de tarjeta
|     --asm-border         todo borde y todo separador
|     --asm-text           texto principal y titulares
|     --asm-muted          texto secundario
*/

/*
|--------------------------------------------------------------------------
| 1. La capa de variables
|--------------------------------------------------------------------------
|
| Esto es lo que más rinde por línea escrita. Bootstrap y style.css pintan
| casi todo a través de variables; remapearlas arregla de golpe .card,
| .dropdown-menu, .modal-content, .form-control, .table, .offcanvas y las
| pestañas, sin nombrar ninguno.
|
| CUIDADO CON CUÁLES SE TOCAN. --bs-white-rgb NO se toca: .text-white usa la
| misma variable que .bg-white, así que cambiarla volvería oscuro el texto
| blanco de los botones de color. Lo mismo con --bs-dark-rgb (.bg-dark) y
| --bs-light-rgb (.text-light). Esas utilidades se corrigen una a una más
| abajo, que es aburrido pero no rompe nada.
*/
:root[data-theme="dark"] {
    /* Tokens de la plantilla (style.css:63-67) */
    --headingColor: var(--asm-text);
    --paragraphColor: var(--asm-muted);

    /* Tokens de Bootstrap seguros de remapear */
    --bs-body-bg: var(--asm-surface);
    --bs-body-bg-rgb: 14, 23, 41;
    --bs-body-color: var(--asm-text);
    --bs-body-color-rgb: 232, 238, 248;
    --bs-border-color: var(--asm-border);
    --bs-border-color-translucent: var(--asm-border);
    --bs-heading-color: var(--asm-text);
    --bs-emphasis-color: var(--asm-text);
    --bs-secondary-color: var(--asm-muted);
    --bs-secondary-bg: var(--asm-surface-soft);
    --bs-tertiary-bg: var(--asm-surface-soft);
    --bs-tertiary-color: var(--asm-subtle);

    /* .text-muted de style.css apunta aquí */
    --bs-gray-500: var(--asm-muted);
    --bs-gray-600: var(--asm-muted);
}

/*
|--------------------------------------------------------------------------
| 2. Superficies de la plantilla
|--------------------------------------------------------------------------
|
| style.css clava el blanco a pelo (`.card { background: #ffffff }`), así que
| remapear variables no basta: hay que sobreescribir la propiedad.
*/
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

/* La cabecera se distingue del cuerpo por un tono, no por un borde más */
:root[data-theme="dark"] .card-header {
    background: var(--asm-surface-soft);
}

/*
 * .gray y .gray-simple son el fondo de sección de TODAS las pantallas de
 * resultados: <section class="gray-simple" id="Flights">. Traen !important
 * en style.css, así que aquí también hace falta.
 */
:root[data-theme="dark"] .gray,
:root[data-theme="dark"] .gray-simple {
    background: var(--asm-background) !important;
}

:root[data-theme="dark"] .filter-searchBar,
:root[data-theme="dark"] .side-block,
:root[data-theme="dark"] .searchBar-single,
:root[data-theme="dark"] .flight-item,
:root[data-theme="dark"] .flight-detail-item,
:root[data-theme="dark"] .fl-single-list,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .list-group-item {
    background-color: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

/*
|--------------------------------------------------------------------------
| 3. Utilidades de Bootstrap
|--------------------------------------------------------------------------
|
| Todas traen !important de fábrica. No hay atajo: una por una.
*/
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--asm-surface) !important;
}

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-body-secondary {
    background-color: var(--asm-surface-soft) !important;
}

:root[data-theme="dark"] .text-black,
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body {
    color: var(--asm-text) !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-body-secondary,
:root[data-theme="dark"] .text-muted-2,
:root[data-theme="dark"] .text-secondary {
    color: var(--asm-muted) !important;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-end,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-light {
    border-color: var(--asm-border) !important;
}

/*
 * Aquí había una regla más, `.border { background-color: transparent }`,
 * porque el auditor marcó .border como "pinta blanco". Al ir a comprobarlo,
 * la única regla que lo hace es
 *
 *     .nav-menu.nav-menu-social > li.list-buttons.border a
 *
 * o sea, un botón del menú de la cabecera, no un .border cualquiera. La
 * regla no hacía falta y además hacía daño: tenía la misma especificidad que
 * la de .card y venía después, así que una `<div class="card border">` —que
 * las hay en los resultados— se quedaba transparente.
 */

/*
|--------------------------------------------------------------------------
| 4. Formularios
|--------------------------------------------------------------------------
|
| Este es el peor caso del sitio en oscuro, y es el formulario de pasajeros:
| campos blancos con texto oscuro dentro de una página oscura.
*/
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text {
    background-color: var(--asm-surface-soft);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--asm-surface-soft);
    border-color: var(--asm-accent);
    color: var(--asm-text);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: var(--asm-subtle);
}

:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] {
    background-color: var(--asm-background);
    color: var(--asm-muted);
}

/*
 * .form-group con fondo blanco es de la plantilla: el buscador lo usa para
 * que la etiqueta flotante tape el borde del campo. En oscuro tiene que
 * seguir tapándolo, pero con el color de la superficie.
 */
:root[data-theme="dark"] .form-group,
:root[data-theme="dark"] .search-wrap.with-label .form-group label {
    background: var(--asm-surface);
    color: var(--asm-muted);
}

:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] label {
    color: var(--asm-text);
}

:root[data-theme="dark"] .form-check-input {
    background-color: var(--asm-surface-soft);
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: var(--asm-accent);
    border-color: var(--asm-accent);
}

:root[data-theme="dark"] .form-check-label {
    color: var(--asm-text);
}

/* La flecha del <select> viene dibujada en un SVG oscuro: se aclara */
:root[data-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='%2393a4bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/*
|--------------------------------------------------------------------------
| 5. Pestañas, acordeones y paginación
|--------------------------------------------------------------------------
|
| Las pestañas son las de GDS en los resultados de vuelo (Sabre, Copa, KIU);
| el acordeón es el panel de filtros; la paginación, la de RateHawk.
*/
:root[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--asm-border);
}

/*
 * .nav-link suelto también, no sólo dentro de .nav-tabs. style.css le pone
 * #455873, que sobre la superficie oscura da 2,5:1 —por debajo de AA— y
 * además se coló por poco en la auditoría: es un azul grisáceo de luminancia
 * 0,10, justo por encima del umbral de "casi negro".
 *
 * Es seguro hacerlo global: src/header.php no usa .nav-link ni una vez, así
 * que esta regla no puede tocar la cabecera.
 */
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .nav-tabs .nav-link,
:root[data-theme="dark"] .nav-pills .nav-link,
:root[data-theme="dark"] .nav-item > .nav-link {
    color: var(--asm-muted);
    background: transparent;
}

:root[data-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
:root[data-theme="dark"] .nav-pills .nav-link.active,
:root[data-theme="dark"] .nav-pills.lights .nav-link.active,
:root[data-theme="dark"] .nav-pills.lights .show > .nav-link {
    color: var(--asm-text);
    background: var(--asm-surface);
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .nav-item {
    background: transparent;
}

:root[data-theme="dark"] .accordion-button,
:root[data-theme="dark"] .accordion-body,
:root[data-theme="dark"] .accordion-collapse {
    background-color: var(--asm-surface);
    color: var(--asm-text);
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--asm-surface-soft);
    color: var(--asm-text);
}

/* El chevrón del acordeón también es un SVG oscuro incrustado */
:root[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(1.6);
}

:root[data-theme="dark"] .arrow-collapse.collapsed:before,
:root[data-theme="dark"] .arrow-collapse:before {
    background: var(--asm-surface-soft);
    color: var(--asm-text);
}

:root[data-theme="dark"] .pagination > li > a,
:root[data-theme="dark"] .pagination > li > span,
:root[data-theme="dark"] .page-link {
    background-color: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

:root[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--asm-background);
    color: var(--asm-subtle);
}

/*
|--------------------------------------------------------------------------
| 6. Botones que la plantilla pinta de blanco
|--------------------------------------------------------------------------
*/
:root[data-theme="dark"] .btn-whites,
:root[data-theme="dark"] .btn-outline-danger,
:root[data-theme="dark"] .btn-outline-dark {
    background: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-light {
    background: var(--asm-surface-soft) !important;
    border-color: var(--asm-border) !important;
    color: var(--asm-text) !important;
}

/*
 * El destello de los botones (.btn::after) es un blanco al 76 % pensado
 * sobre fondo claro; sobre oscuro es un fogonazo. Se baja, no se quita:
 * la animación sigue existiendo.
 */
:root[data-theme="dark"] .btn::after {
    background-color: rgba(255, 255, 255, 0.12);
}

/*
|--------------------------------------------------------------------------
| 7. Piezas propias de los resultados de vuelo
|--------------------------------------------------------------------------
|
| .flightLine es la línea de puntos entre origen y destino, con dos celdas
| de color: la primera blanca (el punto de salida) y la segunda gris. En
| oscuro se invierten los papeles.
*/
:root[data-theme="dark"] .flightLine,
:root[data-theme="dark"] .flightLine > * {
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .flightLine > *:nth-child(1) {
    background-color: var(--asm-surface);
}

:root[data-theme="dark"] .flightLine > *:nth-child(2) {
    background-color: var(--asm-border);
}

:root[data-theme="dark"] .flightLine.departure:before,
:root[data-theme="dark"] .flightLine.return:before {
    color: var(--asm-muted);
}

/* El paso a paso de la reserva (pasajeros → pago → confirmación) */
:root[data-theme="dark"] .bs-stepper-circle {
    border-color: var(--asm-surface);
}

:root[data-theme="dark"] .bs-stepper-line,
:root[data-theme="dark"] .bs-stepper .line {
    background-color: var(--asm-border);
}

/* RateHawk: el recorte de descripción larga */
:root[data-theme="dark"] .detail.ellipsis-container .ellipsis {
    border-color: var(--asm-border);
}

/*
|--------------------------------------------------------------------------
| 8. Capas flotantes
|--------------------------------------------------------------------------
|
| Salen POR ENCIMA de los resultados, así que un desplegable claro sobre una
| lista oscura canta más que cualquier otra cosa. Select2 ya está resuelto en
| asm-redesign.css:4962; aquí van los que faltaban.
*/
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--asm-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--asm-surface-soft);
    color: var(--asm-text);
}

:root[data-theme="dark"] .dropdown-divider,
:root[data-theme="dark"] hr {
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .offcanvas {
    background-color: var(--asm-surface);
    color: var(--asm-text);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .offcanvas-header {
    border-color: var(--asm-border);
}

/* La X de cerrar es un SVG negro incrustado */
:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Calendario de fechas: aparece sobre el buscador en todos los servicios */
:root[data-theme="dark"] .flatpickr-calendar {
    background: var(--asm-surface);
    color: var(--asm-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-weekdays,
:root[data-theme="dark"] span.flatpickr-weekday {
    background: var(--asm-surface);
    color: var(--asm-text);
    fill: var(--asm-text);
}

:root[data-theme="dark"] .flatpickr-day {
    color: var(--asm-text);
}

:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--asm-subtle);
}

:root[data-theme="dark"] .flatpickr-day:hover {
    background: var(--asm-surface-soft);
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--asm-text);
}

/*
|--------------------------------------------------------------------------
| 9. Enlaces y titulares
|--------------------------------------------------------------------------
|
| Los titulares ya salen bien por --headingColor (sección 1). Los enlaces no:
| style.css les pone #022f5d, que es azul marino sobre azul marino.
|
| Se excluyen los enlaces que HACEN de botón: ésos ya traen su propio color
| y aclararlos los estropearía.
*/
:root[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--asm-primary-soft);
}

:root[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--asm-text);
}

/*
|--------------------------------------------------------------------------
| 10. Tablas
|--------------------------------------------------------------------------
*/
:root[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--asm-text);
    --bs-table-border-color: var(--asm-border);
    --bs-table-striped-bg: var(--asm-surface-soft);
    --bs-table-striped-color: var(--asm-text);
    --bs-table-hover-bg: var(--asm-surface-soft);
    --bs-table-hover-color: var(--asm-text);
    color: var(--asm-text);
    border-color: var(--asm-border);
}

:root[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--asm-text);
    border-bottom-color: var(--asm-border);
}

/*
|--------------------------------------------------------------------------
| 11. Textos que se quedaban por debajo de AA
|--------------------------------------------------------------------------
|
| Estos no salieron de mirar el marcado sino de medir: para cada color de
| texto de las hojas se calculó el contraste contra la superficie oscura
| (#0e1729) y se recogieron los que no llegan a 4,5:1. Son azules grisáceos
| —#455873, #526d83, #5f7388— que sobre blanco se leen perfectamente y sobre
| oscuro se hunden. No los habría encontrado a ojo.
*/

/* La ordenación de resultados. Especificidad (0,4,0): hay que igualarla. */
:root[data-theme="dark"] .btn-group.account-drop .btn.btn-order-by-filt {
    color: var(--asm-text);
    background: var(--asm-surface);
    border-color: var(--asm-border);
}

/* La etiqueta "precio más bajo" de la tarjeta de vuelo — 3,66:1 */
:root[data-theme="dark"] .low-price .tag-span {
    color: var(--asm-muted);
}

/* Los rótulos del paso a paso de la reserva — 3,82:1 */
:root[data-theme="dark"] .bs-stepper .step-trigger {
    color: var(--asm-muted);
}

/* El recorte de descripción de RateHawk — 2,47:1 */
:root[data-theme="dark"] .detail.ellipsis-container,
:root[data-theme="dark"] .detail.ellipsis-container .ellipsis {
    color: var(--asm-muted);
}

/*
|--------------------------------------------------------------------------
| 12. RateHawk: el panel de avisos
|--------------------------------------------------------------------------
|
| Era un style="background:#e5e5e5" en línea dentro de ratehawk.js. Se movió
| a .asm-panel-aviso (asm-redesign.css) con el mismo valor —en claro se ve
| igual que antes— para poder cambiarlo aquí.
*/
:root[data-theme="dark"] .asm-panel-aviso {
    background: var(--asm-surface-soft);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

/*
|--------------------------------------------------------------------------
| 13. El contador de pasajeros deshabilitado
|--------------------------------------------------------------------------
|
| asm-marca.css ya viste .guests-input__ctrl en oscuro, pero sólo el estado
| normal. Al llegar al tope (9 adultos, 0 bebés) style.css le pone un borde
| #d9dee5, que sobre oscuro se ve más fuerte que el botón activo: justo al
| revés de lo que quiere decir.
*/
:root[data-theme="dark"] .guests-input__ctrl.disabled {
    border-color: var(--asm-border);
    color: var(--asm-subtle);
}

:root[data-theme="dark"] .guests-input {
    border-color: var(--asm-border);
}

/*
|--------------------------------------------------------------------------
| 14. La tira de tarifas de marca de Sabre: dejarla en paz
|--------------------------------------------------------------------------
|
| En cont/flightsSabre.php las tarifas de marca van en
|
|     <ul class="nav nav-tabs … nav-pills … lights blukker bg-dark …">
|
| Fíjese en bg-dark: esa tira YA ES OSCURA en tema claro. La pastilla activa
| es blanca porque contrasta contra un fondo oscuro, no porque la página sea
| clara. Las reglas genéricas de la sección 5 la estaban "arreglando" hacia
| una superficie oscura sobre otra superficie oscura, que es peor que antes.
|
| Aquí se devuelven los valores originales. Un #ffffff dentro de una hoja de
| tema oscuro parece un error y no lo es: --bs-dark-rgb no se toca en ningún
| sitio, así que ese bg-dark vale lo mismo en los dos temas y la pastilla
| blanca sigue siendo la lectura correcta.
*/
:root[data-theme="dark"] .nav-pills.lights .nav-link {
    background: rgba(245, 246, 247, 0.1);
    color: #ffffff;
}

:root[data-theme="dark"] .nav-pills.lights .nav-link.active,
:root[data-theme="dark"] .nav-pills.lights .show > .nav-link {
    background: #ffffff;
    color: var(--bs-primary);
}

/*
|--------------------------------------------------------------------------
| 15. Los colores suaves: avisos, etiquetas y pastillas
|--------------------------------------------------------------------------
|
| Esto NO salió de mirar pantallas. Salió de un barrido: se resolvieron las
| 872 combinaciones de class="" que aparecen de verdad en las 29 plantillas
| auditadas, y 36 seguían pintando un fondo claro en tema oscuro. Todas eran
| de la misma familia: .alert-warning, .bg-light-info, .bg-light-success,
| .btn-light-primary… los tintes pálidos.
|
| Y no eran sólo feas: hay marcado como
|
|     <div class="alert alert-warning text-dark">
|     <span class="bg-light-info label text-black">
|
| donde la sección 3 de este archivo aclara el texto (.text-dark → claro)
| mientras el fondo seguía siendo amarillo pálido. Texto claro sobre fondo
| claro: ilegible. Lo había roto yo, y sólo se ve midiendo.
|
| El arreglo invierte la lógica del tinte: en vez de un pastel sobre blanco,
| un velo del mismo tono sobre la superficie oscura, con el texto subido de
| luminosidad hasta pasar AA. Los valores están calculados, no elegidos:
| cada uno es el primer paso de luminosidad del tono original que llega a
| 4,5:1 sobre #0e1729.
|
|     primary  #2b80fd  4,78:1      warning  #ffc107  10,98:1
|     info     #2d85f0  4,88:1      danger   #de5649   4,72:1
|     success  #27a974  5,98:1
|
| Los tonos --bs-*-rgb se leen de style.css, que los redefine: el "info" de
| ASM es #106bda, no el celeste de Bootstrap.
*/
:root[data-theme="dark"] {
    /* Bootstrap 5.3 los consume; style.css los usa vía .btn-light-* */
    --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), .16);
    --bs-secondary-bg-subtle: var(--asm-surface-soft);
    --bs-success-bg-subtle: rgba(var(--bs-success-rgb), .16);
    --bs-info-bg-subtle: rgba(var(--bs-info-rgb), .16);
    --bs-warning-bg-subtle: rgba(var(--bs-warning-rgb), .16);
    --bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), .16);
    --bs-light-bg-subtle: var(--asm-surface-soft);
    --bs-dark-bg-subtle: var(--asm-background);

    /* Tonos legibles sobre superficie oscura */
    --asm-t-primary: #2b80fd;
    --asm-t-info: #2d85f0;
    --asm-t-success: #27a974;
    --asm-t-warning: #ffc107;
    --asm-t-danger: #de5649;
}

:root[data-theme="dark"] .alert-primary,
:root[data-theme="dark"] .bg-light-primary,
:root[data-theme="dark"] .btn-light-primary {
    background-color: rgba(var(--bs-primary-rgb), .16) !important;
    border-color: rgba(var(--bs-primary-rgb), .34);
    color: var(--asm-t-primary) !important;
}

:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .bg-light-info,
:root[data-theme="dark"] .btn-light-info {
    background-color: rgba(var(--bs-info-rgb), .16) !important;
    border-color: rgba(var(--bs-info-rgb), .34);
    color: var(--asm-t-info) !important;
}

:root[data-theme="dark"] .alert-success,
:root[data-theme="dark"] .bg-light-success,
:root[data-theme="dark"] .btn-light-success {
    background-color: rgba(var(--bs-success-rgb), .16) !important;
    border-color: rgba(var(--bs-success-rgb), .34);
    color: var(--asm-t-success) !important;
}

:root[data-theme="dark"] .alert-warning,
:root[data-theme="dark"] .bg-light-warning,
:root[data-theme="dark"] .btn-light-warning {
    background-color: rgba(var(--bs-warning-rgb), .16) !important;
    border-color: rgba(var(--bs-warning-rgb), .34);
    color: var(--asm-t-warning) !important;
}

:root[data-theme="dark"] .alert-danger,
:root[data-theme="dark"] .bg-light-danger,
:root[data-theme="dark"] .btn-light-danger {
    background-color: rgba(var(--bs-danger-rgb), .16) !important;
    border-color: rgba(var(--bs-danger-rgb), .34);
    color: var(--asm-t-danger) !important;
}

:root[data-theme="dark"] .alert-light,
:root[data-theme="dark"] .alert-secondary {
    background-color: var(--asm-surface-soft) !important;
    border-color: var(--asm-border);
    color: var(--asm-text) !important;
}

/*
 * Los .text-* que acompañan a estas pastillas. Van con !important porque las
 * utilidades de Bootstrap también lo llevan, y con la misma especificidad
 * gana la última: ésta.
 */
:root[data-theme="dark"] .text-primary { color: var(--asm-t-primary) !important; }
:root[data-theme="dark"] .text-info    { color: var(--asm-t-info)    !important; }
:root[data-theme="dark"] .text-success { color: var(--asm-t-success) !important; }
:root[data-theme="dark"] .text-warning { color: var(--asm-t-warning) !important; }
:root[data-theme="dark"] .text-danger  { color: var(--asm-t-danger)  !important; }

/*
 * El círculo del paso a paso usaba --bs-primary-bg-subtle, así que ya queda
 * arreglado arriba; el borde, en cambio, lo pone style.css a #ffffff y se
 * resuelve en la sección 7.
 */

/*
|--------------------------------------------------------------------------
| 16. Los cabos sueltos que encontró el barrido
|--------------------------------------------------------------------------
|
| Estos seis salieron de comparar el contraste claro contra el oscuro en las
| 872 combinaciones. Ninguno se ve leyendo el código.
*/

/*
 * .bg-warning es el ÚNICO fondo sólido que sigue siendo claro en oscuro, y
 * debe seguir siéndolo: un distintivo amarillo es amarillo en los dos temas.
 * Pero la sección 3 aclara .text-dark, y sobre ese amarillo el contraste caía
 * de 9,46:1 a 1,40:1. Aquí el texto vuelve a ser oscuro, que es lo correcto
 * encima de amarillo, y con dos clases gana a la utilidad de una.
 *
 * El :not() no es adorno. Con .bg-opacity-10 el amarillo baja al 10 % y lo
 * que se ve detrás es la superficie oscura, así que ahí el texto tiene que
 * ser CLARO. Sin la exclusión, ese caso caía a 1,26:1 —lo rompí al arreglar
 * el anterior, y sólo lo vi porque el barrido lo volvió a medir—.
 */
:root[data-theme="dark"] .bg-warning:not([class*="bg-opacity"]),
:root[data-theme="dark"] .bg-warning:not([class*="bg-opacity"]).text-dark,
:root[data-theme="dark"] .bg-warning:not([class*="bg-opacity"]).text-black,
:root[data-theme="dark"] .bg-warning:not([class*="bg-opacity"]) .text-dark {
    color: #212529 !important;
}

/* .table-light traía su propio --bs-table-color: #000 */
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-light > :not(caption) > * > * {
    --bs-table-color: var(--asm-text);
    --bs-table-bg: var(--asm-surface-soft);
    color: var(--asm-text);
    background-color: var(--asm-surface-soft);
}

/*
 * #6c757d se quedaba en 4,15:1 (en claro ya andaba justo, 4,25:1). Como el
 * gris no cambia con el tema, no era una regresión mía, pero arreglarlo
 * cuesta dos líneas.
 */
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .asm-filtros-toggle.collapsed {
    color: var(--asm-muted);
    border-color: var(--asm-border);
}

/*
 * .btn-close y .table-light aparecían también con "color: #000 → 1,08:1".
 * En el caso de .btn-close es un falso positivo del resolvedor: esa X no es
 * texto, es una imagen SVG de fondo, y el color declarado no la pinta. Se
 * aclara con el filter de la sección 8, que el resolvedor no modela.
 */

/*
|--------------------------------------------------------------------------
| 17. Los distintivos (badge)
|--------------------------------------------------------------------------
|
| Medido, en oscuro, antes de esta sección:
|
|     .badge.bg-info        1,96:1   <- ilegible (también en claro)
|     .badge.bg-secondary   4,69:1   <- pasa por los pelos, pero es un
|                                       borrón gris medio sobre una página
|                                       oscura: no se lee como distintivo
|     .badge.bg-primary     4,50:1   <- justo en el límite
|     .badge.bg-success     4,53:1
|
| Los de Privilege ("Mín días", "Máx días", "Edad máx") son .bg-secondary, y
| son el caso que se ve peor.
|
| El arreglo es el mismo criterio que la sección 15: en vez de un bloque de
| color sólido con texto blanco encima —que es lo que funciona sobre papel
| blanco—, un velo del mismo tono sobre la superficie oscura, borde del tono
| al 34 % y el texto en la versión luminosa. Un distintivo así se lee de
| lejos por el color y de cerca por el texto.
|
| Se hace por .badge para no tocar .bg-* en general: un .bg-success de fondo
| de sección debe seguir siendo verde sólido.
*/
:root[data-theme="dark"] .badge {
    --bs-badge-color: var(--asm-text);
    color: var(--asm-text);
}

:root[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--asm-surface-soft) !important;
    border: 1px solid var(--asm-border);
    color: var(--asm-muted) !important;
}

:root[data-theme="dark"] .badge.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), .18) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), .34);
    color: var(--asm-t-primary) !important;
}

:root[data-theme="dark"] .badge.bg-info,
:root[data-theme="dark"] .badge.text-bg-info {
    background-color: rgba(var(--bs-info-rgb), .18) !important;
    border: 1px solid rgba(var(--bs-info-rgb), .34);
    color: var(--asm-t-info) !important;
}

:root[data-theme="dark"] .badge.bg-success,
:root[data-theme="dark"] .badge.text-bg-success {
    background-color: rgba(var(--bs-success-rgb), .18) !important;
    border: 1px solid rgba(var(--bs-success-rgb), .34);
    color: var(--asm-t-success) !important;
}

:root[data-theme="dark"] .badge.bg-danger,
:root[data-theme="dark"] .badge.text-bg-danger {
    background-color: rgba(var(--bs-danger-rgb), .18) !important;
    border: 1px solid rgba(var(--bs-danger-rgb), .34);
    color: var(--asm-t-danger) !important;
}

/*
 * El amarillo es la excepción, y por la misma razón que en la sección 16:
 * un distintivo de aviso amarillo se espera amarillo. Se queda sólido con
 * texto oscuro, que sobre amarillo es lo legible (9,46:1).
 */
:root[data-theme="dark"] .badge.bg-warning:not([class*="bg-opacity"]),
:root[data-theme="dark"] .badge.text-bg-warning {
    color: #212529 !important;
}

/* El oscuro sólido sí funciona tal cual: ya es oscuro con texto claro. */
:root[data-theme="dark"] .badge.bg-dark,
:root[data-theme="dark"] .badge.text-bg-dark {
    border: 1px solid var(--asm-border);
}

/*
|--------------------------------------------------------------------------
| 18. La etiqueta flotante de los formularios
|--------------------------------------------------------------------------
|
| En los modales de Sabre Command los campos son .form-floating: la etiqueta
| se encoge y se sube sobre el borde del campo, y para no cortarlo lleva un
| ::after que le pinta detrás el color del fondo de página. Bootstrap usa
| --bs-body-bg (aquí, --asm-surface), pero el campo es --asm-surface-soft:
| quedaba un parche de otro tono justo detrás del rótulo.
*/
:root[data-theme="dark"] .form-floating > .form-control ~ label::after,
:root[data-theme="dark"] .form-floating > .form-select ~ label::after,
:root[data-theme="dark"] .form-floating > .form-control-plaintext ~ label::after {
    background-color: var(--asm-surface-soft);
}

:root[data-theme="dark"] .form-floating > label {
    color: var(--asm-muted);
}

/*
|--------------------------------------------------------------------------
| 19. El menú de perfil, el que baja de la cabecera
|--------------------------------------------------------------------------
|
| Éste no tenía ni una regla oscura. La página seleccionada se marca con
| .asm-menu-active, que en claro es un rosa pálido de marca:
|
|     .asm-profile-menu .asm-menu-active       background: #fff5f6
|     .asm-menu-active .asm-profile-menu-icon  background: #fee4e2
|
| Sobre la página oscura eso es una losa rosa clara, y encima lleva texto en
| --asm-accent, que en oscuro es #e35f54: 3,26:1 el rótulo y 2,89:1 el icono.
| Los dos por debajo de AA. Es, literalmente, que la página seleccionada no
| se ve.
|
| El rosa pálido se cambia por un velo del rojo de marca sobre la superficie
| oscura: se mantiene la idea —el elemento activo se tiñe del color de la
| marca— con el contraste al derecho.
*/
:root[data-theme="dark"] .asm-profile-menu .asm-profile-menu-link {
    color: var(--asm-text) !important;
}

:root[data-theme="dark"] .asm-profile-menu .asm-profile-menu-link:hover {
    background: var(--asm-surface-soft);
}

:root[data-theme="dark"] .asm-profile-menu .asm-menu-active {
    background: rgba(227, 95, 84, .16);
    color: var(--asm-text) !important;
}

:root[data-theme="dark"] .asm-profile-menu .asm-menu-active:hover {
    background: rgba(227, 95, 84, .24);
}

:root[data-theme="dark"] .asm-profile-menu .asm-menu-active .asm-profile-menu-icon {
    color: var(--asm-accent);
    background: rgba(227, 95, 84, .22);
}

:root[data-theme="dark"] .asm-profile-menu .asm-menu-active .asm-profile-menu-copy strong,
:root[data-theme="dark"] .asm-profile-menu .asm-menu-active .asm-profile-menu-arrow {
    color: var(--asm-accent);
}

:root[data-theme="dark"] .asm-profile-menu .asm-profile-menu-icon {
    color: var(--asm-muted);
    background: var(--asm-surface-soft);
}

/*
 * El menú horizontal de sección (Órdenes, Usuarios, Solicitudes) sí tenía
 * reglas oscuras, pero el elemento activo quedaba EXACTAMENTE igual que el
 * de paso del ratón: los dos --asm-surface-soft. Se distinguía sólo por una
 * línea roja de 2 px abajo, que en oscuro casi no se ve. Se le da el mismo
 * velo de marca que al de perfil, para que los dos menús se lean igual.
 */
:root[data-theme="dark"] .asm-section-menu-link.asm-menu-active {
    background: rgba(227, 95, 84, .16);
    color: var(--asm-text);
}

:root[data-theme="dark"] .asm-section-menu-link.asm-menu-active .asm-section-menu-icon {
    color: var(--asm-accent);
    background: rgba(227, 95, 84, .22);
}

/*
|--------------------------------------------------------------------------
| 20. La calculadora flotante
|--------------------------------------------------------------------------
|
| Cero reglas oscuras: se comprobó contando `data-theme="dark"] .asm-calc` en
| asm-redesign.css y salió 0. El panel es un #ffffff a pelo con textos
| #101828 y #344054, así que en tema oscuro es un rectángulo blanco pegado a
| la esquina de una página negra. Medido: el panel en 1,17:1 y los rótulos de
| campo también en 1,17:1.
|
| Dos cosas se quedan como están, a propósito:
|
|   - El botón flotante y la cabecera del panel son azul marino
|     (--asm-navy-900). Esa escala está congelada en los dos temas por
|     decisión del sistema de diseño, y ahí funciona: 17:1 en ambos.
|   - Los cuatro colores de método de pago (verde, amarillo, azul, morado)
|     mantienen el tono. Es lo que hace la lista legible de un vistazo. Lo
|     que cambia es la pareja: en claro es tono oscuro sobre pastel; en
|     oscuro, tono luminoso sobre velo.
*/
:root[data-theme="dark"] .asm-calcp {
    background: var(--asm-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .asm-calcp-campo {
    color: var(--asm-muted);
}

:root[data-theme="dark"] .asm-calcp-campo input,
:root[data-theme="dark"] .asm-calcp-destino select {
    border-color: var(--asm-border);
    background: var(--asm-surface-soft);
    color: var(--asm-text);
}

:root[data-theme="dark"] .asm-calcp-campo input:focus {
    border-color: var(--asm-accent);
    outline: 2px solid rgba(227, 95, 84, .22);
}

:root[data-theme="dark"] .asm-calcp-destino select:disabled {
    color: var(--asm-subtle);
    background: var(--asm-background);
}

:root[data-theme="dark"] .asm-calcp-fila {
    border-top-color: var(--asm-border);
}

:root[data-theme="dark"] .asm-calcp-fila__nombre {
    color: var(--asm-text);
}

:root[data-theme="dark"] .asm-calcp-fila__nombre small {
    color: var(--asm-subtle);
}

:root[data-theme="dark"] .asm-calcp-fila strong {
    color: var(--asm-text);
}

/* Mismo tono, pareja invertida: luminoso sobre velo en vez de oscuro sobre pastel */
:root[data-theme="dark"] .asm-calcp-fila__icono.is-verde {
    color: #47cd89;
    background: rgba(71, 205, 137, .16);
}

:root[data-theme="dark"] .asm-calcp-fila__icono.is-amarillo {
    color: #fdb022;
    background: rgba(253, 176, 34, .16);
}

:root[data-theme="dark"] .asm-calcp-fila__icono.is-azul {
    color: #53b1fd;
    background: rgba(83, 177, 253, .16);
}

:root[data-theme="dark"] .asm-calcp-fila__icono.is-morado {
    color: #a48afb;
    background: rgba(164, 138, 251, .16);
}

:root[data-theme="dark"] .asm-calcp-limpiar {
    border-color: var(--asm-border);
    background: var(--asm-surface-soft);
    color: var(--asm-text);
}

:root[data-theme="dark"] .asm-calcp-limpiar:hover {
    background: var(--asm-border);
}

:root[data-theme="dark"] .asm-calcp-vacio {
    color: var(--asm-muted);
}

/*
|--------------------------------------------------------------------------
| 21. Sabre Command: el campo de comando
|--------------------------------------------------------------------------
|
| La pantalla del terminal (#div_pantalla) tiene su PROPIO selector de tema
| —Claro / Oscuro / Original, guardado en localStorage['SabreTheme']— y eso
| está bien: es un terminal, y quien lo usa elige cómo lo quiere.
|
| El problema era que el cursor de comandos es un .form-control corriente, y
| la sección 4 le pone color de texto claro. Con la pantalla en su tema Claro
| —que es el de fábrica: `background: aliceblue` escrito en el propio HTML—
| quedaba texto claro sobre azul pálido: se escribía a ciegas.
|
| `color: inherit` lo devuelve a donde debe estar: hereda de #div_pantalla,
| que es justo lo que cambia el selector del terminal.
*/
:root[data-theme="dark"] #div_pantalla .form-control,
:root[data-theme="dark"] #div_pantalla .form-control::placeholder {
    color: inherit;
    background: transparent;
}

/*
|--------------------------------------------------------------------------
| 22. La cabecera y los paneles flotantes del buscador
|--------------------------------------------------------------------------
|
| Estos no estaban en la lista, los encontró el barrido al ampliarlo a
| src/header.php, src/buscador.php, pages/usuarios.php y pages/ordenes.php.
| Dieciocho combinaciones seguían con fondo claro en oscuro y ninguna tenía
| una sola regla oscura. Se comprobó una a una contando
| `data-theme="dark"][^{]*\.<clase>` en las hojas.
|
| Van aquí porque son lo que se ve ANTES de buscar: el avatar, los iconos de
| la cabecera, el desplegable de pasajeros y el botón de invertir la ruta.
*/

/*
 * El avatar es el caso más raro y el más visible.
 *
 * `background: linear-gradient(135deg, var(--asm-primary), var(--asm-accent))`
 * con texto blanco encima. En claro --asm-primary es el azul marino #05264e y
 * funciona. Pero en oscuro --asm-primary se INVIERTE a #e8eef8 —así está
 * definido en asm-marca.css, y con razón: es el color de los titulares—, así
 * que el degradado se volvía casi blanco con las iniciales blancas encima:
 * 1,17:1. El degradado se fija a la escala navy, que no depende del tema.
 */
:root[data-theme="dark"] .asm-user-avatar,
:root[data-theme="dark"] .asm-mobile-avatar,
:root[data-theme="dark"] .asm-profile-avatar-lg {
    background: linear-gradient(
        135deg,
        var(--asm-navy-800, #05264e),
        var(--asm-accent-dark, #cd2c22)
    );
    color: #ffffff;
}

/* Iconos de acción de la cabecera (carrito, avisos) sobre fondo claro */
:root[data-theme="dark"] .asm-header-action-icon,
:root[data-theme="dark"] .asm-header-icon-button {
    color: var(--asm-text);
    background: var(--asm-surface-soft);
}

:root[data-theme="dark"] .asm-nav-login {
    color: var(--asm-text);
    background: var(--asm-surface);
}

:root[data-theme="dark"] .asm-nav-login:hover {
    background: var(--asm-surface-soft);
}

/*
 * El cajón de navegación de móvil. Lleva !important en su regla clara —está
 * dentro de una @media— así que aquí también hace falta, y va DENTRO del MISMO
 * breakpoint (991.98px): en desktop el navbar es transparente sobre el hero y
 * NO debe llevar fondo. Sin el @media, esta regla lo pintaba sólido también en
 * escritorio y tapaba la foto (se veía una banda navy partida izquierda/derecha).
 */
@media (max-width: 991.98px) {
    :root[data-theme="dark"] .asm-nav-wrapper {
        background: var(--asm-surface) !important;
    }
}

:root[data-theme="dark"] .asm-nav-brand,
:root[data-theme="dark"] .asm-nav-brand a {
    color: var(--asm-text);
}

/*
 * El desplegable de pasajeros y el de moneda: paneles blancos que se abren
 * SOBRE el buscador. Son de lo primero que se toca en cada búsqueda.
 */
:root[data-theme="dark"] .guests-input__options,
:root[data-theme="dark"] .selections {
    background-color: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

:root[data-theme="dark"] .selections .selected {
    color: var(--asm-muted);
}

/* El botón de invertir origen y destino, en medio de los dos campos */
:root[data-theme="dark"] .btn-flip-icon {
    background: var(--asm-surface);
    border-color: var(--asm-border);
    color: var(--asm-text);
}

/*
 * .asm-qr-wrapper se queda BLANCO a propósito y no es un descuido: un código
 * QR necesita fondo claro para que la cámara lo lea. Oscurecerlo lo rompería
 * de verdad, no sólo de aspecto.
 */

/* Usuarios y órdenes: resúmenes, botones de acción y de borrado */
:root[data-theme="dark"] .asm-users-summary__icon,
:root[data-theme="dark"] .asm-orders-summary__icon {
    color: var(--asm-text);
    background: var(--asm-surface-soft);
}

:root[data-theme="dark"] .asm-logout-button,
:root[data-theme="dark"] .asm-user-delete {
    color: var(--asm-t-danger);
    background: rgba(var(--bs-danger-rgb), .16);
    border-color: rgba(var(--bs-danger-rgb), .34);
}

:root[data-theme="dark"] .asm-user-accion--guardar {
    color: #ffffff;
    background: var(--asm-accent-dark, #cd2c22);
}

/*
 * Los botones principales de usuarios y órdenes: blanco sobre acento. En
 * oscuro --asm-accent sube a #e35f54, más claro, y el blanco encima caía a
 * 3,48:1. Se baja el fondo al acento oscuro, que es donde el blanco vuelve a
 * leerse.
 */
:root[data-theme="dark"] .asm-users-button-primary,
:root[data-theme="dark"] .asm-orders-button-primary {
    background: var(--asm-accent-dark, #cd2c22);
    border-color: var(--asm-accent-dark, #cd2c22);
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| 23. Los tres últimos del barrido
|--------------------------------------------------------------------------
*/

/*
 * El panel del QR se queda blanco (la cámara lo necesita), pero el texto que
 * lleva dentro seguía el tema y se volvía claro: blanco sobre blanco, 1,17:1.
 * Dentro de ese recuadro el tema no manda.
 */
:root[data-theme="dark"] .asm-qr-wrapper,
:root[data-theme="dark"] .asm-qr-wrapper * {
    color: #101828;
}

/* Mismo caso que los botones principales: el acento claro no aguanta blanco */
:root[data-theme="dark"] .asm-nav-register {
    background: var(--asm-accent-dark, #cd2c22);
    border-color: var(--asm-accent-dark, #cd2c22);
    color: #ffffff;
}

/* La fecha de la orden, en #667085: 3,91:1 */
:root[data-theme="dark"] .asm-order-date {
    color: var(--asm-muted);
}