/* ==========================================================================
   carta.css — La plantilla única de las cartas digitales.
   --------------------------------------------------------------------------
   UNA SOLA PLANTILLA PARA TODOS
   El restaurante elige el color y nada más. Los dos tonos llegan desde PHP como
   variables (--carta-principal y --carta-suave) y salen de una paleta cerrada de
   siete colores oscuros, elegidos para que el texto blanco encima siempre se
   lea. Un selector de color libre acaba, tarde o temprano, en una carta amarillo
   limón con letras blancas; y la llamada de teléfono la recibimos nosotros.

   MÓVIL PRIMERO
   El 99 % de quien abre esto lo hace con el móvil en la mano, sentado a la mesa.
   Todo está pensado a 360 px de ancho; el escritorio solo centra la columna.
   ========================================================================== */

:root {
  --carta-principal: #6E1F2A;
  --carta-suave: #F7F0F1;
  --carta-tinta: #1D1B1A;
  --carta-gris: #6B6560;
  --carta-linea: rgba(0, 0, 0, .12);
}

* { box-sizing: border-box; }

body.carta {
  margin: 0;
  background: #FFFDFB;
  color: var(--carta-tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body.carta a { color: inherit; }

/* ---------- Cabecera ---------- */

.carta-hero {
  background: var(--carta-principal);
  color: #fff;
  padding: 2.2rem 1.25rem 1.9rem;
  text-align: center;
  position: relative;          /* ancla del selector de idioma */
}

/* ---------------------------------------------------------------------------
   Idiomas
   Dentro de la cabecera, debajo del nombre y el teléfono, todos a la vista.
   No es un desplegable: el turista que no habla español no tiene que adivinar
   que ahí dentro hay algo, ve su bandera y pulsa.
   --------------------------------------------------------------------------- */
.carta-idiomas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.1rem;
}

.carta-idioma {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  /* 38 px de alto: se pulsa con el pulgar sin apuntar */
  min-height: 38px;
  padding: .35rem .7rem;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  /* Velo oscuro, no blanco (13/10/2026): el blanco al 13 % aclaraba el color del restaurante y,
     con los más claros (cobre, o uno propio en el límite), el texto se quedaba por debajo de 4,5:1. */
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.carta-idioma:hover { background: rgba(0, 0, 0, .28); }

/* El que se está viendo, en negativo: se distingue de un vistazo sin leer. */
.carta-idioma.is-activo {
  background: #fff;
  border-color: #fff;
  color: var(--carta-principal);
  font-weight: 700;
}

.carta-idioma__bandera { font-size: 1.05rem; line-height: 1; }

/* En un móvil estrecho con cinco idiomas, el nombre completo parte la fila en
   tres. Se queda la bandera y el código del idioma no hace falta: el nombre
   cabe hasta en cuatro idiomas y, en cinco, dos filas tampoco molestan. */
@media (max-width: 360px) {
  .carta-idioma { padding: .3rem .55rem; font-size: .8rem; }
}

/* Un precio es LTR aunque la carta sea RTL: sin esto, "8,50 €" se lee "€ 8,50"
   porque el navegador reordena el simbolo junto al texto arabe. */
[dir="rtl"] .plato__precio,
[dir="rtl"] .menu-cab__precio,
[dir="rtl"] .carta-tab__precio {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Los platos sin traducir siguen en español dentro de una carta en árabe.
   plaintext hace que cada texto decida su direccion por su primera letra: el
   arabe se lee de derecha a izquierda y el español de izquierda a derecha, cada
   uno con sus puntos y comas en su sitio. */
[dir="rtl"] .plato__nombre,
[dir="rtl"] .plato__desc,
[dir="rtl"] .carta-seccion__titulo,
[dir="rtl"] .carta-seccion__desc,
[dir="rtl"] .carta-menu,
[dir="rtl"] .menu-cab__incluye,
[dir="rtl"] .menu-cab__horario,
[dir="rtl"] .carta-pie__nota {
  unicode-bidi: plaintext;
}

.carta-hero__logo {
  max-height: 72px;
  max-width: 70%;
  margin-bottom: .9rem;
}

.carta-hero__nombre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: .01em;
}

.carta-hero__datos {
  margin: .7rem 0 0;
  font-size: .88rem;
  color: #fff;   /* al 82 % no llegaba a 4,5:1 con un color propio en el límite */
}

.carta-hero__datos a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }

/* ---------- Cuerpo ---------- */

.carta-cuerpo {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

/* El nombre del bloque (Carta, Menú del día) cuando hay más de uno.
   Vive fuera de .carta-cuerpo, así que necesita su propia columna centrada: si
   no, en un monitor grande se quedaba pegado al borde izquierdo mientras los
   platos salían centrados, como si fueran dos páginas distintas. */
.carta-menu {
  max-width: 680px;
  margin: 2.2rem auto .5rem;
  padding: 0 1.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--carta-principal);
  /* Centrado, como la cabecera y las pestañas de arriba: es el título del
     bloque entero, no el de una sección. */
  text-align: center;
}

/* ---------- Barra de secciones ----------
   Fija arriba al bajar por la carta: en una carta larga se salta a Postres sin
   recorrer todo. Si no caben, se desliza en horizontal. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.carta-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: .6rem;
  background: rgba(255, 253, 251, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--carta-linea);
}

.carta-nav__tira {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  gap: .45rem;
  overflow-x: auto;
  padding: .7rem 1.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carta-nav__tira::-webkit-scrollbar { display: none; }

/* 'safe': si un día no caben, se alinea a la izquierda en vez de cortar las
   primeras por el principio. */
@media (min-width: 720px) {
  .carta-nav__tira { justify-content: safe center; }
}

.carta-nav a {
  flex: 0 0 auto;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--carta-suave);
  color: var(--carta-principal);
  -webkit-tap-highlight-color: transparent;
}
.carta-nav a.is-activa { background: var(--carta-principal); color: #fff; }

.carta-seccion {
  margin-bottom: 2.4rem;
  scroll-margin-top: 4.5rem;     /* el enlace lleva a la sección: que la barra no tape su título */
}

.carta-seccion__titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  margin: 0 0 .2rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--carta-principal);
  color: var(--carta-principal);
  scroll-margin-top: 4.5rem;     /* que la barra pegajosa no tape el título */
}

