/* =========================================
   Footer Base Styles
   ========================================= */
:root {
    --footer-height: 0px; /* Se actualizará vía JS */
}

footer {
    flex-shrink: 0;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    position: relative;
    border-top: 1px solid #ffffff;
    transition: transform 0.3s ease-out; /* Suavizar movimiento */
}

/* Estilos Genéricos de Botones (Evita repetición) */
footer button,
.text-controls button,
.contact-buttons button,
.text-controls button {
    /* Sin margin: la separación entre botones la da el `gap` de la fila. */
    padding: 10px 15px;
    /* Tamaño FIJO en px, a propósito.
       Los botones del pie son CONTROLES de la interfaz, no contenido: el zoom
       está para ampliar la carta (los platos), no la propia botonera. Es el
       mismo criterio que ya seguían los iconos de compartir, que tampoco crecen.

       Además esto evita el desbordamiento: si los botones creciesen con el
       zoom, al pulsar X3 la fila se salía de la pantalla y aparecía scroll
       horizontal. */
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
}

/* Iconos Sociales */
/* Separación respecto a la botonera de arriba (zoom + contacto). */
footer .social-icons { margin-top: 20px; }
footer .social-icons a {
    margin: 0 10px;
    text-decoration: none;
    font-size: 40px;
    transition: color 0.3s;
}
footer .social-icons i { color: inherit; transition: color 0.3s; }

.parpadeo {
  animation: fadeBlink 1.5s infinite;
}

