/* app/assets/css/auth-modal.css — Pop-ups de Iniciar sesión y Registro (tarea #79). Prefijo .wfa-.
   Solo se aplica cuando modal.open(..., { variant: 'auth' }) añade .wfa al #modal y .wfa-overlay al fondo:
   el resto de modales de la web no cambian.
   Paleta de la home nueva / menú móvil / Instructores: azul noche #1E2532 + lima #C2F858 / #EBF8A4, Inter.
   Movimiento (Emil Kowalski): escala 0.96→1 + opacidad, entrada 220 ms y salida 160 ms, prefers-reduced-motion.
   Los !important solo pisan los !important que styles.css ya pone al modal en móvil. */
.wfa-overlay{
  --wfa-bg:#1E2532; --wfa-bg-2:#161B25; --wfa-card:rgba(255,255,255,.05);
  --wfa-borde:rgba(235,248,164,.18); --wfa-borde-2:rgba(255,255,255,.12);
  --wfa-lima:#C2F858; --wfa-lima-hover:#B5F536; --wfa-lima-suave:#EBF8A4; --wfa-tinta:#1E2532;
  --wfa-txt:#FFFFFF; --wfa-txt-2:#CBD5E1; --wfa-txt-3:#94A3B8; --wfa-rojo:#FCA5A5;
  --wfa-ease:cubic-bezier(0.23,1,0.32,1);
}

/* ---------- Fondo ---------- */
.modal-overlay.wfa-overlay{
  padding:16px;background:rgba(11,14,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity 160ms ease}
.modal-overlay.wfa-overlay.wfa-open{opacity:1;transition-duration:220ms}

/* ---------- Tarjeta ---------- */
.modal.wfa{
  position:relative;width:min(440px,100%);max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(90% 50% at 50% 0%,rgba(194,248,88,.14),transparent 70%),var(--wfa-bg);
  color:var(--wfa-txt);border:1px solid var(--wfa-borde);border-radius:24px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  opacity:0;transform:scale(.96) translateY(6px);transform-origin:50% 60%;
  transition:opacity 160ms ease,transform 160ms var(--wfa-ease)}
.wfa-open .modal.wfa{opacity:1;transform:none;transition:opacity 220ms ease,transform 220ms var(--wfa-ease)}
.modal.wfa *,.modal.wfa *::before,.modal.wfa *::after{box-sizing:border-box}

/* La cabecera del modal solo conserva el botón de cerrar; el título queda para lectores de pantalla */
.modal.wfa .modal-header{position:absolute;top:12px;right:12px;z-index:2;padding:0;border:0;background:none}
.modal.wfa .modal-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.modal.wfa .modal-close{width:40px;height:40px;border-radius:12px;border:1px solid var(--wfa-borde-2);background:rgba(255,255,255,.04);
  color:var(--wfa-txt-2);font-size:22px;line-height:1;transition:background-color 200ms ease,color 200ms ease,transform 140ms var(--wfa-ease)}
.modal.wfa .modal-close:active{transform:scale(.95)}
.modal.wfa .modal-body{padding:32px 28px 26px;background:none}

/* ---------- Encabezado ---------- */
.wfa-head{text-align:center;margin-bottom:22px}
.wfa-logo{display:block;width:140px;height:auto;margin:0 auto 18px}
.wfa-h{margin:0;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#fff}
.wfa-sub{margin:8px auto 0;max-width:330px;font-size:14px;line-height:1.55;color:var(--wfa-txt-2)}

/* ---------- Google ---------- */
.wfa-google{display:flex;justify-content:center;min-height:44px}
.wfa-google > div{width:100%;display:flex;justify-content:center}
.wfa-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wfa-txt-3)}
.wfa-divider::before,.wfa-divider::after{content:"";flex:1;height:1px;background:var(--wfa-borde-2)}

/* ---------- Formulario ---------- */
.wfa-form{display:grid;gap:14px;margin:0}
.wfa-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wfa-field{min-width:0}
.wfa-field label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wfa-txt-3)}
.wfa-field label small{text-transform:none;letter-spacing:0;font-weight:500}
.wfa-input{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;
  background:var(--wfa-card);border:1px solid var(--wfa-borde-2);color:var(--wfa-txt-3);
  transition:border-color 200ms ease,box-shadow 200ms ease,background-color 200ms ease}
