/* SweetAlert2 Custom Styling - Diseño Morado Moderno */

/* Popup principal con fondo morado */
.swal2-popup {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    padding: 2rem !important;
}

/* Header del modal */
.swal2-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
}

/* Contenido/texto */
.swal2-html-container {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Iconos de SweetAlert */
.swal2-icon {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(40, 167, 69, 0.3) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #28a745 !important;
}

.swal2-icon.swal2-error {
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #dc3545 !important;
}

.swal2-icon.swal2-warning {
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffc107 !important;
}

.swal2-icon.swal2-info {
    border-color: rgba(23, 162, 184, 0.3) !important;
    color: #17a2b8 !important;
}

.swal2-icon.swal2-question {
    border-color: rgba(108, 117, 125, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Botones personalizados */
.swal2-actions {
    margin-top: 1.5rem !important;
}

/* Botón Confirmar */
.swal2-confirm {
    background: #ffffff !important;
    color: #667eea !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.swal2-confirm:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #764ba2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.3) !important;
}

/* Botón Cancelar */
.swal2-cancel {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.swal2-cancel:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.swal2-cancel:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2) !important;
}

/* Botón Denegar */
.swal2-deny {
    background: rgba(220, 53, 69, 0.3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(220, 53, 69, 0.5) !important;
    border-radius: 10px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
}

.swal2-deny:hover {
    background: rgba(220, 53, 69, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Input dentro de SweetAlert */
.swal2-input,
.swal2-textarea,
.swal2-select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #000 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2) !important;
    color: #000 !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Label de input */
.swal2-label {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
}

/* Validación de errores */
.swal2-validation-message {
    background: rgba(220, 53, 69, 0.3) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* Footer */
.swal2-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Backdrop oscuro */
.swal2-container {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Close button */
.swal2-close {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 2rem !important;
    transition: all 0.3s ease !important;
}

.swal2-close:hover {
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

/* Toast notifications */
.swal2-toast {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
}

.swal2-toast .swal2-title {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.swal2-toast .swal2-close {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Loading spinner dentro de SweetAlert */
.swal2-loader {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-left-color: #ffffff !important;
}

/* Checkbox y radio buttons */
.swal2-checkbox,
.swal2-radio {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* File input */
.swal2-file {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #000 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .swal2-popup {
        width: 90% !important;
        padding: 1.5rem !important;
    }
    
    .swal2-title {
        font-size: 1.5rem !important;
    }
    
    .swal2-confirm,
    .swal2-cancel {
        padding: 0.65rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
}