/* ============================================================
   BEXEL — pantalla de inicio de sesión
   Archivo aislado a propósito: solo lo carga index.html.
   No toca .auth-* (compartida con registro.html, planes.html y
   el estado de carga de marketplace/index.html).
   Reescrito desde cero el 25/08/2026 para partir de un estado
   limpio tras varias iteraciones de diseño con el usuario.
   Usa las variables de marca ya definidas en bexel.css
   (--accent, --font-display, etc.) para coherencia con el resto
   de la app.
   ============================================================ */

/* ---------- Base y fondo ---------- */

.login-screen{background:#050706}

/* Textura generada localmente con Python/Pillow (formas orgánicas suaves +
   desenfoque real) — ver STATE.md, sin créditos de generación por IA
   disponibles para una escena nueva. Da al cristal de la tarjeta algo real
   que desenfocar detrás. */
.login-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(rgba(1,3,3,.45),rgba(1,3,3,.45)),
    url("../img/login-bg-texture.webp?v=2") center/cover no-repeat;
  background-color:#020504;
}
.login-bg{animation:loginBgDrift 55s ease-in-out infinite alternate}
@keyframes loginBgDrift{from{background-position:center}to{background-position:54% 46%}}
.login-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 300px at 12% 84%,rgba(111,232,216,.20),transparent 72%),
    radial-gradient(circle 240px at 94% 90%,rgba(79,216,196,.15),transparent 72%),
    radial-gradient(ellipse 46% 40% at 78% 8%,rgba(94,227,211,.12),transparent 65%),
    linear-gradient(58deg,transparent 55%,rgba(63,203,180,.11) 78%,rgba(94,227,211,.06) 92%,transparent 100%),
    radial-gradient(ellipse 70% 60% at 50% 45%,transparent 30%,rgba(2,5,4,.64) 100%);
}

/* ---------- Botón flotante de tema ---------- */

.login-theme-fab{
  position:fixed;top:20px;right:20px;z-index:5;
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7);cursor:pointer;
  transition:border-color .18s,color .18s,transform .18s;
}
.login-theme-fab:hover{color:#fff;border-color:rgba(94,217,203,.4);transform:translateY(-1px)}
.login-theme-icon{font-size:16px;line-height:1}

/* ---------- Layout de dos columnas ---------- */

.login-main{
  position:relative;z-index:1;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px clamp(24px,4vw,64px);
}
.login-layout{
  width:min(1340px,100%);display:grid;
  grid-template-columns:minmax(340px,1fr) minmax(420px,1.02fr);
  gap:44px;align-items:center;
}

@keyframes loginRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Columna izquierda: logo y marca ---------- */

.login-hero{
  position:relative;min-height:600px;padding:20px;
  display:flex;align-items:center;justify-content:center;
  animation:loginRise .6s cubic-bezier(.16,1,.3,1) both;
}
.login-hero-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Logo con el fondo recortado de verdad (rembg/BiRefNet, procesado en local)
   a partir del archivo original del usuario — ya no es un icono enmarcado,
   se funde directamente con el fondo de la página. El texto pequeño
   "PERSONAL TRAINING" del archivo original salió con letras incompletas al
   recortar (demasiado fino para el modelo), así que se dejó fuera del
   recorte y se recrea abajo como texto real en HTML/CSS. */
.login-hero-logo{width:min(460px,92%);height:auto;filter:drop-shadow(0 26px 60px rgba(0,0,0,.5))}
.login-hero-subtitle{display:block;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.36em;color:#6fe8d8}
.login-hero-rule{width:min(220px,68%);display:flex;align-items:center;gap:12px;margin:22px auto 0;color:#5ee3d3}
.login-hero-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(94,227,211,.55))}
.login-hero-rule span:last-child{background:linear-gradient(90deg,rgba(94,227,211,.55),transparent)}
.login-hero-rule i{font-style:normal;font-size:13px;line-height:1}
.login-hero-tag{margin:18px 0 0;max-width:320px;color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6}

/* ---------- Columna derecha: tarjeta de login ---------- */

.login-card{
  position:relative;width:100%;border-radius:36px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(ellipse 60% 50% at 88% 0%,rgba(94,227,211,.09),transparent 60%),
    linear-gradient(155deg,rgba(255,255,255,.09),transparent 42%),
    rgba(9,13,12,.58);
  backdrop-filter:blur(30px) saturate(175%);
  -webkit-backdrop-filter:blur(30px) saturate(175%);
  box-shadow:0 50px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1);
  padding:56px clamp(34px,5vw,58px);
  display:flex;flex-direction:column;justify-content:center;
  animation:loginRise .6s cubic-bezier(.16,1,.3,1) .08s both;
}
.login-card::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}

