/* Estilos personalizados para los diálogos SweetAlert */

/* Estilos para el popup */
.swal-custom-popup {
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    font-family: 'Roboto Condensed', 'Segoe UI', sans-serif;
}

/* Estilo para el botón de confirmar */
.swal-confirm-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px 24px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease !important;
}

.swal-confirm-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76,175,80,0.3) !important;
}

.swal-confirm-button:focus {
    box-shadow: 0 0 0 3px rgba(76,175,80,0.5) !important;
}

/* Estilo para el botón de cancelar */
.swal-cancel-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px 24px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease !important;
}

.swal-cancel-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(221,51,51,0.3) !important;
}

.swal-cancel-button:focus {
    box-shadow: 0 0 0 3px rgba(221,51,51,0.5) !important;
}

/* Estilos para los inputs */
.swal2-input {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.swal2-input:focus {
    border-color: #4a90e2 !important;
    box-shadow: 0 0 0 2px rgba(74,144,226,0.2) !important;
}

/* Estilo para los iconos en los inputs */
.input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #4a90e2;
}

/* Estilo para el título */
.swal2-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Animación para el botón de confirmar */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}

.swal-confirm-button {
    animation: pulse 2s infinite;
}