/* ==========================================================
   STREAM FLARY - LOGIN / REGISTRO / RECUPERAR
   Fondo: auth-bg.jpg (16:9). Las tarjetas se ubican a la derecha,
   sobre el arte, y escalan con él. En celular se apilan.
========================================================== */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0216}
body{font-family:'Nunito','Quicksand','Segoe UI',Arial,Helvetica,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
:root{--btn-bg:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='80' viewBox='0 0 540 80' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'><g opacity='.35' stroke-width='1'><path d='M20 70l10-14 8 6 12-18 7 8 14-20'/><path d='M60 12l12 10-6 9 14 6'/><path d='M455 8l-10 14 8 6-12 16 9 8'/><path d='M500 72l-8-12 10-6-6-14 10-8'/><path d='M8 30l14 6 4-10 12 8'/></g></svg>") center/100% 100% no-repeat,
  linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%),
  linear-gradient(90deg,#e601c9,#c516ae 50%,#e601c9)}

/* ---------- escena ---------- */
.lg{--w:min(100vw,calc(100vh * 1.77344));--k:calc(var(--w) / 1362);--cw:min(92vw,440px);
    position:fixed;inset:0;display:flex;overflow:auto;background:#0b0216}
@supports (height:100dvh){.lg{--w:min(100vw,calc(100dvh * 1.77344))}}
.lg::before{content:'';position:fixed;inset:-40px;background:url('../images/auth-bg.jpg') center/cover no-repeat;filter:blur(26px) brightness(.5);z-index:0}
.lg::after{content:'';position:fixed;inset:0;z-index:0;background:url('../images/auth-bg-wide.jpg') center/calc(var(--w) * 1.46549) auto no-repeat}
.lg-stage{position:relative;z-index:1;margin:auto;flex:none;width:var(--w);aspect-ratio:1362/768}

/* ---------- tarjeta común ---------- */
.lg-card,.ac{position:absolute;left:59.47%;width:35.02%;
    background:linear-gradient(180deg,rgba(18,4,30,.88),rgba(8,2,18,.93));
    border:max(1px,calc(var(--c)*2)) solid rgba(255,110,235,.78);
    box-shadow:0 0 calc(var(--c)*34) rgba(255,0,204,.50),0 0 calc(var(--c)*7) rgba(255,100,236,.75),inset 0 0 calc(var(--c)*44) rgba(255,0,204,.16);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ==========================================================
   LOGIN (tarjeta de 630x650 escalada al ancho de la columna)
========================================================== */
.lg-card{--c:calc(var(--k) * .757143);top:17.97%;height:64.08%;border-radius:calc(var(--c)*28)}
.lg-card form{display:contents}
.lg-icon{position:absolute;left:50%;top:calc(var(--c)*31);width:calc(var(--c)*86);height:calc(var(--c)*86);transform:translateX(-50%);
    border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#5a0a5e 0,#3a0340 100%);
    border:max(2px,calc(var(--c)*3)) solid #ff7cf0;box-shadow:0 0 calc(var(--c)*22) rgba(255,40,220,.85),inset 0 0 calc(var(--c)*16) rgba(255,90,235,.55)}
.lg-icon svg{width:46%;height:46%;fill:#ffa8f6}
.lg-title{position:absolute;left:0;right:0;top:calc(var(--c)*124);margin:0;text-align:center;font-size:max(calc(var(--c)*40),24px);line-height:calc(var(--c)*52);font-weight:800;letter-spacing:.2px;color:#f4f2f7}
.lg-sub{position:absolute;left:0;right:0;top:calc(var(--c)*174);margin:0;text-align:center;font-size:max(calc(var(--c)*21),13px);line-height:calc(var(--c)*28);color:#f78fec}
.lg-input{position:absolute;left:calc(var(--c)*47);right:calc(var(--c)*47);height:calc(var(--c)*67);display:flex;align-items:center;gap:calc(var(--c)*20);padding:0 calc(var(--c)*24);border-radius:calc(var(--c)*15);
    background:linear-gradient(180deg,#170b26,#120a1f);border:max(1px,calc(var(--c)*2)) solid #74398a;box-shadow:inset 0 0 calc(var(--c)*14) rgba(185,0,255,.10);transition:border-color .2s,box-shadow .2s}
.lg-input:focus-within{border-color:#ff5fe6;box-shadow:0 0 calc(var(--c)*16) rgba(255,0,204,.45),inset 0 0 calc(var(--c)*14) rgba(185,0,255,.12)}
.lg-in1{top:calc(var(--c)*232)}.lg-in2{top:calc(var(--c)*319)}
.lg-input>svg{flex:none;width:max(calc(var(--c)*30),18px);height:max(calc(var(--c)*30),18px);fill:none;stroke:#f3e8f7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:max(calc(var(--c)*21),15px)}
.lg-input input::placeholder{color:#a79bb5;opacity:1}
.lg-input input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 100px #150b23 inset;caret-color:#fff}
.lg-eye{flex:none;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;color:#d9cfe2}
.lg-eye svg{width:max(calc(var(--c)*30),18px);height:max(calc(var(--c)*30),18px);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-eye .off{display:none}.lg-eye.on .off{display:block}.lg-eye.on .on-i{display:none}
.lg-opts{position:absolute;left:calc(var(--c)*47);right:calc(var(--c)*47);top:calc(var(--c)*406);height:calc(var(--c)*42);display:flex;align-items:center;justify-content:space-between;font-size:max(calc(var(--c)*18),12.5px)}
.lg-remember{display:flex;align-items:center;gap:calc(var(--c)*15);cursor:pointer;color:#fff;user-select:none}
.lg-remember input{position:absolute;opacity:0;pointer-events:none}
.lg-remember i{flex:none;width:max(calc(var(--c)*28),18px);height:max(calc(var(--c)*28),18px);border-radius:calc(var(--c)*7);background:#e53fd2;box-shadow:0 0 calc(var(--c)*12) rgba(255,40,220,.75);display:grid;place-items:center;transition:.15s}
.lg-remember i::after{content:'';width:32%;height:58%;border:solid #fff;border-width:0 max(2px,calc(var(--c)*3.4)) max(2px,calc(var(--c)*3.4)) 0;transform:translateY(-12%) rotate(45deg)}
.lg-remember input:not(:checked)+i{background:transparent;border:2px solid #a24a9c;box-shadow:none}
.lg-remember input:not(:checked)+i::after{display:none}
.lg-remember input:focus-visible+i{outline:2px solid #fff;outline-offset:2px}
.lg-opts a{color:#ff55e3;text-decoration:underline;text-underline-offset:3px}
.lg-btn,.ac-btn{display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;color:#fff;font:inherit;font-weight:800;letter-spacing:.3px;
    border:max(1px,calc(var(--c)*2)) solid #ff9af3;background:var(--btn-bg);
    box-shadow:0 0 calc(var(--c)*32) rgba(255,0,204,.75),inset 0 0 calc(var(--c)*20) rgba(255,170,250,.50);text-shadow:0 1px 6px rgba(90,0,80,.5);transition:filter .2s,transform .15s}
.lg-btn:hover,.ac-btn:hover{filter:brightness(1.12)}.lg-btn:active,.ac-btn:active{transform:scale(.99)}
.lg-btn svg,.ac-btn svg{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lg-btn{position:absolute;left:calc(var(--c)*47);right:calc(var(--c)*47);top:calc(var(--c)*475);height:calc(var(--c)*80);gap:calc(var(--c)*18);border-radius:calc(var(--c)*17);font-size:max(calc(var(--c)*27),17px)}
.lg-btn svg{width:max(calc(var(--c)*34),21px);height:max(calc(var(--c)*34),21px)}
.lg-reg{position:absolute;left:calc(var(--c)*47);right:calc(var(--c)*47);top:calc(var(--c)*584);height:calc(var(--c)*34);display:flex;align-items:center;gap:calc(var(--c)*20);font-size:max(calc(var(--c)*19),13px);color:#ece6f1;white-space:nowrap}
.lg-reg::before,.lg-reg::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.22)}
.lg-reg a{color:#ff55e3;font-weight:800;text-decoration:none;margin-left:.25em}.lg-reg a:hover{text-decoration:underline}

/* variante admin: sin opciones ni registro, tarjeta más corta */
.lg-card.adm{top:calc(50% - var(--c)*290);height:calc(var(--c)*580)}
.lg-card.adm .lg-title{font-size:max(calc(var(--c)*36),22px)}

/* ==========================================================
   REGISTRO / RECUPERAR (tarjeta de 477x623 en el arte)
========================================================== */
.ac{--c:var(--k);top:12.11%;height:81.12%;display:flex;flex-direction:column;padding:calc(var(--c)*51) calc(var(--c)*32) calc(var(--c)*34);border-radius:calc(var(--c)*24)}
.ac-auto{top:50%;height:auto;transform:translateY(-50%)}
.ac-icon{position:absolute;left:50%;top:0;width:max(calc(var(--c)*66),46px);height:max(calc(var(--c)*66),46px);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle,#5a0a5e 0,#3a0340 100%);border:max(2px,calc(var(--c)*2.6)) solid #ff7cf0;box-shadow:0 0 calc(var(--c)*20) rgba(255,40,220,.85),inset 0 0 calc(var(--c)*14) rgba(255,90,235,.55)}
.ac-icon svg{width:50%;height:50%;fill:#ffb3f7}
.ac-title{margin:0;font-size:max(calc(var(--c)*40),26px);line-height:1.3;font-weight:800;color:#fff}
.ac-title em{font-style:normal;color:#dc52c4}
.ac-sub{margin:calc(var(--c)*4) 0 0;font-size:max(calc(var(--c)*16),13px);line-height:1.5;color:#f1e9f4}
.ac form{display:grid;gap:max(calc(var(--c)*20),12px);margin-top:calc(var(--c)*13)}
.ac-row{display:grid;grid-template-columns:1fr 1fr;gap:max(calc(var(--c)*16),10px)}
.ac-in{display:flex;align-items:center;gap:calc(var(--c)*14);min-width:0;height:max(calc(var(--c)*50),44px);padding:0 calc(var(--c)*14);border-radius:calc(var(--c)*13);
    background:linear-gradient(180deg,rgba(32,16,38,.9),rgba(24,12,30,.9));border:max(1px,calc(var(--c)*1.4)) solid #4a3150;transition:border-color .2s,box-shadow .2s}
.ac-in:focus-within{border-color:#ff5fe6;box-shadow:0 0 calc(var(--c)*14) rgba(255,0,204,.45)}
.ac-in>svg{flex:none;width:max(calc(var(--c)*22),17px);height:max(calc(var(--c)*22),17px);fill:none;stroke:#e65bd0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ac-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:max(calc(var(--c)*14),13px)}
.ac-in input::placeholder{color:#b7a6bd;opacity:1;text-overflow:ellipsis}
.ac-in input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 100px #1d1023 inset;caret-color:#fff}
.ac-hint{margin:calc(var(--c)*-6) 0 0;font-size:max(calc(var(--c)*12.5),11.5px);line-height:1.45;color:#f1e9f4}.ac-hint b{font-weight:600;color:#c94db6}
.ac-btn{gap:calc(var(--c)*12);height:max(calc(var(--c)*57),48px);border-radius:calc(var(--c)*15);font-size:max(calc(var(--c)*20),17px)}
.ac-btn svg{width:max(calc(var(--c)*24),19px);height:max(calc(var(--c)*24),19px)}
.ac-foot{margin-top:calc(var(--c)*27);display:flex;align-items:center;gap:calc(var(--c)*20);font-size:max(calc(var(--c)*15),13px);color:#ece6f1;white-space:nowrap}
.ac-foot::before,.ac-foot::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.22)}
.ac-foot a{color:#ff55e3;font-weight:800;text-decoration:none;margin-left:.25em}.ac-foot a:hover{text-decoration:underline}

/* ---------- avisos ---------- */
.lg-toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10;display:grid;gap:8px;width:min(92vw,520px)}
.lg-toast{padding:12px 16px;border-radius:14px;font-weight:700;font-size:15px;background:rgba(15,3,30,.94);border:1.5px solid #ff55e3;color:#fff;box-shadow:0 0 22px rgba(255,0,204,.5);animation:lgin .3s}
.lg-toast.err{border-color:#ff5b7f;box-shadow:0 0 22px rgba(255,60,100,.5)}
@keyframes lgin{from{opacity:0;transform:translateY(-8px)}}

/* ==========================================================
   CELULAR / PANTALLAS VERTICALES: fondo fijo y tarjeta debajo
========================================================== */
/* ---------- compactos de pie (solo celular; en escritorio ya vienen en la imagen) ---------- */
.lg-perks{display:none;margin-top:18px;width:var(--cw);justify-content:space-between;gap:6px;color:#e6dcf0;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lg-perks span{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;flex:1}
.lg-perks svg{color:#ff7cf0;filter:drop-shadow(0 0 6px rgba(255,0,204,.7))}

/* ==========================================================
   CELULAR / PANTALLAS VERTICALES O BAJAS:
   encabezado con el rostro y el logo (recortado de la imagen) y la tarjeta debajo
========================================================== */
@media (max-width:700px),(max-aspect-ratio:6/5),(max-height:560px){
  .lg{--bw:min(100vw,520px)}
  .lg::before{position:absolute;inset:auto;top:0;left:50%;width:var(--bw);height:calc(var(--bw) * 1.12);transform:translateX(-50%);filter:none;
    background:url('../images/auth-bg.jpg') calc(var(--bw) * -.2069) calc(var(--bw) * -.0345) / calc(var(--bw) * 2.3483) auto no-repeat;
    -webkit-mask-image:linear-gradient(#000 66%,transparent);mask-image:linear-gradient(#000 66%,transparent)}
  .lg::after{display:none}
  .lg-stage{width:100%;aspect-ratio:auto;margin:0;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(var(--bw) * 1.0) 0 28px}
  .lg-card{--c:calc(var(--cw) / 630);position:relative;left:auto;top:auto;width:var(--cw);height:calc(var(--c)*650);flex:none}
  .lg-card.adm{top:auto;height:calc(var(--c)*580)}
  .ac{--c:calc(var(--cw) / 477);position:relative;left:auto;top:auto;width:var(--cw);height:auto;flex:none;padding-bottom:calc(var(--c)*34);margin-top:calc(var(--c)*22)}
  .ac-auto{transform:none}
  .ac-row{grid-template-columns:1fr}
  .lg-perks{display:flex}
}
@media (max-height:560px) and (min-width:701px){.lg{--bw:340px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* sin flechas (spinners) en campos numéricos, en toda la plataforma */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}