/* ==========================================================
   PANEL CONTENEDOR
========================================================== */

.lea-contact-status-overlay{

    position:fixed !important;

    top:90px !important;

    right:30px !important;

    left:auto !important;

    bottom:auto !important;

    z-index:999999 !important;

    display:block !important;

    background:transparent !important;

}

/* ==========================================================
   PANEL
========================================================== */

.lea-contact-status-modal{

    width:360px !important;

    max-width:90vw !important;

    background:#FFFFFF !important;

    border-radius:18px !important;

    padding:20px !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18) !important;

    animation:leaContactSlideIn .20s ease-out;

}

/* ==========================================================
   ANIMACION
========================================================== */

@keyframes leaContactSlideIn{

    from{

        opacity:0;

        transform:
            translateY(-15px)
            translateX(15px);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            translateX(0);

    }

}

/* ==========================================================
   TITULO
========================================================== */

.lea-contact-status-title{

    margin:0 0 18px !important;

    font-size:22px !important;

    font-weight:700 !important;

    line-height:1.2 !important;

    color:#111827 !important;

}

/* ==========================================================
   LISTA
========================================================== */

.lea-contact-status-options{

    display:flex !important;

    flex-direction:column !important;

    gap:8px !important;

}

/* ==========================================================
   OPCION
========================================================== */

.lea-contact-radio{

    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    width:100% !important;

    padding:12px 14px !important;

    border-radius:10px !important;

    background:#FFFFFF !important;

    border:1px solid #E5E7EB !important;

    cursor:pointer !important;

    transition:all .15s ease !important;

}

.lea-contact-radio:hover{

    transform:translateX(3px);

    background:#F9FAFB !important;

}

/* ==========================================================
   RADIO
========================================================== */

.lea-contact-radio input{

    margin:0 !important;

    flex-shrink:0 !important;

}

/* ==========================================================
   ICONO
========================================================== */

.lea-contact-radio i{

    width:18px !important;

    text-align:center !important;

    color:#545454 !important;

}

/* ==========================================================
   TEXTO
========================================================== */

.lea-contact-radio{

    color:#374151 !important;

    font-size:14px !important;

    font-weight:500 !important;

}

/* ==========================================================
   COLORES ESTADOS CONTACTO
========================================================== */

.lea-contact-radio:nth-child(1){

    border-left:5px solid #22C55E !important;

}

.lea-contact-radio:nth-child(2){

    border-left:5px solid #9CA3AF !important;

}

.lea-contact-radio:nth-child(3){

    border-left:5px solid #F59E0B !important;

}

.lea-contact-radio:nth-child(4){

    border-left:5px solid #3B82F6 !important;

}

.lea-contact-radio:nth-child(5){

    border-left:5px solid #DC2626 !important;

}

/* ==========================================================
   FOOTER
========================================================== */

.lea-contact-status-footer{

    margin-top:18px !important;

    display:flex !important;

    justify-content:flex-end !important;

    gap:10px !important;

}

/* ==========================================================
   BOTON GUARDAR
========================================================== */

#lea-contact-save{

    border:none !important;

    background:#3B82F6 !important;

    color:#FFFFFF !important;

    padding:10px 18px !important;

    border-radius:10px !important;

    cursor:pointer !important;

    font-size:14px !important;

    font-weight:600 !important;

}

/* ==========================================================
   BOTON CANCELAR
========================================================== */

.lea-contact-status-cancel{

    border:none !important;

    background:#E5E7EB !important;

    color:#374151 !important;

    padding:10px 18px !important;

    border-radius:10px !important;

    cursor:pointer !important;

    font-size:14px !important;

    font-weight:600 !important;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .lea-contact-status-overlay{

        top:70px !important;

        right:10px !important;

    }

    .lea-contact-status-modal{

        width:320px !important;

    }

}