/*
 * Estilos del modo oscuro elegidos por cada usuario (Clásico / Esmeralda / Lila).
 *  - <html data-gya-oscuro="esmeralda|lila"> lo pone tema.js (preferencia del usuario).
 *  - "clasico" (o sin atributo) = el modo oscuro de siempre: este archivo no cambia nada.
 *  - Idea: pocos colores. Negro / gris / blanco + UN color de acento. Todos los botones usan
 *    el acento (se distinguen por el ícono); encabezados, insignias y textos de color también.
 *  - Lo que las pantallas pintan con colores fijos lo normaliza tema.js con las clases
 *    .gya-pal-* (ver "Normalizador" en JavaScript/tema.js).
 * Se carga desde PHP/navegador.php después de dark-theme.css y gya_tablas.css.
 */

/* ── Paleta Esmeralda: negro, gris, blanco + verde → celeste ───────────────── */
html[data-bs-theme="dark"][data-gya-oscuro="esmeralda"] {
  --pal-bg: #07090a;
  --pal-s1: #0e1214;
  --pal-s2: #141a1d;
  --pal-s3: #1b2226;
  --pal-bd: #242d32;
  --pal-t1: #eef3f2;
  --pal-t2: #b7c2c2;
  --pal-t3: #7f8c8d;
  --pal-acc1: #22d38a;
  --pal-acc2: #19b4d8;
  --pal-acc: #1fc4ab;
  --pal-acc-rgb: 31, 196, 171;
  --pal-acc-txt: #03140f;
  --pal-acc-claro: #63e2bd;
}

/* ── Paleta Lila: gris oscuro + lila ───────────────────────────────────────── */
html[data-bs-theme="dark"][data-gya-oscuro="lila"] {
  --pal-bg: #16181c;
  --pal-s1: #1e2126;
  --pal-s2: #262a30;
  --pal-s3: #2f343b;
  --pal-bd: #363c45;
  --pal-t1: #e7e9ee;
  --pal-t2: #b5bbc5;
  --pal-t3: #868d98;
  --pal-acc1: #9686ff;
  --pal-acc2: #6c5cf6;
  --pal-acc: #7f6efc;
  --pal-acc-rgb: 127, 110, 252;
  --pal-acc-txt: #ffffff;
  --pal-acc-claro: #b1a7ff;
}

