/* =====================================================================
   ORTIZ BURGERS - MOBILE POS
   styles.css : negro / dorado / crema. Disenado para el pulgar.
   ===================================================================== */

:root{
  --ink:#0B0B0B;
  --panel:#161616;
  --panel-2:#212121;
  --line:#2E2E2E;
  --gold:#F5C518;
  --gold-deep:#C79A00;
  --cream:#F2EFE7;
  --muted:#8C8A85;
  --ok:#2EAF6B;
  --bad:#E2503F;

  --display:'Arial Black','Arial Bold',Arial,Helvetica,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --r:14px;
  --bar:88px;              /* alto de la barra de cuenta */
  --safe:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

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

html,body{margin:0;padding:0;height:100%}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.4;
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}

#app{max-width:560px;margin:0 auto;min-height:100%;position:relative}

/* ---------------------------------------------------------- cabecera */
.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  padding:calc(14px + var(--safe-top)) 16px 14px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.top h1{
  font-family:var(--display);
  font-size:19px;letter-spacing:-.4px;text-transform:uppercase;
  margin:0;color:var(--cream);flex:1;
}
.top .sub{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.3px}

.btn-back{
  width:40px;height:40px;flex:0 0 40px;
  border:1px solid var(--line);background:var(--panel);color:var(--cream);
  border-radius:12px;font-size:20px;line-height:1;cursor:pointer;
}
.btn-back:active{background:var(--panel-2)}

/* ------------------------------------------------------------ marca */
.marca{
  text-align:center;
  padding:calc(30px + var(--safe-top)) 16px 26px;
}
.marca .logo{
  font-family:var(--display);
  font-size:clamp(34px,10vw,46px);
  letter-spacing:-1.5px;text-transform:uppercase;
  color:var(--gold);margin:0;line-height:.95;
}
.marca .barra{height:5px;background:var(--gold);width:86px;margin:14px auto 12px;border-radius:3px}
.marca .lema{font-size:11px;color:var(--muted);letter-spacing:2.4px;text-transform:uppercase;margin:0}

/* ------------------------------------------------------------ zonas */
.pad{padding:0 16px}
.scroll{padding-bottom:calc(var(--bar) + var(--safe) + 24px)}

.rotulo{
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:22px 0 10px;
}

/* --------------------------------------------------------- botonera */
.acciones{display:grid;gap:12px}

.accion{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:20px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--cream);font-family:var(--display);font-size:17px;
  text-transform:uppercase;letter-spacing:-.2px;text-align:left;cursor:pointer;
}
.accion .ico{font-size:24px;line-height:1}
.accion:active{background:var(--panel-2);transform:scale(.99)}
.accion.principal{
  background:var(--gold);border-color:var(--gold);color:#0B0B0B;
  font-size:20px;padding:24px 18px;
}
.accion.principal:active{background:var(--gold-deep)}

/* ------------------------------------------------------- categorias */
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.cat{
  width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:20px 16px;min-height:104px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--cream);cursor:pointer;text-align:left;
}
.cat:active{background:var(--panel-2);border-color:var(--gold-deep)}
.cat .ico{font-size:28px;line-height:1}
.cat .nom{font-family:var(--display);font-size:14px;text-transform:uppercase;letter-spacing:-.2px}
.cat .cuenta{font-size:11px;color:var(--muted);font-weight:600}

/* --------------------------------------------------------- producto */
.prod{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:16px;margin-bottom:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--cream);cursor:pointer;text-align:left;
}
.prod:active{background:var(--panel-2)}
.prod .info{flex:1;min-width:0}
.prod .nom{font-weight:700;font-size:16px;display:block}
.prod .det{font-size:12px;color:var(--muted);margin-top:2px;display:block}
.prod .precio{
  font-family:var(--display);font-size:18px;color:var(--gold);
  white-space:nowrap;letter-spacing:-.5px;
}
.prod .flecha{color:var(--muted);font-size:18px}

