/**********************************************
* IMPORTACIÓN DE FUENTES
***********************************************/
/* Fuente para cabecera */
@import url('https://fonts.googleapis.com/css2?family=Poller+One&display=swap');

/* Fuente para título (nombre del plato) */
@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');

/* Fuente para descripción del plato */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* Fuente para precios (€ incluido) */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400&display=swap');

/* Fuente para variantes del plato */
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');

/* Cargar fuente BudmoJiggler.ttf */
@font-face {
    font-family: 'BudmoJiggler';
    src: url('BudmoJiggler.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Evita que el texto desaparezca mientras carga */
}

/**********************************************
* VARIABLES
***********************************************/
:root {
    /* 🔹 FUENTES */
    --fuente-cabecera: 'Poller One', serif; /* Cabecera */
    --fuente-general: 'Lora', serif; /* General */
    --fuente-columna1: 'Nova Square', serif; /* Nombre del plato*/
    --fuente-columna2: 'Josefin Sans', serif; /* Descripción */
	--fuente-columna3: 'Nova Square', serif; /* Precios */
    --fuente-columna4: 'Nova Square', serif; /* Extras */

    /* 🔹 TAMAÑOS */
    --tamaño-cabecera: 3.8em;
    --tamaño-columna1: 3em;
    --tamaño-columna2: 3em;
    --tamaño-columna3: 4.0em;
    --tamaño-columna4: 2.2em;
	
	/* 🔹 COLORES */
    --color-cabecera: #000000; 
	--color-columna1: #74a5ed;
	--color-columna2: #ffffff;
    --color-precios: #ffffff;
    --color-extras: #74a5ed; 

    /* 🔹 SOMBRAS */
    --sombra-cabecera: 
    2px 2px 2px #74a5ed,   /* Sombra hacia el sur-este */
    -0.5px -0.5px 0.5px #74a5ed, /* Sombra hacia el norte-oeste */
    -0.5px 0.5px 0.5px #000000,  /* Sombra hacia el sur-oeste */
    0.5px -0.5px 0.5px #000000;  /* Sombra hacia el norte-este */
	--sombra-columna1: none;
	--sombra-columna2: none;
    --sombra-precios: 2px 2px 2px #74a5ed;
    --sombra-extras: none; 
	
	/* 🔹 ALINEACIÓN DE IMAGENES */
    --imagen-padding: 2px;
    --imagen-align-horizontal: center;
    --imagen-align-vertical: middle;
    --imagen-width: 100%;
    
    /* 🔹 ESTILOS DE MINIATURA */
    --miniatura-margin-left: auto;
    --miniatura-margin-right: auto;
    --miniatura-display: inline-block;
    --miniatura-width: 500px;
    --miniatura-height: 200px;
    --miniatura-border: 2px solid #ffffff;
    --miniatura-border-radius: 10px;
    --miniatura-clip-path: none;

    /* 🔹 TABLA */
    --ancho-contenedor: 98%;
    --ancho-maximo-contenedor: 1200px;
	
	/* 🔹 ANCHOS DE COLUMNAS */
    --ancho-descripcion: 50%;
    --ancho-imagen: 50%;
	--ancho-extras: 40%;
    --ancho-precio: 60%;
}

/**********************************************
* ESTILOS ACORDEON
***********************************************/
.acordeon-check {
    position: absolute;
    opacity: 0;
}

.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.acordeon-check:checked ~ .acordeon-contenido {
    max-height: 98%; /* Ajusta este valor según necesites */
}
/**********************************************
* ESTRUCTURA PRINCIPAL
***********************************************/
.menu-tabla-container {
    font-family: var(--fuente-general);
    width: var(--ancho-contenedor);
    max-width: var(--ancho-maximo-contenedor);
    margin: 0px auto;
	background-color: #000000;
    background-image: none;
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
    padding: 0px;
    min-height: 250px; /* Altura minima de la tabla */
    border-radius: 0px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
    box-sizing: border-box;	
    
}

/**********************************************
* ACORDEÓN
***********************************************/
.acordeon-check {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.acordeon-check:checked ~ .acordeon-contenido {
    max-height: auto;
}

/**********************************************
* CABECERAS DE SECCIÓN ¡¡SOMBRA CABECERA!!
***********************************************/
.menu-cabecera-seccion {
    font-family: var(--fuente-cabecera);
    font-size: var(--tamaño-cabecera);
    line-height: 1;
	font-weight: 400;
    background: linear-gradient(0deg, rgba(172, 184, 167, 0), rgba(116, 165, 237, 0.5));
    text-align: center;
    padding: 0px;
    border: none;
    border-radius: 0px;
    position: relative;
    margin-bottom: 2px; /* Separación cabecera y tabla */
    cursor: pointer;
    display: flex; /* Activa el modelo flexbox */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    min-height: 200px; /* Altura mínima para evitar saltos */
}

.menu-cabecera-seccion::after {
    font-family: inherit; /* Hereda la fuente del contenedor */
    font-size: inherit; /* Hereda el tamaño del texto */
    line-height: inherit; /* Hereda el interlineado */
    font-weight: inherit;
	content: attr(data-title); /* Texto dinámico */
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%); /* Centrado vertical */
    text-align: inherit; /* Hereda la alineación del contenedor */
    color: transparent; /* Hace el texto transparente */
    padding: 0;
    text-shadow: var(--sombra-cabecera); /* Aplica la sombra */
    z-index: 1; /* Coloca debajo del texto */
}

.menu-cabecera-seccion span {
    position: relative;
    z-index: 2; /* Coloca encima de la sombra */
    display: inline;
    background: url('../imagenes/textura-4.jpg') center/auto 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 0px;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%;
}

/**********************************************
* TABLA Y COLUMNAS
***********************************************/
.menu-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 0px 0px 30px 0px;
    background-color: none; /* Fondo tabla */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* table-layout: fixed; Elimina esta línea */
}

