/* web/static/web/css/carta-multiidioma.css */
/* ESTÉTICA ORIGINAL VERDE/DORADO COMPLETAMENTE RESTAURADA - VERSIÓN CORREGIDA */

/* ====================================
   VARIABLES CSS - COLORES ORIGINALES Y Z-INDEX ALTO
   ==================================== */
:root {
    /* Colores originales del diseño */
    --color-principal: #8B4513; /* Marrón para botones e interacciones */
    --color-secundario: #5C3317; /* Marrón oscuro para texto */
    --color-verde-principal: #0B3B24; /* Verde oscuro original de la portada */
    --color-dorado: #D4AF37; /* Dorado original del texto de portada */
    --color-hover: #6B3210; /* Hover marrón */
    --color-texto: #333; /* Texto normal */
    --color-fondo: #fff; /* Fondo blanco para contenido */
    --color-error: #dc3545;
    --sombra-principal: 0 4px 20px rgba(0,0,0,0.2);
    --sombra-hover: 0 4px 8px rgba(0,0,0,0.3);
    --transicion-principal: all 0.3s ease;
    --border-radius: 8px;
    --z-index-modal: 9999; /* Z-index muy alto para modal */
    --z-index-dropdown: 10001; /* Z-index para dropdown */
}

/* ====================================
   MODAL BASE - ESTÉTICA ORIGINAL
   ==================================== */

.carta-modal {
    position: fixed !important;
    z-index: var(--z-index-modal) !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.8) !important; /* Fondo oscuro original */
    padding: 20px !important; /* Padding original */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* Centrado vertical mejorado */
    
    /* Visibilidad controlada por JavaScript */
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}

/* Estado oculto del modal */
.carta-modal[style*="display: none"] {
    display: none !important;
}

/* ====================================
   CONTENEDOR SUPERIOR PARA IDIOMA (TABLET)
   ==================================== */

.carta-header-container {
    width: 85% !important;
    max-width: 800px !important;
    height: 60px !important; /* Altura aumentada para más separación */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 25px !important; /* Margen aumentado para más separación */
    position: relative !important;
}

/* ====================================
   CONTENIDO MODAL - ALTURA FIJA Y SCROLL CORREGIDO
   ==================================== */

.carta-content {
    position: relative !important;
    background-color: var(--color-fondo) !important; /* Fondo blanco original */
    margin-bottom: 15px !important; /* Margen original para separar de navegación */
    padding: 20px !important; /* Padding original */
    padding-top: 60px !important; /* Padding superior aumentado para separación del selector */
    width: 85% !important; /* Ancho consistente */
    max-width: 800px !important; /* Max-width original */
    height: calc(75vh) !important; /* ALTURA FIJA RESTAURADA */
    overflow: hidden !important; /* Sin scroll en el contenedor principal */
    border-radius: 10px !important; /* Border radius original */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important; /* Sombra original */
    
    /* Asegurar visibilidad */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
}

/* ====================================
   CONTENEDOR DE PÁGINAS - SCROLL HABILITADO
   ==================================== */

.carta-pages-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important; /* SCROLL HABILITADO AQUÍ */
    background-color: var(--color-fondo) !important;
    
    /* Optimización scroll */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* ====================================
   PÁGINAS INDIVIDUALES - ALTURA NATURAL PARA SCROLL
   ==================================== */

