/* AlmaxApp · estilo compartido — dirección "Mostrador".
   Clara, redondeada y amable. Color sólo donde sirve: cada categoría tiene el suyo
   y el botón de cobrar es verde y grande. Nada de mayúsculas con espaciado ni
   estética de consola: esto se usa atendiendo gente, no mirando un tablero.
   Todo se usa con el dedo, así que botones y campos van de 44 px para arriba. */

:root{
  color-scheme:light;
  --bg:#f5f7fa; --pan:#fff; --pan2:#f8fafc;
  --ink:#16202e; --mut:#6b7a8f; --dim:#93a1b4;
  --lin:#e5e9f0; --lin2:#d4dbe6;
  --acc:#1668ff; --acc-s:#eaf2ff;
  --ok:#12a150;  --ok-s:#e7f7ee;
  --warn:#b45309; --warn-s:#fdf0dc;
  --bad:#d92d20;  --bad-s:#fdeceb;
  --f:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:12px;                                   /* el radio de todo */
  --elev:0 1px 2px rgba(20,30,50,.05), 0 8px 20px -14px rgba(20,30,50,.25);
  --elev2:0 2px 8px rgba(20,30,50,.07), 0 18px 36px -22px rgba(20,30,50,.35);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0f141b; --pan:#171e28; --pan2:#1c2430;
  --ink:#e9eef6; --mut:#97a6b9; --dim:#6d7c8f;
  --lin:#26303d; --lin2:#33404f;
  --acc:#4d8dff; --acc-s:#13243d;
  --ok:#2bbd6b;  --ok-s:#0e2a1d;
  --warn:#e0a33c; --warn-s:#2e2312;
  --bad:#ff6b63;  --bad-s:#30191a;
  --elev:0 1px 2px rgba(0,0,0,.35), 0 8px 22px -14px rgba(0,0,0,.7);
  --elev2:0 2px 10px rgba(0,0,0,.45), 0 20px 40px -22px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f141b; --pan:#171e28; --pan2:#1c2430;
  --ink:#e9eef6; --mut:#97a6b9; --dim:#6d7c8f;
  --lin:#26303d; --lin2:#33404f;
  --acc:#4d8dff; --acc-s:#13243d;
  --ok:#2bbd6b;  --ok-s:#0e2a1d;
  --warn:#e0a33c; --warn-s:#2e2312;
  --bad:#ff6b63;  --bad-s:#30191a;
  --elev:0 1px 2px rgba(0,0,0,.35), 0 8px 22px -14px rgba(0,0,0,.7);
  --elev2:0 2px 10px rgba(0,0,0,.45), 0 20px 40px -22px rgba(0,0,0,.8);
}
/* nombres viejos que las pantallas todavía usan */
:root{--card:var(--pan); --mute:var(--mut); --line:var(--lin); --line2:var(--lin2);
      --soft:var(--acc-s); --good:var(--ok); --panel:var(--pan); --panel2:var(--pan2);
      --cyan:var(--acc); --acc2:#7c4dff; --muted:var(--mut)}

*{box-sizing:border-box}[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font:15px/1.45 var(--f);
  padding:max(12px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1,h2,h3{font-family:var(--f);margin:0;letter-spacing:-.3px}
h1{font-weight:800}h2{font-weight:800}h3{font-weight:700;font-size:16px}
.wrap{max-width:1180px;margin:0 auto}

/* ===========================================================================
   MENÚ LATERAL (dirección "Taller")
   ---------------------------------------------------------------------------
   Angosto a propósito: 76 px contra los 238 de un menú con los nombres escritos.
   En la tablet apaisada del mostrador esa diferencia son dos productos más por
   fila en la grilla de la caja, que es la pantalla que se mira todo el día.
   Los nombres van chiquitos abajo del icono, así no hay que aprenderse dibujos.
   Lo "tecnológico" acá no es el color: es la densidad y la precisión.

   La barra de arriba llegó a nueve pestañas y en una tablet ya no entraban;
   acá entran las nueve sin scroll.

   En el celular no hay lugar para una columna fija: pasa abajo, como barra.
   =========================================================================== */
/* 84 px y no 76: con los nombres completos ("Proveedores", "Etiquetas") en vez de abreviados,
   que se cortaban y hacían ver el menú desordenado. */
body.conmenu{padding:0;display:grid;grid-template-columns:84px 1fr;min-height:100vh}
.menu{background:var(--pan);border-right:1px solid var(--lin);padding:14px 10px 12px;
  display:flex;flex-direction:column;gap:3px;align-items:center;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  /* Si no entra todo, se desliza igual (rueda, dedo) pero sin la barra gris al costado, que
     ensuciaba la pantalla (pedido de David, 2026-10-11). */
  scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
/* En pantallas bajas (notebooks), los ítems se achican un poco para que entre más sin deslizar. */
@media (min-width:821px) and (max-height:900px){.menu a,.menu button.it{min-height:44px}.menu .mk{padding-bottom:8px;margin-bottom:4px}
  .menu .raya{margin:4px 0}}
/* La marca tiene lugar propio, separada de la navegación: el logo no compite con
   los iconos y queda un espacio fijo donde entre el definitivo. */
.menu .mk{display:grid;justify-items:center;gap:5px;padding-bottom:12px;margin-bottom:8px;
  border-bottom:1px solid var(--lin);width:54px}
.menu .mk svg{width:40px;height:40px;border-radius:12px}
.menu .mk b{font:800 12px var(--f);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.menu a,.menu button.it{width:64px;min-height:52px;border-radius:11px;display:grid;
  place-items:center;align-content:center;gap:3px;color:var(--mut);text-decoration:none;
  position:relative;transition:.12s;border:0;background:none;cursor:pointer;font:inherit;
  padding:0;box-shadow:none}
.menu svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.menu i{font-style:normal;font:600 9.5px var(--f);letter-spacing:-.01em;text-align:center;
  max-width:63px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu a:hover,.menu button.it:hover{background:var(--pan2);color:var(--ink)}
.menu a.on,.menu button.it[aria-selected="true"]{background:var(--acc-s);color:var(--acc)}
.menu a.on::before,.menu button.it[aria-selected="true"]::before{content:"";position:absolute;
  left:-10px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
/* El punto rojo del aviso: dice que hay algo sin mirar sin ocupar lugar. */
.menu .pin{position:absolute;top:4px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--bad);box-shadow:0 0 0 2px var(--pan)}
/* Un pedido de Fulbitox esperando (vigilarAvisos en comun.js): la pelota titila y lleva el
   número. Titila, no gira ni rebota: tiene que verse de reojo desde la caja, no distraer. */
.menu .cuenta{position:absolute;top:2px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--bad);color:#fff;font:700 11px/18px Figtree,system-ui,sans-serif;text-align:center;
  box-shadow:0 0 0 2px var(--pan);z-index:1}
.menu .late svg{animation:late 1.1s ease-in-out infinite;color:var(--bad)}
.menu .late i{color:var(--bad);font-weight:700}
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.88)}}
/* Centrado con left/right/margin y no con transform: la animación de entrada usa transform y
   lo corría para la derecha. */
.aviso-flota{position:fixed;left:12px;right:12px;margin:0 auto;width:fit-content;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;
  display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;background:var(--bad);color:#fff;
  font-weight:600;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);white-space:nowrap;max-width:calc(100% - 24px);
  animation:entra .3s both}
.aviso-flota b{margin-left:4px}
@media (max-width:860px){.aviso-flota{bottom:calc(88px + env(safe-area-inset-bottom,0px));font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.menu .late svg{animation:none}}
.menu .raya{width:30px;height:1px;background:var(--lin);margin:7px 0;flex:none}
/* La firma de quién lo hizo: chica, al pie, sin gritar. No es una función de la app. */
/* Los días de prueba, al pie del menú: se ve en todas las pantallas y no sólo en la caja. */
/* Los días de prueba, en el encabezado (comun.js, pintarPrueba). Es un link al Plan. */
.prueba-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;
  background:var(--acc-s,var(--soft));color:var(--acc);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}
.prueba-chip.poco{background:var(--warn-s);color:var(--warn)}
.prueba-chip.vencida{background:var(--bad-s);color:var(--bad)}
.menu .prueba{margin-top:auto;width:54px;border-radius:9px;padding:5px 3px;text-align:center;
  background:var(--acc-s);color:var(--acc);text-decoration:none;line-height:1.05;display:block}
.menu .prueba b{display:block;font:800 14px var(--f);letter-spacing:-.02em}
.menu .prueba small{display:block;font:600 8px var(--f);margin-top:1px}
.menu .prueba.poco{background:var(--warn-s);color:var(--warn)}
.menu .prueba.vencida{background:var(--bad-s);color:var(--bad)}
.menu .prueba+.firma{margin-top:12px}
/* Ayuda va abajo, junto a los días de prueba: no es una pestaña, es una ventanita. */
.menu .ayuda{margin-top:auto}
.menu .prueba+.ayuda{margin-top:6px}
.menu .ayuda+.firma,.menu .avisar+.firma{margin-top:8px}
.menu .firma{margin-top:auto;padding-top:12px;border-top:1px solid var(--lin);width:54px;
  text-align:center;line-height:1.25}
.menu .firma small{display:block;font:500 8.5px var(--f);color:var(--dim);letter-spacing:.02em}
.menu .firma b{display:block;font:700 10px var(--f);color:var(--mut);letter-spacing:-.01em}

.hoja{min-width:0;display:flex;flex-direction:column}
body.conmenu>.hoja>header{margin:0;padding:0 20px;height:56px;background:var(--pan);
  border-bottom:1px solid var(--lin);flex-wrap:nowrap;
  /* Fijo arriba, como el menú a la izquierda: bajando en Productos o en Ventas, el nombre
     del local, el estado de la caja y "Salir" siguen a la vista. */
  position:sticky;top:0;z-index:25}
body.conmenu>.hoja>main{padding:16px 20px max(24px,env(safe-area-inset-bottom));flex:1;min-width:0}

/* En una pantalla baja (una notebook de 13", una tablet acostada) el menú no entraba entero
   y había que bajarlo por dentro: los últimos (Plan, Ajustes) quedaban escondidos. Se
   compacta para que entre todo sin moverse. */
@media (min-width:761px) and (max-height:820px){
  .menu{padding:10px 10px 8px;gap:1px}
  .menu .mk{padding-bottom:8px;margin-bottom:4px}
  .menu .mk svg{width:32px;height:32px}
  .menu a,.menu button.it{min-height:44px;gap:2px}
  .menu svg{width:18px;height:18px}
  .menu .raya{margin:4px 0}
}
@media (min-width:761px) and (max-height:680px){
  .menu .mk b,.menu .firma{display:none}
  .menu a,.menu button.it{min-height:40px}
}

@media (max-width:760px){
  body.conmenu{grid-template-columns:1fr}
  .menu{flex-direction:row;height:auto;position:fixed;bottom:0;left:0;right:0;top:auto;
    border-right:0;border-top:1px solid var(--lin);padding:6px 8px max(6px,env(safe-area-inset-bottom));
    overflow-x:auto;z-index:40;gap:2px;box-shadow:0 -6px 20px -12px rgba(16,32,46,.4)}
  .menu .mk,.menu .raya,.menu .firma{display:none}
  .menu a,.menu button.it{flex:0 0 auto;min-height:48px;width:66px}
  .menu a.on::before,.menu button.it[aria-selected="true"]::before{left:12px;right:12px;top:-6px;
    bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  body.conmenu>.hoja>main{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* El encabezado NO entra en 375 px: con altura fija y sin poder partirse, el nombre del
     local quedaba cortado y los botones se montaban unos encima de otros. Acá crece lo que
     necesite y el nombre se achica antes que los botones, que son los que se tocan. */
  body.conmenu>.hoja>header{padding:9px 14px;height:auto;min-height:56px;flex-wrap:wrap;
    row-gap:8px;align-items:center}
  body.conmenu>.hoja>header .marca{flex:1 1 140px;min-width:0}
  body.conmenu>.hoja>header .marca .local{font-size:16px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;display:block}
  body.conmenu>.hoja>header .hdr{flex:0 0 auto;gap:6px}
  body.conmenu>.hoja>header .hdr button{min-height:44px;padding:0 12px;font-size:14px}
  /* El estado de la caja ya se ve en el Cierre y en el botón de cobrar: en el celular ocupa
     un lugar que hace falta para lo que sí se toca. */
  body.conmenu>.hoja>header .pill{font-size:11.5px;padding:2px 8px}
}
@media (max-width:420px){
  body.conmenu>.hoja>header .pill{display:none}
  body.conmenu>.hoja>header .marca .local{font-size:15px}
}

/* ---------- marca: primero Almax, después el local ---------- */
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.marca svg{width:32px;height:32px;border-radius:10px;flex:none}
.marca .suite{font:800 20px var(--f);letter-spacing:-.5px;color:var(--ink)}
.marca .sep{width:1px;height:22px;background:var(--lin2);flex:none}
.marca .local{font:600 17px var(--f);letter-spacing:-.2px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca small{font:500 13px var(--f);color:var(--mut);margin-left:6px}
@media (max-width:560px){.marca .suite,.marca .sep{display:none}}
header{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--lin)}
.hdr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- números ---------- */
.num,.plata{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.plata{font-weight:700;letter-spacing:-.4px}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-top:10px;margin-top:2px;border-top:1px solid var(--lin);font-weight:600;color:var(--mut)}
.tot .plata,.tot .num{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-1px}
.big{font-size:36px;font-weight:800;text-align:center;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;color:var(--ink)}
/* De a dos en el celular: con 165 px de mínimo cada número ocupaba el ancho entero y los cuatro
   empujaban la agenda (o la caja) abajo de la pantalla. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
@media (max-width:420px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--pan);border:1px solid var(--lin);border-radius:14px;padding:14px 16px;
  box-shadow:var(--elev);animation:entra .36s cubic-bezier(.2,.7,.2,1) both}
.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}
.kpi:nth-child(4){animation-delay:.15s}.kpi:nth-child(n+5){animation-delay:.2s}
.kpi span,.kpi .label{font:600 13px var(--f);color:var(--mut);display:block}
.kpi b,.kpi .value{display:block;font:800 26px var(--f);font-variant-numeric:tabular-nums;
  color:var(--ink);margin-top:3px;letter-spacing:-.8px}
.kpi small{display:block;font:400 12.5px var(--f);color:var(--dim);margin-top:2px}

/* ---------- controles ---------- */
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--pan);border:1.5px solid var(--lin);color:var(--ink);
  border-radius:var(--r);padding:11px 15px;min-height:44px;font:600 15px var(--f);
  transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}
button:hover{border-color:var(--lin2);background:var(--pan2)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* Dos campos lado a lado, uno abajo del otro en el celular (lo usan la caja y la ventanita
   de los datos del local, que sale en todas las pantallas). */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:820px){.g2{grid-template-columns:1fr}}
/* Las ventanitas que abre comun.js en cualquier pantalla van por encima del menú de abajo del
   celular (si no, el menú quedaba encima y se podía tocar con la ventanita abierta). */
#mdatos,#mreporte,#mayuda{z-index:60}
/* Las dos opciones de "Ayuda": tarjetas con texto normal, como los demás botones-tarjeta. */
.opcion-ayuda{display:grid;gap:2px;text-align:left;padding:12px 14px;min-height:56px;text-transform:none;letter-spacing:0}
.opcion-ayuda b{font-size:15px}
#mdatos .mbox,#mreporte .mbox{overflow-x:hidden}
#mdatos label{min-width:0}#mdatos input,#mdatos select{width:100%;min-width:0;box-sizing:border-box}
/* Mandando algo al servidor (comun.js): se ve que tomó el toque y no acepta otro. */
button[aria-busy="true"]{opacity:.6;cursor:progress}
.sec{background:var(--pan);border-color:var(--lin);color:var(--mut);font-weight:500}
.sec:hover{color:var(--ink)}
.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700;
  box-shadow:0 8px 18px -10px var(--acc)}
