/* 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;
  /* Las dos formas de pago: un color cada una, con texto blanco por encima
     de 4.5:1 de contraste. */
  --pago-tarjeta:#1F5FAD; --pago-tarjeta-txt:#fff;
  --pago-efectivo:#8A5200; --pago-efectivo-txt:#fff;
  --parar:#a11c1c; --parar-txt:#fff;
}
/* Oscuro: el del telefono, salvo que se haya elegido claro con el boton;
   o el elegido con el boton aunque el telefono este en claro. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --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;
    --pago-tarjeta:#8CB8F2; --pago-tarjeta-txt:#0d1017;
    --pago-efectivo:#F2B866; --pago-efectivo-txt:#0d1017;
    --parar:#f4a6a6; --parar-txt:#0d1017;
  }
}
:root[data-tema="oscuro"]{
    --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;
    --pago-tarjeta:#8CB8F2; --pago-tarjeta-txt:#0d1017;
    --pago-efectivo:#F2B866; --pago-efectivo-txt:#0d1017;
    --parar:#f4a6a6; --parar-txt:#0d1017;
  }

*{box-sizing:border-box}
/* `hidden` tiene que ganar SIEMPRE. Sin esto, la regla de los botones
   (display:inline-block) le quita el efecto y el boton se sigue viendo: paso
   con «Silenciar todo» y con «Activar sonido» en la barra. */
[hidden]{display:none !important}
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;
}
/* Las horas del horario: dos por turno en la misma linea, no a lo ancho. */
input[type=time]{
  padding:.45rem .5rem;font-size:1rem;color:var(--texto);
  background:var(--fondo);border:1px solid var(--borde);border-radius:8px;
}
#horario td{white-space:nowrap}
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;overflow-wrap:anywhere;word-break:break-all}
/* overflow-wrap:anywhere: las claves secretas de las direcciones son 32
   caracteres sin espacios ni guiones y, sin esto, empujaban la tarjeta fuera
   de la pantalla del movil. break-all, para los navegadores viejos. */

/* ------------------------------------------------------------------ *
 * 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}
/* La firma del pie: la pagina es del restaurante, lo nuestro va pequeño y
   en gris. Se quita en el panel (Restaurante.mostrar_firma). */
.firma{display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:2.5rem 0 .2rem;color:var(--suave)}
.firma .simbolo{width:20px;height:20px}
.marca-nombre{font-weight:700}
.firma .marca-nombre{font-size:.85rem}
.firma-casa{margin:0;font-size:.8rem;text-align:center}
.firma-casa a{color:var(--suave)}
.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)}
/* El QR para vincular moviles, en la barra. Fondo blanco siempre: en modo
   oscuro un QR sobre gris oscuro no lo lee ninguna camara. */
.qr-movil{max-width:220px;margin:.5rem 0;background:#fff;padding:.4rem;border-radius:8px}
.qr-movil svg{width:100%;height:auto;display:block}

/* El selector de cuanto suena cada aviso, en la cabecera de la barra. */
label.duracion{display:flex;align-items:center;gap:.4rem;margin:0;white-space:nowrap}
label.duracion select{width:auto}

/* El interruptor del servicio: verde en marcha, ambar parado. */
.servicio.en-marcha{border-left:6px solid var(--acento)}
.servicio.parado{border-left:6px solid var(--aviso);background:var(--aviso-fondo)}
.servicio .franja{margin:0}
.servicio .estado-servicio{flex:0 1 15rem}
.servicio .nota{margin:0;font-size:.85rem}
button.parar{background:var(--parar);color:var(--parar-txt)}

/* «Anular», justo debajo de la confirmacion, discreto pero grande de dedo. */
button.anular{width:100%;min-height:3.2rem;margin:-.3rem 0 .9rem;border-radius:12px}

/* En el movil las tablas pasan a TARJETAS: una tabla de cinco columnas en
   375 px se salia por la derecha y desplazaba la pagina entera («se ve
   descentrada»). Cada celda ensena su etiqueta delante. */
@media (max-width:640px){
  table.lista, table.lista tbody, table.lista tr, table.lista td{display:block;width:100%}
  table.lista tr:first-child{display:none}           /* la fila de titulos */
  table.lista tr{background:var(--tarjeta);border:1px solid var(--borde);
    border-radius:10px;padding:.4rem .7rem;margin-bottom:.6rem}
  table.lista td{border:0;padding:.25rem 0;overflow-wrap:anywhere}
  table.lista td::before{content:attr(data-etiqueta);display:block;
    font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}
  table.lista td[data-etiqueta="Acciones"]::before{content:none}
  table.lista td form{display:inline-block;margin:.2rem .2rem 0 0}
}

/* Las mesas del panel: una linea por mesa. En movil se parte en dos. */
.mesas{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.fila-mesa{
  display:grid;grid-template-columns:minmax(8rem,1fr) 7.5rem 8rem auto;
  gap:.5rem;align-items:center;background:var(--tarjeta);
  border:1px solid var(--borde);border-radius:10px;padding:.35rem .5rem;
}
.fila-mesa input,.fila-mesa select{padding:.4rem .5rem}
.fila-mesa.apagada{opacity:.65}
.fila-mesa .acciones{display:flex;gap:.35rem;justify-content:flex-end}
.fila-mesa .acciones button,.fila-mesa .acciones .boton{padding:.4rem .7rem;font-size:.9rem}
.estado-carta{font-size:.88rem;white-space:nowrap}
@media (max-width:640px){
  .fila-mesa{grid-template-columns:1fr 7rem}
  .fila-mesa .estado-carta{grid-column:1}
  .fila-mesa .acciones{grid-column:1 / -1}
}

/* La cuenta: un solo boton partido en dos. */
.cuenta{
  border:2px solid var(--borde);border-radius:16px;overflow:hidden;
  margin-bottom:.9rem;background:var(--tarjeta);
}
.cuenta-titulo{margin:0;padding:.7rem 1rem .5rem;font-size:1.35rem;font-weight:700}
.cuenta-mitades{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 .6rem .7rem}
.cuenta-mitades form{margin:0}
/* Forma de boton de verdad: separados, redondeados y con un canto oscuro
   debajo que les da volumen; al pulsar se hunden. Asi no parecen dos
   franjas de color de una misma tarjeta. */
.mitad{
  width:100%;min-height:4.2rem;font-size:1.3rem;border-radius:12px;
  box-shadow:0 4px 0 rgba(0,0,0,.28);transition:transform .05s,box-shadow .05s;
}
.mitad:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
/* pago-* y no tarjeta/efectivo a secas: .tarjeta y --tarjeta ya son las
   cajas del panel, y pisarlos las pintaba todas de azul. */
.mitad.pago-tarjeta{background:var(--pago-tarjeta);color:var(--pago-tarjeta-txt)}
.mitad.pago-efectivo{background:var(--pago-efectivo);color:var(--pago-efectivo-txt)}
.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}

/* Los formularios de alta en el movil: un campo por linea en vez de
   apretados. AL FINAL de la hoja a proposito: «.franja .crece{flex:1}» pesa
   lo mismo y, puesta antes, le ganaba. */
@media (max-width:640px){
  .franja > .crece{flex:1 1 100%}
}

/* El boton de claro/oscuro, en la esquina de todas las pantallas. */
button.tema{
  position:fixed;top:.6rem;right:.6rem;z-index:10;width:2.4rem;height:2.4rem;
  padding:0;border-radius:50%;font-size:1.1rem;line-height:1;
  background:var(--tarjeta);color:var(--texto);border:1px solid var(--borde);
}