/* ═══════════════════════════════════════════════════════════
   APEX RECUPERAR — Página recuperar contraseña
   Hereda el layout split de apex-login.css (se carga junto)
   ═══════════════════════════════════════════════════════════ */

/* Icono candado centrado sobre el formulario */
.form-icon{width:52px;height:52px;border-radius:50%;background:var(--accent-bg);border:1px solid var(--accent-bd);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.form-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Estado éxito */
.form-success{background:var(--success-bg);border:1px solid rgba(46,204,113,.25);padding:20px;border-radius:6px;text-align:center;animation:fadeIn .4s ease}
.form-success .check{width:40px;height:40px;border-radius:50%;background:var(--success-bg);border:1px solid rgba(46,204,113,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;animation:checkIn .4s ease}
.form-success .check svg{width:18px;height:18px;stroke:var(--success);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.form-success h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.form-success p{font-size:13px;color:var(--gray);line-height:1.7}

/* Link volver */
.back-link{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--gray);text-decoration:none;margin-top:20px;transition:color .15s}
.back-link:hover{color:var(--accent)}
.back-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Variante body de esta página */
body.apex-recover-page{background:#060f14;color:var(--text);display:flex;align-items:stretch;min-height:100vh;overflow:hidden}

/* 2026-09-04: el botón queda tapado por el banner FIJO de cookies en
   celulares con poco alto visible (Safari con sus barras). El contenido
   está centrado verticalmente (.right-panel, apex-login.css) y el banner
   mide ~140-270px de alto según el ancho — comprobado: con un viewport de
   375×480 el botón caía DENTRO de esa franja y el overflow real del
   formulario (31px) no alcanzaba para despejarlo aunque el panel ya
   scrollee (mismo día, apex-login.css). Este margen le da lugar real al
   `overflow-y:auto` de .right-panel: el usuario puede desplazar el
   formulario por encima del banner. Solo en mobile — en desktop el banner
   nunca tapa nada acá. */
@media(max-width:860px){
  .apex-recover-page .right-panel{padding-bottom:220px}
}