@charset "utf-8";
/* Taberna Alameda
   ---------------------------------------------------------------------------
   Dos tipos, dos colores. El único color de todo el sitio es el amarillo del
   Solete: viene de la imagen, no de la paleta.

   El dibujo de la fachada solo aparece en la portada, y entero. Identifica la
   portada; repetirlo en cada página lo gastaría.
   ------------------------------------------------------------------------- */

/* --- Tipografías autoalojadas. Ninguna petición a terceros. ------------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('/fonts/ebgaramond.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #fcfbf8;
  --blanco: #ffffff;
  --tinta: #171614;
  --apagado: #6b6459;
  --tenue: #a29a8c;
  --filete: #e3ded3;
  --hueco: #f1ede4;

  --display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --marco: clamp(1.375rem, 5vw, 4.5rem);
  --ancho: 82rem;
  --barra-llamar: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* La barra fija de llamar reserva aquí su altura: así nunca puede acabar
     tapando el contenido que más queremos que se lea. */
  padding-bottom: calc(var(--barra-llamar) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--apagado); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: .75rem 1rem;
}
.saltar:focus { left: 0; }

.etiqueta {
  margin: 0 0 .9rem;
  font-size: .65625rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tenue); font-weight: 500;
}
.nota { margin: 1rem 0 0; font-size: .78125rem; color: var(--tenue); }

/* --- Aviso de borrador. Solo en builds de desarrollo. ------------------- */
.aviso-dev {
  background: #7d1a12; color: #fff; padding: .5rem var(--marco);
  font-size: .8125rem; line-height: 1.5;
}
.aviso-dev summary { cursor: pointer; font-weight: 600; }
.aviso-dev ul { margin: .6rem 0 .3rem; padding-left: 1.1rem; }
.aviso-dev li { margin-bottom: .35rem; }
.aviso-dev span { opacity: .8; }
mark.falta {
  background: #ffe9a8; color: #6b2d00; padding: 0 .25em;
  border-bottom: 2px dashed #b3600b; font-weight: 600;
}

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; min-height: 48px; padding: .8rem 1.4rem;
  font-family: var(--texto); font-size: .90625rem; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.boton__icono { display: inline-flex; width: 1.05em; height: 1.05em; }
.boton__icono svg { width: 100%; height: 100%; }
.boton--solido { background: var(--tinta); color: var(--papel); }
.boton--solido:hover { background: #322c26; color: var(--papel); }
.boton--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }

/* --- Barra superior ----------------------------------------------------- */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
  padding: 0 var(--marco); min-height: 78px;
  border-bottom: 1px solid var(--filete);
}
.barra__marca {
  order: 1;
  font-family: var(--display); font-size: 1.1875rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.barra__nav { order: 2; display: flex; gap: 2.125rem; font-size: .84375rem; }
.barra__enlace { color: var(--apagado); }
.barra__enlace.es-activa { color: var(--tinta); }
.barra__derecha {
  order: 3; display: flex; align-items: center; gap: 1.625rem;
}
.barra__tel {
  font-size: .875rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.barra__idiomas {
  display: flex; gap: .5rem; font-size: .75rem; letter-spacing: .1em;
  color: var(--tenue);
}
.barra__idiomas .es-activa { color: var(--tinta); }

/* --- Estado abierto / cerrado ------------------------------------------- */
/* Sale vacío del servidor y lo rellena el navegador: si la página se sirve
   cacheada durante semanas, no puede mentir. */
.estado { display: none; align-items: center; gap: .5rem; font-size: .8125rem; }
.estado[data-listo] { display: inline-flex; }
.estado__punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tenue);
}
.estado[data-abierto='1'] .estado__punto { background: #4c6b52; }
.estado__texto { color: var(--tinta); }
.estado__detalle { color: var(--tenue); }
.estado--barra .estado__detalle { display: none; }

.estado--pastilla {
  gap: .55rem; padding: .55rem 1.05rem;
  border: 1px solid var(--filete); background: var(--blanco);
  font-size: .8125rem;
}
.estado--pastilla[data-listo] { display: inline-flex; }

/* --- Portada: la fachada como lámina centrada --------------------------- */
.lamina {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.25rem) var(--marco) 0;
}
.lamina__eyebrow {
  margin: 0 0 1.625rem;
  font-size: .71875rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tenue);
}
.lamina__titulo {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 4.625rem); line-height: 1;
  letter-spacing: .01em;
}
.lamina__sub {
  margin: 1.125rem 0 0; font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.45;
  color: var(--apagado);
}
.lamina__alzado {
  display: block; width: min(51.25rem, 100%);
  margin: clamp(1.75rem, 3.5vw, 2.375rem) 0 0;
}
.lamina__pintxos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.125rem; margin: 1.875rem 0 0; padding: 0; list-style: none;
  font-size: .71875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--apagado);
}
.lamina__pintxos li + li::before {
  content: '·'; color: var(--filete); margin-right: 1.125rem;
}

