/* ============================================================
   Barra de Avisos Globales (encima del navbar principal)
   Estilo NDH: fondo oscuro, acento naranja, borde suave.
   ============================================================ */

.ndh-annbar {
    position: relative;
    z-index: 190; /* debajo del navbar sticky (z-index: 200) */
    background:
        radial-gradient(700px 60px at 18% 0%, rgba(249,115,22,.16), transparent 65%),
        linear-gradient(to right, #0b1120, #111827);
    border-bottom: 1px solid rgba(249,115,22,.28);
    color: var(--text-main, #f9fafb);
    font-size: .82rem;
    line-height: 1.3;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.ndh-annbar-viewport {
    position: relative;
    height: 2.1rem;
    overflow: hidden;
    transition: height .25s ease;
}

.ndh-annbar-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .7rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

.ndh-annbar-item.is-current {
    opacity: 1;
    visibility: visible;
}

/* La posición de reposo del aviso es centrada: es el estado de la pausa,
   el estado sin JavaScript y el de la vista previa del admin. */
.ndh-annbar-window {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
}

.ndh-annbar-track {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
    width: max-content;
    max-width: none;
    will-change: transform;
}

.ndh-annbar-msg {
    color: rgba(255,255,255,.92);
    font-weight: 500;
}

a.ndh-annbar-msg-link {
    text-decoration: none;
    color: rgba(255,255,255,.92);
}

a.ndh-annbar-msg-link:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(249,115,22,.7);
}

.ndh-annbar-cta {
    display: inline-flex;
    align-items: center;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(249,115,22,.42);
    background: rgba(249,115,22,.12);
    color: #fdba74;
    font-weight: 600;
    font-size: .75rem;
    text-decoration: none;
    white-space: nowrap;
}

.ndh-annbar-cta:hover {
    background: rgba(249,115,22,.2);
    border-color: rgba(249,115,22,.6);
    color: #ffedd5;
}

a.ndh-annbar-msg-link:focus-visible,
.ndh-annbar-cta:focus-visible,
.ndh-annbar-close:focus-visible {
    outline: 2px solid rgba(249,115,22,.85);
    outline-offset: 2px;
    border-radius: 6px;
}

.ndh-annbar-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(15,23,42,.65);
    color: rgba(255,255,255,.72);
    font-size: .66rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ndh-annbar-close:hover {
    color: #fff;
    border-color: rgba(249,115,22,.5);
    background: rgba(30,41,59,.9);
}

/* ── Modo multilínea (avisos largos en móvil) ──────────────────
   Lo activa el JS por ciclo cuando el aviso no cabe en una línea:
   el mensaje completo se muestra en varias líneas, centrado, y todo
   el bloque entra y sale como una unidad. */
.ndh-annbar-item.is-multiline {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.ndh-annbar-item.is-multiline .ndh-annbar-track {
    white-space: normal;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    row-gap: .3rem;
}

/* Vista previa dentro del panel de administración */
.ndh-annbar--preview {
    border-radius: 12px;
    border: 1px solid rgba(249,115,22,.28);
    overflow: hidden;
}

.ndh-annbar--preview .ndh-annbar-close {
    pointer-events: none;
}

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ndh-annbar {
        font-size: .74rem;
    }

    .ndh-annbar-viewport {
        height: 2rem;
    }

    .ndh-annbar-item {
        gap: .4rem;
        padding: 0 .5rem;
    }

    .ndh-annbar-track {
        gap: .5rem;
    }

    .ndh-annbar-cta {
        padding: .1rem .45rem;
        font-size: .68rem;
    }
    /* El botón de cerrar conserva su tamaño (1.45rem): la X puede verse
       pequeña, pero el área táctil no se reduce. */
}

/* ── Impresión: la barra nunca aparece en documentos impresos ── */
@media print {
    .ndh-annbar {
        display: none !important;
    }
}

/* ── Movimiento reducido ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ndh-annbar-viewport {
        height: auto;
        min-height: 2.1rem;
        transition: none;
    }

    .ndh-annbar-item {
        position: static;
        display: none;
        transition: none;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .ndh-annbar-item.is-current {
        display: flex;
    }

    .ndh-annbar-track {
        white-space: normal;
        transform: none !important;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        width: auto;
        max-width: 100%;
    }
}