/* ════════════════════════════════════════════════════════════
   BOTONES DE LOGIN SOCIAL — Google + Facebook + WhatsApp
   Lo usan login_modal.php (modal del sitio) y tarjeta2/login.php.
   El botón de Google lo dibuja GIS dentro de un iframe (no se puede
   estilar), así que los nuestros (.btn-social) copian sus medidas:
   variante "large / outline / rectangular" → 40px de alto, borde
   #dadce0, radio 4px, texto #3c4043 14px/500, logo a la izquierda y
   texto centrado. El ancho se toma de --social-btn-w (igual al
   data-width del botón de Google en cada página).
   ════════════════════════════════════════════════════════════ */
.social-btn-wrap{display:flex;justify-content:center;margin-bottom:8px}
.social-btn-wrap iframe{border-radius:4px!important}

.btn-social{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:var(--social-btn-w,320px);max-width:100%;height:40px;padding:0 40px;
    border:1px solid #dadce0;border-radius:4px;background:#fff;color:#3c4043;
    font-family:'Google Sans','Roboto',arial,sans-serif;font-size:14px;font-weight:500;
    letter-spacing:.25px;line-height:1;white-space:nowrap;cursor:pointer;
    -webkit-appearance:none;appearance:none;box-shadow:none;
    transition:background-color .218s,border-color .218s
}
.btn-social:hover{background:#f7f8f8;border-color:#d2e3fc}
.btn-social:active{background:#eef0f1}
.btn-social:focus-visible{outline:2px solid #4285f4;outline-offset:1px}
.btn-social:disabled{opacity:.6;cursor:default}
/* Logo pegado a la izquierda como el de Google (logo_alignment="left").
   Se neutralizan width/height/background/etc. porque el sitio usa la clase
   ".fab" para el botón flotante verde y choca con la de FontAwesome. */
.btn-social i{
    position:absolute;left:11px;top:50%;transform:translateY(-50%);
    font-size:18px;line-height:1;
    width:auto;height:auto;border-radius:0;background:none;box-shadow:none;margin:0
}
.btn-social-fb i{color:#1877f2}
.btn-social-wa i{color:#25d366;font-size:19px}

/* ── Panel de ingreso con código por WhatsApp (whatsapp_login.js) ── */
.wa-login-panel{
    width:var(--social-btn-w,320px);max-width:100%;margin:0 auto 10px;padding:14px;
    border:1px solid #dadce0;border-radius:4px;background:#f8fdf9;text-align:left;
    font-family:'Roboto',arial,sans-serif;color:#3c4043;box-sizing:border-box
}
.wa-login-panel[hidden]{display:none!important}
.wa-login-panel label{display:block;font-size:13px;font-weight:500;margin:0 0 6px;color:#3c4043}
.wa-login-panel p{font-size:13px;line-height:1.4;margin:0 0 10px;color:#3c4043}
.wa-login-panel input{
    display:block;width:100%;height:42px;padding:0 12px;margin:0 0 10px;box-sizing:border-box;
    border:1px solid #dadce0;border-radius:4px;background:#fff;color:#202124;
    font-size:16px;font-family:inherit;outline:none
}
.wa-login-panel input:focus{border-color:#25d366;box-shadow:0 0 0 2px rgba(37,211,102,.2)}
.wa-login-panel input[data-wa-codigo]{text-align:center;letter-spacing:8px;font-size:22px;font-weight:600}
.wa-login-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;
    border:0;border-radius:4px;background:#1f9e53;color:#fff;font-size:14px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:background .15s
}
.wa-login-btn i{position:static;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;margin:0;font-size:16px;color:inherit}
.wa-login-btn:hover{background:#188545}
.wa-login-btn:disabled{opacity:.65;cursor:default}
.wa-login-links{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.wa-login-link{border:0;background:none;padding:0;color:#1a73e8;font-size:12.5px;font-family:inherit;cursor:pointer}
.wa-login-link:disabled{color:#9aa0a6;cursor:default}
.wa-login-msg{font-size:13px;margin-top:10px;padding:8px 10px;border-radius:4px}
.wa-login-msg[hidden]{display:none}
.wa-login-msg.error{background:#fdecea;color:#b3261e}
.wa-login-msg.ok{background:#e6f4ea;color:#137333}