/* Índice de páginas: en móvil hace de navegación, en escritorio sobra
   porque ya está la barra de arriba. */
.indice { display: none; width: 100%; margin-top: 1.875rem; }
.indice__fila {
  display: flex; align-items: baseline; gap: .875rem;
  padding: 1.0625rem .125rem; border-bottom: 1px solid var(--filete);
  text-align: left;
}
.indice:first-child { border-top: 1px solid var(--filete); }
.indice__num {
  font-size: .65625rem; letter-spacing: .18em; color: var(--tenue);
  font-variant-numeric: tabular-nums; width: 1.375rem;
}
.indice__nombre { font-family: var(--display); font-size: 1.3125rem; }

/* --- Franja de datos de la portada -------------------------------------- */
.datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem;
  max-width: var(--ancho); margin: 0 auto;
  padding: 2.125rem var(--marco) 2.75rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  border-top: 1px solid var(--filete);
}
.datos__direccion { margin: 0; font-size: .875rem; line-height: 1.65; }
.datos__cerca { margin: .75rem 0 0; font-size: .8125rem; color: var(--apagado); }
/* Las dos distinciones. El Solete lleva su sello oficial, que viene con
   transparencia: se apoya directo sobre el crema, sin tarjeta. La de Tapas va
   solo tipográfica porque no hay logotipo utilizable; cuando lo haya, entra
   con el mismo hueco que el sol. */
.distincion { display: flex; align-items: center; gap: 1rem; }
.distincion + .distincion {
  margin-top: 1.125rem; padding-top: 1.125rem;
  border-top: 1px solid var(--filete);
}
.distincion__sello { display: block; flex: none; }
/* La portada de la guía, como objeto: pequeña y con filete, para que lea como
   un libro sobre la página y no como una mancha de color del diseño. */
.distincion__portada {
  display: block; flex: none;
  border: 1px solid var(--filete);
}
.distincion__texto { display: flex; flex-direction: column; gap: .1rem; }
.distincion__guia {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tenue); font-weight: 500;
}
.distincion__nombre {
  font-family: var(--display); font-size: 1.375rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.distincion__pie {
  margin-top: .1rem; font-size: .78125rem; line-height: 1.45;
  color: var(--apagado);
}

/* --- Horario ------------------------------------------------------------ */
.horario { display: flex; flex-direction: column; gap: .6875rem; }
.horario__fila {
  display: flex; justify-content: space-between; gap: 1.5rem;
  font-size: .90625rem; font-variant-numeric: tabular-nums;
}
.horario__dia { color: var(--apagado); }
.horario__cerrado { color: var(--tenue); }
.horario__fila[data-hoy] .horario__dia,
.horario__fila[data-hoy] .horario__horas { color: var(--tinta); font-weight: 500; }

/* --- Páginas interiores ------------------------------------------------- */
.pagina {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 4.875rem) var(--marco) clamp(3rem, 6vw, 5rem);
}
.pagina--estrecha { max-width: 55rem; }
.pagina__eyebrow {
  margin: 0 0 1.25rem;
  font-size: .71875rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tenue);
}
.pagina__titulo {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.375rem, 5vw, 3.5rem); line-height: 1.02;
}
.pagina__entrada {
  margin: 1.375rem 0 0; font-family: var(--display);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem); line-height: 1.55;
  color: var(--apagado); max-width: 35rem;
}

/* --- Actos y lunch ------------------------------------------------------ */
/* No hay menú ni precios porque cada acto es distinto: la acción de la página
   es llamar, así que el teléfono manda sobre el resto. */
.encargo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.75rem; background: var(--hueco);
}
.encargo__texto {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.5;
  max-width: 28rem;
}
.encargo__tel { flex: none; font-variant-numeric: tabular-nums; }

