/* Vozel — panel del restaurante.
 *
 * Sistema de diseño en un solo fichero: tokens arriba, componentes debajo, pantallas al
 * final. Parte de la identidad de la web (granito y azul Atlántico, Bricolage Grotesque
 * sobre Instrument Sans) y le añade lo que un panel que se usa ocho horas seguidas
 * necesita y una web no: densidad, estados de servicio y movimiento que responde.
 *
 * Criterios (WWDC «Designing Fluid Interfaces», «The Details of UI Typography»):
 * - La respuesta va en el pointerdown, nunca en el click.
 * - Los materiales translúcidos solo donde hay contenido debajo (cabecera y barra de
 *   pestañas); la barra lateral es estructura y por eso es opaca y pesada.
 * - El tracking depende del tamaño: negativo en los números grandes, cero en el texto.
 * - Con movimiento reducido no se desliza nada: se funde.
 */

/* ------------------------------------------------------------------ tipografías */

@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/instrument-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/instrument-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* Marca. El Atlántico es el único color de acción: si algo es azul, se puede tocar. */
  --atlantico: #12626F;
  --atlantico-hover: #0F5661;
  --atlantico-presion: #0C4650;
  --atlantico-suave: #E6F0F1;
  --atlantico-tinta: #0C4650;
  --sobre-atlantico: #F7F8F7;
  --granito: #1E2225;

  /* Superficies, de abajo arriba. */
  --fondo: #F4F5F3;
  --superficie: #FFFFFF;
  --superficie-hundida: #ECEEEB;
  --superficie-alzada: #FFFFFF;
  --linea: #DCDFDA;
  --linea-suave: #E9EBE8;

  /* Texto. «Apagado» sigue pasando 4,5:1 sobre blanco (el de la web, #7A818A, no). */
  --tinta: #1E2225;
  --texto: #3A3F45;
  --tenue: #565C64;
  --apagado: #697078;

  /* Estados de servicio. Cada uno con su tinta, su fondo y su borde. */
  --urgente: #A6403A;
  --urgente-suave: #F7E8E6;
  --urgente-borde: #E3B5B0;
  --sobre-urgente: #FFFFFF;
  --atencion: #7E610C;
  --atencion-suave: #FBF3DD;
  --atencion-borde: #E8D5A8;
  --bien: #2F6B45;
  --bien-suave: #E3F0E7;
  --prueba: #5A4A8C;
  --prueba-suave: #EEEAF7;

  /* Barra lateral: el material más pesado, porque es estructura. */
  --lateral: #1E2225;
  --lateral-alzada: #2A2F33;
  --lateral-linea: #343A3F;
  --lateral-texto: #B9BFBB;
  --lateral-tinta: #F4F5F3;
  --lateral-apagado: #8A918D;

  /* Materiales translúcidos (cabecera, barra de pestañas, hojas). */
  --material: rgba(244, 245, 243, 0.74);
  --material-borde: rgba(30, 34, 37, 0.08);
  --material-desenfoque: blur(20px) saturate(180%);
  --velo: rgba(18, 21, 22, 0.32);

  /* Familias. */
  --display: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
  --texto-fam: "Instrument Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  /* Escala tipográfica (rem, para respetar el tamaño de letra del sistema). */
  --t-micro: 0.6875rem;  /* 11 */
  --t-pequeno: 0.8125rem; /* 13 */
  --t-base: 0.9375rem;   /* 15 */
  --t-medio: 1.0625rem;  /* 17 */
  --t-titulo: 1.375rem;  /* 22 */
  --t-pagina: 1.75rem;   /* 28 */
  --t-cifra: 2rem;       /* 32 */

  /* Espacio en múltiplos de 4. */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* Radios. Más redondos cuanto más grande la superficie. */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 22px;
  --r-pastilla: 999px;

  /* Elevación: sombras cortas y frías; la hoja es la única que proyecta de verdad. */
  --sombra-1: 0 1px 2px rgba(30, 34, 37, 0.05), 0 0 0 1px rgba(30, 34, 37, 0.04);
  --sombra-2: 0 6px 20px rgba(30, 34, 37, 0.07), 0 1px 3px rgba(30, 34, 37, 0.06);
  --sombra-hoja: 0 24px 64px rgba(30, 34, 37, 0.20), 0 2px 8px rgba(30, 34, 37, 0.08);

  /* Movimiento. Los muelles van en JS (js/muelle.js); esto es para lo que no se toca. */
  --salida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rapido: 120ms;
  --medio: 240ms;

  --ancho-lateral: 252px;
  --alto-pestanas: 64px;
}

/* Oscuro: el modo del local por la noche. Mismo orden de superficies, tintas más claras. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --atlantico: #4FB3C2;
    --atlantico-hover: #66C0CD;
    --atlantico-presion: #3A99A8;
    --atlantico-suave: rgba(79, 179, 194, 0.15);
    --atlantico-tinta: #9AD6DF;
    --sobre-atlantico: #0B1A1D;
    --fondo: #111415;
    --superficie: #191D1F;
    --superficie-hundida: #0D0F10;
    --superficie-alzada: #202528;
    --linea: #2D3337;
    --linea-suave: #242A2D;
    --tinta: #F1F3F1;
    --texto: #D3D7D4;
    --tenue: #A9B0AC;
    --apagado: #8F9692;
    --urgente: #F08C83;
    --urgente-suave: rgba(240, 140, 131, 0.13);
    --urgente-borde: rgba(240, 140, 131, 0.45);
    --sobre-urgente: #2A0E0B;
    --atencion: #E3BE55;
    --atencion-suave: rgba(227, 190, 85, 0.12);
    --atencion-borde: rgba(227, 190, 85, 0.4);
    --bien: #6CC48E;
    --bien-suave: rgba(108, 196, 142, 0.13);
    --prueba: #B5A6EC;
    --prueba-suave: rgba(181, 166, 236, 0.14);
    --lateral: #0C0E0F;
    --lateral-alzada: #1A1E20;
    --lateral-linea: #23292C;
    --material: rgba(17, 20, 21, 0.72);
    --material-borde: rgba(255, 255, 255, 0.07);
    --velo: rgba(0, 0, 0, 0.5);
    --sombra-1: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --sombra-hoja: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* Transparencia reducida: los materiales se vuelven sólidos. */
@media (prefers-reduced-transparency: reduce) {
  :root { --material: var(--fondo); --material-desenfoque: none; }
}
/* Más contraste: bordes definidos y texto apagado más oscuro. */
@media (prefers-contrast: more) {
  :root { --linea: #9AA09B; --apagado: var(--tenue); --material: var(--fondo); --material-desenfoque: none; }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-base)/1.5 var(--texto-fam);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-family: var(--display); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--atlantico); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--atlantico); outline-offset: 2px; border-radius: var(--r-s); }
[hidden] { display: none !important; }
svg.icono { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ armazón */

.app {
  display: grid;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  min-height: 100dvh;
}

.lateral {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--e-4);
  padding: var(--e-5) var(--e-3) var(--e-4);
  background: var(--lateral); color: var(--lateral-texto);
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 var(--e-2); }
.marca svg { width: 22px; height: 22px; stroke: #3FA3B2; stroke-width: 2.1; fill: none; stroke-linecap: round; }
.marca span { font: 700 1.0625rem/1 var(--display); letter-spacing: 0.06em; color: var(--lateral-tinta); }

.selector-local {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  width: 100%; padding: 10px 12px; border: 1px solid var(--lateral-linea); border-radius: var(--r-m);
  background: var(--lateral-alzada); color: var(--lateral-tinta); text-align: left;
}
.selector-local small { display: block; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lateral-apagado); }
.selector-local strong { display: block; font-weight: 600; font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
select.selector-local { appearance: none; }

.navegacion { display: flex; flex-direction: column; gap: 2px; }
.navegacion a {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-s);
  color: var(--lateral-texto); font-weight: 500; text-decoration: none;
  transition: background var(--rapido) var(--salida), color var(--rapido) var(--salida);
}
.navegacion a:hover { background: rgba(255, 255, 255, 0.04); color: var(--lateral-tinta); }
.navegacion a[aria-current="page"] { background: var(--lateral-alzada); color: var(--lateral-tinta); font-weight: 600; }
.navegacion a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: #3FA3B2;
}
.navegacion .contador {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pastilla);
  display: inline-grid; place-items: center; background: #C9534B; color: #fff;
  font-size: var(--t-micro); font-weight: 700;
}

