:root {
  --fondo: #f2f4f7;
  --panel: #ffffff;
  --borde: #dde2ea;
  --texto: #16202e;
  --suave: #66748a;
  --primario: #1f5fd6;
  --primario-osc: #17479f;
  --ok: #148f4b;
  --alerta: #e07b00;
  --peligro: #cc2b2b;
  --morado: #6b41c9;
  --sombra: 0 1px 2px rgba(16,32,56,.08), 0 4px 12px rgba(16,32,56,.06);
  --r: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.4;
  overscroll-behavior-y: contain;
}
h1, h2, h3, h4 { margin: 0 0 .4rem; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Estructura ---------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  background: var(--primario); color: #fff;
  box-shadow: var(--sombra);
}
.barra h1 { font-size: 1.05rem; margin: 0; font-weight: 650; }
.barra .crece { flex: 1; }
.barra button {
  background: rgba(255,255,255,.16); border: 0; color: #fff;
  padding: .45rem .7rem; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.barra button:hover { background: rgba(255,255,255,.28); }

.contenido { padding: .9rem; max-width: 1500px; margin: 0 auto; }

.pestanas {
  display: flex; gap: .25rem; overflow-x: auto; padding: .5rem .9rem 0;
  background: var(--primario-osc);
  position: sticky; top: 0; z-index: 39;
}
.pestanas button {
  background: transparent; border: 0; color: #c9d8f5; cursor: pointer;
  padding: .55rem .9rem; border-radius: 10px 10px 0 0; font-weight: 600; white-space: nowrap;
}
.pestanas button.activa { background: var(--fondo); color: var(--texto); }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: .9rem; box-shadow: var(--sombra); margin-bottom: .9rem;
}
.fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.crece { flex: 1; }
.suave { color: var(--suave); font-size: .86rem; }
.centro { text-align: center; }
.der { text-align: right; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  padding: .65rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 600;
  min-height: 44px; transition: filter .12s, transform .06s;
}
.btn:active { transform: scale(.985); }
.btn:hover { filter: brightness(.97); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.alerta { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.morado { background: var(--morado); border-color: var(--morado); color: #fff; }
.btn.grande { font-size: 1.1rem; padding: .9rem 1.2rem; min-height: 56px; }
.btn.bloque { width: 100%; }
.btn.chico { min-height: 34px; padding: .3rem .6rem; font-size: .85rem; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=number], input[type=password], input[type=date], select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--borde);
  border-radius: 10px; background: #fff; min-height: 44px;
}
textarea { min-height: 76px; resize: vertical; }
label.campo { display: block; margin-bottom: .6rem; }
label.campo > span { display: block; font-size: .82rem; color: var(--suave); margin-bottom: .2rem; font-weight: 600; }

/* ---------- Mesas ---------- */
.rejilla-mesas {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.mesa {
  border: 2px solid var(--borde); border-radius: var(--r); background: var(--panel);
  padding: .7rem; cursor: pointer; text-align: left; min-height: 108px;
  display: flex; flex-direction: column; gap: .2rem; position: relative; box-shadow: var(--sombra);
}
.mesa .nom { font-weight: 800; font-size: 1.05rem; }
.mesa .et { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mesa .info { font-size: .8rem; color: var(--suave); margin-top: auto; }
.mesa .pill {
  position: absolute; top: .5rem; right: .5rem; font-size: .7rem; font-weight: 800;
  background: rgba(0,0,0,.08); border-radius: 999px; padding: .1rem .45rem;
}

.e-libre     { border-color: #d7dde6; background: #fbfcfe; }
.e-libre .et { color: var(--suave); }
.e-atendiendo{ border-color: #1f5fd6; background: #eaf1fe; }
.e-atendiendo .et { color: #1f5fd6; }
.e-enviada   { border-color: #e07b00; background: #fff4e2; }
.e-enviada .et { color: #b45f00; }
.e-en_cocina { border-color: #6b41c9; background: #f2ecff; }
.e-en_cocina .et { color: #5a34ad; }
.e-lista     { border-color: #148f4b; background: #e4f8ec; }
.e-lista .et { color: #0d7a3e; }
.e-servida   { border-color: #0e9aa7; background: #e5f7f9; }
.e-servida .et { color: #0b7e89; }
.e-por_pagar { border-color: #cc2b2b; background: #ffeaea; }
.e-por_pagar .et { color: #b32020; }

@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 rgba(224,123,0,.55); } 50% { box-shadow: 0 0 0 8px rgba(224,123,0,0); } }
.late { animation: latido 1.4s infinite; }
@keyframes latidoVerde { 0%,100% { box-shadow: 0 0 0 0 rgba(20,143,75,.55); } 50% { box-shadow: 0 0 0 8px rgba(20,143,75,0); } }
.late-verde { animation: latidoVerde 1.4s infinite; }

/* ---------- Pasos de atencion ---------- */
.pasos { display: flex; gap: .35rem; flex-wrap: wrap; }
.paso {
  flex: 1; min-width: 74px; border: 1px solid var(--borde); background: #fff; border-radius: 10px;
  padding: .45rem .3rem; text-align: center; font-size: .75rem; font-weight: 700; cursor: pointer; color: var(--suave);
}
.paso.hecho { background: #e4f8ec; border-color: #9fd9b6; color: #0d7a3e; }
.paso.actual { background: var(--primario); border-color: var(--primario); color: #fff; }
.paso .n { display: block; font-size: 1rem; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  border-bottom: 1px solid var(--borde); padding: .55rem 0;
  display: flex; gap: .6rem; align-items: flex-start;
}
.lista li:last-child { border-bottom: 0; }

.etiqueta {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 999px; background: #eef1f6; color: var(--suave);
}
.etiqueta.naranja { background: #fff0d9; color: #b45f00; }
.etiqueta.morada { background: #f0e8ff; color: #5a34ad; }
.etiqueta.verde { background: #e0f6e9; color: #0d7a3e; }
.etiqueta.azul { background: #e7effd; color: #17479f; }
.etiqueta.roja { background: #ffe4e4; color: #b32020; }

.obs {
  background: #fff7e0; border-left: 4px solid var(--alerta); padding: .35rem .5rem;
  border-radius: 6px; font-weight: 700; font-size: .88rem; margin-top: .25rem;
}

/* ---------- Modal / hoja inferior ---------- */
.velo {
  position: fixed; inset: 0; background: rgba(12,20,32,.55); z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
}
.hoja {
  background: var(--panel); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 1rem; padding-bottom: 1.4rem;
}
@media (min-width: 700px) {
  .velo { align-items: center; }
  .hoja { border-radius: 16px; max-height: 88vh; }
}
.hoja h2 { font-size: 1.2rem; }
.cerrar { position: sticky; top: 0; float: right; background: #eef1f6; border: 0; border-radius: 999px;
  width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; color: var(--suave); }

/* ---------- Aviso flotante ---------- */
#avisos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: .6rem; display: grid; gap: .5rem; pointer-events: none; }
.aviso {
  pointer-events: auto; background: #16202e; color: #fff; padding: .8rem 1rem; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); display: flex; gap: .6rem; align-items: center; font-weight: 600;
  animation: subir .2s ease-out;
}
.aviso.ok { background: var(--ok); }
.aviso.error { background: var(--peligro); }
.aviso.alerta { background: var(--alerta); }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Carrito ---------- */
.barra-inferior {
  position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--borde);
  padding: .7rem .9rem; box-shadow: 0 -4px 14px rgba(16,32,56,.09); z-index: 30;
}

.chip {
  border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: .35rem .7rem;
  font-size: .85rem; cursor: pointer; font-weight: 600;
}
.chip.on { background: var(--primario); border-color: var(--primario); color: #fff; }
.chip.no { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

.opciones { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .8rem; }
.op {
  border: 2px solid var(--borde); background: #fff; border-radius: 10px; padding: .55rem .8rem;
  cursor: pointer; font-weight: 650; min-height: 46px;
}
.op.on { border-color: var(--primario); background: #eaf1fe; color: var(--primario-osc); }
.op.agotado { opacity: .38; text-decoration: line-through; cursor: not-allowed; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.tabla th { color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

.vacio { text-align: center; color: var(--suave); padding: 2rem 1rem; }
.pin-punto { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.pin-punto.on { background: #fff; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 300px; margin: 0 auto; }
.teclado button {
  min-height: 62px; font-size: 1.35rem; font-weight: 700; border-radius: 12px;
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
}
.teclado button:active { background: #eaf1fe; }

.desconectado { background: var(--peligro) !important; }