.carta-seccion__desc {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--carta-gris);
  font-style: italic;
}

/* ---------- Platos ---------- */

.platos {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.plato { padding: .7rem 0; border-bottom: 1px solid var(--carta-linea); }
.plato:last-child { border-bottom: 0; }

.plato__linea {
  display: flex;
  align-items: baseline;
  gap: .1rem;
}

.plato__nombre { font-weight: 600; }

/* El clásico de las cartas de papel: puntos hasta el precio. Es un span que se
   estira, así que funciona igual con nombres de dos letras o de dos líneas. */
.plato__puntos {
  flex: 1 1 auto;
  min-width: 1.2rem;
  margin: 0 .45rem;
  border-bottom: 1px dotted rgba(0, 0, 0, .28);
  transform: translateY(-.25rem);
}

.plato__precio {
  font-weight: 600;
  white-space: nowrap;
  color: var(--carta-principal);
}

.plato__desc {
  margin: .25rem 0 0;
  font-size: .89rem;
  color: var(--carta-gris);
  max-width: 44ch;
}

.plato__agotado {
  display: inline-block;
  margin-left: .45rem;
  padding: .1rem .45rem;
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  background: var(--carta-suave);
  color: var(--carta-gris);
  vertical-align: middle;
}

/* Agotado: se sigue leyendo, pero se nota. Esconderlo haría que el comensal
   preguntara por un plato que no hay, que es justo lo que queremos evitar. */
/* Sin opacity: bajaba el contraste del nombre y de la etiqueta «hoy no
   disponible» por debajo de lo legible (2:1). Gris de la carta = 5,5:1. */
.plato--agotado .plato__nombre,
.plato--agotado .plato__precio { color: var(--carta-gris); }
.plato--agotado .plato__precio { text-decoration: line-through; }
.plato--agotado .plato__agotado { color: var(--carta-tinta); background: #ece7e3; }

.plato--destacado .plato__nombre::before {
  content: "★";
  margin-right: .35rem;
  color: var(--carta-principal);
}

/* ---------- Carta vacía o no disponible ---------- */

.carta-vacia {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--carta-gris);
}

.carta-vacia p { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--carta-tinta); }
.carta-vacia__sub { font-size: .95rem !important; color: var(--carta-gris) !important; }