.estado-servicio {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--lateral-alzada);
}
.estado-servicio .fila { display: flex; align-items: center; gap: var(--e-2); color: var(--lateral-tinta); font-weight: 600; font-size: var(--t-pequeno); }
.estado-servicio small { color: var(--lateral-apagado); font-size: var(--t-micro); line-height: 1.45; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #5DB57E; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(93, 181, 126, 0.18); }
.punto--pausa { background: #E3BE55; box-shadow: 0 0 0 3px rgba(227, 190, 85, 0.18); }
.punto--apagado { background: #8A918D; box-shadow: none; }
.estado-servicio .boton { width: 100%; }

.usuario {
  display: flex; align-items: center; gap: 10px; padding: var(--e-3) var(--e-2) 0;
  border-top: 1px solid var(--lateral-linea);
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--atlantico); color: var(--sobre-atlantico); font-size: var(--t-micro); font-weight: 700;
}
.usuario div { min-width: 0; flex: 1; }
.usuario strong { display: block; color: var(--lateral-tinta); font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario small { display: block; color: var(--lateral-apagado); font-size: var(--t-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario button { padding: 8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--lateral-apagado); }
.usuario button:hover { background: rgba(255, 255, 255, 0.06); color: var(--lateral-tinta); }

.principal { min-width: 0; display: flex; flex-direction: column; }

/* La cabecera es material: el contenido pasa por debajo y se adivina, no se corta. */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-6) var(--e-8) var(--e-4);
  background: var(--material); -webkit-backdrop-filter: var(--material-desenfoque); backdrop-filter: var(--material-desenfoque);
}
.cabecera::after {
  /* Borde de desplazamiento: solo aparece cuando hay contenido debajo. */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--material-borde); opacity: 0; transition: opacity var(--medio) var(--salida);
}
.cabecera[data-desplazada]::after { opacity: 1; }
.cabecera h1 { font-size: var(--t-pagina); line-height: 1.1; letter-spacing: -0.02em; }
.cabecera p { color: var(--apagado); font-size: var(--t-pequeno); margin-top: 2px; }
.cabecera .acciones { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

.contenido { padding: var(--e-2) var(--e-8) var(--e-12); display: flex; flex-direction: column; gap: var(--e-5); }

.pestanas { display: none; }

/* ------------------------------------------------------------------ botones */

.boton {
  --b-fondo: var(--superficie); --b-texto: var(--tinta); --b-borde: var(--linea);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 40px; padding: 0 var(--e-4); border-radius: var(--r-m);
  border: 1px solid var(--b-borde); background: var(--b-fondo); color: var(--b-texto);
  font-weight: 600; font-size: var(--t-pequeno); white-space: nowrap; user-select: none;
  touch-action: manipulation;
  transition: transform var(--rapido) var(--salida), background var(--rapido) var(--salida), border-color var(--rapido) var(--salida);
}
.boton:hover { background: color-mix(in srgb, var(--b-fondo) 92%, var(--tinta)); }
/* Respuesta en el pointerdown: la clase la pone ui.js al instante, antes que :active. */
.boton[data-pulsado], .boton:active { transform: scale(0.97); }
.boton:disabled { opacity: 0.5; cursor: default; transform: none; }
.boton--primario { --b-fondo: var(--atlantico); --b-texto: var(--sobre-atlantico); --b-borde: transparent; }
.boton--primario:hover { background: var(--atlantico-hover); }
.boton--peligro { --b-fondo: var(--superficie); --b-texto: var(--urgente); --b-borde: var(--urgente-borde); }
.boton--urgente { --b-fondo: var(--urgente); --b-texto: var(--sobre-urgente); --b-borde: transparent; }
.boton--urgente:hover { background: color-mix(in srgb, var(--urgente) 88%, #000); }
.boton--fantasma { --b-fondo: transparent; --b-borde: transparent; --b-texto: var(--tenue); }
.boton--fantasma:hover { background: var(--superficie-hundida); color: var(--tinta); }
.boton--grande { min-height: 48px; padding: 0 var(--e-5); font-size: var(--t-base); border-radius: var(--r-l); }
.boton--icono { padding: 0; width: 40px; }
.lateral .boton { --b-fondo: transparent; --b-texto: var(--lateral-tinta); --b-borde: var(--lateral-linea); }
.lateral .boton:hover { background: rgba(255, 255, 255, 0.05); }

/* ------------------------------------------------------------------ fichas (chips) */

.ficha {
  --f-fondo: var(--superficie-hundida); --f-texto: var(--tenue);
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border-radius: var(--r-pastilla); background: var(--f-fondo); color: var(--f-texto);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.ficha svg.icono { width: 12px; height: 12px; stroke-width: 2.2; }
.ficha--urgente { --f-fondo: var(--urgente-suave); --f-texto: var(--urgente); }
.ficha--atencion { --f-fondo: var(--atencion-suave); --f-texto: var(--atencion); }
.ficha--bien { --f-fondo: var(--bien-suave); --f-texto: var(--bien); }
.ficha--accion { --f-fondo: var(--atlantico-suave); --f-texto: var(--atlantico-tinta); }
.ficha--prueba { --f-fondo: var(--prueba-suave); --f-texto: var(--prueba); }

/* ------------------------------------------------------------------ control segmentado */

.segmentado {
  position: relative; display: inline-flex; padding: 3px; gap: 0;
  border-radius: var(--r-m); background: var(--superficie-hundida);
}
.segmentado button {
  position: relative; z-index: 1; min-height: 34px; padding: 0 var(--e-4);
  border: 0; border-radius: 9px; background: transparent; color: var(--tenue);
  font-weight: 500; font-size: var(--t-pequeno); white-space: nowrap;
  transition: color var(--rapido) var(--salida);
}
.segmentado button[aria-pressed="true"] { color: var(--tinta); font-weight: 600; }
.segmentado button .cuenta { margin-left: 6px; color: var(--apagado); font-weight: 600; }
.segmentado .indicador {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0;
  border-radius: 9px; background: var(--superficie-alzada); box-shadow: var(--sombra-1);
  will-change: transform, width;
}

/* ------------------------------------------------------------------ campos */

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: var(--t-pequeno); font-weight: 600; color: var(--texto); }
.campo > small { font-size: var(--t-micro); color: var(--apagado); line-height: 1.45; }
.entrada {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-m);
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta);
  transition: border-color var(--rapido) var(--salida), box-shadow var(--rapido) var(--salida);
}
textarea.entrada { min-height: 84px; resize: vertical; line-height: 1.45; }
.entrada::placeholder { color: var(--apagado); }
.entrada:focus { outline: none; border-color: var(--atlantico); box-shadow: 0 0 0 3px var(--atlantico-suave); }
.entrada[aria-invalid="true"] { border-color: var(--urgente); box-shadow: 0 0 0 3px var(--urgente-suave); }
.error-campo { font-size: var(--t-micro); color: var(--urgente); font-weight: 600; }

.buscador { position: relative; }
.buscador svg.icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--apagado); }
.buscador .entrada { padding-left: 36px; border-radius: var(--r-pastilla); }