.wfa-input:focus-within{border-color:var(--wfa-lima);box-shadow:0 0 0 3px rgba(194,248,88,.18);background:rgba(255,255,255,.07)}
.wfa-input > i{flex:none;width:16px;text-align:center;font-size:14px}
.wfa-input:focus-within > i{color:var(--wfa-lima)}
.modal.wfa .wfa-input input,.modal.wfa .wfa-input select{
  flex:1;min-width:0;height:46px;padding:0;border:0;outline:none;background:transparent;box-shadow:none;
  color:var(--wfa-txt);font:inherit;font-size:16px}/* 16px: iOS no hace zoom al enfocar */
.modal.wfa .wfa-input input::placeholder{color:var(--wfa-txt-3);opacity:1}
.modal.wfa .wfa-input input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #262E3D inset;caret-color:#fff}
.wfa-select select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:22px !important}
.wfa-select select option{background:var(--wfa-bg);color:var(--wfa-txt)}
.wfa-caret{position:absolute;right:14px;pointer-events:none;font-size:12px !important}
.wfa-eye{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:-8px;border:0;border-radius:10px;background:none;
  color:var(--wfa-txt-3);cursor:pointer;transition:color 200ms ease,background-color 200ms ease}
.wfa-eye[aria-pressed="true"]{color:var(--wfa-lima)}

.wfa-error{margin:0;padding:10px 12px;border-radius:12px;background:rgba(252,165,165,.12);border:1px solid rgba(252,165,165,.35);
  color:var(--wfa-rojo);font-size:14px;line-height:1.4}
.wfa-error[hidden]{display:none}

/* ---------- Botones ---------- */
.wfa-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 22px;
  border:0;border-radius:999px;font:700 16px/1 'Inter',sans-serif;letter-spacing:-.01em;cursor:pointer;
  transition:transform 140ms var(--wfa-ease),background-color 200ms ease,box-shadow 200ms ease,opacity 200ms ease}
.wfa-btn:active{transform:scale(.97)}
.wfa-btn-pri{margin-top:4px;background:var(--wfa-lima);color:var(--wfa-tinta);box-shadow:0 10px 30px -10px rgba(194,248,88,.55)}
.wfa-btn[disabled]{cursor:progress;opacity:.85}
.wfa-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(30,37,50,.3);border-top-color:var(--wfa-tinta);animation:wfaSpin 700ms linear infinite}
@keyframes wfaSpin{to{transform:rotate(360deg)}}

.wfa-switch{margin:4px 0 0;text-align:center;font-size:14px;color:var(--wfa-txt-2)}
.wfa-switch a{color:var(--wfa-lima);font-weight:700;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 200ms ease}

.modal.wfa :focus-visible{outline:3px solid var(--wfa-lima);outline-offset:2px}
.modal.wfa .wfa-input input:focus-visible,.modal.wfa .wfa-input select:focus-visible{outline:none}

/* ---------- Hover solo con puntero fino ---------- */
@media (hover:hover) and (pointer:fine){
  .modal.wfa .modal-close:hover{background:rgba(255,255,255,.09);color:#fff}
  .wfa-btn-pri:hover:not([disabled]){background:var(--wfa-lima-hover);box-shadow:0 0 0 6px rgba(194,248,88,.16),0 14px 34px -10px rgba(194,248,88,.6)}
  .wfa-eye:hover{color:#fff;background:rgba(255,255,255,.06)}
  .wfa-switch a:hover{border-bottom-color:var(--wfa-lima)}
  .wfa-input:hover:not(:focus-within){border-color:rgba(255,255,255,.2)}
}

/* ---------- Móvil ---------- */
@media (max-width:768px){
  .modal-overlay.wfa-overlay{padding:12px}
  .modal.wfa{width:100% !important;max-width:440px !important;border-radius:20px}
  .modal.wfa .modal-header{padding:0 !important}
  .modal.wfa .modal-body{padding:28px 18px 20px !important;max-height:none !important}
}
@media (max-width:420px){
  .wfa-row{grid-template-columns:1fr}
  .wfa-h{font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  .modal-overlay.wfa-overlay,.modal.wfa,.wfa-open .modal.wfa{transition:opacity 150ms ease !important;transform:none !important}
  .wfa-btn,.wfa-input,.wfa-eye{transition:none}
}