/* ═══════════════════════════════════════════════════════════════════════════
   INTERCEPTA · Sistema administrativo
   El Design System: tokens, piezas comunes y el armazón.

   Una regla por encima de todas: EL LIMA NO PINTA SUPERFICIES, SEÑALA.
   Si el lima está en todos lados deja de querer decir «aquí». Se usa para la
   acción principal, lo que está seleccionado y el foco del teclado. Nada más.

   El oscuro es un negro azulado: en pantalla se lee como azul marino —que es lo
   que se pidió— sin salirse del manual oficial, donde los únicos tres colores
   son lima #C7FF20, negro y blanco.

   Las clases NO se renombraron a propósito. Las ocho pantallas generan su HTML
   con los nombres de siempre; aquí sólo cambia cómo se ven. Un botón que decía
   COBRAR y cobraba, sigue diciendo COBRAR y cobrando.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca ── */
  --marca:#0B1420;          /* el oscuro: negro con 8% de azul */
  --marca-alta:#16212F;     /* una superficie oscura encima de otra */
  --marca-linea:#22303F;
  --lima:#C7FF20;           /* oficial, intacto. SÓLO acento */
  --lima-honda:#A8DC00;     /* el lima cuando necesita contraste sobre blanco */
  --lima-tenue:#F2FFD1;

  /* ── Superficies ── */
  --papel:#FFFFFF;
  --lienzo:#F4F6F5;
  --hundido:#F0F3F1;
  --linea:#E3E8E6;

  /* ── Tinta ── */
  --tinta:#101A16;
  --tinta-2:#5F6B66;
  --tinta-3:#8B9792;

  /* ── Estados: siempre quieren decir lo mismo ── */
  --ok:#1B7A4B;       --ok-fondo:#E8F5ED;
  --atencion:#8A6A10; --atencion-fondo:#FFF7E0; --atencion-linea:#E8C76A;
  --riesgo:#A3231F;   --riesgo-fondo:#FCEDEC;
  --info:#13518F;     --info-fondo:#ECF2FA;
  --espera:#FFE874;   --espera-linea:#A8780A; --espera-tinta:#4A3500;

  /* ── Espacio: todo en múltiplos de 4, nada «a ojo» ── */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  --r-chico:8px; --r:12px; --r-grande:16px;
  --sombra:0 1px 2px rgba(11,20,32,.04), 0 2px 8px rgba(11,20,32,.04);
  --sombra-alta:0 8px 28px -12px rgba(11,20,32,.28);

  /* ── Tipografía: seis tamaños, no once ── */
  --tipo:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --t-cifra:28px; --t-titulo:20px; --t-seccion:15px;
  --t-cuerpo:14px; --t-apoyo:12.5px; --t-etiqueta:10.5px;

  --paso:120ms cubic-bezier(.4,0,.2,1);
  --paso-lento:200ms cubic-bezier(.4,0,.2,1);

  /* ── Puente con los nombres viejos ──────────────────────────────────────
     Las pantallas portadas traen su CSS escrito con los nombres de antes. En
     vez de reescribir doscientas líneas y arriesgarse a romper algo, cada
     nombre viejo apunta al color nuevo: cambiar la paleta aquí arriba mueve
     todo el sistema de un golpe. */
  --v:var(--marca);       --v2:var(--ok);        --bd:var(--linea);
  --mut:var(--tinta-2);   --rojo:var(--riesgo);  --azul:var(--info);
  --ambar:var(--atencion-linea);
  --surface:var(--papel); --line:var(--linea);   --sunk:var(--hundido);
  --ink:var(--tinta);     --ground:var(--lienzo);
  --amarillo:var(--espera); --amarillo-bd:var(--espera-linea);
  --amarillo-tx:var(--espera-tinta);
}

