/* ─── Barra de anuncios — FUNJOSE ────────────────────────────────────────────
   Usado por template-parts/anuncios-bar.php
   No sticky: vive antes del header (wp_body_open), en el flujo normal del
   documento — se pierde al bajar y reaparece al volver arriba del todo.
   Fondo blanco, línea inferior tenue, texto en azul institucional.
   Desktop: 40px de alto, texto en una sola línea con elipsis si no cabe.
   Móvil: propuesta — 64px de alto, hasta 2 líneas de texto (ver abajo).
   ────────────────────────────────────────────────────────────────────────── */

.fj-announce {
    background: #fff;
    border-bottom: 1px solid #e4e7ee;
}

.fj-announce__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Flechas (izquierda) ── */
.fj-announce__nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fj-announce__arrow {
    appearance: none;
    background: none;
    border: none;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--global-palette2, #0077b6);
    cursor: pointer;
}

/* Sin efecto de hover: el tema define un fondo/color de hover global para
   cualquier <button>, así que se anula para que la flecha se vea igual
   siempre, sin importar el mouse. */
.fj-announce__arrow:hover:not(:disabled),
.fj-announce__arrow:focus:not(:disabled),
.fj-announce__arrow:active:not(:disabled) {
    background: none;
    box-shadow: none;
    color: var(--global-palette2, #0077b6);
}

.fj-announce__arrow:disabled {
    color: #c7cbdb;
    cursor: default;
}

/* ── Viewport con el anuncio activo ── */
.fj-announce__viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.fj-announce__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.fj-announce__item.is-current {
    transform: translateY(0);
}

.fj-announce__type {
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--global-palette2, #0077b6);
}

.fj-announce__type::after {
    content: '·';
    margin-left: 10px;
    color: #c7cbdb;
}

.fj-announce__text {
    flex: 1;
    min-width: 0;
    color: var(--global-palette2, #0077b6);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fj-announce__link {
    flex-shrink: 0;
    color: var(--global-palette2, #0077b6);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: underline;
}

.fj-announce__link:hover {
    color: #1A1860;
}

/* ── Móvil (≤719px) — propuesta: más alto, texto hasta 2 líneas ── */
@media screen and (max-width: 719px) {
    .fj-announce__inner {
        padding: 8px 20px;
        height: 108px;
        gap: 10px;
        align-items: flex-start;
    }

    .fj-announce__nav {
        margin-top: 2px;
    }

    .fj-announce__item {
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .fj-announce__type {
        flex: 0 0 100%;
    }

    .fj-announce__type::after {
        display: none;
    }

    .fj-announce__text {
        flex: 0 0 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        font-size: 0.85rem;
    }

    /* En su propia fila: si "Ver" compartiera fila con un texto de 2 líneas
       quedaría a la mitad de la oración en vez de al final. */
    .fj-announce__link {
        flex: 0 0 100%;
        text-align: right;
    }
}