/* ==========================================================================
   COMPONENTE: BANNER DE AVISO GLOBAL
   Archivo: /css/aviso-banner.css
   [scout_aviso_banner] — colocado bajo la cabecera, visible en toda la web.
   Colores sólidos y vivos (a propósito distintos de los tintes pálidos de
   .scout-alerta-*, pensados para mensajes de formulario, no para banners).
   ========================================================================== */

.scout-aviso-banner {
    width: 100%;
    box-sizing: border-box;
    padding: 12px var(--espacio-md);
    text-align: center;
    border-radius: var(--radio-tarjeta);
}

.scout-aviso-banner-interior {
    max-width: 1100px;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
}

.scout-aviso-banner-interior a {
    color: #ffffff;
    text-decoration: underline;
}

.scout-aviso-color-info          { background-color: var(--color-accion-azul); }
.scout-aviso-color-positivo      { background-color: var(--color-accion-verde); }
.scout-aviso-color-advertencia   { background-color: var(--color-accion-ambar); }
.scout-aviso-color-urgente       { background-color: var(--color-accion-rojo); }
.scout-aviso-color-institucional { background-color: var(--scout-global-base); }

@media (max-width: 768px) {
    .scout-aviso-banner-interior {
        font-size: 0.85rem;
    }
}

/* --- Etiqueta de color/urgencia, solo para listados de gestión (p.ej.
   Mis Publicaciones) — sin fondo ni pastilla, solo texto de color, a
   petición expresa 15/08/2026 (el primer intento con fondo pastel
   seguía resaltando de más). Sin font-size/weight/display propios: hereda
   tal cual de la celda para quedar igual que el resto de texto de la
   columna "Tipo" (p.ej. la etiqueta "Recurrente" de al lado). El span de
   "Aviso"/icono de al lado es inline-flex (por el icono), lo que le da
   una línea base distinta a la del texto normal — probado a ojo con las
   distintas opciones de vertical-align, "top" es la que deja los bordes
   superiores de los dos textos exactamente a la misma altura (0px de
   diferencia medida; "middle"/"baseline" dejaban 2-3.5px de desfase). */
.scout-aviso-badge-suave {
    vertical-align: top;
}
.scout-aviso-badge-suave-info          { color: #1E40AF; }
.scout-aviso-badge-suave-positivo      { color: #166534; }
.scout-aviso-badge-suave-advertencia   { color: #92400E; }
.scout-aviso-badge-suave-urgente       { color: #991B1B; }
.scout-aviso-badge-suave-institucional { color: var(--scout-global-oscuro); }