/* ============================================================================
   styles.css — ◆ PLANTILLA: CAPA DE TEMA POR CLIENTE ◆
   Este :root es lo ÚNICO que cambia el aspecto (colores, fondo, tema claro/oscuro).
   La estructura vive en estructura-base.css (compartida, no tocar). Por defecto
   ship con el tema OSCURO canónico ("cristal puro"). Para tema CLARO u otros
   colores, cambia los tokens marcados abajo según SUPER_APP/ESTILOS_BASE/
   CONTRATO-TOKENS.md (§9 temas). No añadas reglas de layout aquí.
   ============================================================================ */
/* Custom properties */
:root {
  /* Fondo de las páginas interiores (base + logo flotante). Se elige con tokens:
     --logo-fondo: none          -> solo el fondo
     --logo-fondo: url(...)       -> fondo + logo flotante (dos capas, sin deformar) */
  --fondo-interior: none; /* Mely pinta el fondo con su <img class="fondo"> */
  --logo-fondo: none; /* watermark propio: .logo__fondo2 (logo3.webp) */
  /* Aside: 5rem superior es ya el estándar de flota (vive en la base) */
  /* App de CRISTAL (liquid glass): las superficies (.aside, .platos__familia…)
     las pinta el glass, no la base. Por eso el degradado va en 'none': si lleva
     color, el verde de la base se cuela por debajo del cristal. */
  --color-degradado2: none;
  --blanco: #ffffff;
  --negro: #111111; /* negro de marca (sombras, textos): NO es negro puro */
  --fondo-negro: #000;
  /* Carta: nombres en blanco (tema oscuro), descripciones/precios en amarillo */
  --color-nombre-plato: var(--blanco);
  --color-acento-carta: var(--color-titulo);
  /* Acento del footer (estándar estilo Hippie): en El Ancla, el amarillo de título */
  --color-footer-acento: var(--color-titulo);
  /* Fondo de la app para Safari/iOS (barras y rebote) y tinte de headers */
  --fondo-app: #000; /* negro PURO del fondo de página (evita destellos al cargar) */

  /* ==== TOKENS SEMÁNTICOS DE TEMA — el "interruptor" claro/oscuro ====
     Texto, iconos y halos DERIVAN DEL FONDO de la app (idea de Manu, jul 2026,
     tras el intento de Mely): nada de blanco/negro a pelo en las reglas.
     Defaults = tema OSCURO. Para una app CLARA: descomenta el bloque
     "TEMA CLARO" que hay justo después de este :root y ajusta el
     <meta name="theme-color"> de los HTML a #fff. */
  --color-texto-tema: var(--blanco); /* texto sobre el fondo de página */
  --color-icono-nav: var(--blanco); /* iconos .icono del aside/headers */
  --halo-texto: 0 0 0.25rem var(--negro), 0 0 0.625rem var(--negro),
    0 0 1.25rem var(--negro); /* halo de legibilidad sobre el cristal */
  --color-primario: #8f3255; /* granate de marca Mely */
  --color-secundario: #8f3255; /* mismo granate (iconos/acentos) */
  --color-titulo: #8f3255; /* granate: nombres de familia y alérgenos */
  /* Colores funcionales */
  --color-easy: #55cb60; /* verde @easybooking (botón flotante e icono) */
  --color-form-borde: rgba(255, 255, 255, 0.4);
  --color-form-borde-focus: rgba(255, 255, 255, 0.3);
  /* Liquid Glass (cristal estilo Apple Vision Pro — ver biblioteca
     ~/.claude/templates/liquid-glass). El efecto está centralizado en
     css/liquid-glass.css, que se carga el último en cada página. */
  --lg-bg-color: rgba(0, 0, 0, 0.4); /* tinte del cristal (ahumado/oscuro) */
  --lg-highlight: rgba(255, 255, 255, 0.75); /* brillo especular interno */
  --lg-blur: 0.25rem; /* desenfoque del fondo */

  /* Sombras */
  --sombra: 0.1875rem 0.1875rem 0.25rem #fff, -0.1875rem -0.1875rem 0.25rem var(--negro);
  /* Botones */
  --border-radius: 1.25rem;
  /* Tipografía */
  --tipo-principal: "Roboto", sans-serif;
}

/* ============================================================================
   ==== TEMA CLARO (CONTRATO-TOKENS §9) — bloque de REFERENCIA de la plantilla.
   En MELY el tema claro ya está ACTIVO más abajo (buscar "TEMA CLARO ACTIVO").
   Notas: icono-nav en marca · halo none · lg-bg suave (0.16, patrón Kikere;
   la tabla del CONTRATO dice 0.45 pero lava el contenido) · lg-brightness 1 ·
   degradado de marca sobre el cristal · theme-color #fff en los HTML.
   ============================================================================ */