*{box-sizing:border-box}
body{margin:0;background:var(--lienzo);color:var(--tinta);
  font:var(--t-cuerpo)/1.55 var(--tipo);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
.oculto{display:none !important}
::selection{background:var(--lima-tenue)}

/* El foco siempre se ve, y siempre igual: el lima señalando dónde estás. */
:focus-visible{outline:2px solid var(--lima-honda);outline-offset:2px;border-radius:4px}

/* ── Entrada ───────────────────────────────────────────────────────────────
   El logotipo oficial tal cual, sin redibujar nada, sobre el oscuro de marca. */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--e5);background:var(--marca);
  background-image:radial-gradient(ellipse at 50% -20%, #16212F 0%, #0B1420 65%)}
.caja{background:var(--papel);border-radius:var(--r-grande);
  padding:var(--e6) var(--e5) var(--e5);width:364px;max-width:100%;
  box-shadow:var(--sombra-alta);text-align:center}
.caja .logo{height:30px;margin:0 auto var(--e5);display:block}
.caja p{color:var(--tinta-2);font-size:var(--t-apoyo);margin:0 0 var(--e5)}
.caja h2{font-size:var(--t-seccion);margin:0 0 var(--e1);letter-spacing:.02em}
.caja input{width:100%;padding:14px;font-size:24px;text-align:center;letter-spacing:10px;
  border:1.5px solid var(--linea);border-radius:var(--r-chico);font-family:inherit;
  background:var(--hundido);transition:border-color var(--paso),background var(--paso)}
.caja input:focus{outline:none;border-color:var(--marca);background:var(--papel)}
.caja button{width:100%;margin-top:var(--e3);background:var(--lima);color:var(--marca);
  border:none;padding:14px;border-radius:var(--r-chico);font-size:var(--t-cuerpo);
  font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.02em;
  transition:transform var(--paso),box-shadow var(--paso),background var(--paso)}
.caja button:hover:not(:disabled){box-shadow:0 4px 16px -4px rgba(199,255,32,.55)}
.caja button:active:not(:disabled){transform:translateY(1px)}
.caja button:disabled{background:var(--linea);color:var(--tinta-3);cursor:default}
.err{color:var(--riesgo);font-size:var(--t-apoyo);margin-top:var(--e3);min-height:18px}

/* ── El marco ───────────────────────────────────────────────────────────── */
.marco{display:none;min-height:100vh}
.marco.on{display:flex}

nav{width:224px;flex:none;background:var(--marca);color:#AEBCB5;
  padding:var(--e5) 0 var(--e4);display:flex;flex-direction:column;min-height:100vh;
  position:sticky;top:0;align-self:flex-start}
nav .marcaLogo{height:20px;margin:0 var(--e5) var(--e5);display:block}
nav .club{display:none}
nav .quien{color:#7E8C86;font-size:var(--t-apoyo);padding:0 var(--e5) var(--e4);
  border-bottom:1px solid var(--marca-linea);margin-bottom:var(--e3)}
nav a{display:flex;align-items:center;gap:var(--e3);padding:10px var(--e5);color:#C3CFC9;
  text-decoration:none;font-size:13.5px;cursor:pointer;border-left:3px solid transparent;
  transition:background var(--paso),color var(--paso)}
nav a:hover{background:var(--marca-alta);color:#fff}
nav a.on{background:var(--marca-alta);color:var(--lima);border-left-color:var(--lima);
  font-weight:600}
nav a .ic{font-size:15px;width:20px;text-align:center;flex:none}
nav .salir{margin-top:auto;padding:var(--e4) var(--e5) 0;border-top:1px solid var(--marca-linea)}
nav .salir a{padding:var(--e2) 0;font-size:var(--t-apoyo);color:#7E8C86}
nav .salir a:hover{background:none;color:#fff}

main{flex:1;min-width:0;padding:var(--e5) clamp(16px,3vw,32px) var(--e6)}
.tit{display:flex;align-items:baseline;gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}
.tit h2{font-size:var(--t-titulo)}
.tit span{color:var(--tinta-2);font-size:var(--t-apoyo)}
.refrescar{margin-left:auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-chico);width:36px;height:32px;cursor:pointer;color:var(--marca);
  font-size:15px;transition:border-color var(--paso),transform var(--paso)}
.refrescar:hover{border-color:var(--marca);transform:rotate(45deg)}
/* La pantalla se está poniendo al día por detrás: el botón gira y lo dice. */
.titDer{margin-left:auto;display:flex;align-items:center;gap:var(--e2);align-self:center}
.titDer .refrescar{margin-left:0;flex:none}
.estadoDatos{font-size:11.5px;color:var(--tinta-3);white-space:nowrap}
.estadoDatos.nuevo{color:var(--espera-tinta);font-weight:700}
.refrescar span{display:inline-block}
/* Gira el signo, no la caja: la caja girando se veía como un rombo dando tumbos. */
.refrescar.trayendo span{animation:giraRefresco 900ms linear infinite}
.refrescar.trayendo:hover{transform:none}
.refrescar.hayNuevo{background:var(--espera);border-color:var(--espera-linea)}
@keyframes giraRefresco{to{transform:rotate(360deg)}}

@media (max-width: 860px){
  .marco.on{flex-direction:column}
  nav{width:auto;min-height:0;flex-direction:row;overflow-x:auto;padding:0;
    position:sticky;bottom:0;top:auto;order:2;border-top:1px solid var(--marca-linea);
    align-self:stretch;z-index:30}   /* encima de los paneles y pies que también se pegan */
  nav .marcaLogo, nav .quien, nav .salir{display:none}
  nav #navVistas{display:flex}
  nav a{flex-direction:column;gap:2px;font-size:10px;padding:10px var(--e3);
    border-left:none;border-top:3px solid transparent;white-space:nowrap}
  nav a.on{border-left-color:transparent;border-top-color:var(--lima)}
  main{padding:var(--e4);order:1}
}

/* ── Piezas que usan todas las pantallas ────────────────────────────────── */
.panel{display:none}
.panel.on{display:block;animation:entra var(--paso-lento) both}
@keyframes entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;max-width:1180px;margin-bottom:var(--e4);box-shadow:var(--sombra)}
.tarjeta h3{background:var(--papel);border-bottom:1px solid var(--linea);
  padding:var(--e3) var(--e4);font-size:var(--t-etiqueta);letter-spacing:1.2px;
  color:var(--tinta-2);font-weight:700}
.tarjeta .dentro{padding:var(--e4)}
.rej{display:grid;gap:var(--e4);grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  max-width:1180px;align-items:start}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--hundido);color:var(--tinta-2);font-size:var(--t-etiqueta);
  letter-spacing:.8px;text-align:left;padding:var(--e2) var(--e4);
  border-bottom:1px solid var(--linea);font-weight:700;text-transform:uppercase}
