/*==========================================

    MODAL DE CONFIRMACIÓN

==========================================*/



.modal-confirmacion-fondo {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(35, 28, 46, 0.42);

    backdrop-filter: blur(2px);

}



    .modal-confirmacion-fondo.activo {

        display: flex;

    }





/*==========================================

    CAJA DEL MODAL

==========================================*/



.modal-confirmacion {

    width: 100%;

    max-width: 420px;

    padding: 26px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 18px 45px rgba(42, 28, 58, 0.22);

    text-align: center;

    animation: modalConfirmacionEntrada 0.18s ease-out;

}





/*==========================================

    ÍCONO

==========================================*/



.modal-confirmacion-icono {

    width: 54px;

    height: 54px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fde8e8;

    color: #b42318;

    font-size: 22px;

}





/*==========================================

    CONTENIDO

==========================================*/



.modal-confirmacion-contenido h3 {

    margin: 0 0 10px;

    color: #2d2336;

    font-size: 21px;

    font-weight: 800;

}



.modal-confirmacion-contenido p {

    margin: 0;

    color: #665d6c;

    font-size: 15px;

    line-height: 1.55;

    white-space: pre-line;

}





/*==========================================

    ACCIONES

==========================================*/



.modal-confirmacion-acciones {

    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}



.btn-modal-cancelar,

.btn-modal-aceptar {

    min-width: 125px;

    height: 44px;

    padding: 0 18px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;

}





/*==========================================

    BOTÓN CANCELAR

==========================================*/



.btn-modal-cancelar {

    background: #f3f1f5;

    color: #514858;

    border: 1px solid #ded8e3;

}



    .btn-modal-cancelar:hover {

        background: #e9e5ed;

        border-color: #d1cad7;

    }





/*==========================================

    BOTÓN ACEPTAR

==========================================*/



.btn-modal-aceptar {

    background: #c94242;

    color: #ffffff;

    border: 1px solid #c94242;

}



    .btn-modal-aceptar:hover {

        background: #ad3434;

        border-color: #ad3434;

    }





    /*==========================================

    EFECTOS

==========================================*/



    .btn-modal-cancelar:hover,

    .btn-modal-aceptar:hover {

        transform: translateY(-1px);

    }



    .btn-modal-cancelar:active,

    .btn-modal-aceptar:active {

        transform: translateY(0);

    }





/*==========================================

    ANIMACIÓN

==========================================*/



@keyframes modalConfirmacionEntrada {



    from {

        opacity: 0;

        transform: translateY(8px) scale(0.98);

    }



    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}





/*==========================================

    RESPONSIVE

==========================================*/



@media (max-width: 520px) {



    .modal-confirmacion {

        max-width: 360px;

        padding: 22px;

    }



    .modal-confirmacion-acciones {

        flex-direction: column-reverse;

    }



    .btn-modal-cancelar,

    .btn-modal-aceptar {

        width: 100%;

    }

}