/* ---------------------------------------------------- hoja inferior */
.velo{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.72);
  display:flex;align-items:flex-end;justify-content:center;
  animation:aparecer .16s ease-out;
}
.hoja{
  width:100%;max-width:560px;
  background:var(--panel);
  border-top:3px solid var(--gold);
  border-radius:20px 20px 0 0;
  padding:22px 16px calc(22px + var(--safe));
  max-height:86vh;overflow-y:auto;
  animation:subir .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes subir{from{transform:translateY(20%)}to{transform:translateY(0)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}

.hoja h2{
  font-family:var(--display);font-size:19px;text-transform:uppercase;
  margin:0 0 4px;letter-spacing:-.3px;
}
.hoja .paso{font-size:11px;color:var(--gold);letter-spacing:1.6px;text-transform:uppercase;font-weight:700;margin-bottom:14px}

.opciones{display:grid;gap:10px}
.opcion{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 16px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);font-size:16px;font-weight:700;cursor:pointer;text-align:left;
}
.opcion:active{border-color:var(--gold);background:#2a2a2a}
.opcion .precio{font-family:var(--display);color:var(--gold);font-size:17px;letter-spacing:-.4px}
.opcion.sel{border-color:var(--gold);background:#2a2a2a}

/* ---------------------------------------------------------- carrito */
.linea{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.linea .info{flex:1;min-width:0}
.linea .nom{font-weight:700;font-size:15px}
.linea .det{font-size:12px;color:var(--muted);margin-top:2px}
.linea .imp{font-family:var(--display);font-size:16px;color:var(--cream);letter-spacing:-.4px;min-width:74px;text-align:right}

.paso-cant{display:flex;align-items:center;gap:6px}
.paso-cant button{
  width:38px;height:38px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--cream);font-size:20px;line-height:1;cursor:pointer;
}
.paso-cant button:active{background:var(--gold);color:#0B0B0B;border-color:var(--gold)}
.paso-cant .n{min-width:26px;text-align:center;font-weight:800;font-size:16px}

.totales{margin-top:18px;padding-top:16px;border-top:2px solid var(--line)}
.fila-total{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0}
.fila-total .et{color:var(--muted);font-size:13px;letter-spacing:.6px;text-transform:uppercase;font-weight:700}
.fila-total .vl{font-weight:700}
.fila-total.grande .et{color:var(--cream);font-size:15px}
.fila-total.grande .vl{font-family:var(--display);font-size:30px;color:var(--gold);letter-spacing:-1px}

/* ------------------------------------- barra de cuenta (la firma) */
.cuenta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:12px 16px calc(12px + var(--safe));
  background:linear-gradient(to top,var(--ink) 74%,rgba(11,11,11,0));
  display:flex;justify-content:center;pointer-events:none;
}
.cuenta .caja{
  width:100%;max-width:528px;
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:var(--gold);color:#0B0B0B;
  border:none;border-radius:16px;cursor:pointer;pointer-events:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.cuenta .caja:active{background:var(--gold-deep)}
.cuenta .n{
  background:#0B0B0B;color:var(--gold);
  min-width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
}
.cuenta .et{flex:1;text-align:left;font-family:var(--display);font-size:15px;text-transform:uppercase;letter-spacing:-.2px}
.cuenta .tot{font-family:var(--display);font-size:23px;letter-spacing:-1px}
.cuenta.pulso .caja{animation:pulso .32s ease-out}
@keyframes pulso{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}

/* ------------------------------------------------------- resumen */
.tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tarjeta{
  width:100%;
  padding:18px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
}
.tarjeta .et{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:700}
.tarjeta .vl{font-family:var(--display);font-size:26px;color:var(--cream);letter-spacing:-1px;margin-top:6px}
.tarjeta.oro .vl{color:var(--gold)}

/* ------------------------------------------------------- recientes */
.pedido{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 16px;margin-bottom:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);cursor:pointer;text-align:left;
}
.pedido:active{background:var(--panel-2)}
.pedido .folio{font-weight:800;font-size:14px;flex:1}
.pedido .hora{font-size:12px;color:var(--muted)}
.pedido .imp{font-family:var(--display);font-size:17px;color:var(--gold);letter-spacing:-.4px}
.pedido.cancelado{opacity:.5}
.pedido.cancelado .imp{color:var(--muted);text-decoration:line-through}

.etiqueta{
  display:inline-block;padding:3px 8px;border-radius:6px;
  font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
}
.etiqueta.ok{background:rgba(46,175,107,.16);color:var(--ok)}
.etiqueta.no{background:rgba(226,80,63,.16);color:var(--bad)}

/* ----------------------------------------------------------- varios */
.vacio{text-align:center;padding:56px 24px;color:var(--muted)}
.vacio .ico{font-size:44px;margin-bottom:12px}
.vacio p{margin:0 0 4px;font-size:15px}

.aviso{
  padding:12px 14px;border-radius:12px;font-size:13px;
  background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.3);color:var(--gold);
  margin-bottom:14px;
}
.aviso.error{background:rgba(226,80,63,.1);border-color:rgba(226,80,63,.35);color:#FF8A7A}

.campo{
  width:100%;padding:16px;margin-bottom:12px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);font-size:16px;font-family:var(--body);
}
.campo:focus{outline:none;border-color:var(--gold)}

.enlace{
  background:none;border:none;color:var(--muted);
  font-size:13px;text-decoration:underline;cursor:pointer;padding:12px;
}

.toast{
  position:fixed;left:50%;bottom:calc(var(--bar) + 24px + var(--safe));
  transform:translateX(-50%);z-index:80;
  background:var(--panel-2);border:1px solid var(--line);
  padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.5);animation:aparecer .16s;
  max-width:90%;text-align:center;
}
.toast.mal{border-color:var(--bad);color:#FF8A7A}

.exito{text-align:center;padding:calc(40px + var(--safe-top)) 20px 44px}
.exito .marca-ok{font-size:62px;margin-bottom:10px}
.exito h2{font-family:var(--display);font-size:23px;text-transform:uppercase;margin:0 0 22px;letter-spacing:-.4px}
.exito .folio{
  font-family:var(--display);font-size:27px;color:var(--gold);
  letter-spacing:-.6px;margin:0 0 6px;
}
.exito .et{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
.exito .monto{font-family:var(--display);font-size:44px;letter-spacing:-2px;margin:4px 0 30px}

*:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}