/* ==========================================================================
   VARIABLES CSS Y PALETA DE ALÉRGENOS (Basado en normativa europea)
   ========================================================================== */
:root {
    --bg-color: #FDFCF8; 
    --text-main: #2C2C2C; 
    --text-muted: #7A7A7A; 
    --accent-gold: #C5A059; 
    --nav-bg: #FFFFFF;
    
    /* Colores exactos de los 14 alérgenos de la imagen */
    --c-gluten: #D97E4A;
    --c-crustacean: #278AC3;
    --c-egg: #F3B053;
    --c-fish: #3A5199;
    --c-peanut: #B17E53;
    --c-soy: #3EA655;
    --c-milk: #7B4B36;
    --c-nut: #A6574D;
    --c-celery: #86C14A;
    --c-mustard: #CBA547;
    --c-sesame: #A9A492;
    --c-sulphite: #8C2E63;
    --c-mollusc: #46B6D4;
    --c-lupin: #E6C935;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --top-bar-height: 60px;
    --bottom-nav-height: 65px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--top-bar-height);
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
}

/* ==========================================================================
   TOP BAR & ACTION BAR
   ========================================================================== */
.top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--top-bar-height);
    background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 1000; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.top-bar .logo {
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.top-bar .lang-switch { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }

.action-bar {
    display: flex; gap: 10px; padding: 15px 20px;
    background-color: var(--bg-color); border-bottom: 1px solid rgba(0,0,0,0.05);
}
.action-btn {
    flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1);
    background-color: var(--nav-bg); color: var(--text-main); font-family: var(--font-body);
    font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.action-btn.guide { color: var(--accent-gold); border-color: rgba(197, 160, 89, 0.3); }
.action-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   BOTTOM NAV
   ========================================================================== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottom-nav-height);
    background-color: var(--nav-bg); box-shadow: 0 -1px 10px rgba(0,0,0,0.05); z-index: 1000;
    display: flex; justify-content: center; 
    align-items: center; gap: clamp(10px, 4vw, 30px); 
    overflow-x: auto; white-space: nowrap; padding: 0 15px; scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav a {
    text-decoration: none; color: var(--text-muted); display: flex; flex-direction: column;
    align-items: center; font-size: 0.7rem; font-weight: 600; gap: 4px; min-width: 50px;
}
.bottom-nav a svg { width: 22px; height: 22px; fill: var(--text-muted); transition: fill 0.2s; }
.bottom-nav a:active, .bottom-nav a:focus { color: var(--accent-gold); }
.bottom-nav a:active svg, .bottom-nav a:focus svg { fill: var(--accent-gold); }

/* ==========================================================================
   ITEM CARDS & ALÉRGENOS SVG (TAMAÑO AUMENTADO)
   ========================================================================== */
section { scroll-margin-top: calc(var(--top-bar-height) + 60px); margin-bottom: 40px; }
/* 1. Altura para móviles (compacta y alargada) */
/* 1. Por defecto para móviles (ocupa todo el ancho) */
.category-hero { 
    width: 100%; 
    height: 180px; 
    object-fit: cover; 
    display: block; 
}

/* 2. Para ordenadores: limitamos el ancho máximo para que la foto no se estire a lo loco */
@media (min-width: 768px) {
    .category-hero {
        max-width: 900px; /* Ancho máximo perfecto para que no se estire */
        height: 280px;
        margin: 0 auto;    /* Centra la foto automáticamente en la pantalla */
        border-radius: 12px; /* Opcional: le da un toque muy elegante con esquinas redondeadas en PC */
    }
}
.category-title { font-family: var(--font-heading); font-size: 2rem; text-align: center; margin: 25px 0 15px; }
.menu-container { padding: 0 20px; }