@keyframes fadeBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Textos y Enlaces */
footer .custom-text { margin-top: 20px; font-size: 14px; }
footer .custom-text a { color: #ffffff; text-decoration: underline; }
footer .custom-text a:hover { text-decoration: underline; }

/* Link Estilo Botón Blanco */
.white-bg-link {
    color: #000000;
    background-color: #ffffff;
    padding: 5px 10px;
    text-decoration: none;
    border: 2px solid #000000;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}
.white-bg-link:hover { background-color: #FFFBAB; }

/* Sección Compartir */
.share-section { text-align: center; margin-top: 20px; }
.share-title { font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.share-icons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.share-item {
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.share-item i { font-size: 24px; margin-bottom: 4px; }
.share-item:hover { color: white; }
.share-text { font-size: 12px; }

/* =========================================
   Estilos Móvil y Sticky Footer Logic
   ========================================= */
@media (max-width: 768px) {
    
    /* Ajuste de botones en móvil para ocupar ancho completo */
    .text-controls-wrapper,
    .contact-buttons-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .text-controls,
    .contact-buttons {
        display: flex;
        justify-content: space-between;
        width: 95%;
        flex-wrap: nowrap;
        margin: 0 auto;
    }

    .text-controls button,
    .contact-buttons button {
        flex-grow: 1;
        margin: 5px;
    }

    /* Clase activa para footer fijo */
    .sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3); /* Sombra para resaltar */
        animation: slideUp 0.3s ease-out; /* Animación de entrada */
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Botón Flotante (Toggle) */
    #show-footer-button {
        position: fixed;
        right: 20px;
        bottom: 20px; /* Posición por defecto */
        z-index: 1001; /* Siempre encima del footer */
        display: none; /* JS lo activa */
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 5px;
        opacity: 0;
        transition: opacity 0.3s ease, bottom 0.3s ease; /* Animamos el movimiento */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Cuando el footer está fijo, el botón sube automáticamente */
    /* Usamos la variable CSS calculada por JS + 10px de margen */
    #show-footer-button.btn-raised {
        bottom: calc(var(--footer-height) + 10px);
    }
}

/* --- ESTILOS DEL TOAST (Notificación) --- */
#toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 14px 20px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.4s ease, bottom 0.4s ease;
    font-family: var(--rm-font-family-ui, sans-serif);
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px; /* Efecto de subida */
}

/* --- CLASES DE TAMAÑO DE TEXTO (botones ZOOM del pie) ---
   Los botones MULTIPLICAN el tamaño configurado en el Personalizador, en vez
   de sustituirlo.

   Antes fijaban un valor absoluto en rem:
       body.font-large { font-size: 1.5rem; }   =  24px  (1.5 x 16px de la raíz)

   El problema: `rem` se calcula sobre la RAÍZ (16px), ignorando el tamaño del
   Personalizador. Así que si ahí se ponía 26px, al pulsar X2 el texto BAJABA a
   24px en vez de subir. Y además `body.font-large` (0,1,1) tiene más
   especificidad que el `body` (0,0,1) del Personalizador, así que siempre ganaba.

   Ahora se usa un factor sobre --rm-font-size (el valor del Personalizador),
   de modo que X2 y X3 siempre amplían, sea cual sea el tamaño base. */

body.font-standard {
    font-size: var(--rm-font-size, 22px);
}

body.font-large {
    font-size: calc(var(--rm-font-size, 22px) * 1.15);
}

body.font-huge {
    font-size: calc(var(--rm-font-size, 22px) * 1.4);
}

/* =========================================================
   FILAS DE BOTONES DEL PIE (zoom + contacto)
   ---------------------------------------------------------
   Objetivo: que ambas filas ocupen EXACTAMENTE el mismo ancho.

   Antes los botones eran `inline-block`, así que cada uno medía lo que su
   texto y las dos filas acababan con anchos distintos. Ahora ambas filas
   comparten un bloque con el mismo max-width.

   El max-width va en `em` y NO en px a propósito: los botones de zoom
   agrandan el texto de la página, así que con un ancho fijo en px la fila del
   zoom se apretaría (o se saldría) al pulsar X2/X3. En `em`, el bloque crece
   con el texto y todo sigue cuadrando.
   ========================================================= */

.text-controls,
.contact-buttons {
    display: flex;
    gap: 10px;
    /* Si los botones no caben en una línea (por ejemplo al pulsar ZOOM X3, que
       agranda el texto), pasan a la siguiente en lugar de desbordar el ancho de
       la pantalla y provocar scroll horizontal. */
    flex-wrap: wrap;
    justify-content: center;
}

/* Fila del ZOOM: cada botón conserva su tamaño natural ("ZOOM X1" es más largo
   que "X2"), y lo que se reparte es la SEPARACIÓN entre ellos. */
.text-controls {
    justify-content: space-between;
}

/* Fila de CONTACTO: los botones se reparten el ancho a partes iguales.
   Si solo hay uno (porque el otro campo está vacío en el Personalizador),
   `flex: 1` hace que ocupe todo el ancho él solo, sin necesidad de ninguna
   condición extra. Y si no hay ninguno, el div queda vacío y no ocupa nada. */
.contact-buttons > a {
    flex: 1;
    display: flex;
}

.contact-buttons > a > button {
    /* El <button> debe llenar el <a> que lo envuelve. */
    width: 100%;
    margin: 0;
}

/* Los botones ya no necesitan margen propio: la separación la da el `gap`. */
.text-controls button {
    margin: 0;
}

/* Evita que el texto de un botón parta en dos líneas y descuadre la fila. */
.text-controls button,
.contact-buttons button {
    /* El texto de un botón no parte en dos líneas... */
    white-space: nowrap;
    /* ...pero el botón SÍ puede encogerse si el espacio aprieta. Por defecto
       flex no deja que un elemento baje de su tamaño de contenido, y eso era
       lo que forzaba el desbordamiento. */
    min-width: 0;
}

/* Separación entre las dos filas.
   NOTA: no se usa `.contact-buttons:not(:empty)` porque el <div> del footer
   contiene saltos de línea y espacios, así que NUNCA está realmente :empty
   aunque no tenga botones. En su lugar, el hueco se define con `gap` en el
   contenedor de ambas filas: si la segunda fila no tiene botones, no ocupa
   alto y el gap tampoco se aplica. */
.footer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* El ancho se define UNA sola vez, aquí: así ambas filas miden exactamente
       lo mismo por construcción, sin depender de su contenido.

       Por qué NO un max-width fijo (como 340px):
       ese valor es un TECHO, no un suelo. En un móvil de 375px el bloque se
       quedaba en 340 — más estrecho que la pantalla — y entonces "RESERVAS" y
       "COMO LLEGAR" ya no cabían juntos, así que uno bajaba a una tercera línea.
       Es decir: estrechar el bloque para que en escritorio los botones de zoom
       no quedasen disparados ROMPÍA el móvil.

       Solución: el bloque ocupa el ancho disponible, pero sin pasar de 340px en
       pantallas grandes (que era el objetivo real: evitar que en escritorio los
       tres botones de zoom se separasen demasiado). */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Solo en pantallas anchas se limita el bloque. En móvil ocupa todo el ancho
   disponible, que es justo lo que necesitan "RESERVAS" + "COMO LLEGAR" para
   caber en una sola línea. */
@media (min-width: 480px) {
    .footer-actions {
        max-width: 340px;
    }
}

/* Red de seguridad: pase lo que pase con el zoom del texto, el pie no debe
   generar scroll horizontal en la página. */
footer {
    overflow-x: hidden;
}

/* Los elementos de formulario (<button>, <input>...) NO heredan la fuente del
   documento: los navegadores les imponen la del sistema. Por eso los botones se
   veían con otra tipografía aunque el body tuviera la del Personalizador.
   Aquí se les aplica explícitamente la fuente de INTERFAZ. */
.text-controls button,
.contact-buttons button,
footer .social-icons,
footer .custom-text,
.share-title,
.share-text {
    font-family: var(--rm-font-family-ui, sans-serif);
}