/* ============================================================
   Las Delicias de ATA — Sistema POS
   Hoja de estilos única · responsive celular / tablet / PC
   ============================================================ */

:root {
  /* Marca */
  --verde-900:#14532d; --verde-800:#166534; --verde-700:#15803d;
  --verde-600:#16a34a; --verde-500:#22c55e; --verde-400:#4ade80;
  --verde-100:#dcfce7; --verde-050:#f0fdf4;
  --lima:#dde5a9;

  /* Neutros */
  --tinta:#12211a; --tinta-2:#3f5b4d; --tinta-3:#6b8578;
  --linea:#dfe7e1; --linea-2:#eef3ef;
  --fondo:#f4f7f4; --panel:#ffffff;

  /* Semánticos */
  --ok:#16a34a; --aviso:#d97706; --peligro:#dc2626; --info:#0891b2; --morado:#7c3aed;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sombra:0 1px 2px rgba(18,33,26,.06), 0 4px 14px rgba(18,33,26,.06);
  --sombra-lg:0 10px 40px rgba(18,33,26,.16);
  --barra:60px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { height:100%; }

body {
  margin:0;
  overflow-x:hidden;
  font-family:'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:15px; line-height:1.45;
  color:var(--tinta); background:var(--fondo);
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}

h1,h2,h3,h4 { margin:0 0 .5rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
h1{font-size:1.45rem} h2{font-size:1.2rem} h3{font-size:1.02rem} h4{font-size:.92rem}
p{margin:0 0 .6rem}
a{color:var(--verde-700); text-decoration:none}
a:hover{text-decoration:underline}
small,.chico{font-size:.8rem}
.silencio{color:var(--tinta-3)}
.negrita{font-weight:700}
.centro{text-align:center} .derecha{text-align:right}
.nowrap{white-space:nowrap}
.oculto{display:none !important}

/* ---------------- Encabezado ---------------- */
.tope {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:.7rem;
  height:var(--barra); padding:0 .9rem;
  background:linear-gradient(135deg,var(--verde-800),var(--verde-600));
  color:#fff; box-shadow:0 2px 14px rgba(20,83,45,.28);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--barra) + env(safe-area-inset-top));
}
.tope .marca { display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.02rem; }
.tope .marca img { width:34px; height:34px; border-radius:50%; background:#fff; object-fit:cover; }
.tope .crece { flex:1 }
.tope a, .tope a:hover { color:#fff; text-decoration:none }

.tope-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.16); color:#fff;
  border:0; border-radius:999px; padding:.45rem .8rem;
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
}
.tope-btn:hover{background:rgba(255,255,255,.28)}
.tope-btn.activo{background:#fff; color:var(--verde-800)}

.usuario-chip{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; }
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
  font-weight:800; font-size:.8rem;
}

/* ---------------- Navegación secundaria ---------------- */
.nav2 {
  position:sticky; top:calc(var(--barra) + env(safe-area-inset-top)); z-index:50;
  display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none;
  padding:.5rem .8rem; background:var(--panel); border-bottom:1px solid var(--linea);
}
.nav2::-webkit-scrollbar{display:none}
.nav2 a {
  flex:0 0 auto; padding:.45rem .85rem; border-radius:999px;
  font-size:.87rem; font-weight:600; color:var(--tinta-2);
  background:var(--linea-2); text-decoration:none; white-space:nowrap;
}
.nav2 a:hover{background:var(--verde-100); color:var(--verde-800); text-decoration:none}
.nav2 a.activo{background:var(--verde-700); color:#fff}

/* ---------------- Estructura ---------------- */
.envoltura { padding:1rem; max-width:1400px; margin:0 auto; padding-bottom:5rem; }
.envoltura.ancha { max-width:none }

.tarjeta {
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--r-lg); box-shadow:var(--sombra);
  padding:1rem; margin-bottom:1rem;
}
.tarjeta > h2, .tarjeta > h3 { margin-top:0 }
.tarjeta{min-width:0; overflow-wrap:anywhere}
.tarjeta-cab {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:-1rem -1rem 1rem; padding:.8rem 1rem;
  border-bottom:1px solid var(--linea); background:var(--linea-2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.tarjeta-cab h2,.tarjeta-cab h3{margin:0}

.fila{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.fila.entre{justify-content:space-between}
.fila.fin{justify-content:flex-end}
.rejilla{display:grid; gap:1rem}
.rejilla > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ---------------- Botones ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding:.6rem 1.05rem;
  border:1px solid transparent; border-radius:var(--r);
  background:var(--verde-700); color:#fff;
  font:inherit; font-weight:650; cursor:pointer;
  transition:filter .12s, transform .06s;
  text-decoration:none; user-select:none;
}
.btn:hover{filter:brightness(1.08); text-decoration:none; color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}

.btn.plano { background:var(--panel); color:var(--tinta); border-color:var(--linea) }
.btn.plano:hover{background:var(--linea-2); color:var(--tinta)}
.btn.suave  { background:var(--verde-100); color:var(--verde-800) }
.btn.suave:hover{color:var(--verde-900)}
.btn.peligro{ background:var(--peligro) }
.btn.aviso  { background:var(--aviso) }
.btn.info   { background:var(--info) }
.btn.oscuro { background:var(--tinta) }
.btn.chica  { min-height:34px; padding:.3rem .65rem; font-size:.82rem; border-radius:var(--r-sm) }
.btn.grande { min-height:54px; font-size:1.05rem; padding:.8rem 1.4rem }
.btn.ancho  { width:100% }
.btn.icono  { padding:.5rem; min-width:44px }

/* ---------------- Formularios ---------------- */
label.campo{display:block; margin-bottom:.75rem}
label.campo > span{
  display:block; font-size:.8rem; font-weight:650;
  color:var(--tinta-2); margin-bottom:.28rem;
}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=time],input[type=search],input[type=tel],input[type=email],
select,textarea {
  width:100%; min-height:44px; padding:.55rem .75rem;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--panel); color:var(--tinta);
  font:inherit; font-size:16px; /* evita el zoom en iOS */
}
textarea{min-height:80px; resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--verde-400); outline-offset:1px; border-color:var(--verde-500);
}
input[type=color]{ width:56px; height:44px; padding:2px; border-radius:var(--r); border:1px solid var(--linea) }
input:disabled,select:disabled{background:var(--linea-2); color:var(--tinta-3)}

.check{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; cursor:pointer}
.check input{width:20px; height:20px; min-height:0; accent-color:var(--verde-600)}
.check span{font-size:.9rem}

/* ---------------- Etiquetas de estado ---------------- */
.tag {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.02em;
  background:var(--linea-2); color:var(--tinta-2); white-space:nowrap;
}
.tag.verde  {background:#dcfce7; color:#14532d}
.tag.ambar  {background:#fef3c7; color:#92400e}
.tag.rojo   {background:#fee2e2; color:#991b1b}
.tag.azul   {background:#cffafe; color:#155e75}
.tag.morado {background:#ede9fe; color:#5b21b6}
.tag.gris   {background:#e5e7eb; color:#374151}
.punto{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------------- Tablas ---------------- */
.tabla-caja{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); border:1px solid var(--linea)}
table.tabla{width:100%; border-collapse:collapse; background:var(--panel); font-size:.9rem}
table.tabla th{
  text-align:left; padding:.6rem .75rem; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-3); background:var(--linea-2);
  border-bottom:1px solid var(--linea); white-space:nowrap; position:sticky; top:0;
}
table.tabla td{padding:.6rem .75rem; border-bottom:1px solid var(--linea-2); vertical-align:middle}
table.tabla tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:var(--verde-050)}
table.tabla td.num, table.tabla th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------------- Mapa de mesas ---------------- */
.mesas {
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
}
.mesa {
  position:relative; border:2px solid var(--linea); border-radius:var(--r-lg);
  background:var(--panel); padding:.8rem .7rem; cursor:pointer;
  text-align:center; min-height:112px;
  display:flex; flex-direction:column; justify-content:center; gap:.15rem;
  transition:transform .1s, box-shadow .15s;
}
.mesa:hover{transform:translateY(-2px); box-shadow:var(--sombra-lg)}
.mesa .n{font-size:1.15rem; font-weight:800; line-height:1.1}
.mesa .cap{font-size:.72rem; color:var(--tinta-3)}
.mesa .cuenta{font-size:.95rem; font-weight:700; margin-top:.2rem}
.mesa .tiempo{position:absolute; top:.4rem; right:.5rem; font-size:.68rem; color:var(--tinta-3)}
.mesa .badge{
  position:absolute; top:-8px; left:-8px; min-width:22px; height:22px;
  border-radius:999px; background:var(--peligro); color:#fff;
  font-size:.72rem; font-weight:800; display:grid; place-items:center; padding:0 .3rem;
}
.mesa.libre     {border-color:var(--linea); background:var(--panel)}
.mesa.ocupada   {border-color:var(--verde-500); background:var(--verde-050)}
.mesa.porcobrar {border-color:var(--aviso);  background:#fffbeb}
.mesa.reservada {border-color:var(--info);   background:#ecfeff}
.mesa.inactiva  {opacity:.45; cursor:not-allowed}

.leyenda{display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--tinta-2)}
.leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block;margin-right:.3rem;vertical-align:-2px;border:2px solid}
.l-libre{border-color:var(--linea); background:#fff}
.l-ocupada{border-color:var(--verde-500); background:var(--verde-050)}
.l-porcobrar{border-color:var(--aviso); background:#fffbeb}
.l-reservada{border-color:var(--info); background:#ecfeff}

/* ---------------- POS: catálogo + cuenta ---------------- */
/* minmax(0,…) evita que el contenido ancho desborde la pantalla del celular */
.pos{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:1rem; align-items:start}
.pos > *{min-width:0}
@media (max-width:980px){ .pos{grid-template-columns:minmax(0,1fr)} }

.cats{display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{
  flex:0 0 auto; border:1px solid var(--linea); background:var(--panel);
  border-radius:999px; padding:.5rem .95rem; font:inherit; font-size:.87rem;
  font-weight:650; cursor:pointer; color:var(--tinta-2); min-height:40px;
}
.cats button.activo{background:var(--verde-700); border-color:var(--verde-700); color:#fff}

.productos{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.prod{
  border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--panel);
  padding:.7rem; cursor:pointer; text-align:left; font:inherit; color:inherit;
  display:flex; flex-direction:column; gap:.25rem; min-height:92px;
  transition:transform .08s, border-color .12s;
}
.prod:hover{border-color:var(--verde-500); transform:translateY(-2px)}
.prod:active{transform:scale(.98)}
.prod .pn{font-weight:650; font-size:.9rem; line-height:1.25}
.prod .pp{font-weight:800; color:var(--verde-700); margin-top:auto; font-size:1rem}
.prod .pd{font-size:.74rem; color:var(--tinta-3)}
.prod.agotado{opacity:.45; cursor:not-allowed}
.prod .franja{height:4px; border-radius:99px; margin:-.7rem -.7rem .35rem; background:var(--verde-500)}

/* Cuenta lateral */
.cuenta-panel{position:sticky; top:calc(var(--barra) + 4rem)}
.lineas{max-height:46vh; overflow-y:auto; margin:0 -1rem}
.linea{
  display:grid; grid-template-columns:1fr auto; gap:.2rem .6rem;
  padding:.55rem 1rem; border-bottom:1px solid var(--linea-2);
}
.linea .ln{font-weight:600; font-size:.9rem}
.linea .lt{font-weight:700; font-variant-numeric:tabular-nums}
.linea .lm{grid-column:1/-1; display:flex; align-items:center; gap:.4rem; margin-top:.2rem}
.linea .lnota{grid-column:1/-1; font-size:.76rem; color:var(--aviso); font-style:italic}
.linea.enviado{background:var(--verde-050)}
.cant{
  display:inline-flex; align-items:center; border:1px solid var(--linea);
  border-radius:999px; overflow:hidden; background:var(--panel);
}
.cant button{
  width:32px; height:32px; border:0; background:transparent; font:inherit;
  font-size:1.1rem; font-weight:700; cursor:pointer; color:var(--verde-700);
}
.cant button:hover{background:var(--verde-100)}
.cant span{min-width:34px; text-align:center; font-weight:700; font-size:.9rem}

.totales{border-top:2px solid var(--linea); padding-top:.7rem; margin-top:.5rem}
.totales .t{display:flex; justify-content:space-between; padding:.2rem 0; font-size:.9rem}
.totales .t.grande{font-size:1.3rem; font-weight:800; border-top:1px solid var(--linea); margin-top:.4rem; padding-top:.5rem}

/* Barra flotante de la cuenta (sólo celular/tablet vertical) */
.cuenta-flotante{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:none;
  align-items:center; gap:.7rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:var(--verde-800); color:#fff;
  box-shadow:0 -4px 20px rgba(18,33,26,.28);
}
.cuenta-flotante .cf-info{flex:1; line-height:1.2}
.cuenta-flotante .cf-n{font-size:.74rem; opacity:.85}
.cuenta-flotante .cf-t{font-size:1.15rem; font-weight:800}
.cuenta-flotante .btn{min-height:42px}
@media (max-width:980px){
  .cuenta-flotante{display:flex}
  .pos{padding-bottom:4.5rem}
  .cuenta-panel{position:static}
  .lineas{max-height:none}
}

/* ---------------- KDS cocina ---------------- */
body.kds{background:#0e1a14; color:#e7f0ea}
body.kds .envoltura{max-width:none}
.kds-rejilla{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
.kds-rejilla > *{min-width:0}
/* En celular la barra de la cocina se envuelve en lugar de desbordarse */
@media (max-width:560px){
  body.kds .tope{flex-wrap:wrap; height:auto; padding:.5rem .7rem}
  body.kds .tope-btn{font-size:.78rem; padding:.35rem .6rem}
  body.kds .nav2{top:0}
}
.comanda{
  background:#16241d; border:2px solid #244033; border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden;
}
.comanda.pendiente {border-color:#f59e0b}
.comanda.preparando{border-color:#38bdf8}
.comanda.listo     {border-color:#22c55e; opacity:.85}
.comanda.vieja     {animation:latir 1.4s ease-in-out infinite}
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.comanda .cab{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .8rem; background:#1d3227; border-bottom:1px solid #244033;
}
.comanda .cab b{font-size:1.05rem}
.comanda .reloj{font-variant-numeric:tabular-nums; font-weight:800; font-size:1rem}
.comanda .reloj.tarde{color:#f87171}
.comanda ul{list-style:none; margin:0; padding:.5rem .8rem; flex:1}
.comanda li{
  display:flex; gap:.55rem; align-items:flex-start;
  padding:.45rem 0; border-bottom:1px dashed #244033; cursor:pointer;
}
.comanda li:last-child{border-bottom:0}
.comanda li .qq{
  min-width:30px; height:30px; border-radius:8px; background:#244033; color:#a7f3d0;
  display:grid; place-items:center; font-weight:800; font-size:.92rem; flex:0 0 auto;
}
.comanda li.listo{opacity:.45; text-decoration:line-through}
.comanda li .nota{display:block; font-size:.78rem; color:#fbbf24; font-style:italic}
.comanda .pie{display:flex; gap:.4rem; padding:.6rem .8rem; background:#12201a}
.comanda .pie .btn{flex:1; min-height:40px; font-size:.85rem}

/* ---------------- Consola del administrador ---------------- */
.pila{display:flex; flex-direction:column; gap:.7rem}
.aviso-pedido{
  border:2px solid var(--aviso); background:#fffbeb; border-radius:var(--r-lg);
  padding:.85rem; display:flex; gap:.8rem; align-items:flex-start; flex-wrap:wrap;
}
.aviso-pedido.nuevo{animation:entrar .4s ease}
@keyframes entrar{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.aviso-pedido .info{flex:1; min-width:200px}
.aviso-pedido ul{margin:.4rem 0 0; padding-left:1.1rem; font-size:.86rem; color:var(--tinta-2)}

/* ---------------- Indicadores ---------------- */
.kpis{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:.9rem 1rem; box-shadow:var(--sombra);
}
.kpi .et{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3); font-weight:700}
.kpi .vl{font-size:1.6rem; font-weight:800; line-height:1.15; margin-top:.2rem; font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.78rem; color:var(--tinta-3)}
.kpi.destacado{background:linear-gradient(135deg,var(--verde-800),var(--verde-600)); color:#fff; border-color:transparent}
.kpi.destacado .et,.kpi.destacado .sub{color:rgba(255,255,255,.82)}

/* ---------------- Ventanas modales ---------------- */
.velo{
  position:fixed; inset:0; z-index:200; background:rgba(10,25,18,.55);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(2px);
}
.modal{
  background:var(--panel); border-radius:var(--r-xl); box-shadow:var(--sombra-lg);
  width:100%; max-width:520px; max-height:92vh; overflow:auto;
  animation:subir .18s ease;
}
.modal.ancho{max-width:840px}
@keyframes subir{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.modal .m-cab{
  display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem;
  border-bottom:1px solid var(--linea); position:sticky; top:0; background:var(--panel); z-index:2;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal .m-cab h3{flex:1; margin:0}
.modal .m-cuerpo{padding:1.1rem}
.modal .m-pie{
  display:flex; gap:.6rem; justify-content:flex-end; padding:.9rem 1.1rem;
  border-top:1px solid var(--linea); position:sticky; bottom:0; background:var(--panel);
  flex-wrap:wrap;
}
.cerrar{
  border:0; background:var(--linea-2); border-radius:50%; width:34px; height:34px;
  font-size:1.15rem; cursor:pointer; color:var(--tinta-2); line-height:1;
}
.cerrar:hover{background:var(--linea)}

@media (max-width:600px){
  .velo{align-items:flex-end; padding:0}
  .modal{max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:94vh}
  .modal .m-pie .btn{flex:1}
}

/* ---------------- Avisos flotantes ---------------- */
#avisos{position:fixed; z-index:300; left:50%; transform:translateX(-50%); bottom:1.1rem;
        display:flex; flex-direction:column; gap:.5rem; width:min(94vw,420px)}
.aviso{
  background:var(--tinta); color:#fff; padding:.75rem 1rem; border-radius:var(--r);
  box-shadow:var(--sombra-lg); font-size:.9rem; font-weight:600;
  animation:subir .2s ease; display:flex; gap:.5rem; align-items:center;
}
.aviso.ok{background:var(--verde-700)}
.aviso.error{background:var(--peligro)}
.aviso.warn{background:var(--aviso)}

/* ---------------- Barra inferior (móvil) ---------------- */
.barra-abajo{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; background:var(--panel); border-top:1px solid var(--linea);
  padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(18,33,26,.08);
}
.barra-abajo a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.35rem; font-size:.68rem; font-weight:650; color:var(--tinta-3); text-decoration:none;
}
.barra-abajo a.activo{color:var(--verde-700)}
.barra-abajo a svg{width:22px; height:22px}
@media (max-width:768px){ .barra-abajo{display:flex} .envoltura{padding-bottom:5.5rem} }

/* ---------------- Estados vacíos y carga ---------------- */
.vacio{text-align:center; padding:2.5rem 1rem; color:var(--tinta-3)}
.vacio .em{font-size:2.4rem; display:block; margin-bottom:.4rem; opacity:.6}
.cargando{display:inline-block; width:18px; height:18px; border:2px solid var(--linea);
          border-top-color:var(--verde-600); border-radius:50%; animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.pulso{animation:pul 1.2s ease-in-out infinite}
@keyframes pul{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------------- Login ---------------- */
body.login{
  background:linear-gradient(160deg,var(--verde-900),var(--verde-700) 55%,var(--lima));
  display:flex; align-items:center; justify-content:center; padding:1.2rem; min-height:100dvh;
}
.caja-login{
  background:var(--panel); border-radius:var(--r-xl); box-shadow:var(--sombra-lg);
  width:100%; max-width:400px; padding:2rem 1.6rem; text-align:center;
}
.caja-login img.logo{width:110px; height:110px; border-radius:50%; object-fit:cover; margin-bottom:.8rem}
.caja-login h1{font-size:1.25rem; margin-bottom:.15rem}
.caja-login .sub{color:var(--tinta-3); font-size:.86rem; margin-bottom:1.3rem}
.caja-login .campo{text-align:left}
.error-caja{
  background:#fee2e2; color:#991b1b; border:1px solid #fecaca;
  padding:.6rem .8rem; border-radius:var(--r); font-size:.87rem;
  margin-bottom:.9rem; text-align:left;
}

/* ---------------- Impresión de tickets 80 mm ---------------- */
.ticket{
  width:76mm; margin:0 auto; padding:4mm 2mm;
  font-family:'Courier New', ui-monospace, monospace; font-size:12px; line-height:1.35; color:#000;
  background:#fff;
}
.ticket.grande{font-size:14px}
.ticket h2{text-align:center; font-size:15px; margin:.2rem 0}
.ticket .logo-t{display:block; max-width:44mm; margin:0 auto .3rem}
.ticket hr{border:0; border-top:1px dashed #000; margin:.35rem 0}
.ticket .fila-t{display:flex; justify-content:space-between; gap:.4rem}
.ticket table{width:100%; border-collapse:collapse; font-size:inherit}
.ticket table td{padding:1px 0; vertical-align:top}
.ticket .der{text-align:right}
.ticket .cen{text-align:center}
.ticket .gr{font-size:15px; font-weight:bold}
.ticket .nota-t{font-style:italic; padding-left:6mm}

@media print{
  @page{ size:80mm auto; margin:0 }
  body{background:#fff !important; margin:0}
  .no-print, .tope, .nav2, .barra-abajo, #avisos{display:none !important}
  .ticket{width:auto; max-width:76mm; padding:2mm}
  .envoltura{padding:0; max-width:none}
}

/* ---------------- Utilidades ---------------- */
.sep{height:1px; background:var(--linea); margin:1rem 0; border:0}
.mb0{margin-bottom:0} .mt1{margin-top:1rem} .mb1{margin-bottom:1rem}
.pill-cuenta{
  background:var(--verde-700); color:#fff; border-radius:999px;
  padding:.15rem .5rem; font-size:.72rem; font-weight:800;
}
.buscador{position:relative}
.buscador input{padding-left:2.2rem}
.buscador::before{
  content:'🔍'; position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  font-size:.9rem; opacity:.5; pointer-events:none;
}

@media (min-width:1600px){ body{font-size:16px} }
@media (max-width:400px){
  .envoltura{padding:.7rem}
  .mesas{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .productos{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}