/* ─────────────────────────────────────────────────────────────────────────
   HubPal — Modo nocturno: los retoques a mano.

   El tema oscuro de cada hoja lo genera js/tema.js al cargar la página (su
   «gemela»: las mismas reglas con los colores transformados). Aquí va solo lo
   que el algoritmo no puede saber. Todo cuelga de :root[data-tema="oscuro"],
   que pone tema.js: en claro esta hoja no pinta nada. Y su <link> lleva
   `data-tema` para que tema.js no le haga gemela.

   Las variables de la marca tienen gemelas por papel (--x--t texto, --x--f
   fondo, --x--b borde, --x--s sombra, --x--g gráfico): cambiar una aquí
   cambia todo lo que la usa en ese papel.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-tema="oscuro"] {
  color-scheme: dark;
  /* El fondo de la página va más oscuro que las tarjetas: en claro son casi el
     mismo color (#f4f6fa y #fff) y el algoritmo los dejaría pegados. */
  --hp-noche-pagina: #0f131a;
  --bg--f: var(--hp-noche-pagina);
  scrollbar-color: #3a4454 var(--hp-noche-pagina);
}
:root[data-tema="oscuro"],
:root[data-tema="oscuro"] body { background-color: var(--hp-noche-pagina); }

/* El logo del cliente va en su píldora blanca: es un logotipo pensado para
   fondo blanco, y sobre oscuro un logo de letras oscuras desaparece. */
:root[data-tema="oscuro"] .header-logo-mark { background: #fff; }

:root[data-tema="oscuro"] ::selection { background: rgba(240, 122, 31, .4); color: #fff; }

/* Un campo de fecha o de número sin fondo propio toma el de sistema, que con
   color-scheme: dark ya es oscuro; el icono del calendario de Chrome sale
   negro sobre negro si no se invierte. */
:root[data-tema="oscuro"] input::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Al imprimir manda el claro (tema.js además apaga el tema en beforeprint). */
@media print {
  :root[data-tema="oscuro"] { color-scheme: light; }
  :root[data-tema="oscuro"],
  :root[data-tema="oscuro"] body { background-color: #fff; }
}

/* Inicio: las etiquetas del gráfico de caja («Hoy», «Mínimo») llevan un halo del color de su tarjeta para leerse
   encima de la línea; en claro es blanco, y el algoritmo deja el trazo de un gráfico como está. */
:root[data-tema="oscuro"] .graf-lienzo svg text.halo { stroke: #1a2029; }

/* Tareas › Indicadores de incidencias: las dos series del gráfico semanal (creadas y resueltas) con sus
   tonos de noche, elegidos y comprobados contra el fondo oscuro (separación y contraste), no los del
   algoritmo; la leyenda, la tabla y el medidor van con los mismos. */
:root[data-tema="oscuro"] .kpi-s1, :root[data-tema="oscuro"] .kpi-med-v { fill: #4f8be0; background: #4f8be0; }
:root[data-tema="oscuro"] .kpi-s2 { fill: #d9731f; }
:root[data-tema="oscuro"] .kpi-ley.s1 { background: #4f8be0; }
:root[data-tema="oscuro"] .kpi-ley.s2 { background: #d9731f; }

/* Control RRHH › calendarios de ausencias (21-oct-2026): lo pendiente y los iconos de la lista mezclan el color del
   tipo con blanco (color-mix con var(), que el algoritmo no transforma); de noche, con el fondo de las tarjetas. */
:root[data-tema="oscuro"] .cal-barra.pend,
:root[data-tema="oscuro"] .cal-a-d.aus.pend { background-color: color-mix(in srgb, var(--aus-c, #2f6fb0) 20%, #1a1e24);
  color: color-mix(in srgb, var(--aus-c, #2f6fb0) 55%, #fff); }
:root[data-tema="oscuro"] .rch-ausi-ico { background-color: color-mix(in srgb, var(--aus-c, #6c7a89) 24%, #1a1e24);
  color: color-mix(in srgb, var(--aus-c, #6c7a89) 55%, #fff); }
:root[data-tema="oscuro"] .cal-a-d.aus.hoy { box-shadow: inset 0 0 0 2px #f07a1f, inset 0 0 0 4px #1a1e24; }

/* Telco BI › Cobertura (24-oct-2026): las teselas del mapa van en grises con un filtro, que el algoritmo no toca; de
   noche, invertidas, para que la red (naranja, violeta y verde) siga brillando encima de un mapa oscuro. */
:root[data-tema="oscuro"] .tbc-teselas { filter: invert(1) hue-rotate(180deg) grayscale(.55) brightness(.82) contrast(.92); }
:root[data-tema="oscuro"] .tbc-mapa { background: #12161d; }