.etiqueta--seccion { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

.actos {
  list-style: none; margin: .875rem 0 0; padding: 0;
  border-top: 1px solid var(--filete);
}
.acto { border-bottom: 1px solid var(--filete); }

/* Cuando hay vídeos, los actos se reparten en rejilla en vez de en lista. */
/* Centrados: dos columnas de 21rem dejan aire de sobra dentro de la caja de
   texto, y pegados a la izquierda el hueco de la derecha canta. */
.actos--reels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 21rem));
  justify-content: center;
  gap: 2.5rem 2rem; border-top: 0; margin-top: 2rem;
}
.actos--reels .acto { border-bottom: 0; }
.actos--reels .acto__enlace {
  grid-template-columns: 1.625rem 1fr; gap: .25rem 1rem;
  padding: .875rem .125rem 0;
}
.actos--reels .acto__ig { grid-column: 2; }

/* El hueco del reproductor: vacío no ocupa nada, así que la página se ve
   igual de bien sin consentir. */
.reel:empty { display: none; }
/* La proporción de un reel más la barra que Instagram le pone encima y
   debajo. Si al verlo con vídeos reales quedara recortado o con hueco, se
   ajusta aquí y en ningún sitio más. */
.reel {
  display: block; width: 100%; max-width: 21rem;
  aspect-ratio: 336 / 690; background: var(--hueco);
}
.reel iframe { display: block; width: 100%; height: 100%; border: 0; }
.acto__enlace {
  display: grid; grid-template-columns: 1.625rem 1fr auto;
  align-items: baseline; gap: 0 1.625rem; padding: 1.375rem .125rem;
}
.acto__enlace:hover .acto__nombre { color: var(--apagado); }
.acto__num {
  font-size: .6875rem; letter-spacing: .18em; color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.acto__nombre {
  font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.2;
}
.acto__ig {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78125rem; color: var(--apagado); white-space: nowrap;
}
.acto__ig .boton__icono { width: .95em; height: .95em; }

/* --- Menú del día ------------------------------------------------------- */
.pagina--menu, .pagina--kokapena {
  display: grid; gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.pagina--menu { grid-template-columns: minmax(0, 1fr) 23.75rem; }
.menu__cuerpo {
  margin: 1.875rem 0 0; font-family: var(--display);
  font-size: clamp(1.1875rem, 2.4vw, 1.5625rem); line-height: 1.5;
  max-width: 32.5rem;
}
.pagina--menu .boton--solido { margin-top: 2.375rem; }
.menu__horario {
  margin-top: 2.5rem; padding-top: 1.625rem;
  border-top: 1px solid var(--filete); max-width: 27rem;
}

/* La carta del día. Todo lo pone el navegador desde nuestra propia API, así
   que se ve sin consentir nada. Las secciones sin platos salen ocultas y no
   dejan hueco. */
.menu__hoy { align-self: start; }
.carta {
  padding: 1.75rem 1.875rem 1.625rem;
  background: var(--hueco);
  border-top: 2px solid var(--tinta);
}
.carta__fecha { margin: 0 0 1.25rem; }
.carta__seccion + .carta__seccion {
  margin-top: 1.375rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
}
.carta__titulo {
  margin: 0 0 .625rem;
  font-family: var(--texto); font-weight: 500;
  font-size: .65625rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teja, #9e4128);
}
.carta__platos { list-style: none; margin: 0; padding: 0; }
.carta__platos li {
  font-family: var(--display); font-size: 1.1875rem; line-height: 1.5;
}
.carta__nota {
  margin: 1.375rem 0 0; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  font-size: .8125rem; color: var(--apagado);
}
.menu__respaldo {
  margin: 0; font-size: .875rem; line-height: 1.6; color: var(--apagado);
}
.menu__respaldo a {
  color: var(--tinta); border-bottom: 1px solid var(--filete);
}
.menu__respaldo a:hover { border-bottom-color: var(--tinta); }

/* La publicación de Instagram, en su propia banda al final. Sale oculta: si
   no hay publicación no queda ni rastro ni hueco. */
.banda-ig {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.25rem;
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--marco) clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--filete);
}
.banda-ig[hidden] { display: none; }
.banda-ig .etiqueta { margin: 0; }
.banda-ig__post {
  width: 100%; max-width: 21rem;
  aspect-ratio: 336 / 690; background: var(--hueco);
}
.banda-ig__post:empty { display: none; }
.banda-ig__post iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Dónde estamos ------------------------------------------------------ */
.pagina--kokapena { grid-template-columns: 26.25rem minmax(0, 1fr); }
.kokapena__direccion {
  margin: 1.75rem 0 0; font-family: var(--display);
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem); line-height: 1.5;
}
.kokapena__cerca { margin: .75rem 0 0; font-size: .875rem; color: var(--apagado); }
.kokapena__acciones { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.875rem; }
.kokapena__tel { font-variant-numeric: tabular-nums; }
.kokapena__horario {
  margin-top: 2.75rem; padding-top: 1.625rem; border-top: 1px solid var(--filete);
}

