/* =============================================
   publicidad.css — sistema publicitario propio (banners de imagen)
   ---------------------------------------------
   Dos layouts:
     .ad-sky     → 160x600 vertical, fixed en el margen (solo desktop ancho)
     .ad-banner  → horizontal adaptable (728x90 desktop / 320x100 movil)

   Los 4 anuncios se reparten: skyscraper izquierdo 2, derecho 2.
   ============================================= */

/* ---------------------------------------------
   Header sticky (navbar + barra de publicidad)
   ---------------------------------------------
   El header entero se pega arriba, asi la barra queda siempre bajo el
   navbar sin calcular alturas. z-index del sticky-top de Bootstrap.
   --------------------------------------------- */
.site-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ---------------------------------------------
   Barra de publicidad superior (1 anuncio, siempre visible)
   ---------------------------------------------
   Full-width, centrada, altura contenida. El <picture> ya elige la
   imagen (728x90 desktop / 320x100 movil); aqui se limita el alto para
   no comerse la pantalla.
   --------------------------------------------- */
.ad-topbar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
    padding: 4px 8px;
    line-height: 0;
}

.ad-topbar-item {
    display: block;
    line-height: 0;
    max-width: 100%;
    transition: opacity 0.15s ease;
}

.ad-topbar-item:hover { opacity: 0.94; }

.ad-topbar-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.ad-topbar-item img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* En movil la barra ocupa TODO el ancho: la imagen movil (320x100) llena
   la pantalla en vez de verse chiquita centrada. El padding lateral se
   quita para que no queden franjas. */
@media (max-width: 767.98px) {
    .ad-topbar {
        padding: 0;
    }
    .ad-topbar-item {
        width: 100%;
    }
    .ad-topbar-item img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

/* ---------------------------------------------
   Skyscrapers laterales
   ---------------------------------------------
   position: fixed para que sigan el scroll.

   OJO: un `transform` en cualquier ancestro crea un containing block nuevo
   y rompe el fixed (el elemento se ancla al ancestro en vez del viewport).
   Por eso estos bloques van como hijos directos del <form> en Site.Master,
   fuera de cualquier contenedor con transform/hover animado.

   Solo se muestran cuando hay margen real: el .container del sitio topa en
   1140px, asi que por debajo de 1450px de viewport un skyscraper de 160px
   se encimaria con el contenido.
   --------------------------------------------- */
.ad-sky {
    display: none;  /* se activa por media query, ver abajo */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;   /* debajo del navbar (1030) y de los modales de Bootstrap */
    flex-direction: column;
    gap: 0.75rem;
}

.ad-sky-izq { left: 0.75rem; }
.ad-sky-der { right: 0.75rem; }

.ad-sky-item {
    display: block;
    line-height: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.ad-sky-item:hover {
    box-shadow: var(--shadow-md);
    opacity: 0.94;
}

.ad-sky-item img {
    display: block;
    width: 160px;
    height: auto;
}

.ad-sky-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ---------------------------------------------
   Cuando aparecen los laterales
   ---------------------------------------------
   El sitio usa el .container de Bootstrap 5, que llega a 1320px en
   pantallas grandes. Con un skyscraper de 160px + aire hacen falta
   ~190px por lado: 1320 + 380 = 1700px de viewport.

   Y no basta con el breakpoint: el hero y otras secciones son de ancho
   completo, asi que un bloque `fixed` se les encimaria igual. Por eso el
   body RESERVA el espacio con padding — el contenido se encoge y los
   laterales viven en un margen que es suyo. Asi es imposible que se
   solapen, en cualquier pagina y a cualquier ancho.

   El padding se reserva SOLO si el skyscraper existe de verdad en el DOM
   (`body:has(.ad-sky)`). Sin esto quedaban 184-220px de margen fantasma
   cada vez que el bloque no se pinta: con Publicidad:Habilitado=false, si
   la BD falla y el control degrada a vacio, o si faltan las imagenes.
   El navegador que no soporte :has() cae al bloque @supports de mas abajo,
   que reserva el espacio siempre — prefiere margen de sobra a que un
   lateral fixed se encime con el titulo, que es el bug que costo varias
   iteraciones.
   --------------------------------------------- */
@media (min-width: 1700px) {
    body:has(.ad-sky) {
        padding-left: 184px;
        padding-right: 184px;
    }

    .ad-sky {
        display: flex;
        /* 2 skyscrapers de 600 + gap = 1215px: mas alto que casi cualquier
           pantalla, asi que se recortan con scroll propio si no caben. */
        max-height: 96vh;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .ad-sky::-webkit-scrollbar { display: none; }
}

/* Pantallas muy anchas: mas aire respecto al contenido */
@media (min-width: 1900px) {
    body:has(.ad-sky) {
        padding-left: 220px;
        padding-right: 220px;
    }

    .ad-sky-izq { left: 2rem; }
    .ad-sky-der { right: 2rem; }
}

/* Fallback para navegadores sin :has() (Chrome <105, Safari <15.4,
   Firefox <121): ahi el selector de arriba no aplica NADA, ni siquiera
   cuando el skyscraper existe, y el lateral fixed se encimaria con el
   contenido. Se reserva el espacio siempre, como antes. El costo es el
   margen fantasma con la publicidad apagada, que en esos navegadores es
   solo cosmetico. */
@supports not selector(:has(*)) {
    @media (min-width: 1700px) {
        body {
            padding-left: 184px;
            padding-right: 184px;
        }
    }

    @media (min-width: 1900px) {
        body {
            padding-left: 220px;
            padding-right: 220px;
        }
    }
}

/* ---------------------------------------------
   Banner horizontal adaptable
   ---------------------------------------------
   El <picture> del control ya decide QUE imagen baja el navegador
   (320x100 en movil, 728x90 en desktop). Aqui solo se maqueta.
   --------------------------------------------- */
.ad-bloque {
    margin: 2.5rem 0;
}

.ad-bloque-titulo {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    text-align: center;
}

.ad-banner-lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ad-banner-item {
    display: block;
    line-height: 0;
    max-width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.ad-banner-item:hover {
    box-shadow: var(--shadow-md);
    opacity: 0.94;
}

.ad-banner-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* width/height van en el <img> para reservar el espacio y no causar CLS;
   aqui se deja que baje de tamano en pantallas angostas sin deformarse. */
.ad-banner-item img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* En el footer (fondo oscuro) el titulo necesita otro color */
.footer-institucional .ad-bloque-titulo {
    color: var(--footer-text);
    opacity: 0.8;
}

@media (max-width: 767.98px) {
    .ad-bloque {
        margin: 1.75rem 0;
    }

    /* Los banners in-content tambien llenan el ancho en movil: la imagen
       320x100 se ve grande y legible en vez de chiquita centrada. */
    .ad-banner-item {
        width: 100%;
    }
    .ad-banner-item img {
        width: 100%;
        height: auto;
    }
}