/* Tema «nocturno» (13/10/2026, rediseño del CRM M6): el modo oscuro de la
   app. Se elige en el selector de tema del encabezado (Estándar, Sol alto,
   Nocturno o «Como el sistema», que sigue a prefers-color-scheme); lo
   resuelve sidebar-init.js desde el <head> y deja html[data-theme].

   Reglas de esta hoja:
   - Redefine los MISMOS nombres del contrato de :root (app.css) y de
     componentes.css; no inventa variables. La marca (--marca-*) y el riel
     lateral no cambian: ya son oscuros y la identidad no depende del tema.
   - En oscuro --azul, --error, --exito, --advertencia y --titulo se aclaran
     para leerse como TEXTO; donde además son relleno con letra blanca, la
     letra pasa a --sobre-relleno (oscura). Medido con WCAG 2.1: todo texto
     ≥ 4.5:1 y el borde de los campos ≥ 3:1 (la tabla está en
     contexto/crm.md, M6).
   - Sustituye uno a uno los colores fijos que quedaban en app.css,
     inline.css y las hojas de página de la app. El sitio público
     (caratula, sitio, presentacion, legal) no carga esta hoja.
   - Todo va bajo @media screen: lo impreso sale con el tema claro. */
@media screen {
  html[data-theme="nocturno"] {
    color-scheme: dark;
    --fondo: #0E1A1F;
    --blanco: #15242B;
    --texto: #E2EBEE;
    --texto-secundario: #9DB2BA;
    --borde: #2B414A;
    --titulo: #A6D3E0;
    --azul: #4DB3CF;
    --azul-hover: #74C7DD;
    --azul-suave: #183A45;
    --azul-claro: #8CCBDD;
    --exito: #5FC198;
    --exito-suave: #14342A;
    --advertencia: #E0AE55;
    --advertencia-suave: #3A2E14;
    --error: #EE8A82;
    --error-suave: #3D201E;
    --tabla-cabecera: #1D323A;
    --tabla-cebra: #182A31;
    --tabla-total: #1B3038;
    --campo-borde: #5E7C88;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.45);
    --sombra-flotante: 0 12px 32px rgba(0, 0, 0, 0.6);
    /* componentes.css: la letra de las píldoras de estado. */
    --est-texto-neutro: #AFC0C6;
    --est-texto-info: #7CC8DE;
    --est-texto-alerta: #EBC072;
    --est-texto-exito: #7FD1AD;
    --est-texto-error: #F3A49C;
    /* Solo de esta hoja: la letra sobre un relleno de color claro. */
    --sobre-relleno: #08191F;
    /* reportes.css e inline.css la usan con respaldo en --blanco. */
    --superficie: #15242B;
  }

  /* Rellenos de color con letra blanca fija: la letra pasa a oscura. Con
     :where() el prefijo no suma especificidad: solo sustituye a la regla
     base de app.css (va después) y cualquier botón con estilo propio
     (secundario, «salir», el buscador, las etiquetas) conserva su letra. */
  :where(html[data-theme="nocturno"]) button, :where(html[data-theme="nocturno"]) .boton,
  :where(html[data-theme="nocturno"]) main a.boton, :where(html[data-theme="nocturno"]) main a.boton:hover,
  :where(html[data-theme="nocturno"]) .avatar, :where(html[data-theme="nocturno"]) .paginacion-actual,
  :where(html[data-theme="nocturno"]) .campana-cuenta { color: var(--sobre-relleno); }
  :where(html[data-theme="nocturno"]) button:disabled { background: #2B414A; color: #8EA3AB; }
  /* nomina_periodo.css se carga después de esta hoja: aquí sí con prefijo. */
  html[data-theme="nocturno"] .np-pasos li.hecho .np-paso-num,
  html[data-theme="nocturno"] .np-pasos li.actual .np-paso-num,
  html[data-theme="nocturno"] main a.np-chip.activo, html[data-theme="nocturno"] .np-chip.activo strong,
  html[data-theme="nocturno"] .np-obs-n { color: var(--sobre-relleno); }
  html[data-theme="nocturno"] button.peligro:hover, html[data-theme="nocturno"] .boton.peligro:hover { background: #F5A8A1; }
  /* «Saltar al contenido» usa --titulo de relleno: aquí, el petróleo de la marca. */
  html[data-theme="nocturno"] .saltar-contenido { background: var(--marca-navy); color: #FFFFFF; }
  html[data-theme="nocturno"] .lateral { color-scheme: dark; }

  /* app.css: colores fijos de texto pensados para fondos claros. */
  html[data-theme="nocturno"] .migas .separador { color: #6A858F; }
  html[data-theme="nocturno"] th { color: #C3D3D8; }
  html[data-theme="nocturno"] code { background: var(--tabla-cabecera); }
  html[data-theme="nocturno"] .error, html[data-theme="nocturno"] .alerta-error,
  html[data-theme="nocturno"] .badge-error, html[data-theme="nocturno"] .badge-cancelado,
  html[data-theme="nocturno"] .toast.err, html[data-theme="nocturno"] .np-mini-f,
  html[data-theme="nocturno"] .np-est-error,
  html[data-theme="nocturno"] .actividad-lista .etiqueta.alerta { color: #F4B4AE; }
  html[data-theme="nocturno"] .badge-parcial, html[data-theme="nocturno"] .badge-pendiente,
  html[data-theme="nocturno"] .alerta-pendiente, html[data-theme="nocturno"] .banner-preliminar,
  html[data-theme="nocturno"] .aviso.advertencia, html[data-theme="nocturno"] .np-mini-i { color: #F0CA85; }
  html[data-theme="nocturno"] .badge-pagado, html[data-theme="nocturno"] .ok-pendiente,
  html[data-theme="nocturno"] .banner-oficial, html[data-theme="nocturno"] .toast.ok { color: #8FDDB9; }
  html[data-theme="nocturno"] .toast.ok { border-color: #2D6B52; }
  html[data-theme="nocturno"] .toast.err { border-color: #7A3E39; }
  html[data-theme="nocturno"] .badge-pago.badge-asociado { color: #C3D3D8; }
  html[data-theme="nocturno"] .lectura-cuerpo .hueco { background: #4A3B12; color: #F2D9A0; }

  /* CRM: etiquetas de lista cerrada, línea de tiempo y kanban. */
  html[data-theme="nocturno"] .etiqueta { background: #22343B; color: #C9D6DA; }
  html[data-theme="nocturno"] .etiqueta-azul { background: #17324A; color: #9FC8EE; }
  html[data-theme="nocturno"] .etiqueta-verde { background: #14342A; color: #8FDDB9; }
  html[data-theme="nocturno"] .etiqueta-amarillo { background: #3A3214; color: #EDD27A; }
  html[data-theme="nocturno"] .etiqueta-naranja { background: #3D2615; color: #F3B784; }
  html[data-theme="nocturno"] .etiqueta-rojo { background: #3D201E; color: #F4B4AE; }
  html[data-theme="nocturno"] .etiqueta-morado { background: #2D2240; color: #CDB3EC; }
  html[data-theme="nocturno"] .linea-tiempo .meta { color: var(--texto-secundario); }
  html[data-theme="nocturno"] .kanban-columna { background: #111F25; }
  html[data-theme="nocturno"] .kanban-tarjeta { background: var(--blanco); }

  /* Nómina (nomina_periodo.css). */
  html[data-theme="nocturno"] .np-chip-timbrado strong, html[data-theme="nocturno"] .np-chip-revisar strong,
  html[data-theme="nocturno"] .c-var.np-var-alerta,
  html[data-theme="nocturno"] .c-var.np-var-alerta small { color: #E8BD6E; }
  html[data-theme="nocturno"] .np-aviso-timbrado, html[data-theme="nocturno"] .np-aviso-revisar { color: #F0CA85; }

  /* Bancos (banco.css): el distintivo usaba --blanco como letra. Sobre los
     rellenos fijos (petróleo, coral, teal) va blanca; sobre los que se
     aclaran en oscuro (turquesa, verde, gris), oscura. */
  html[data-theme="nocturno"] .banco-distintivo { color: #FFFFFF; }
  html[data-theme="nocturno"] .banco-distintivo.banco-044, html[data-theme="nocturno"] .banco-distintivo.banco-030,
  html[data-theme="nocturno"] .banco-distintivo.desconocido { color: var(--sobre-relleno); }

  /* Configuración (configuracion.css). */
  html[data-theme="nocturno"] .config-tarjeta { border-color: var(--borde); }
  html[data-theme="nocturno"] .config-tarjeta:hover { border-color: var(--campo-borde); background: var(--tabla-cebra); }
  html[data-theme="nocturno"] .config-tarjeta p { color: var(--texto-secundario); }
  html[data-theme="nocturno"] .config-resumen { color: var(--texto-secundario) !important; }

  /* inline.css: las clases u-* traen grises y bordes fijos con !important. */
  html[data-theme="nocturno"] .u-2c31351, html[data-theme="nocturno"] .u-3d51fa4,
  html[data-theme="nocturno"] .u-3d9b68f, html[data-theme="nocturno"] .u-4306941,
  html[data-theme="nocturno"] .u-58a9b58, html[data-theme="nocturno"] .u-6d62ccc,
  html[data-theme="nocturno"] .u-6e3c16d, html[data-theme="nocturno"] .u-71d8fd5,
  html[data-theme="nocturno"] .u-84abd85, html[data-theme="nocturno"] .u-89b1083,
  html[data-theme="nocturno"] .u-8ab293c, html[data-theme="nocturno"] .u-8fa341f,
  html[data-theme="nocturno"] .u-943ff14, html[data-theme="nocturno"] .u-a264636,
  html[data-theme="nocturno"] .u-a5fc9c5, html[data-theme="nocturno"] .u-b51fe49,
  html[data-theme="nocturno"] .u-c31166e, html[data-theme="nocturno"] .u-dfd58b3,
  html[data-theme="nocturno"] .u-eb27e3b { color: var(--texto-secundario) !important; }
  html[data-theme="nocturno"] .u-9260b6e { color: #E8BD6E !important; }
  html[data-theme="nocturno"] .u-cdb7304 { color: var(--error) !important; }
  html[data-theme="nocturno"] .u-76b4760, html[data-theme="nocturno"] .u-caff6f6 { border-color: var(--borde) !important; }
  html[data-theme="nocturno"] .u-85188dc { border-top-color: var(--campo-borde) !important; }

  /* Pantalla de acceso: el logo principal es para fondo claro; en oscuro,
     el inverso del mismo kit (archivo sin tocar). */
  html[data-theme="nocturno"] .acceso-logo { content: url("/static/marca/erp/03_logo_inverso.svg"); }
}