/* =====================================================================
   Tai Soluciones · sistema visual
   ---------------------------------------------------------------------
   Basado en como lo hacen los sistemas que llevan anos funcionando
   (Toast, Square, TouchBistro, Lightspeed) y en las guias de Apple.

   DECISIONES CLAVE Y POR QUE:
     · FONDO CLARO en cocina y barra. El modo oscuro es de apps de movil:
       en una cocina con luz y reflejos, el fondo blanco se lee mejor.
     · Solo DOS colores de acento (azul para actuar, verde para confirmar).
       El rojo SOLO para lo destructivo. El resto, escala de grises.
     · Separadores de medio pixel, no bordes gruesos.
     · Todo el espaciado en multiplos de 8.
     · Cuatro tramos de tiempo: verde, amarillo, naranja, rojo.
     · Numeros tabulares en precios y cantidades, o bailan al cambiar.
     · Botones tactiles de 48 px minimo (las guias de Apple piden 44).
     · Nada de seleccionar texto ni de resaltado al pulsar.
   ===================================================================== */

:root {
  /* ---- Superficies ---- */
  --blanco:      #ffffff;
  --fondo:       #f4f5f7;   /* gris muy claro */
  --fondo-2:     #e9ebef;
  --panel:       #ffffff;
  --punteado:    #d7dae0;

  /* ---- Texto: escala de grises, con contraste suficiente ----
     El terciario estaba en #7b828b y daba 3.56:1 sobre el fondo: por debajo del
     4.5 que hace falta. Son las HORAS de espera, los avisos y las etiquetas: un
     camarero con luz de mediodia no los lee. Oscurecido lo justo (sigue siendo
     un gris claro, no compite con el texto principal). */
  --texto:       #16191d;   /* principal */
  --texto-2:     #4b5158;   /* secundario */
  --texto-3:     #656b73;   /* terciario: etiquetas, horas */

  /* ---- Separadores de medio pixel ---- */
  --linea:       rgba(22, 25, 29, 0.12);
  --linea-fuerte: rgba(22, 25, 29, 0.22);

  /* ---- DOS acentos. Nada mas. ---- */
  --azul:        #0b6bcb;   /* la accion principal */
  --azul-claro:  #e7f0fb;
  --verde:       #117e44;   /* confirmar, listo, ok */
  --verde-claro: #e4f5ec;

  /* ---- Semanticos: solo estado ----
     OJO CON LOS GRISES Y ESTOS COLORES: los de antes (#7b828b para el texto
     terciario, y un verde y un ambar mas claros) NO llegaban al 4.5:1 que hace
     falta para leerse. El texto terciario estaba en 3.56:1 y el ambar en 3.58:1.
     Y eso no es un tecnicismo: es un camarero con el sol de mediodia entrando
     por el escaparate, o un cocinero con la campana encendida, que no leen las
     horas ni los avisos. Se han oscurecido lo justo para pasar, sin cambiar de
     color: siguen siendo el mismo verde y el mismo ambar. */
  --ambar:       #a06000;
  --ambar-claro: #fdf1dc;
  --rojo:        #c0392b;   /* SOLO destructivo o critico */
  --rojo-claro:  #fdecea;
  --naranja:     #b34a05;

  /* ---- Los cuatro tramos de tiempo de la cocina ----
     Cada uno lleva su color fuerte (la franja de arriba), su fondo claro y su
     texto oscuro. Estan calculados, no elegidos a ojo: ver el porque en la
     regla de `.tarjeta .cab`. */
  --tramo-1: #1c924d;  --tramo-1-fondo: #ebf5ef;  --tramo-1-texto: #0b3a1f;
  --tramo-2: #947100;  --tramo-2-fondo: #f5f2e8;  --tramo-2-texto: #3b2d00;
  --tramo-3: #b34a05;  --tramo-3-fondo: #f8efe8;  --tramo-3-texto: #481e02;
  --tramo-4: #b31f19;  --tramo-4-fondo: #f8ebea;  --tramo-4-texto: #480c0a;

  /* ---- Radios ---- */
  --r-s: 8px;
  --r-m: 12px;
  --r-g: 16px;

  /* ---- Sombras en dos capas: se nota la profundidad ---- */
  --sombra-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --sombra-2: 0 2px 4px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.10);
  /* ---- Escala fluida ----
     No se disena para una resolucion concreta: la letra y el aire se adaptan
     al ALTO real de la ventana. En una tablet de 1024x600 con barras del
     navegador quedan ~450 px utiles; en un monitor de 1080 sobran. El minimo
     de 16 px es deliberado: mas pequeño deja de leerse bien. */
  --cabecera-alto: clamp(44px, 7.5vh, 60px);
  --esp-y: clamp(6px, 1.2vh, 12px);
  --esp-x: clamp(10px, 1.4vw, 20px);
  --esp-seccion: clamp(12px, 2.4vh, 28px);
  --radio-tactil: clamp(44px, 6.5vh, 52px);
}

@supports (height: 100dvh) {
  :root {
    --cabecera-alto: clamp(44px, 7.5dvh, 60px);
    --esp-y: clamp(6px, 1.2dvh, 12px);
    --radio-tactil: clamp(44px, 6.5dvh, 52px);
  }
}

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

html {
  font-size: clamp(16px, calc(0.55vh + 12.4px), 17px);
}
@supports (height: 100dvh) {
  html { font-size: clamp(16px, calc(0.55dvh + 12.4px), 17px); }
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  /* En un panel tactil no se selecciona texto: se toca */
  -webkit-user-select: none; user-select: none;
}
body { font-size: 1rem; }
input, textarea, select { -webkit-user-select: text; user-select: text; }

