/* ==========================================================================
   COMPONENTE: CAJAS DE AVISO (ALERTAS)
   Capa: componentes (ver CLAUDE.md, "Arquitectura CSS").
   Se usa en toda la web (≈85 usos): mensajes de guardado, errores, avisos
   de los paneles, tienda, inscripciones...

   Uso: .scout-alerta SIEMPRE combinada con su tipo:
     .scout-alerta-error  rojo  — algo ha fallado / no se puede hacer
     .scout-alerta-exito  verde — se ha guardado / hecho
     .scout-alerta-info   azul  — información, sin error

   Colores en theme.json (settings.custom.aviso). Desde el 19/10/2026 el
   borde de cada tipo ES el color de acción de los botones (rojo, verde,
   azul) y el fondo y el texto son su tono claro y oscuro de la misma
   familia (decisión del responsable: un solo rojo/verde/azul en la web).

   Movido aquí el 19/10/2026 desde css/backend-form-edicion-post.css, con
   los mismos valores (se carga justo detrás de esa hoja, misma posición).
   ========================================================================== */

.scout-alerta {
    padding: 14px 18px;
    border-radius: var(--wp--custom--radio--aviso);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    border-left: 4px solid transparent;
}
.scout-alerta-error {
    background-color: var(--wp--custom--aviso--error-fondo);
    color: var(--wp--custom--aviso--error-texto);
    border-left-color: var(--wp--custom--aviso--error-borde);
}
.scout-alerta-exito {
    background-color: var(--wp--custom--aviso--exito-fondo);
    color: var(--wp--custom--aviso--exito-texto);
    border-left-color: var(--wp--custom--aviso--exito-borde);
}
.scout-alerta-info {
    background-color: var(--wp--custom--aviso--info-fondo);
    color: var(--wp--custom--aviso--info-texto);
    border-left-color: var(--wp--custom--aviso--info-borde);
}