.carta-page {
    display: none !important; /* Display none original */
    padding: 20px !important; /* Padding original */
    background-color: var(--color-fondo) !important; /* Fondo blanco original */
    margin: 0 auto !important;
    max-width: 100% !important;
    border-radius: 10px !important; /* Border radius original */
    
    /* ALTURA NATURAL PARA PERMITIR SCROLL */
    height: auto !important;
    min-height: 100% !important;
    
    /* Optimización scroll móvil */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

.carta-page.active {
    display: block !important; /* Display block original cuando activa */
}

/* ====================================
   PÁGINA DE PORTADA - DISEÑO ORIGINAL VERDE/DORADO
   ==================================== */

.carta-page.carta-cover {
    background-color: var(--color-verde-principal) !important; /* Verde oscuro original */
    color: var(--color-dorado) !important; /* Dorado original */
    text-align: center !important;
    padding: 30px 20px !important; /* Padding reducido para móvil */
    display: none !important; /* Hidden por defecto */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100% !important; /* Altura mínima ajustada */
}

.carta-page.carta-cover.active {
    display: flex !important; /* Flex cuando activa - ORIGINAL */
}

.carta-cover h1 {
    font-family: 'Poppins', sans-serif !important; /* Fuente original */
    font-size: 2.8em !important; /* Tamaño reducido para móvil */
    letter-spacing: 0.1em !important; /* Letter spacing reducido */
    margin: 20px 0 !important; /* Margen reducido */
    font-weight: 300 !important; /* Peso original */
    color: var(--color-dorado) !important; /* Dorado original */
    line-height: 1.2 !important; /* Mejora el espaciado de líneas */
}

.carta-cover p {
    font-family: 'Poppins', sans-serif !important; /* Fuente original */
    font-size: 1em !important; /* Tamaño reducido */
    letter-spacing: 0.2em !important; /* Letter spacing reducido */
    text-transform: uppercase !important; /* Uppercase original */
    margin: 15px 0 !important; /* Margen reducido */
    font-weight: 300 !important; /* Peso original */
    color: var(--color-dorado) !important; /* Dorado original */
}

.carta-year {
    font-size: 0.9em !important; /* Tamaño reducido */
    margin-top: 20px !important; /* Margen superior reducido */
    letter-spacing: 0.1em !important; /* Letter spacing reducido */
    color: var(--color-dorado) !important; /* Dorado original */
}

/* Iconos decorativos con estilo original */
.carta-icon-decoration {
    display: flex !important;
    gap: 20px !important; /* Gap reducido */
    margin-bottom: 20px !important; /* Margen reducido */
    font-size: 2rem !important; /* Tamaño reducido */
    color: var(--color-dorado) !important; /* Dorado para iconos */
}

.carta-icon-decoration i {
    opacity: 0.9 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.carta-icon-decoration i:hover {
    transform: scale(1.1) rotate(15deg) !important;
    opacity: 1 !important;
}

/* ====================================
   SELECTOR DE IDIOMA - POSICIONAMIENTO POR DISPOSITIVO
   ==================================== */

.language-selector {
    position: absolute !important;
    top: 20px !important; /* Posición aumentada para más separación */
    right: 60px !important; /* Separación del botón cerrar */
    z-index: calc(var(--z-index-modal) + 1) !important;
    font-family: 'Poppins', sans-serif !important;
    user-select: none !important;
    
    /* Forzar visibilidad */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

/* Selector de idioma en tablet - línea superior separada */
.language-selector.tablet-layout {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

.current-language {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important; /* Gap reducido */
    padding: 8px 12px !important; /* Padding reducido */
    background-color: var(--color-principal) !important; /* Marrón original */
    border: 2px solid var(--color-secundario) !important;
    border-radius: var(--border-radius) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: var(--transicion-principal) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    position: relative !important;
    min-width: 120px !important; /* Ancho reducido */
    justify-content: space-between !important;
    color: var(--color-fondo) !important;
    min-height: 40px !important; /* Altura reducida */
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

.current-language:hover {
    background-color: var(--color-hover) !important; /* Hover marrón original */
    box-shadow: var(--sombra-hover) !important;
    transform: translateY(-1px) !important;
}

.current-language.open {
    background-color: var(--color-hover) !important;
    box-shadow: var(--sombra-hover) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
}

.current-language .flag {
    font-size: 1.1em !important; /* Tamaño reducido */
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

.current-language .lang-name {
    font-weight: 500 !important;
    color: var(--color-fondo) !important;
    font-size: 0.9em !important; /* Tamaño reducido */
    pointer-events: none !important;
    flex: 1 !important;
}

.current-language i {
    color: var(--color-fondo) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    font-size: 0.8em !important;
}

.current-language.open i {
    transform: rotate(180deg) !important;
}

/* ====================================
   DROPDOWN DE IDIOMA - Z-INDEX ULTRA ALTO
   ==================================== */

.language-dropdown {
    position: absolute !important;
    top: calc(100% - 2px) !important;
    right: 0 !important;
    min-width: 120px !important; /* Ancho reducido */
    width: 100% !important;
    background-color: var(--color-fondo) !important;
    border: 2px solid var(--color-secundario) !important;
    border-top: none !important;
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    box-shadow: var(--sombra-principal) !important;
    z-index: calc(var(--z-index-modal) + 20) !important; /* Z-INDEX ULTRA ALTO */
    
    /* Estados de visibilidad */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) scale(0.95) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    
    /* Transición */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.language-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    max-height: 200px !important;
    pointer-events: auto !important;
}

.lang-option {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important; /* Gap reducido */
    width: 100% !important;
    padding: 8px 12px !important; /* Padding reducido */
    background-color: var(--color-fondo) !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: var(--transicion-principal) !important;
    outline: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9em !important; /* Tamaño reducido */
    color: var(--color-texto) !important;
    min-height: 40px !important; /* Altura reducida */
    
    /* Resetear estilos de botón */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

.lang-option:hover {
    background-color: rgba(139, 69, 19, 0.1) !important; /* Hover marrón suave */
    color: var(--color-secundario) !important;
    transform: translateY(-1px) !important;
}

.lang-option .flag {
    font-size: 1em !important; /* Tamaño reducido */
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

.lang-option .lang-name {
    font-weight: 500 !important;
    color: var(--color-texto) !important;
    pointer-events: none !important;
    flex: 1 !important;
}

/* ====================================
   BOTÓN DE CIERRE - POSICIONAMIENTO CORREGIDO
   ==================================== */

.carta-close-btn {
    position: absolute !important;
    top: 20px !important; /* Posición aumentada para más separación */
    right: 20px !important; /* Posición aumentada */
    background: none !important; /* Background none original */
    border: none !important;
    font-size: 1.3rem !important; /* Tamaño reducido */
    color: var(--color-texto) !important; /* Color texto original */
    cursor: pointer !important;
    padding: 8px !important; /* Padding reducido */
    transition: color 0.3s ease !important; /* Transición original */
    z-index: calc(var(--z-index-modal) + 1) !important;
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

.carta-close-btn:hover {
    color: #000 !important; /* Color hover original */
}

.carta-close-btn i {
    font-size: 20px !important; /* Tamaño icono reducido */
}

/* ====================================
   NAVEGACIÓN - POSICIONAMIENTO CORREGIDO
   ==================================== */

.carta-navigation-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 15px !important; /* Padding reducido */
    background-color: var(--color-fondo) !important; /* Fondo blanco original */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important; /* Sombra original */
    z-index: calc(var(--z-index-modal) + 1) !important;
    border-radius: 10px !important; /* Border radius original */
    width: 85% !important; /* Ancho igual al contenido */
    max-width: 800px !important; /* Max-width original */
    box-sizing: border-box !important;
    position: static !important; /* Posición original */
    margin: 0 auto !important; /* Margen original */
    min-height: 50px !important; /* Altura mínima reducida */
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
}

.carta-nav-button {
    flex: 0 0 auto !important; /* Flex original */
    padding: 8px 12px !important; /* Padding reducido */
    background-color: var(--color-principal) !important; /* Color marrón original */
    color: var(--color-fondo) !important; /* Color texto blanco original */
    border: none !important;
    border-radius: 5px !important; /* Border radius original */
    cursor: pointer !important;
    font-size: 0.9em !important; /* Tamaño fuente reducido */
    transition: background-color 0.3s ease !important; /* Transición original */
    min-width: 100px !important; /* Min-width reducido */
    text-align: center !important;
    margin: 0 3px !important; /* Margen reducido */
    min-height: 40px !important; /* Altura reducida */
    
    /* Optimización táctil */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
}

.carta-nav-button:disabled {
    background-color: #ccc !important; /* Color disabled original */
    cursor: not-allowed !important;
}

.carta-nav-button:hover:not(:disabled) {
    background-color: var(--color-hover) !important; /* Hover marrón original */
}

.carta-page-indicator {
    flex: 1 1 auto !important; /* Flex original */
    font-size: 0.9em !important; /* Tamaño reducido */
    color: #666 !important; /* Color original */
    text-align: center !important;
    white-space: nowrap !important; /* No wrap original */
    margin: 0 8px !important; /* Margen reducido */
}

/* ====================================
   MENÚ ITEMS - SCROLL NATURAL
   ==================================== */

.carta-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Gap reducido */
    padding: 15px !important; /* Padding reducido */
    padding-bottom: 50px !important; /* Padding inferior para que el último elemento sea visible */
    
    /* PERMITIR SCROLL NATURAL */
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.carta-menu-item {
    background-color: var(--color-fondo) !important; /* Fondo blanco original */
    padding: 12px !important; /* Padding reducido */
    border-radius: 8px !important; /* Border radius original */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Sombra original */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Transición original */
}

.carta-menu-item:hover {
    transform: translateY(-2px) !important; /* Transform hover original */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Sombra hover original */
}

.carta-menu-item-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Centrado original */
    margin-bottom: 6px !important; /* Margen reducido */
}

.carta-menu-item-header h3,
.carta-menu-item h3 {
    color: var(--color-secundario) !important; /* Color marrón original */
    font-size: 1.1em !important; /* Tamaño reducido */
    margin: 0 !important;
    font-weight: 600 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
    font-family: 'Poppins', sans-serif !important;
}

.carta-price {
    color: var(--color-principal) !important; /* Color marrón original */
    font-weight: bold !important; /* Peso original */
    font-size: 1em !important; /* Tamaño reducido */
}

.carta-description {
    color: #666 !important; /* Color gris original */
    font-style: italic !important; /* Cursiva original */
    margin: 0 !important;
    line-height: 1.4 !important; /* Line height original */
    font-size: 0.9em !important; /* Tamaño reducido */
}

/* ====================================
   PÁGINAS DE CATEGORÍAS DINÁMICAS
   ==================================== */

.dynamic-category-page {
    padding: 15px !important; /* Padding reducido */
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    box-sizing: border-box !important;
}

.dynamic-category-page h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.6rem !important; /* Tamaño reducido */
    margin-bottom: 20px !important; /* Margen reducido */
    text-align: center !important;
    color: var(--color-secundario) !important; /* Color marrón original */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Gap reducido */
    border-bottom: 2px solid var(--color-principal) !important;
    padding-bottom: 10px !important; /* Padding reducido */
    font-weight: 600 !important;
}

.dynamic-category-page h2 i {
    font-size: 1.4rem !important; /* Tamaño reducido */
    color: var(--color-principal) !important;
}

/* ====================================
   PÁGINA DE INFORMACIÓN - ESTÉTICA ORIGINAL
   ==================================== */

#info-page {
    padding: 20px !important; /* Padding reducido */
    background-color: var(--color-fondo) !important;
}

#info-page h2 {
    font-size: 1.8rem !important; /* Tamaño reducido */
    color: var(--color-secundario) !important;
    text-align: center !important;
    margin-bottom: 20px !important; /* Margen reducido */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* Gap reducido */
    font-weight: 600 !important;
}

#info-page h3 {
    font-size: 1.2rem !important; /* Tamaño reducido */
    color: var(--color-principal) !important;
    margin-top: 20px !important; /* Margen reducido */
    margin-bottom: 12px !important; /* Margen reducido */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Gap reducido */
}

.carta-info-section {
    background-color: var(--color-fondo) !important;
    padding: 20px !important; /* Padding reducido */
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-left: 4px solid var(--color-principal) !important;
}

.carta-info-section p {
    font-size: 1rem !important; /* Tamaño reducido */
    line-height: 1.5 !important; /* Line height reducido */
    margin-bottom: 12px !important; /* Margen reducido */
    color: var(--color-texto) !important;
}

.carta-closing-message {
    text-align: center !important;
    margin-top: 20px !important; /* Margen reducido */
    padding-top: 15px !important; /* Padding reducido */
    border-top: 2px solid var(--color-principal) !important;
}

.carta-closing-message p {
    font-size: 1.1rem !important; /* Tamaño reducido */
    font-weight: 600 !important;
    color: var(--color-principal) !important;
    font-style: italic !important;
}

/* ====================================
   ESTILOS PARA ERRORES
   ==================================== */

.carta-error {
    text-align: center !important;
    padding: 30px 15px !important; /* Padding reducido */
    color: var(--color-error) !important;
    font-family: 'Poppins', sans-serif !important;
    background-color: #fff5f5 !important;
    border-radius: 10px !important;
    border: 1px solid #fed7d7 !important;
}

.carta-error h2 {
    margin-bottom: 12px !important; /* Margen reducido */
    color: var(--color-error) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Gap reducido */
}

.carta-error i {
    font-size: 1.5em !important; /* Tamaño reducido */
    margin-bottom: 8px !important; /* Margen reducido */
}

.carta-error p {
    margin-bottom: 8px !important; /* Margen reducido */
    font-size: 0.9em !important; /* Tamaño reducido */
}

/* ====================================
   MEDIA QUERIES RESPONSIVAS - VERSIÓN CORREGIDA
   ==================================== */

/* Pantallas muy grandes (1600px+) */
@media (min-width: 1600px) {
    .carta-modal {
        padding: 30px !important;
    }
    
    .carta-content {
        width: 75% !important;
        max-width: 1000px !important;
        height: calc(75vh) !important;
        padding: 30px !important;
        padding-top: 80px !important; /* Más separación del selector */
    }
    
    .carta-header-container {
        width: 75% !important;
        max-width: 1000px !important;
        height: 70px !important;
        margin-bottom: 30px !important;
    }
    
    .carta-navigation-buttons {
        width: 75% !important;
        max-width: 1000px !important;
        padding: 20px !important;
    }
    
    .carta-cover h1 {
        font-size: 4em !important;
    }
    
    .carta-nav-button {
        min-width: 140px !important;
        padding: 12px 18px !important;
        font-size: 1.1em !important;
    }
    
    .carta-page-indicator {
        font-size: 1.2em !important;
    }
    
    .language-selector {
        top: 25px !important;
        right: 70px !important;
    }
}

/* Desktop estándar (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .carta-modal {
        padding: 25px !important;
    }
    
    .carta-content, 
    .carta-navigation-buttons {
        width: 80% !important;
        max-width: 900px !important;
    }
    
    .carta-content {
        height: calc(75vh) !important;
        padding: 25px !important;
        padding-top: 70px !important; /* Más separación del selector */
    }
    
    .carta-header-container {
        width: 80% !important;
        max-width: 900px !important;
        height: 65px !important;
        margin-bottom: 25px !important;
    }
    
    .carta-navigation-buttons {
        padding: 18px !important;
    }
    
    .carta-nav-button {
        min-width: 130px !important;
        padding: 12px 16px !important;
        font-size: 1em !important;
    }
    
    .carta-page-indicator {
        margin: 0 15px !important;
        font-size: 1.1em !important;
    }
    
    .language-selector {
        top: 25px !important;
        right: 65px !important;
    }
    
    .current-language {
        min-width: 140px !important;
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
    
    .carta-cover h1 {
        font-size: 3.5em !important;
    }
    
    .carta-close-btn {
        top: 25px !important;
        right: 25px !important;
    }
}

/* Tablets grandes (992px - 1199px) - ALTURA COMPLETA CORREGIDA */
@media (min-width: 992px) and (max-width: 1199px) {
    .carta-modal {
        padding: 15px !important; /* Reducido de 20px */
        justify-content: flex-start !important;
        padding-top: 20px !important; /* Reducido de 40px */
    }
    
    .carta-header-container {
        width: 90% !important; /* Aumentado de 85% */
        display: flex !important; /* Mostrar línea superior en tablet */
        height: 55px !important; /* Reducido de 60px */
        margin-bottom: 15px !important; /* Reducido de 25px */
        justify-content: flex-end !important; /* Alinear selector a la derecha */
    }
    
    .carta-content, 
    .carta-navigation-buttons {
        width: 90% !important; /* Aumentado de 85% */
    }
    
    .carta-content {
        /* ALTURA COMPLETA - aprovechando todo el viewport disponible */
        height: 100dvh !important; /* Dinámico - se adapta a barras */
        height: calc(100vh - 100px) !important; /* Fallback para navegadores sin soporte */
        height: calc(100% - 100px) !important; /* Fallback más compatible */
        max-height: calc(100vh - 100px) !important;
        
        padding: 18px !important; /* Reducido de 22px */
        padding-top: 20px !important; /* Reducido porque el selector está arriba */
        margin-bottom: 8px !important; /* Reducido de 12px */
    }
    
    .carta-navigation-buttons {
        padding: 10px 15px !important; /* Reducido de 15px */
        min-height: 45px !important; /* Reducido de 50px */
        flex-shrink: 0 !important; /* Evitar compresión */
    }
    
    .carta-nav-button {
        min-width: 120px !important;
        padding: 10px 14px !important;
    }
    
    .carta-cover h1 {
        font-size: 3.2em !important;
    }
    
    /* Selector de idioma corregido para tablet - POSICIÓN RELATIVA */
    .language-selector {
        position: relative !important; /* Cambio de static a relative */
        top: auto !important;
        right: auto !important;
        display: inline-block !important; /* En lugar de block para no ocupar toda la línea */
    }
    
    .current-language {
        min-width: 160px !important; /* Ancho fijo apropiado */
        max-width: 160px !important; /* Evitar que se expanda */
        width: 160px !important; /* Ancho fijo */
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
    
    /* Dropdown corregido - posición absoluta relativa al selector */
    .language-dropdown {
        position: absolute !important; /* Asegurar posición absoluta */
        top: calc(100% - 2px) !important; /* Posición correcta */
        right: 0 !important; /* Alineado a la derecha del selector */
        min-width: 160px !important; /* Mismo ancho que el selector */
        width: 160px !important; /* Ancho fijo */
        max-width: 160px !important; /* Evitar expansión */
        z-index: calc(var(--z-index-modal) + 50) !important; /* Z-index muy alto */
    }
    
    /* Botón cerrar reposicionado para tablet */
    .carta-close-btn {
        top: 35px !important; /* Debajo de la línea del selector - reducido */
        right: 15px !important;
    }
}

/* Tablets pequeñas (768px - 991px) - ALTURA COMPLETA CORREGIDA */
@media (min-width: 768px) and (max-width: 991px) {
    .carta-modal {
        padding: 10px !important; /* Reducido de 15px */
        justify-content: flex-start !important;
        padding-top: 15px !important; /* Reducido de 35px */
    }
    
    .carta-header-container {
        width: 95% !important; /* Aumentado de 90% */
        display: flex !important; /* Mostrar línea superior en tablet */
        height: 50px !important; /* Reducido de 55px */
        margin-bottom: 10px !important; /* Reducido de 20px */
        justify-content: flex-end !important; /* Alinear selector a la derecha */
    }

    .carta-content, 
    .carta-navigation-buttons {
        width: 95% !important; /* Aumentado de 90% */
    }
    
    .carta-content {
        /* ALTURA COMPLETA - aprovechando todo el viewport disponible */
        height: 100dvh !important; /* Dinámico - se adapta a barras */
        height: calc(100vh - 85px) !important; /* Fallback para navegadores sin soporte */
        height: calc(100% - 85px) !important; /* Fallback más compatible */
        max-height: calc(100vh - 85px) !important;
        
        padding: 15px !important; /* Reducido de 18px */
        padding-top: 15px !important; /* Reducido porque el selector está arriba */
        margin-bottom: 5px !important; /* Reducido de 12px */
    }
    
    .carta-navigation-buttons {
        padding: 8px 12px !important; /* Reducido de 12px 15px */
        min-height: 45px !important; /* Reducido de 50px */
        flex-shrink: 0 !important; /* Evitar compresión */
    }
    
    .carta-nav-button {
        min-width: 100px !important;
        padding: 8px 12px !important;
        font-size: 0.9em !important;
        margin: 0 4px !important;
    }
    
    .carta-page-indicator {
        font-size: 0.9em !important;
        margin: 0 8px !important;
    }
    
    .carta-cover h1 {
        font-size: 2.8em !important;
    }
    
    /* Selector de idioma corregido para tablet pequeña - POSICIÓN RELATIVA */
    .language-selector {
        position: relative !important; /* Cambio de static a relative */
        top: auto !important;
        right: auto !important;
        display: inline-block !important; /* En lugar de block para no ocupar toda la línea */
    }
    
    .current-language {
        min-width: 150px !important; /* Ancho fijo apropiado */
        max-width: 150px !important; /* Evitar que se expanda */
        width: 150px !important; /* Ancho fijo */
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
    
    /* Dropdown corregido - posición absoluta relativa al selector */
    .language-dropdown {
        position: absolute !important; /* Asegurar posición absoluta */
        top: calc(100% - 2px) !important; /* Posición correcta */
        right: 0 !important; /* Alineado a la derecha del selector */
        min-width: 150px !important; /* Mismo ancho que el selector */
        width: 150px !important; /* Ancho fijo */
        max-width: 150px !important; /* Evitar expansión */
        z-index: calc(var(--z-index-modal) + 50) !important; /* Z-index muy alto */
    }
    
    /* Botón cerrar reposicionado para tablet */
    .carta-close-btn {
        top: 25px !important; /* Debajo de la línea del selector - reducido */
        right: 10px !important; /* Reducido de 15px */
        font-size: 1.3rem !important;
        padding: 8px !important;
    }
}

/* Móviles grandes (481px - 767px) - ALTURA COMPLETA AJUSTADA */
@media (min-width: 481px) and (max-width: 767px) {
    .carta-modal {
        padding: 5px !important; /* Reducido de 10px para más espacio */
        justify-content: flex-start !important;
        padding-top: 10px !important; /* Reducido de 25px */
    }
    
    .carta-header-container {
        display: none !important; /* Ocultar línea superior en móvil */
    }

    .carta-content, 
    .carta-navigation-buttons {
        width: 98% !important; /* Aumentado de 95% para más espacio horizontal */
    }
    
    .carta-content {
        /* ALTURA COMPLETA - usando nuevas unidades de viewport */
        height: 100dvh !important; /* Dinámico - se adapta a barras de navegación */
        height: calc(100vh - 70px) !important; /* Fallback para navegadores sin soporte */
        height: calc(100% - 70px) !important; /* Fallback más compatible */
        max-height: calc(100vh - 70px) !important;
        
        padding: 15px !important;
        padding-top: 50px !important; /* Reducido de 60px */
        margin-bottom: 5px !important; /* Reducido de 10px */
    }
    
    .carta-navigation-buttons {
        padding: 8px 12px !important; /* Reducido padding vertical */
        min-height: 45px !important; /* Reducido de 48px */
        flex-shrink: 0 !important; /* Evitar que se comprima */
    }
    
    .carta-nav-button {
        min-width: 85px !important;
        padding: 8px 10px !important;
        font-size: 0.85em !important;
        margin: 0 3px !important;
    }
    
    .carta-page-indicator {
        font-size: 0.85em !important;
        margin: 0 6px !important;
    }

    .carta-cover h1 {
        font-size: 2.2em !important;
        margin: 15px 0 !important;
    }
    
    .carta-cover p {
        font-size: 0.9em !important;
        margin: 12px 0 !important;
    }
    
    .carta-page {
        padding: 12px !important;
    }
    
    .carta-menu-list {
        gap: 10px !important;
        padding: 12px !important;
        padding-bottom: 30px !important; /* Reducido de 50px */
    }
    
    .carta-menu-item {
        padding: 10px !important;
    }

    .carta-menu-item-header h3 {
        font-size: 1em !important;
    }
    
    .carta-menu-item-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 4px !important;
    }
    
    .carta-price {
        margin-top: 4px !important;
        font-size: 0.95em !important;
    }
    
    .carta-description {
        font-size: 0.85em !important;
    }
    
    .language-selector {
        position: absolute !important; /* Volver a posición absoluta en móvil */
        top: 10px !important; /* Reducido de 15px */
        right: 45px !important; /* Reducido de 50px */
    }
    
    .current-language {
        min-width: 110px !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
        gap: 5px !important;
    }
    
    .current-language .lang-name {
        font-size: 0.85em !important;
    }
    
    /* Dropdown con z-index ultra alto para estar en primera línea */
    .language-dropdown {
        z-index: calc(var(--z-index-modal) + 30) !important;
    }
    
    .carta-close-btn {
        top: 10px !important; /* Reducido de 15px */
        right: 10px !important; /* Reducido de 15px */
        font-size: 1.2rem !important;
        padding: 6px !important;
    }
    
    .carta-close-btn i {
        font-size: 18px !important;
    }
    
    .dynamic-category-page h2 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
    }
    
    .carta-icon-decoration {
        font-size: 1.8rem !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* Móviles medianos (376px - 480px) - ALTURA COMPLETA AJUSTADA */
@media (min-width: 376px) and (max-width: 480px) {
    .carta-modal {
        padding: 3px !important; /* Reducido de 8px */
        justify-content: flex-start !important;
        padding-top: 8px !important; /* Reducido de 20px */
    }
    
    .carta-header-container {
        display: none !important; /* Ocultar línea superior en móvil */
    }

    .carta-content {
        width: 99% !important; /* Aumentado de 90% */
        
        /* ALTURA COMPLETA - múltiples fallbacks para compatibilidad */
        height: 100dvh !important; /* Dinámico - ideal para móviles */
        height: calc(100vh - 60px) !important; /* Fallback estándar */
        height: calc(100% - 60px) !important; /* Fallback más compatible */
        max-height: calc(100vh - 60px) !important;
        
        padding: 12px !important;
        padding-top: 45px !important; /* Reducido de 55px */
        margin-bottom: 5px !important; /* Reducido de 8px */
    }
    
    .carta-navigation-buttons {
        padding: 4px 4px !important; /* Reducido padding vertical */
        width: 99% !important; /* Aumentado de 90% */
        min-height: 40px !important; /* Reducido de 45px */
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important; /* Evitar compresión */
    }
    
    .carta-nav-button {
        width: 30px !important; /* ANCHO FIJO muy pequeño */
        min-width: 30px !important; 
        max-width: 30px !important; 
        padding: 4px 2px !important; /* PADDING MÍNIMO */
        font-size: 1.1em !important; /* Tamaño de icono */
        margin: 0 1px !important; /* MARGEN MÍNIMO */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important; /* Para incluir padding en el ancho */
    }
    
    .carta-nav-button i {
        font-size: 1em !important;
        margin: 0 !important;
    }
    
    /* Ocultar texto en móviles pequeños (se maneja por JavaScript) */
    .carta-nav-button .nav-text {
        display: none !important;
    }
    
    .carta-page-indicator {
        font-size: 0.75em !important;
        margin: 0 4px !important;
        flex: 1 !important; /* Tomar el espacio restante */
        min-width: 0 !important; /* Permitir que se comprima si es necesario */
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .carta-cover h1 {
        font-size: 1.8em !important;
        margin: 12px 0 !important;
        letter-spacing: 0.05em !important;
    }
    
    .carta-cover p {
        font-size: 0.8em !important;
        margin: 10px 0 !important;
        letter-spacing: 0.1em !important;
    }
    
    .carta-year {
        font-size: 0.8em !important;
        margin-top: 15px !important;
    }
    
    .carta-page {
        padding: 10px !important;
    }
    
    .carta-menu-list {
        gap: 8px !important;
        padding: 10px !important;
        padding-bottom: 25px !important; /* Reducido de 50px */
    }
    
    .carta-menu-item {
        padding: 8px !important;
    }
    
    .carta-menu-item-header h3 {
        font-size: 0.95em !important;
    }
    
    .carta-price {
        font-size: 0.9em !important;
    }
    
    .carta-description {
        font-size: 0.8em !important;
    }
    
    .language-selector {
        position: absolute !important; /* Posición absoluta en móvil */
        top: 8px !important; /* Reducido de 12px */
        right: 40px !important; /* Reducido de 45px */
    }
    
    .current-language {
        min-width: 100px !important;
        padding: 5px 8px !important;
        min-height: 32px !important;
        gap: 4px !important;
    }
    
    .current-language .flag {
        font-size: 1em !important;
    }
    
    .current-language .lang-name {
        font-size: 0.8em !important;
    }
    
    .lang-option {
        padding: 6px 8px !important;
        font-size: 0.8em !important;
        min-height: 32px !important;
    }
    
    /* Dropdown con z-index ultra alto para estar en primera línea */
    .language-dropdown {
        z-index: calc(var(--z-index-modal) + 30) !important;
    }
    
    .carta-close-btn {
        top: 8px !important; /* Reducido de 12px */
        right: 8px !important; /* Reducido de 12px */
        font-size: 1.1rem !important;
        padding: 5px !important;
    }
    
    .carta-close-btn i {
        font-size: 16px !important;
    }
    
    .dynamic-category-page {
        padding: 10px !important;
    }
    
    .dynamic-category-page h2 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    
    .carta-icon-decoration {
        font-size: 1.5rem !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    
    #info-page {
        padding: 15px !important;
    }
    
    #info-page h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
        gap: 10px !important;
    }
    
    #info-page h3 {
        font-size: 1.1rem !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .carta-info-section {
        padding: 15px !important;
    }
    
    .carta-info-section p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    
    .carta-closing-message {
        margin-top: 15px !important;
        padding-top: 12px !important;
    }
    
    .carta-closing-message p {
        font-size: 1rem !important;
    }
}

/* Móviles pequeños (320px - 375px) - ALTURA COMPLETA AJUSTADA */
@media (min-width: 320px) and (max-width: 375px) {
    .carta-modal {
        padding: 2px !important; /* Reducido de 5px */
        justify-content: flex-start !important;
        padding-top: 5px !important; /* Reducido de 15px */
    }
    
    .carta-header-container {
        display: none !important; /* Ocultar línea superior en móvil */
    }

    .carta-content {
        width: 100% !important; /* Aumentado de 90% - ancho completo */
        
        /* ALTURA COMPLETA - máximo aprovechamiento del espacio */
        height: 100dvh !important; /* Dinámico - perfecto para móviles pequeños */
        height: calc(100vh - 50px) !important; /* Fallback */
        height: calc(100% - 50px) !important; /* Fallback compatible */
        max-height: calc(100vh - 50px) !important;
        
        padding: 10px !important;
        padding-top: 40px !important; /* Reducido de 50px */
        margin-bottom: 3px !important; /* Reducido de 6px */
    }
    
    .carta-navigation-buttons {
        padding: 2px 2px !important; /* Reducido de 4px 2px */
        width: 100% !important; /* Aumentado de 90% - ancho completo */
        min-height: 35px !important; /* Reducido de 42px */
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important; /* Evitar compresión */
    }
    
    .carta-nav-button {
        width: 26px !important; /* ANCHO FIJO aún más pequeño */
        min-width: 26px !important; 
        max-width: 26px !important; 
        padding: 3px 1px !important; /* PADDING ULTRA MÍNIMO */
        font-size: 1em !important;
        margin: 0 1px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important; /* Para incluir padding en el ancho */
    }
    
    /* Ocultar texto en móviles muy pequeños */
    .carta-nav-button .nav-text {
        display: none !important;
    }
    
    .carta-page-indicator {
        font-size: 0.7em !important;
        margin: 0 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    .carta-cover h1 {
        font-size: 1.5em !important;
        margin: 10px 0 !important;
        letter-spacing: 0.03em !important;
    }
    
    .carta-cover p {
        font-size: 0.75em !important;
        margin: 8px 0 !important;
        letter-spacing: 0.08em !important;
    }
    
    .carta-year {
        font-size: 0.7em !important;
        margin-top: 12px !important;
    }
    
    .carta-page {
        padding: 8px !important;
    }
    
    .carta-menu-list {
        gap: 6px !important;
        padding: 8px !important;
        padding-bottom: 20px !important; /* Reducido de 40px */
    }
    
    .carta-menu-item {
        padding: 6px !important;
    }
    
    .carta-menu-item-header h3 {
        font-size: 0.9em !important;
    }
    
    .carta-price {
        font-size: 0.85em !important;
    }
    
    .carta-description {
        font-size: 0.75em !important;
    }
    
    .language-selector {
        position: absolute !important; /* Posición absoluta en móvil */
        top: 5px !important; /* Reducido de 10px */
        right: 35px !important; /* Reducido de 40px */
    }
    
    .current-language {
        min-width: 90px !important;
        padding: 4px 6px !important;
        min-height: 30px !important;
        gap: 3px !important;
    }
    
    .current-language .flag {
        font-size: 0.9em !important;
    }
    
    .current-language .lang-name {
        font-size: 0.75em !important;
    }
    
    .lang-option {
        padding: 5px 6px !important;
        font-size: 0.75em !important;
        min-height: 30px !important;
        gap: 3px !important;
    }
    
    /* Dropdown con z-index ultra alto para estar en primera línea */
    .language-dropdown {
        z-index: calc(var(--z-index-modal) + 30) !important;
    }
    
    .carta-close-btn {
        top: 5px !important; /* Reducido de 10px */
        right: 5px !important; /* Reducido de 10px */
        font-size: 1rem !important;
        padding: 4px !important;
    }
    
    .carta-close-btn i {
        font-size: 14px !important;
    }
    
    .dynamic-category-page {
        padding: 8px !important;
    }
    
    .dynamic-category-page h2 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }
    
    .dynamic-category-page h2 i {
        font-size: 1.1rem !important;
    }
    
    .carta-icon-decoration {
        font-size: 1.3rem !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    
    #info-page {
        padding: 12px !important;
    }
    
    #info-page h2 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    
    #info-page h3 {
        font-size: 1rem !important;
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }
    
    .carta-info-section {
        padding: 12px !important;
    }
    
    .carta-info-section p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .carta-closing-message {
        margin-top: 12px !important;
        padding-top: 10px !important;
    }
    
    .carta-closing-message p {
        font-size: 0.95rem !important;
    }
}

/* Orientación horizontal en móviles - ALTURA ADAPTATIVA COMPLETA */
@media (max-width: 767px) and (orientation: landscape) {
    .carta-modal {
        padding-top: 5px !important; /* Reducido de 10px */
    }
    
    .carta-content {
        /* ALTURA COMPLETA EN HORIZONTAL - ajustada para orientación */
        height: 100dvh !important; /* Dinámico */
        height: calc(100vh - 45px) !important; /* Fallback reducido */
        height: calc(100% - 45px) !important; /* Fallback compatible */
        max-height: calc(100vh - 45px) !important;
        
        padding-top: 35px !important; /* Reducido de 45px */
    }
    
    .carta-cover {
        padding: 10px 8px !important; /* Reducido de 15px 10px */
        min-height: auto !important; /* Altura automática en horizontal */
    }
    
    .carta-cover h1 {
        font-size: 1.6em !important;
        margin: 6px 0 !important;
    }
    
    .carta-cover p {
        margin: 4px 0 !important;
        font-size: 0.8em !important;
    }
    
    .carta-icon-decoration {
        margin-bottom: 6px !important;
        font-size: 1.2rem !important;
    }
    
    .carta-year {
        margin-top: 6px !important;
        font-size: 0.7em !important;
    }
    
    /* Navegación más compacta en horizontal */
    .carta-navigation-buttons {
        min-height: 35px !important; /* Reducido de 40px */
        padding: 4px 6px !important; /* Reducido de 6px 8px */
        flex-shrink: 0 !important; /* Evitar compresión */
    }
    
    .carta-nav-button {
        padding: 3px 5px !important; /* Reducido de 4px 6px */
        font-size: 0.7em !important;
        min-height: 28px !important; /* Reducido de 32px */
    }
    
    .carta-page-indicator {
        font-size: 0.7em !important;
    }
    
    .language-selector {
        top: 5px !important; /* Reducido de 8px */
        right: 30px !important; /* Reducido de 35px */
    }
    
    .carta-close-btn {
        top: 5px !important; /* Reducido de 8px */
        right: 5px !important; /* Reducido de 8px */
    }
}