/**
 * Vídeo de Vimeo adaptativo (modo ambiente) para popups.
 * La proporción (aspect-ratio) se fija inline desde el shortcode, según las
 * dimensiones reales del vídeo, para que no aparezcan bandas negras.
 */

.video-vimeo {
    /* El ancho se fija inline (calculado por vídeo) y el aspect-ratio (inline)
       deduce el alto, así que el vídeo mantiene su proporción y nunca aparecen
       bandas negras. No forzamos width aquí para no pisar el cálculo inline. */
    /* Centrado dentro del popup. */
    margin: 0 auto;
    /* Negro por si el reproductor tarda un instante en cargar. */
    background-color: #000;
    line-height: 0;
    overflow: hidden;
}

/* El iframe llena el contenedor, que ya tiene la proporción real del vídeo. */
.video-vimeo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Ajuste del popup de Elementor al vídeo ---
   Cuando un popup de Elementor contiene nuestro vídeo, hacemos que la caja se
   ajuste EXACTAMENTE al vídeo: sin fondo blanco, sin relleno y sin márgenes
   laterales. Se usa :has() para afectar SOLO a los popups con [video_vimeo],
   nunca al resto de popups del cliente. */
.dialog-widget-content:has(.video-vimeo) {
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 95vw !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Quitamos el relleno interior del popup para que no deje hueco blanco. */
.dialog-message:has(.video-vimeo) {
    padding: 0 !important;
    width: auto !important;
}

/* El contenedor del widget "Código corto" no debe añadir su propio relleno. */
.elementor-widget-shortcode:has(.video-vimeo) .elementor-widget-container,
.elementor-widget-shortcode:has(.video-vimeo) {
    padding: 0 !important;
    margin: 0 !important;
}