/* =========================================
   css/components/sweetalert.css
   Estética personalizada para SweetAlert2.
   Las clases son asignadas por alerts.js.
========================================= */

/* --- Popup principal --- */
.alerta-popup {
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
  font-family: var(--font-main) !important;
  padding: 1.5rem !important;
}

/* --- Título --- */
.alerta-titulo {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text-slate-900) !important;
  padding-bottom: 0.25rem !important;
}

/* --- Texto/contenido --- */
.alerta-contenido {
  font-size: 0.9rem !important;
  color: var(--text-slate-500) !important;
  line-height: 1.5 !important;
}

/* --- Contenedor de botones --- */
.alerta-acciones {
  gap: 0.65rem !important;
  margin-top: 0.5rem !important;
}

/* --- Botón Confirmar (rojo para eliminar) --- */
.alerta-btn-confirmar {
  padding: 10px 22px !important;
  background-color: var(--color-red-600) !important;
  color: var(--text-white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast) !important;
}

.alerta-btn-confirmar:hover {
  background-color: #b91c1c !important;
}

/* --- Botón Cancelar (secundario) --- */
.alerta-btn-cancelar {
  padding: 10px 22px !important;
  background-color: var(--bg-slate-100) !important;
  color: var(--text-slate-600) !important;
  border: 1px solid var(--border-slate-300) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast) !important;
}

.alerta-btn-cancelar:hover {
  background-color: var(--border-slate-300) !important;
}

/* --- Animaciones de entrada y salida --- */
@keyframes alertaEntrada {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes alertaSalida {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

.alerta-entrada { animation: alertaEntrada 0.25s ease forwards; }
.alerta-salida  { animation: alertaSalida  0.18s ease forwards; }