/* ─────────────────────────────────────────────────────────────────────────
   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; }
}