/* ========================================
   ESTILOS RESPONSIVOS PARA VIDEOS EMBEBIDOS
   ======================================== */

/* Contenedor principal de video */
.video-container {
    position: relative;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 para videos */
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
    min-height: 300px; /* Altura mínima para evitar que sea muy pequeño */
}

/* Iframe del video */
.video-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 8px;
    min-height: 300px !important;
}

/* Contenedor específico para videos de introducción */
.section-introduction-box .video-container {
    margin-bottom: 30px;
    width: 100% !important;
    max-width: none !important;
}

/* Contenedor para videos en las secciones de menú */
.section-introduction-new-menu-image-box .video-container {
    margin-bottom: 25px;
    width: 100% !important;
    max-width: none !important;
}

/* Asegurar que los contenedores padre no limiten el tamaño */
.section-introduction-box,
.section-introduction-new-menu-image-box {
    width: 100% !important;
    max-width: none !important;
}

/* SOBRESCRIBIR ESTILOS DEL ARCHIVO menudigital.css */
.section-introduction-box {
    width: 100% !important;
    height: auto !important;
    min-width: 300px !important;
    aspect-ratio: auto !important;
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    background-color: #ffffff;
    display: block !important;
    align-items: normal !important;
    justify-content: normal !important;
    box-sizing: border-box;
}

.section-introduction-new-menu-image-box {
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    box-sizing: border-box;
    border: 1px solid #b67b83;
    border-radius: 8px;
    background-color: #f0f0f0;
    display: block !important;
    justify-content: normal !important;
    align-items: normal !important;
}

/* Asegurar que los contenedores padre también sean responsivos */
.section-introduction-container,
.section-introduction-new-menu-container {
    width: 100% !important;
    max-width: none !important;
}

/* Estilos responsivos para diferentes tamaños de pantalla */
@media (max-width: 1200px) {
    .video-container {
        padding-bottom: 56.25% !important; /* Mantener ratio 16:9 */
        margin-bottom: 18px;
        min-height: 280px;
    }
    
    .section-introduction-box,
    .section-introduction-new-menu-image-box {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 992px) {
    .video-container {
        padding-bottom: 56.25% !important;
        margin-bottom: 16px;
        min-height: 260px;
    }
    
    .section-introduction-box .video-container {
        margin-bottom: 25px;
    }
    
    .section-introduction-box,
    .section-introduction-new-menu-image-box {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .video-container {
        padding-bottom: 56.25% !important;
        margin-bottom: 15px;
        border-radius: 6px;
        min-height: 240px;
    }
    
    .section-introduction-box .video-container {
        margin-bottom: 20px;
    }
    
    .section-introduction-new-menu-image-box .video-container {
        margin-bottom: 20px;
    }
    
    .section-introduction-box,
    .section-introduction-new-menu-image-box {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 576px) {
    .video-container {
        padding-bottom: 56.25% !important;
        margin-bottom: 12px;
        border-radius: 4px;
        min-height: 200px;
    }
    
    .section-introduction-box .video-container {
        margin-bottom: 18px;
    }
    
    .section-introduction-new-menu-image-box .video-container {
        margin-bottom: 18px;
    }
    
    .section-introduction-box,
    .section-introduction-new-menu-image-box {
        width: 100% !important;
        height: auto !important;
    }
}

/* Efectos hover para mejorar la experiencia del usuario */
.video-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* Estilos para contenedores de video con diferentes ratios */
.video-container.ratio-4-3 {
    padding-bottom: 75% !important; /* Ratio 4:3 */
}

.video-container.ratio-21-9 {
    padding-bottom: 42.86% !important; /* Ratio 21:9 */
}

/* Estilos para videos en modo oscuro (opcional) */
.video-container.dark-theme {
    background-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Estilos para videos con borde personalizado */
.video-container.bordered {
    border: 2px solid #e0e0e0;
}

.video-container.bordered:hover {
    border-color: #007bff;
}

/* Estilos para videos con overlay de información */
.video-container.with-overlay {
    position: relative;
}

.video-container.with-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
    pointer-events: none;
    border-radius: 8px;
}

/* Estilos para videos con indicador de carga */
.video-container.loading::before {
    content: 'Cargando video...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10;
}

/* Estilos para videos con controles personalizados */
.video-container.custom-controls iframe {
    pointer-events: none;
}

.video-container.custom-controls::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 123, 255, 0.9);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.video-container.custom-controls:hover::after {
    background: rgba(0, 123, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Estilos para videos con etiquetas */
.video-container.with-label {
    margin-top: 30px;
}

.video-container.with-label::before {
    content: attr(data-label);
    position: absolute;
    top: -25px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    z-index: 10;
}

/* Estilos para videos en modo compacto */
.video-container.compact {
    padding-bottom: 42.86% !important; /* Ratio más cuadrado */
    margin-bottom: 15px;
    min-height: 250px;
}

/* Estilos para videos en modo expandido */
.video-container.expanded {
    padding-bottom: 75% !important; /* Ratio más alto */
    margin-bottom: 30px;
    min-height: 350px;
}

/* Estilos para videos con sombra personalizada */
.video-container.shadow-custom {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-container.shadow-custom:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

/* Estilos para videos con borde redondeado personalizado */
.video-container.rounded-lg {
    border-radius: 12px;
}

.video-container.rounded-xl {
    border-radius: 16px;
}

/* Estilos para videos con animación de entrada */
.video-container.animate-in {
    animation: videoSlideIn 0.6s ease-out;
}

@keyframes videoSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para videos con indicador de estado */
.video-container.status-playing::before {
    content: '▶ Reproduciendo';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    z-index: 10;
}

.video-container.status-paused::before {
    content: '⏸ Pausado';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 193, 7, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    z-index: 10;
}

/* Estilos adicionales para asegurar que los videos ocupen todo el espacio */
.video-container,
.video-container iframe {
    box-sizing: border-box;
}

/* Forzar que los contenedores padre no limiten el ancho */
.section-introduction-container,
.section-introduction-new-menu-container {
    width: 100% !important;
    max-width: none !important;
}

/* Asegurar que los videos en móviles tengan un tamaño mínimo adecuado */
@media (max-width: 480px) {
    .video-container {
        min-height: 180px !important;
        padding-bottom: 56.25% !important;
    }
    
    .section-introduction-box,
    .section-introduction-new-menu-image-box {
        width: 100% !important;
        height: auto !important;
    }
}