/* La foto, contenida: a 880 px no aguanta un hero a pantalla completa. */
.familia { margin: 0; }
.familia img { display: block; width: 100%; max-width: 45rem; }
.familia__pie {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; margin-top: 1rem; max-width: 45rem;
  font-family: var(--display); font-size: 1.25rem;
}
.familia__desde {
  font-family: var(--texto); font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tenue);
}

/* --- Páginas legales ---------------------------------------------------- */
.legal { max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 4.5vw, 4rem) var(--marco) clamp(3rem, 6vw, 5rem); }
.legal__titulo {
  margin: 0 0 2.25rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05;
}
.legal__seccion { margin-bottom: 2.25rem; }
.legal__seccion h2 {
  margin: 0 0 .625rem; font-family: var(--display); font-weight: 500;
  font-size: 1.3125rem;
}
.legal__seccion p { margin: 0 0 .8rem; font-size: .90625rem; line-height: 1.7; }
.legal__seccion code {
  font-size: .875em; background: var(--hueco); padding: .1em .35em;
}
.legal__revocar { margin-top: 2.25rem; }

/* --- Pie ---------------------------------------------------------------- */
.pie { border-top: 1px solid var(--filete); }
.pie__interior {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.25rem 2.5rem; flex-wrap: wrap;
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.75rem var(--marco) 2.5rem;
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; font-size: .8125rem; }
.pie__enlaces a { color: var(--apagado); }
.pie__enlaces a:hover { color: var(--tinta); }
.pie__creditos { margin: 0; font-size: .75rem; color: var(--tenue); }

/* --- Diálogo de cookies ------------------------------------------------- */
/* Se decide una vez, al entrar, y el resto del sitio queda limpio. No se
   cierra solo ni con un aspa: hay que elegir. Pero las dos salidas valen —el
   consentimiento tiene que ser libre—, y quien rechaza navega igual.

   Mientras está abierto, la barra fija de llamar no se renderiza, así que no
   pueden solaparse. */
.cookies {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--marco);
}
/* Imprescindible: `display: flex` de una clase gana al `display: none` que el
   navegador aplica a [hidden], así que sin esto el diálogo NO se cierra. */
.cookies[hidden] { display: none; }
.cookies__fondo {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--tinta) 55%, transparent);
  backdrop-filter: blur(3px);
}
.cookies__caja {
  position: relative;
  width: min(34rem, 100%); max-height: 100%; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--filete);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgb(23 22 20 / .22);
}
.cookies__titulo {
  margin: 0 0 .875rem; font-family: var(--display); font-weight: 400;
  font-size: 1.75rem; line-height: 1.1;
}
.cookies__cuerpo {
  margin: 0; font-size: .90625rem; line-height: 1.65; color: var(--apagado);
}
.cookies__enlace { margin: .875rem 0 0; font-size: .8125rem; }
.cookies__enlace a {
  color: var(--apagado); border-bottom: 1px solid var(--filete);
}
.cookies__enlace a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.cookies__botones {
  display: flex; gap: .625rem; margin-top: 1.75rem;
}
.cookies__botones .boton { flex: 1; }

/* --- Barra fija de llamar ----------------------------------------------- */
.barra-llamar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .75rem var(--marco) calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--papel); border-top: 1px solid var(--filete);
}
.barra-llamar__boton { width: 100%; font-variant-numeric: tabular-nums; }

/* --- Adaptación --------------------------------------------------------- */
@media (min-width: 981px) {
  /* En escritorio el teléfono está siempre visible en la barra. */
  .barra-llamar { display: none !important; }
  .estado--pastilla { display: none !important; }
  .indice { display: none !important; }
}