td{padding:11px var(--e4);border-bottom:1px solid var(--hundido);vertical-align:top}
tr:last-child td{border-bottom:none}
td.n, th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.tot td{font-weight:700;background:var(--hundido);border-top:1px solid var(--linea)}
table tr{transition:background var(--paso)}
table tbody tr:hover td{background:var(--hundido)}

.chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;
  font-weight:700;white-space:nowrap}
.chip.ok{background:var(--ok-fondo);color:var(--ok)}
.chip.warn{background:var(--atencion-fondo);color:var(--atencion)}
.chip.bad{background:var(--riesgo-fondo);color:var(--riesgo)}
.chip.gris{background:var(--hundido);color:var(--tinta-2)}

.aviso{padding:10px var(--e3);border-radius:var(--r-chico);font-size:var(--t-apoyo);
  line-height:1.55;margin-top:var(--e2);border-left:3px solid var(--linea);
  background:var(--hundido)}
.aviso.ok{background:var(--ok-fondo);border-left-color:var(--ok)}
.aviso.warn{background:var(--atencion-fondo);border-left-color:var(--atencion-linea)}
.aviso.bad{background:var(--riesgo-fondo);border-left-color:var(--riesgo)}
.aviso.amarillo{background:var(--espera);border-left-color:var(--espera-linea);
  color:var(--espera-tinta)}

.pie{color:var(--tinta-2);font-size:var(--t-apoyo);padding:var(--e3) var(--e4)}
.barra{height:8px;background:var(--hundido);border-radius:4px;overflow:hidden;
  margin:var(--e1) var(--e4) 0}
.barra i{display:block;height:100%;border-radius:4px;transition:width 600ms ease}

.wa{display:inline-block;background:#1EA952;color:#fff;text-decoration:none;
  padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;
  transition:background var(--paso),transform var(--paso)}