.menu-tabla td {
    padding: 0px; /* Espaciado interno */
    border: 0px solid rgba(255, 255, 255, 0.5); /* Bordes tabla */
    line-height: 1.4; /* Altura de línea para el texto */
    text-shadow: var(--sombra-texto-general); /* Sombra para el texto */
    box-sizing: border-box;
    vertical-align: middle; /* Centra verticalmente el contenido */
}

.menu-tabla .descripcion {
    width: var(--ancho-descripcion) !important;
}

.menu-tabla .imagen {
    width: var(--ancho-imagen) !important;
}

.separador-tablas {
    border: none;
    height: 5px;
    margin: 0px 0;
    opacity: 0.9;
}

.linea-separadora {
    border: none;
    width: 65%;
    height: 1px;
    background-color: #74a5ed;
    margin: 1px auto; /* Esto centra la línea horizontalmente */
    opacity: 1;
}

/* Columna 1 - Nombre del plato */
.menu-tabla .nombre-plato {
    font-family: var(--fuente-columna1);
    font-size: var(--tamaño-columna1);
    font-weight: 400;
    color: var(--color-columna1);
	text-shadow: var(--sombra-columna1) !important;
    background-color: transparent;
	vertical-align: top;
    text-align: center;
	padding-left: none;
}

/* Columna 2 - Descripción */
.menu-tabla .descripcion {
    font-family: var(--fuente-columna2);
    font-size: var(--tamaño-columna2);
    font-weight: 300;	
	font-style: normal;
    color: var(--color-columna2);
	text-shadow: var(--sombra-columna2) !important;
    vertical-align: top;
    text-align: center;
	text-align-last: center;
	word-spacing: normal; /* Ajuste más sutil */
    padding-left: 10px;
    text-indent: 10px;
	padding-right: 15px;
}

/* Columna 3 - Precio */
.menu-tabla .precio {
    font-family: var(--fuente-columna3);
    font-size: var(--tamaño-columna3);
    font-weight: 300;
    color: var(--color-precios);
    text-shadow: var(--sombra-precios) !important;
    vertical-align: bottom;
    text-align: left;
    padding-right: 0em;
    white-space: nowrap;
	width: var(--ancho-precio);
}

