/**
 * Framework - 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 objetos/estructura/publicidad/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 js/framework/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;
}