.modal_whatsapp {

    background:                     var( --color_blanco );
    border-radius:                  20px;
    box-shadow:                     0 20px 40px rgba( 0 , 0 , 0 , .3 );
    display:                        none;
    font-family:                    var( --fuente_principal );
    left:                           50%;
    max-width:                      420px;
    overflow:                       hidden;
    position:                       fixed;
    top:                            50%;
    transform:                      translate( -50% , -50% );
    width:                          90%;
    z-index:                        var( --nivel_modal );

}
.modal_whatsapp .modal_header {

    background:                     var( --color_whatsapp );
    color:                          var( --color_blanco );
    font-size:                      18px;
    font-weight:                    var( --peso_seminegrita );
    padding:                        16px 20px;
    position:                       relative;
    text-align:                     center;

}
.modal_whatsapp .modal_header .cerrar {

    background:                     none;
    border:                         none;
    color:                          var( --color_blanco );
    cursor:                         pointer;
    font-size:                      24px;
    position:                       absolute;
    right:                          16px;
    top:                            50%;
    transform:                      translateY( -50% );

}
.modal_whatsapp .modal_contenido {

    padding:                        30px 25px;
    text-align:                     center;

}
.modal_whatsapp .modal_contenido h3 {

    color:                          var( --color_texto );
    font-size:                      20px;
    margin:                         0 0 10px;

}
.modal_whatsapp .modal_contenido p {

    color:                          var( --color_texto_secundario );
    font-size:                      14px;
    line-height:                    1.5;
    margin:                         0 0 20px;

}
.modal_whatsapp .modal_contenido .input_grupo {

    margin-bottom:                  20px;
    text-align:                     left;

}
.modal_whatsapp .modal_contenido .input_grupo label {

    color:                          var( --color_texto );
    display:                        block;
    font-weight:                    var( --peso_medio );
    margin-bottom:                  8px;

}
.modal_whatsapp .modal_contenido .input_grupo .input_telefono {

    display:                        flex;
    gap:                            8px;

}
.modal_whatsapp .modal_contenido .input_grupo .input_telefono select,
.modal_whatsapp .modal_contenido .input_grupo .input_telefono input {

    border:                         1px solid var( --color_borde );
    border-radius:                  8px;
    font-size:                      16px;
    padding:                        12px;

}
.modal_whatsapp .modal_contenido .input_grupo .input_telefono select {

    width:                          100px;

}
.modal_whatsapp .modal_contenido .input_grupo .input_telefono input {

    flex:                           1;

}
.modal_whatsapp .modal_contenido .otp_inputs input:focus {

    border-color:                   var( --color_whatsapp );
    box-shadow:                     0 0 0 3px rgba( 0 , 168 , 132 , .2 );
    outline:                        none;

}
.modal_whatsapp .modal_contenido .boton_whatsapp {

    background:                     var( --color_whatsapp );
    border:                         none;
    border-radius:                  8px;
    color:                          var( --color_blanco );
    cursor:                         pointer;
    font-size:                      16px;
    font-weight:                    var( --peso_seminegrita );
    padding:                        14px;
    transition:                     background .2s;
    width:                          100%;

}
.modal_whatsapp .modal_contenido .boton_whatsapp:hover {

    background:                     var( --color_whatsapp_oscuro );

}
.boton_volver {

    background:                     var( --color_fondo_suave );
    color:                          var( --color_texto );
    margin-top:                     10px;

}
.modal_whatsapp .pantalla {

    display:                        none;

}
.modal_whatsapp .pantalla.activa {

    display:                        block;

}
.modal_whatsapp .modal_error {

    background:                     rgba( 179 , 38 , 30 , .12 );
    border-radius:                  8px;
    box-shadow:                     0 4px 12px rgba( 0 , 0 , 0 , .15 );
    color:                          var( --color_error );
    display:                        none;
    font-size:                      14px;
    font-weight:                    var( --peso_medio );
    left:                           50%;
    max-width:                      90%;
    overflow:                       hidden;
    padding:                        10px 20px;
    position:                       absolute;
    text-align:                     center;
    text-overflow:                  ellipsis;
    top:                            10px;
    transform:                      translateX( -50% );
    white-space:                    nowrap;
    z-index:                        var( --nivel_alerta );

}
.modal_whatsapp .boton_whatsapp:disabled {

    cursor:                         not-allowed;
    opacity:                        .6;

}
.modal_whatsapp .otp_container {

    margin:                         20px auto;
    position:                       relative;
    width:                          300px;

}
#otp_input {

    caret-color:                    transparent;
    font-size:                      20px;
    height:                         60px;
    left:                           0;
    opacity:                        0;
    position:                       absolute;
    text-align:                     center;
    top:                            0;
    width:                          100%;
    z-index:                        2;

}
.modal_whatsapp .otp_display {

    display:                        flex;
    gap:                            10px;
    justify-content:                center;
    pointer-events:                 none;

}
.modal_whatsapp .otp_box {

    align-items:                    center;
    background:                     var( --color_blanco );
    border:                         2px solid var( --color_borde );
    border-radius:                  8px;
    cursor:                         text;
    display:                        flex;
    font-size:                      24px;
    font-weight:                    var( --peso_negrita );
    height:                         60px;
    justify-content:                center;
    margin-bottom:                  20px;
    transition:                     all .2s;
    width:                          50px;

}
.modal_whatsapp .otp_box.filled {

    border-color:                   var( --color_whatsapp );
    color:                          var( --color_whatsapp );

}