/**
 * Estilos base para SweetAlert2
 * Colores y estilos comunes para todos los tipos de alertas
 */

:root {
    --swal-primary-color: #20347D;
    --swal-secondary-color: #1b77bb;
    --swal-success-color: #28a745;
    --swal-warning-color: #ffc107;
    --swal-error-color: #20347D !important;
    --swal-info-color: #17a2b8;
    --swal-question-color: #6c757d;
    --swal-border-radius: 24px;
    --swal-border-radius-button: 32px;
    --swal-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Contenedor principal de SweetAlert2 */
.swal2-popup {
    border-radius: var(--swal-border-radius);
    box-shadow: var(--swal-box-shadow);
    font-family: inherit;
}

/* Título de la alerta */
.swal2-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

/* Contenido de la alerta */
.swal2-content {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
}

/* Botones */
.swal2-confirm {
    border-radius: var(--swal-border-radius-button);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.swal2-confirm:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.swal2-cancel {
    border-radius: var(--swal-border-radius-button);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.swal2-cancel:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Icono */
.swal2-icon {
    margin-bottom: 1.5rem;
}

/* Barra de progreso del timer */
.swal2-timer-progress-bar {
    background: var(--swal-primary-color);
}






/* Alertas */
.swal2-cancel {
    background: #20347D;
}

.swal2-cancel:hover {
    background: #165F96;
}

.swal2-confirm {
    background: #992427;
}

.swal2-warning,
.swal2-icon-content {
    border-color: #FABB0F !important;
    color: #FABB0F !important;
}

.swal2-confirm:hover {
    background: #CB1F03 !important;
}

/* Alertas */
.reiniciar-pasos-top-right {
    right: initial !important;
    border-radius: 32px !important;
}

.reiniciar-pasos-container .reiniciar-pasos-btn {
    border-radius: 32px !important;
    color: #20347d !important;
    padding: 14px !important;
    font-weight: bold !important;
}