/* =============================================
   tema-oscuro.css — Horasdia
   Modo oscuro: se activa con <html data-bs-theme="dark">
   (script en línea de header.php + js/tema.js).
   Bootstrap 5.3 ya adapta sus componentes; aquí se redefinen
   los tokens de horasdia-tokens.css / menu.css y se corrigen
   los colores claros fijos que quedan.
   Todos los selectores empiezan por html[data-bs-theme="dark"]
   para ganar a las hojas de cada página sin depender del orden.
   ============================================= */

html[data-bs-theme="dark"] {
  color-scheme: dark;

  /* ── Tokens de horasdia-tokens.css ── */
  --blue:        #3a8bd8;
  --blue-dark:   #2f7cc6;
  --blue-deeper: #8cc0f0;
  --blue-10:     rgba(58,139,216,.16);
  --blue-18:     rgba(58,139,216,.30);

  --bg:          #0e1621;
  --surface:     #162130;
  --surface-2:   #1c2939;
  --border:      #283a4f;
  --border-mid:  #34495f;
  --border-soft: #213044;

  --text-main:   #e3ebf4;
  --text-body:   #c2d0df;
  --text-sub:    #9bb0c7;
  --text-muted:  #71879f;

  --green:       #22a35a;
  --green-bg:    rgba(34,163,90,.16);
  --amber:       #e08a0b;
  --amber-bg:    rgba(224,138,11,.16);
  --red:         #e5484d;
  --red-bg:      rgba(229,72,77,.16);

  --shadow-s:    0 1px 4px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.20);
  --shadow-m:    0 4px 16px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.25);
  --shadow-l:    0 8px 32px rgba(0,0,0,.50);

  /* ── Etiquetas y avisos de color (chips) ──
     En el CSS de cada página van como var(--chip-…, #pastel-original):
     solo existen aquí, así que el modo claro sigue usando el color original. */
  --chip-naranja-bg:       rgba(230,81,0,.18);
  --chip-naranja-bg-hover: rgba(230,81,0,.28);
  --chip-naranja-txt:      #ffb27a;
  --chip-naranja-borde:    rgba(255,150,70,.40);
  --chip-ambar-bg:         rgba(245,158,11,.16);
  --chip-ambar-txt:        #fcc970;
  --chip-ambar-borde:      rgba(245,158,11,.30);
  --chip-rojo-bg:          rgba(239,68,68,.17);
  --chip-rojo-bg-hover:    rgba(239,68,68,.28);
  --chip-rojo-txt:         #fca5a5;
  --chip-verde-bg:         rgba(34,197,94,.15);
  --chip-verde-bg-hover:   rgba(34,197,94,.25);
  --chip-verde-txt:        #86efac;
  --chip-azul-bg:          rgba(59,130,246,.17);
  --chip-azul-txt:         #93c5fd;
  --chip-violeta-bg:       rgba(139,92,246,.20);
  --chip-violeta-txt:      #c4b5fd;
  --chip-rosa-bg:          rgba(236,72,153,.17);
  --chip-rosa-txt:         #f9a8d4;
  --chip-teja-bg:          rgba(234,88,12,.17);
  --chip-teja-txt:         #fdba74;
  --chip-gris-bg:          rgba(148,163,184,.14);
  --chip-gris-txt:         #cbd5e1;
  --text-label:            #a9bbd0;
  /* Recuadros dentro de formularios (datos del contrato, horario flexible): var(--bg-sub, #f8f9fa).
     Más oscuro que la modal (--surface) para que los campos (--surface-2) destaquen */
  --bg-sub:                #111b28;

  /* ── Barra de navegación (menu.css) ── */
  --nav-bg:      #12253f;
  --nav-bg-deep: #0c1a2e;

  /* ── Bootstrap: mismos colores que la app en vez del gris por defecto ── */
  --bs-body-bg:            #162130;
  --bs-body-bg-rgb:        22,33,48;
  --bs-body-color:         #e3ebf4;
  --bs-body-color-rgb:     227,235,244;
  --bs-emphasis-color:     #ffffff;
  --bs-secondary-color:    rgba(227,235,244,.65);
  --bs-secondary-bg:       #1c2939;
  --bs-secondary-bg-rgb:   28,41,57;
  --bs-tertiary-bg:        #19263a;
  --bs-tertiary-bg-rgb:    25,38,58;
  --bs-border-color:       #283a4f;
  --bs-border-color-translucent: rgba(255,255,255,.10);
  --bs-link-color:         #6aaef0;
  --bs-link-color-rgb:     106,174,240;
  --bs-link-hover-color:   #93c5f5;
  --bs-link-hover-color-rgb: 147,197,245;
}

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

