/* Llama. Una sola hoja para las cinco pantallas: la mesa, la barra, el panel
   del restaurante, la zona del distribuidor y la central.

   El acento es el verde del producto; el resto es identico a las otras tres
   plataformas, que es la regla de la casa: un acento por producto y todo lo
   demas igual. */

:root{
  --fondo:#f4f5f7; --tarjeta:#fff; --texto:#16181d; --suave:#5c6270;
  --borde:#dcdfe5; --acento:#2C6E49; --acento-txt:#fff; --acento-tinte:#E8F2EC;
  --aviso:#8a5300; --aviso-fondo:#fff6e5; --aviso-borde:#f0d9a8;
  --malo:#a11c1c; --malo-fondo:#fdeded;
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#111318; --tarjeta:#1a1d24; --texto:#e8eaee; --suave:#9aa1ae;
    --borde:#2c313b; --acento:#63C79A; --acento-txt:#0d1017; --acento-tinte:#14261D;
    --aviso:#f0c477; --aviso-fondo:#2a2214; --aviso-borde:#4a3c1e;
    --malo:#f4a6a6; --malo-fondo:#2b1616;
  }
}

*{box-sizing:border-box}
body{
  margin:0; padding:1.2rem 1rem 3rem;
  background:var(--fondo); color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.caja{max-width:820px;margin:0 auto}
.ancha{max-width:1100px}
a{color:var(--acento)}
h1{font-size:1.5rem;margin:0 0 .2rem}
h2{font-size:1.1rem;margin:1.8rem 0 .6rem}
.sub{color:var(--suave);margin:0 0 1.2rem;font-size:.95rem}
.simbolo{width:2rem;height:2rem;color:var(--acento);vertical-align:-.45rem}

/* Foco visible SIEMPRE: media pantalla de estas se maneja con el dedo, pero
   el panel se maneja con teclado desde el TPV. */
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

.tarjeta{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;
  padding:1rem 1.1rem;margin-bottom:1rem;
}
.nota{
  background:var(--aviso-fondo);border:1px solid var(--aviso-borde);
  color:var(--aviso);border-radius:10px;padding:.7rem .9rem;margin:1rem 0;
  font-size:.92rem;
}
.error{
  background:var(--malo-fondo);border:1px solid var(--malo);color:var(--malo);
  border-radius:10px;padding:.7rem .9rem;margin:1rem 0;font-size:.95rem;
}
.bien{
  background:var(--acento-tinte);border:1px solid var(--acento);
  color:var(--texto);border-radius:10px;padding:.7rem .9rem;margin:1rem 0;
}

label{display:block;font-size:.9rem;color:var(--suave);margin:.7rem 0 .2rem}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{
  width:100%;padding:.6rem .7rem;font-size:1rem;color:var(--texto);
  background:var(--fondo);border:1px solid var(--borde);border-radius:8px;
}
button,.boton{
  display:inline-block;padding:.6rem 1rem;font-size:1rem;font-weight:600;
  background:var(--acento);color:var(--acento-txt);border:0;border-radius:9px;
  cursor:pointer;text-decoration:none;
}
button.flojo,.boton.flojo{
  background:transparent;color:var(--texto);border:1px solid var(--borde);
  font-weight:500;
}
button:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.5rem .4rem;border-bottom:1px solid var(--borde)}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}
code{font:0.9em ui-monospace,Consolas,monospace;background:rgba(127,127,127,.16);
  padding:.12em .42em;border-radius:5px}

/* ------------------------------------------------------------------ *
 * La pagina de la mesa: tres botones y nada mas.
 * Se usa de pie, con una mano, con la pantalla sucia y a veces con sol
 * de cara: por eso los botones son enormes y el texto grande.
 * ------------------------------------------------------------------ */
.mesa{max-width:520px;margin:0 auto;text-align:center}
.mesa .quien{font-size:1.1rem;color:var(--suave);margin:.2rem 0 .1rem}
.mesa .cual{font-size:2rem;font-weight:700;margin:0 0 1.4rem}
.grande{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;min-height:5.2rem;margin-bottom:.9rem;font-size:1.35rem;
  border-radius:16px;
}
.grande.otro{background:var(--tarjeta);color:var(--texto);border:2px solid var(--borde)}
.grande.carta{background:var(--acento-tinte);color:var(--texto);border:2px solid var(--acento)}
.hecho{
  font-size:1.15rem;background:var(--acento-tinte);border:2px solid var(--acento);
  border-radius:16px;padding:1.2rem 1rem;margin-bottom:.9rem;
}

/* ------------------------------------------------------------------ *
 * La pantalla de la barra. Se mira de lejos.
 * ------------------------------------------------------------------ */
.barra{max-width:1100px;margin:0 auto}
.avisos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.aviso{
  background:var(--tarjeta);border:2px solid var(--acento);border-radius:14px;
  padding:1rem;display:flex;flex-direction:column;gap:.5rem;
}
.aviso .m{font-size:1.9rem;font-weight:700;line-height:1.1}
.aviso .q{font-size:1.1rem}
.aviso .c{color:var(--suave);font-size:.9rem}
.aviso.vieja{border-color:var(--aviso);background:var(--aviso-fondo)}
.tranquilo{color:var(--suave);text-align:center;padding:3rem 1rem;font-size:1.1rem}
.franja{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin-bottom:1rem;
}
.franja .crece{flex:1}