html {
  color: var(--color-texto-tema);
  /* Evita el scroll horizontal en toda la app. El logo animado del index
     (.movimiento) está en position:fixed y hace scale(2), lo que lo desborda
     por el lateral y arrastraba el resto del contenido. Recortar en la raíz
     es seguro: no afecta a los elementos fixed visibles (el formulario de
     reservas entra dentro del viewport) ni al scroll vertical. */
  overflow-x: hidden;
}
body {
  width: 100%;
  font-family: var(--tipo-principal);
  /* Fondo negro de base: evita destellos blancos al hacer overscroll en móvil
     (el rebote de iOS muestra el fondo del documento) y unifica con el
     theme-color negro de la barra del navegador. */
  background-color: var(--fondo-negro);
}

/* Oculta visualmente pero accesible a lectores de pantalla y SEO.
   Para el <h1> de cada página (el título visual es el logo en imagen). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* fadeIn - En el <body> de cada página */
.fade-in {
  animation: fadeIn ease 2s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Títulos de las familias de comidas y bebidas */
p {
  font-size: 1rem;
  /* white-space: pre-line; Valida los saltos de linea \n que inserto en los textos largos que tengo en la data*/
  white-space: pre-line;
  color: var(--color-texto-tema);
}
h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-texto-tema);
}
h3 {
  font-size: 1rem;
  color: var(--color-texto-tema);
}
h4 {
  color: var(--color-texto-tema); /* tamaño y padding: estructura-base */
}

/* ICONOS BOOTSTRAP */
i {
  font-size: 1.7rem;
  padding: 0 0.8rem;
  /* color: var(--color-secundario); */
}
/* Iconos Cartas */
.bi-house-fill,
.bi-heart-pulse,
/*  */
/* ******************** FOOTER ****************************** */
/* FOOTER. Da estilos a todos los footers */

/* El estilo de .baner__alergenos vive en cartas.css (única definición),
   ya que el banner solo aparece en carta.html y drinks.html. */
.footer__imagen-alergenos {
  width: 90%;
}
.footer__boton-alergenos {
  width: auto;
  border-radius: var(--border-radius);
  margin: 0 auto;
  padding: 0.3rem 1rem;
  text-align: center;
  box-shadow: var(--sombra);
  color: var(--color-texto-tema);
}


/* Fondo interior (.logo__fondo + media query) ahora en estructura-base.css */

/* ***************** LOGO (imagen transparente) *********** */
/* Logos limpios: lo gobierna la BASE (.hero-img--logo, con la feature opt-in
   .hero-img--marco para enmarcarlos). Se retiró la regla img[src*="logo"]
   local: su especificidad de atributo pisaba el marco de la base. */