/* ── Utilidades de Bootstrap que no cambian solas ── */
html[data-bs-theme="dark"] .bg-white   { background-color: var(--surface) !important; }
html[data-bs-theme="dark"] .bg-light   { background-color: var(--surface-2) !important; }
html[data-bs-theme="dark"] .text-dark  { color: var(--text-main) !important; }
html[data-bs-theme="dark"] .text-black { color: var(--text-main) !important; }
html[data-bs-theme="dark"] .border-light { border-color: var(--border) !important; }

html[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--text-main);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-bg: var(--border-soft);
  color: var(--text-main);
}

html[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: var(--text-main);
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-bg: var(--border);
  --bs-btn-hover-border-color: var(--border-mid);
  --bs-btn-active-bg: var(--border);
}

html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .form-control[readonly] {
  background-color: var(--bg);
}

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

/* ── Pie de página (footer.php) ── */
html[data-bs-theme="dark"] .app-footer {
  background: var(--surface);
  border-top-color: var(--border);
}

/* ── SweetAlert2 (swal-custom.css usa colores fijos: también lo carga el login) ── */
html[data-bs-theme="dark"] .swal2-popup {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-main);
  box-shadow: var(--shadow-l) !important;
}
html[data-bs-theme="dark"] .swal2-title { color: var(--text-main) !important; }
html[data-bs-theme="dark"] .swal2-content,
html[data-bs-theme="dark"] .swal2-html-container { color: var(--text-sub) !important; }
html[data-bs-theme="dark"] .swal2-input,
html[data-bs-theme="dark"] .swal2-textarea,
html[data-bs-theme="dark"] .swal2-select {
  background: var(--surface-2) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}
html[data-bs-theme="dark"] .swal2-validation-message {
  background: var(--surface-2);
  color: var(--text-sub);
}
html[data-bs-theme="dark"] .swal2-actions button.btn.btn-secondary,
html[data-bs-theme="dark"] .swal2-container .swal2-popup .swal2-actions .btn-secondary {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-sub) !important;
}
html[data-bs-theme="dark"] .swal2-actions .btn.btn-secondary:hover,
html[data-bs-theme="dark"] .swal2-container .swal2-popup .swal2-actions .btn-secondary:hover {
  background: var(--border) !important;
  color: var(--text-main) !important;
}
html[data-bs-theme="dark"] .swal2-backdrop-show { background: rgba(0,0,0,.55) !important; }
html[data-bs-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
html[data-bs-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix { background-color: transparent !important; }

/* ── Menú móvil del empleado (empleado-movil.css) ── */
html[data-bs-theme="dark"] .mv-sheet__lista a > i,
html[data-bs-theme="dark"] .mv-sheet__tema > i,
html[data-bs-theme="dark"] .mv-dia--futuro .mv-dia__estado,
html[data-bs-theme="dark"] .mv-mov--pago .mv-mov__ico { color: var(--chip-azul-txt); }

/* ── Filas resaltadas con fondo claro fijo ── */
html[data-bs-theme="dark"] tr.fila-ausente td { background: rgba(224,138,11,.10) !important; }
html[data-bs-theme="dark"] .fila-ausencia { background: rgba(124,58,237,.12) !important; }
html[data-bs-theme="dark"] .fila-ausencia:hover { background: rgba(124,58,237,.20) !important; }
html[data-bs-theme="dark"] .estado-horario.inactivo { background: var(--surface-2); }

/* ── Resaltado de búsqueda en la ayuda (ayuda.css) ── */
html[data-bs-theme="dark"] .ayuda-highlight { background: rgba(245,158,11,.38); color: #fde68a; }

/* ── Mapas (Leaflet: fichajes, sedes) ──
   Las teselas de OpenStreetMap solo existen en claro: se invierten con un filtro
   que deja agua oscura y calles claras sin tocar marcadores ni controles. */
html[data-bs-theme="dark"] .leaflet-container { background: #1b2430; }
html[data-bs-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7);
}
html[data-bs-theme="dark"] .leaflet-bar a,
html[data-bs-theme="dark"] .leaflet-bar a:hover {
  background: var(--surface-2);
  color: var(--text-main);
  border-bottom-color: var(--border);
}
html[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
html[data-bs-theme="dark"] .leaflet-popup-tip {
  background: var(--surface);
  color: var(--text-main);
  box-shadow: var(--shadow-m);
}
html[data-bs-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--text-sub); }
html[data-bs-theme="dark"] .leaflet-control-attribution {
  background: rgba(22,33,48,.8) !important;
  color: var(--text-muted);
}
html[data-bs-theme="dark"] .leaflet-control-attribution a { color: var(--bs-link-color); }

/* ── Botón y switch del tema en los menús ── */
.tema-switch {
  cursor: pointer;
}
.tema-switch .form-check {
  min-height: 0;
  margin: 0 0 0 auto;
  padding: 0;
}
.tema-switch .form-check-input {
  margin: 0;
  cursor: pointer;
}