.modal_whatsapp {
    
    background:                     #fff;
    border-radius:                  20px;
    box-shadow:                     0 20px 40px rgba(0,0,0,0.3);
    display:                        none;
    font-family:                    var( --fuente_menu ) , sans-serif;
    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:                     #00a884;
    color:                          white;
    font-size:                      18px;
    font-weight:                    var( --peso_negrita );
    padding:                        16px 20px;
    position:                       relative;
    text-align:                     center;
    
}
.modal_whatsapp .modal_header .cerrar {
    
    background:                     none;
    border:                         none;
    color:                          white;
    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( --texto_principal );
    font-size:                      20px;
    margin:                         0 0 10px;
    
}
.modal_whatsapp .modal_contenido p {
    
    color:                          var( --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( --texto_principal );
    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 #ddd;
    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:                   #00a884;
    box-shadow:                     0 0 0 3px rgba(0,168,132,0.2);
    outline:                        none;
    
}
.modal_whatsapp .modal_contenido .boton_whatsapp {
    
    background:                     #00a884;
    border:                         none;
    border-radius:                  8px;
    color:                          white;
    cursor:                         pointer;
    font-size:                      16px;
    font-weight:                    var( --peso_negrita );
    padding:                        14px;
    transition:                     background 0.2s;
    width:                          100%;
    
}
.modal_whatsapp .modal_contenido .boton_whatsapp:hover {
    
    background:                     #008f6f;
    
}
.boton_volver {
    
    background:                     #f0f0f0;
    color:                          var( --texto_principal );
    margin-top:                     10px;
    
}
.modal_whatsapp .pantalla {
    
    display:                        none;
    
}
.modal_whatsapp .pantalla.activa {
    
    display:                        block;
    
}
.modal_whatsapp .modal_error {

    background:                     #f8d7da;
    border-radius:                  8px;
    box-shadow:                     0 4px 12px rgba( 0 , 0 , 0 , 0.15 );
    color:                          #721c24;
    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:                        0.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:                     #fff;
    border:                         2px solid #ddd;
    border-radius:                  8px;
    cursor:                         text;
    display:                        flex;
    font-size:                      24px;
    font-weight:                    bold;
    height:                         60px;
    justify-content:                center;
    margin-bottom:                  20px;
    transition:                     all 0.2s;
    width:                          50px;
    
}
.modal_whatsapp .otp_box.filled {
    
    border-color:                   #00a884;
    color:                          #00a884;
    
}