/* ---------- Pie ---------- */

.carta-pie {
  background: var(--carta-suave);
  padding: 1.8rem 1.25rem 2.2rem;
  text-align: center;
}

.carta-pie__resena {
  display: inline-block;
  padding: .75rem 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  color: #fff;
  background: var(--carta-principal);
  border-radius: 999px;
}
/* «body.carta a { color: inherit }» ganaba a la regla de arriba y el botón salía con texto
   oscuro sobre el color del restaurante (2,9:1 en cobre). Más específica (13/10/2026). */
body.carta a.carta-pie__resena { color: #fff; }

.carta-pie__nota {
  margin: 0 0 .8rem;
  font-size: .78rem;
  color: var(--carta-gris);
  max-width: 44ch;
  margin-inline: auto;
}

.carta-pie__marca {
  margin: 0;
  font-size: .74rem;
  color: var(--carta-gris);
}

.carta-pie__marca a { color: var(--carta-principal); font-weight: 600; text-decoration: none; }

/* ---------- Impresión ----------
   Un restaurante acabará imprimiendo su propia carta desde el navegador.
   Que salga limpia cuesta diez líneas. */

@media print {
  .carta-pie__resena { display: none !important; }
  body.carta { background: #fff; }
  .carta-hero { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  .carta-hero__datos { color: #333; }
  .carta-idiomas { display: none !important; }
  /* Los logos van en claro para la cabecera de color; en papel blanco no se
     verían: se imprimen en negro (El Criticón, 14/10/2026). */
  .carta-hero__logo { filter: brightness(0); }
  /* La maqueta del papel está al final del fichero («La carta en papel»). */
}

/* ---------- Fotos de los platos ----------
   Miniatura cuadrada a la derecha: todas del mismo tamaño, así la lista se lee
   de un vistazo. Con fotos de alturas distintas, una carta de veinte platos
   parece un collage y cuesta encontrar los precios. */

.plato--con-foto { display: flex; gap: .9rem; align-items: flex-start; }
.plato__texto { flex: 1 1 auto; min-width: 0; }

.plato__foto {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--carta-suave);
}

@media (min-width: 480px) {
  .plato__foto { width: 94px; height: 94px; }
}

.plato--agotado .plato__foto { opacity: .45; filter: grayscale(.4); }

/* Al tocar la miniatura se abre en grande (visor al final de publica.php).
   El cursor solo cambia si el script ha convertido la foto en botón. */
.plato__foto[role="button"] { cursor: zoom-in; }
.plato__foto[role="button"]:focus-visible { outline: 2px solid var(--carta-principal); outline-offset: 2px; }

.foto-visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
  animation: foto-visor-entra .18s ease-out;
}
.foto-visor[hidden] { display: none; }
.foto-visor__marco { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.foto-visor__img {
  display: block;
  max-width: min(100%, 900px);
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
}
.foto-visor__pie { margin-top: .75rem; color: #fff; font-size: 1.05rem; font-weight: 600; }
.foto-visor__cerrar {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
html.foto-visor-abierto { overflow: hidden; }
@keyframes foto-visor-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .foto-visor { animation: none; } }

/* ---------- Redes del negocio ---------- */

.carta-pie__redes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}

.carta-pie__red {
  padding: .5rem 1.05rem;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--carta-principal);
  background: #fff;
  border: 1px solid var(--carta-principal);
  border-radius: 999px;
}

/* La foto tampoco se imprime: en papel no aporta y multiplica la tinta. */
@media print {
  .plato__foto { display: none !important; }
  .foto-visor { display: none !important; }
  .carta-pie__redes { display: none !important; }
}

/* ==========================================================================
   Menú del día y carta: pestañas y cabecera de precio cerrado
   ========================================================================== */

/* Las pestañas van arriba, no pegajosas. Pegajosa ya está la barra de secciones
   de cada bloque, y dos barras fijas en un móvil se comen media pantalla. */
.carta-tabs {
  padding: .9rem 1.25rem .2rem;
}

/* Con muchas cartas y menús (El Criticón tiene seis, 14/10/2026) las pestañas
   bajan a otra fila en vez de estrujarse: antes, a partes iguales y sin saltar,
   en el móvil se leía «Menú infanti» o «Nochev». Cada una mide lo que su texto. */
.carta-tabs__tira {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.carta-tab {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  padding: .7rem .9rem;
  text-align: center;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--carta-principal);
  background: var(--carta-suave);
  border: 1px solid transparent;
  border-radius: 12px;
}

.carta-tab.is-activa {
  background: var(--carta-principal);
  color: #fff;
}

/* El precio del menú, en la propia pestaña: es lo primero que se pregunta
   alguien que entra a ver el menú del día. */
.carta-tab__precio {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  margin-top: .1rem;   /* sin opacidad: con un color propio claro bajaba de 4,5:1 (13/10/2026) */
}

/* ---------- Cabecera de un menú de precio cerrado ---------- */

.menu-cab {
  max-width: 680px;
  margin: 1rem auto .2rem;
  padding: 1.2rem 1.25rem;
  background: var(--carta-suave);
  border-radius: 14px;
  text-align: center;
}

.menu-cab__nombre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0;
  color: var(--carta-principal);
}

.menu-cab__precio {
  margin: .3rem 0 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--carta-principal);
  line-height: 1.15;
}