.wa:hover{background:#17863F}
.wa:active{transform:translateY(1px)}

/* ── Botones: tres pesos y una regla ──────────────────────────────────────
   Una sola acción principal por pantalla. Si hay dos iguales, no hay principal. */
.btn{background:var(--lima);color:var(--marca);border:none;padding:11px var(--e4);
  border-radius:var(--r-chico);font-size:13.5px;font-weight:800;cursor:pointer;
  font-family:inherit;transition:transform var(--paso),box-shadow var(--paso)}
.btn:hover:not(:disabled){box-shadow:0 4px 14px -5px rgba(168,220,0,.8)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:var(--linea);color:var(--tinta-3);cursor:default}
.btn.claro{background:var(--papel);color:var(--marca);border:1.5px solid var(--marca);
  font-weight:700}
.btn.claro:hover:not(:disabled){background:var(--hundido);box-shadow:none}
/* El peligro nunca va relleno: un botón rojo brillante atrae el dedo, que es
   exactamente lo contrario de lo que se quiere. */
.btn.peligro{background:var(--papel);color:var(--riesgo);border:1.5px solid #E6BDBB;
  font-weight:700}
.btn.peligro:hover:not(:disabled){background:var(--riesgo-fondo);border-color:var(--riesgo);
  box-shadow:none}

/* ── Esqueleto de carga ─────────────────────────────────────────────────── */
.esq .l{height:13px;border-radius:7px;margin-bottom:11px;
  background:linear-gradient(90deg,var(--hundido) 25%,#E7EEE9 37%,var(--hundido) 63%);
  background-size:400% 100%;animation:brillo 1.3s ease infinite}
.esq .l.t{height:18px;width:36%;margin-bottom:15px}
.esq .l.c{width:92%} .esq .l.d{width:76%} .esq .l.e{width:84%} .esq .l.f{width:62%}
.esq .fila{display:flex;gap:11px;margin-bottom:11px}
.esq .fila .l{flex:1;margin:0}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important}
}

/* ── Feedback ──────────────────────────────────────────────────────────────
   Cuatro formas, y cada una tiene su trabajo: el toast confirma lo que ya pasó,
   el aviso en línea explica lo que hay que leer, el botón ocupado impide el
   doble cobro y el diálogo detiene lo que no tiene vuelta atrás. */

.toasts{position:fixed;right:var(--e5);bottom:var(--e5);z-index:60;
  display:flex;flex-direction:column;gap:var(--e2);pointer-events:none;
  max-width:min(380px, calc(100vw - 32px))}
.toast{background:var(--marca);color:#fff;padding:12px var(--e4);border-radius:var(--r);
  font-size:var(--t-apoyo);line-height:1.5;box-shadow:var(--sombra-alta);
  border-left:4px solid var(--lima);animation:llega var(--paso-lento) both}
.toast.ok{border-left-color:var(--lima)}
.toast.bad{border-left-color:#E05B56}
.toast.warn{border-left-color:var(--espera)}
.toast.yendose{animation:seVa var(--paso-lento) both}
@keyframes llega{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes seVa{to{opacity:0;transform:translateY(6px)}}
@media (max-width: 860px){
  .toasts{right:var(--e3);left:var(--e3);bottom:76px;max-width:none}
}

.velo{position:fixed;inset:0;background:rgba(11,20,32,.55);z-index:70;
  display:flex;align-items:center;justify-content:center;padding:var(--e4);
  animation:aparece var(--paso) both;backdrop-filter:blur(2px)}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.dialogo{background:var(--papel);border-radius:var(--r-grande);padding:var(--e5);
  width:440px;max-width:100%;box-shadow:var(--sombra-alta);
  animation:sube var(--paso-lento) both}
@keyframes sube{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.dialogo h3{font-size:var(--t-seccion);margin-bottom:var(--e2);line-height:1.35}
.dialogo p{margin:0 0 var(--e5);color:var(--tinta-2);font-size:var(--t-apoyo);
  line-height:1.6}
.dialogo p b{color:var(--tinta)}
.dialogo .acciones{display:flex;gap:var(--e2);justify-content:flex-end;flex-wrap:wrap}
.dialogo .acciones .btn{min-width:120px}

/* El giro del botón ocupado: discreto, sólo para que se note que algo pasa. */
.girando{display:inline-block;width:12px;height:12px;margin-right:var(--e2);
  vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:gira 700ms linear infinite;opacity:.7}
@keyframes gira{to{transform:rotate(360deg)}}