@media (max-width: 980px) {
  .barra { min-height: 0; padding-top: .5rem; padding-bottom: 0; gap: .75rem 1.5rem; }
  .barra__marca { font-size: .9375rem; }
  .barra__nav {
    order: 4; flex-basis: 100%;
    gap: 1.25rem; font-size: .78125rem;
    padding: .75rem 0; border-top: 1px solid var(--filete);
  }
  .barra__derecha { gap: 1rem; }
  .barra__tel { display: none; }
  .estado--barra { display: none !important; }

  /* En la portada el índice hace de navegación, así que la barra sobra. */
  .pagina-home .barra__nav { display: none; }
  .pagina-home .barra { padding-bottom: .5rem; }

  .indice { display: block; border-top: 1px solid var(--filete); }
  .estado--pastilla { margin-top: 1.375rem; }

  .datos { grid-template-columns: 1fr; gap: 2.25rem; }
  .pagina--menu, .pagina--kokapena { grid-template-columns: 1fr; }
  .acto__enlace { grid-template-columns: 1.375rem 1fr; gap: .25rem .875rem; }
  .acto__ig { grid-column: 2; }
  .actos--reels { grid-template-columns: minmax(0, 21rem); gap: 2rem; }
  .encargo { padding: 1.375rem; }
  .encargo__tel { width: 100%; }
  .familia img, .familia__pie { max-width: none; }
}

@media (max-width: 560px) {
  .cookies__botones { flex-direction: column-reverse; }
  .kokapena__acciones .boton { flex: 1 1 100%; }
}


/* --- Panel del menú del día --------------------------------------------- */
/* Interno, no se enlaza desde ninguna página. Lo usa cada mañana alguien que
   no es técnico: un campo grande, un botón grande y nada más. */
.admin {
  max-width: 34rem; margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) var(--marco) clamp(3rem, 8vw, 5rem);
}
/* Qué hay publicado ahora mismo. Es la primera pregunta de quien entra. */
.admin__ahora {
  margin: 1.25rem 0 0; padding: .875rem 1.125rem;
  font-size: .875rem; line-height: 1.5;
  background: var(--hueco); border-left: 3px solid var(--tenue);
}
.admin__ahora[data-tipo="lleno"] { border-left-color: #4c6b52; }
.admin__ahora[data-tipo="error"] { border-left-color: #9e4128; }

/* El aviso de guardado va pegado al botón, no arriba: en el móvil, tras
   rellenar los campos, arriba queda fuera de pantalla y parece que al pulsar
   no ha pasado nada. */
.admin__estado {
  margin: 0; padding: .875rem 1.125rem;
  font-size: .90625rem; border: 1px solid var(--filete);
}
.admin__estado[data-tipo="ok"] {
  border-color: #4c6b52; color: #33513a; background: #f2f6f2;
}
.admin__estado[data-tipo="error"] {
  border-color: #9e4128; color: #9e4128; background: #fbf2ef;
}
.admin__pista { font-size: .75rem; color: var(--tenue); margin-top: -.25rem; }
.admin__form {
  display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem;
}
.admin__campo { display: flex; flex-direction: column; gap: .4rem; }
.admin__campo .etiqueta { margin: 0; }
.admin__campo textarea,
.admin__campo input {
  width: 100%; padding: .875rem 1rem;
  font-family: var(--texto); font-size: 1rem; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--filete); border-radius: 0;
}
.admin__campo textarea {
  font-family: var(--display); font-size: 1.0625rem; line-height: 1.6;
  resize: vertical; min-height: 9rem;
}
.admin__campo textarea:focus,
.admin__campo input:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.admin__guardar { width: 100%; min-height: 56px; font-size: 1rem; }
.admin__guardar[disabled] { opacity: .5; cursor: default; }
.admin__pie {
  margin: 2rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--tenue);
}

/* Bloques de después del formulario: exportar la imagen y quitar el menú. */
.admin__bloque {
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--filete);
}
.admin__bloque .etiqueta { margin: 0; }
.admin__bloque .admin__pista { margin: -.35rem 0 .25rem; }
.admin__ancho { width: 100%; }

.admin__imagen { display: flex; flex-direction: column; gap: 1rem; }
.admin__galeria { display: flex; flex-direction: column; gap: 1.5rem; }
.admin__hoja { display: flex; flex-direction: column; gap: .625rem; }
.admin__hoja img {
  display: block; width: 100%; border: 1px solid var(--filete);
}