.pri:hover{background:var(--acc);border-color:var(--acc);filter:brightness(1.07)}
/* el botón de cobrar: lo único verde de la app, para que no se confunda con nada */
.cobrar{background:var(--ok);border-color:var(--ok);color:#fff;font:800 18px var(--f);
  min-height:56px;border-radius:14px;box-shadow:0 10px 22px -10px var(--ok)}
.cobrar:hover{background:var(--ok);border-color:var(--ok);filter:brightness(1.07)}
.danger{background:var(--bad-s);border-color:var(--bad);color:var(--bad);font-weight:600}
.danger:hover{background:var(--bad-s);border-color:var(--bad);filter:brightness(.97)}
.pri.danger{background:var(--bad);border-color:var(--bad);color:#fff}
input,select,textarea{width:100%;background:var(--pan);border:1.5px solid var(--lin);border-radius:var(--r);
  padding:11px 14px;min-height:44px;color:var(--ink);font:400 15px var(--f);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--lin2)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 4px var(--acc-s)}
input::placeholder{color:var(--dim)}
textarea{min-height:68px;resize:vertical}
label{display:grid;gap:5px;font:600 13px var(--f);color:var(--mut)}
.chk{display:flex;gap:9px;align-items:center;font-weight:400;font-size:14.5px;color:var(--ink)}
.chk input{width:auto;min-height:0}
.card{background:var(--pan);border:1px solid var(--lin);border-radius:16px;padding:16px;box-shadow:var(--elev)}
.hint{font-size:13.5px;color:var(--mut)}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1 1 130px}
.center{max-width:420px;margin:10vh auto 0;display:grid;gap:14px;animation:entra .45s ease both}