/* Interruptor: el pulgar viaja con un muelle; el estado se ve por color, no solo por posición. */
.interruptor {
  position: relative; flex-shrink: 0; width: 46px; height: 28px; padding: 0; border: 0;
  border-radius: var(--r-pastilla); background: var(--linea);
  transition: background var(--medio) var(--salida);
  touch-action: manipulation;
}
.interruptor[aria-checked="true"] { background: var(--bien); }
.interruptor .pulgar {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  will-change: transform;
}

/* ------------------------------------------------------------------ superficies */

.tarjeta {
  background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--sombra-1);
  padding: var(--e-5);
}
.tarjeta h2 { font-size: var(--t-medio); letter-spacing: -0.01em; }
.tarjeta > header { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.tarjeta > header p { color: var(--apagado); font-size: var(--t-pequeno); }

.aviso {
  display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m); background: var(--atencion-suave); color: var(--atencion);
  border: 1px solid var(--atencion-borde); font-size: var(--t-pequeno); line-height: 1.5;
}
.aviso strong { color: inherit; }
.aviso--urgente { background: var(--urgente-suave); color: var(--urgente); border-color: var(--urgente-borde); }
.aviso--info { background: var(--atlantico-suave); color: var(--atlantico-tinta); border-color: transparent; }
.aviso .boton { margin-left: auto; }

.cifras { display: flex; gap: var(--e-6); align-items: flex-end; }
.cifra { display: flex; flex-direction: column; align-items: flex-end; }
.cifra strong { font: 600 var(--t-titulo)/1.1 var(--display); color: var(--tinta); letter-spacing: -0.02em; }
.cifra span { font-size: var(--t-micro); color: var(--apagado); }
.cifra--urgente strong { color: var(--urgente); }

.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-12) var(--e-6); text-align: center; color: var(--apagado);
  border: 1.5px dashed var(--linea); border-radius: var(--r-xl);
}
.vacio svg.icono { width: 36px; height: 36px; stroke-width: 1.5; color: var(--linea); margin-bottom: var(--e-2); }
.vacio strong { color: var(--texto); font-size: var(--t-medio); font-family: var(--display); font-weight: 600; }

.esqueleto {
  border-radius: var(--r-l); min-height: 180px;
  background: linear-gradient(100deg, var(--superficie) 40%, var(--superficie-hundida) 50%, var(--superficie) 60%) 0 0 / 220% 100%;
  animation: brillo 1.4s linear infinite;
}
@keyframes brillo { to { background-position: -220% 0; } }

/* ------------------------------------------------------------------ hojas (sheets) */

.velo {
  position: fixed; inset: 0; z-index: 40; background: var(--velo); opacity: 0;
  -webkit-tap-highlight-color: transparent;
}
.hoja {
  position: fixed; z-index: 41; display: flex; flex-direction: column;
  background: var(--superficie-alzada); box-shadow: var(--sombra-hoja);
  /* Escritorio: panel lateral que entra desde la derecha. */
  top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px));
  border-radius: var(--r-xl); will-change: transform;
  outline: none;
}
.hoja .asa { display: none; }
.hoja > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-5) var(--e-6) var(--e-3);
}
.hoja > header h2 { font-size: var(--t-titulo); letter-spacing: -0.015em; }
.hoja .cuerpo { flex: 1; overflow-y: auto; padding: var(--e-2) var(--e-6) var(--e-6); overscroll-behavior: contain; }
.hoja > footer {
  display: flex; gap: var(--e-3); justify-content: flex-end; padding: var(--e-4) var(--e-6);
  border-top: 1px solid var(--linea-suave);
}

/* ------------------------------------------------------------------ tostadas */

.tostadas {
  position: fixed; z-index: 60; left: 50%; bottom: var(--e-6); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2); pointer-events: none;
}
.tostada {
  display: flex; align-items: center; gap: var(--e-3); padding: 12px 18px 12px 14px;
  border-radius: var(--r-pastilla); background: var(--granito); color: #F4F5F3;
  box-shadow: var(--sombra-2); font-size: var(--t-pequeno); font-weight: 500; pointer-events: auto;
  will-change: transform, opacity;
}
.tostada svg.icono { color: #6CC48E; }
.tostada--error svg.icono { color: #F08C83; }
.tostada button { margin-left: var(--e-2); border: 0; background: transparent; color: #9AD6DF; font-weight: 600; padding: 0; }

/* ------------------------------------------------------------------ acceso */

.acceso {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6);
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--atlantico-suave), transparent 60%),
    var(--fondo);
}
.acceso form {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--e-4);
  padding: var(--e-8); border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-2);
}
.acceso .marca { padding: 0; margin-bottom: var(--e-2); }
.acceso .marca span { color: var(--tinta); }
.acceso h1 { font-size: var(--t-pagina); letter-spacing: -0.02em; line-height: 1.1; }
.acceso p { color: var(--apagado); font-size: var(--t-pequeno); }

/* ------------------------------------------------------------------ pedidos */

.barra-herramientas { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }

.tablero {
  display: grid; gap: var(--e-4); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.pedido {
  position: relative; display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4) var(--e-5) var(--e-5); border-radius: var(--r-l);
  background: var(--superficie); box-shadow: var(--sombra-1);
  transition: box-shadow var(--medio) var(--salida);
  will-change: transform;
}
/* Urgente: borde y halo, que se ven a metro y medio; la etiqueta sola no se ve. */
.pedido[data-urgente] { box-shadow: 0 0 0 1.5px var(--urgente-borde), 0 0 0 6px var(--urgente-suave); }
.pedido[data-prueba] { background: repeating-linear-gradient(-45deg, var(--superficie), var(--superficie) 14px, var(--prueba-suave) 14px, var(--prueba-suave) 28px); }
.pedido[data-anulado] { opacity: 0.62; }
.pedido .arriba { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.pedido .ref { font: 700 var(--t-base)/1 var(--display); color: var(--tinta); letter-spacing: 0.01em; }
.pedido .reloj { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--apagado); font-size: var(--t-pequeno); font-weight: 500; }
.pedido[data-urgente] .reloj { color: var(--urgente); font-weight: 700; }
.pedido .cliente { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-pequeno); color: var(--tenue); }
.pedido .cliente strong { color: var(--tinta); font-weight: 600; font-size: var(--t-base); }
.pedido .cliente a { color: inherit; }
.pedido .datos { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-pequeno); color: var(--tenue); }
.pedido .datos div { display: flex; align-items: flex-start; gap: 7px; }
.pedido .datos svg.icono { margin-top: 2px; color: var(--apagado); }
.pedido .datos .destacado { color: var(--atencion); font-weight: 600; }
.pedido .datos .destacado svg.icono { color: var(--atencion); }
.lineas { display: flex; flex-direction: column; gap: 6px; padding: var(--e-3) 0; border-block: 1px solid var(--linea-suave); }
.linea { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 4px var(--e-2); align-items: baseline; }
.linea .cantidad { font: 700 var(--t-base)/1.3 var(--display); color: var(--atlantico); }
.linea .nombre-plato { color: var(--tinta); font-weight: 500; }
.linea .importe { color: var(--apagado); font-size: var(--t-pequeno); }
.linea .cambios { grid-column: 2 / 4; font-size: var(--t-pequeno); color: var(--atencion); font-weight: 600; }
.pedido .abajo { display: flex; align-items: center; gap: var(--e-3); }
.pedido .total { font: 600 var(--t-titulo)/1 var(--display); color: var(--tinta); letter-spacing: -0.02em; margin-right: auto; }
.pedido .total small { display: block; font: 500 var(--t-micro)/1.4 var(--texto-fam); color: var(--apagado); letter-spacing: 0; margin-top: 3px; }

