/* V3-AUTH · auth-glass-v2 · Mensajes Masivos V2.0 · 12-oct-2026
   Pantallas de acceso: login, registro, recuperacion de contrasena, verificacion en dos pasos y errores.
   Conserva el fondo configurable del login (se le superpone un velo) y el color de marca del reseller. */

:root{
  --a-violet:#635bff;--a-violet2:#7a5cff;--a-teal:#0fb8a6;--a-pink:#ff7ab6;
  --a-ease:cubic-bezier(.22,1,.36,1);
  --a-display:'Sora','Inter',system-ui,-apple-system,sans-serif;
  --a-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@keyframes a-rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes a-float{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-2.5%,0) scale(1.08)}}
@keyframes a-sheen{from{transform:translateX(-130%)}to{transform:translateX(260%)}}

/* ───────── Escena: velo + luces ───────── */
body.auth-body,
body:has(.tc-card){font-family:var(--a-body);-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
body.auth-body::before,
body:has(.tc-card)::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(9,13,34,.66) 0%,rgba(49,46,129,.52) 52%,rgba(15,118,110,.34) 100%);
}
body.auth-body::after,
body:has(.tc-card)::after{
  content:"";position:fixed;inset:-8%;z-index:0;pointer-events:none;
  background:
    radial-gradient(520px 520px at 14% 20%,rgba(122,92,255,.50),transparent 65%),
    radial-gradient(480px 480px at 86% 84%,rgba(15,184,166,.38),transparent 65%),
    radial-gradient(340px 340px at 82% 12%,rgba(255,122,182,.28),transparent 65%);
  animation:a-float 20s ease-in-out infinite alternate;
}
body:has(.tc-card){background:linear-gradient(135deg,#0b1020 0%,#2b2a7d 55%,#4c1d95 100%)}

/* ───────── Login, registro y recuperacion ───────── */
body.auth-body .auth-container{position:relative;z-index:1;max-width:440px;animation:a-rise .8s var(--a-ease) backwards}
body.auth-body .auth-logo img{filter:drop-shadow(0 12px 32px rgba(122,92,255,.6))}
body.auth-body .auth-logo h2{font-family:var(--a-display);letter-spacing:-.025em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
body.auth-body .auth-card{
  background:rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:38px 36px 30px;
  box-shadow:0 60px 120px -40px rgba(6,10,40,.75),0 24px 48px -24px rgba(6,10,40,.5),inset 0 1px 0 rgba(255,255,255,.85);
  position:relative;overflow:hidden;
}
body.auth-body .auth-card::before{
  content:"";position:absolute;left:36px;right:36px;top:0;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,transparent,var(--a-violet),var(--a-teal),transparent);opacity:.85;
}
body.auth-body .auth-card h3{font-family:var(--a-display);font-size:26px;font-weight:800;letter-spacing:-.035em;text-align:center;margin-bottom:4px}
body.auth-body .auth-subtitle{text-align:center;opacity:.68;margin-bottom:22px}
body.auth-body .auth-card .form-group>label{font-size:12.5px;font-weight:600;letter-spacing:.01em}
body.auth-body .auth-card .input-icon input{
  height:50px;border-radius:14px;font-size:14.5px;
  border:1px solid #e2e8f0;background:#f8fafc;
  transition:border-color .25s var(--a-ease),box-shadow .3s var(--a-ease),background-color .25s;
}
body.auth-body .auth-card .input-icon input:hover{border-color:#cbd5e1}
body.auth-body .auth-card .input-icon input:focus{
  outline:0;background:#fff;border-color:var(--a-violet);box-shadow:0 0 0 5px rgba(99,91,255,.15);
}
body.auth-body .auth-card .input-icon>i:first-child{transition:color .25s}
body.auth-body .auth-card .input-icon:focus-within>i:first-child{color:var(--a-violet)}
body.auth-body .auth-card .form-row{align-items:center}
body.auth-body .auth-card .link-forgot{color:var(--a-violet);font-weight:600;transition:opacity .2s}
body.auth-body .auth-card .link-forgot:hover{opacity:.75}
body.auth-body .auth-card input[type=checkbox]{accent-color:var(--a-violet)}
body.auth-body .auth-card .g-recaptcha{display:flex;justify-content:center;margin:14px 0 6px;transform-origin:center}
body.auth-body .auth-card .btn-primary.btn-full{
  position:relative;overflow:hidden;height:52px;border:0;border-radius:14px;color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--primary,#163c64),color-mix(in srgb,var(--primary,#163c64) 52%,var(--a-violet2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 34px -14px color-mix(in srgb,var(--primary,#163c64) 90%,transparent);
  transition:transform .3s var(--a-ease),box-shadow .35s var(--a-ease);
}
body.auth-body .auth-card .btn-primary.btn-full::after{
  content:"";position:absolute;inset:0;width:38%;transform:translateX(-130%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
}
body.auth-body .auth-card .btn-primary.btn-full:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 40px -14px color-mix(in srgb,var(--primary,#163c64) 95%,transparent)}
body.auth-body .auth-card .btn-primary.btn-full:hover::after{animation:a-sheen .9s var(--a-ease)}
body.auth-body .auth-card .btn-primary.btn-full:active{transform:scale(.985)}
body.auth-body .auth-card .auth-footer{text-align:center;margin-top:18px;font-size:13.5px}
body.auth-body .auth-card .auth-footer a{color:var(--a-violet);font-weight:700}

/* Avisos dentro de la tarjeta */
body.auth-body .auth-card .alert{border-radius:14px;font-size:13px;margin-bottom:16px}

/* ───────── Verificacion en dos pasos ───────── */
body:has(.tc-card){position:relative}
body:has(.tc-card) .tc-card{
  position:relative;z-index:1;overflow:hidden;max-width:420px;width:calc(100% - 32px);
  background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:42px 36px 34px;
  box-shadow:0 60px 120px -40px rgba(6,10,40,.75),0 24px 48px -24px rgba(6,10,40,.5),inset 0 1px 0 rgba(255,255,255,.85);
  animation:a-rise .8s var(--a-ease) backwards;text-align:center;
}
body:has(.tc-card) .tc-card::before{
  content:"";position:absolute;left:36px;right:36px;top:0;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,transparent,var(--a-violet),var(--a-teal),transparent);opacity:.85;
}
body:has(.tc-card) .tc-ico{
  width:76px;height:76px;margin:0 auto 20px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:34px;
  background:linear-gradient(135deg,rgba(99,91,255,.18),rgba(15,184,166,.14));
  box-shadow:inset 0 0 0 1px rgba(99,91,255,.28),0 22px 34px -18px rgba(99,91,255,.8);
}
body:has(.tc-card) .tc-card h1{font-family:var(--a-display);font-size:25px;font-weight:800;letter-spacing:-.035em;margin-bottom:6px}
body:has(.tc-card) .tc-card p{opacity:.7;line-height:1.5;margin-bottom:22px}
body:has(.tc-card) .tc-inp{
  width:100%;height:68px;padding:0 0 0 .55em;border-radius:18px;border:2px solid #e2e8f0;background:#f8fafc;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:30px;font-weight:700;letter-spacing:.55em;text-align:center;
  transition:border-color .25s var(--a-ease),box-shadow .3s var(--a-ease),background-color .25s;
}
body:has(.tc-card) .tc-inp::placeholder{letter-spacing:.35em;opacity:.35}
body:has(.tc-card) .tc-inp:focus{outline:0;background:#fff;border-color:var(--a-violet);box-shadow:0 0 0 6px rgba(99,91,255,.16)}
body:has(.tc-card) .tc-btn{
  position:relative;overflow:hidden;width:100%;height:54px;margin-top:14px;border:0;border-radius:15px;cursor:pointer;color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;
  background:linear-gradient(135deg,#4f46e5,#7c3aed 60%,#0fb8a6 140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 36px -14px rgba(79,70,229,.85);
  transition:transform .3s var(--a-ease),box-shadow .35s var(--a-ease);
}
body:has(.tc-card) .tc-btn::after{
  content:"";position:absolute;inset:0;width:38%;transform:translateX(-130%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
}
body:has(.tc-card) .tc-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 26px 42px -14px rgba(79,70,229,.95)}
body:has(.tc-card) .tc-btn:hover::after{animation:a-sheen .9s var(--a-ease)}
body:has(.tc-card) .tc-btn:active{transform:scale(.985)}
body:has(.tc-card) .tc-links{margin-top:20px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
body:has(.tc-card) .tc-links a,
body:has(.tc-card) .tc-links button{color:var(--a-violet);font-weight:600;background:none;border:0;cursor:pointer;font-size:inherit;text-decoration:none}
body:has(.tc-card) .tc-links a:hover,
body:has(.tc-card) .tc-links button:hover{opacity:.75}
body:has(.tc-card) .tc-alert{border-radius:14px;font-size:13px;margin-bottom:16px;padding:12px 14px;text-align:left}

/* ───────── Pantallas pequenas y accesibilidad ───────── */
@media(max-width:480px){
  body.auth-body .auth-card,body:has(.tc-card) .tc-card{padding:30px 22px 24px;border-radius:24px}
  body.auth-body .auth-card .g-recaptcha{transform:scale(.9)}
  body:has(.tc-card) .tc-inp{font-size:26px;letter-spacing:.45em}
}
@media(prefers-reduced-motion:reduce){
  body.auth-body::after,body:has(.tc-card)::after,body.auth-body .auth-container,body:has(.tc-card) .tc-card{animation:none!important}
}

/* ═══════════════ auth-fit-v2 · 12-oct-2026 ═══════════════
   El login cabe en la ventana sin desplazarse: cada altura escala con la altura disponible. */
body.auth-body{
  min-height:100vh;min-height:100dvh;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(6px,1.6vh,22px) 14px;box-sizing:border-box;
}
body.auth-body .auth-container{width:100%;max-width:min(440px,100%);margin:auto}
body.auth-body .auth-logo{margin-bottom:clamp(4px,1.2vh,12px)}
body.auth-body .auth-logo img{
  max-height:clamp(38px,9vh,78px)!important;max-width:min(220px,60vw)!important;margin-bottom:clamp(2px,.5vh,6px);
}
body.auth-body .auth-logo h2{
  font-size:clamp(14px,2.5vh,19px)!important;color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.7);
}
body.auth-body .auth-card{padding:clamp(16px,3vh,36px) clamp(20px,3.4vh,36px) clamp(14px,2.4vh,28px)}
body.auth-body .auth-card h3{font-size:clamp(19px,3.4vh,26px);margin-bottom:2px}
body.auth-body .auth-subtitle{margin-bottom:clamp(8px,1.8vh,20px);font-size:clamp(12px,1.9vh,14px)}
body.auth-body .auth-card .form-group{margin-bottom:clamp(8px,1.5vh,16px)}
body.auth-body .auth-card .form-group>label{margin-bottom:3px}
body.auth-body .auth-card .input-icon input{height:clamp(40px,5.8vh,50px)}
body.auth-body .auth-card .form-row{margin-bottom:clamp(4px,1vh,12px)}
body.auth-body .auth-card .g-recaptcha{margin:clamp(2px,.8vh,12px) 0 clamp(2px,.5vh,6px)}
body.auth-body .auth-card .btn-primary.btn-full{height:clamp(42px,6vh,52px)}
body.auth-body .auth-card .auth-footer{margin-top:clamp(8px,1.5vh,16px);font-size:clamp(12px,1.9vh,13.5px)}
@media(max-height:720px){
  body.auth-body .auth-card .g-recaptcha{transform:scale(.88);margin-top:-4px;margin-bottom:-4px}
}
@media(max-height:620px){
  body.auth-body .auth-card .g-recaptcha{transform:scale(.8);margin-top:-8px;margin-bottom:-8px}
  body.auth-body .auth-card::before{display:none}
}

/* ═══════════════ auth-eye-v1 · 12-oct-2026 ═══════════════
   El boton de mostrar contrasena medía 0 px y su icono se salia del campo. */
body.auth-body .auth-card .toggle-pass{
  width:34px;height:34px;right:8px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  transition:background .2s,color .2s;
}
body.auth-body .auth-card .toggle-pass:hover{background:rgba(99,91,255,.1);color:var(--a-violet)}