/* Asegura que el HTML y el Body ocupen toda la altura disponible */
html, body {
    height: 100%; /* Asegura que la altura sea el 100% del viewport */
    margin: 0;
    padding: 0;
}

/* Estilos generales para el cuerpo, asegurando que ocupe toda la altura de la ventana */
body {
    display: flex; /* Usamos flex para centrar el contenedor principal */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Asegura que el cuerpo ocupe al menos el 100% del alto del viewport */
    background-color: #f0f0f0; /* Color de fondo claro */
    font-family: "Inter", sans-serif; /* Fuente predeterminada */
    padding: 16px; /* Padding general */
}

/* Contenedor principal que simula las dimensiones 7x12 cm en un teléfono */
.menu-container {
    /* Dimensiones fijas con límites responsivos */
    width: 17.5rem; /* Aproximadamente 7cm (1rem = 16px) */
    height: 30rem;  /* Aproximadamente 12cm */
    min-width: 280px; /* Ancho mínimo para legibilidad */
    max-width: 95vw; /* Asegura que no se desborde en pantallas muy pequeñas */
    min-height: 480px; /* Altura mínima */
    max-height: 95vh; /* Asegura que no se desborde en pantallas muy pequeñas */

    display: flex; /* Mantiene la barra lateral y el contenido uno al lado del otro */
    flex-direction: row; /* Siempre en fila */
    
    border-radius: 0.5rem; /* rounded-lg de Tailwind */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* shadow-xl de Tailwind */
    overflow: hidden;
    background-color: #fff;
}

/* Estilos para la barra lateral (sidebar) */
.sidebar {
    /* Forzamos display: flex y flex-direction: column para asegurar la verticalidad */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Alinea los elementos desde el inicio */
    align-items: stretch !important; /* Estira los elementos para que ocupen todo el ancho de la columna */
    flex-shrink: 0; /* Evita que la sidebar se encoja */

    /* Ancho estrecho para el texto vertical */
    width: 45px; 
    height: 100%; /* Ocupa toda la altura del contenedor principal */
    
    background-color: #1e3a8a; /* Un azul oscuro más intenso (bg-blue-800) */
    color: #fff;
    padding: 0.15rem 0; /* Padding vertical más ajustado para máxima compactación */
}

/* Estilos para los botones de las viñetas */
.day-tab {
    display: flex !important; /* Asegura flex para centrado */
    justify-content: center !important;
    align-items: center !important;

    /* Propiedad clave para texto vertical */
    writing-mode: vertical-rl !important; /* Hace que el texto fluya verticalmente de derecha a izquierda */
    text-orientation: mixed !important; /* Permite que los caracteres roten naturalmente */

    width: 100% !important; /* Ocupa todo el ancho de la sidebar */
    flex: 1 !important; /* Distribuye el espacio verticalmente */

    background-color: transparent !important;
    border: none !important;
    color: #fff !important;
    /* Ajuste de padding para texto vertical: muy estrecho con !important */
    padding: 0.3rem 0.1rem !important; 
    text-align: center !important; 
    font-size: 0.6rem !important; /* Tamaño de fuente más pequeño con !important */
    font-weight: 600 !important; /* font-semibold de Tailwind */
    transition: background-color 0.2s ease !important; 
    outline: none !important; 
    border-radius: 0.375rem !important; 
    margin-bottom: 0.1rem !important; /* Margen inferior más pequeño entre botones con !important */
    cursor: pointer !important; /* Asegura que el cursor indique que es clicable */
}

/* Estilo para la viñeta activa */
.day-tab.active {
    background-color: #17275e !important; /* Un azul aún más oscuro para el activo */
    font-weight: bold !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5) !important; /* Borde interior para resaltar */
}

/* Estilos para el área de contenido donde se muestra la imagen */
.content {
    flex-grow: 1 !important; /* Ocupa el espacio restante */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem !important; /* p-2 de Tailwind */
    overflow: hidden !important;
    background-color: #f9fafb !important; /* bg-gray-50 de Tailwind */
}

#menu-image {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Asegura que la imagen se ajuste dentro del contenedor */
    border-radius: 0.375rem !important; /* rounded-md de Tailwind */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important; /* shadow-inner de Tailwind */
}

/* Estilos de fallback para la imagen en caso de error o URL vacía */
#menu-image:not([src]) {
    display: none !important; /* Oculta la imagen si no tiene fuente */
}

#menu-image[src=""], #menu-image[src*="undefined"] {
    display: none !important; /* Oculta la imagen si la URL es vacía o contiene 'undefined' */
}

/* Estilo para un mensaje de imagen no disponible (opcional, si quieres un placeholder personalizado) */
#menu-image::after {
    content: "Menú no disponible" !important; /* Muestra un texto si la imagen falla (solo visible si no hay src) */
    display: block !important;
    color: #999 !important;
    font-size: 1rem !important;
    text-align: center !important;
    padding: 20px !important;
    border: 1px dashed #ccc !important;
    border-radius: 5px !important;
    background-color: #eee !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important; /* Incluye padding y borde en el tamaño */
    display: flex !important; /* Centra el texto */
    align-items: center !important;
    justify-content: center !important;
}

/* Regla para ocultar el pseudo-elemento si la imagen sí se carga */
#menu-image:not([src=""]):not([src*="undefined"]):not([src="https://placehold.co/700x1200/cccccc/333333?text=Menu+undefined"])::after {
    display: none !important;
}