/* ═══════════════════════════════════════════════════════════
   COMPONENTE ALERTA — Fase 3
   Sistema unificado de mensajes de estado al usuario.
   Variantes: success, error, warning, info.
   Modificadores: .alert-flash (con cierre), .alert-oculto (animación de salida).
   ═══════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────── */
.alert {
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--borde-radio-xs);
  font-size: var(--texto-xs);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ── Tonos (doble clase para especificidad 0,2,0) ─────────── */
.alert.alert-success {
  background: var(--alerta-exito-fondo);
  color: var(--alerta-exito-texto);
  border-left: 4px solid var(--estado-resuelta);
}
.alert.alert-error {
  background: var(--alerta-error-fondo);
  color: var(--alerta-error-texto);
  border-left: 4px solid var(--estado-urgente);
}
.alert.alert-warning {
  background: var(--alerta-warn-fondo);
  color: var(--alerta-warn-texto);
  border-left: 4px solid var(--alerta-warn-borde);
}
.alert.alert-info {
  background: var(--alerta-info-fondo);
  color: var(--alerta-info-texto);
  border-left: 4px solid var(--alerta-info-borde);
}

/* ── Variante flash (con cierre y transición de salida) ────── */
.alert.alert-flash {
  justify-content: space-between;
  max-height: 200px;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.4s ease,
    margin-bottom 0.4s ease,
    padding-top 0.4s ease,
    padding-bottom 0.4s ease,
    border-width 0.4s ease;
}

.alert.alert-flash.alert-oculto {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}

/* ── Botón de cierre ─────────────────────────────────────── */
.alert-cerrar {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--texto-lg);
  cursor: pointer;
  padding: 0 0.25rem;
  flex-shrink: 0;
  opacity: 0.65;
  line-height: 1;
}
.alert-cerrar:hover {
  opacity: 1;
}

/* ── Contenedor de texto (flex: 1 dentro de alert-flash) ─── */
.alert-mensaje {
  flex: 1;
}

/* ── Contenedor flash — toast fijo en esquina inferior derecha ── */
.flash-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(400px, calc(100vw - 2rem));
  pointer-events: none;
}
.flash-container > .alert {
  pointer-events: auto;
  box-shadow: var(--sombra-md);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .flash-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}