/* Los numeros que cambian no deben bailar */
.num, .total, .reloj, td.total, .ficha .va, .total-grande, .cuenta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- Cabecera: una sola linea, muy clara ---------- */
.barra-sup {
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px);
  padding: var(--esp-y) var(--esp-x); min-height: var(--cabecera-alto);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 50;
}
.barra-sup h1 {
  font-size: clamp(.95rem, 1.8vh, 1.05rem); margin: 0; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.barra-sup .sep { flex: 1; }
.barra-sup .dato {
  font-size: clamp(.76rem, 1.4vh, .85rem);
  color: var(--texto-3); white-space: nowrap;
}
/* Clima de las dos zonas. Se oculta en pantallas muy estrechas para no
   comerse los botones de trabajo. */
.barra-sup .clima {
  font-size: clamp(.62rem, .9vw, .72rem);
  color: var(--texto-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}
@media (max-width: 700px) { .barra-sup .clima { display: none; } }

/* ---------- Aviso de sin conexion: imposible de no ver ---------- */
#sin-conexion {
  display: none; background: var(--rojo); color: #fff;
  text-align: center; padding: 10px; font-weight: 700; font-size: .95rem;
}
#sin-conexion.visible { display: block; }

/* ---------- Botones ---------- */
button, .boton {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--blanco); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  padding: clamp(9px, 1.3vh, 14px) clamp(13px, 1.5vw, 20px);
  min-height: var(--radio-tactil);
  transition: transform .1s ease, opacity .1s ease, background .15s ease;
}
button:active, .boton:active { transform: scale(.97); opacity: .85; }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