/* Quitar el menú borra lo publicado: se separa del resto y se marca. */
.admin__bloque--peligro { border-top-color: #e0c3b8; }
/* «Especial fiestas»: aspecto de botón, checkbox de verdad por debajo, para
   que siga funcionando con teclado y con lector de pantalla. El estado lo
   marca admin.js con [data-activo] y no con :has(), que en los iPhone algo
   antiguos —que es justo con lo que se escribe el menú— no existe. */
.admin__interruptor {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem .9rem; border: 1px solid var(--filete);
  cursor: pointer; user-select: none; font-size: .95rem;
}
.admin__interruptor input { width: 1.05rem; height: 1.05rem; margin: 0; }
.admin__interruptor[data-activo] {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}
.admin__interruptor:focus-within { outline: 2px solid var(--tinta);
  outline-offset: 2px; }
.admin__campo[hidden] { display: none; }

.admin__borrar { color: #9e4128; border-color: #d9b3a6; }
.admin__borrar:hover { background: #9e4128; color: var(--papel); border-color: #9e4128; }
.admin__borrar[data-confirmando] {
  background: #9e4128; color: var(--papel); border-color: #9e4128;
}

/* --- La hoja impresa ----------------------------------------------------- */
/* Solo existe al imprimir. Se deja al navegador paginar: si el menú no cabe
   en un folio pasa al siguiente, y las secciones no se parten por la mitad. */
.impreso { display: none; }

@media print {
  /* Fuera todo lo demás: el panel no se imprime. */
  body > *:not(.impreso) { display: none !important; }

  @page { size: A4; margin: 18mm 20mm; }

  html, body { background: #fff; }
  .impreso {
    display: block; color: #000;
    font-family: var(--texto);
  }
  .impreso__marca {
    margin: 0 0 6mm; font-size: 10pt; letter-spacing: .22em;
    text-transform: uppercase; color: #555;
  }
  .impreso__titulo {
    margin: 0; font-family: var(--display); font-weight: 400;
    font-size: 34pt; line-height: 1;
  }
  .impreso__fecha {
    margin: 3mm 0 0; font-size: 11pt; color: #555;
  }
  .impreso__fecha[hidden], .impreso__marca[hidden] { display: none; }

  /* El salto entre hojas. Lo pone admin.js con [data-rompe]: si no hay
     postres no hay segunda hoja que valga, y todo se queda en un folio. */
  .impreso__hoja[data-rompe] { break-before: page; page-break-before: always; }
  .impreso__hoja[data-rompe] .impreso__fecha { margin-top: 2mm; }
  .impreso__seccion {
    margin-top: 9mm; padding-top: 4mm; border-top: 1px solid #000;
    /* Que una sección no se parta entre dos folios. */
    break-inside: avoid; page-break-inside: avoid;
  }
  .impreso__seccion:first-of-type { border-top-width: 1.5pt; }
  .impreso__titulo-seccion {
    margin: 0 0 3mm; font-size: 9pt; letter-spacing: .2em;
    text-transform: uppercase; color: #000; font-weight: 600;
  }
  .impreso__platos { list-style: none; margin: 0; padding: 0; }
  /* 15pt y con aire. Se probó a encoger la letra para que el pie cupiera
     siempre en el primer folio, y se descartó: esto se lee de pie y en una
     mesa. Si un menú largo se lleva el dibujo y el QR a una segunda hoja, se
     acepta; la letra legible vale más que ahorrar un folio. */
  .impreso__platos li {
    font-family: var(--display); font-size: 15pt; line-height: 1.55;
  }
  .impreso__nota {
    margin: 8mm 0 0; padding-top: 4mm; border-top: 1px solid #999;
    font-size: 10.5pt; color: #333;
  }
  .impreso__nota[hidden] { display: none; }

  /* El aviso de alérgenos, discreto pero legible: no es letra pequeña de
     contrato, es lo que tiene que leer quien es alérgico. */
  .impreso__alergenos {
    margin: 7mm 0 0; font-size: 9.5pt; line-height: 1.5; color: #333;
  }

  /* El pie: la fachada a un lado y el QR al otro, alineados por abajo. */
  .impreso__pie {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 8mm; margin-top: 10mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Pequeño a propósito: el dibujo tiene mucha tinta y esto se imprime a
     diario. Es una firma, no una ilustración a toda página. */
  .impreso__fachada { display: block; width: 46mm; margin: 0; }
  .impreso__qr { text-align: center; flex: 0 0 auto; }
  /* 23 mm. Con la zona de silencio recortada a 2 módulos son 33 de lado, a
     0,70 mm cada uno. Se probó a 20 mm y con 4 de silencio: sobre el papel
     salía a 0,54 mm y un lector exigente ya fallaba. */
  .impreso__qr img { display: block; width: 23mm; height: 23mm; }
  .impreso__qr p {
    margin: 2mm 0 0; font-size: 8pt; letter-spacing: .06em; color: #555;
  }
}