/* =====================================
   TriAxis - MODAL V2
===================================== */


/* Fondo oscuro */

.esr-modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.45);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    opacity: 1;

    transition: opacity .2s ease;

}



/* Estado oculto */

.esr-modal-overlay.oculto {

    display:none;

}



/* Caja principal */

.esr-modal {


    width: 420px;

    max-width:90%;


    background:white;


    border-radius:20px;


    padding:35px;


    text-align:center;


    box-shadow:

    0 20px 60px rgba(0,0,0,.25);


    animation:

    modalEntrada .25s ease;


}



/* Icono superior */

.esr-modal-icono {


    width:70px;

    height:70px;


    margin:0 auto 20px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:35px;


}



/* Título */

.esr-modal h2 {


    margin:0 0 15px;


    font-size:24px;


    font-weight:700;


    color:#222;


}



/* Mensaje */

.esr-modal p {


    margin:0;


    color:#666;


    font-size:16px;


    line-height:1.5;


}



/* Botones */

.esr-modal-botones {


    margin-top:30px;


    display:flex;


    justify-content:center;


    gap:15px;


}



/* Botón secundario */

.btn-modal-secundario {


    padding:12px 22px;


    border:none;


    border-radius:10px;


    background:#eeeeee;


    color:#333;


    font-size:15px;


    font-weight:600;


    cursor:pointer;


    transition:.2s;


}



.btn-modal-secundario:hover {


    background:#ddd;


}





/* Botón principal */

.btn-modal-principal {


    padding:12px 22px;


    border:none;


    border-radius:10px;


    background:#111;


    color:white;


    font-size:15px;


    font-weight:600;


    cursor:pointer;


    transition:.2s;


}



.btn-modal-principal:hover {


    transform:translateY(-2px);


}





/* Animación entrada */


@keyframes modalEntrada {


    from {


        opacity:0;


        transform:scale(.9);


    }


    to {


        opacity:1;


        transform:scale(1);


    }


}
/* =====================================
   TIPOS DE MODAL
===================================== */


/* DANGER */

.modal-danger 
.esr-modal-icono {

    background:#ffe5e5;

}



.modal-danger
.btn-modal-principal {

    background:#d93025;

}



.modal-danger
.btn-modal-principal:hover {

    background:#b42318;

}





/* SUCCESS */


.modal-success
.esr-modal-icono {

    background:#e6f7ed;

}



.modal-success
.btn-modal-principal {

    background:#16a34a;

}



.modal-success
.btn-modal-principal:hover {

    background:#12803a;

}





/* WARNING */


.modal-warning
.esr-modal-icono {

    background:#fff4cc;

}



.modal-warning
.btn-modal-principal {

    background:#d97706;

}



.modal-warning
.btn-modal-principal:hover {

    background:#b45309;

}





/* INFO */


.modal-info
.esr-modal-icono {

    background:#e0f2fe;

}



.modal-info
.btn-modal-principal {

    background:#0284c7;

}



.modal-info
.btn-modal-principal:hover {

    background:#0369a1;

}