button.azul   { background: var(--azul);   color: #fff; border-color: transparent; }
button.verde  { background: var(--verde);  color: #fff; border-color: transparent; }
button.rojo   { background: var(--rojo);   color: #fff; border-color: transparent; }
button.plano  { background: transparent; }
button.grande {
  font-size: clamp(1rem, 2.2vh, 1.12rem);
  min-height: clamp(50px, 8vh, 62px);
  padding: clamp(11px, 1.8vh, 18px) clamp(18px, 2vw, 26px);
  font-weight: 700;
}
button.icono  { padding: 12px; min-width: 52px; font-size: 1.15rem; }

/* Aviso de que el local entra SIN PIN.
   Es un boton y no un cartel a proposito: se toca y explica por que esta ahi.
   Discreto (no molesta durante el servicio) pero siempre visible, porque el
   sistema NO sabe quien esta delante y eso hay que poder recordarlo. */
#aviso-sin-pin {
  background: var(--ambar-claro); border-color: var(--ambar);
  color: #7a4a00; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  padding: 8px 14px; min-height: 44px;
}

/* ---------- Etiquetas de estado: pastilla pequena ----------
   El tamano sube a .76rem (12.9 px): con .72rem se quedaba en 12.2 px, y
   estas etiquetas dicen cosas que hay que leer de un vistazo (ANOTADO,
   LISTO, AGOTADO). */
.etiqueta {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  font-size: .76rem; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; white-space: nowrap;
}
.etiqueta.anotado  { background: var(--azul-claro);  color: var(--azul); }
.etiqueta.cocina   { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.listo    { background: var(--verde-claro); color: var(--verde); }
.etiqueta.arrastre { background: var(--rojo-claro);  color: var(--rojo); }
.etiqueta.gris     { background: var(--fondo-2);     color: var(--texto-2); }

/* =====================================================================
   COCINA · rejilla de comandas
   ===================================================================== */
.rejilla { display: grid; gap: clamp(8px, 1.5vh, 12px); padding: clamp(8px, 1.6vh, 16px); }
.rejilla.cocina { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.rejilla.panel  { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.tarjeta {
  background: var(--panel); border-radius: var(--r-g);
  box-shadow: var(--sombra-1); overflow: hidden;
  display: flex; flex-direction: column;
}

/* =====================================================================
   EL TIEMPO SE VE POR EL COLOR: CUATRO TRAMOS.

   ESTO ESTUVO MAL Y NO SE VEIA A SIMPLE VISTA. La cabecera llevaba el color del
   tramo con el texto en BLANCO. Y con texto blanco:

     · el amarillo daba 2.42:1 -> **el numero de minutos NO se leia**,
     · el naranja 3.00:1 -> tampoco,
     · y si se oscurecian los dos para que se leyeran, **se volvian casi el mismo
       color** (distancia 14 sobre 100): el cocinero no distinguia "va tarde" de
       "se ha pasado", que es justo para lo que sirve el color.

   O sea: con texto blanco este semaforo NO tenia solucion. Ni con esos colores
   ni con ningunos otros. Se intento a mano tres veces y por fuerza bruta, y no
   caben cuatro colores calientes seguidos con texto blanco.

   LA VUELTA: fondo claro con texto oscuro, y **el brillo bajando en cada tramo**.
   Asi no hace falta distinguir dos naranjas parecidos: se ve que uno es mas
   oscuro que el otro, y la progresion se entiende sola. Ademas el brillo se
   percibe mejor que el tono con poca luz o con reflejos, que es lo que hay en
   una cocina.

   Resultado medido: 11 a 13 de contraste (antes 2.42 en el peor), y el brillo
   bajando 21 -> 18 -> 14 -> 10. La franja de arriba lleva el color fuerte, para
   que el tramo se vea desde el otro lado de la cocina sin leer nada.
   ===================================================================== */
.tarjeta .cab {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--tramo-1-fondo);
  color: var(--tramo-1-texto);
  border-top: 6px solid var(--tramo-1);
}
.tarjeta.tramo-2 .cab {
  background: var(--tramo-2-fondo); color: var(--tramo-2-texto);
  border-top-color: var(--tramo-2);
}
.tarjeta.tramo-3 .cab {
  background: var(--tramo-3-fondo); color: var(--tramo-3-texto);
  border-top-color: var(--tramo-3);
}
.tarjeta.tramo-4 .cab {
  background: var(--tramo-4-fondo); color: var(--tramo-4-texto);
  border-top-color: var(--tramo-4);
}
/* El que se ha pasado, ademas, con un cerco: que se vea desde lejos */
.tarjeta.tramo-4 { box-shadow: var(--sombra-2), 0 0 0 3px var(--rojo-claro); }

.tarjeta .mesa {
  font-size: 2.1rem; font-weight: 800; line-height: .95; letter-spacing: -1px;
}
/* La palabra MESA. Estaba en .62rem (10.5 px): es de las que MAS se leen en
   una pantalla de cocina, porque es lo primero que busca el camarero. */
.tarjeta .mesa small {
  font-size: .72rem; font-weight: 700; display: block;
  letter-spacing: 1.5px; opacity: .85;
}
.tarjeta .num { font-size: .95rem; font-weight: 700; opacity: .95; line-height: 1.25; }
.tarjeta .reloj {
  margin-left: auto; font-size: 1.75rem; font-weight: 800; letter-spacing: -1px;
}
.tarjeta .cuerpo { padding: 14px 16px; flex: 1; }
.tarjeta .pied {
  display: flex; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--linea); background: var(--blanco);
}
.tarjeta .pied button { flex: 1; }

/* Recien llegada: llama la atencion sin molestar */
.tarjeta.nueva { animation: entrar .5s cubic-bezier(.2,.8,.2,1); }
@keyframes entrar {
  from { transform: translateX(-24px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* El aviso de pedido NUEVO. Estaba en .65rem (11 px): es de los que MAS se miran
   en una cocina, porque es lo que dice "esto acaba de entrar". Y el fondo era
   blanco translucido, que valia cuando la cabecera era oscura: con la cabecera
   clara no se veia.

   El fondo es el color OSCURO del tramo, no el fuerte: en blanco sobre el verde
   fuerte daba 3.99:1 (no llega) y sobre el mostaza 4.54 (al limite). Asi pasa de
   12 en los cuatro. */
.tarjeta.nueva .cab::after {
  content: "NUEVA"; font-size: .74rem; font-weight: 800; letter-spacing: 1px;
  color: #fff; background: var(--tramo-1-texto);
  padding: 4px 10px; border-radius: 99px;
  margin-left: auto;
}
.tarjeta.nueva.tramo-2 .cab::after { background: var(--tramo-2-texto); }
.tarjeta.nueva.tramo-3 .cab::after { background: var(--tramo-3-texto); }
.tarjeta.nueva.tramo-4 .cab::after { background: var(--tramo-4-texto); }

/* Las lineas del pedido: cantidad, nombre, y nada mas */
.linea { display: flex; gap: 10px; padding: 4px 0; align-items: baseline; }
.linea .cant {
  font-weight: 800; font-size: 1.2rem; min-width: 2.4rem;
  color: var(--texto); text-align: right;
}
.linea .nom { flex: 1; font-weight: 600; font-size: 1.08rem; }
.linea .op {
  color: var(--ambar); font-size: .95rem; font-weight: 600;
  padding-left: 3rem; line-height: 1.4;
}
.linea .nota {
  color: var(--azul); font-size: .95rem; font-weight: 600;
  padding-left: 3rem; font-style: normal; line-height: 1.4;
}
.separador-bebidas {
  margin: 12px 0 8px; padding: 6px 0; text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: 2.5px;
  color: var(--texto-3);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}

/* ---------- Contador ALL DAY: cuantos hay que hacer en total ---------- */
.all-day {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--blanco); border-top: 1px solid var(--linea-fuerte);
  padding: 10px 16px; display: flex; gap: 10px; align-items: center;
  overflow-x: auto; box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.all-day .titulo {
  font-size:0.71rem; font-weight: 800; letter-spacing: 1.5px;
  color: var(--texto-3); text-transform: uppercase; white-space: nowrap;
}
.all-day .all-day-item {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  background: var(--fondo); border-radius: var(--r-s); padding: 6px 12px;
}
.all-day .all-day-item b { font-size: 1.25rem; font-weight: 800; }
.all-day .all-day-item span { font-size: .9rem; color: var(--texto-2); font-weight: 600; }

/* =====================================================================
   BARRA · lista de pendientes de cobro
   ===================================================================== */
.buscador { display: flex; gap: 10px; padding: 16px; max-width: 760px; }
.buscador input {
  /* ESTO NO ES UN DETALLE: ES EL ARREGLO DEL DESBORDE EN EL MOVIL.
     Un `input` dentro de un flex tiene `min-width: auto`, o sea que NO se puede
     encoger por debajo de su ancho minimo de contenido. Con `letter-spacing:3px`
     y el ancho por defecto de 20 caracteres a 24 px, ese minimo son 374 px: no
     cabe en los 288 que le deja el buscador, se sale de la pantalla y arrastra
     el ancho de toda la pagina (scrollWidth 410 en un movil de 360).
     El cliente ve un recuadro "sin cerrar" y los textos cortados por la
     izquierda. Con `min-width: 0` el input obedece al flex y se queda en su
     sitio. Medido, no supuesto: 374 -> 288. */
  min-width: 0;
  flex: 1; font: inherit; font-size: 1.5rem; font-weight: 700;
  padding: 14px 18px; background: var(--blanco); color: var(--texto);
  border: 2px solid var(--linea-fuerte); border-radius: var(--r-m);
  text-align: center; letter-spacing: 3px;
}
.buscador input::placeholder { color: var(--texto-3); font-weight: 500; letter-spacing: 0; font-size: 1rem; }
.buscador input:focus { outline: none; border-color: var(--azul); }

table.lista {
  width: 100%; border-collapse: collapse; background: var(--blanco);
  border-radius: var(--r-g); overflow: hidden; box-shadow: var(--sombra-1);
  margin: 0 16px; width: calc(100% - 32px);
}
table.lista th {
  text-align: left; padding: 12px 18px; background: var(--fondo);
  font-size: .72rem; letter-spacing: 1.2px; color: var(--texto-3);
  text-transform: uppercase; font-weight: 800;
}
table.lista td {
  padding: clamp(8px, 1.6vh, 16px) clamp(10px, 1.4vw, 18px);
  border-top: 1px solid var(--linea); font-size: clamp(.9rem, 1.8vh, 1rem);
}
table.lista tr { cursor: pointer; }
table.lista tbody tr:active { background: var(--azul-claro); }
table.lista td.mesa  { font-size: 1.7rem; font-weight: 800; line-height: 1; width: 90px; }
table.lista td.num   { font-weight: 700; color: var(--texto-2); }
table.lista td.total { text-align: right; font-weight: 800; font-size: 1.35rem; }
table.lista td.espera { color: var(--texto-3); font-size: .9rem; white-space: nowrap; }
/* LO QUE LLEVA el pedido. Es para CONFIRMAR con el cliente antes de cobrar: si
   el camarero no puede comprobar que es el pedido que le estan diciendo, acaba
   cobrando el de otra mesa. Por eso se ve bien, no en letra pequeña. */
table.lista td.lleva {
  color: var(--texto-2); font-size: .95rem; line-height: 1.45;
  max-width: 420px;
}

.seccion-titulo {
  padding: clamp(12px, 2.6vh, 28px) clamp(12px, 1.4vw, 20px) clamp(5px, 1vh, 10px);
  margin: 0;
  font-size: max(12px, .74rem); font-weight: 800; letter-spacing: 1.5px;
  color: var(--texto-3); text-transform: uppercase;
}

/* =====================================================================
   MODALES · hoja que sube
   ===================================================================== */
.velo {
  position: fixed; inset: 0; background: rgba(16,20,25,.45);
  display: none; align-items: center; justify-content: center;
  padding: 16px; z-index: 100;
}
.velo.visible { display: flex; animation: fundido .2s ease; }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--blanco); border-radius: var(--r-g);
  box-shadow: var(--sombra-3); max-width: 620px; width: 100%;
  max-height: min(92vh, 92dvh); overflow: auto;
  animation: subir .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes subir {
  from { transform: translateY(28px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal .cab {
  padding: 16px 20px; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0;
  background: var(--blanco); z-index: 2;
}
.modal .cab h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.modal .cuerpo { padding: 18px 20px; }
.modal .pied {
  padding: 16px 20px; border-top: 1px solid var(--linea);
  display: flex; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0;
  background: var(--blanco);
}
.modal .pied button { flex: 1; min-width: 130px; }

.total-grande {
  font-size: 2.8rem; font-weight: 800; text-align: right;
  letter-spacing: -1.5px; line-height: 1;
}
.desglose { color: var(--texto-3); font-size: .88rem; text-align: right; margin-top: 4px; }

/* Los medios de pago: grandes y a un solo toque */
.medios { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.medios button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 96px; font-size: 1rem; font-weight: 700;
}
.medios button .ico { font-size: 1.9rem; line-height: 1; }

/* =====================================================================
   TECLADO DE PIN
   ===================================================================== */
.teclado {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 330px; margin: 0 auto;
}
.teclado button { font-size: 1.9rem; font-weight: 700; min-height: 74px; }
.puntos {
  text-align: center; font-size: 2.2rem; letter-spacing: 16px;
  min-height: 2.8rem; margin: 10px 0 22px; color: var(--punteado);
}
.puntos .lleno { color: var(--texto); }

/* =====================================================================
   SELECTOR DE PANEL
   ===================================================================== */
.inicio {
  max-width: 840px; margin: 0 auto;
  padding: clamp(18px, 4vh, 48px) clamp(14px, 2.4vw, 20px);
  text-align: center;
}
.inicio h1 {
  font-size: clamp(1.45rem, 4vh, 1.9rem);
  margin: 0 0 clamp(2px, .8vh, 8px); font-weight: 800; letter-spacing: -.5px;
}
.inicio p  { color: var(--texto-2); margin-top: 0; font-size: clamp(.95rem, 1.8vh, 1.02rem); }
.paneles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(8px, 1.5vh, 18px); margin-top: clamp(8px, 2vh, 36px);
}
.panel-opcion {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-g); padding: clamp(14px, 3vh, 32px) clamp(12px, 1.8vw, 20px);
  cursor: pointer;
  text-decoration: none; color: var(--texto); display: block;
  box-shadow: var(--sombra-1);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.panel-opcion:active { transform: scale(.97); box-shadow: var(--sombra-1); }
.panel-opcion:hover { border-color: var(--azul); box-shadow: var(--sombra-2); }
.panel-opcion .icono {
  font-size: clamp(2rem, 6vh, 3.2rem);
  display: block; margin-bottom: clamp(4px, 1vh, 12px);
}
.panel-opcion .tit  { font-size: clamp(1.05rem, 2.2vh, 1.2rem); font-weight: 800; letter-spacing: .5px; }
.panel-opcion .sub  {
  font-size: clamp(.8rem, 1.6vh, .88rem);
  color: var(--texto-3); margin-top: clamp(2px, .6vh, 6px);
}

/* ---------- piezas del selector de zona ---------- */
.inicio-sub { font-size: clamp(1rem, 2vh, 1.15rem); }

/* La pantalla del cliente va aparte y con otro color: no es una zona de trabajo
   del personal, es lo que ve el cliente. Confundirlas seria un error caro. */
.inicio-seccion { margin-top: clamp(14px, 3vh, 38px); text-align: center; }
.inicio-seccion-pedir { margin-top: 0; }
.inicio-etiqueta {
  font-size: max(12px, .74rem); font-weight: 800; letter-spacing: 1.6px;
  color: var(--texto-3); text-transform: uppercase; margin: 0 0 clamp(4px, 1vh, 10px);
}
.inicio-etiqueta-personal {
  margin-top: clamp(12px, 2.5vh, 28px);
  margin-bottom: clamp(2px, .8vh, 6px);
}
.panel-opcion.cliente {
  max-width: 480px; margin: 0 auto; padding: clamp(12px, 2.4vh, 22px) clamp(12px, 2vw, 20px);
  border-style: dashed;
}
.panel-opcion.cliente .icono { font-size: clamp(1.8rem, 4.5vh, 2.4rem); margin-bottom: clamp(3px, .8vh, 8px); }

/* Esta direccion: para apuntarla en las otras pantallas */
.direccion {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blanco); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m); padding: 12px 12px 12px 18px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; color: var(--azul);
  max-width: 100%;
}
/* Los botones pequenos son para acciones secundarias, pero SIGUEN SIENDO TACTILES.
   Estaban en 38 px y los usa un dedo en una tablet: se fallan. A 44, que es el
   minimo de verdad. */
button.pequeno { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.inicio-nota {
  font-size: .85rem; color: var(--texto-3); margin: 10px auto 0;
  max-width: 460px; line-height: 1.5;
}
.inicio-pie { font-size: .82rem; color: var(--texto-3); margin-top: 40px; }
.pin-titulo { font-size: 1.05rem; color: var(--texto); font-weight: 700; }

/* El PIN tiene que caber en una tablet baja sin cuatro pantallas de scroll. */
#zona-pin {
  max-width: 360px;
  margin: clamp(4px, 1.8vh, 30px) auto 0 !important;
}
#zona-pin .pin-titulo {
  margin: 0 0 clamp(2px, 1vh, 12px);
  font-size: clamp(.95rem, 2vh, 1.05rem);
}
#zona-pin .puntos {
  font-size: clamp(1.3rem, 3.2vh, 2.2rem);
  margin: clamp(2px, .8vh, 10px) 0 clamp(6px, 1.8vh, 22px);
}
#zona-pin .teclado {
  gap: clamp(4px, 1.1vh, 12px);
  max-width: min(330px, 100%);
}
#zona-pin .teclado button {
  min-height: clamp(40px, 7.2vh, 74px);
  font-size: clamp(1.2rem, 3.4vh, 1.9rem);
}
#zona-pin #btn-volver {
  margin-top: clamp(6px, 1.5vh, 16px) !important;
  min-height: 44px;
}

