/* =========================================
   OPTIMIZACIONES VIDEO Y TRANSCRIPCIONES
   ========================================= */

/* --- Video Container Styles (Bootstrap 3 Compatible) --- */

/* Contenedor responsivo 16:9 */
.video-container-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    background-color: #000; /* Fondo negro para 'contain' */
    margin: 0 auto 20px auto; /* Centrado y espacio debajo del video */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.video-container-wrapper video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: contain; /* Muestra TODO el video sin recortar */
}

/* Estilos para Figure (Envoltorio de video + texto) */
.video-figure {
    margin: 0; /* Resetear márgenes del navegador */
    display: block;
}

/* Estilos internos de Figure (Caption y Transcripción) */
.video-figure figcaption {
    margin-top: 15px;
    text-align: center;
    padding: 0 15px; /* Pequeño padding lateral en móviles */
}

/* Tamaños máximos específicos */
.video-large { max-width: 1000px; margin-left: auto; margin-right: auto; }
.video-medium { max-width: 800px; margin-left: auto; margin-right: auto; }

/* --- Estilos para Transcripción (<details>) --- */

details {
    display: block;
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    text-align: left; /* Asegurar alineación a la izquierda */
}

summary {
    cursor: pointer;
    padding: 10px;
    background-color: #f5f5f5;
    font-weight: bold;
    border-radius: 4px;
    list-style: none; /* Ocultar triángulo por defecto de algunos navegadores */
    -webkit-user-select: none;
    user-select: none;
}

summary::-webkit-details-marker {
    display: none; /* Ocultar triángulo en Chrome/Safari */
}

summary:hover {
    background-color: #e0e0e0;
}

/* Icono personalizado opcional para details (puedes omitirlo si no quieres icono) */
summary::before {
    content: "+ ";
    font-weight: bold;
    margin-right: 5px;
}

details[open] summary::before {
    content: "- ";
}