diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php index 892beff..9404d90 100644 --- a/modules/turnero/views/display_global.php +++ b/modules/turnero/views/display_global.php @@ -112,8 +112,12 @@ $_hasVideo = (bool)$_tvPlaylist; overflow: hidden; position: relative; } + /* La columna del video se dimensiona sola: `auto` la deja del ancho que + pida su contenido, y el contenido es un cuadrado tan alto como el + cuerpo. Antes era una franja fija del 29% —proporción de reel—, así + que un video cuadrado quedaba diminuto y con medio espacio vacío. */ .pg-body.has-video { - grid-template-columns: 1fr 29%; + grid-template-columns: 1fr auto; } .pg-body.has-video .turno-activo { display: none; } @@ -240,25 +244,29 @@ $_hasVideo = (bool)$_tvPlaylist; } .ul-item.activo .ul-dest { color: rgba(255,255,255,.85); } - /* ── Video reel ── - El material es cuadrado. Antes la caja ocupaba todo el alto de una - columna angosta y, con object-fit:cover, del cuadrado solo se veía - una franja vertical del centro: se perdían los bordes del video. - Ahora la caja es cuadrada y se centra, así entra completo. */ + /* ── Video cuadrado ── + El material ya no es de proporción reel sino cuadrado. La caja toma + todo el alto disponible y el ancho lo deduce de ahí (aspect-ratio), + así que el cuadrado sale tan grande como quepa. Se limita a la mitad + de la pantalla para no ahogar la columna de los llamados. */ .reel-wrap { display: none; height: 100%; + max-width: 50vw; overflow: hidden; padding: 8px 8px 8px 0; align-items: center; justify-content: center; } .reel-wrap.has-video { display: flex; } + /* El cuadrado se define aquí y no en el contenedor: con box-sizing + border-box, el padding asimétrico del contenedor deformaría la + proporción. La columna se ajusta sola al ancho que resulte. */ .reel-wrap .reel-inner { - width: 100%; - height: auto; + height: 100%; + width: auto; aspect-ratio: 1 / 1; - max-height: 100%; + max-width: 100%; border-radius: 16px; overflow: hidden; box-shadow: -8px 0 30px rgba(0,0,0,.08);