/* =====================================================================
   COMPONENTE · alerta
   Qué hace:    un mensaje dentro de la pantalla: un error al guardar, una
                confirmación, una advertencia. Siempre con texto (y si se
                puede, ícono): el color nunca es la única señal.
   Quién lo usa: formularios y pantallas del panel y del portal.
   Depende de:  tokens.css
   Requisitos:  R-GEN-07
   Uso:         <p class="alerta alerta--peligro" role="alert">No se pudo guardar.</p>
   ===================================================================== */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  background: var(--color-info-fondo);
  color: var(--color-info);
  font-size: var(--tamano-suave);
  font-weight: 600;
}

.alerta[hidden] {
  display: none;
}

.alerta--exito   { background: var(--color-exito-fondo);   color: var(--color-exito); }
.alerta--aviso   { background: var(--color-aviso-fondo);   color: var(--color-aviso); }
.alerta--peligro { background: var(--color-peligro-fondo); color: var(--color-peligro); }