/* ---------- navegación ---------- */
nav{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--lin);margin-bottom:16px}
nav button,nav a{border:0;background:none;border-bottom:2.5px solid transparent;border-radius:0;
  color:var(--mut);white-space:nowrap;padding:11px 14px;text-decoration:none;
  font:600 15px var(--f);min-height:0;box-shadow:none;transition:color .15s}
nav button:hover,nav a:hover{color:var(--ink);background:none;border-color:transparent}
nav button[aria-selected="true"]{color:var(--acc);border-color:var(--acc);font-weight:700}
/* Irse a OTRA pantalla no es cambiar de pestaña: iba del mismo gris apagado que una pestaña
   sin elegir, mezclado entre ellas, y había que buscarlo. Va al final, separado, con fondo. */
nav a.ir{margin-left:auto;align-self:center;padding:8px 14px;border-radius:999px;
  background:var(--acc-s);color:var(--acc);border-bottom:0;font-weight:600}
nav a.ir:hover{background:var(--acc);color:#fff}
nav a.ir+a.ir{margin-left:6px}
nav a.ir.atras{margin-left:0;margin-right:6px}   /* la vuelta va primero, no al final */

/* Título de una sección a la izquierda y la acción principal a la derecha. Estaba suelta
   dentro de caja.html y la agenda también la usaba: ahí el botón se iba solo a otro renglón. */
.bar{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}

/* ---------- grilla de productos de la caja ---------- */
.rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.pr{background:var(--pan);border:1px solid var(--lin);border-radius:14px;padding:11px;
  display:grid;gap:5px;text-align:left;min-height:86px;align-content:start;
  box-shadow:var(--elev);font-weight:400;animation:entra .3s both}
.pr:hover{border-color:var(--acc);background:var(--pan)}
.pr .ch{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;background:var(--cc,var(--acc-s));color:var(--cct,var(--acc))}
.pr b{font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.pr .plata{font-size:15.5px;font-weight:800;color:var(--ink)}
.pr small{font-size:11.5px;color:var(--dim)}
.pr.sin{opacity:.55}

/* ---------- escáner de códigos (comun.js) ---------- */
.escaner{position:fixed;inset:0;background:rgba(8,14,24,.92);z-index:30;display:grid;
  place-content:center;justify-items:center;gap:14px;padding:16px;animation:entra .2s both}
.escaner .ebox{position:relative;width:min(92vw,520px);aspect-ratio:4/3;border-radius:16px;
  overflow:hidden;background:#000;box-shadow:0 24px 60px -20px #000}
.escaner video{width:100%;height:100%;object-fit:cover;display:block}
.escaner .emira{position:absolute;left:8%;right:8%;top:34%;height:28%;border:3px solid #fff;
  border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.45)}
.escaner .elaser{position:absolute;left:11%;right:11%;top:48%;height:2px;background:#ff5a5f;
  box-shadow:0 0 10px #ff5a5f;animation:barre 1.6s ease-in-out infinite}
@keyframes barre{0%,100%{transform:translateY(-26px)}50%{transform:translateY(26px)}}
.escaner .eaviso{position:absolute;left:0;right:0;bottom:0;padding:11px;text-align:center;
  background:rgba(8,14,24,.85);color:#fff;font-weight:700;opacity:0;transition:opacity .2s}
.escaner .eaviso.se-ve{opacity:1}
.escaner .ehint{color:#c9d4e3;margin:0;text-align:center;max-width:46ch;font-size:14.5px}
.escaner .ecerrar{min-width:200px}

/* ---------- gráficos ----------
   Una sola serie, un solo tono. La grilla es recesiva (se ve si la buscás, no antes),
   las barras arrancan en la línea de base con la punta redondeada, y el valor se escribe
   solo encima de la más alta: un número sobre cada barra no se lee. */
.graf{position:relative;height:calc(var(--alto) + 22px);margin-top:6px}
.graf::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--alto);
  background:linear-gradient(var(--lin),var(--lin)) 0 0/100% 1px no-repeat,
             linear-gradient(var(--lin),var(--lin)) 0 50%/100% 1px no-repeat;
  opacity:.7;pointer-events:none}
.graf .bcol{position:absolute;bottom:22px;top:0;display:flex;align-items:flex-end;justify-content:center;padding:0 1px}
.graf .b{display:block;width:100%;max-width:26px;background:var(--b,color-mix(in srgb,var(--acc) 45%,transparent));
  border-radius:4px 4px 0 0;transition:background .15s;animation:crece .5s cubic-bezier(.2,.8,.2,1) both}
.graf .bcol:hover .b{background:var(--acc)}
.graf .pico{position:absolute;top:-2px;font:700 11.5px var(--f);color:var(--ink);white-space:nowrap;
  background:var(--pan);padding:0 4px;border-radius:4px}
.graf .eje{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--dim);border-top:1px solid var(--lin);padding-top:5px}
@keyframes crece{from{height:0!important}}
/* barra de proporción (cómo te pagan) */
.prog{height:7px;border-radius:999px;background:var(--lin);overflow:hidden;margin:4px 0 2px}
.prog span{display:block;height:100%;background:var(--acc);border-radius:999px;animation:ancho .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ancho{from{width:0!important}}
.mg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:820px){.mg2{grid-template-columns:1fr}}

/* ---------- etiquetas ---------- */
.tag,.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font:700 12.5px var(--f);background:var(--cd,var(--acc-s));color:var(--c,var(--acc));white-space:nowrap}
.tag::before,.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok,.tag.pago,.pill.p-ok{--c:var(--ok);--cd:var(--ok-s)}
.tag.impago,.pill.p-bad{--c:var(--bad);--cd:var(--bad-s)}
.tag.new,.pill.p-warn{--c:var(--warn);--cd:var(--warn-s)}
.tag.deli{--c:#7c4dff;--cd:color-mix(in srgb,#7c4dff 12%,transparent)}
.pill.p-bad::before,.tag.impago::before{animation:latido 1.3s ease-in-out infinite}
.vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;
  animation:latido 1.5s ease-in-out infinite}

/* ---------- grilla tipo turnero: el mes de un vistazo ----------
   Una fila por persona, una columna por día. Lo que no se contesta leyendo renglones
   --«¿cuántos lunes faltó?», «¿se superponen las vacaciones?»-- se ve acá o no se ve. */
.turnero{display:grid;grid-template-columns:116px repeat(var(--dias),minmax(24px,1fr));
  gap:2px;overflow-x:auto;padding-bottom:4px}
.turnero .tcab{font:700 10px var(--f);color:var(--mut);text-align:center;padding:3px 0;
  display:grid;gap:0;line-height:1.1}
.turnero .tcab b{font-size:11.5px;color:var(--ink)}
.turnero .tcab small{font-size:8.5px}
.turnero .tcab.dom b,.turnero .tcab.dom small{color:var(--bad)}
.turnero .tnom{font:600 12.5px var(--f);padding:0 8px;display:flex;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;
  background:var(--pan);z-index:1}
/* El casillero es un botón: se toca el día y se anota ahí, que es como se mira la grilla
   («el martes faltó»). Antes había que ir al botón «Anotar novedad» y volver a elegir a la
   persona y la fecha que ya estaban señaladas con el dedo. Arrastrando se marcan varios. */
.turnero .tc{min-height:30px;border-radius:6px;background:var(--pan2);border:1px solid var(--lin);
  display:grid;place-items:center;font:700 11px var(--f);color:#fff;padding:0;
  cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;
  transition:transform .08s ease,box-shadow .08s ease}
.turnero .tc:hover{box-shadow:0 0 0 2px var(--ace)}
.turnero .tc.sel{box-shadow:0 0 0 2px var(--ace);transform:scale(1.08);z-index:2}
.turnero .tc.dom{background:var(--bg)}
.turnero .tc.falta      {background:#d92d20;border-color:#d92d20}
.turnero .tc.vacaciones {background:#7c3aed;border-color:#7c3aed}
.turnero .tc.franco     {background:#2563eb;border-color:#2563eb}
.turnero .tc.licencia   {background:#64748b;border-color:#64748b}
.turnero .tc.horas_extra{background:#0e9f6e;border-color:#0e9f6e}
.turnero .tc.adelanto   {background:#b45309;border-color:#b45309}
.tleyenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--mut)}
.tleyenda span{display:flex;align-items:center;gap:5px}
.tleyenda i{width:11px;height:11px;border-radius:3px;display:block}
.tleyenda i.falta{background:#d92d20}.tleyenda i.vacaciones{background:#7c3aed}
.tleyenda i.franco{background:#2563eb}.tleyenda i.licencia{background:#64748b}
.tleyenda i.horas_extra{background:#0e9f6e}.tleyenda i.adelanto{background:#b45309}

/* ---------- editar y eliminar, en una tabla ----------
   Los dos con ícono: mezclar "Editar" escrito con una ✕ queda desprolijo y la ✕ además se
   lee como "cerrar", no como "borrar". El tacho no deja dudas.
   El rojo aparece recién al pasar por encima: si gritara desde cada renglón, una lista de
   300 productos sería una pared de botones rojos. */
.acc{display:inline-flex;gap:6px}
.acc button{min-height:44px;width:44px;padding:0;display:grid;place-items:center;
  background:var(--pan);border:1px solid var(--lin);border-radius:10px;color:var(--mut)}
.acc svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.acc button:hover{color:var(--acc);border-color:var(--acc);background:var(--acc-s)}
.acc .borrar:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-s)}
.acc .borrar:focus-visible{outline-color:var(--bad)}

/* ---------- tablas ---------- */
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:700 12.5px var(--f);color:var(--mut);text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--lin2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--lin);vertical-align:middle}
td.r,th.r{text-align:right}
td.num{font-variant-numeric:tabular-nums}
tr:hover td{background:var(--pan2)}

/* ---------- capas ---------- */
.modal{position:fixed;inset:0;background:rgba(10,18,30,.5);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:16px;z-index:10;animation:entra .16s both}
.mbox{background:var(--pan);border:1px solid var(--lin);border-radius:18px;padding:22px;
  width:min(460px,100%);display:grid;gap:12px;max-height:92vh;overflow:auto;
  box-shadow:var(--elev2);animation:entra .22s both}
/* El tilde del cobro. Es el momento más importante de la app: el círculo entra con un
   golpe y el tilde se DIBUJA adentro, no aparece hecho. Dura 600 ms en total; más que
   eso estorba cuando hay cola. La onda que se abre alrededor es lo que lo hace sentir
   como un cobro aceptado y no como un cartel más. */
/* `:not(.pago):not(.estado)`: "ok" también es el color de verde de una pastillita o de un cartel
   (".pago.ok", ".estado.ok"); sin esto se les aplicaba el círculo de 64 px del tilde y el texto
   del pedido de Fulbitox salía en una columna angosta y gigante. */
.ok:not(.pago):not(.estado){width:64px;height:64px;border-radius:50%;background:var(--ok-s);color:var(--ok);
  font-size:34px;display:grid;place-items:center;margin:0 auto;position:relative;
  animation:sello .42s cubic-bezier(.2,1.3,.4,1) both}
.ok:not(.pago):not(.estado)::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--ok);animation:onda .7s .12s ease-out both}
@keyframes onda{to{transform:scale(1.7);opacity:0}}
.ok svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round}
.ok svg path{stroke-dasharray:30;stroke-dashoffset:30;
  animation:traza .34s .2s cubic-bezier(.5,0,.3,1) forwards}
@keyframes traza{to{stroke-dashoffset:0}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;
  z-index:20;max-width:92vw;box-shadow:var(--elev2);animation:entra .2s both}

/* ---------- la pantalla de entrada ----------
   Es lo primero que ve cualquiera, todos los días, y era una tarjeta blanca con dos campos
   que podía ser de cualquier sistema. Ahora: la marca grande, EL NOMBRE DEL LOCAL (un login
   que dice "Ingresá a tu local" es de cualquiera; uno que dice "Peluquería Bella" es el de
   uno), y a qué pantalla se entra. Fondo cálido y el naranja de la dirección C. */
/* Va fija y a pantalla completa a propósito: así no hereda el relleno del body ni el ancho
   del contenedor de cada pantalla, y se ve EXACTAMENTE IGUAL en las seis. Antes quedaba
   descuadrada en unas y centrada en otras según dónde cayera el contenedor. */
.entrada{position:fixed;inset:0;z-index:30;overflow:auto;
  display:grid;place-items:center;padding:24px 16px;
  background:
    radial-gradient(900px 420px at 50% -10%, color-mix(in srgb,var(--acc) 9%,transparent), transparent 70%),
    var(--bg)}
/* Chips: botones chicos para elegir entre pocas opciones sin desplegar nada. Estaban definidos
   adentro de bar.html, así que los que usa la caja (los días del resumen, los días que pasa un
   proveedor) salían sin estilo: botones blancos sueltos sin marcar cuál estaba elegido. */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-height:44px;padding:7px 14px}