/* Columna 4 - Extras */
.menu-tabla .extras {
    font-family: var(--fuente-columna4);
    font-size: var(--tamaño-columna4);
    font-weight: 300;
    color: var(--color-extras);
    text-shadow: var(--sombra-extras);
    vertical-align: middle;
    text-align: right;
    padding-right: 0.5em;
	width: var(--ancho-extras);
    
}
/* Columna 5 - Imagen */
.menu-tabla .imagen {
    padding: var(--imagen-padding);
    text-align: var(--imagen-align-horizontal);
    vertical-align: var(--imagen-align-vertical);
    width: var(--imagen-width);
}

/**********************************************
* IMAGENES
***********************************************/
.miniatura-imagen {
    margin: 0 auto;
    width: var(--miniatura-width);
    height: var(--miniatura-height);
    display: var(--miniatura-display);
    position: relative;
    overflow: hidden;
    border: var(--miniatura-border);
    border-radius: var(--miniatura-border-radius);
    clip-path: var(--miniatura-clip-path);
}

/* IMAGEN INTERNA */
.miniatura-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--miniatura-border-radius);
    clip-path: inherit;
}

/**********************************************
* LIGHTBOX - Ampliar imagen
***********************************************/

/* Lightbox base (oculto inicialmente) */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: none; /* Oculta el lightbox inicialmente */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita desbordamiento */
}

/* Mostrar el lightbox al hacer clic */
.lightbox:target {
    display: flex; /* Muestra el lightbox solo al activarse */
    animation: fadeIn 0.3s; /* Animación de entrada */
}

/* Animación de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Contenido dentro del lightbox */
.lightbox-contenido {
    position: relative;
    max-width: 90vw; /* Ajusta el ancho máximo del contenido */
    max-height: 90vh; /* Ajusta el alto máximo del contenido */
    margin: 20px; /* Espaciado interno */
}

/* Imagen dentro del lightbox */
.lightbox-contenido img {
    max-height: 80vh; /* Limita el tamaño de la imagen */
    max-width: 100%; /* Ajusta la imagen dentro del contenedor */
    border: 2px solid white; /* Borde blanco alrededor */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* Sombra elegante */
    display: block; /* Garantiza que se comporte como un bloque */
}

.lightbox-titulo {
    font-family: var(--fuente-columna1);
    font-size: 20px;                  /* Tamaño del texto */
    color: white;                     /* Color blanco */
    margin-top: 10px;                 /* Espaciado superior opcional */
    text-align: center;              /* Centrado, si lo deseas */
}

/* Botón de cierre del lightbox */
.lightbox-cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 25px;
    color: white;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%; /* Botón redondo */
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Garantiza que esté encima */
}

.lightbox-cerrar:hover {
    background: rgba(255, 255, 255, 0.7);
    color: black; /* Cambia el color al pasar el mouse */
}

/* Versión móvil - Portrait (vertical) */
@media (max-width: 768px) and (orientation: portrait) {
    .lightbox {
        align-items: flex-start;
        padding-top: 20vh;
        overflow-y: auto;
    }
    .lightbox-contenido {
        max-width: 95vw;
        max-height: 70vh;
        margin-top: 5vh;
        transform: translateY(-5%);
    }
    .lightbox-contenido img {
        max-height: 60vh;
        object-fit: contain;
    }
}

/* Versión móvil - Landscape (horizontal) */
@media (max-width: 768px) and (orientation: landscape) {
    .lightbox {
        align-items: center; /* Centrado vertical */
        padding-top: 0; /* Eliminamos el padding superior */
        justify-content: center; /* Centrado horizontal */
    }
    .lightbox-contenido {
        max-width: 80vw; /* Aprovecha mejor el ancho */
        max-height: 80vh;
        margin: 10; /* Reset de márgenes */
        transform: none; /* Eliminamos transform */
    }
    .lightbox-contenido img {
        max-height: 75vh; /* Más espacio para la imagen */
    }
}


/**********************************************
* EFECTOS HOVER POR PRODUCTO 
***********************************************/
.producto-contenedor:hover {
	background-color: rgba(90, 106, 130, 0.5);  /* Con transparencia */
}

/* Hover específico para los textos dentro de las celdas */
.producto-contenedor:hover td:not(.miniatura-imagen) {
    filter: brightness(1.1) saturate(1.5); /* Ajustar brillo y saturación del texto */
    transition: filter 0.3s ease;
}