/* ---------- los pedidos que recuerda el movil del cliente ---------- */
.mio {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 10px;
  text-align: left; box-shadow: var(--sombra-1);
}
.mio .etiqueta { font-size:0.71rem; }

/* =====================================================================
   CLIENTE · la carta en el movil
   ===================================================================== */
.carta { max-width: 760px; margin: 0 auto; padding-bottom: 120px; background: var(--blanco); }

/* ---- LAS PESTANAS DE CATEGORIA ----
   Se quedan pegadas arriba al bajar. En una carta de 26 platos el cliente tiene
   que poder saltar a "Bebidas" sin recorrerlo todo con el dedo. */
.chips {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px;
  background: var(--blanco); border-bottom: 1px solid var(--linea);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px;
  background: var(--fondo); color: var(--texto); font-size: .88rem;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.chips a:active { background: var(--fondo-2); }

/* ---- TITULOS ---- */
.categoria {
  padding: 26px 16px 6px; font-size: 1.35rem; font-weight: 800;
  margin: 0; letter-spacing: -.4px;
}
/* La subcategoria es mas pequena y con una rayita a la izquierda: asi se ve que
   cuelga de la de arriba sin necesidad de explicarlo. */
.subcategoria {
  padding: 18px 16px 6px; font-size: 1rem; font-weight: 700;
  margin: 0 0 0 4px; color: var(--texto-2);
  border-left: 3px solid var(--azul); padding-left: 10px;
}

/* ---- LA REJILLA DE PLATOS ----
   Tarjetas con la foto arriba, como las apps de reparto. En el movil salen dos
   por fila; en una pantalla grande, tres o cuatro. */
.rejilla {
  display: grid; gap: 12px; padding: 8px 14px 4px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.plato {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--blanco); cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.plato:active { transform: scale(.975); box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.plato .info { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; }
.plato .nom  { font-weight: 700; font-size: .98rem; line-height: 1.25; }
.plato .desc {
  color: var(--texto-3); font-size: .82rem; margin-top: 4px; line-height: 1.35;
  /* Dos lineas como mucho: si no, las tarjetas de una fila quedan de distinto
     alto y la rejilla se ve descuadrada. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.plato .alerg { color: var(--ambar); font-size: .74rem; margin-top: 6px; font-weight: 600; }
.plato .precio {
  font-weight: 800; font-size: 1.05rem; margin-top: auto; padding-top: 8px;
  color: var(--texto);
}

/* ---- LA FOTO ---- */
.plato .foto {
  display: block; width: 100%; height: 104px; object-fit: cover;
  background: var(--fondo-2);
}
/* SIN FOTO NO SE DEJA UN HUECO VACIO: se pone la inicial del plato sobre un
   color suave. Asi la rejilla se ve igual de llena y no parece que falta algo. */
.plato .sin-foto {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 104px; background: var(--fondo-2);
  font-size: 2rem; font-weight: 800; color: var(--texto-3); opacity: .45;
}

/* ---- COMBOS ----
   Se distinguen de un plato normal para que el cliente los vea de un vistazo:
   son lo que mas se vende y lo que mas margen deja. */
.plato.combo {
  background: var(--azul-claro);
  border-color: var(--azul);
}
.plato.combo:active { background: #d8e8fb; }
.plato.combo .nom { color: var(--azul); }
.ahorro {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--verde); color: #fff; font-size: .74rem; font-weight: 800;
  letter-spacing: .3px;
}
.cesta {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--blanco); border-top: 1px solid var(--linea-fuerte);
  padding: 14px 18px; max-width: 640px; margin: 0 auto;
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}
.cesta .fila { display: flex; align-items: center; gap: 16px; }
.cuenta {
  background: var(--azul); color: #fff; font-weight: 800;
  border-radius: 99px; min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}

/* ---------- Menus: cada eleccion con su producto, opciones y nota ---------- */
.combo-slot {
  margin: 8px 0 12px; padding: 10px;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--fondo);
}
.combo-slot select { width: 100%; margin-bottom: 8px; }
.combo-productos { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.combo-producto-opcion {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px;
}
.combo-producto-opcion.agotado { opacity: .6; cursor: not-allowed; }
.combo-producto-opcion.agotado .opcion-nombre {
  text-decoration: line-through; color: var(--texto-3);
}
.combo-producto-opcion .agotado-texto {
  grid-column: 2; color: var(--rojo); font-size: .74rem; font-weight: 800;
}
.combo-nota { width: 100%; margin-top: 8px; }
.combo-grupo-opciones { margin: 6px 0 2px; }
.combo-grupo-cab {
  font-weight: 700; font-size: .9rem; color: var(--texto-2); margin-top: 6px;
}
.perm-lista { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.perm-opcion { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Avisos ---------- */
.aviso {
  padding: 14px 18px; border-radius: var(--r-m); margin: 14px;
  background: var(--azul-claro); border-left: 4px solid var(--azul);
  font-size: .93rem; line-height: 1.45;
}
.aviso.error { background: var(--rojo-claro); border-left-color: var(--rojo); }
.aviso.ok    { background: var(--verde-claro); border-left-color: var(--verde); }
.aviso.ambar { background: var(--ambar-claro); border-left-color: var(--ambar); }

/* ---------- Estados vacios: utiles, no decorativos ---------- */
.vacio { text-align: center; padding: clamp(28px, 8vh, 80px) 24px; color: var(--texto-3); }
.vacio .icono { font-size: 3.6rem; display: block; margin-bottom: 14px; opacity: .35; }
.vacio .t1 { font-size: 1.1rem; font-weight: 700; color: var(--texto-2); }
.vacio .t2 { font-size: .9rem; margin-top: 8px; line-height: 1.5; }

/* ---------- Fichas de resumen ---------- */
.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(6px, 1.2vh, 14px);
  padding: clamp(8px, 1.6vh, 16px);
}
.ficha {
  background: var(--blanco); border-radius: var(--r-g);
  padding: clamp(9px, 1.8vh, 18px) clamp(10px, 1.4vw, 20px);
  box-shadow: var(--sombra-1);
}
.ficha .et {
  font-size: max(12px, 0.71rem); letter-spacing: 1.2px; color: var(--texto-3);
  text-transform: uppercase; font-weight: 800;
}
.ficha .va {
  font-size: clamp(1.45rem, 4vh, 2rem);
  font-weight: 800; margin-top: clamp(3px, .8vh, 8px); letter-spacing: -1px;
}

/* ---------- Barra inferior de accion (cliente) ---------- */
.accion-fija {
  position: sticky; bottom: 0; background: var(--blanco);
  border-top: 1px solid var(--linea); padding: 14px 18px;
}

/* =====================================================================
   QUE TODO SE ADAPTE A LA PANTALLA: MOVIL, TABLETA Y PC
   =====================================================================

   EL PROBLEMA QUE SE ARREGLA AQUI: en el movil habia que hacer un scroll raro.
   La causa era la tabla de pendientes, que tiene cinco columnas (mesa, pedido,
   que lleva, total, espera). En 360 px de ancho no caben, la tabla se estiraba
   mas que la pantalla y **arrastraba toda la pagina**: para ver el total habia
   que mover la pantalla de lado.

   En vez de encoger la letra hasta que no se lea, en el movil cada pedido pasa a
   ser una TARJETA: la mesa grande a la izquierda, el total a la derecha, y
   debajo lo que lleva. Se lee de un vistazo y no hay que mover nada de lado.

   Se hace solo con CSS, sin tocar el HTML: la misma tabla, contada de otra
   forma. Asi las dos plataformas siguen compartiendo pantalla.
   ===================================================================== */

html {
  -webkit-text-size-adjust: 100%;   /* que el movil no agrande la letra solo */
  text-size-adjust: 100%;
}
body { overflow-x: hidden; }        /* ninguna pantalla debe moverse de lado */
img, canvas, video { max-width: 100%; height: auto; }

/* El alto de la ventana en el movil NO es `100vh`: la barra de direcciones se
   come una parte, y con `100vh` el modal se sale por abajo y hay que hacer el
   scroll raro ese. `dvh` es el alto que se ve de verdad. */
.velo { min-height: 100vh; min-height: 100dvh; }
.modal { max-height: 92vh; max-height: 92dvh; }

/* En pantallas estrechas, mas sitio para lo que importa y menos aire. */
@media (max-width: 640px) {
  .barra-sup { gap: 10px; padding: 10px 14px; min-height: 54px; }
  .barra-sup h1 { font-size: .95rem; letter-spacing: .4px; }
  /* Los datos de la cabecera (hora, wifi...) se esconden: en el movil ocupan
     media barra y no se usan para trabajar. */
  .barra-sup .dato { display: none; }

  /* ---- LA TABLA, CONVERTIDA EN TARJETAS ---- */
  table.lista {
    display: block; margin: 0 12px; width: calc(100% - 24px);
    background: transparent; box-shadow: none; border-radius: 0;
  }
  table.lista thead { display: none; }   /* los titulos no hacen falta: la tarjeta se explica sola */
  table.lista tbody { display: block; }
  table.lista tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "mesa   numero total"
      "lleva  lleva  lleva"
      "espera espera espera";
    align-items: center;
    gap: 2px 10px;
    background: var(--blanco);
    border-radius: var(--r-g);
    box-shadow: var(--sombra-1);
    margin-bottom: 10px;
    padding: 12px 14px;
  }
  table.lista td { display: block; border: 0; padding: 0; }
  table.lista td.mesa {
    grid-area: mesa; width: auto; font-size: 1.7rem; line-height: 1;
  }
  table.lista td.num { grid-area: numero; align-self: center; }
  table.lista td.lleva { grid-area: lleva; margin-top: 8px; }
  table.lista td.total {
    grid-area: total; text-align: right; font-size: 1.25rem;
  }
  table.lista td.espera {
    grid-area: espera; text-align: left; margin-top: 4px; white-space: normal;
  }

  /* Las rejillas de tarjetas: una sola columna, sin apretar. */
  .rejilla.cocina { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .rejilla.panel  { grid-template-columns: 1fr; gap: 10px; }

  /* Formularios y modales: a lo ancho, sin huecos raros. */
  .modal { border-radius: var(--r-m) var(--r-m) 0 0; max-height: 94vh; max-height: 94dvh; }
  .velo { padding: 0; align-items: flex-end; }
  .form-fila { flex-direction: column; align-items: stretch; }
  .form-fila label { margin-bottom: 4px; }
  .carta { padding-bottom: 140px; }
}

/* Tabletas: dos columnas de tarjetas en cocina, que es donde mas se nota. */
@media (min-width: 641px) and (max-width: 900px) {
  .rejilla.cocina { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .tarjeta .mesa { font-size: 1.8rem; }
  .rejilla { padding: 12px; gap: 10px; }
  .medios { grid-template-columns: 1fr; }
  .medios button { flex-direction: row; justify-content: center; min-height: 64px; }
}

/* =====================================================================
   PANTALLAS BAJAS (tablet apaisada con barras del navegador/sistema)
   ---------------------------------------------------------------------
   No es un breakpoint de ancho: 1024x600 sigue teniendo 1024 px de ancho.
   Lo que falta es ALTO. Aqui se quita aire vertical y el panel de pedidos
   pasa a una tarjeta horizontal para que quepa sin scroll.
   ===================================================================== */
@media (max-height: 680px) {
  .inicio { padding-top: clamp(8px, 2vh, 18px); padding-bottom: clamp(8px, 2vh, 18px); }
  .inicio h1 { margin-bottom: 2px; }
  .inicio-sub { margin-bottom: 4px; }
  .inicio-seccion-pedir { margin-top: 2px; }
  .inicio-seccion { margin-top: 10px; }
  .inicio-etiqueta-personal { margin-top: 10px; margin-bottom: 4px; }
  .paneles { margin-top: 6px; gap: 8px; }
  .panel-opcion { padding: 12px 14px; }
  .panel-opcion .icono { font-size: clamp(1.7rem, 5vh, 2.2rem); margin-bottom: 4px; }
  .panel-opcion.cliente {
    display: flex; align-items: center; gap: 12px;
    max-width: none; text-align: left; padding: 10px 14px;
  }
  .panel-opcion.cliente .icono { font-size: 1.8rem; margin: 0; flex: 0 0 auto; }
  .panel-opcion.cliente .tit { font-size: 1.05rem; }
  .panel-opcion.cliente .sub { margin-top: 1px; }
  .inicio-pie { margin-top: 12px; }

  /* Cliente: menos aire arriba y abajo, pero el mismo texto. */
  .chips { padding: 6px 10px; gap: 6px; }
  .chips a { padding: 6px 11px; font-size: .82rem; }
  .carta { padding-bottom: clamp(82px, 15vh, 120px); }

  /* Cocina/barra: tarjetas mas juntas sin tocar la letra. */
  .rejilla { padding: 8px; gap: 8px; }

  .modal .cab { padding: 10px 14px; }
  .modal .cuerpo { padding: 12px 14px; }
  .modal .pied { padding: 10px 14px; }
  .velo { padding: 8px; }
}

@media (max-height: 640px) {
  /* La direccion y el pie son informacion de apoyo: en una pantalla baja
     primero tienen que caber los paneles. Se pueden consultar en Ajustes. */
  #zona-direccion { display: none !important; }
  .inicio-pie { display: none; }
}

@media (max-width: 420px) {
  .paneles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-opcion { padding: 10px 8px; }
  .panel-opcion .tit { font-size: .95rem; }
  .panel-opcion .sub { font-size: .74rem; }
}

/* Aun mas bajo: solo se recorta lo decorativo, nunca la letra. */
@media (max-height: 520px) {
  .inicio-pie { display: none; }
  .panel-opcion .sub { margin-top: 1px; }
  .inicio h1 { font-size: clamp(1.3rem, 4.5vh, 1.6rem); }
  .pestanas button { min-height: 34px; }
  .modal { max-height: 96dvh; }
}

/* =====================================================================
   DENSIDAD DE TRABAJO PARA PANTALLAS BAJAS (tablet vieja)
   ---------------------------------------------------------------------
   En 1080p no se toca NADA de esto: las tarjetas siguen anchas y con aire.
   Cuando el alto util baja, cocina y barra necesitan ver mas pedidos de un
   vistazo; se aprieta la tarjeta por dentro, no la letra del pedido.
   ===================================================================== */
@media (max-height: 700px) {
  .barra-sup { padding: 4px 10px; gap: 8px; min-height: 46px; }
  .barra-sup h1 { font-size: .82rem; letter-spacing: .4px; }
  .barra-sup .dato { display: none; }
  .barra-sup button { min-height: 40px; padding: 6px 10px; }

  .rejilla.cocina {
    grid-template-columns: repeat(auto-fill, minmax(min(205px, 100%), 1fr));
    gap: 6px; padding: 6px;
  }
  .rejilla.panel {
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 6px; padding: 6px;
  }

  /* La tarjeta se aprieta por dentro: el texto sigue en tamano legible. */
  .tarjeta .cab { padding: 6px 9px; gap: 7px; border-top-width: 4px; }
  .tarjeta .mesa { font-size: clamp(1.3rem, 3.3vh, 1.7rem); }
  .tarjeta .mesa small { font-size: max(11px, .66rem); letter-spacing: 1px; }
  .tarjeta .num { font-size: .82rem; }
  .tarjeta .reloj { font-size: clamp(1.05rem, 2.8vh, 1.45rem); }
  .tarjeta .cuerpo { padding: 7px 9px; }
  .tarjeta .pied { padding: 6px 8px; gap: 6px; }
  .tarjeta .pied button { min-height: 40px; padding: 6px 10px; font-size: .86rem; }
  .tarjeta .estimado { padding: 3px 8px; font-size: .8rem; margin-bottom: 6px; }

  .linea { padding: 2px 0; gap: 6px; }
  .linea .cant { font-size: .98rem; min-width: 1.8rem; }
  .linea .nom { font-size: .92rem; }

  /* La barra EN TOTAL ocupa lo justo: es un resumen, no un panel. */
  .all-day { padding: 3px 8px; gap: 5px; }
  .all-day .titulo { font-size: max(11px, .66rem); letter-spacing: 1px; }
  .all-day .all-day-item { padding: 2px 7px; gap: 4px; }
  .all-day .all-day-item b { font-size: 1rem; }
  .all-day .all-day-item span { font-size: .76rem; }

  table.lista td { padding: 6px 10px; font-size: .88rem; }
  table.lista th { padding: 7px 10px; font-size: max(11px, .68rem); }
  table.lista td.mesa { font-size: 1.35rem; width: 70px; }
  table.lista td.total { font-size: 1.1rem; }
  table.lista td.lleva { font-size: .82rem; line-height: 1.3; }
  table.lista td.espera { font-size: .78rem; }
  .buscador { padding: 8px 10px; gap: 8px; }
}

/* Pantallas muy anchas (TV de cocina): que no se estire de mas */
@media (min-width: 1600px) {
  .rejilla.cocina { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* ---------- WiFi: buscador de redes usable ---------- */
.wifi-buscador {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px;
}
.wifi-buscador input { flex: 1 1 180px; min-width: 0; margin: 0; }
.wifi-buscador .campo-ayuda { flex: 1 1 100%; margin: 0; }
.wifi-redes {
  display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.wifi-red {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; width: 100%; min-height: 52px; padding: 10px 12px;
  text-align: left; background: var(--blanco); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  cursor: pointer; font: inherit;
}
.wifi-red:hover { background: var(--fondo); }
.wifi-red.actual { border-color: var(--azul); }
.wifi-red.elegida { outline: 3px solid var(--azul); outline-offset: 1px; }
.wifi-red-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}
.wifi-red-meta { flex: 0 0 auto; color: var(--texto-3); font-size: .8rem; }

/* Selector de zona (Cocina / Barra / Administracion) */
.selector-zona { position: relative; }
.selector-zona .menu-zona {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 168px; padding: 6px; z-index: 80;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display: none;
}
.selector-zona .menu-zona.abierto { display: block; }
.selector-zona .menu-zona a {
  display: block; padding: 10px 12px; border-radius: 7px;
  color: var(--texto); text-decoration: none; font-size: .86rem; font-weight: 600;
}
.selector-zona .menu-zona a:hover,
.selector-zona .menu-zona a:focus-visible { background: var(--fondo-2); }
.selector-zona .menu-zona a.activa { background: var(--azul-claro); color: var(--azul); }