/* Destello al entrar un pedido nuevo: el halo se apaga solo. */
.pedido[data-nuevo]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--atlantico), 0 0 0 8px var(--atlantico-suave);
  animation: destello 2.4s var(--salida) forwards;
}
@keyframes destello { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.sonido-bloqueado { cursor: pointer; }

/* Hoy: los pendientes en tarjetas, los recibidos en filas debajo. */
.pedidos-hoy { display: flex; flex-direction: column; gap: var(--e-8); }
.bloque-pedidos { display: flex; flex-direction: column; gap: var(--e-3); }
.bloque-pedidos > header { display: flex; align-items: baseline; gap: var(--e-3); padding: 0 var(--e-1); }
.bloque-pedidos > header h2 { font-size: var(--t-medio); }
.bloque-pedidos > header span { color: var(--apagado); font-size: var(--t-pequeno); font-weight: 600; font-variant-numeric: tabular-nums; }
.todo-visto {
  display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l); border: 1.5px dashed var(--linea); color: var(--tenue); font-size: var(--t-pequeno);
}
.todo-visto svg.icono { color: var(--bien); }

/* Historial de pedidos: compacto, por días, para mirar hacia atrás; la tarjeta entera, al tocar. */
.historial { display: flex; flex-direction: column; gap: var(--e-4); }
.historial-pedidos { display: flex; flex-direction: column; gap: var(--e-6); }
.dia-historial { display: flex; flex-direction: column; gap: var(--e-3); }
.dia-historial > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding: 0 var(--e-1); }
.dia-historial > header h2 { font-size: var(--t-medio); }
.dia-historial > header span { color: var(--apagado); font-size: var(--t-pequeno); font-variant-numeric: tabular-nums; }
.filas-pedidos { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.fila-pedido {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--e-4);
  padding: 12px var(--e-5); border-top: 1px solid var(--linea-suave); cursor: pointer;
  transition: background var(--rapido) var(--salida);
}
.fila-pedido:first-child { border-top: 0; }
.fila-pedido:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--tinta)); }
.fila-pedido[data-pulsado] { background: var(--superficie-hundida); }
.fila-pedido .hora { font: 600 var(--t-base)/1 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.fila-pedido .quien { min-width: 0; display: flex; flex-direction: column; }
.fila-pedido .quien strong { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-pedido .quien small { color: var(--apagado); font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-pedido .lado { display: flex; align-items: center; gap: var(--e-3); }
.fila-pedido .fichas-fila { display: flex; gap: var(--e-1); }
.fila-pedido .total { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.fila-pedido[data-estado="cancelado"] .total { color: var(--apagado); text-decoration: line-through; }
.fila-pedido[data-estado="cancelado"] .quien strong, .fila-pedido[data-estado="borrador"] .quien strong { color: var(--tenue); }
.fila-pedido[data-peticion="anular"] { box-shadow: inset 3px 0 0 var(--urgente); background: color-mix(in srgb, var(--superficie) 94%, var(--urgente)); }
.tablero--uno { grid-template-columns: minmax(0, 1fr); }
.tablero--uno .pedido { box-shadow: none; padding: 0; }

/* ------------------------------------------------------------------ reservas */

.navegador-dia { display: inline-flex; align-items: center; gap: var(--e-2); }
.etiqueta-dia { min-width: 150px; }
.dia-reservas { display: flex; flex-direction: column; gap: var(--e-6); touch-action: pan-y; will-change: transform; }
.solicitudes { display: flex; flex-direction: column; gap: var(--e-3); }
.solicitudes:empty { display: none; }
.solicitud {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-4) var(--e-5); border-radius: var(--r-l); background: var(--superficie);
  box-shadow: 0 0 0 1.5px var(--atencion-borde), 0 0 0 6px var(--atencion-suave);
}
.solicitud-datos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-4); min-width: 0; }
.solicitud-datos strong { font: 600 var(--t-medio)/1.2 var(--display); color: var(--tinta); }
.solicitud-datos a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.solicitud-datos .nota { flex-basis: 100%; }
.solicitud-acciones { display: flex; gap: var(--e-2); }
.servicio { display: flex; flex-direction: column; gap: var(--e-3); }
.servicio > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding: 0 var(--e-1); }
.servicio > header h2 { font-size: var(--t-medio); }
.servicio > header span { color: var(--apagado); font-size: var(--t-pequeno); }
.reservas-lista { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.reserva {
  display: grid; grid-template-columns: 64px minmax(0, 1.3fr) 56px minmax(0, 1.7fr) auto; align-items: center;
  gap: var(--e-4); padding: 14px var(--e-5); border-top: 1px solid var(--linea-suave); cursor: pointer;
  transition: background var(--rapido) var(--salida);
}
.reserva:first-child { border-top: 0; }
.reserva:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--tinta)); }
.reserva[data-pulsado] { background: var(--superficie-hundida); }
.reserva[data-estado="cancelada"], .reserva[data-estado="no_show"] { opacity: 0.55; }
.reserva .hora { font: 600 var(--t-medio)/1 var(--display); color: var(--tinta); letter-spacing: -0.01em; }
.reserva .quien { min-width: 0; display: flex; flex-direction: column; }
.reserva .quien strong { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reserva .quien small { color: var(--apagado); font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reserva .comensales { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); font-weight: 600; }
.nota { display: flex; align-items: flex-start; gap: 6px; min-width: 0; color: var(--tenue); font-size: var(--t-pequeno); }
.nota span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nota svg.icono { margin-top: 2px; color: var(--apagado); }
.nota--salud { color: var(--urgente); font-weight: 600; }
.nota--salud svg.icono { color: var(--urgente); }

.detalle { display: flex; flex-direction: column; gap: var(--e-4); }
.detalle-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.detalle-cifras div { display: flex; flex-direction: column; padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--superficie-hundida); min-width: 0; }
.detalle-cifras strong { font: 600 var(--t-titulo)/1.15 var(--display); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detalle-cifras span { font-size: var(--t-micro); color: var(--apagado); }

.formulario { display: flex; flex-direction: column; gap: var(--e-4); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.casilla { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-pequeno); color: var(--texto); cursor: pointer; }
.casilla input { width: 18px; height: 18px; accent-color: var(--atlantico); margin: 1px 0 0; flex-shrink: 0; }
.alternativas { display: flex; flex-direction: column; gap: var(--e-3); }
.alternativas:empty { display: none; }
.fichas-elegibles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-pequeno); color: var(--tenue); }
.barra-izquierda { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* ------------------------------------------------------------------ plano de mesas */

.plano { display: flex; flex-direction: column; gap: var(--e-3); }
.plano-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.plano-controles { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.zonas { display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.zonas::-webkit-scrollbar { display: none; }
.zona {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--e-4);
  border: 0; border-radius: var(--r-pastilla); background: transparent; color: var(--tenue);
  font-weight: 600; font-size: var(--t-pequeno); white-space: nowrap;
  transition: background var(--rapido) var(--salida), color var(--rapido) var(--salida);
}
.zona:hover { background: var(--superficie-hundida); color: var(--tinta); }
.zona[aria-selected="true"] { background: var(--tinta); color: var(--fondo); }
.zona .cuenta { font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.zona--accion { color: var(--atlantico); }
.selector-hora { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--apagado); }
.entrada-hora { width: auto; min-width: 104px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.guardado { font-size: var(--t-pequeno); color: var(--apagado); min-width: 6em; text-align: right; }
.guardado:empty { min-width: 0; }
.ayuda-plano, .aforo { font-size: var(--t-pequeno); color: var(--apagado); line-height: 1.45; }
.aforo { color: var(--tenue); font-weight: 500; }

.plano-marco { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-xl); }
.plano-lienzo {
  position: relative; aspect-ratio: 1000 / 700; min-width: 640px; container-type: inline-size;
  border-radius: var(--r-xl); background-color: var(--superficie); box-shadow: var(--sombra-1);
  /* Puntos cada 50 unidades: dan escala sin competir con las mesas. */
  background-image: radial-gradient(circle, var(--linea) 1px, transparent 1.5px);
  background-size: 5% calc(5% * 1000 / 700);
  background-position: center;
  user-select: none; -webkit-user-select: none;
}
.plano-lienzo[data-editando] {
  background-image: radial-gradient(circle, var(--apagado) 1px, transparent 1.5px);
  box-shadow: 0 0 0 1.5px var(--atlantico), 0 0 0 6px var(--atlantico-suave);
}
.lienzo-vacio {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-2); color: var(--apagado); text-align: center; padding: var(--e-6);
}
.lienzo-vacio svg.icono { width: 36px; height: 36px; color: var(--linea); stroke-width: 1.5; }
.lienzo-vacio strong { color: var(--texto); font: 600 var(--t-medio)/1.3 var(--display); }

.mesa {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%;
  padding: 4px; border-radius: clamp(8px, 1.4cqi, 16px);
  background: var(--superficie-alzada); border: 1.5px solid var(--linea); color: var(--tinta);
  font-size: clamp(11px, 1.35cqi, 14px); line-height: 1.15; text-align: center; overflow: hidden; cursor: pointer;
  transition: border-color var(--rapido) var(--salida), background var(--rapido) var(--salida), box-shadow var(--medio) var(--salida);
  /* Cada mesa es su propio contenedor: lo que cabe dentro depende de lo que mide ella. */
  container-type: size;
}
.mesa--redonda { border-radius: 50%; }
.mesa:hover { border-color: var(--apagado); }
.mesa .nombre-mesa { color: var(--tenue); font-weight: 600; font-size: 0.9em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa .plazas { display: inline-flex; align-items: center; gap: 4px; font: 600 1.15em/1 var(--display); color: var(--tinta); }
.mesa .plazas svg.icono { width: 1em; height: 1em; color: var(--apagado); }
.mesa[data-estado="ocupada"] { background: var(--atlantico-suave); border-color: var(--atlantico); }
.mesa[data-estado="proxima"] { background: var(--atencion-suave); border-color: var(--atencion-borde); border-style: dashed; }
.ocupante {
  display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 3px 9px;
  border-radius: var(--r-pastilla); background: var(--atlantico); color: var(--sobre-atlantico);
  touch-action: none; cursor: grab;
}
.ocupante strong { font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocupante span { font-size: 0.85em; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mesa[data-estado="proxima"] .ocupante { background: var(--superficie); color: var(--atencion); box-shadow: 0 0 0 1px var(--atencion-borde); }
[data-arrastrando] { opacity: 0.35; }
/* Una mesa pequeña encoge la letra, pero sigue diciendo cuál es y quién la tiene; la hora,
   al tocarla. */
@container (max-width: 60px) {
  .ocupante { padding: 1px 6px; }
  .ocupante span { display: none; }
}
@container (max-height: 60px) {
  .mesa .nombre-mesa { font-size: 0.78em; }
  .mesa .plazas { font-size: 0.95em; }
  .ocupante { font-size: 0.85em; }
}
.mesa[data-destino="valida"] { border-color: var(--bien); box-shadow: 0 0 0 4px var(--bien-suave); }
.mesa[data-destino="invalida"] { border-color: var(--urgente); box-shadow: 0 0 0 4px var(--urgente-suave); }

/* Editar: se agarran las mesas, no se desplaza la página. */
.plano-lienzo[data-editando] .mesa { cursor: grab; touch-action: none; }
.mesa[data-agarrada] { cursor: grabbing; z-index: 2; box-shadow: var(--sombra-2); border-color: var(--atlantico); }
.tirador {
  position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 4px;
  border-right: 2.5px solid var(--atlantico); border-bottom: 2.5px solid var(--atlantico);
  cursor: nwse-resize; touch-action: none;
}
/* El dedo necesita más que los 14 px que se ven. */
.tirador::after { content: ""; position: absolute; inset: -12px; }
.mesa--redonda .tirador { right: 14%; bottom: 14%; }

.fantasma {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 14px;
  border-radius: var(--r-pastilla); background: var(--atlantico); color: var(--sobre-atlantico);
  box-shadow: var(--sombra-hoja); font-size: var(--t-pequeno); will-change: transform;
}
.fantasma strong { font-weight: 700; }

.bandeja {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4);
  border: 1.5px dashed var(--linea); border-radius: var(--r-l);
  transition: border-color var(--rapido) var(--salida), background var(--rapido) var(--salida);
}
.bandeja[data-destino] { border-color: var(--atlantico); background: var(--atlantico-suave); }
.bandeja-titulo { font-size: var(--t-pequeno); color: var(--tenue); margin-right: var(--e-2); }
.reserva-suelta {
  display: inline-flex; align-items: baseline; gap: var(--e-2); padding: 7px 14px; border-radius: var(--r-pastilla);
  background: var(--superficie); box-shadow: var(--sombra-1); font-size: var(--t-pequeno); color: var(--texto);
  touch-action: none; cursor: grab;
}
.reserva-suelta strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.agenda-mesa { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; padding: 0; margin: 0; }
.agenda-mesa li {
  display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m); background: var(--superficie-hundida);
}
.agenda-mesa li > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-pequeno); color: var(--tenue); }
.agenda-mesa li strong { font: 600 var(--t-medio)/1.2 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.agenda-mesa li small { color: var(--atencion); font-weight: 600; }
.agenda-mesa li a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; margin-top: 2px; }
.paso { display: flex; align-items: center; gap: var(--e-4); }
.cifra-paso { min-width: 2.5ch; text-align: center; font: 600 var(--t-cifra)/1 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ carta */

.buscador { flex: 1; max-width: 420px; }
.carta { display: flex; flex-direction: column; gap: var(--e-6); }
.categoria { display: flex; flex-direction: column; gap: var(--e-3); }
.categoria h2 { font-size: var(--t-medio); padding: 0 var(--e-1); }
.categoria-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 0 var(--e-1); }
.categoria-cabecera h2 { padding: 0; }
.categoria-cabecera small { display: block; color: var(--apagado); font-size: var(--t-pequeno); margin-top: 2px; }
.lista-extras { display: flex; flex-direction: column; gap: var(--e-2); }
.fila-extra { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px auto; align-items: center; gap: var(--e-2); }
.fila-extra .euro { color: var(--apagado); font-weight: 600; }
.entrada-precio { text-align: right; font-variant-numeric: tabular-nums; }
.platos { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.plato {
  display: flex; align-items: center; gap: var(--e-4); min-height: 60px; padding: 10px var(--e-5);
  border-top: 1px solid var(--linea-suave);
}
.plato:first-child { border-top: 0; }
.plato .nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plato .nombre strong { color: var(--tinta); font-weight: 600; }
.nombre--boton { align-self: stretch; justify-content: center; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; border-radius: var(--r-s); }
.nombre--boton:hover strong { color: var(--atlantico); }
.plato .nombre small { color: var(--apagado); font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plato .precio { color: var(--tenue); font-weight: 600; font-size: var(--t-pequeno); white-space: nowrap; }
.plato .precio.agotado { color: var(--urgente); }
.plato[data-agotado] .nombre strong { color: var(--apagado); text-decoration: line-through; text-decoration-color: var(--linea); }
.plato .fichas { display: flex; gap: var(--e-1); flex-wrap: wrap; justify-content: flex-end; }
.plato--editable { cursor: pointer; transition: background var(--rapido) var(--salida); }
.plato--editable:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--tinta)); }
.plato--editable[data-pulsado] { background: var(--superficie-hundida); }
.plato--editable > svg.icono { color: var(--apagado); }
.plato[data-sin-declarar] .nombre small { color: var(--atencion); font-weight: 600; }