.dish-card { margin-bottom: 25px; transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease; max-height: 600px; opacity: 1; overflow: hidden; }
.dish-card.hidden-dish { opacity: 0; max-height: 0; margin-bottom: 0; pointer-events: none; }
.dish-header { display: flex; align-items: baseline; width: 100%; }
.dish-name { 
    font-family: var(--font-heading); 
    font-size: 1.1rem; 
    font-weight: 700; 
    flex: 0 1 auto; 
    word-break: break-word; 
    
    /* Reglas interactivas con transición suave para el resplandor */
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Efecto de "luz" al pasar el ratón */
.dish-name:hover {
    color: var(--accent-gold);
    /* Crea un resplandor dorado alrededor de las letras */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.6), 
                 0 0 20px rgba(197, 160, 89, 0.3);
}
.dish-dots { 
    flex: 1 1 auto; 
    border-bottom: 1px dotted var(--text-muted); 
    margin: 0 8px; 
    position: relative; 
    top: -4px; 
    opacity: 0.5; 
    min-width: 15px; /* Evita que los puntos desaparezcan por completo */
}
.dish-price { 
    font-family: var(--font-body); 
    font-weight: 700; 
    font-size: 1.1rem; 
    flex-shrink: 0; /* Impide que el precio se aplaste */
    white-space: nowrap; /* Impide que el precio se rompa en dos líneas (mantiene el 12,50€ junto) */
}
.dish-format { font-size: 0.8rem; color: var(--accent-gold); font-style: italic; display: block; margin-top: -3px; margin-bottom: 5px;}

/* Aumento de tamaño para los iconos de la carta */
.dish-allergens { margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.allergen-icon { width: 28px; height: 28px; display: inline-block; border-radius: 50%; }

/* ==========================================================================
   MODALES (Filtros y Guía)
   ========================================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); z-index: 2000;
    display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
    background-color: var(--bg-color); padding: 30px 25px; width: 90%; max-width: 400px;
    border-radius: 12px; position: relative; transform: translateY(20px); transition: transform 0.3s ease;
    max-height: 85vh; overflow-y: auto;
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: var(--text-muted); cursor: pointer; border: none; background: none; }
.modal-title { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 20px; text-align: center; }

/* Lista de Guía - Tamaño de icono aún más grande (32px) para que se vea perfecto */
.legend-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.legend-list li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600;}
.legend-list .allergen-icon { width: 32px; height: 32px; }

/* Caja de Aviso de Seguridad */
.security-disclaimer {
    background-color: rgba(197, 160, 89, 0.1); border-left: 4px solid var(--accent-gold);
    padding: 15px; border-radius: 0 8px 8px 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-main);
}
.security-disclaimer strong { color: var(--accent-gold); display: block; margin-bottom: 5px; font-size: 0.85rem;}

/* Checkboxes del Filtro */
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 25px; }
.filter-option { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.filter-option input[type="checkbox"] {
    appearance: none; width: 20px; height: 20px; border: 2px solid var(--text-muted);
    border-radius: 4px; outline: none; cursor: pointer; position: relative;
    transition: all 0.2s;
}
.filter-option input[type="checkbox"]:checked { background-color: var(--accent-gold); border-color: var(--accent-gold); }
.filter-option input[type="checkbox"]:checked::after {
    content: '✔'; position: absolute; color: white; font-size: 14px; top: -1px; left: 3px;
}

/* ==========================================================================
   NUEVOS ESTILOS: VISTA PREVIA DE IMAGEN Y NOTA DEL PAN
   ========================================================================== */

/* Contenedor del nuevo modal (escala inicial pequeña para la animación) */
.image-modal-content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    max-height: 85vh;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Efecto suave al entrar */
.modal-overlay.active .image-modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Estética de la imagen */
.preview-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    object-fit: contain;
}

/* Ajuste de la "X" para cerrar (se coloca fuera de la foto) */
.image-modal-content .modal-close {
    top: -40px;
    right: 0;
    color: #ffffff;
    font-size: 2.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    opacity: 0.8;
}
.image-modal-content .modal-close:hover {
    opacity: 1;
}

/* Nota del precio del pan */
.bread-note {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 25px;
}