/* ═══════════════════════════════════════════════════════════
   ENTRENA PRO — auth.css (login / register)
═══════════════════════════════════════════════════════════ */
:root{
  --accent:#FF5733;--accent-soft:rgba(255,87,51,.12);--accent-glow:0 0 32px rgba(255,87,51,.3);
  --bg:#0A0E17;--bg2:#111827;--bg3:#1C2536;--card:#131B2A;
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.14);
  --text:#E8EDF5;--text2:#94A3B8;--text3:#4A5568;
  --font-d:'Barlow Condensed',sans-serif;--font-b:'IBM Plex Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);min-height:100vh;display:flex;overflow:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}

/* ── BACKGROUND ────────────────────────────────────────────── */
.bg-canvas{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-canvas::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}
.bg-blob{position:absolute;border-radius:50%;filter:blur(90px);animation:blobFloat 8s ease-in-out infinite alternate}
.blob-1{width:500px;height:500px;background:radial-gradient(circle,rgba(255,87,51,.18) 0%,transparent 70%);top:-150px;right:-100px}
.blob-2{width:400px;height:400px;background:radial-gradient(circle,rgba(0,194,224,.1) 0%,transparent 70%);bottom:-100px;left:-80px;animation-delay:-4s}
@keyframes blobFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(20px,-20px) scale(1.05)}}

/* ── LAYOUT ────────────────────────────────────────────────── */
.page-wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr 460px;min-height:100vh}

/* ── HERO ──────────────────────────────────────────────────── */
.hero{display:flex;flex-direction:column;justify-content:center;padding:60px 70px;position:relative}
.hero-logo{display:flex;align-items:center;gap:12px;margin-bottom:56px;animation:fadeUp .5s .1s both}
.logo-mark{width:44px;height:44px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--accent-glow)}
.logo-wordmark{font-family:var(--font-d);font-size:26px;font-weight:800;letter-spacing:2px;line-height:1}
.logo-wordmark span{color:var(--accent)}
.hero-headline{font-family:var(--font-d);font-size:clamp(50px,5.5vw,76px);font-weight:900;line-height:.96;letter-spacing:-1px;margin-bottom:22px;animation:fadeUp .5s .2s both}
.hero-headline em{font-style:normal;color:var(--accent);display:block}
.hero-sub{font-size:15px;color:var(--text2);line-height:1.65;max-width:420px;margin-bottom:42px;animation:fadeUp .5s .3s both}
.hero-features{display:flex;flex-direction:column;gap:13px;animation:fadeUp .5s .4s both}
.feat-row{display:flex;align-items:center;gap:12px}
.feat-icon{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.feat-text{font-size:13px;color:var(--text2)}
.hero-footer{position:absolute;bottom:36px;left:70px;font-size:11px;color:var(--text3);font-family:'IBM Plex Mono',monospace;animation:fadeUp .5s .6s both}

/* ── AUTH PANEL ────────────────────────────────────────────── */
.auth-panel{background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;padding:40px 44px;position:relative;overflow-y:auto;animation:slideIn .35s .1s both}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.panel-topbar{display:flex;align-items:center;gap:8px;margin-bottom:28px}
.lang-pill{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:7px;overflow:hidden}
.lang-opt{padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;color:var(--text3);transition:.15s;text-decoration:none}
.lang-opt.active{background:var(--accent);color:#fff}

.auth-tabs{display:flex;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:28px}
.auth-tab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:700;color:var(--text3);cursor:pointer;border-radius:7px;transition:.2s;letter-spacing:.3px}
.auth-tab.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}

.auth-view{display:none}
.auth-view.active{display:block;animation:fadeUp .22s ease both}
.auth-title{font-family:var(--font-d);font-size:26px;font-weight:800;letter-spacing:1px;margin-bottom:5px}
.auth-sub{font-size:13px;color:var(--text2);margin-bottom:24px}

/* forms */
.form-group{margin-bottom:14px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-label{display:block;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text3);pointer-events:none}
.form-input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 12px 9px 34px;border-radius:8px;font-family:var(--font-b);font-size:13.5px;outline:none;transition:border-color .2s,box-shadow .2s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-input::placeholder{color:var(--text3)}
.pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:3px;transition:color .15s}
.pass-toggle:hover{color:var(--accent)}
.pass-strength{margin-top:5px;height:3px;background:var(--bg3);border-radius:3px;overflow:hidden}
.pass-strength-bar{height:100%;border-radius:3px;transition:width .3s,background .3s;width:0}
.pass-strength-text{font-size:10px;color:var(--text3);margin-top:3px}

.sport-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:3px}
.sport-opt{padding:9px 5px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;text-align:center;cursor:pointer;transition:.14s}
.sport-opt:hover{border-color:var(--border2)}
.sport-opt.selected{border-color:var(--accent);background:var(--accent-soft)}
.sport-opt-icon{font-size:18px;margin-bottom:3px}
.sport-opt-lbl{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.5px}
.sport-opt.selected .sport-opt-lbl{color:var(--accent)}

.btn-submit{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:9px;font-family:var(--font-d);font-size:17px;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(0,0,0,.25);margin-top:4px}
.btn-submit:hover{filter:brightness(1.1);transform:translateY(-1px)}

.alert{padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px}
.alert-error  {background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:#FCA5A5}
.alert-success{background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86EFAC}
.alert-info   {background:rgba(0,194,224,.1); border:1px solid rgba(0,194,224,.2);  color:#7DD3EF}

/* ── CONSENT CHECKBOXES ────────────────────────────────────── */
.consent-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12px;color:var(--text2);line-height:1.5}
.consent-check input[type=checkbox]{flex-shrink:0;margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.consent-check:hover{color:var(--text)}

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

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:860px){
  body{overflow:auto}                          /* permite scroll completo */

  .page-wrap{
    display:flex;flex-direction:column;
    grid-template-columns:unset;
    min-height:100vh;width:100%;
  }

  /* Héroe compacto encima del formulario */
  .hero{
    display:flex!important;
    padding:28px 24px 26px;
    min-height:0;
    height:auto;
    justify-content:flex-start;
    flex-shrink:0;
  }
  /* Logo más pequeño en móvil */
  .hero-logo img{width:180px!important;max-width:70vw!important}
  .hero-logo{margin-bottom:14px!important}
  .hero-accent-line{margin-bottom:10px!important;width:60px}
  .hero-headline{
    font-size:clamp(28px,7vw,42px)!important;
    letter-spacing:0!important;
    margin-bottom:10px!important;
    line-height:1!important;
  }
  .hero-sub{
    font-size:12px!important;
    margin-bottom:0!important;
    max-width:100%!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:rgba(255,255,255,.55)!important;
  }

  /* Panel auth ocupa el resto */
  .auth-panel{
    border-left:none!important;
    flex:1;
    justify-content:flex-start;
    padding:28px 24px 48px;
    overflow-y:auto;
  }
  .panel-topbar{top:14px;right:16px}

  /* Formulario registro a 1 columna */
  .form-row-2{grid-template-columns:1fr!important}
}