.chips button[aria-pressed="true"]{background:var(--acc-s);border-color:var(--acc);color:var(--acc);font-weight:600}

/* El botón de WhatsApp, con el verde de WhatsApp y no el nuestro. Es el único lugar donde
   vale usar el color de otro: la persona lo reconoce antes de leerlo. Ojo: no se confunde
   con el verde de Cobrar porque este nunca aparece en la pantalla de cobrar. */
.wa{background:#1f8f4e;border-color:#1f8f4e;color:#fff;font-weight:600}
.wa:hover{background:#1a7b43;border-color:#1a7b43}

/* El login va en una tarjeta, no suelto sobre el fondo. Suelto no se leía como una cosa:
   el logo, el nombre del local y los campos flotaban cada uno por su lado. La tarjeta los
   junta y deja claro dónde empieza y dónde termina lo que hay que completar. */
.entrada .caja{width:100%;max-width:400px;display:grid;gap:16px;text-align:center;
  background:var(--pan);border:1px solid var(--lin);border-radius:22px;padding:30px 26px 22px;
  box-shadow:0 24px 60px -28px rgba(11,17,24,.30),0 2px 6px -2px rgba(11,17,24,.06)}
/* El pie (Galex-IA y el link para crear un local) no es parte del formulario: va separado
   por una línea, para que nadie lo lea como un paso más del ingreso. */
.entrada .pie{border-top:1px solid var(--lin);padding-top:14px}
@media (max-width:420px){.entrada{padding:16px 12px}.entrada .caja{padding:24px 18px 18px;border-radius:18px}}
/* El isotipo de verdad (logo.svg), no una letra en un cuadrado. */
.entrada .logo{width:64px;height:64px;border-radius:20px;margin:0 auto;display:block;
  box-shadow:0 10px 26px -10px rgba(11,17,24,.55)}
.entrada .mk{   /* nombre propio: .marca ya es el bloque del encabezado y lo pisaba */
font-size:22px;font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.entrada .lema{font-size:12.5px;color:var(--mut);letter-spacing:.02em;margin-top:2px}
.entrada h1{font-size:27px;line-height:1.2;margin:2px 0 0;letter-spacing:-.02em;text-wrap:balance}
.entrada .que{color:var(--mut);font-size:14px}
.entrada form{display:grid;gap:10px;text-align:left;margin-top:4px}
.entrada label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--mut)}
.entrada input{min-height:50px;font-size:16px}
.entrada .ver{position:relative}
.entrada .ver button{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:44px;
  border:0;background:transparent;color:var(--mut);font-size:12px;font-weight:600;padding:0 10px;cursor:pointer}
.entrada .err{color:var(--bad);font-size:13.5px;min-height:18px;text-align:center}
.entrada .pie{color:var(--mut);font-size:12px;margin-top:6px}
.entrada .pie b{font-weight:600;color:var(--ink)}

/* ---------- movimiento ---------- */
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes latido{50%{transform:scale(.6);opacity:.5}}
@keyframes sello{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes alarma{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
/* Pedido que entró por la carta y nadie del local miró todavía. Late hasta que se manda
   a la cocina: si nadie lo ve, el cliente está esperando una comida que no se empezó. */
.ped.web{border-color:var(--acc);animation:avisa 2s ease-in-out infinite}
@keyframes avisa{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 40%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.tag.web{background:var(--acc-s);color:var(--acc);align-self:start}
.entra{animation:entra .36s cubic-bezier(.2,.7,.2,1) both}
#view>*{animation:entra .36s cubic-bezier(.2,.7,.2,1) both}
#view>*:nth-child(2){animation-delay:.05s}#view>*:nth-child(3){animation-delay:.1s}
#view>*:nth-child(4){animation-delay:.15s}#view>*:nth-child(n+5){animation-delay:.2s}
/* dibujado por un refresco automático: nada entra de nuevo (ver comun.js) */
.quieto>*,.quieto .ped,.quieto .tk,.quieto .mesa,.quieto .kpi,.quieto .card,.quieto .pr{animation:none}

/* ---------- pulido ----------
   Respuesta al toque: en una pantalla táctil, si al apretar no pasa nada visible, la
   persona aprieta de nuevo y termina cargando el producto dos veces. */
.pr:active,.mesa:active,.item:active{transform:scale(.97)}
.pr,.mesa,.item{transition:transform .08s,border-color .15s,box-shadow .15s}
button,.pri,.cobrar{will-change:transform}

/* Renglón que entra al ticket: aparece desde arriba y se marca un instante, para que se
   vea QUÉ se agregó cuando se escanean varios seguidos. */
@keyframes suma{0%{opacity:0;transform:translateY(-6px);background:var(--acc-s)}
                60%{background:var(--acc-s)}100%{opacity:1;transform:none;background:transparent}}
.ln.nueva{animation:suma .45s cubic-bezier(.2,.8,.2,1) both}

/* El total cambia de valor, no lo reemplaza de golpe (comun.js lo anima) */
.tot .plata{transition:color .2s}
.tot .plata.sube{color:var(--ok)}

/* Esqueleto mientras carga: mejor que una pantalla en blanco que parece colgada */
.esq{background:linear-gradient(90deg,var(--lin) 25%,var(--pan2) 37%,var(--lin) 63%);
  background-size:400% 100%;border-radius:10px;animation:brilla 1.4s linear infinite}
@keyframes brilla{to{background-position:-200% 0}}
.esq-linea{height:14px;margin:9px 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  /* Sin la animación, el tilde quedaría sin dibujar: se deja ya trazado. */
  .ok svg path{stroke-dashoffset:0}.ok::after{display:none}}