.login-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;font-weight:800;color:rgba(255,255,255,.8)}
.login-eyebrow-bar{width:28px;height:3px;border-radius:2px;background:linear-gradient(90deg,#6fe8d8,var(--accent));box-shadow:0 0 12px rgba(94,227,211,.5);display:inline-block}

/* bexel.css define una regla global h1{font-size:...!important} — se
   necesita !important aquí también para ganar por especificidad dentro de
   esta misma hoja aislada, sin tocar la regla compartida. */
.login-card-head h1{margin:14px 0 9px;font-family:var(--font-display);font-size:clamp(38px,4.2vw,50px) !important;font-weight:800;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.login-card-head p{margin:0;color:rgba(255,255,255,.6);font-size:14px}

/* ---------- Formulario ---------- */

.login-form{margin-top:32px;display:grid;gap:20px}
.login-field{display:grid;gap:9px}
.login-field>span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}

.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-wrap svg{position:absolute;left:18px;width:18px;height:18px;color:rgba(255,255,255,.45);pointer-events:none;transition:color .18s}
.login-input-wrap input{
  width:100%;height:58px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(3,5,5,.4);
  color:#fff;font:inherit;font-size:14.5px;padding:0 16px 0 48px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.login-input-wrap input::placeholder{color:rgba(255,255,255,.32)}
.login-input-wrap input:focus{outline:none;border-color:var(--accent);background:rgba(3,5,5,.55);box-shadow:0 0 0 4px rgba(94,217,203,.16)}
.login-input-wrap input:focus~svg,.login-input-wrap:has(input:focus) svg{color:#6fe8d8}
.login-input-wrap input[type="password"],.login-input-wrap input[name="password"]{padding-right:46px}

.login-field.has-error .login-input-wrap input{border-color:var(--danger,#ff6b61);background:rgba(255,107,97,.06)}
.login-field.has-error .login-input-wrap input:focus{box-shadow:0 0 0 4px rgba(255,107,97,.16)}
.login-field.has-error .login-input-wrap svg{color:var(--danger,#ff6b61)}

.login-field-error:not([hidden]){display:flex;align-items:center;gap:6px;margin:2px 2px 0;color:#ff8b82;font-size:12px;font-weight:600}
.login-field-error:not([hidden])::before{content:"!";flex:0 0 14px;width:14px;height:14px;border-radius:50%;background:var(--danger,#ff6b61);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}

.login-form-error:not([hidden]){display:flex;align-items:center;gap:8px;margin:-4px 0 0;padding:11px 13px;border-radius:12px;background:rgba(255,107,97,.1);border:1px solid rgba(255,107,97,.28);color:#ff8b82;font-size:12.5px;font-weight:600}
.login-form-error:not([hidden])::before{content:"!";flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:var(--danger,#ff6b61);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}

.login-eye{position:absolute;right:10px;width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:rgba(255,255,255,.4);border-radius:9px;cursor:pointer;transition:color .18s,background .18s}
.login-eye:hover{color:#fff;background:rgba(255,255,255,.06)}
.login-eye svg{width:19px;height:19px}
.login-eye .eye-off{display:none}
.login-eye.is-visible .eye-open{display:none}
.login-eye.is-visible .eye-off{display:block}

.login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px}
.login-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.8);cursor:pointer}
.login-check input{width:19px;height:19px;border-radius:5px;accent-color:#6fe8d8;cursor:pointer}
.login-forgot{font-size:13px;color:#6fe8d8;text-decoration:none;font-weight:700;transition:color .18s}
.login-forgot:hover{color:#8ff2e4;text-decoration:underline}

/* ---------- Botón principal (con estado de carga) ---------- */

.login-submit{
  appearance:none;-webkit-appearance:none;position:relative;overflow:hidden;
  margin-top:10px;height:58px;border:1px solid rgba(255,255,255,.22);border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(100deg,#4fd8c4,#2f9c8c 62%,#28897b);
  color:#fff;
  font:inherit;font-size:15px;font-weight:800;letter-spacing:.015em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 20px 44px -12px rgba(63,203,180,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s,box-shadow .2s,opacity .2s;
}
.login-submit::after{content:"→";font-size:17px;transition:transform .2s}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 26px 52px -12px rgba(63,203,180,.68),inset 0 1px 0 rgba(255,255,255,.4)}
.login-submit:hover::after{transform:translateX(4px)}
.login-submit:active{transform:translateY(0) scale(.99)}
.login-submit:disabled{opacity:.72;cursor:default;transform:none}
.login-submit:disabled::after{content:""}
.login-submit.is-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:loginSpin .7s linear infinite}
@keyframes loginSpin{to{transform:rotate(360deg)}}

/* ---------- Separador, botón secundario y aviso final ---------- */

.login-divider{display:flex;align-items:center;gap:10px;margin:26px 0 18px;color:rgba(255,255,255,.42);font-size:12px}
.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.1)}
.login-divider span{white-space:nowrap}

.login-btn-secondary{
  width:100%;height:56px;border-radius:15px;
  border:1px solid rgba(94,217,203,.32);background:rgba(255,255,255,.02);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:14.5px;font-weight:700;text-decoration:none;
  transition:border-color .18s,background .18s,transform .18s;
}
.login-btn-secondary:hover{border-color:rgba(111,227,212,.6);background:rgba(255,255,255,.06);transform:translateY(-1px)}

.login-fineprint{display:flex;align-items:center;justify-content:center;gap:7px;margin:24px 0 0;color:rgba(255,255,255,.45);font-size:11.5px}
.login-fineprint svg{flex:0 0 auto;color:#5ee3d3}

/* ---------- Accesibilidad ---------- */

.login-screen a:focus-visible,.login-screen button:focus-visible,.login-screen input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.login-input-wrap input:focus-visible{outline:none}

/* ---------- Responsive ---------- */

@media(max-width:940px){
  .login-layout{grid-template-columns:1fr;max-width:520px}
  .login-hero{order:2;min-height:320px;padding-bottom:30px}
  .login-card{order:1}
  /* En recortes estrechos, el centro cae en la parte más plana de la
     textura y pierde los resplandores de las esquinas — se ancla más
     arriba y a la izquierda (con su propia deriva, no la de escritorio,
     porque una animación en marcha no se puede "corregir" con un
     background-position estático: seguiría saltando al valor del keyframe). */
  .login-bg{animation-name:loginBgDriftMobile}
}
@keyframes loginBgDriftMobile{from{background-position:20% 25%}to{background-position:26% 30%}}
@media(max-width:480px){
  .login-main{padding:24px 16px}
  .login-theme-fab{top:14px;right:14px}
  .login-hero{min-height:240px}
  .login-card{padding:32px 22px;border-radius:26px}
}
@media(prefers-reduced-motion:reduce){
  .login-bg,.login-hero,.login-card{animation:none}
  .login-submit.is-loading::before{animation:none}
}