/* ── Tokens del sistema (sistema.css, dark-theme.css, Bootstrap y variables de cada página) ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) {
  --pal-grad: linear-gradient(135deg, var(--pal-acc1), var(--pal-acc2));
  --pal-acc-soft: rgba(var(--pal-acc-rgb), .14);
  --pal-acc-line: rgba(var(--pal-acc-rgb), .35);
  --pal-rojo: #f07a7a;

  --bg: var(--pal-bg);
  --s0: var(--pal-s1);
  --s1: var(--pal-s2);
  --s2: var(--pal-s3);
  --bd: var(--pal-bd);
  --bd-s: var(--pal-bd);
  --t1: var(--pal-t1);
  --t2: var(--pal-t2);
  --t3: var(--pal-t3);
  --t4: var(--pal-t3);
  --ok: var(--pal-acc);
  --info: var(--pal-acc);
  --warn: var(--pal-acc);
  --shp: 0 6px 18px rgba(var(--pal-acc-rgb), .18);

  --antares-dark-bg: var(--pal-bg);
  --antares-dark-surface: var(--pal-s1);
  --antares-dark-surface-2: var(--pal-s2);
  --antares-dark-surface-3: var(--pal-s3);
  --antares-dark-border: var(--pal-bd);
  --antares-dark-text: var(--pal-t1);
  --antares-dark-muted: var(--pal-t2);
  --antares-dark-primary: var(--pal-acc);

  /* Colores de marca que definen muchas pantallas en :root */
  --brand: var(--pal-acc1);
  --brand-2: var(--pal-acc2);
  --p: var(--pal-acc);
  --p-dark: var(--pal-acc2);
  --p-light: var(--pal-acc-claro);
  --p-ghost: rgba(var(--pal-acc-rgb), .1);
  --ok-bg: rgba(var(--pal-acc-rgb), .1);
  --info-bg: rgba(var(--pal-acc-rgb), .1);
  --warn-bg: rgba(var(--pal-acc-rgb), .1);
  --primary: var(--pal-acc1);
  --primary-2: var(--pal-acc2);
  --accent-2: var(--pal-acc1);
  --primary-color: var(--pal-acc);
  --accent: var(--pal-acc);

  --bs-body-bg: var(--pal-bg);
  --bs-body-color: var(--pal-t1);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--pal-t2);
  --bs-tertiary-color: var(--pal-t3);
  --bs-secondary-bg: var(--pal-s2);
  --bs-tertiary-bg: var(--pal-s1);
  --bs-border-color: var(--pal-bd);
  --bs-border-color-translucent: var(--pal-bd);
  --bs-heading-color: var(--pal-t1);
  --bs-primary: var(--pal-acc);
  --bs-primary-rgb: var(--pal-acc-rgb);
  --bs-success: var(--pal-acc);
  --bs-success-rgb: var(--pal-acc-rgb);
  --bs-info: var(--pal-acc);
  --bs-info-rgb: var(--pal-acc-rgb);
  --bs-warning: var(--pal-acc);
  --bs-warning-rgb: var(--pal-acc-rgb);
  --bs-link-color: var(--pal-acc-claro);
  --bs-link-color-rgb: var(--pal-acc-rgb);
  --bs-link-hover-color: #ffffff;
  --bs-focus-ring-color: rgba(var(--pal-acc-rgb), .3);
  --bs-primary-text-emphasis: var(--pal-acc-claro);
  --bs-success-text-emphasis: var(--pal-acc-claro);
  --bs-info-text-emphasis: var(--pal-acc-claro);
  --bs-warning-text-emphasis: var(--pal-acc-claro);
  --bs-primary-bg-subtle: var(--pal-acc-soft);
  --bs-success-bg-subtle: var(--pal-acc-soft);
  --bs-info-bg-subtle: var(--pal-acc-soft);
  --bs-warning-bg-subtle: var(--pal-acc-soft);
  --bs-primary-border-subtle: var(--pal-acc-line);
  --bs-success-border-subtle: var(--pal-acc-line);
  --bs-info-border-subtle: var(--pal-acc-line);
  --bs-warning-border-subtle: var(--pal-acc-line);
}

