/* El Pescador · Caja — MODO NOCHE. Se carga al final; todas las reglas van bajo :root[data-tema="oscuro"], así el modo día no cambia.
   Paleta (10-nov-2026, pedido de Harold): NEGRO de verdad. Fondo #000, superficies casi negras y neutras escalonadas
   fondo < sup < sup2 < sup3, texto blanco frío; el azul de la marca (#1B6CB5) queda solo en los detalles.
   Contrastes (WCAG): --texto ≥ 15:1 sobre --sup3; --texto2 ≥ 8:1; --texto3 ≥ 6:1; --campo ≥ 4,5:1 sobre --sup.
   Siguen CLAROS a propósito: el RIDE de ejemplo (papel), el código de barras, la capa «ampliar código», el QR del 2FA y la impresión. */

/* ---------- tokens ---------- */
:root[data-tema="oscuro"]{
  color-scheme:dark;                                            /* barras de desplazamiento, select, fecha, progress, color */
  --fondo:#000000; --sup:#0B0B0D; --sup2:#141417; --sup3:#1D1D21;
  --linea:#232327; --linea2:#34343B; --campo:#80808A;
  --texto:#F5F7FA; --texto2:#B8BCC6; --texto3:#9A9EA8;
  --faro-turq:#2DD4BF;
  --tinta-btn:#F5F7FA; --sobre-tinta:#000000;                   /* botón principal claro con texto negro */
  --ok:#5FD68A; --ok-bg:#12301F; --warn:#F2C14E; --warn-bg:#33270C; --mal:#FF8A80; --mal-bg:#3A1714;
  --info:#9DBBFF; --info-bg:#101A33;
  --ok-solido:#1E7A3C; --mal-solido:#B42318;                    /* rellenos con número blanco: 5,4:1 y 6,6:1 */
  --acento-tono:var(--acento-tono-noche,#E8E4DA);               /* iconos.js lo calcula ≥ 4,5:1 sobre --sup2 (El Pescador: tono de #1B6CB5) */
  --acento-suave:color-mix(in srgb,var(--acento-tono) 24%,var(--sup));
  --acento-osc:var(--acento-tono);
  --sombra:none;
  --sombra-alta:0 0 0 1px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.75);
}
@media (prefers-contrast:more){
  :root[data-tema="oscuro"]{--linea:#3E4A47;--linea2:#56635F;--campo:#9AA6A1;--texto2:#D3D6CF;--texto3:#C2C7C1}
}

/* ---------- base ---------- */
:root[data-tema="oscuro"],:root[data-tema="oscuro"] body{background:var(--fondo)}
:root[data-tema="oscuro"] ::selection{background:color-mix(in srgb,var(--acento-tono) 45%,transparent);color:var(--texto)}

/* ---------- encabezado flotante ---------- */
:root[data-tema="oscuro"] header.top .isla{border-color:color-mix(in srgb,var(--linea2) 90%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px -12px rgba(0,0,0,.65)}
:root[data-tema="oscuro"] header.top .chip-red .punto{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
:root[data-tema="oscuro"] header.top .chip-red.off .punto{background:var(--mal);box-shadow:none}
/* logo en letras (verde muy oscuro sobre transparente): en noche se pinta marfil */
:root[data-tema="oscuro"] .marca img,:root[data-tema="oscuro"] .nube-logo{filter:brightness(0) invert(.93) sepia(.12)}
:root[data-tema="oscuro"] .logo-img.avatar{box-shadow:0 0 0 2px var(--sup),0 0 0 3px color-mix(in srgb,var(--acento-tono) 60%,transparent),0 6px 14px -6px rgba(0,0,0,.7)}
:root[data-tema="oscuro"] .logo-neg{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.6)}
/* switch en noche: pista más honda que la isla, pulgar marfil con la luna */
:root[data-tema="oscuro"] .ts-pista{background:#000;box-shadow:inset 0 0 0 1px var(--linea2)}
@media (hover:hover) and (pointer:fine){:root[data-tema="oscuro"] .tema-switch:hover .ts-pista{background:var(--linea2)}}
/* Ajustes > Color: anillo fino solo de noche (el verde de la marca se pierde en el fondo oscuro) */
:root[data-tema="oscuro"] .punto-color{box-shadow:0 0 0 1px var(--linea2)}

/* ---------- avisos ---------- */
:root[data-tema="oscuro"] .banner.off{border-color:color-mix(in srgb,var(--mal) 35%,transparent)}
:root[data-tema="oscuro"] .banner.warn{border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
:root[data-tema="oscuro"] .toast{background:var(--texto);color:var(--fondo);box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}

/* ---------- botones ---------- */
:root[data-tema="oscuro"] .btn.pri{background:var(--tinta-btn);color:var(--sobre-tinta);border-color:var(--tinta-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
:root[data-tema="oscuro"] .btn.pri::after{background:linear-gradient(105deg,transparent 40%,rgba(13,18,17,.09) 50%,transparent 60%)}
:root[data-tema="oscuro"] .btn.acento{border-color:color-mix(in srgb,var(--mal) 45%,transparent)}
@media (hover:hover) and (pointer:fine){
  :root[data-tema="oscuro"] .btn.pri:hover{background:#FFFFFF;border-color:#FFFFFF;box-shadow:none}
}

/* ---------- tarjetas, productos, insignia ---------- */
:root[data-tema="oscuro"] .prod{background:var(--sup)}
:root[data-tema="oscuro"] .badge{border-color:var(--sup);color:var(--fondo)}   /* número carbón sobre el tono de noche (≥ 4,5:1) */
:root[data-tema="oscuro"] .hoja .card{background:var(--sup2)}

/* ---------- estados y métricas ---------- */
:root[data-tema="oscuro"] .est.ok{color:var(--ok);background:var(--ok-bg)}
:root[data-tema="oscuro"] .est.warn{color:var(--warn);background:var(--warn-bg)}
:root[data-tema="oscuro"] .est.mal{color:var(--mal);background:var(--mal-bg)}
:root[data-tema="oscuro"] .kpi .cmp.sube{color:var(--ok)}
:root[data-tema="oscuro"] .kpi .cmp.baja{color:var(--mal)}
:root[data-tema="oscuro"] .cols span.b{background:var(--linea2)}

/* ---------- formularios ---------- */
:root[data-tema="oscuro"] :is(input,select,textarea){background:var(--fondo);color:var(--texto)}
:root[data-tema="oscuro"] :is(input,select,textarea):focus{border-color:var(--texto);box-shadow:0 0 0 3px color-mix(in srgb,var(--texto) 16%,transparent)}
:root[data-tema="oscuro"] :is(button,[role=button],input,select,textarea):focus-visible{outline:2px solid var(--texto)!important}
:root[data-tema="oscuro"] option{background:var(--sup);color:var(--texto)}
:root[data-tema="oscuro"] .tema-switch:focus-visible{outline:none!important}

/* ---------- navegación ---------- */
:root[data-tema="oscuro"] nav.bottom{background:color-mix(in srgb,var(--sup) 90%,transparent);border-top-color:var(--linea)}
@media (min-width:1000px){
  :root[data-tema="oscuro"] nav.bottom{background:var(--sup);border-right-color:var(--linea)}
}

/* ---------- ventanas ---------- */
:root[data-tema="oscuro"] .velo{background:rgba(3,6,5,.62)}
:root[data-tema="oscuro"] .hoja{box-shadow:0 0 0 1px var(--linea),0 -30px 60px -30px rgba(0,0,0,.8)}
@media (min-width:1000px){:root[data-tema="oscuro"] .hoja{box-shadow:var(--sombra-alta)}}

/* ---------- pantalla de entrada ---------- */
:root[data-tema="oscuro"] .nube-entrada{background-color:var(--fondo)}
:root[data-tema="oscuro"] .nube-caja{box-shadow:0 0 0 1px var(--linea2),0 40px 80px -40px rgba(0,0,0,.8)}
:root[data-tema="oscuro"] .nube-qr{background:#FFFFFF;border-color:var(--linea2)}   /* el QR sigue blanco para escanearlo */

/* ---------- apertura del faro (sin fogonazo blanco) ---------- */
:root[data-tema="oscuro"] #apertura{background:var(--fondo)}
:root[data-tema="oscuro"] #apertura .t{stroke:var(--texto)}
:root[data-tema="oscuro"] #apertura .firma{color:var(--texto)}
:root[data-tema="oscuro"] #apertura .ap-linea{background:var(--texto)}
:root[data-tema="oscuro"] #apertura .haz{background:linear-gradient(90deg,rgba(20,184,166,.34),rgba(20,184,166,.1) 35%,rgba(20,184,166,0) 75%)}

/* ---------- estilos que inyecta comprobantes.js (van después en <head>: aquí con más especificidad) ---------- */
:root[data-tema="oscuro"] :is(.cp-per,.cp-chips) button[aria-pressed="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
:root[data-tema="oscuro"] .est.cp-azul{color:var(--info);background:var(--info-bg)}
:root[data-tema="oscuro"] .est.cp-rojo{color:#FFFFFF;background:var(--mal-solido)}
:root[data-tema="oscuro"] .cp-pt.ok{background:var(--ok-solido);color:#FFFFFF}
:root[data-tema="oscuro"] .cp-pt.mal{background:var(--mal-solido);color:#FFFFFF}
:root[data-tema="oscuro"] .cp-tl>li.ok::before{background:var(--ok);border-color:var(--ok)}
:root[data-tema="oscuro"] .cp-tl>li.mal::before{background:var(--mal);border-color:var(--mal)}
:root[data-tema="oscuro"] .cp-msg{color:var(--texto)}

/* ---------- papel: siguen claros en los dos temas ---------- */
/* RIDE de ejemplo (facturas.js) y la capa «ampliar el código» (fondo #fff en línea): sus textos usan los tokens,
   así que dentro se vuelven a poner los de día. */
:root[data-tema="oscuro"] :is(.ride,[aria-label="Código de barras ampliado"]){
  color-scheme:light;color:#0B0B0C;
  --fondo:#FFFFFF; --sup:#FFFFFF; --sup2:#F6F6F7; --sup3:#EFEFF1; --linea:#E9E9EC; --linea2:#DCDCE0; --campo:#8E8E96;
  --texto:#0B0B0C; --texto2:#55555C; --texto3:#6B6B73;
  --ok:#1E7A3C; --ok-bg:#E8F5EC; --warn:#8A5300; --warn-bg:#FFF3D6; --mal:#C4231A; --mal-bg:#FDECEA;
  --acento-tono:var(--acento-tono-dia,#111113);
}
:root[data-tema="oscuro"] .hoja > .ride{background:#FFFFFF;border-color:#DCDCE0;box-shadow:0 1px 0 rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.7)}
:root[data-tema="oscuro"] .ride .est.ok{color:#17663A;background:#EEF6F0}
:root[data-tema="oscuro"] .ride .est.warn{color:#7A4A00;background:#FBF3E2}
:root[data-tema="oscuro"] .ride .est.mal{color:#A8261C;background:#FBEDEB}
/* código de barras: negro sobre blanco siempre (la cámara lo lee) */
:root[data-tema="oscuro"] svg[role=img]{filter:none}

/* ---------- impresión: siempre en papel claro ---------- */
@media print{
  :root[data-tema="oscuro"]{
    color-scheme:light;
    --fondo:#FFFFFF; --sup:#FFFFFF; --sup2:#F6F6F7; --sup3:#EFEFF1; --linea:#E9E9EC; --linea2:#DCDCE0; --campo:#8E8E96;
    --texto:#0B0B0C; --texto2:#55555C; --texto3:#6B6B73; --faro-turq:#0F8F82; --tinta-btn:#0B0B0C; --sobre-tinta:#FFFFFF;
    --ok:#1E7A3C; --ok-bg:#E8F5EC; --warn:#8A5300; --warn-bg:#FFF3D6; --mal:#C4231A; --mal-bg:#FDECEA;
    --info:#1F4FB8; --info-bg:#EAF0FC;
    --acento-tono:var(--acento-tono-dia,#111113);
  }
  :root[data-tema="oscuro"],:root[data-tema="oscuro"] body{background:#FFFFFF}
  :root[data-tema="oscuro"] .marca img,:root[data-tema="oscuro"] .nube-logo{filter:none}
}