/* ***************** ANIMACIONES *************************** */
@keyframes rotation {
  from {
    transform: rotateX(180deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

/* ***************** LUCES QUE BRILLAN ********************* */
/* Campo de puntos de luz que parpadean por toda la pantalla (mismo efecto
   que en otras apps de la flota, p.ej. Peaky Blinders). Los <div> los genera
   js/luces.js y el efecto se activa/desactiva desde modulos.luces.
   pointer-events:none para que nunca intercepten clics. */
@keyframes parpadeo-luz {
  0% {
    width: 1px;
    height: 1px;
    background: powderblue;
    box-shadow: 0 0 0.8125rem #fff;
  }
  10% {
    background: #b0e5de;
  }
  20% {
    background: #b0e5cc;
  }
  30% {
    background: #cce5b0;
  }
  40% {
    background: #dae5b0;
  }
  50% {
    width: 0.25rem;
    height: 0.25rem;
    background: #e5ddb0;
    box-shadow: 0 0 0.8125rem #d3bd3d;
  }
  100% {
    width: 1px;
    height: 1px;
    background: powderblue;
    box-shadow: 0 0 0.8125rem #fff;
  }
}
.luz {
  position: fixed;
  width: 1px;
  height: 1px;
  border-radius: 0.3125rem;
  background: powderblue;
  box-shadow: 0 0 0.8125rem #fff;
  pointer-events: none;
}
.luz.activa {
  animation: parpadeo-luz 2s infinite;
}

/* ********* FORMULARIO RESERVAS *************************** */
.form {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 90vw;
  max-width: 35rem;
  height: 100vh;
  padding: 2.5rem 2rem;
  background: linear-gradient(
    160deg,
    var(--negro) 0%,
    var(--negro) 30%,
    color-mix(in srgb, var(--color-primario) 50%, var(--negro)) 100%
  );
  border-right: 0.125rem solid var(--color-primario);
  transition: all 0.5s ease-in-out;
  overflow-y: auto;
  /* Ocultar menú lateral */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  box-shadow: 1.875rem 0.625rem 2.5rem rgba(0, 0, 0, 0.7);
}
.form.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.form div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.form label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blanco);
  display: inline-block;
  margin: 0.5rem 0 0.2rem;
}
.input-small {
  width: 65%;
}
.form .form__fila {
  flex-direction: row;
  gap: 1rem;
  /* Alinea los inputs al pie de la fila para que queden a la misma altura
     aunque una label ocupe 1 línea y otra 2 (ej. "Teléfono" vs "Fecha de la reserva") */
  align-items: flex-end;

  & > div {
    flex: 1;
    min-width: 0;
  }

  & .input-small {
    width: 100%;
  }
}
.form input,
.form select {
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-form-borde);
  border-radius: 0.625rem;
  font-size: 1rem;
  color: var(--blanco);
  transition: border-color 0.3s ease;
}
.form input::placeholder {
  color: rgba(249, 239, 218, 0.4);
}
.form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0.5rem var(--color-form-borde-focus);
}
.form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-form-borde);
  border-radius: 0.625rem;
  font-size: 1rem;
  color: var(--blanco);
  transition: border-color 0.3s ease;
  resize: vertical;
}
.form select {
  cursor: pointer;
}
.form select option {
  color: var(--color-secundario);
}
.form span {
  color: rgba(249, 239, 218, 0.5);
  font-size: 0.85rem;
}
.warning {
  /* Verde más claro para leerse bien sobre el fondo oscuro del formulario. */
  color: color-mix(in srgb, var(--color-primario) 55%, #fff);
  font-weight: 600;
  opacity: 0;
  padding: 0.5rem 0;
  transition: all 0.7s ease-in-out;
  transform: translateX(-100%);
}
.active-warning {
  opacity: 1;
  transform: translateX(0);
}
/* Guard del formulario: el JS genera el <p> "aviso" sin clase. Con el fondo
   oscuro del formulario el texto va en blanco (coincide con el blanco global,
   pero lo dejamos explícito para que el guard no dependa de la herencia). */
.form p {
  color: var(--blanco);
}
.warning p {
  color: color-mix(in srgb, var(--color-primario) 55%, #fff);
}
.reservar {
  width: fit-content;
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}

/* ********* BOTONES DE RESERVA CON DEGRADADO ANIMADO *************************** */
/* Aplicado a los 3 botones de reserva: header de index, header de carta/drinks
   y botón final del formulario. El degradado se mueve horizontalmente en bucle
   para llamar la atención sobre la acción principal del SaaS. */
.index__boton-reservar,
.carta__boton-reservar,
.reservar {
  color: var(--blanco);
  background: linear-gradient(
    270deg,
    var(--color-secundario),
    var(--color-primario),
    color-mix(in srgb, var(--color-primario) 30%, var(--color-secundario)),
    var(--color-secundario)
  );
  /* 300% = (4 paradas - 1) × 100%. Crea espacio para que background-position se mueva */
  background-size: 300% 100%;
  border: 1px solid var(--blanco);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  text-shadow: none;
  animation: degradadoMovil 3s ease infinite;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
  }
}

@keyframes degradadoMovil {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Cerrar formulario de reservas */
.cerrar-formulario {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  /* Disco verde con la X en blanco: el glifo es solo la X (bi-x-lg) y el
     círculo lo pone el background, así la X se ve blanca (antes era el hueco
     transparente de bi-x-circle-fill y mostraba el fondo oscuro). */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0; /* anula el padding del selector global `i` (si no, sería un óvalo) */
  font-size: 1.4rem;
  color: var(--blanco);
  background: var(--color-primario);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.cerrar-formulario:hover {
  transform: scale(1.2);
}
.cerrar-formulario-desde-fuera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

/* Position absolute */
/* Botón Llamada */
.boton-whatsapp {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  padding: 0.3rem 2rem;
  transform: translate(-45%, -50%);
  font-size: 1.2rem;
  border: 1px solid var(--blanco);
  border-radius: 1.25rem;
  box-shadow: var(--sombra);
  cursor: pointer;
  z-index: 2;
}
.booking {
  color: var(--blanco);
  text-shadow: none;
}
#booking {
  color: var(--blanco);
  text-shadow: 1px 1px 0 var(--color-easy);
  font-size: 1.5rem;
  font-weight: bold;
}
.boton-whatsapp-img {
  width: 2rem;
}
.boton-whatsapp span {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Boton @easybooking del index */
.easy-index {
  transform: translate(-50%, -50%);
  background: var(--color-primario);
  border: 1px solid var(--color-easy);
}

/* Animaciones fade-in: en estructura-base (estándar de flota) */


/* ============================================================================
   TEMA CLARO ACTIVO — MELY CAFÉ (interruptor de flota, CONTRATO §9).
   Deriva texto/iconos/halos del fondo CLARO. El bloque comentado de arriba
   queda como referencia de la plantilla.
   ============================================================================ */
:root {
  --fondo-app: #fff;
  --color-texto-tema: var(--negro);
  --color-icono-nav: var(--color-primario); /* iconos granate, como el original */
  --halo-texto: none;
  --color-nombre-plato: var(--negro);
  --lg-bg-color: rgba(255, 255, 255, 0.16); /* tinte SUAVE (patrón Kikere claro): con .45 el velo lavaba el contenido */
  --lg-brightness: 1;
  --lg-highlight: rgba(255, 255, 255, 0.15);
  --color-degradado2: linear-gradient(-45deg, var(--color-primario) 0%, transparent 45%);
  --color-form-borde: rgba(143, 50, 85, 0.4);
  --color-form-borde-focus: rgba(143, 50, 85, 0.3);
}

/* ============================================================================
   DISEÑO PROPIO DE MELY (contrato de diseño del _estado.md — regla A):
   fondo de madera, wordmark en tarjeta, logo circular animado y watermark.
   Portado 1:1 de la gen-3 (styles3/index3.css). Tokens extra de su identidad.
   ============================================================================ */
:root {
  --titulos-precios: var(--color-primario);
  --tipo-secundaria: Verdana;
  --color-degradado: linear-gradient(-45deg, var(--color-primario) 0%, var(--blanco) 45%);
  --color-fondo-carta: linear-gradient(-45deg, var(--color-primario) 0%, transparent 30%);
  --color-fondo-index: linear-gradient(-45deg, var(--color-primario) 25%, transparent 45%);
  --sombra2:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
/* Imagen de fondo global (madera + bambú) */
.fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
}
/* Wordmark del index en tarjeta degradada */
.index__hero {
  width: 100%;
  max-width: 50rem;
  background: var(--color-degradado2);
  border-radius: var(--border-radius);
  box-shadow: var(--sombra2);
  margin: 3rem;
}
.index__hero-img {
  width: 100%;
  height: auto;
  max-height: 10rem;
  margin: 0 auto;
  padding: 0.5rem;
  object-fit: contain;
  border-radius: var(--border-radius);
}
/* Logo circular decorativo del index (animado) */
.index__cont-logo-fondo {
  width: 100%;
  height: 100dvh;
  max-width: 50rem;
  position: absolute;
}
.index__logo-fondo {
  width: 50%;
  position: absolute;
  bottom: 10dvh;
  right: 1rem;
}
.tilt-in-fwd-tr {
  -webkit-animation: tilt-in-fwd-tr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation: tilt-in-fwd-tr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes tilt-in-fwd-tr {
  0% {
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
/* Watermark "café" (logo3.webp) en páginas interiores */
.logo__fondo2 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  /* -2, NUNCA -1: el contenido de las cartas vive dentro de .wrapper, que usa
     z-index:-1. Un fondo decorativo a -1 EMPATA con él y, si va después en el
     DOM, gana y le tapa los clics (bug de carta/drinks/reviews, jul 2026).
     Orden de capas: fondo (-3) < watermark (-2) < contenido (-1). */
  z-index: -2;
  pointer-events: none; /* decorativo: jamás debe recibir clics */
  background-image: url(/images/logo3.webp);
  background-size: 20rem;
  background-repeat: no-repeat;
  background-position: center;
}

/* Diseño Mely: botones del index con el degradado de marca SOBRE el cristal.
   El TEXTO y los ICONOS en granate ya no se piden desde aquí: la base los
   pinta con --color-icono-nav, que este tema claro define arriba como
   --color-primario. El token propio --color-texto-boton-index sobraba y se
   ha quitado (misma pantalla, un token menos que mantener). */
.index__buttons-btn {
  background: var(--color-degradado2);
}

/* Logos de cabecera de carta/drinks: MIGRADOS al estándar .hero-img de la
   base (métrica de flota) — las reglas gen-3 .main__logo/.main__logo2 fuera. */