﻿/* =============================================================================
   GAIA VIP — HOME (Banner Aviso Importante) + utilidades de avisos
   -----------------------------------------------------------------------------
   Qué controla este fichero AHORA:
   1) Banner "AVISO IMPORTANTE" en Home:
      - Misma base visual que .card-panel (marco tipo Admin)
      - Borde blanco 2px (requisito)
      - Fondo limpio con un realce amarillo SUAVE (no “sucio”)
      - Cabecera: Título izquierda + Autor derecha (1 línea en desktop)
      - Móvil: cabecera pasa a 2 líneas (stack)
   2) .gaia-ann-body (usado también en la página de Hemeroteca)
   ============================================================================= */


/* =========================================================
   HOME — BANNER AVISO IMPORTANTE
   ========================================================= */

/* Marco tipo Admin + borde blanco 2px */
.gaia-important-banner {
    border: 1px solid #ffffff; /* requisito */
    background: linear-gradient( 180deg, rgba(255, 214, 10, .10) 0%, rgba(255, 214, 10, .00) 45% ), var(--bg-surface);
}

    /* “Chapa” AVISO IMPORTANTE: reutiliza el legend de .card-panel pero en amarillo limpio */
    .gaia-important-banner > h2:first-child {
        border-color: rgba(255, 214, 10, .85) !important;
        color: #ffd60a !important;
        background: rgba(255, 214, 10, .14) !important;
    }

/* Fila título/autor (desktop: misma línea) */
.gaia-imp-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: .15rem;
}

.gaia-imp-title {
    font-weight: 800;
    line-height: 1.15;
}

.gaia-imp-author {
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Cuerpo */
.gaia-imp-body {
    margin-top: .55rem;
    color: var(--text-main);
    text-align: justify;
    font-size: .95rem;
}

    /* Si el SafeMarkup mete <p> o <br>, evitamos “bloques enormes” */
    .gaia-imp-body p {
        margin: 0 0 .55rem 0;
    }

        .gaia-imp-body p:last-child {
            margin-bottom: 0;
        }

/* Footer fechas */
.gaia-imp-foot {
    margin-top: .75rem;
    padding-top: .6rem;
    font-size: .82rem;
    color: #63a8ff;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Móvil: pasamos a 2 líneas (título arriba, autor debajo) */
@media (max-width: 575.98px) {
    .gaia-imp-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .gaia-imp-author {
        white-space: normal;
    }
}


/* =========================================================
   HEMEROTECA — util (mantener)
   ========================================================= */

/* Esto lo usas en /Announcements/Index (clase gaia-ann-body) */
.gaia-ann-body {
    text-align: justify;
}