/* Hover no afecta a las miniaturas ni las imágenes */
.producto-contenedor:hover .miniatura-imagen img {
    filter: none; /* Evita efectos en las imágenes */
    transform: none; /* Desactiva posibles transformaciones visuales */
}

/* Efecto específico en la cabecera */
.menu-cabecera-seccion:hover span {
    animation: text-shine 2s infinite alternate;
    filter: brightness(1.1) saturate(1.5);
}

/* Animación para brillo alternante en el texto */
@keyframes text-shine {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}



/**********************************************
* RESPONSIVE
***********************************************/
@media (max-width: 768px) {
    :root {
        --tamaño-cabecera: 2.3em;
        --tamaño-columna1: 2em;
        --tamaño-columna2: 1.9em;
        --tamaño-columna3: 2em;
        --tamaño-columna4: 1em;
        --sombra-cabecera: 2px 2px 1px #74a5ed;
    }

    .menu-cabecera-seccion {
        text-align: center;
		padding: 0px;
        line-height: 1.2;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 90px; /* Altura mínima para evitar saltos */
    }
    
    .menu-cabecera-seccion::after {
        content: attr(data-title);
        text-align: inherit; 
        color: transparent;
        padding:0px;
        text-shadow: var(--sombra-cabecera);
        z-index: 1;
        /* Ajuste para multi-línea: */
        white-space: normal;
        word-wrap: break-word;
        display: inline;
        line-height: inherit;
        -webkit-background-clip: text;
        background-clip: text;
    }
    
    .menu-cabecera-seccion span {
        position: relative;
        z-index: 2;
        padding: 0px;
        white-space: normal;
        word-wrap: break-word;
        /* Igualar al ::after */
        line-height: inherit;
        display: inline;
    }
	
	/* Columna 2 - Descripción */
	.menu-tabla .descripcion {
    text-align: center;
	text-align-last: center;
	word-spacing: normal; /* Ajuste más sutil */
    padding-left: 10px;
	padding-right: 10px;
    text-indent: 5px;
}
    
    .menu-tabla {
        display: block;
        overflow-x: auto;
    }
    
    .menu-tabla td {
        padding: 8px 2%;
    }

    /* Lightbox para tablet */
    .lightbox-contenido {
        max-width: 85%;
    }

    .lightbox-cerrar {
        top: 15px;
        right: 15px;
        font-size: 25px;
        width: 35px;
        height: 35px;
        line-height: 35px;
    }

    .miniatura-imagen {
        width: 250px;
        height: 125px;
    }
}

