/* PANEDIA ERP — sistema visual corporativo: minimalista (Apple HIG) + lenguaje empresarial (SAP Fiori) */
:root{
  /* PANEDIA — tema OSCURO SaaS premium · acento naranja */
  --fondo:#0d0e11; --superficie:#17191f; --superficie2:#1e212a; --borde:rgba(255,255,255,.085); --borde2:rgba(255,255,255,.16);
  --tinta:#eceef1; --tinta2:#a2a7b2; --tinta3:#6e737e;
  --acento:#f7861f; --acento-osc:#ff9d45; --acento-suave:rgba(247,134,31,.14); --shell:#101218;
  --ok:#3dd483; --ok-f:rgba(61,212,131,.14); --mal:#ff5d5d; --mal-f:rgba(255,93,93,.14); --aviso:#f2b32c; --aviso-f:rgba(242,179,44,.15);
  --verde:var(--ok); --rojo:var(--mal); --ambar:var(--aviso); --azul:var(--shell); --azul2:var(--acento); --oro:var(--acento); --gris:var(--fondo);
  /* --- sistema: elevación, radios, ritmo y movimiento (escala 4/8px) --- */
  --r1:8px; --r2:12px; --r3:16px;
  --s1:0 1px 2px rgba(0,0,0,.45); --s2:0 2px 10px rgba(0,0,0,.5); --s3:0 18px 50px rgba(0,0,0,.62);
  --ease:cubic-bezier(.22,.61,.36,1); --t:.18s var(--ease);
  --foco:0 0 0 3px var(--acento-suave); --hair:rgba(255,255,255,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;background:var(--fondo);color:var(--tinta);font-size:14px;-webkit-font-smoothing:antialiased}

/* ---- barra superior (shell) ---- */
header{background:var(--shell);color:#fff;padding:0 22px;height:54px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.marca{font-size:18px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.marca img{display:block;height:32px;width:auto;border-radius:7px}
.marca span{color:var(--acento);font-weight:300;margin-left:2px;letter-spacing:.14em}
.fechasel{display:flex;align-items:center;gap:10px}
.fechasel label{font-size:11px;font-weight:600;letter-spacing:.08em;color:#bdb4ab}
.fechasel input{font-size:14px;padding:6px 10px;border-radius:6px;border:1px solid #4a423b;background:#3a332d;color:#fff;font-weight:500}
#btn-hoy{font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 11px;border-radius:6px;border:1px solid var(--acento);background:transparent;color:var(--acento);cursor:pointer}
#btn-hoy:hover{background:var(--acento);color:#fff}
/* ---- cuadre del cobrador: hoja con el formato del Excel de cobranza ---- */
.cu-hoja{max-width:900px;background:#fff;border:1px solid var(--borde);border-radius:8px;padding:18px 22px}
.cu-titulo{background:var(--acento);color:#fff;text-align:center;font-weight:700;padding:7px 10px;letter-spacing:.05em}
.cu-cols{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-top:14px}
.cu-col{flex:1;min-width:300px}
.cu-cab{background:var(--acento);color:#fff;text-align:center;font-weight:700;padding:5px;margin-bottom:8px;letter-spacing:.05em}
.cu-tabla{width:100%;border-collapse:collapse}
.cu-tabla td{padding:5px 9px;border-bottom:1px solid #efece8;font-size:14px}
.cu-tabla .cu-num{background:var(--acento);color:#fff;text-align:center;width:36px;font-weight:600;border-bottom:1px solid #fff}
.cu-tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.cu-chico{font-size:12px;color:#7a736c}
.cu-pie{margin-top:16px;max-width:580px}
.cu-tot{background:var(--acento);color:#fff;font-weight:700;text-align:center;width:150px;border-bottom:1px solid #fff!important}
.cu-rojo{color:#b3261e}
.cu-verde{color:#1b7f4d}
/* ---- tablero de dirección (gráficos del dashboard) ---- */
.dash-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.dash-card{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:14px 16px}
.dash-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2);margin-bottom:12px}
.ch-svg{width:100%;height:auto;display:block}
.ch-leyenda-h{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--tinta2);flex-wrap:wrap;align-items:center}
.ch-escala{margin-left:auto;font-size:10.5px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.ch-ejex{display:flex;justify-content:space-between;margin-top:2px;font-size:10px;color:var(--tinta3);font-variant-numeric:tabular-nums}
.ch-bh{display:flex;flex-direction:column;gap:9px;padding:4px 0}
.ch-bh-row{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;font-size:12px}
.ch-bh-lbl{color:var(--tinta2);font-weight:600}
.ch-bh-track{background:var(--fondo);border-radius:5px;height:16px;overflow:hidden}
.ch-bh-fill{height:100%;border-radius:5px;min-width:2px;transition:width .3s}
.ch-bh-val{font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap;font-weight:600}
.ch-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta)}
.ch-leg i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.dash-insights{background:var(--acento-suave);border:1px solid var(--borde);border-left:3px solid var(--acento);border-radius:8px;padding:12px 16px;margin-bottom:18px}
.dash-insights p{margin:4px 0;font-size:13px;color:var(--tinta)}
/* ---- Dashboard Dirección General (6 pestañas, estructura tipo GG en estilo claro) ---- */
.dg-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.dg-live{display:inline-flex;align-items:center;gap:6px;background:var(--ok-f);color:var(--ok);padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.06em}
.dg-live::before{content:"";width:7px;height:7px;background:var(--ok);border-radius:50%;display:inline-block}
.dg-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 0;border-bottom:2px solid var(--borde)}
.dg-tab{padding:8px 14px;background:var(--fondo);color:var(--tinta2);font-size:12px;font-weight:600;border:1px solid var(--borde);border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap}
.dg-tab:hover{color:var(--acento)}
.dg-tab.on{background:var(--superficie);color:var(--acento);border-bottom:2px solid var(--acento);margin-bottom:-2px}
.dg-body{padding-top:16px}
.dg-body h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta2);margin:18px 0 8px}
.card .sub{font-size:10.5px;color:var(--tinta2);margin-top:4px}
.card .sub.pos{color:var(--ok)} .card .sub.neg{color:var(--mal)}
.dg-pend{color:var(--tinta3);font-weight:600}
.dg-req{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--tinta3);background:var(--fondo);border:1px solid var(--borde);border-radius:4px;padding:1px 6px;text-transform:uppercase;vertical-align:middle}
.dg-cel{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;min-width:42px;text-align:center;color:#fff}
.dg-cel.g{background:var(--ok)} .dg-cel.y{background:var(--aviso)} .dg-cel.r{background:var(--mal)} .dg-cel.x{background:#1a1a1a}
td.suc{font-weight:600}
#btn-refrescar{font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 11px;border-radius:6px;border:1px solid #4a423b;background:transparent;color:#bdb4ab;cursor:pointer}
#btn-refrescar:hover{border-color:var(--acento);color:var(--acento)}
#btn-refrescar.pendiente{border-color:var(--acento);background:var(--acento);color:#fff;animation:pulso-cambios 1.6s ease-in-out infinite}
@keyframes pulso-cambios{0%,100%{opacity:1}50%{opacity:.55}}
.reloj{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding-left:6px;border-left:1px solid #4a423b}
.reloj .hora{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.02em}
.reloj .hora small{font-size:12px;color:#bdb4ab;font-weight:500}
.reloj .dia-txt{font-size:10px;color:#bdb4ab;text-transform:capitalize}

/* ---- navegación: pestañas de grupo + subnivel ---- */
nav{padding:0 22px;background:var(--superficie);border-bottom:1px solid var(--borde);position:sticky;top:52px;z-index:9}
nav .fila-grupos{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--borde)}
nav .fila-grupos button{font-size:12px;font-weight:600;letter-spacing:.07em;color:var(--tinta2);background:none;border:none;border-bottom:2px solid transparent;padding:12px 14px 10px;cursor:pointer}
nav .fila-grupos button.on{color:var(--acento);border-bottom-color:var(--acento)}
nav .fila-grupos button.salir{margin-left:auto;color:var(--tinta3)}
nav .fila-grupos button.salir:hover{color:var(--mal)}
nav .fila-items{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}
nav .fila-items button{font-size:13px;font-weight:500;padding:6px 14px;border-radius:6px;border:1px solid var(--borde2);background:var(--superficie);color:var(--tinta);cursor:pointer}
nav .fila-items button:hover{border-color:var(--acento)}
nav .fila-items button.on{background:var(--acento);color:#fff;border-color:var(--acento);font-weight:700}

main{padding:20px 22px;max-width:1340px;margin:0 auto}
#avisos .avisos-caja{max-width:1340px;margin:10px auto 0;padding:0 22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.avisos-titulo{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--tinta2)}
.aviso{font-size:12px;font-weight:500;padding:5px 11px;border-radius:6px;border-left:3px solid}
.aviso.ambar{background:var(--aviso-f);color:var(--aviso);border-color:var(--aviso)}
.aviso.rojo{background:var(--mal-f);color:var(--mal);border-color:var(--mal)}
.aviso.info{background:var(--superficie);color:var(--tinta2);border-color:var(--borde2)}
h2{font-size:19px;font-weight:600;color:var(--tinta);margin:2px 0 16px;letter-spacing:.01em}
h3{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta2);margin:22px 0 8px}

/* ---- tarjetas KPI ---- */
.cards{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.card{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:14px 16px;min-width:160px;flex:1}
.card .lbl{font-size:10.5px;color:var(--tinta2);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.card .val{font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card.verde{border-left:3px solid var(--ok);background:var(--ok-f)} .card.verde .val{color:var(--ok)}
.card.rojo{border-left:3px solid var(--mal);background:var(--mal-f)} .card.rojo .val{color:var(--mal)}
.card.ambar{border-left:3px solid var(--aviso);background:var(--aviso-f)} .card.ambar .val{color:var(--aviso)}

/* ---- tablas (lista de datos estilo informe) ----
   width:auto = la tabla se ajusta a su contenido y NO se estira al ancho completo;
   asi los numeros (.num, alineados a la derecha) dejan de quedar flotando lejos de su etiqueta. */
table{width:auto;border-collapse:collapse;background:var(--superficie);font-size:13px;margin-bottom:0}
th{background:#f7f8fa;color:var(--tinta2);padding:8px 10px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--borde2);border-right:1px solid var(--borde2);position:sticky;top:0}
td{padding:7px 10px;border-bottom:1px solid var(--borde);border-right:1px solid var(--borde);font-variant-numeric:tabular-nums}
th:last-child,td:last-child{border-right:none}
tr:hover td{background:#f6f9fd}
/* el panel (borde/sombra) se ajusta a la tabla y no deja una caja vacia gigante;
   max-width:100% + overflow-x:auto = las tablas anchas (muchas columnas) siguen con scroll horizontal. */
.tabla-wrap{width:fit-content;max-width:100%;overflow-x:auto;border:1px solid var(--borde);border-radius:8px;background:var(--superficie);margin-bottom:16px}
/* dentro de un modal la tabla SI ocupa el ancho del modal (no se ve diminuta a la izquierda) */
.modal-box .tabla-wrap{width:100%}
.num{text-align:right}
.pill{padding:2px 9px;border-radius:4px;font-size:11px;font-weight:600}
.pill.verde{background:var(--ok-f);color:var(--ok)} .pill.rojo{background:var(--mal-f);color:var(--mal)} .pill.ambar{background:var(--aviso-f);color:var(--aviso)}

/* ---- formularios ---- */
.form{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.form .campo{display:flex;flex-direction:column;gap:4px}
.form label,.campo label{font-size:10.5px;font-weight:600;color:var(--tinta2);text-transform:uppercase;letter-spacing:.07em}
.form input,.form select,.cuadro-asignar input,.selector input,.pz input{font-size:14px;padding:9px 10px;border:1px solid var(--borde2);border-radius:6px;min-width:110px;background:var(--superficie);color:var(--tinta)}
.form input:focus,.form select:focus,.selector input:focus{border-color:var(--acento);outline:2px solid var(--acento-suave)}
button.btn{font-size:14px;font-weight:600;padding:10px 22px;border-radius:6px;border:none;background:var(--acento);color:#fff;cursor:pointer;letter-spacing:.02em}
button.btn:hover{background:var(--acento-osc)}
button.btn:active{transform:scale(.985)}
button.mini{font-size:11px;font-weight:500;padding:3px 9px;border-radius:5px;border:1px solid var(--borde2);background:var(--superficie);cursor:pointer;color:var(--tinta2)}
button.mini:hover{color:var(--mal);border-color:var(--mal)}
button.mini.editar:hover{color:var(--acento);border-color:var(--acento)}
.form.editando{border-color:var(--acento);outline:2px solid var(--acento-suave)}
.aviso-edicion{width:100%;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--acento);text-transform:uppercase}
button.btn.cancelar{background:var(--superficie);color:var(--tinta2);border:1px solid var(--borde2)}
button.btn.cancelar:hover{background:var(--fondo);color:var(--tinta)}

/* ---- estado de cuenta ---- */
.dia-row td{background:#fdeede!important;font-weight:600}
/* colorimetría de reportes */
tr.rep-verde td{background:#e8f5ec}
tr.rep-rojo td{background:#fbe9eb}
tr.rep-ambar td{background:#fdf3e0}
.pago-row td{color:var(--tinta2);font-size:11px;padding-top:1px;padding-bottom:1px;line-height:1.2;white-space:nowrap}
.check-ok{color:var(--ok);font-weight:600}
.check-mal{color:var(--mal);font-weight:600}
.selector{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.selector input{font-size:15px;min-width:280px}
.nota{font-size:12px;color:var(--tinta3);margin:10px 0;line-height:1.5}

/* ---- franja ME QUEDA ---- */
.mequeda{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mequeda .q{background:var(--shell);color:#fff;border-radius:8px;padding:10px 18px;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums;min-width:130px}
.mequeda .q small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#aeb6c2;font-weight:600;margin-top:2px}

/* ===== PESAJE (2.10) ===== */
.pesaje-grid{display:grid;grid-template-columns:600px 1fr;gap:16px;align-items:start}
@media(max-width:980px){.pesaje-grid{grid-template-columns:1fr}}
.panel-pesa{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:128px}
/* PESAJE horizontal: teclado a la izquierda y las jabas a su costado (no debajo) */
.pesa-fila{display:flex;flex-direction:row-reverse;gap:14px;align-items:flex-start}
.pesa-fila .numpad{flex:0 0 210px}
.pesa-jabas{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
@media(max-width:620px){.pesa-fila{flex-direction:column}.pesa-fila .numpad{flex:none}}
.display-peso{display:flex;gap:8px}
.dp{flex:1;background:#15191f;border-radius:8px;padding:16px 16px;text-align:right}
.dp label{display:block;font-size:13px;color:#7d8590;font-weight:600;text-align:left;letter-spacing:.09em}
.dp input{width:100%;background:transparent;border:none;color:#e8eaed;font-size:72px;font-weight:600;text-align:right;outline:none;font-family:'Segoe UI',Consolas,monospace;font-variant-numeric:tabular-nums;line-height:1.05}
.dp.chico span{font-size:46px;font-weight:600;color:#aeb6c2;font-family:'Segoe UI',Consolas,monospace;font-variant-numeric:tabular-nums}
.dp.chico{flex:.6}
.dp.dneto span{color:#4cc38a}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numpad button{font-size:22px;font-weight:500;padding:13px 0;border-radius:8px;border:1px solid var(--borde);background:#f7f8fa;color:var(--tinta);cursor:pointer}
.numpad button:active{background:var(--borde);transform:scale(.97)}
.bloque label{font-size:10.5px;font-weight:600;color:var(--tinta2);text-transform:uppercase;letter-spacing:.07em}
.bloque .sub{display:block;margin-top:10px}
.botonera{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pz-btn{font-size:13.5px;font-weight:600;padding:11px 12px;border-radius:8px;border:1px solid var(--borde2);background:var(--superficie);color:var(--tinta);cursor:pointer;line-height:1.3;flex:1;min-width:80px;letter-spacing:.02em}
.pz-btn:active{transform:scale(.97)}
.pz-btn.on{background:var(--acento-suave);color:var(--acento);border-color:var(--acento)}
.pz-btn.nueva{flex:none;border-style:dashed;color:var(--tinta2)}
.pz-num{width:50px;height:50px;font-size:20px;font-weight:600;border-radius:8px;border:1px solid var(--borde2);background:var(--superficie);cursor:pointer;color:var(--tinta)}
.pz-num.on{background:var(--acento);border-color:var(--acento);color:#fff}
.cnt{display:flex;align-items:center;gap:6px}
.cnt label{font-size:12px;font-weight:600}
.cnt button{width:44px;height:44px;font-size:22px;font-weight:500;border-radius:8px;border:1px solid var(--borde2);background:#f7f8fa;cursor:pointer}
.cnt span{font-size:22px;font-weight:600;min-width:36px;text-align:center;font-variant-numeric:tabular-nums}
.capturar{font-size:16px;padding:14px;width:100%}

.panel-listas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.cuadro{background:var(--superficie);border:1px solid var(--borde);border-radius:10px;padding:12px;cursor:pointer}
.cuadro.activo{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.cuadro-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cuadro-lista{font-size:10px;font-weight:600;letter-spacing:.07em;background:#f0f1f4;border-radius:4px;padding:3px 8px;color:var(--tinta2)}
.cuadro-cli{font-size:15px;font-weight:600;color:var(--tinta)}
.cuadro-asignar{display:flex;gap:6px;margin:10px 0}
.cuadro-asignar input{flex:1;font-size:13px;min-width:0}
.cuadro-asignar button{font-size:11px;font-weight:600;letter-spacing:.04em;padding:8px 12px;border-radius:6px;border:1px solid var(--acento);background:var(--superficie);color:var(--acento);cursor:pointer}
.cuadro-asignar button:hover{background:var(--acento-suave)}
.cuadro-tabla{width:100%;font-size:12.5px;margin:4px 0}
.cuadro-tabla td{padding:5px 6px}
.cuadro-tabla tr.conf td{background:var(--ok-f)}
.cuadro-tabla tr.anulada td{text-decoration:line-through;color:var(--tinta3);font-size:11px}
.mini.mover{color:var(--acento);border-color:var(--acento)}
.mini.mover:hover{background:var(--acento-suave);color:var(--acento)}
.cuadro-tot{font-size:12px;background:#f7f8fa;border:1px solid var(--borde);border-radius:6px;padding:7px 10px;margin:8px 0;color:var(--tinta2);font-variant-numeric:tabular-nums}
.cuadro-tot b{color:var(--tinta)}
.btn.imprimir{width:100%;font-size:13px;padding:10px;background:var(--shell);letter-spacing:.05em}
.btn.imprimir:hover{background:#2a3645}
.btn.imprimir:disabled{background:#e3e5e9;color:var(--tinta3);cursor:not-allowed}
.pendientes-repesar{background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:12px;line-height:2}
.pendientes-repesar.hechos{opacity:.85}
.chip.falta{border-color:var(--mal);color:var(--mal);font-weight:700;background:var(--mal-f)}
.chip.falta:hover{background:var(--mal);color:#fff}
.chip.listo{border-color:var(--ok);color:var(--ok);background:var(--ok-f)}
.bloque-repeso{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--mal-f);border:2px solid var(--mal);border-radius:10px;padding:12px 16px;margin-bottom:14px;color:var(--mal)}
.bloque-repeso.activo{background:var(--aviso-f);border-color:var(--aviso);color:var(--aviso)}
.pedidos-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;background:var(--superficie);border:1px solid var(--borde);border-radius:8px;padding:9px 12px;margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--tinta2)}
.chip{font-size:12px;font-weight:500;padding:5px 11px;border-radius:5px;border:1px solid var(--borde2);background:var(--superficie);color:var(--tinta);cursor:pointer}
.chip:hover{border-color:var(--acento);color:var(--acento)}

/* ===== IMPRESIÓN / PDF: hoja A4 HORIZONTAL, tablas ajustadas al ancho, letra compacta ===== */
@media print{
  @page{size:A4 landscape;margin:8mm}
  nav,header .fechasel,#avisos,.form,button,.selector,.pedidos-chips,.pendientes-repesar,.mequeda,.numpad,.panel-pesa,.bloque-repeso,.nota{display:none!important}
  header{background:#fff!important;color:#231f1a!important;position:static;border-bottom:2px solid var(--acento);height:auto;padding:4px 0}
  .marca,.marca *{color:#231f1a!important}
  .marca span{color:var(--acento)!important}
  /* en papel BLANCO el texto vuelve a ser oscuro (el tema oscuro es solo de pantalla) */
  body{background:#fff!important;color:#231f1a!important;font-size:10px}
  main,.tabla-wrap,.card,.dash-card,table,td,th,h2,h3,p,span,div,b,small{color:#231f1a!important;background-color:transparent}
  .card,.dash-card,.tabla-wrap,.cu-hoja{background:#fff!important;border-color:#ccc!important;box-shadow:none!important}
  main{padding:4px 0;max-width:none}
  h2{font-size:14px;margin:2px 0 6px}
  h3{font-size:10px;margin:8px 0 4px;letter-spacing:.05em}
  .cards{gap:6px;margin-bottom:8px}
  .card{padding:5px 10px;min-width:auto;border-radius:4px;break-inside:avoid;border:1px solid #ccc}
  .card .lbl{font-size:7.5px} .card .val{font-size:13px;margin-top:1px}
  /* tablas: nunca se cortan — entran al ancho de la hoja con letra compacta y ajuste de texto */
  .tabla-wrap{overflow:visible!important;border:none;border-radius:0;margin-bottom:8px;width:100%!important}
  table{width:100%!important;font-size:8.5px;table-layout:auto}
  tr{page-break-inside:avoid}
  th{position:static!important;font-size:7.5px;padding:3px 3px;color:#000!important;background:#ececec!important;letter-spacing:0;white-space:normal;word-break:break-word;border:1px solid #888!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  td{padding:2.5px 3px;white-space:normal;word-break:break-word;border:1px solid #999!important}
  tr:hover td{background:transparent}
  /* mantener la colorimetría de los reportes y el resaltado del estado de cuenta en papel */
  tr.rep-verde td{background:#e8f5ec!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr.rep-rojo td{background:#fbe9eb!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr.rep-ambar td{background:#fdf3e0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dia-row td{background:#fdeede!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pago-row td{font-size:8px}
}

/* login sin distracciones: oculta la barra operativa de la cabecera */
body.pre-login header .fechasel,body.pre-login #btn-refrescar,body.pre-login #btn-hoy,body.pre-login .reloj{display:none}
/* ===== Login premium ===== */
.login-shell{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 150px);padding:48px 18px;
  background:radial-gradient(640px 380px at 50% -8%,var(--acento-suave),transparent 62%)}
.login-card{width:100%;max-width:392px;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--r3);box-shadow:var(--s3);padding:40px 36px;box-sizing:border-box}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}
.login-tile{width:128px;height:128px;border-radius:30px;box-shadow:var(--s2);display:block}
.login-word{font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--tinta);line-height:1}
.login-word span{color:var(--acento);font-weight:300;letter-spacing:.16em;margin-left:3px}
.login-kicker{text-align:center;margin:4px 0 28px;color:var(--tinta3);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.login-card .lg-label{margin-bottom:6px}
.login-card .lg-input{padding:12px 14px;border-radius:10px}
.login-user{font-size:18px}
.login-pin{font-size:24px;letter-spacing:8px;text-align:center}
.login-btn{display:block;width:100%;box-sizing:border-box;font-size:16px;padding:13px;margin-top:4px}
.login-msg{text-align:center;min-height:18px;margin:12px 0 0}
.login-foot{text-align:center;margin-top:22px;font-size:11px;color:var(--tinta3);letter-spacing:.04em}
/* ===== Login: campos de ancho exacto (no dependen del .form horizontal) ===== */
.lg-label{display:block;font-size:10.5px;font-weight:600;color:var(--tinta2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.lg-input{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--borde2);border-radius:8px;background:var(--superficie);color:var(--tinta);margin-bottom:14px}
.lg-input:focus{border-color:var(--acento);outline:2px solid var(--acento-suave)}
#lg-pin{margin-bottom:18px}

/* ===== Movimiento bancario (registro rápido) ===== */
.mb-fila{display:flex;gap:8px;flex-wrap:wrap}
.mb-btn{font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;border:1.5px solid var(--borde2);background:var(--superficie);color:var(--tinta);cursor:pointer}
.mb-btn:hover{border-color:var(--acento)}
.mb-btn.on{background:var(--acento);border-color:var(--acento);color:#fff}

/* ===== Asistencia semanal (cuadro tocable) ===== */
.asis-cel{text-align:center;font-weight:900;cursor:pointer;user-select:none;font-size:14px;line-height:1.2}
.asis-cel.asis-tot{cursor:default;font-weight:800;font-size:13px}
.asis-cel.asis-si{background:#d6f3df;color:var(--ok)}
.asis-cel.asis-no{background:#fbe0e3;color:var(--mal)}
.asis-cel.asis-na{color:var(--tinta3)}
.asis-cel:hover{outline:2px solid var(--acento);outline-offset:-2px}

/* ===== Libreta de FLETE (hoja premium, acento naranja corporativo) ===== */
.flete-tabla{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;background:var(--superficie);color:var(--tinta);font-variant-numeric:tabular-nums;border-radius:var(--r2);overflow:hidden;box-shadow:var(--s1)}
.flete-tabla th,.flete-tabla td{padding:9px 13px;border-bottom:1px solid var(--borde);white-space:nowrap;position:static}
.flete-tabla th.flete-tit{background:var(--acento);color:#fff;font-size:15px;font-weight:700;text-align:center;letter-spacing:.16em;padding:13px;text-transform:uppercase}
.flete-tabla tr.flete-head th{background:var(--superficie2);color:var(--tinta3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;text-align:center;border-bottom:2px solid var(--acento)}
.flete-tabla tr:hover td{background:var(--acento-suave)}
.flete-sol{display:flex;justify-content:space-between;gap:18px}
.flete-sol .p{color:var(--tinta3);font-weight:400}
.flete-cel{text-align:center;font-weight:900;cursor:pointer;user-select:none;font-size:14px;line-height:1.2}
td.flete-cel.s-si{background:var(--acento-suave);color:var(--acento-osc)}
td.flete-cel.s-no{background:var(--mal-f);color:var(--mal)}
td.flete-cel.s-na{color:var(--tinta3)}
.flete-cel:hover{outline:2px solid var(--acento);outline-offset:-2px}
.flete-edit{cursor:pointer}
.flete-edit:hover{box-shadow:inset 0 0 0 2px var(--acento-suave)}
.flete-tabla td.fl-saldo .flete-sol span:last-child{color:var(--acento-osc);font-weight:700}

/* ===== Multi-sucursal ===== */
.suc-tag{align-self:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--shell);border-radius:6px;padding:5px 10px;margin-right:6px}
nav .fila-grupos button.dg-btn{color:var(--acento);font-weight:700}

/* ===== Calendario visual de mes ===== */
.cal-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.cal-head b{font-size:16px;min-width:150px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:580px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--tinta2);text-transform:uppercase;letter-spacing:.05em;padding:4px 0}
.cal-celda{min-height:48px;border:1px solid var(--borde);border-radius:7px;padding:4px 6px;background:var(--superficie);display:flex;flex-direction:column}
.cal-celda.vacia{border:none;background:transparent}
.cal-celda.hoy{border-color:var(--acento);outline:2px solid var(--acento-suave)}
.cal-celda.con-marca{background:var(--acento-suave)}
.cal-num{font-size:13px;font-weight:600;color:var(--tinta)}
.cal-pts{display:flex;gap:3px;margin-top:auto}
.cal-pt{width:9px;height:9px;border-radius:50%;display:inline-block}
.cal-pt.cumple{background:var(--ok)}
.cal-pt.venc{background:var(--mal)}
.cal-pt.otro{background:var(--aviso)}
.cal-leyenda{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--tinta2);margin:10px 0}
.cal-lista{margin:8px 0;font-size:13px;line-height:1.7}
.ddmm{display:flex;gap:6px}
.ddmm select{flex:1;min-width:0}
.ddmm .cal-anio{flex:0 0 78px;width:78px}

/* ===== Ventanas propias del ERP (reemplazan alert/confirm/prompt del navegador) ===== */
.modal-ov{position:fixed;inset:0;background:rgba(35,31,26,.5);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px}
.modal-box{background:var(--superficie);border:1px solid var(--borde);border-radius:12px;box-shadow:0 18px 50px rgba(35,31,26,.28);max-width:430px;width:100%;padding:24px;animation:modalIn .14s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-titulo{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);margin-bottom:10px}
.modal-msg{font-size:15px;line-height:1.5;color:var(--tinta);white-space:pre-line;margin-bottom:18px}
.modal-input{width:100%;padding:11px 13px;font-size:16px;color:var(--tinta);background:var(--fondo);border:1.5px solid var(--borde2);border-radius:8px;margin-bottom:18px;outline:none}
.modal-input:focus{border-color:var(--acento);background:var(--superficie)}
.modal-btns{display:flex;gap:10px;justify-content:flex-end}
.modal-btns .btn{min-width:104px;padding:10px 18px}
.modal-btns .btn.sec{background:var(--fondo);color:var(--tinta2);border:1px solid var(--borde2)}
.modal-btns .btn.sec:hover{background:var(--borde)}

/* ============================================================
   REFINAMIENTOS PREMIUM — sistema de diseño elevado (Apple HIG + restraint Emil Kowalski)
   Capa que pule lo existente SIN cambiar estructura ni nombres de clase.
   ============================================================ */
body{line-height:1.55;letter-spacing:-.004em}

/* movimiento sutil y consistente en todo lo interactivo */
button,.chip,.pz-btn,.mb-btn,.dg-tab,nav .fila-items button,.mini,.card,.dash-card,.cuadro,.modal-input,.lg-input{transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t)}

/* foco visible y consistente para teclado (WCAG AA) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}

/* tipografía: jerarquía más afinada */
h2{letter-spacing:-.02em;font-weight:600;font-size:20px}
.card .val{letter-spacing:-.02em}

/* tablas: rejilla LIGERA pero VISIBLE (líneas finas horizontales y verticales), más aire */
th{background:#faf9f7;border-right:1px solid var(--borde2);border-bottom:1px solid var(--borde2);font-size:10px;color:var(--tinta3);padding:9px 12px}
td{border-right:1px solid var(--borde2);border-bottom:1px solid var(--borde2);padding:9px 12px}
th:last-child,td:last-child{border-right:none}
tr:hover td{background:#faf8f4}
.tabla-wrap{border:1px solid var(--borde);border-radius:var(--r2);box-shadow:var(--s1)}

/* tarjetas: borde nítido + sombra susurro = profundidad "cara" sin ruido */
.card,.dash-card{border-color:var(--borde);border-radius:var(--r2);box-shadow:var(--s1)}
.card{padding:16px 18px}
.card .lbl{font-size:10px;color:var(--tinta3)}
.dash-card{box-shadow:var(--s2)}

/* botones: estados consistentes y táctiles */
button.btn{border-radius:10px;box-shadow:var(--s1)}
button.btn:hover{box-shadow:var(--s2);transform:translateY(-1px);background:var(--acento-osc)}
button.btn:active{transform:translateY(0) scale(.99);box-shadow:none}
button.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
button.mini{border-radius:7px}

/* navegación: barra con leve profundidad y pills refinadas */
nav{box-shadow:var(--s1)}
nav .fila-items button{border-radius:8px;border-color:var(--hair)}
nav .fila-items button.on{box-shadow:var(--s1)}

/* pills/semáforo un punto más redondeados */
.pill{border-radius:6px;padding:3px 10px}

/* modales premium */
.modal-box{border-radius:var(--r3);box-shadow:var(--s3)}

/* Dirección General: pestañas tipo subrayado (más limpio y caro que cajas) */
.dg-tabs{gap:2px;border-bottom:1px solid var(--borde)}
.dg-tab{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;font-size:13px;font-weight:500;color:var(--tinta2);padding:10px 16px}
.dg-tab:hover{background:var(--fondo);color:var(--tinta)}
.dg-tab.on{background:transparent;border-bottom-color:var(--acento);color:var(--acento);font-weight:600;margin-bottom:-1px}
.dg-head h2{font-size:22px;letter-spacing:-.025em;font-weight:600}
.dg-body h3{font-size:11px;color:var(--tinta3)}
.dg-cel{border-radius:6px;font-weight:600}
.dg-live{border-radius:999px;font-weight:600}

/* ============================================================
   TEMA OSCURO — corrige los colores que estaban fijos en claro.
   (solo pantalla; la impresión sigue en papel blanco, ver @media print)
   ============================================================ */
/* tablas */
th{background:#1b1e26;color:var(--tinta3)}
td{border-color:var(--borde2)} /* líneas divisorias visibles en oscuro (antes var(--hair) casi invisible) */
tr:hover td{background:rgba(255,255,255,.035)}
/* filas de color de reportes y estado de cuenta */
tr.rep-verde td{background:rgba(61,212,131,.12)}
tr.rep-rojo td{background:rgba(255,93,93,.12)}
tr.rep-ambar td{background:rgba(242,179,44,.12)}
.dia-row td{background:var(--acento-suave)!important}
.cuadro-tabla tr.conf td{background:var(--ok-f)}
/* celdas de semáforo: texto oscuro sobre relleno brillante = alto contraste SaaS */
.dg-cel{color:#0d0e11}
.dg-cel.x{background:#15171c;color:var(--mal);border:1px solid var(--mal)}
.asis-cel.asis-si{background:var(--ok-f);color:var(--ok)}
.asis-cel.asis-no{background:var(--mal-f);color:var(--mal)}
/* superficies que estaban en gris claro */
.numpad button,.cnt button{background:rgba(255,255,255,.05);border-color:var(--borde);color:var(--tinta)}
.numpad button:active{background:rgba(255,255,255,.12)}
.cuadro-lista{background:rgba(255,255,255,.07);color:var(--tinta2)}
.cuadro-tot{background:rgba(255,255,255,.04);border-color:var(--borde)}
.mequeda .q{background:var(--superficie);border:1px solid var(--borde)}
.mequeda .q small{color:var(--tinta2)}
/* hoja de cuadro del cobrador (en pantalla oscura; al imprimir vuelve a blanco) */
.cu-hoja{background:var(--superficie);border-color:var(--borde)}
.cu-tabla td{border-bottom-color:var(--hair)}
.cu-chico{color:var(--tinta3)}
.cu-rojo{color:var(--mal)}.cu-verde{color:var(--ok)}
/* superficies fijas varias */
.cuadro-tot b{color:var(--tinta)}
.numpad button,.pz-num,.pz-btn,.mb-btn{color:var(--tinta)}
.modal-ov{background:rgba(0,0,0,.62)}
.modal-input{background:var(--fondo)}
/* tarjetas KPI de color: relleno translúcido oscuro + valor brillante */
.card.verde .val{color:var(--ok)} .card.rojo .val{color:var(--mal)} .card.ambar .val{color:var(--aviso)}
/* inputs: más oscuros que su tarjeta (efecto "inset" SaaS) */
.form input,.form select,.selector input,.cuadro-asignar input,.pz input,.lg-input,.ddmm select,.mb-fila input{background:var(--fondo);color:var(--tinta);border-color:var(--borde2)}
.form input:focus,.form select:focus,.selector input:focus,.lg-input:focus,.modal-input:focus{background:var(--superficie2);border-color:var(--acento)}
::placeholder{color:var(--tinta3)}
/* date input: que el ícono del calendario se vea en oscuro */
input[type=date]{color-scheme:dark}

/* ============================================================
   FOTO CLARA — el comprobante que se copia/comparte va en CLARO tipo documento
   (se aplica temporalmente al nodo solo durante la captura con html2canvas)
   ============================================================ */
.foto-clara{--fondo:#fff;--superficie:#fff;--superficie2:#f5f4f2;--borde:#e7e4e0;--borde2:#d6d2cc;--tinta:#231f1a;--tinta2:#6b6258;--tinta3:#9a918a;--hair:#edebe5;--acento-suave:#fdeede;--ok:#107e3e;--ok-f:#f0f7f2;--mal:#b00020;--mal-f:#fdf2f3;--aviso:#8a5a00;--aviso-f:#fdf6ec;background:#fff;color:#231f1a}
.foto-clara th{background:#f7f8fa;color:#6b6258}
.foto-clara td{border-bottom-color:#edebe5}
.foto-clara tr:hover td{background:transparent}
.foto-clara tr.rep-verde td{background:#e8f5ec}
.foto-clara tr.rep-rojo td{background:#fbe9eb}
.foto-clara tr.rep-ambar td{background:#fdf3e0}
.foto-clara .dia-row td{background:#fdeede!important}
.foto-clara .dg-cel{color:#fff}
.foto-clara .pago-row td{color:#6b6258}
.foto-clara .card.verde .val{color:#107e3e}.foto-clara .card.rojo .val{color:#b00020}.foto-clara .card.ambar .val{color:#8a5a00}

/* LOS NOMBRES, SIEMPRE EN MAYÚSCULA (24/08/2026, pedido del dueño).
   Se hace en la vista y no convirtiendo la data: la asistencia se cruza con el personal POR
   NOMBRE, y renombrar una ficha vieja le desengancharía sus días trabajados si alguno cayó en
   un día ya cerrado. Al GUARDAR el servidor ya normaliza a mayúscula; esto cubre lo que quedó
   cargado de antes. */
.nombre-persona{ text-transform:uppercase; }

/* ===== BLOQUE 13 (09/10/2026): la impresión GANA a las reglas de pantalla de arriba =====
   Las reglas de "tablas: rejilla ligera" (th/td con 9px 12px de relleno y h2 de 20px) estaban DESPUÉS del bloque de impresión y lo
   pisaban: al imprimir cada celda llevaba 24 px de relleno y el PDF de VENTA DEL DÍA salió cortado en 3 hojas, con los números
   partidos en dos renglones. Aquí, al final y con !important, la hoja vuelve a ser compacta y los números no se parten. */
tr.rep-gris td{background:rgba(160,170,185,.16)}   /* gris = NO REPESÓ (la web va en tema oscuro) */
@media print{
  th{font-size:7.5px!important;padding:3px 3px!important;word-break:normal!important;white-space:normal!important}
  td{padding:2.5px 3px!important}
  td.num{white-space:nowrap!important;word-break:normal!important}
  h2{font-size:14px!important}
  tr.rep-gris td{background:#eef0f2!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details{display:block}
}

/* ============================================================
   ÓRBITA (10/10/2026, pedido del dueño) — SOLO LO VISUAL. Negro profundo, letras BLANCAS con el máximo brillo (se leen bajo el
   sol), el naranja de PANEDIA con HALO (una nube de luz suave) en lo elegido, el botón principal y la cifra clave; las alertas
   brillan en SU color (rojo, amarillo, verde). No cambia ninguna estructura, pestaña, botón ni función: solo colores, letras,
   bordes y brillos, y solo en PANTALLA (la impresión sigue en papel blanco; la foto clara .foto-clara no lleva halos).
   Para volver al diseño anterior basta con borrar este bloque (o subir el styles.css de antes).
   ============================================================ */
@media screen{
:root{
  --fondo:#000; --superficie:#07090c; --superficie2:#0f1216; --shell:#151a21;
  --borde:rgba(255,255,255,.14); --borde2:rgba(255,255,255,.26); --hair:rgba(255,255,255,.1);
  --tinta:#fff; --tinta2:#dde2e8; --tinta3:#b3bcc7;
  --acento:#ff6a13; --acento-osc:#ff8a3d; --acento-suave:rgba(255,106,19,.15);
  --ok:#3ee29b; --ok-f:rgba(62,226,155,.13); --mal:#ff3b5c; --mal-f:rgba(255,59,92,.14); --aviso:#ffd84d; --aviso-f:rgba(255,216,77,.13);
  --halo:0 0 24px rgba(255,106,19,.34); --halo-fuerte:0 0 44px rgba(255,106,19,.42);
  --halo-rojo:0 0 22px rgba(255,59,92,.42); --halo-amarillo:0 0 18px rgba(255,216,77,.26); --halo-verde:0 0 18px rgba(62,226,155,.26);
  --letra-tit:'Bahnschrift SemiCondensed','Bahnschrift','Barlow Semi Condensed','Barlow Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --s1:none; --s2:none;
  --foco:0 0 0 3px var(--acento-suave);
}
.foto-clara{--halo:none;--halo-fuerte:none;--halo-rojo:none;--halo-amarillo:none;--halo-verde:none}
.foto-clara,.foto-clara *{text-shadow:none!important;box-shadow:none!important}
.foto-clara{color-scheme:light}
:root{color-scheme:dark}
::placeholder{color:#7f8894}
.cuadro-tabla tr.anulada td{color:#6f7884}
body{background:#000;color:var(--tinta);text-rendering:optimizeLegibility}

/* barra superior: negra con la línea naranja arriba */
header{background:#000;border-bottom:1px solid var(--borde);box-shadow:inset 0 2px 0 var(--acento)}
.fechasel label{color:var(--tinta2);font-family:var(--letra-tit);letter-spacing:.16em}
.fechasel input{background:var(--superficie2);border-color:var(--borde2);color:#fff}
#btn-hoy{font-family:var(--letra-tit);letter-spacing:.14em}
#btn-hoy:hover{color:#000;box-shadow:var(--halo)}
#btn-refrescar{border-color:var(--borde2);color:var(--tinta);font-family:var(--letra-tit);letter-spacing:.14em}
#btn-refrescar.pendiente{color:#000;box-shadow:var(--halo)}
.reloj{border-left-color:var(--borde)}
.reloj .hora{color:#fff}
.reloj .hora small,.reloj .dia-txt{color:var(--tinta2)}

/* menú: grupos con subrayado naranja que brilla; submenú con pastilla naranja */
nav{background:#000;box-shadow:none;border-bottom-color:var(--borde)}
nav .fila-grupos{border-bottom-color:var(--borde)}
nav .fila-grupos button{font-family:var(--letra-tit);font-size:13px;letter-spacing:.12em;color:var(--tinta2)}
nav .fila-grupos button:hover{color:#fff}
nav .fila-grupos button.on{color:#fff;border-bottom-color:var(--acento);text-shadow:0 0 16px rgba(255,106,19,.75)}
nav .fila-grupos button.dg-btn{color:var(--acento)}
nav .fila-grupos button.salir{color:var(--tinta3)}
nav .fila-items button{background:transparent;border-color:var(--borde);color:var(--tinta);font-family:var(--letra-tit);letter-spacing:.07em}
nav .fila-items button:hover{border-color:var(--acento);color:#fff}
nav .fila-items button.on{background:var(--acento);border-color:var(--acento);color:#000;box-shadow:var(--halo)}
.suc-tag{background:transparent;box-shadow:inset 0 0 0 1px var(--borde2);color:#fff;font-family:var(--letra-tit);letter-spacing:.16em}

/* títulos y etiquetas: letra técnica, más clara y un poco más grande (bajo el sol) */
h2{color:var(--tinta);font-family:var(--letra-tit);letter-spacing:.04em}
h3{color:var(--tinta2);font-family:var(--letra-tit);letter-spacing:.14em;font-size:13px}
.nota{color:var(--tinta3)}
.form label,.campo label,.lg-label,.bloque label,.cnt label{font-family:var(--letra-tit);font-size:11.5px;letter-spacing:.1em;color:var(--tinta2)}

/* tarjetas: línea fina; las de color brillan en su color */
.card,.dash-card{background:var(--superficie);border-color:var(--borde);box-shadow:none}
.card .lbl{font-family:var(--letra-tit);font-size:11.5px;letter-spacing:.13em;color:var(--tinta2)}
.card .val{color:var(--tinta);font-family:var(--letra-tit);font-weight:600}
.card .sub{color:var(--tinta2);font-size:11.5px}
.card.verde{border-left-width:1px;border-color:rgba(62,226,155,.6)}
.card.rojo{border-left-width:1px;border-color:rgba(255,59,92,.65);box-shadow:var(--halo-rojo)}
.card.ambar{border-left-width:1px;border-color:rgba(255,216,77,.6)}
.card.rojo .val{text-shadow:0 0 18px rgba(255,59,92,.5)}
.dash-t{font-family:var(--letra-tit);letter-spacing:.14em;color:var(--tinta2)}
.dash-insights{border-left-width:1px;border-color:var(--acento);box-shadow:var(--halo)}
.dg-tab{font-family:var(--letra-tit);letter-spacing:.08em}
.dg-tab.on{color:#fff;border-bottom-color:var(--acento);text-shadow:0 0 16px rgba(255,106,19,.7)}

/* tablas: cabecera técnica, cifras blancas */
th{background:var(--superficie2);color:var(--tinta2);font-family:var(--letra-tit);letter-spacing:.09em;font-weight:600}
td{color:var(--tinta)}
tr:hover td{background:rgba(255,106,19,.07)}
tr.rep-verde td{background:rgba(62,226,155,.12)}
tr.rep-rojo td{background:rgba(255,59,92,.13)}
tr.rep-ambar td{background:rgba(255,216,77,.11)}
.tabla-wrap{box-shadow:none;border-color:var(--borde)}
select{color-scheme:dark;background:var(--fondo);color:var(--tinta);border:1px solid var(--borde2);border-radius:6px}

/* botones: el principal en naranja con letra NEGRA (se lee al sol) y halo; los de fondo propio, con su letra legible */
button.btn{color:#000;box-shadow:var(--halo)}
button.btn:hover{background:var(--acento-osc);box-shadow:var(--halo-fuerte)}
button.btn[style*="var(--shell)"]{color:#fff;box-shadow:inset 0 0 0 1px var(--borde2)}
button.btn[style*="var(--mal)"]{box-shadow:var(--halo-rojo)}
button.btn[style*="var(--ok)"]{box-shadow:var(--halo-verde)}
button.btn[style*="var(--tinta2)"],button.btn[style*="var(--tinta3)"]{box-shadow:none}
button.btn.cancelar{box-shadow:none}
.modal-btns .btn.sec{box-shadow:none}
.btn.imprimir{background:var(--shell);color:#fff;box-shadow:inset 0 0 0 1px var(--borde2)}
.btn.imprimir:hover{background:#1c222b;box-shadow:inset 0 0 0 1px var(--acento)}
.btn.imprimir:disabled{background:var(--superficie2);color:var(--tinta3);box-shadow:inset 0 0 0 1px var(--borde)}
button.mini{background:transparent;border-color:var(--borde2);color:var(--tinta2)}
.chip{background:transparent;border-color:var(--borde2);color:var(--tinta)}
.chip.falta{box-shadow:0 0 14px rgba(255,59,92,.35)}

/* lo elegido brilla */
.pz-btn,.pz-num,.mb-btn,.numpad button,.cnt button{background:transparent;border-color:var(--borde2);color:#fff}
.pz-btn.on{box-shadow:var(--halo)}
.pz-num.on,.mb-btn.on{color:#000;box-shadow:var(--halo)}
.cuadro{background:var(--superficie)}
.cuadro.activo{box-shadow:0 0 0 1px var(--acento),var(--halo-fuerte)}
.cuadro-asignar button{background:transparent}
.cal-celda.hoy{box-shadow:var(--halo)}
.form input:focus,.form select:focus,.selector input:focus,.lg-input:focus,.modal-input:focus{box-shadow:var(--halo)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{box-shadow:var(--halo)}

/* pesaje: la pantalla de peso en negro, el NETO en naranja que brilla */
.dp{background:#000;box-shadow:inset 0 0 0 1px var(--borde2)}
.dp label{color:var(--tinta2);font-family:var(--letra-tit)}
.dp input{color:#fff}
.dp.chico span{color:var(--tinta2)}
.dp.dneto span{color:var(--acento);text-shadow:0 0 28px rgba(255,106,19,.55)}
.mequeda .q{background:var(--superficie);border-color:var(--borde);color:#fff}
.mequeda .q small{color:var(--tinta2);font-family:var(--letra-tit);letter-spacing:.1em}
.pedidos-chips{background:var(--superficie)}

/* alertas con halo en su color */
.aviso.rojo,.bloque-repeso{box-shadow:var(--halo-rojo)}
.aviso.ambar,.bloque-repeso.activo{box-shadow:var(--halo-amarillo)}

/* ventanas */
.modal-ov{background:rgba(0,0,0,.74)}
.modal-box{background:#07090c;border-color:var(--borde2);box-shadow:0 30px 120px rgba(0,0,0,.85),0 0 0 1px rgba(255,106,19,.08)}
.modal-titulo{font-family:var(--letra-tit);letter-spacing:.16em}

/* hoja del cuadre y flete: letra negra sobre el naranja */
.cu-titulo,.cu-cab,.cu-tabla .cu-num,.cu-tot,.flete-tabla th.flete-tit{color:#000}

/* la campana y la franja de alertas (centro.js trae su tema claro): en negro, con letras blancas, sin tocar centro.js */
body header .cn-bt{background:#14171c;border:1px solid var(--borde2);color:#fff}
body .cn-globo{background:#ff3b5c;color:#000;box-shadow:0 0 12px rgba(255,59,92,.85)}
body .cn-franja{background:#07090c;border-bottom:1px solid var(--borde)}
body .cn-franja.cn-fr-calma{background:#07090c;border-bottom:1px solid var(--borde)}
body .cn-fr-tt{color:#fff}
body .cn-fr-dt{color:#dde2e8}
body .cn-fr-mas,body .cn-fr-hist,body .cn-fr-x{color:#b3bcc7}
body .cn-fr-calma .cn-fr-tt{color:#dde2e8}
body .cn-fr-calma .cn-fr-pt{background:#5a626d}
body .cn-fr-ver:active,body .cn-fr-x:active{background:rgba(255,255,255,.06)}
body .cn-n-info{color:#ff6a13;border-color:#ff6a13}
body .cn-n-ambar{color:#ffd84d;border-color:#ffd84d}
body .cn-n-rojo{color:#ff3b5c;border-color:#ff3b5c}
body .cn-n-fiesta{color:#3ee29b;border-color:#3ee29b}
body .cn-fondo{background:rgba(0,0,0,.72)}
body .cn-hoja,body .cn-asa,body .cn-barra{background:#07090c}
body .cn-hoja{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 -20px 60px rgba(0,0,0,.7)}
body .cn-asa span{background:#3a4048}
body .cn-barra{border-bottom:1px solid var(--borde)}
body .cn-barra h2{color:#fff}
body .cn-acc{color:#ff6a13}
body .cn-x,body .cn-reset{background:#14171c;color:#dde2e8}
body .cn-x:active{background:#1d2128}
body .cn-vacio svg{stroke:#3a4048}
body .cn-vacio b{color:#dde2e8}
body .cn-vacio p,body .cn-dia,body .cn-qn,body .cn-pie,body .cn-otros,body .cn-volver,body .cn-rot,body .cn-num,body .cn-desp,body .cn-res i,body .cn-emerg span{color:#b3bcc7}
body .cn-banda,body .cn-pill{background:#14171c;color:#dde2e8}
body .cn-tarj,body .cn-emerg a,body .cn-emerg-min,body .cn-lista,body .cn-paso,body .cn-tel{background:#0b0d10;border-color:rgba(255,255,255,.14)}
body .cn-tarj:active,body .cn-res:active{background:#14171c}
body .cn-tarj.cn-viva{background:rgba(255,106,19,.07);border-color:rgba(255,106,19,.4)}
body .cn-punto{border-color:#5a626d}
body .cn-tt,body .cn-res b,body .cn-fh h3,body .cn-paso span,body .cn-tel,body .cn-ahora p{color:#fff}
body .cn-dt{color:#dde2e8}
body .cn-emerg b,body .cn-emerg-min,body .cn-tel a{color:#ff3b5c}
body .cn-busca{background:#000;color:#fff;border-color:rgba(255,255,255,.26)}
body .cn-busca:focus{border-color:#ff6a13;box-shadow:0 0 24px rgba(255,106,19,.34)}
body .cn-res{border-top-color:rgba(255,255,255,.1)}
body .cn-pill.cn-u-alta{background:rgba(255,59,92,.15);color:#ff7a93}
body .cn-pill.cn-u-media{background:rgba(255,216,77,.13);color:#ffe27a}
body .cn-ahora{background:rgba(255,106,19,.08);border-left-color:#ff6a13}
body .cn-ahora i{color:#ff6a13}
body .cn-caja{border-color:#5a626d}
body .cn-paso.cn-hecho .cn-caja{background:#3ee29b;border-color:#3ee29b;color:#000}
body .cn-paso.cn-hecho span{color:#b3bcc7}
body .cn-ojo{background:rgba(255,216,77,.08);border-left-color:#ffd84d;color:#dde2e8}

/* colores fijos escritos en las pantallas (style="..."): se adaptan al negro sin tocar app.js; la foto clara queda como estaba */
[style*="background:#fff7ed"]:not(.foto-clara *),[style*="background:#fff4e6"]:not(.foto-clara *),[style*="background:#fff6e3"]:not(.foto-clara *),[style*="background:#fdf3e0"]:not(.foto-clara *),[style*="background:#fdf6ec"]:not(.foto-clara *),[style*="background:#fdecd9"]:not(.foto-clara *){background:rgba(255,216,77,.08)!important;color:var(--tinta)}
[style*="background:#fde7e7"]:not(.foto-clara *),[style*="background:#fde3e3"]:not(.foto-clara *),[style*="background:#fdf2f3"]:not(.foto-clara *),[style*="background:#fbe9eb"]:not(.foto-clara *){background:rgba(255,59,92,.1)!important;color:var(--tinta)}
[style*="background:#fbfaf8"]:not(.foto-clara *),[style*="background:#faf6f0"]:not(.foto-clara *),[style*="background:#f7f8fa"]:not(.foto-clara *){background:var(--superficie2)!important;color:var(--tinta)}
[style*="color:#5d564d"]:not(.foto-clara *),[style*="color:#5f6b60"]:not(.foto-clara *){color:var(--tinta2)!important}
[style*="color:#231f1a"]:not(.foto-clara *){color:var(--tinta)!important}
[style*="color:#b3261e"]:not(.foto-clara *){color:#ff5c77!important}
[style*="color:#1b7f4d"]:not(.foto-clara *),[style*="color:#1a7f37"]:not(.foto-clara *){color:var(--ok)!important}

/* más colores fijos del inventario (app.js), y botones con fondo claro: letra negra */
[style*="color:#b45309"]:not(.foto-clara *){color:var(--aviso)!important}
[style*="color:#8a837c"]:not(.foto-clara *){color:var(--tinta3)!important}
[style*="background:#eaf6ec"]:not(.foto-clara *){background:var(--ok-f)!important;border-left-color:var(--ok)!important}
tr[style*="232, 247, 238"]:not(.foto-clara *){background:var(--ok-f)!important}
button.mini[style*="background:var(--ok)"]{color:#000!important}
[style*="background:var(--tinta3);color:#fff"]:not(.foto-clara *){color:#000!important}
[style*="background:#1a1a1a"]:not(.foto-clara *){box-shadow:inset 0 0 0 2px var(--mal)}
.ch-svg [stroke="#b5520a"]{stroke:#ff9a4d}
.ch-leg i[style*="#b5520a"]{background:#ff9a4d!important}
.chip.falta:hover{color:#000}
th{z-index:1}

/* la cabecera y la franja de alertas, como en la propuesta (pedido del dueño 09/10: "la tipografía no estaba correcta ahí ni la intensidad del color") */
:root{--letra-num:'Cascadia Mono','Consolas','JetBrains Mono',ui-monospace,monospace}
.marca{font-family:var(--letra-tit);text-transform:uppercase;letter-spacing:.36em;font-weight:600}
.marca span{color:var(--tinta3);font-weight:400;letter-spacing:.3em;font-size:12px;margin-left:6px}
.fechasel label{font-size:11px;letter-spacing:.2em;color:var(--tinta3)}
.fechasel input{font-family:var(--letra-num);letter-spacing:.04em}
#btn-hoy,#btn-refrescar{letter-spacing:.18em}
.reloj .hora{font-family:var(--letra-num);font-weight:600;letter-spacing:.02em}
.reloj .hora small{font-family:var(--letra-num);color:var(--tinta3)}
.reloj .dia-txt{font-family:var(--letra-tit);text-transform:uppercase;letter-spacing:.16em;color:var(--tinta3)}
/* franja: el fondo y la línea toman el color del nivel; la ROJA lleva la etiqueta ALERTA con brillo */
body .cn-franja:has(.cn-n-rojo){background:#0d0407;border-bottom-color:rgba(255,59,92,.5);box-shadow:0 14px 40px -22px rgba(255,59,92,.75)}
body .cn-franja:has(.cn-n-ambar){background:#0c0a03;border-bottom-color:rgba(255,216,77,.4)}
body .cn-franja:has(.cn-n-info){background:#0c0603;border-bottom-color:rgba(255,106,19,.4)}
body .cn-fr-ver.cn-n-rojo{box-shadow:-10px 0 24px -12px rgba(255,59,92,.95)}
body .cn-fr-tt{font-weight:600;letter-spacing:.005em;color:#fff}
body .cn-fr-ver.cn-n-rojo .cn-fr-tt::before{content:"● ALERTA";margin-right:12px;color:#ff3b5c;font-family:var(--letra-tit);font-size:12px;font-weight:600;letter-spacing:.24em;text-shadow:0 0 12px rgba(255,59,92,.85)}
body .cn-fr-ver.cn-n-ambar .cn-fr-tt::before{content:"● AVISO";margin-right:12px;color:#ffd84d;font-family:var(--letra-tit);font-size:12px;font-weight:600;letter-spacing:.24em}
body .cn-fr-mas{font-family:var(--letra-tit);text-transform:uppercase;letter-spacing:.14em;color:#c3cad3}
body .cn-fr-x{color:#dde2e8}
}

/* ══ GRÁFICOS DE GERENCIA (09/10/2026, pedido del dueño: "tráelos de vuelta con el estilo futurista y bien ordenado") ══════════
   Seis tarjetas parejas: 3 por fila en la PC, 2 en una pantalla mediana y 1 en el celular (nunca una sola suelta en su fila). */
.ger-graf{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.ger-graf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ger-graf{grid-template-columns:minmax(0,1fr)}}
.gg-barras{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.gg-barra-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--tinta2)}
.gg-barra-l b{color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.gg-barra-t{height:10px;margin-top:6px;border-radius:5px;background:var(--fondo);overflow:hidden}
.gg-barra-t i{display:block;height:100%;border-radius:5px;background:var(--acento)}
@media screen{
/* ÓRBITA en los gráficos (los de GERENCIA y los de DIRECCIÓN): la línea principal y sus puntos con halo naranja, el punto de HOY más
   brillante, las cifras en letra de telemetría con un borde negro para que no se pierdan sobre las líneas, la alerta en el rojo de
   Órbita, las líneas de referencia más tenues y las bandas verde/roja apenas insinuadas. Solo pantalla: el PDF sale como siempre. */
.dash-card:has(.ch-svg),.ger-graf .dash-card{background:radial-gradient(130% 90% at 0% 0%,rgba(255,106,19,.075),transparent 55%),var(--superficie);box-shadow:inset 0 1px 0 rgba(255,106,19,.32)}
.ch-svg{overflow:visible}   /* la cifra del último día ya no se corta en el borde derecho */
.ch-svg path[stroke="var(--acento)"]{filter:drop-shadow(0 0 2px rgba(255,106,19,.9)) drop-shadow(0 0 7px rgba(255,106,19,.45))}
.ch-svg path[stroke="currentColor"]{stroke-opacity:.55}
.ch-svg circle[fill="var(--acento)"]{filter:drop-shadow(0 0 3px rgba(255,106,19,.95))}
.ch-svg circle[fill="var(--acento)"]:last-of-type{filter:drop-shadow(0 0 4px #ff6a13) drop-shadow(0 0 12px rgba(255,106,19,.8))}
.ch-svg text{font-family:var(--letra-num)}
.ch-svg text[font-weight="700"]{paint-order:stroke;stroke:#000;stroke-width:2.5px;stroke-linejoin:round}
.ch-svg [stroke="#e24b4a"]{stroke:#ff3b5c}
.ch-leg i[style*="#e24b4a"]{background:#ff3b5c!important}
.ch-svg rect[fill="rgba(61,212,131,.13)"]{fill:rgba(62,226,155,.07)}
.ch-svg rect[fill="rgba(255,93,93,.13)"]{fill:rgba(255,59,92,.08)}
.ch-escala{font-family:var(--letra-num)}
.gg-barra-l span{font-family:var(--letra-tit);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.gg-barra-l b{font-family:var(--letra-num);color:#fff}
.gg-barra-t{overflow:visible;background:#151a21;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.gg-barra-t i{background:linear-gradient(90deg,#b5520a,#ff6a13);box-shadow:0 0 10px rgba(255,106,19,.5)}
.gg-barra:first-child .gg-barra-t i{background:linear-gradient(90deg,#ff6a13,#ff9a4d);box-shadow:0 0 14px rgba(255,106,19,.85)}
}
/* ══ ENTRADA EN ÓRBITA (09/10/2026 noche, pedido del dueño: "pasa el diseño de entrada a Órbita") ════════════════════════════════
   El ingreso de la web (/erp): los mismos campos, en el mismo orden y del mismo tamaño. Cambia solo la presentación: la luz de fondo
   ya no corta en un recuadro, el logo lleva sus anillos de órbita con halo, la marca va con la letra técnica de la cabecera, los
   campos encienden su borde naranja al escribir y el pie muestra el punto verde de "acceso seguro". Solo pantalla. */
@media screen{
.login-shell{background:radial-gradient(closest-side at 50% 38%,rgba(255,106,19,.17),rgba(255,106,19,.05) 58%,transparent 100%)}
.login-card{background:linear-gradient(180deg,#0b0d11 0%,#07090c 100%);border-color:rgba(255,106,19,.26);
  box-shadow:0 0 0 1px rgba(255,106,19,.06),0 34px 90px -34px rgba(255,106,19,.5),inset 0 1px 0 rgba(255,255,255,.05)}
/* el logo: su anillo de órbita (fino, separado del logo) y la nube de luz, que respira despacio — igual que en la puerta de las apps */
.login-tile{outline:1px solid rgba(255,106,19,.6);outline-offset:10px;box-shadow:0 0 64px 14px rgba(255,106,19,.34);animation:orbitaRespira 4.5s ease-in-out infinite}
@keyframes orbitaRespira{50%{outline-color:rgba(255,106,19,.95);box-shadow:0 0 84px 20px rgba(255,106,19,.46)}}
@media (prefers-reduced-motion:reduce){.login-tile{animation:none}}
.login-word{font-family:var(--letra-tit);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.18)}
.login-word span{color:var(--acento);letter-spacing:.22em;text-shadow:0 0 16px rgba(255,106,19,.6)}
.login-kicker{font-family:var(--letra-tit);color:var(--tinta3);letter-spacing:.26em}
.login-card .lg-label{font-family:var(--letra-tit);letter-spacing:.18em;color:var(--tinta2)}
.login-card .lg-input{background:#030405;border-color:rgba(255,255,255,.38);color:#fff;transition:border-color .2s,box-shadow .2s}
.login-card .lg-input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #030405 inset;-webkit-text-fill-color:#fff;caret-color:#fff}
.login-card .lg-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px #030405 inset,0 0 0 3px rgba(255,106,19,.18)}   /* el autocompletar del navegador no la vuelve blanca */
.login-card .lg-input:focus{border-color:var(--acento);outline:none;box-shadow:0 0 0 3px rgba(255,106,19,.18),0 0 22px rgba(255,106,19,.28)}
.login-btn{font-family:var(--letra-tit);letter-spacing:.06em;font-weight:700;color:#000;box-shadow:0 0 0 1px var(--acento),0 0 26px rgba(255,106,19,.5)}
.login-msg{color:#ff6b84;font-weight:600;text-shadow:0 0 4px #000}
.login-foot{font-family:var(--letra-tit);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}
.login-foot::before{content:"●";color:#3ee29b;margin-right:8px;text-shadow:0 0 10px rgba(62,226,155,.8)}
/* celular angosto (360 px, el Android más común): la marca y el pie se quedan en UN renglón, como antes */
@media (max-width:420px){.login-word,.login-word span{letter-spacing:.1em}.login-word{white-space:nowrap}.login-foot{letter-spacing:.03em;white-space:nowrap}}
}

/* LETRA TÉCNICA EN EL CELULAR (10/10/2026): Barlow Semi Condensed (libre, OFL) guardada en el servidor; va DETRÁS de Bahnschrift en cada lista */
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/letra-barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/letra-barlow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/letra-barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/letra-barlow-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ══ ESTELAS EN SU COLOR (10/10/2026, pedido del dueño: "el aviso del portero de las notificaciones no tiene esa estela o esa sombra
   de color, hay varios así") ══════════════════════════════════════════════════════════════════════════════════════════════════
   Toda pieza con color de ESTADO lleva su nube de luz del MISMO color, con UNA escala para la web y las 5 apps: ROJO (alerta) la más
   fuerte · NARANJA (info/acento) media · AMARILLO (aviso) y VERDE (bien) suaves. Solo box-shadow y text-shadow: ningún tamaño,
   relleno, margen ni posición cambia. Solo PANTALLA. La foto clara (.foto-clara) ya apaga todo brillo con !important y la hoja del
   cuadre en pantalla (.cu-hoja, réplica de la foto) queda fuera. Sin estela a propósito: filas y celdas de tablas, botones grises,
   texto común y botones que se repiten en cada fila. Para volver atrás basta con borrar este bloque. */
@media screen{
/* 1. FRANJA DE NOVEDADES (centro.js): las 4 con su estela. En la web la estela de afuera (hacia abajo) la TAPA el menú (sticky,
      z-index 9), así que además va una estela POR DENTRO, al pie de la franja; también en la roja, para que las 4 se vean iguales */
body .cn-franja:has(.cn-n-rojo){box-shadow:0 14px 40px -22px rgba(255,59,92,.75),inset 0 -14px 20px -12px rgba(255,59,92,.5)}
body .cn-franja:has(.cn-n-info){box-shadow:0 14px 40px -22px rgba(255,106,19,.62),inset 0 -14px 20px -12px rgba(255,106,19,.42)}
body .cn-franja:has(.cn-n-ambar){box-shadow:0 14px 40px -22px rgba(255,216,77,.5),inset 0 -14px 20px -12px rgba(255,216,77,.34)}
body .cn-franja:has(.cn-n-fiesta){background:#030c07;border-bottom-color:rgba(62,226,155,.4);box-shadow:0 14px 40px -22px rgba(62,226,155,.5),inset 0 -14px 20px -12px rgba(62,226,155,.34)}
body .cn-fr-ver.cn-n-info{box-shadow:-10px 0 24px -12px rgba(255,106,19,.8)}
body .cn-fr-ver.cn-n-ambar{box-shadow:-10px 0 24px -12px rgba(255,216,77,.7)}
body .cn-fr-ver.cn-n-fiesta{box-shadow:-10px 0 24px -12px rgba(62,226,155,.7)}
body .cn-fr-ver.cn-n-ambar .cn-fr-tt::before{text-shadow:0 0 12px rgba(255,216,77,.6)}
/* 2. CAMPANA y LUPA: el aviso SIN LEER con el borde y la estela de SU nivel; el puntito brilla como en las apps */
body .cn-viva .cn-punto{box-shadow:0 0 8px currentColor}
body .cn-tarj.cn-viva:has(.cn-n-rojo){border-color:rgba(255,59,92,.55);box-shadow:0 0 14px rgba(255,59,92,.35)}
body .cn-tarj.cn-viva:has(.cn-n-info){box-shadow:0 0 14px rgba(255,106,19,.35)}
body .cn-tarj.cn-viva:has(.cn-n-ambar){border-color:rgba(255,216,77,.5);box-shadow:0 0 12px rgba(255,216,77,.24)}
body .cn-tarj.cn-viva:has(.cn-n-fiesta){border-color:rgba(62,226,155,.5);box-shadow:0 0 12px rgba(62,226,155,.24)}
body .cn-dt[style*="#b3261e"]{text-shadow:0 0 12px rgba(255,59,92,.45)}
body .cn-emerg b,body .cn-emerg-min,body .cn-tel a{text-shadow:0 0 12px rgba(255,59,92,.45)}
body .cn-pill.cn-u-alta{box-shadow:0 0 14px rgba(255,59,92,.35)}
body .cn-pill.cn-u-media{box-shadow:0 0 12px rgba(255,216,77,.24)}
body .cn-ahora{box-shadow:0 0 24px rgba(255,106,19,.34)}
body .cn-ojo{box-shadow:0 0 18px rgba(255,216,77,.26)}
body .cn-paso.cn-hecho .cn-caja{box-shadow:0 0 12px rgba(62,226,155,.24)}
/* 3. TARJETAS DEL TABLERO: la verde y la amarilla brillan como la roja (más suave), y su cifra también */
.card.verde{box-shadow:0 0 18px rgba(62,226,155,.26)}
.card.ambar{box-shadow:0 0 18px rgba(255,216,77,.26)}
.card.verde .val{text-shadow:0 0 14px rgba(62,226,155,.35)}
.card.ambar .val{text-shadow:0 0 14px rgba(255,216,77,.35)}
.card .sub.pos{text-shadow:0 0 10px rgba(62,226,155,.3)}
.card .sub.neg{text-shadow:0 0 12px rgba(255,59,92,.45)}
/* 4. CAJAS Y NOTAS DE ESTADO escritas en app.js (style="…") */
.nota[style*="border-left:4px solid var(--mal)"]{box-shadow:0 0 22px rgba(255,59,92,.42)}
.nota[style*="border-left:4px solid var(--ok)"]{box-shadow:0 0 18px rgba(62,226,155,.26)}
.nota[style*="border-left:3px solid var(--aviso)"]{box-shadow:-8px 0 16px -8px rgba(255,216,77,.5)}
.nota[style*="border-left:3px solid var(--ok)"]{box-shadow:-8px 0 16px -8px rgba(62,226,155,.5)}
.nota[style*="border-left:3px solid var(--acento)"]{box-shadow:0 0 24px rgba(255,106,19,.34)}
.nota[style*="border-left:3px solid #d97706"]{box-shadow:0 0 18px rgba(255,216,77,.26)}
.card[style*="border-left:4px solid var(--aviso)"]{box-shadow:0 0 18px rgba(255,216,77,.26)}
div[style*="border:1px solid var(--acento)"][style*="background:var(--acento-suave)"]{box-shadow:0 0 24px rgba(255,106,19,.34)}
#excDia td[style*="border-left:4px solid var(--mal)"]{box-shadow:inset 14px 0 16px -8px rgba(255,59,92,.35)}
#excDia td[style*="border-left:4px solid var(--aviso)"]{box-shadow:inset 14px 0 16px -8px rgba(255,216,77,.26)}
/* 5. PÍLDORAS, SEMÁFOROS, CHIPS, PUNTOS Y BOTONES DE COLOR (pieza chica) */
.pill.verde{box-shadow:0 0 12px rgba(62,226,155,.24)}
.pill.ambar{box-shadow:0 0 12px rgba(255,216,77,.24)}
.pill.rojo{box-shadow:0 0 14px rgba(255,59,92,.35)}
.dg-cel.g{box-shadow:0 0 12px rgba(62,226,155,.24)}
.dg-cel.y{box-shadow:0 0 12px rgba(255,216,77,.24)}
.dg-cel.r,.dg-cel.x{box-shadow:0 0 14px rgba(255,59,92,.35)}
.dg-live{box-shadow:0 0 12px rgba(62,226,155,.24)}
.dg-live::before{box-shadow:0 0 8px rgba(62,226,155,.85)}
.chip.listo{box-shadow:0 0 12px rgba(62,226,155,.24)}
button.chip[style*="border-color:var(--mal)"]{box-shadow:0 0 14px rgba(255,59,92,.35)}
button.mini[style*="border-color:var(--ok)"],button.mini[style*="background:var(--ok)"]{box-shadow:0 0 12px rgba(62,226,155,.24)}
button.mini[style*="border-color:var(--mal)"]{box-shadow:0 0 14px rgba(255,59,92,.35)}
.cal-pt.cumple{box-shadow:0 0 6px rgba(62,226,155,.8)}
.cal-pt.venc{box-shadow:0 0 6px rgba(255,59,92,.85)}
.cal-pt.otro{box-shadow:0 0 6px rgba(255,216,77,.8)}
#btn-hoy{box-shadow:0 0 14px rgba(255,106,19,.35)}
.form.editando{box-shadow:0 0 24px rgba(255,106,19,.34)}
/* 6. LETRAS DE ESTADO (mensajes, saldos, ✓ / ⚠, títulos naranjas): un brillo leve de su color; nunca en la hoja del cuadre */
:is(.check-mal,[style*="color:var(--mal)"],[style*="color:#b3261e"]):not(button):not(.cu-hoja *){text-shadow:0 0 12px rgba(255,59,92,.45)}
:is(.check-ok,[style*="color:var(--ok)"],[style*="color:#1b7f4d"],[style*="color:#1a7f37"]):not(button):not(.cu-hoja *){text-shadow:0 0 10px rgba(62,226,155,.3)}
:is([style*="color:var(--aviso)"],[style*="color:#b45309"]):not(button):not(.cu-hoja *){text-shadow:0 0 10px rgba(255,216,77,.3)}
:is(.aviso-edicion,.modal-titulo,[style*="color:var(--acento)"]):not(button):not(.cu-hoja *){text-shadow:0 0 12px rgba(255,106,19,.4)}
nav .fila-grupos button.dg-btn:not(.on){text-shadow:0 0 12px rgba(255,106,19,.4)}
.login-msg{text-shadow:0 0 4px #000,0 0 12px rgba(255,59,92,.45)}
.ch-svg [stroke="#e24b4a"]{filter:drop-shadow(0 0 3px rgba(255,59,92,.6))}
}

/* ══ REVISIÓN A FONDO (10/10/2026): la web pareja consigo misma (Baúl, botones sueltos, tarjetas…) y con las apps ══ */
/* ══ LA WEB CONSIGO MISMA · CAPA FINAL (10/10/2026) · al FINAL de public/styles.css ══
   Lo que la web todavía no tenía de su propio manual Órbita, para que web y apps queden iguales.
   Solo pantalla. No toca .cu-hoja, #exportArea, .foto-clara, la libreta de flete ni la impresión. */
@media screen{
/* BAÚL de la web: pasaba con la paleta oscura VIEJA (gris carbón, crema, pasteles). Queda idéntico al de las apps */
body .bl{--bl-f:#07090c;--bl-t:#fff;--bl-l:rgba(255,255,255,.14);--bl-s:#b3bcc7;--bl-p:#0f1216}
body .bl-tab{border-radius:8px;font-family:var(--letra-tit);font-weight:500;letter-spacing:.07em}
body .bl-tab:not(.on){background:transparent;border-color:transparent;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px}
body .bl-tab.on{background:#ff6a13;border-color:#ff6a13;color:#000;font-weight:700;box-shadow:0 0 24px rgba(255,106,19,.34)}
body .bl-tab span{background:#ff6a13;color:#000}
body .bl-tab.on span{background:#000;color:#ff6a13}
body .bl-add{background:#ff6a13;color:#000;border-radius:10px;box-shadow:0 0 24px rgba(255,106,19,.34)}
body .bl-add:hover{background:#ff8a3d;box-shadow:0 0 44px rgba(255,106,19,.42)}
body .bl-add:active{box-shadow:none}
body .bl-carp{border-radius:12px}
body .bl-busca{border-radius:6px}
body .bl-campo input,body .bl-campo select,body .bl-campo textarea{border-radius:8px}
body .bl-busca,body .bl-campo input:not([type=checkbox]):not([type=radio]),body .bl-campo select,body .bl-campo textarea{background:#000;color:#fff;color-scheme:dark;border-color:transparent;outline:1px solid rgba(255,255,255,.26);outline-offset:-1px}
body .bl-busca:focus,body .bl-campo input:not([type=checkbox]):not([type=radio]):focus,body .bl-campo select:focus,body .bl-campo textarea:focus{background:#0f1216;border-color:transparent;outline:1px solid #ff6a13;outline-offset:-1px;box-shadow:0 0 0 2px rgba(255,106,19,.15),0 0 24px rgba(255,106,19,.34)}
body .bl-busca::placeholder,body .bl-campo input::placeholder,body .bl-campo textarea::placeholder{color:#7f8894;opacity:1}
body .bl-btn{background:transparent;border-color:transparent;outline:1px solid rgba(255,255,255,.26);outline-offset:-1px;border-radius:7px;font-weight:500}
body .bl-btn.ver{border-color:transparent;outline-color:#ff6a13;color:#ff6a13}
body .bl-btn.no{border-color:transparent;outline-color:#ff3b5c;color:#ff3b5c;box-shadow:0 0 14px rgba(255,59,92,.35)}
body a.bl-btn{text-decoration:none}
body .bl-fila a:not(.bl-btn){color:#ff8a3d}
body .bl-grupo,body .bl-campo > label{color:#dde2e8;font-family:var(--letra-tit);font-weight:600;letter-spacing:.1em}
body .bl-fila .k{color:#dde2e8}
body .bl-solomira{color:#dde2e8;border-style:solid;background:#0b0d10}
body .bl-chk label{border-color:rgba(255,255,255,.26);color:#fff}
body .bl-sem{border-radius:6px;font-weight:600}
body .bl-sem.ok{background:rgba(62,226,155,.13);color:#3ee29b;box-shadow:0 0 12px rgba(62,226,155,.24)}
body .bl-sem.pronto{background:rgba(255,216,77,.13);color:#ffd84d;box-shadow:0 0 12px rgba(255,216,77,.24)}
body .bl-sem.vencido{background:rgba(255,59,92,.14);color:#ff3b5c;box-shadow:0 0 14px rgba(255,59,92,.35)}
body .bl-sem.nunca,body .bl-pill,body .bl-carp > summary .n{background:#14171c;color:#dde2e8}
body .bl-velo{background:rgba(0,0,0,.72)}
body .bl-modal{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 -20px 60px rgba(0,0,0,.7)}
body .bl-modal h3{color:#fff;font-family:var(--letra-tit);text-transform:none;letter-spacing:normal}
body .bl-modal h3 .x{background:#14171c;color:#dde2e8;border-radius:12px}
body .bl-modal h3 .x:active{background:#1d2128}
body .bl-ok{background:#3ee29b;color:#000;border-radius:10px;box-shadow:0 0 18px rgba(62,226,155,.26)}
body .bl-ok[style*="#b3261e"]{background:#ff3b5c!important;color:#000;box-shadow:0 0 22px rgba(255,59,92,.42)}
body .bl-err{color:#ff3b5c;text-shadow:0 0 12px rgba(255,59,92,.45)}
body .bl-visor{background:#0f1216}
body .bl-pegar{border-color:rgba(255,255,255,.26)}
body .bl-pegar:focus{border-color:#ff6a13;color:#ff6a13;background:rgba(255,106,19,.08)}
body .bl-pegar.tiene{border-color:#3ee29b;color:#3ee29b;background:rgba(62,226,155,.08);box-shadow:0 0 18px rgba(62,226,155,.26)}
body .bl-clave,body .bl-grande{font-family:var(--letra-num)}
/* la regla de foco de la web (border-radius:6px) no le cambia la esquina al Baúl */
body .bl-tab:focus-visible{border-radius:8px}
body .bl-add:focus-visible,body .bl-ok:focus-visible{border-radius:10px}
body .bl-campo input:focus-visible,body .bl-campo select:focus-visible{border-radius:8px}

/* botones "sec" sueltos (corte, cambiar destare, Libreta, ✎, Cerrar libreta, ＋ Nueva placa…): salían NARANJAS con halo
   porque .sec solo existía dentro de las ventanas. Quedan como el secundario de la web */
body #vista button.btn.sec{background:#000;color:#dde2e8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
body #vista button.btn.sec:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
/* botón oscuro escrito en el código (CERRAR DÍA, IMPRIMIR / PDF, LEER BALANZA) al pasar el mouse, como .btn.imprimir */
body button.btn[style*="var(--shell)"]:hover{background:#1c222b!important;box-shadow:inset 0 0 0 1px #ff6a13}
/* botón mini sin clase: al pasar el mouse se enciende en naranja; el rojo queda para anular/borrar/quitar */
body button.mini:not([onclick*="anular"]):not([onclick*="borrar"]):not([onclick*="quitar"]):not([onclick*="eliminar"]):hover{color:#ff6a13;border-color:#ff6a13}
/* lupa/campana de la cabecera al tocarla: oscuro como la ✕, no gris claro */
body header .cn-bt:active{background:#1d2128}
/* aviso SIN LEER: el puntito lleno de su color, sin el anillo gris */
body .cn-tarj.cn-viva .cn-punto{border-color:currentColor}

/* tarjetas hechas a mano de CONTROL DE JABAS y CAMAL (usaban una variable que no existe): rótulo y cifra como .card */
body #vista div[style*="color:var(--tinta-suave)"]{color:#dde2e8!important;font-family:var(--letra-tit);font-weight:600!important}
body #vista div[style*="color:var(--tinta-suave)"] + div[style^="font-size:22px;font-weight:800"]{font-family:var(--letra-tit);font-weight:600!important;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* "Mi número del día" de los demás roles: esquina de 12 px, estela de su color y letra técnica */
body #vista div[style*="border-radius:16px;overflow:hidden"]{border-radius:12px!important}
body #vista div[style*="border-radius:16px;overflow:hidden"]:has(> div[style^="background:var(--ok)"]){box-shadow:0 0 18px rgba(62,226,155,.26)!important}
body #vista div[style*="border-radius:16px;overflow:hidden"]:has(> div[style^="background:var(--aviso)"]){box-shadow:0 0 18px rgba(255,216,77,.26)!important}
body #vista div[style*="border-radius:16px;overflow:hidden"]:has(> div[style^="background:var(--mal)"]),body #vista div[style*="border-radius:16px;overflow:hidden"]:has(> div[style^="background:#1a1a1a"]){box-shadow:0 0 22px rgba(255,59,92,.42)!important}
body #vista div[style*="text-transform:uppercase;opacity:.92"]{font-family:var(--letra-tit);letter-spacing:.13em!important;opacity:1!important}
body #vista div[style^="font-size:54px;font-weight:800"]{font-family:var(--letra-tit);font-weight:600!important;letter-spacing:-.02em}

/* PEDIDO: el buscador tenía el naranja viejo de 2 px y las casillas de la tabla salían grises del navegador */
body #ped-buscar{background:#000;color:#fff;color-scheme:dark;border-color:transparent!important;outline:1px solid rgba(255,255,255,.26);outline-offset:-1px}
body #ped-buscar:focus{background:#0f1216;border-color:transparent!important;outline:1px solid #ff6a13;outline-offset:-1px;box-shadow:0 0 0 2px rgba(255,106,19,.15),0 0 24px rgba(255,106,19,.34)}
body #vista td input:not([type=checkbox]):not([type=radio]):not(.foto-clara *){background:#000;color:#fff;color-scheme:dark;border-style:solid;border-color:transparent;outline:1px solid rgba(255,255,255,.26);outline-offset:-1px;border-radius:6px}
body #vista td input:not([type=checkbox]):not([type=radio]):not(.foto-clara *):focus{background:#0f1216;outline:1px solid #ff6a13;outline-offset:-1px;box-shadow:0 0 0 2px rgba(255,106,19,.15),0 0 24px rgba(255,106,19,.34)}
/* foco de las casillas sueltas igual que el de .form (y el anillo pegado al borde, sin separación) */
body .cuadro-asignar input:focus,body .pz input:focus,body .mb-fila input:focus,body .ddmm select:focus,body .selector select:focus{background:#0f1216;border-color:#ff6a13;outline:2px solid rgba(255,106,19,.15);outline-offset:0;box-shadow:0 0 24px rgba(255,106,19,.34)}
body .form input:focus,body .form select:focus,body .selector input:focus{outline-offset:0}
/* la esquina no cambia al enfocar (la regla de foco la ponía en 6 px) */
body .cn-busca:focus-visible{border-radius:12px}
body .modal-input:focus-visible,body .lg-input:focus-visible,body .pz-btn:focus-visible,body .pz-num:focus-visible,body .mb-btn:focus-visible,body .numpad button:focus-visible,body .cnt button:focus-visible{border-radius:8px}
body .login-card .lg-input:focus-visible{border-radius:10px}
body .chip:focus-visible{border-radius:5px}
/* casillas de marcar y texto seleccionado en naranja (no el azul del navegador) */
body input[type=checkbox],body input[type=radio]{accent-color:#ff6a13}
::selection{background:rgba(255,106,19,.35);color:#fff}

/* REPORTES: los nombres de grupo como rótulo (letra técnica, #dde2e8), igual que en las apps */
body #vista .nota[style*="font-weight:700;letter-spacing:.06em"]{font-family:var(--letra-tit);color:#dde2e8;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase}
body h3 .rep-hora{font-family:var(--letra-tit);letter-spacing:.06em!important}
/* Dirección General: sus h3 en #dde2e8 como todos los h3 */
body .dg-body h3{color:#dde2e8}
/* "Día abierto" / "Día cerrado": el texto en #dde2e8 como la nota de al lado (no en el gris de ayuda) */
body .nota[style*="border-left:4px solid var(--ok)"],body .nota[style*="border-left:4px solid var(--mal)"]{color:#dde2e8}
/* chips de color escritos en el código (SOBRANTE, RELLENO): con su tinte y su estela, como .chip.falta / .chip.listo */
body button.chip[style*="border-color:var(--mal)"]{background:rgba(255,59,92,.14)}
body button.chip[style*="border-color:var(--ok)"]{background:rgba(62,226,155,.13);box-shadow:0 0 12px rgba(62,226,155,.24)}
body button.chip[style*="border-color:var(--aviso)"]{background:rgba(255,216,77,.13);box-shadow:0 0 12px rgba(255,216,77,.24)}
/* barras "De dónde sale la merma" del plegable de GERENCIA: como el gráfico de barras */
body .dash-insights span[style*="background:var(--borde);border-radius:4px;height:12px"]{background:#151a21!important;border-radius:5px!important;overflow:visible!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
body .dash-insights span[style*="background:var(--borde);border-radius:4px;height:12px"] > span{background:linear-gradient(90deg,#b5520a,#ff6a13)!important;border-radius:5px;box-shadow:0 0 10px rgba(255,106,19,.5)}
body .dash-insights span[style*="background:var(--borde);border-radius:4px;height:12px"] > span[style*="width:100%"]{background:linear-gradient(90deg,#ff6a13,#ff9a4d)!important;box-shadow:0 0 14px rgba(255,106,19,.85)}
body .dash-insights span[style*="flex:0 0 230px"]{font-family:var(--letra-tit);color:#dde2e8}
body .dash-insights span[style*="flex:0 0 230px"] ~ span.num{font-family:var(--letra-num);color:#fff}
/* plegables que no eran naranjas */
body summary.nota[style*="cursor:pointer"],body summary[style*="font-size:12.5px;font-weight:700"]{color:#ff6a13;text-shadow:0 0 12px rgba(255,106,19,.4)}
/* píldora sin color: gris de la campana (antes no se veía) */
body .pill:not(.verde):not(.ambar):not(.rojo):not(.foto-clara *){background:#14171c!important;color:#dde2e8!important}
/* "Ir a mis aplicaciones": la esquina del botón principal */
body a[href="/aplicaciones"][style*="background:#ff6a13"]{border-radius:10px!important}
}

/* ══ LOS 16 PUNTOS (10/10/2026, pedido del dueño: "aplica los 16 puntos de una vez, usa buen criterio") ══ */
@media screen{
/* PUNTO 11 · CIFRAS CLAVE con el brillo fuerte del NETO del pesaje: el halo ancho de 28 px más el de cerca (en cifras de este
   tamaño el de 28 px solo se pierde), cada una en SU color: rojo el más fuerte, naranja medio, verde y amarillo suaves.
   Solo LO QUE QUEDÓ y sus totales, para que resalten entre las demás tarjetas: GERENCIA (LO QUE QUEDÓ, TOTAL DEL DÍA y LO QUE
   QUEDÓ DEL MES), MI NÚMERO (LO QUE QUEDÓ DEL MES) y DIRECCIÓN GENERAL (LO QUE QUEDÓ HOY, TOTAL DÍA, LO QUE QUEDÓ DEL MES y
   TOTAL MES). El NETO del pesaje ya lo tiene. El color lo pone la tarjeta (.verde/.rojo/.ambar). */
.card{--brillo-clave:0 0 28px rgba(255,106,19,.55),0 0 12px rgba(255,106,19,.4)}
.card.verde{--brillo-clave:0 0 28px rgba(62,226,155,.45),0 0 10px rgba(62,226,155,.3)}
.card.ambar{--brillo-clave:0 0 28px rgba(255,216,77,.45),0 0 10px rgba(255,216,77,.3)}
.card.rojo{--brillo-clave:0 0 28px rgba(255,59,92,.62),0 0 12px rgba(255,59,92,.45)}
:is(#vista:has(#ger-graf) details + h3 + .cards > .card:is(:nth-child(5),:nth-child(7)),
    #vista #ger-graf ~ h3 + .cards > .card:nth-child(2),
    #vista > .cards[style*="max-width:760px"] > .card:nth-child(2),
    .dg-tabs:has(> .dg-tab.on[onclick*="'hoy'"]) + .dg-body > .cards:not(h3 + .cards) > .card:is(:nth-child(4),:nth-child(6)),
    .dg-tabs:has(> .dg-tab.on[onclick*="'mtd'"]) + .dg-body > p.nota:first-child + .cards > .card:first-child,
    .dg-tabs:has(> .dg-tab.on[onclick*="'mtd'"]) + .dg-body > p.nota:first-child + .cards + .cards > .card:nth-child(7)) > .val{text-shadow:var(--brillo-clave)}

/* PUNTO 14 · franja de novedades: la naranja (nivel info) dice «● NOTA» y la verde (cumpleaños) «● ¡BIEN!», con el mismo estilo
   que «● ALERTA» y «● AVISO»: letra técnica de 12 px, espaciado .24em y su color con brillo */
body .cn-fr-ver.cn-n-info .cn-fr-tt::before{content:"● NOTA";margin-right:12px;color:#ff6a13;font-family:var(--letra-tit);font-size:12px;font-weight:600;letter-spacing:.24em;text-shadow:0 0 12px rgba(255,106,19,.7)}
body .cn-fr-ver.cn-n-fiesta .cn-fr-tt::before{content:"● ¡BIEN!";margin-right:12px;color:#3ee29b;font-family:var(--letra-tit);font-size:12px;font-weight:600;letter-spacing:.24em;text-shadow:0 0 12px rgba(62,226,155,.6)}
}

/* ══ LOS 16 PUNTOS · LA WEB (10/10/2026, pedido del dueño: "aplica los 16 puntos de una vez, usa buen criterio") ══
   Va AL FINAL de public/styles.css. Solo PANTALLA: la impresión, la foto clara (.foto-clara), la hoja del cuadre (.cu-hoja) y la
   libreta de flete no cambian. Ninguna letra baja de grosor. */
@media screen{
/* (2) BOTONES en la letra técnica, como el menú, los rótulos y las apps. Las casillas y desplegables siguen con su letra */
body button.btn:not(.login-btn):not(.foto-clara *),body button.mini:not(.foto-clara *),body .chip:not(.foto-clara *),body .pz-btn,body .pz-num,body .mb-btn,body .cuadro-asignar button,body .numpad button,body .cnt button{font-family:var(--letra-tit)}
body button.btn:not(.login-btn):not(.foto-clara *){letter-spacing:.05em}
body button.mini:not(.foto-clara *),body .chip:not(.foto-clara *),body .pz-btn,body .mb-btn{letter-spacing:.04em}

/* (5) TEXTOS DE AYUDA con más brillo (#dde2e8, como en las apps): las notas, "volver" y "después" de la lupa y el texto del "ojo" */
.nota:not(.login-msg):not(.foto-clara *):not(.cu-hoja *){color:#dde2e8}
body .cn-volver,body .cn-desp{color:#dde2e8}
body .cn-ojo{color:#fff}

/* (13) GERENCIA: IMPRIMIR PDF y CERRAR DÍA con aire entre los dos (en el celular quedaban pegados uno encima del otro) */
body #vista div:has(> button[onclick="imprimirGerencia()"]){display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* (15) REPORTES: RUTA y VENDEDOR como las casillas de la web: rótulo ARRIBA (también DESDE, HASTA y COMPARAR, para que la fila
   quede pareja), fondo negro, contorno, esquina de 6 px y relleno; la fila se alinea por abajo, como los formularios */
body .selector > .campo{display:flex;flex-direction:column;gap:4px}
body .selector:has(> .campo){align-items:flex-end}
body .selector > .campo > select{font-size:15px;padding:9px 10px;min-width:110px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:6px}

/* (16) REPESADA: el bloque de carga con el marco de panel de la web (fondo de tarjeta, línea fina, esquina de 12 px) y aire por dentro */
body #re-panel > .pz{background:#07090c;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 18px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
body #re-panel > .pz > *{margin-top:0;margin-bottom:0}
body #re-panel .pz-fila{display:flex;flex-wrap:wrap;gap:12px 16px}
body #re-panel .pz-fila .campo{display:flex;flex-direction:column;gap:4px}
body #re-panel .pz-info{display:flex;flex-wrap:wrap;gap:4px 16px}
}

/* (12) LA WEB EN EL CELULAR (800 px o menos; la cabecera de un renglón deja de entrar a los 780 px): la cabecera era más ancha que
   la pantalla, el navegador achicaba toda la página y PANEDIA desaparecía. Ahora va en 2 renglones: arriba PANEDIA y el reloj; abajo
   la lupa, ACTUALIZAR, HOY y el día ("DÍA:" sobra, la casilla ya muestra la fecha). La cabecera y el menú ya no se quedan pegados
   arriba al bajar: en el celular juntos tapaban más de media pantalla. */
@media screen and (max-width:800px){
header{position:static;height:auto;min-height:54px;flex-wrap:wrap;justify-content:flex-start;align-items:center;column-gap:8px;row-gap:4px;padding:8px 16px 10px}
body:not(.pre-login) header .fechasel{display:contents}
body header .marca{order:0;flex:0 0 auto;min-width:0}
body header .reloj{order:1;flex:1 1 0;min-width:0;border-left:0;padding-left:0}
body header .reloj .dia-txt{white-space:normal;text-align:right}
header::after{content:"";order:2;flex:0 0 100%;height:0}
body header #cnLupa{order:3}
body header #btn-refrescar{order:4}
body header #btn-hoy{order:5}
body header #btn-refrescar,body header #btn-hoy{height:42px;padding:0 10px;letter-spacing:.1em}
body header .fechasel label{display:none}
body header .fechasel input{order:6;flex:1 1 120px;min-width:0;max-width:170px;height:42px;margin-left:auto;padding:0 8px}
nav{position:static;padding:0 16px}
main{padding:16px}
#avisos .avisos-caja{padding:0 16px}
.panel-pesa{position:static}
}

/* ══ BLOQUE 37 (10/10/2026, el dueño: "déjala fija arriba, la cabecera con las alertas"; lo demás "a tu criterio") ══
   (1) La web en el celular: la cabecera (PANEDIA, reloj, lupa, campana, ACTUALIZAR, HOY y el día) vuelve a quedarse FIJA arriba al
       bajar, en sus 2 renglones. El menú sigue bajando con la página (los dos juntos tapaban media pantalla).
   (2) Los botones de elegir (BCP, BBVA, INGRESO… y los chips) suben un punto de letra: con la letra técnica habían quedado más chicos.
   (3) "ver detalle día por día" (COBRANZA Y BANCOS) recupera su naranja de enlace (la regla de las notas se lo había quitado). */
@media screen and (max-width:800px){
header{position:sticky;top:0}
}
@media screen{
body .chip:not(.foto-clara *){font-size:13px}
body .mb-btn{font-size:14px}
body summary.nota:not(.login-msg):not(.foto-clara *):not(.cu-hoja *){color:#ff6a13;text-shadow:0 0 12px rgba(255,106,19,.4)}
}