.menu-cab__nota {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--carta-gris);
}

.menu-cab__incluye {
  margin: .6rem auto 0;
  max-width: 40ch;
  font-size: .9rem;
  color: var(--carta-tinta);
}

.menu-cab__horario {
  margin: .45rem 0 0;
  font-size: .82rem;
  color: var(--carta-gris);
  font-style: italic;
}

/* El suplemento no es un precio: se ve, pero con menos peso, para que nadie
   piense que el segundo plato del menú cuesta 3 € aparte del menú. */
.plato__precio--suplemento {
  font-weight: 600;
  font-size: .92rem;   /* sin opacidad: al .85 bajaba de 4,5:1 con los colores claros (13/10/2026) */
}

@media print {
  .carta-tabs, .carta-nav { display: none !important; }
  /* En papel se imprime todo, menú y carta, uno detrás de otro. */
  .carta-bloque[hidden] { display: block !important; }
}

/* ---------- Alérgenos en la carta del comensal ----------
   Iconos pequeños al lado del plato, y la leyenda al final para saber qué
   significa cada uno. El aviso del pie ("consulte a nuestro personal") sigue
   ahí: es lo que cubre los platos donde el restaurante no haya marcado nada. */

.plato__alergenos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-left: .1rem;
  vertical-align: middle;
}

.plato__alergeno {
  font-size: .78rem;
  line-height: 1;
  cursor: help;
}

.carta-leyenda {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.carta-leyenda__titulo {
  margin: 0 0 .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--carta-gris);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.carta-leyenda__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  color: var(--carta-gris);
}

