/* Login portable (shortcode [gmel_login]) — extraído de electoral.css */
/* ════════════════════════════════════════════════════════════════════
   LOGIN PROPIO DEL PORTAL — minimalista elegante (serif + aire + sobrio)
   ════════════════════════════════════════════════════════════════════ */
.gmel-login-wrap { display:flex; justify-content:center; align-items:flex-start; padding:30px 16px 48px; }
.gmel-login-card {
    position:relative; width:100%; max-width:440px; background:#fff;
    border:1px solid #efeae3; border-radius:16px; padding:40px 40px 30px;
    box-shadow:0 24px 60px -28px rgba(40,25,15,.30);
    animation:gmel-login-in .5s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes gmel-login-in { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.gmel-login-tick { display:block; width:46px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gmel-primary,#c8704a),#caa14a); margin-bottom:14px; }
.gmel-login-eyebrow { font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gmel-primary,#c8704a); font-weight:700; margin-bottom:7px; }
.gmel-login-title { font-family:'Playfair Display',Georgia,serif; font-size:clamp(2rem,5vw,3rem); line-height:1.15; font-weight:700; color:#1a1a1a; margin:0 0 34px; letter-spacing:-.02em; }
.gmel-login-dot { color:var(--gmel-primary,#c8704a); }
.gmel-login-sub { font-size:14px; color:#9b9087; line-height:1.55; margin:0 0 34px; text-align:center; }
.gmel-login-field { position:relative; margin-bottom:14px; }
.gmel-login-card input[type="text"],
.gmel-login-card input[type="password"] {
    width:100%; box-sizing:border-box; padding:16px; font-size:15px; font-family:inherit;
    color:#2b2520; background:#f4f1ec; border:1.5px solid transparent; border-radius:11px;
    transition:background .15s,border-color .15s,box-shadow .15s; -webkit-appearance:none; appearance:none;
}
.gmel-login-card input::placeholder { color:#aaa092; }
.gmel-login-card input:focus { outline:none; background:#fff; border-color:var(--gmel-primary,#c8704a); box-shadow:0 0 0 3px rgba(200,112,74,.12); }
.gmel-login-pwd input { padding-right:48px; }
.gmel-login-eye { position:absolute; top:50%; right:8px; transform:translateY(-50%); display:grid; place-items:center; width:36px; height:36px; border:0; background:transparent; cursor:pointer; color:#b1a899; border-radius:9px; transition:color .15s; }
.gmel-login-eye:hover { color:var(--gmel-primary,#c8704a); }
.gmel-login-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 22px; flex-wrap:wrap; }
.gmel-login-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; position:relative; }
.gmel-login-switch input { position:absolute; opacity:0; width:0; height:0; }
.gmel-login-track { position:relative; width:38px; height:22px; border-radius:11px; background:#d9d2c8; transition:background .2s; flex:0 0 auto; }
.gmel-login-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.gmel-login-switch input:checked + .gmel-login-track { background:var(--gmel-primary,#c8704a); }
.gmel-login-switch input:checked + .gmel-login-track .gmel-login-knob { transform:translateX(16px); }
.gmel-login-switch-txt { font-size:13.5px; color:#5b5249; }
.gmel-login-forgot { font-size:13px; color:var(--gmel-primary,#c8704a); text-decoration:none; }
.gmel-login-forgot:hover { text-decoration:underline; }
.gmel-login-error { display:none; margin:0 0 16px; padding:11px 14px; border-radius:10px; background:#fbeceb; border:1px solid #f1c9c6; color:#a83228; font-size:13px; line-height:1.4; }
.gmel-login-error.is-show { display:block; }
.gmel-login-submit { position:relative; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 18px; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:#1f1b18; border:0; border-radius:11px; cursor:pointer; transition:background .18s,transform .12s,box-shadow .18s; }
.gmel-login-submit:hover { background:#000; transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(0,0,0,.5); }
.gmel-login-submit:active { transform:translateY(0); }
.gmel-login-submit:disabled { cursor:default; opacity:.85; transform:none; }
.gmel-login-spinner { display:none; width:17px; height:17px; flex:0 0 auto; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:gmel-login-spin .6s linear infinite; }
@keyframes gmel-login-spin { to{transform:rotate(360deg);} }
.gmel-login-card.is-loading .gmel-login-spinner { display:block; }
.gmel-login-card.is-loading .gmel-login-btn-text { font-size:0; letter-spacing:0; }
.gmel-login-card.is-loading .gmel-login-btn-text::after { content:'Accediendo…'; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.gmel-login-card.is-ok .gmel-login-submit { background:#2d8c3c; }
.gmel-login-card.is-ok .gmel-login-spinner { display:none; }
.gmel-login-card.is-shake { animation:gmel-login-shake .4s; }
@keyframes gmel-login-shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
.gmel-login-sep { display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:#b7ad9f; font-size:12px; }
.gmel-login-sep::before, .gmel-login-sep::after { content:''; flex:1; height:1px; background:#ece6dd; }
.gmel-login-google { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:11px; padding:13px 18px; font-family:inherit; font-size:14.5px; font-weight:600; color:#3c3a37; background:#fff; border:1.5px solid #e2dcd2; border-radius:11px; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; }
.gmel-login-google:hover { background:#faf8f5; border-color:#d6cebf; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.gmel-login-foot { margin:18px 0 0; text-align:center; font-size:11px; color:#b3a99c; line-height:1.4; }
@media (max-width:480px) {
    .gmel-login-wrap { padding:14px 6px 30px; }
    .gmel-login-card { padding:30px 24px 22px; border-radius:15px; }
    .gmel-login-title { font-size:34px; }
}

/* — Login: BLINDAJE contra los estilos de <button> del tema + pulido final.
     Prefijo #gmel-login-box + !important para ganar al tema (que pone
     todos los botones negros y los vuelve blancos al hover). — */
/* Ojo de contraseña = icono limpio, NO un botón negro */
#gmel-login-box .gmel-login-eye,
#gmel-login-box .gmel-login-eye:hover,
#gmel-login-box .gmel-login-eye:focus {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: #b1a899 !important; min-height: 0 !important; width: 36px !important;
}
#gmel-login-box .gmel-login-eye:hover { color: var(--gmel-primary,#c8704a) !important; }
/* Botón principal: negro fijo (también en hover/focus) */
#gmel-login-box .gmel-login-submit,
#gmel-login-box .gmel-login-submit:focus {
    background: #1c1815 !important; color: #fff !important; border: 0 !important;
    box-shadow: none !important;
}
#gmel-login-box .gmel-login-submit:hover {
    background: #000 !important; color: #fff !important;
    box-shadow: 0 12px 26px -14px rgba(0,0,0,.55) !important;
}
#gmel-login-box.is-ok .gmel-login-submit,
#gmel-login-box .gmel-login-card.is-ok .gmel-login-submit { background: #2d8c3c !important; }
/* Google = botón SECUNDARIO de contorno (blanco), no un segundo bloque negro */
#gmel-login-box .gmel-login-google,
#gmel-login-box .gmel-login-google:focus {
    background: #fff !important; color: #3a3733 !important;
    border: 1.5px solid #e4ded4 !important; box-shadow: none !important;
}
#gmel-login-box .gmel-login-google:hover {
    background: #faf8f5 !important; color: #3a3733 !important; border-color: #d6cebf !important;
}
/* Tarjeta: que flote limpia, sin borde duro */
#gmel-login-box .gmel-login-card {
    border: 0 !important;
    box-shadow: 0 30px 70px -34px rgba(40,25,15,.26), 0 2px 10px rgba(40,25,15,.05) !important;
    padding: 44px 42px 32px !important;
}
/* Inputs un punto más claros y aireados */
#gmel-login-box .gmel-login-card input[type="text"],
#gmel-login-box .gmel-login-card input[type="password"] {
    background: #f7f4ef !important; padding: 17px 16px !important;
}

/* — Login: forzar el espaciado de la cabecera por encima del tema (que impone
     sus márgenes a h1/p). Barra→BIENVENIDO→Acceso juntos; aire bajo Acceso. — */
#gmel-login-box .gmel-login-tick    { margin: 0 0 16px !important; }
#gmel-login-box .gmel-login-eyebrow { margin: 0 0 8px !important; }
#gmel-login-box .gmel-login-title   { margin: 0 0 46px !important; line-height: 1 !important; }

/* — Login cabecera CENTRADA estilo "hero": eyebrow entre rayas + título centrado — */
#gmel-login-box .gmel-login-centro .gmel-login-eyebrow {
    display: flex !important; align-items: center; justify-content: center; gap: 14px;
    text-align: center !important; margin: 0 0 18px !important;
}
#gmel-login-box .gmel-login-centro .gmel-login-eyebrow::before,
#gmel-login-box .gmel-login-centro .gmel-login-eyebrow::after {
    content: ''; display: block; width: 46px; height: 1px;
    background: var(--gmel-primary,#c8704a); opacity: .85;
}
#gmel-login-box .gmel-login-centro .gmel-login-title {
    text-align: center !important; margin: 0 0 12px !important;
}
#gmel-login-box .gmel-login-centro .gmel-login-sub { text-align: center !important; margin: 0 0 34px !important; }

/* — Login: estrellitas IA sobre la "o" de Acceso (sustituyen al punto) — */
#gmel-login-box .gmel-login-o { position: relative; display: inline-block; }
#gmel-login-box .gmel-login-spark {
    position: absolute; top: -.10em; right: -.32em;
    width: .5em; height: .5em; color: var(--gmel-primary,#c8704a);
    pointer-events: none; animation: gmel-login-twinkle 2.6s ease-in-out infinite;
}
#gmel-login-box .gmel-login-spark svg { width: 100%; height: 100%; display: block; }
@keyframes gmel-login-twinkle {
    0%,100% { opacity: .9; transform: scale(1) rotate(0deg); }
    50%     { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

/* — Login: variante "info" del cuadro de aviso (p.ej. cuenta pendiente) — */
.gmel-login-error.gmel-login-info { background:#f6efe8 !important; border-color:#e6d3c4 !important; color:#7a4a2e !important; }

/* Popup global: tarjeta más ancha ("más gordito", menos estirada) */
#gmel-login-box .gmel-login-card { max-width: 540px !important; }

/* ════════ MODAL propio del login (botón "Clientes") ════════ */
.gmel-login-modal { position: fixed; inset: 0; z-index: 999999; display: none; }
.gmel-login-modal.is-open { display: block; }
.gmel-login-modal-backdrop { position: absolute; inset: 0; background: rgba(22,14,9,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: gmel-modal-fade .2s ease; }
.gmel-login-modal-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(448px, 94vw); max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gmel-login-modal-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: #f0ebe4; color: #6b6259; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.gmel-login-modal-x:hover { background: var(--gmel-primary,#c8704a); color: #fff; }
@keyframes gmel-modal-fade { from { opacity: 0; } to { opacity: 1; } }
/* Animación de entrada SOBRE EL DIÁLOGO (contenedor con scroll), no sobre la
   tarjeta. Si la animaba la tarjeta, el translateY(12px) la sacaba del diálogo
   y disparaba un scroll fantasma de unos ms al abrir. Mover el contenedor entero
   no genera overflow interno. */
@keyframes gmel-modal-dialog-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
.gmel-login-modal.is-open .gmel-login-modal-dialog { animation: gmel-modal-dialog-in .4s cubic-bezier(.16,.84,.44,1) both; }
/* dentro del modal la tarjeta NO hace su animación de entrada (la hace el diálogo)
   → sin scroll fantasma. El :not(.is-shake) deja vivo el shake de error. */
.gmel-login-modal .gmel-login-card:not(.is-shake) { animation: none; }
/* dentro del modal: la tarjeta a todo el ancho del diálogo, sin padding extra del wrap */
.gmel-login-modal .gmel-login-wrap { padding: 0; }
.gmel-login-modal #gmel-login-box .gmel-login-card { max-width: 100% !important; }

/* Modal: por encima de cualquier overlay de menú + adaptación móvil */
.gmel-login-modal { z-index: 2147483000 !important; }
@media (max-width: 600px) {
    .gmel-login-modal-dialog { width: 94vw; max-height: 90vh; }
    .gmel-login-modal-x { top: 6px; right: 6px; width: 36px; height: 36px; font-size: 20px; }
    .gmel-login-modal .gmel-login-card { padding: 30px 22px 22px !important; }
}

/* ════════ Panel "cuenta creada · pendiente de validación" ════════
   Oculto por defecto. Con .is-pending en la tarjeta: se oculta TODO lo demás
   (selector > *:not(.gmel-login-pending)) y se muestra solo el panel. */
.gmel-login-pending { display: none; text-align: center; padding: 6px 4px 2px; animation: gmel-login-in .45s cubic-bezier(.16,.84,.44,1) both; }
.gmel-login-card.is-pending > *:not(.gmel-login-pending) { display: none !important; }
.gmel-login-card.is-pending .gmel-login-pending { display: block; }
.gmel-login-pending-icon { width: 72px; height: 72px; margin: 4px auto 18px; display: grid; place-items: center; border-radius: 50%; background: #f6efe8; color: var(--gmel-primary,#c8704a); }
.gmel-login-pending-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; line-height: 1.1; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; letter-spacing: -.01em; }
.gmel-login-pending-msg { font-size: 14.5px; line-height: 1.6; color: #6b6259; margin: 0 0 24px; }
.gmel-login-pending-msg b { color: var(--gmel-primary,#c8704a); }
/* Botón "Entendido" — blindado contra los estilos de <button> del tema. */
#gmel-login-box .gmel-login-pending-ok,
.gmel-login-pending-ok {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 160px; padding: 14px 26px !important; font-family: inherit !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important;
    text-transform: uppercase !important; color: #fff !important; background: #1f1b18 !important;
    border: 0 !important; border-radius: 11px !important; cursor: pointer !important;
    box-shadow: none !important; transition: background .18s, transform .12s !important;
}
#gmel-login-box .gmel-login-pending-ok:hover,
.gmel-login-pending-ok:hover { background: #000 !important; color: #fff !important; transform: translateY(-1px); }