/* ── Fondo, superficies y texto ────────────────────────────────────────────── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]),
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body,
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .page-wrapper,
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .page-wrap {
  background: var(--pal-bg) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.card, .card-body, .modal-content, .modal-body, .offcanvas, .dropdown-menu, .list-group-item, .accordion-item, .accordion-button, .popover, .toast, .cfg-section, .tab-content) {
  background-color: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.card-footer, .modal-footer) {
  background-color: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.form-control, .form-select, .input-group-text, textarea, select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="tel"]):not(.btn) {
  background-color: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.form-control, .form-select, textarea, select, input):focus {
  border-color: var(--pal-acc) !important;
  box-shadow: 0 0 0 3px rgba(var(--pal-acc-rgb), .2) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.search-container, .search-box, .gya-search) {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.text-muted, .text-body-secondary, small.text-secondary) {
  color: var(--pal-t3) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--pal-t1);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.text-primary, .text-success, .text-info, .text-warning, .link-primary, .text-indigo, .text-purple) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .text-danger {
  color: var(--pal-rojo) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):not([class*="cv-"]) {
  color: var(--pal-acc-claro);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body hr {
  border-color: var(--pal-bd);
  opacity: 1;
}

/* ── Tablas: superficies neutras. Los :not(#…) suben la prioridad por encima de las
      reglas por #id de cada pantalla (#tableDatos tbody td {…!important}). ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > :is(tbody, tfoot) > tr > :is(td, th) {
  background-color: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > tbody > tr:nth-child(even) > td {
  background-color: var(--pal-s2) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > tbody > tr:hover > td {
  background-color: var(--pal-s3) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > thead > tr > th,
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > thead > tr > td {
  background: var(--pal-s2) !important;
  color: var(--pal-t2) !important;
  border-color: var(--pal-bd) !important;
}
/* Filas en rojo (anuladas, canceladas, sin stock): conservan un rojo suave. */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table:not(#gya-p1):not(#gya-p2) > tbody > tr:is(.table-danger, .compra-cancelada) > td {
  background-color: rgba(240, 122, 122, .10) !important;
}
/* Tarjetas de tabla en celular (gya_tablas.css). */
@media (max-width: 767.98px) {
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table.gya-tabla.gya-tarjetas:not(#gya-t1):not(#gya-t2) > tbody > tr:not([class*="table-"]):not(.compra-cancelada) {
    background: var(--pal-s1) !important;
    border-color: var(--pal-bd) !important;
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body table.gya-tabla.gya-tarjetas:not(#gya-p1):not(#gya-p2) > tbody > tr > td {
    background: transparent !important;
  }
}

/* ── Botones: todos con el color de acento; se distinguen por el ícono ─────── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn, .gya-pal-boton):not(.btn-close):not(.btn-link):not(.btn-light):not(.btn-secondary):not([class*="btn-outline"]):not(.gya-pal-no) {
  background: var(--pal-grad) !important;
  border-color: transparent !important;
  color: var(--pal-acc-txt) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn, .gya-pal-boton):not(.btn-close):not(.btn-link):not(.btn-light):not(.btn-secondary):not([class*="btn-outline"]):not(.gya-pal-no) :is(i, .bi, svg, span, b, strong, small) {
  color: inherit !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn, .gya-pal-boton):not(.btn-close):not(.btn-link):not(.btn-light):not(.btn-secondary):not([class*="btn-outline"]):not(.gya-pal-no):hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(var(--pal-acc-rgb), .25) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn[class*="btn-outline"]:not(.gya-pal-no) {
  background: transparent !important;
  border: 1px solid var(--pal-acc-line) !important;
  color: var(--pal-acc-claro) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn[class*="btn-outline"]:not(.gya-pal-no) :is(i, .bi, span) {
  color: inherit !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn[class*="btn-outline"]:not(.gya-pal-no):is(:hover, .active, :checked + *) {
  background: var(--pal-acc-soft) !important;
  border-color: var(--pal-acc) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn-check:checked + .btn:not(.gya-pal-no) {
  background: var(--pal-grad) !important;
  border-color: transparent !important;
  color: var(--pal-acc-txt) !important;
}
/* Botones secundarios (Cancelar, Cerrar, filtros): gris, sin color. */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn-light, .btn-secondary):not(.gya-pal-no) {
  background: var(--pal-s3) !important;
  border: 1px solid var(--pal-bd) !important;
  color: var(--pal-t1) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn-light, .btn-secondary):not(.gya-pal-no) :is(i, .bi, span) {
  color: inherit !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.btn-light, .btn-secondary):not(.gya-pal-no):hover {
  border-color: var(--pal-acc-line) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn:disabled,
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn.disabled {
  opacity: .5;
  filter: grayscale(.3);
}

/* ── Encabezados de página y de ventanas: oscuro con un brillo suave del acento ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.page-header, .pm-page-header, .as-page-header, .cfg-hero, .hero, .gya-pal-banner, .bg-brand-gradient, .modal-header.gradient) {
  background: linear-gradient(120deg, rgba(var(--pal-acc-rgb), .16), rgba(var(--pal-acc-rgb), .04) 55%, transparent), var(--pal-s1) !important;
  border: 1px solid var(--pal-bd) !important;
  color: var(--pal-t1) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.page-header, .pm-page-header, .as-page-header, .cfg-hero, .hero, .gya-pal-banner, .bg-brand-gradient) :is(h1, h2, h3, h4, h5, h6, p, span, small, div, .modal-title) {
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.page-header, .pm-page-header, .as-page-header, .cfg-hero, .hero, .gya-pal-banner, .bg-brand-gradient) :is(i, .bi) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .modal-header {
  background: linear-gradient(120deg, rgba(var(--pal-acc-rgb), .14), transparent 60%), var(--pal-s1) !important;
  border-bottom: 1px solid var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .modal-header :is(.modal-title, h1, h2, h3, h4, h5, h6, span, small, p) {
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .modal-header :is(i, .bi) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .modal-header .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .card-header {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark, .bg-indigo, .bg-purple, .bg-gradient):not(.badge):not(.btn):not(.progress-bar) {
  background: var(--pal-s2) !important;
  color: var(--pal-t1) !important;
}

/* ── Insignias y etiquetas: acento suave ───────────────────────────────────── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.badge, .gya-pal-chip):not(.gya-pal-no) {
  background: var(--pal-acc-soft) !important;
  border: 1px solid var(--pal-acc-line) !important;
  color: var(--pal-acc-claro) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.badge, .gya-pal-chip):not(.gya-pal-no) :is(i, .bi, span, b, strong) {
  color: inherit !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.badge.bg-danger, .badge.text-bg-danger, .gya-pal-chip-rojo) {
  background: rgba(240, 122, 122, .12) !important;
  border-color: rgba(240, 122, 122, .35) !important;
  color: var(--pal-rojo) !important;
}
/* Un número dentro de un botón (ej. "Eliminar seleccionados 0"). */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .btn .badge {
  background: rgba(0, 0, 0, .22) !important;
  border-color: transparent !important;
  color: inherit !important;
}

/* ── Avisos ────────────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .alert {
  background: var(--pal-s2) !important;
  border: 1px solid var(--pal-bd) !important;
  border-left: 3px solid var(--pal-acc) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .alert :is(i, .bi) {
  color: var(--pal-acc-claro);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .alert-danger {
  border-left-color: var(--pal-rojo) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .alert-danger :is(i, .bi) {
  color: var(--pal-rojo);
}

/* ── Controles: interruptores, casillas, pestañas, paginación, progreso ───── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .form-check-input {
  background-color: var(--pal-s3) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .form-check-input:checked {
  background-color: var(--pal-acc) !important;
  border-color: var(--pal-acc) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .nav-tabs {
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .nav-tabs .nav-link {
  color: var(--pal-t2) !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: var(--pal-s1) !important;
  border-color: var(--pal-bd) var(--pal-bd) var(--pal-s1) !important;
  box-shadow: inset 0 2px 0 var(--pal-acc) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .nav-pills .nav-link {
  color: var(--pal-t2) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .nav-pills .nav-link.active {
  background: var(--pal-grad) !important;
  color: var(--pal-acc-txt) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .page-link {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t2) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.page-item.active .page-link, .page-link.active) {
  background: var(--pal-grad) !important;
  border-color: transparent !important;
  color: var(--pal-acc-txt) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .progress {
  background: var(--pal-s3) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .progress-bar {
  background: var(--pal-grad) !important;
  color: var(--pal-acc-txt) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.dropdown-item, .list-group-item-action):is(:hover, :focus, .active) {
  background: var(--pal-acc-soft) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .dropdown-item :is(i, .bi) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body ::selection {
  background: rgba(var(--pal-acc-rgb), .35);
  color: #ffffff;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) ::-webkit-scrollbar-thumb {
  background: var(--pal-s3) !important;
}

/* ── Clases que pone el normalizador de tema.js en lo pintado con colores fijos ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-sbg:not(#gya-p1):not(#gya-p2) {
  background: var(--pal-bg) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-s1:not(#gya-p1):not(#gya-p2) {
  background: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-s2:not(#gya-p1):not(#gya-p2) {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-txt:not(#gya-p1):not(#gya-p2) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-txt-blanco:not(#gya-p1):not(#gya-p2) {
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-borde:not(#gya-p1):not(#gya-p2) {
  border-color: var(--pal-acc-line) !important;
}

/* Selector de estilo / tipo de menú */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-tm-opt.sel {
  border-color: var(--pal-acc) !important;
  background: var(--pal-acc-soft) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-tm-opt .gya-tm-check {
  color: var(--pal-acc-claro) !important;
}

/* Contenedores de tablas (dark-theme.css los pinta por #id). */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(table, .table-responsive, .gya-tabla-scroll):not(#gya-p1):not(#gya-p2) {
  background-color: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
}

html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-txt-gris:not(#gya-p1):not(#gya-p2) {
  color: var(--pal-t2) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-pal-txt-rojo:not(#gya-p1):not(#gya-p2) {
  color: var(--pal-rojo) !important;
}
/* Campos y grupos que cada pantalla pinta por #id (#rucCliente, #nombreCliente…). */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.form-control, .form-select, .input-group-text, textarea, select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], input[type="month"], input[type="time"], input[type="tel"], input[type="password"], input:not([type])):not(.btn):not(#gya-p1):not(#gya-p2) {
  background-color: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .input-group:not(#gya-p1):not(#gya-p2) {
  background-color: transparent !important;
  border-color: var(--pal-bd) !important;
}
/* ── Mensajes del sistema (JavaScript/mensajes_sistema.js: gyaSystemNotify / gyaConfirmar / gyaPedir) ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body dialog.gya-msg {
  background: var(--pal-s1) !important;
  color: var(--pal-t1) !important;
  border: 1px solid var(--pal-bd) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .55) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body dialog.gya-msg::backdrop {
  background: rgba(0, 0, 0, .6);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg h2 { color: var(--pal-t1) !important; }
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg p { color: var(--pal-t2) !important; }
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg small { color: var(--pal-t3) !important; }
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg .gya-msg-icon {
  background: var(--pal-acc-soft) !important;
  color: var(--pal-acc-claro) !important;
  border: 1px solid var(--pal-acc-line);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg.error .gya-msg-icon {
  background: rgba(240, 122, 122, .12) !important;
  color: var(--pal-rojo) !important;
  border-color: rgba(240, 122, 122, .35);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg .gya-msg-actions button {
  background: var(--pal-grad) !important;
  color: var(--pal-acc-txt) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg .gya-msg-actions button.secondary {
  background: var(--pal-s3) !important;
  color: var(--pal-t1) !important;
  border: 1px solid var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-msg .gya-msg-input {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
/* Avisos flotantes (Toastify) */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .toastify {
  background: var(--pal-s2) !important;
  color: var(--pal-t1) !important;
  border: 1px solid var(--pal-bd) !important;
  border-left: 3px solid var(--pal-acc) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}
/* ── Componentes conocidos: en CSS para que salgan con el color correcto desde el primer cuadro
      (sin esperar al normalizador). ── */
/* Ficha "Ver" (JavaScript/ficha_detalle.js) */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body #gyaFichaModal .ficha-head {
  background: linear-gradient(120deg, rgba(var(--pal-acc-rgb), .16), transparent 60%), var(--pal-s1) !important;
  border-bottom: 1px solid var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body #gyaFichaModal .ficha-head .ico {
  background: var(--pal-acc-soft) !important;
  color: var(--pal-acc-claro) !important;
  border: 1px solid var(--pal-acc-line);
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body #gyaFichaModal .ficha-sec {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body #gyaFichaModal .ficha-sec h6 {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body #gyaFichaModal .ficha-item .l {
  color: var(--pal-t3) !important;
}
/* Etiqueta del código interno en la tabla de productos */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .codigo-interno-badge {
  background: var(--pal-acc-soft) !important;
  border: 1px solid var(--pal-acc-line) !important;
  color: var(--pal-acc-claro) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .codigo-interno-badge::before {
  border-right-color: var(--pal-acc) !important;
}

/* ── Menús (barra superior, lateral, íconos): texto blanco y el acento solo en el ícono.
      En CSS para que los submenús ya se abran con estos colores (se muestran con :hover). ── */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.gya-top-trigger, .gya-top-direct, .gya-top-home, .gya-top-link, .gya-top-report-parent, .gya-top-report-title, .cv-link, .cv-label) {
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.gya-top-trigger, .gya-top-direct, .gya-top-home, .gya-top-link, .gya-top-report-parent, .gya-top-report-title, .cv-link) :is(i, .bi) {
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.gya-top-link, .gya-top-report-parent, .cv-link):is(:hover, :focus-visible, .active),
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .gya-top-item.open > .gya-top-trigger {
  background: var(--pal-acc-soft) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.gya-top-dropdown, .gya-top-report-submenu) {
  background: var(--pal-s1) !important;
  border-color: var(--pal-bd) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .cv-link.cv-danger,
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .cv-link.cv-danger :is(i, .bi) {
  color: var(--pal-rojo) !important;
}
/* ── Selects ───────────────────────────────────────────────────────────────
   1) Selector con buscador (JavaScript/searchable-select.js): campo gris como los demás,
      lista desplegable opaca y opciones con el acento suave (antes salía verde de botón
      y la lista se mezclaba con la tabla de atrás). */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-toggle {
  background: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-toggle :is(span, i, .bi) {
  color: inherit !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-toggle .bi-chevron-down {
  color: var(--pal-t3) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.searchable-select-toggle:hover, .searchable-select-toggle:focus, .searchable-select.is-open .searchable-select-toggle) {
  border-color: var(--pal-acc) !important;
  box-shadow: 0 0 0 3px rgba(var(--pal-acc-rgb), .18) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-menu {
  background: var(--pal-s1) !important;
  border: 1px solid var(--pal-bd) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .6) !important;
  z-index: 1200 !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-search {
  background-color: var(--pal-s2) !important;
  border-color: var(--pal-bd) !important;
  color: var(--pal-t1) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-search:focus {
  border-color: var(--pal-acc) !important;
  box-shadow: 0 0 0 3px rgba(var(--pal-acc-rgb), .18) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-option {
  background: transparent !important;
  border: 0 !important;
  color: var(--pal-t1) !important;
  box-shadow: none !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body :is(.searchable-select-option:hover, .searchable-select-option:focus) {
  background: rgba(var(--pal-acc-rgb), .22) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-option.is-selected {
  background: var(--pal-acc-soft) !important;
  color: var(--pal-acc-claro) !important;
}
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .searchable-select-empty {
  color: var(--pal-t3) !important;
}

/* 2) Selects comunes: lista desplegable oscura. Donde el navegador lo permite (Chrome, Edge y
      Brave recientes), la lista se dibuja con la paleta, sin el azul del sistema operativo. */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select :is(option, optgroup) {
  background-color: var(--pal-s1);
  color: var(--pal-t1);
}
@supports (appearance: base-select) {
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size]),
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size])::picker-icon {
    display: none;
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size])::picker(select) {
    background: var(--pal-s1);
    color: var(--pal-t1);
    border: 1px solid var(--pal-bd);
    border-radius: 10px;
    padding: 5px;
    margin-top: 4px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .6);
    max-height: min(360px, 60vh);
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size]) option {
    padding: 7px 10px;
    border-radius: 7px;
    background: transparent !important;
    color: var(--pal-t1) !important;
    cursor: pointer;
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size]) option::checkmark {
    display: none;
  }
  /* sistema.css fija el fondo de las opciones con !important: acá también va con !important. */
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size]) option:checked {
    background: var(--pal-acc-soft) !important;
    color: var(--pal-acc-claro) !important;
  }
  html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body select:not([multiple]):not([size]) option:is(:hover, :focus-visible) {
    background: rgba(var(--pal-acc-rgb), .22) !important;
    color: #ffffff !important;
    outline: none;
  }
}
/* Select destacado de sucursal (Productos): borde con el acento, sin el azul. */
html[data-bs-theme="dark"][data-gya-oscuro]:not([data-gya-oscuro="clasico"]) body .sucursal-destacada .form-select {
  border-color: var(--pal-acc-line) !important;
  box-shadow: 0 0 0 3px rgba(var(--pal-acc-rgb), .12) !important;
  background-color: var(--pal-s2) !important;
}