.opciones { display: flex; flex-direction: column; border-radius: var(--r-m); background: var(--superficie-hundida); }
.opcion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea-suave); }
.opcion:first-child { border-top: 0; }
.opcion strong { display: block; color: var(--tinta); font-weight: 600; font-size: var(--t-pequeno); }
.opcion small { display: block; color: var(--apagado); font-size: var(--t-micro); line-height: 1.4; }

.leyenda { color: var(--tenue); font-size: var(--t-pequeno); }
.leyenda b { color: var(--tinta); }
.fichas-alergenos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e-2); }
.alergeno {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 10px 12px;
  border-radius: var(--r-m); border: 1.5px solid var(--linea); background: var(--superficie); text-align: left;
  transition: background var(--rapido) var(--salida), border-color var(--rapido) var(--salida), transform var(--rapido) var(--salida);
  touch-action: manipulation;
}
.alergeno[data-pulsado] { transform: scale(0.96); }
.alergeno strong { color: var(--tinta); font-weight: 600; font-size: var(--t-pequeno); }
.alergeno small { color: var(--apagado); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.alergeno[data-presencia="contiene"] { background: var(--urgente-suave); border-color: var(--urgente); }
.alergeno[data-presencia="contiene"] small { color: var(--urgente); }
.alergeno[data-presencia="trazas"] { background: var(--atencion-suave); border-color: var(--atencion); border-style: dashed; }
.alergeno[data-presencia="trazas"] small { color: var(--atencion); }
.resumen-alergenos { color: var(--tenue); font-size: var(--t-pequeno); font-weight: 600; }

/* ------------------------------------------------------------------ llamadas */

.filtros { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 calc(-1 * var(--e-1)); padding-inline: var(--e-1); }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 0 var(--e-4);
  border: 1px solid var(--linea); border-radius: var(--r-pastilla); background: var(--superficie);
  color: var(--texto); font-weight: 500; font-size: var(--t-pequeno); white-space: nowrap;
  transition: background var(--rapido) var(--salida), color var(--rapido) var(--salida), border-color var(--rapido) var(--salida);
}
.filtro:hover { border-color: var(--apagado); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); font-weight: 600; }
.filtro--secundario[aria-pressed="true"] { background: var(--prueba-suave); border-color: var(--prueba); color: var(--prueba); }

