/**
 * Banda de avisos — AN Customs.
 * Ver docs/superpowers/specs/2026-07-15-banda-avisos-design.md
 */

#an-bar:empty {
    display: none;
}

#an-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Por encima del megamenú fijado, que es z-index:5000 (headers.scss:188).
       Sin esto la banda queda tapada. */
    z-index: 5010;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    transform: translateY(0);
    transition: transform 0.25s ease;
}

#an-bar.an-bar--hidden {
    transform: translateY(-100%);
}

.an-bar__viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    white-space: nowrap;
    overflow: hidden;
}

.an-bar__msg {
    font-weight: 600;
    text-decoration: none;
    padding: 0 4px;
}

a.an-bar__msg:hover {
    text-decoration: underline;
}

.an-bar__sep {
    opacity: 0.45;
    padding: 0 14px;
}

/* ---- Cinta (desktop) ---- */

.an-bar__viewport--marquee {
    justify-content: flex-start;
}

.an-bar__viewport--marquee .an-bar__track {
    display: inline-flex;
    align-items: center;
    flex: none;
    animation: an-bar-slide var(--an-bar-duration, 20s) linear infinite;
}

.an-bar__viewport--marquee:hover .an-bar__track {
    /* Se para al hover para poder leer y hacer clic */
    animation-play-state: paused;
}

.an-bar__track--fits {
    /* Cabe: quieto y centrado. Una cinta con un aviso corto marea y no aporta. */
    display: inline-flex;
    align-items: center;
}

@keyframes an-bar-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---- Rotación (móvil) ---- */

.an-bar__viewport--rotate {
    display: block;
    text-align: center;
    min-height: 1.4em;
}

.an-bar__viewport--rotate .an-bar__slide {
    position: absolute;
    left: 0;
    right: 0;
    /* top explícito y obligatorio: sin él, top:auto usa la posición estática,
       que para los slides 2..n cae DEBAJO del slide 1 (que está en flujo) y
       overflow:hidden los recorta -> la banda se queda en blanco al rotar.
       El valor debe coincidir con el padding-top del viewport. */
    top: 7px;
    padding: 0 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.an-bar__viewport--rotate .an-bar__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Primer slide en flujo: da su altura al contenedor.
   top:0 obligatorio: en un elemento `relative`, `top` NO coloca, DESPLAZA desde
   su posición normal. Sin esto, el `top:7px` de arriba —que es lo correcto para
   los `absolute`— se le SUMA al padding del viewport y el primer aviso aparece
   7px más abajo que los demás. */
.an-bar__viewport--rotate .an-bar__slide:first-child {
    position: relative;
    top: 0;
}

/* ---- Sin animación: todos a la vez ---- */

.an-bar__viewport--static {
    flex-wrap: wrap;
    gap: 4px 18px;
    white-space: normal;
}

@media (max-width: 991px) {
    .an-bar__viewport--static {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- Convivencia con el sticky del tema ----
   El tema pone #iqitmegamenu-wrapper.stuck-menu { top: 0 } (headers.scss:185).
   Prefijamos con `html` para ganar por especificidad sin depender del orden de
   carga de las hojas de estilo (y sin recurrir a !important). */

html #iqitmegamenu-wrapper.stuck-menu {
    top: var(--an-bar-offset, 0px);
    transition: top 0.25s ease;
}