/* Accesibilidad (11/10/2026): foco visible en enlaces, pestañas e idiomas. */
.carta :focus-visible { outline: 3px solid var(--carta-principal); outline-offset: 2px; }
.carta-hero :focus-visible { outline-color: #fff; }
.carta-bloque:focus-visible { outline: none; }

/* ==========================================================================
   La carta en papel (o en PDF) — «🖨️ Imprimir o guardar en PDF» del panel
   Daniel, 14/10/2026: «que se ajuste elegante, no se parta a la mitad y tenga
   saltos de hojas aunque quede en más». Reglas:
     · cada carta o menú empieza en hoja nueva (el primero, con la cabecera);
     · una sección no se parte: si no cabe entera, pasa a la hoja siguiente
       (solo se partiría una más larga que una hoja entera);
     · ni plato, ni título, ni la cabecera del menú, ni la leyenda de
       alérgenos se quedan sueltos al final de una hoja.
   Va al final para mandar sobre lo de arriba.
   ========================================================================== */
/* Las zonas del margen, declaradas y vacías: así Chrome y Edge NO imprimen su
   cabecera y su pie (la URL, la fecha y «1/8»). Es la carta de un restaurante,
   no una página web impresa (Daniel: «que no salga la url»). */
@page {
  size: A4;
  margin: 15mm 16mm 16mm;
  @top-left { content: ""; }
  @top-center { content: ""; }
  @top-right { content: ""; }
  @bottom-left { content: ""; }
  @bottom-center { content: ""; }
  @bottom-right { content: ""; }
}

@media print {
  html { font-size: 12.5px; }
  body.carta { background: #fff !important; }

  /* Cabecera: compacta, solo en la primera hoja. */
  .carta-hero { padding: 0 0 .9rem !important; margin-bottom: .4rem; border-bottom: 1px solid #000 !important; }
  .carta-hero__logo { max-height: 56px; margin-bottom: .5rem; }
  .carta-hero__nombre { font-size: 2rem; }
  .carta-hero__datos { margin-top: .35rem; font-size: .9rem; }
  .carta-hero__datos a { border-bottom: 0 !important; }

  /* Cada carta o menú, en su hoja. */
  .carta-bloque + .carta-bloque { break-before: page; }
  .carta-cuerpo { max-width: none; padding: .8rem 0 0; }

  /* Nombre del bloque (Carta, Vinos…) y cabecera del menú de precio cerrado. */
  .carta-menu { max-width: none; margin: 1.1rem 0 .2rem; padding: 0 0 .45rem; text-align: center;
    font-size: 1.9rem; border-bottom: 1px solid #bbb; break-after: avoid; }
  .menu-cab { max-width: none; margin: .6rem 0 .2rem; padding: .3rem 0 .9rem; background: none !important;
    border-radius: 0; border-bottom: 1px solid #bbb; break-inside: avoid; break-after: avoid; }
  .menu-cab__nombre { font-size: 2rem; }
  .menu-cab__incluye { max-width: 62ch; margin-inline: auto; }

  /* Secciones enteras; los títulos, pegados a sus platos. */
  .carta-seccion { break-inside: avoid; margin-bottom: 1.3rem; }
  .carta-seccion__titulo { font-size: 1.65rem; padding-bottom: .3rem; margin-bottom: .1rem; break-after: avoid; }
  .carta-seccion__desc { break-after: avoid; }
  .plato { break-inside: avoid; padding: .32rem 0; border-bottom-color: #e2e2e2; }
  .plato__desc { margin-top: .1rem; }
  .carta-leyenda { break-inside: avoid; }
  /* «Se ha acabado» es de hoy; el papel dura semanas: sale como un plato más. */
  .plato__agotado { display: none !important; }
  .plato--agotado .plato__nombre { color: var(--carta-tinta); }
  .plato--agotado .plato__precio { color: var(--carta-principal); text-decoration: none; }

  /* Pie: la nota (IVA, alérgenos…) al final, sin fondo ni enlaces. */
  .carta-pie { background: none !important; padding: 1rem 0 0; margin-top: 1rem; border-top: 1px solid #bbb; break-inside: avoid; }
  .carta-pie__nota { max-width: none; color: #333; }
  .carta-pie__marca { display: none !important; }   /* en su carta de papel, nada nuestro */
}


/* «Abierto y cerrado» (24/10/2026): el aviso de vacaciones encima de la carta. */
.carta-cerrado { margin: 0; padding: .85rem 1.1rem; background: #FFF4E0; color: #6B4300; border-bottom: 1px solid #F0C98A; font-weight: 600; text-align: center; line-height: 1.4; }