/* Custom properties */
:root {
  --blanco: #ffffff;
  --negro: #111111;
  --color-primario: #f88b8e;
  --color-secundario: #ff0009;
  --color-acento: #f5e6c8;
  --color-titulo: #fbca48; /* amarillo de marca: nombres de familia y de alérgenos */
  --reservar-texto: var(--negro); /* el blanco daba 2,31:1 sobre el primario */
  --btn-index-sep: 1.5rem; /* separación de los botones del index */

  /* ==== Tokens de tema de flota (tabla claras/oscuras del CONTRATO-TOKENS;
     Decades = OSCURA, patrón El Ancla). Los consume estructura-base.css. ==== */
  --color-degradado2: none; /* app de cristal: las superficies las pinta el glass */
  /* Color de los iconos .icono del aside y los headers. Lo usa la base SIN
     respaldo: si falta, la declaración se descarta en silencio y los iconos
     salen transparentes (no da error en consola). Decades es OSCURA → blanco. */
  --color-icono-nav: var(--blanco);
  --color-nombre-plato: var(--blanco); /* nombres de plato: blanco/negro según tema */
  --color-acento-carta: var(--color-titulo); /* descripciones/precios: color del cliente */
  --color-footer-acento: var(--color-titulo);
  --fondo-app: #000; /* negro PURO de página (html + fix iOS/Safari) */

  /* ==== Tokens que la base usa SIN respaldo (ago 2026) ====
     Al subir los componentes comunes (footer, alérgenos, reseñas, formulario)
     de styles.css a estructura-base.css, la base pasó a pintarlos con estos
     tokens. Decades no los declaraba —antes no le hacían falta, tenía sus
     propias reglas— y la declaración se descartaba EN SILENCIO: los textos del
     footer, los alérgenos y las reseñas se volvieron NEGROS sobre fondo negro.
     Decades es app OSCURA: texto blanco y panel de formulario oscuro. */
  --color-texto-tema: var(--blanco); /* texto general sobre el fondo de página */
  --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 (app oscura) */
  --fondo-negro: #000; /* color de respaldo del body mientras carga el fondo */
  --form-fondo: linear-gradient(
    160deg,
    var(--negro) 0%,
    var(--negro) 30%,
    color-mix(in srgb, var(--color-primario) 50%, var(--negro)) 100%
  );
  --form-texto: var(--blanco);
  --form-input-fondo: rgba(255, 255, 255, 0.08);
  --form-placeholder: rgba(249, 239, 218, 0.4);
  --form-warning: color-mix(in srgb, var(--color-primario) 55%, #fff);
  --form-datepicker-filtro: invert(1); /* icono del date picker en blanco */
  /* Colores funcionales */
  --color-easy: #55cb60; /* verde @easybooking (botón flotante e icono) */
  --color-form-borde: rgba(242, 56, 22, 0.4);
  --color-form-borde-focus: rgba(242, 56, 22, 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: 3px 3px 4px #fff, -3px -3px 4px var(--negro);
  --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);
  /* Botones */
  --border: 2px double var(--color-primario);
  --border-radius: 20px;
  /* Tipografía */
  --tipo-principal: "Roboto", sans-serif;
  /* Transition */
  --transition: all 0.5s ease-in-out;
}
html {
  color: var(--blanco);
  /* 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: #000;
}
@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(--blanco);
}
h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blanco);
}
h3 {
  font-size: 1rem;
  color: var(--blanco);
}
h4 {
  color: var(--blanco);
  font-size: 1.3rem;
  padding-bottom: 0.2rem;
}

/* Iconos de navegación: sistema .icono de flota (máscara SVG + currentColor)
   en estructura-base.css. Se retiró Bootstrap Icons (CDN y reglas). */
/*  */
/* ******************** FOOTER ****************************** */
/* FOOTER. Da estilos a todos los footers */
.footer {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0.5rem;
  padding-bottom: 3rem;
}

/* 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(--blanco);
}
.footer__div h3 {
  color: var(--blanco);
}
.footer__creditos {
  font-size: 0.8rem;
  text-align: center;
  color: var(--blanco);
}
.email {
  text-align: center;
  padding: 1rem;
  color: var(--blanco);
}
.restaurant123 {
  color: var(--blanco);
  font-size: 0.8rem;
}

/* ************************************************ */
/* Logo de fondo */
.logo__fondo {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  background-image: url(/images/fondo.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* ***************** ANIMACIONES *************************** */
@keyframes rotation {
  from {
    transform: rotateX(180deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

/* ********* 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(--blanco) 0%,
    var(--blanco) 30%,
    color-mix(in srgb, var(--color-primario) 50%, var(--blanco)) 100%
  );
  border-right: 2px 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: 30px 10px 30px rgba(251, 250, 250, 0.897);
}
.form label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secundario);
  display: inline-block;
  margin: 0.5rem 0 0.2rem;
}
.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: 10px;
  font-size: 1rem;
  color: var(--color-secundario);
  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 8px 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: 10px;
  font-size: 1rem;
  color: var(--color-secundario);
  transition: border-color 0.3s ease;
  resize: vertical;
}
.form span {
  color: rgba(249, 239, 218, 0.5);
  font-size: 0.85rem;
}
.warning {
  color: var(--color-primario);
  font-weight: 600;
  opacity: 0;
  padding: 0.5rem 0;
  transition: all 0.7s ease-in-out;
  transform: translateX(-100%);
}
/* Guard del formulario: va sobre fondo claro, así que sus párrafos NO deben
   heredar el blanco global (p { color: blanco }). El JS genera el <p> "aviso"
   sin clase, por eso lo fijamos aquí para que siga siendo legible. */
.form p {
  color: var(--color-secundario);
}
.warning p {
  color: var(--color-primario);
}

/* ********* 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 4px 12px 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 8px 20px 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;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-primario);
  transition: transform 0.3s ease;
}

/* 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: 20px;
  box-shadow: var(--sombra);
  cursor: pointer;
  z-index: 2;
}
#booking {
  color: var(--blanco);
  text-shadow: 1px 1px 0 var(--color-easy);
  font-size: 1.5rem;
  font-weight: bold;
}
.boton-whatsapp-easy {
  width: 1.5rem;
}

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

/* *********************************************************** */
/* SCROLL FADE-IN ANIMATIONS */
/* *********************************************************** */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.3s ease-out,
    transform 1.3s ease-out;
}

/* Variantes de animación */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 1.3s ease-out,
    transform 1.3s ease-out;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 1.3s ease-out,
    transform 1.3s ease-out;
}