@media (max-width: 480px) {
    :root {
        --tamaño-cabecera: 2.3em;
        --tamaño-columna1: 2em;
        --tamaño-columna2: 1.9em;
        --tamaño-columna3: 2em;
        --tamaño-columna4: 1em;
        --sombra-cabecera: 2px 2px 1px #74a5ed;
    }
    

    .menu-cabecera-seccion {
        text-align: center;
		padding: 2px;
		text-shadow: none !important;
        line-height: 1.2;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80px; /* Altura mínima para evitar saltos */
    }
    
    .menu-cabecera-seccion::after {
        content: attr(data-title);
        text-align: center; 
        color: transparent;
		text-shadow: 2px 2px 1px #74a5ed;
        padding: 2px;
        z-index: 1;
        /* Ajuste para multi-línea: */
        white-space: normal;
        word-wrap: break-word;
        display: inline;
        line-height: inherit;
        -webkit-background-clip: text;
        background-clip: text;
    }
    
    .menu-cabecera-seccion span {
        position: relative;
        z-index: 2;
        padding: 0px;
        white-space: normal;
        word-wrap: break-word;
        line-height: inherit;
        display: inline;
    }
    
		/* Columna 2 - Descripción */
	.menu-tabla .descripcion {
    text-align: center;
	text-align-last: center;
	word-spacing: normal; /* Ajuste más sutil */
    padding-left: 10px;
	padding-right: 10px;
    text-indent: 5px;
}
	
    .menu-tabla td {
        padding: 6px 1%;
    }
    
    .menu-cabecera-seccion[data-title*=" "] {
        font-size: calc(var(--tamaño-cabecera) - 0.2em);
    }

    /* Lightbox para móvil */
    .lightbox {
        padding: 10px;
    }

    .lightbox-contenido {
        max-width: 95%;
        top: 40%;
        transform: translateY(-40%);
    }

    .lightbox-contenido img {
        max-height: 60vh;
        border-width: 2px;
    }

    .lightbox-cerrar {
        top: 10px;
        right: 10px;
        font-size: 20px;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .miniatura-imagen {
        width: 250px;
        height: 125px;
    }

    /* Ajuste para texto descriptivo en lightbox */
    .lightbox-contenido p {
        font-size: 0.9em;
        margin-top: 5px;
    }
}

/**********************************************
* CONFIGURACIÓN BANDERAS Y BOTONES 
***********************************************/
:root {
    /* TRANSICIONES Y EFECTOS (compartidos) */
    --escala-hover: 1.1;
    --transicion: 0.3s ease;
    
    /* ESPACIADO */
    --espaciado-entre-elementos: 5px;
    --espacio-entre-grupos: 15px;
    
    /* RUTAS */
    --ruta-imagenes: url('../imagenes/');
}

/**********************************************
* CONFIGURACIÓN ESPECÍFICA DE BANDERAS
***********************************************/
:root {
    /* TAMAÑO BANDERAS */
    --ancho-bandera: 48px;
    --alto-bandera: 48px;
    
    /* ESTILO BANDERAS */
    --borde-bandera: 1px solid #bfd4f5;
    --radio-bandera: 60px;
    --sombra-bandera: 0 2px 2px rgba(145, 145, 145, 0.2);
    --sombra-bandera-hover: 0 2px 2px rgba(0, 0, 0, 1);
    --fondo-bandera: rgba(255, 255, 255, 0.9); /* Nuevo: mismo fondo que botones */
}

/**********************************************
* CONFIGURACIÓN ESPECÍFICA DE BOTONES
***********************************************/
:root {
    /* TAMAÑO BOTONES */
    --ancho-boton: 38px;
    --alto-boton: 38px;
    
    /* ESTILO BOTONES */
    --borde-boton: 1px solid #bfd4f5;
    --radio-boton: 12px;
    --sombra-boton: 0 2px 2px rgba(145, 145, 145, 0.4);
    --sombra-boton-hover: 0 2px 2px rgba(0, 0, 0, 1);
    --fondo-boton: rgba(255, 255, 255, 0.9);
}

/**********************************************
* ESTRUCTURA PRINCIPAL (EN LÍNEA HORIZONTAL)
***********************************************/
.selector-idiomas {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--espaciado-entre-elementos);
    margin: 5px 0;
}

/**********************************************
* ESTILOS BANDERAS
***********************************************/
.bandera-img {
    width: var(--ancho-bandera);
    height: var(--alto-bandera);
    border: var(--borde-bandera);
    border-radius: var(--radio-bandera);
    box-shadow: var(--sombra-bandera);
    object-fit: contain;
    display: block;
    transition: all var(--transicion);
    background-color: var(--fondo-bandera); /* Nuevo: aplica el fondo */
}

.bandera-img:hover {
    transform: scale(var(--escala-hover));
    box-shadow: var(--sombra-bandera-hover);
    filter: brightness(1.05);
}

/**********************************************
* ESTILOS BOTONES
***********************************************/
.boton-css {
    width: var(--ancho-boton);
    height: var(--alto-boton);
    border: var(--borde-boton);
    border-radius: var(--radio-boton);
    box-shadow: var(--sombra-boton);
    background-color: var(--fondo-boton);
    cursor: pointer;
    transition: all var(--transicion);
}

.boton-css:hover {
    transform: scale(var(--escala-hover));
    box-shadow: var(--sombra-boton-hover);
    filter: brightness(1.05);
}

/**********************************************
* CONTENEDOR BOTONES (EN LÍNEA)
***********************************************/
.botones-css {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espaciado-entre-elementos);
    margin-left: var(--espacio-entre-grupos);
}

/**********************************************
* PROHIBICIONES
***********************************************/
/* Desactivar selección de texto */
body {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Estándar */
}

@media print {
    body {
        display: none;
    }
}