/**
 * Radiocanal - Rail exterior lateral flotante (slot: global_side_rail_desktop)
 *
 * Exclusivo de PC. Fallback de referencia 200x500 (formato SR); el ancho y
 * alto reales del banner seleccionado llegan por variables CSS inline
 * (--rail-w/--rail-h), seteadas por
 * templates/radiocanal/providers/ads-rail-lateral-flotante.php a partir de
 * las dimensiones efectivas del banner (formato.ancho/alto, píxeles CSS de
 * render > archivo.ancho_px/alto_px sólo sin formato válido > 200x500). Este
 * archivo nunca hardcodea 180px ni ningún otro ancho fijo: si las variables
 * no llegan (p. ej. HTML legacy sin inline style), se usa el valor por
 * defecto de la propia variable CSS.
 *
 * Sin breakpoints fijos: qué lado(s) mostrar y en qué posición (left) los
 * decide templates/radiocanal/assets/js/pub-rail-lateral-flotante.js
 * midiendo en runtime el rectángulo real de <main class="container">
 * contra el viewport, porque el ancho renderizado del contenedor Bootstrap
 * puede variar (zoom, fuentes, scrollbar, futuros cambios de layout) y un
 * umbral fijo puede solapar el rail con el contenido. Este CSS sólo define
 * el aspecto visual; la visibilidad y el `left` de cada rail se controlan
 * desde el JS (clase `.pub-rail-flotante--visible` + `style.left` inline).
 */

.pub-rail-flotante {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: var(--rail-w, 200px);
    height: var(--rail-h, 500px);
    z-index: 1030;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f5;
    border-radius: 4px;
}

.pub-rail-flotante--visible {
    display: flex;
}

.pub-rail-flotante img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.pub-rail-flotante a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.pub-rail-flotante-cerrar {
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1031;
    font-size: 0.75rem;
}

.pub-rail-flotante-cerrar:hover,
.pub-rail-flotante-cerrar:focus-visible {
    background-color: rgba(0, 0, 0, 0.9);
}

.pub-rail-flotante-cerrar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}