.barra-busqueda { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.barra-busqueda .buscador { flex: 1 1 260px; max-width: 360px; }
.barra-busqueda .dias { display: flex; gap: var(--e-2); }
.barra-busqueda .dia { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-pequeno); color: var(--tenue); font-weight: 500; }
.barra-busqueda .dia .entrada { width: auto; min-height: 40px; padding: 6px 10px; border-radius: var(--r-pastilla); font-variant-numeric: tabular-nums; }
.resumen-busqueda { font-size: var(--t-pequeno); color: var(--tenue); font-weight: 600; padding: 0 var(--e-1); }
.llamadas { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.llamadas-columna { display: flex; flex-direction: column; gap: var(--e-3); }
.llamadas-lista { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.llamadas-lista:empty { display: none; }
.llamada {
  display: flex; align-items: center; gap: var(--e-3); padding: 12px var(--e-4);
  border-top: 1px solid var(--linea-suave); cursor: pointer; transition: background var(--rapido) var(--salida);
}
.llamada:first-child { border-top: 0; }
.llamada:hover { background: color-mix(in srgb, var(--superficie) 96%, var(--tinta)); }
.llamada[data-pulsado] { background: var(--superficie-hundida); }
.llamada[aria-selected="true"] { background: var(--atlantico-suave); }
.llamada .quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.llamada .quien strong { color: var(--tinta); font-weight: 600; }
.llamada .quien small { color: var(--apagado); font-size: var(--t-pequeno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llamada .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.llamada .cuando { color: var(--apagado); font-size: var(--t-pequeno); white-space: nowrap; }
.marca-resultado {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--superficie-hundida); color: var(--apagado);
}
.marca-resultado--bien { background: var(--bien-suave); color: var(--bien); }
.marca-resultado--atencion { background: var(--atencion-suave); color: var(--atencion); }
.marca-resultado--accion { background: var(--atlantico-suave); color: var(--atlantico-tinta); }
.marca-resultado--urgente { background: var(--urgente-suave); color: var(--urgente); }

.llamada-detalle { position: sticky; top: 132px; min-height: 360px; border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-1); padding: var(--e-6); }
.llamada-detalle > .vacio { border: 0; min-height: 320px; }
.conversacion { display: flex; flex-direction: column; gap: var(--e-4); }
.conversacion-cabecera { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.conversacion-cabecera > div { flex: 1; min-width: 0; }
.conversacion-cabecera h2 { font-size: var(--t-titulo); letter-spacing: -0.015em; }
.conversacion-cabecera p { color: var(--apagado); font-size: var(--t-pequeno); }
.recado { align-items: center; }
.recado > div { flex: 1; }
.recado strong { display: block; }
.recado p { color: var(--texto); font-weight: 500; }
.notas-llamada { color: var(--apagado); font-size: var(--t-pequeno); }
.turnos { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-2); }
.turno { max-width: 82%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; font-size: var(--t-base); }
.turno--ia { align-self: flex-start; background: var(--superficie-hundida); color: var(--tinta); border-bottom-left-radius: 6px; }
.turno--cliente { align-self: flex-end; background: var(--atlantico); color: var(--sobre-atlantico); border-bottom-right-radius: 6px; }

/* ------------------------------------------------------------------ el local */

.ficha-local { display: flex; flex-direction: column; gap: var(--e-5); max-width: 880px; padding-bottom: var(--e-12); }
.seccion-local > header { margin-bottom: var(--e-4); }
.seccion-local > header p { margin-top: 2px; }
.seccion-local > .campo + *, .seccion-local > .opciones + * { margin-top: var(--e-4); }
.fila-campos--3 { grid-template-columns: 2fr 1fr 1.4fr; }
.fichas-pago { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Días de cierre: el calendario de la pared. Dos meses a la vista, que las vacaciones
   de Navidad caen entre dos; uno solo cuando no cabe. Lo cerrado, en el azul del panel:
   los días sueltos en círculo, las vacaciones como una banda de punta a punta. */
.calendario { display: flex; flex-direction: column; gap: var(--e-4); container-type: inline-size; }
.calendario-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.pista-calendario { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); color: var(--tenue); font-size: var(--t-pequeno); }
.enlace { padding: 0; border: 0; background: none; color: var(--atlantico); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.calendario-cuerpo { position: relative; }
.calendario-nav { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.calendario-nav .boton { pointer-events: auto; width: 36px; min-height: 36px; }
.calendario-meses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); }
.calendario .mes h3 { height: 36px; line-height: 36px; margin-bottom: var(--e-1); text-align: center; color: var(--tinta); font-size: var(--t-base); font-weight: 600; }
.calendario .mes h3::first-letter { text-transform: uppercase; }
.calendario .rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.calendario .dia-semana { height: 28px; display: grid; place-items: center; color: var(--apagado); font-size: var(--t-micro); font-weight: 600; }
.calendario .dia {
  position: relative; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--tinta); font: inherit; font-size: var(--t-pequeno); font-variant-numeric: tabular-nums;
}
.calendario .dia > span {
  position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: 2px auto;
  border-radius: 50%; transition: background var(--rapido) var(--salida), color var(--rapido) var(--salida);
}
.calendario .dia:hover:not(:disabled) > span { background: var(--superficie-hundida); }
.calendario .dia:focus-visible { outline: none; }
.calendario .dia:focus-visible > span { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--atlantico); }
.calendario .dia:disabled { cursor: default; opacity: 0.4; }
.calendario .dia[data-hoy] > span { color: var(--atlantico); font-weight: 700; }
/* La banda de las vacaciones; redondeada donde corta la semana o el mes. */
.calendario .dia:where([data-cerrado]:not([data-suelto]), [data-previa])::before { content: ""; position: absolute; inset: 2px 0; background: var(--atlantico-suave); }
.calendario .dia[data-previa]::before { background: color-mix(in srgb, var(--atlantico-suave) 55%, transparent); }
.calendario .dia[data-desde]::before { left: 50%; }
.calendario .dia[data-hasta]::before { right: 50%; }
.calendario .dia:is([data-col="0"], [data-primero])::before { border-top-left-radius: 19px; border-bottom-left-radius: 19px; }
.calendario .dia:is([data-col="6"], [data-ultimo])::before { border-top-right-radius: 19px; border-bottom-right-radius: 19px; }
.calendario .dia[data-cerrado] > span { color: var(--atlantico-tinta); font-weight: 600; }
.calendario .dia[data-cerrado]:hover:not(:disabled) > span { background: color-mix(in srgb, var(--atlantico) 16%, transparent); }
.calendario .dia:is([data-suelto], [data-desde], [data-hasta], [data-inicio]) > span { background: var(--atlantico); color: var(--sobre-atlantico); font-weight: 600; }
.calendario .dia:is([data-suelto], [data-desde], [data-hasta], [data-inicio]):hover:not(:disabled) > span { background: var(--atlantico-hover); }
.calendario .dia[data-inicio] > span { box-shadow: 0 0 0 4px var(--atlantico-suave); }
@container (max-width: 600px) {
  .calendario-meses { grid-template-columns: minmax(0, 1fr); }
  .calendario-meses > .mes + .mes { display: none; }
}
/* Lo marcado, debajo: tocar lleva a su mes; la × lo quita. */
.vista-cierres { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.vista-cierres:empty { display: none; }
.cierre {
  display: inline-flex; align-items: center; min-height: 34px; max-width: 100%; border-radius: 17px;
  background: var(--atlantico-suave); color: var(--atlantico-tinta); font-size: var(--t-pequeno); font-weight: 600;
}
.cierre .ir { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; padding: 7px 2px 7px 14px; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cierre .ir small { font-size: var(--t-micro); font-weight: 500; opacity: 0.8; }
.cierre .quitar { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 2px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.cierre .quitar:hover { background: color-mix(in srgb, var(--atlantico) 16%, transparent); }
.cierre .quitar svg.icono { width: 14px; height: 14px; }
.cierre--raro { background: var(--urgente-suave); color: var(--urgente); }

/* Otras preguntas: pregunta 1 — respuesta 1, pregunta 2 — respuesta 2… */
.cabecera-preguntas, .pregunta { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.5fr) 40px; gap: var(--e-3); }
.cabecera-preguntas { padding-bottom: var(--e-2); color: var(--texto); font-size: var(--t-pequeno); font-weight: 600; }
.cabecera-preguntas span:first-child { grid-column: 2; }
.preguntas { display: flex; flex-direction: column; gap: var(--e-3); }
.pregunta { align-items: start; }
.pregunta .numero { height: 42px; display: grid; place-items: center; color: var(--apagado); font-size: var(--t-pequeno); font-weight: 700; font-variant-numeric: tabular-nums; }
.pregunta textarea.entrada { min-height: 42px; resize: none; overflow: hidden; }
.pregunta .boton--icono { min-height: 42px; }
.preguntas + .boton { margin-top: var(--e-3); }
.horario { display: flex; flex-direction: column; margin-bottom: var(--e-4); }
.horario li { display: flex; justify-content: space-between; gap: var(--e-4); padding: 10px 0; border-top: 1px solid var(--linea-suave); font-size: var(--t-pequeno); }
.horario li:first-child { border-top: 0; }
.horario li strong { color: var(--tinta); font-weight: 600; }
.horario li span { color: var(--texto); }
.horario li[data-cerrado] span { color: var(--apagado); }
.editor-horario { display: flex; flex-direction: column; gap: var(--e-2); }
.dia-horario { display: grid; grid-template-columns: 96px 1fr; gap: var(--e-3); align-items: start; padding: var(--e-3) 0; border-top: 1px solid var(--linea-suave); }
.dia-horario:first-child { border-top: 0; }
.dia-horario > strong { color: var(--tinta); padding-top: 10px; font-size: var(--t-pequeno); }
.franjas { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.franja { display: flex; align-items: center; gap: var(--e-2); }
.franja .entrada { width: 112px; }
.franja span, .franjas .cerrado { color: var(--apagado); font-size: var(--t-pequeno); }
.franjas .cerrado { padding-top: 10px; }
.lista-personal { display: flex; flex-direction: column; margin-bottom: var(--e-3); }
.lista-personal li { display: flex; align-items: center; gap: var(--e-3); padding: 6px 0; color: var(--tinta); font-weight: 500; }
.lista-personal li span { flex: 1; }
.lista-personal li svg.icono { color: var(--apagado); }
.fila-anadir { display: flex; gap: var(--e-2); }
.fila-anadir .entrada { flex: 1; }
.ayuda { display: block; margin-top: var(--e-2); color: var(--apagado); font-size: var(--t-micro); }

/* La barra de guardar flota sobre el contenido y solo existe si hay algo que guardar. */
.barra-guardar {
  position: fixed; z-index: 35; bottom: var(--e-5); left: var(--ancho-lateral); right: 0; margin-inline: auto; width: max-content;
  display: flex; align-items: center; gap: var(--e-5); padding: 8px 8px 8px 18px;
  border-radius: var(--r-pastilla); background: var(--granito); color: #F4F5F3; box-shadow: var(--sombra-hoja);
  font-size: var(--t-pequeno); font-weight: 500;
}
.barra-guardar > span { display: inline-flex; align-items: center; gap: var(--e-2); }
.barra-guardar > div { display: flex; gap: var(--e-2); }
.barra-guardar .boton:not(.boton--primario) { --b-fondo: transparent; --b-texto: #F4F5F3; --b-borde: rgba(255, 255, 255, 0.22); }
.barra-guardar .boton--primario { --b-fondo: #3FA3B2; --b-texto: #0B1A1D; }

/* ------------------------------------------------------------------ menú flotante */

.menu-flotante {
  position: fixed; z-index: 50; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--r-l); background: var(--superficie-alzada); box-shadow: var(--sombra-hoja);
  will-change: transform, opacity;
}
.menu-flotante [role="menuitem"] {
  display: flex; align-items: center; gap: var(--e-3); min-height: 42px; padding: 0 var(--e-3);
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--tinta);
  font-weight: 500; font-size: var(--t-base); text-align: left; text-decoration: none;
}
.menu-flotante [role="menuitem"]:hover, .menu-flotante [role="menuitem"]:focus-visible { background: var(--superficie-hundida); outline: none; }
.menu-flotante [role="menuitem"] svg.icono { color: var(--apagado); }
.menu-flotante .peligro, .menu-flotante .peligro svg.icono { color: var(--urgente); }

/* ------------------------------------------------------------------ piezas sueltas */

.aviso--compacto { padding: var(--e-2) var(--e-3); font-size: var(--t-pequeno); font-weight: 600; }
.texto-hoja, .texto-confirmacion { color: var(--tenue); line-height: 1.55; margin-bottom: var(--e-5); }
.texto-confirmacion { font-size: var(--t-medio); }
.opciones-pausa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-5); }
.hoja .segmentado { display: flex; }
.hoja .segmentado button { flex: 1; }
.hoja > footer .boton { flex: 1; }
.solo-movil { display: none !important; }
.pastilla-servicio { border-radius: var(--r-pastilla); gap: var(--e-2); }

/* ------------------------------------------------------------------ móvil */

@media (max-width: 860px) {
  .solo-movil { display: inline-flex !important; }

  .navegador-dia { width: 100%; }
  .etiqueta-dia { flex: 1; }
  .barra-izquierda { width: 100%; }
  .barra-izquierda .segmentado { width: 100%; }
  .barra-izquierda .segmentado button { flex: 1; }
  .zonas { width: 100%; margin-inline: calc(-1 * var(--e-4)); padding-inline: var(--e-4); box-sizing: content-box; }
  .plano-controles { width: 100%; margin-left: 0; }
  .plano-controles > .boton:last-child { margin-left: auto; }
  .plano-marco { margin-inline: calc(-1 * var(--e-4)); padding-inline: var(--e-4); border-radius: 0; }
  .reserva {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "hora quien comensales" ". nota ficha";
    row-gap: 6px; padding: 12px var(--e-4);
  }
  .reserva .hora { grid-area: hora; align-self: start; padding-top: 2px; }
  .reserva .quien { grid-area: quien; }
  .reserva .comensales { grid-area: comensales; }
  .reserva .nota { grid-area: nota; }
  .reserva > .ficha { grid-area: ficha; justify-self: end; }
  .reserva .nota--vacia { display: none; }
  .solicitud-acciones { width: 100%; }
  .solicitud-acciones .boton { flex: 1; }
  .fila-campos--3 { grid-template-columns: 1fr 1fr; }
  .fila-campos--3 > :first-child { grid-column: 1 / -1; }
  .barra-guardar {
    left: var(--e-4); right: var(--e-4); width: auto; justify-content: space-between;
    bottom: calc(var(--alto-pestanas) + var(--e-3) + env(safe-area-inset-bottom));
  }
  .barra-guardar > span { display: none; }
  .barra-guardar > div { flex: 1; }
  .barra-guardar .boton { flex: 1; }
  .dia-horario { grid-template-columns: 1fr; gap: var(--e-1); }
  .calendario-barra .segmentado { width: 100%; }
  .calendario-barra .segmentado button { flex: 1; }
  .cabecera-preguntas { display: none; }
  .pregunta { grid-template-columns: 20px minmax(0, 1fr) 40px; grid-template-areas: "numero pregunta quitar" ". respuesta respuesta"; row-gap: var(--e-2); }
  .pregunta + .pregunta { padding-top: var(--e-3); border-top: 1px solid var(--linea-suave); }
  .pregunta .numero { grid-area: numero; justify-content: start; }
  .pregunta input { grid-area: pregunta; }
  .pregunta textarea { grid-area: respuesta; }
  .pregunta .boton--icono { grid-area: quitar; }
  .dia-horario > strong { padding-top: 0; }
  .llamadas { grid-template-columns: minmax(0, 1fr); }
  .llamada-detalle { display: none; }
  .hoja .conversacion-cabecera h2 { display: none; }
  .filtros { margin-inline: calc(-1 * var(--e-4)); padding-inline: var(--e-4); }
  .barra-busqueda .buscador { flex-basis: 100%; max-width: none; }
  .fila-pedido { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; padding: 12px var(--e-4); gap: var(--e-3); }
  .fila-pedido .hora { padding-top: 2px; }
  .fila-pedido .lado { flex-direction: column; align-items: flex-end; gap: 4px; }
  .barra-busqueda .dias { flex: 1; }
  .barra-busqueda .dia { flex: 1; }
  .barra-busqueda .dia .entrada { flex: 1; min-width: 0; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .cabecera { padding: calc(var(--e-5) + env(safe-area-inset-top)) var(--e-4) var(--e-3); }
  .cabecera h1 { font-size: 1.625rem; }
  .contenido { padding: var(--e-2) var(--e-4) calc(var(--alto-pestanas) + var(--e-8) + env(safe-area-inset-bottom)); }
  .cifras { gap: var(--e-4); }

  /* Barra de pestañas: material translúcido, el contenido se ve pasar por debajo. */
  .pestanas {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--alto-pestanas) + env(safe-area-inset-bottom));
    padding: 6px 4px env(safe-area-inset-bottom);
    background: var(--material); -webkit-backdrop-filter: var(--material-desenfoque); backdrop-filter: var(--material-desenfoque);
    border-top: 1px solid var(--material-borde);
  }
  .pestanas a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: var(--r-m); color: var(--apagado); font-size: 0.6875rem; font-weight: 600; text-decoration: none;
  }
  .pestanas a svg.icono { width: 24px; height: 24px; }
  .pestanas a[aria-current="page"] { color: var(--atlantico); }
  .pestanas .contador {
    position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-pastilla); display: grid; place-items: center;
    background: #C9534B; color: #fff; font-size: 0.625rem; font-weight: 700;
  }

  /* Hoja: sube desde abajo y se despide deslizando hacia abajo. */
  .hoja {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: calc(100dvh - 48px - env(safe-area-inset-top));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hoja .asa { display: block; width: 100%; padding: 10px 0 2px; border: 0; background: transparent; cursor: grab; touch-action: none; }
  .hoja .asa::before { content: ""; display: block; width: 38px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--linea); }
  .hoja > header { padding: var(--e-2) var(--e-5) var(--e-3); touch-action: none; }
  .hoja .cuerpo { padding: var(--e-2) var(--e-5) var(--e-6); }
  .hoja > footer { padding: var(--e-3) var(--e-5) var(--e-4); }

  .tostadas { bottom: calc(var(--alto-pestanas) + var(--e-4) + env(safe-area-inset-bottom)); width: calc(100% - 32px); }
}

/* ------------------------------------------------------------------ movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .boton[data-pulsado], .boton:active { transform: none; }
}