/* Arya login — Arya CRM (animación rara y propia) */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body.av-login{
  font-family:"Outfit",sans-serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#081430;
  position:relative;
  overflow:hidden;
  color:#0b1b3f;
}

.av-scene,.av-scene canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.av-orb{
  position:absolute;border-radius:50%;filter:blur(40px);
  mix-blend-mode:screen;opacity:.7;animation:avDrift 16s ease-in-out infinite;
}
.av-orb.a{width:42vw;height:42vw;left:-10vw;top:-12vh;background:#1e4fd8;animation-duration:18s}
.av-orb.b{width:36vw;height:36vw;right:-8vw;bottom:-10vh;background:#b8860b;animation-duration:22s;animation-delay:-4s}
.av-orb.c{width:22vw;height:22vw;left:40vw;top:30vh;background:#1f6fd4;animation-duration:14s;animation-delay:-7s}
@keyframes avDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4vw,-3vh) scale(1.12)}
  66%{transform:translate(-5vw,4vh) scale(.92)}
}

.av-grid{
  position:absolute;inset:-20%;
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px);
  transform:perspective(600px) rotateX(62deg);
  animation:avGrid 18s linear infinite;
  z-index:0;pointer-events:none;opacity:.5;
}
@keyframes avGrid{to{transform:perspective(600px) rotateX(62deg) translateY(39px)}}

.av-noise{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.main{
  width:430px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(140%);
  border-radius:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.35) inset;
  overflow:visible;
  position:relative;
  z-index:2;
  animation:avCardIn .7s cubic-bezier(.2,.8,.2,1);
}
.main::before{
  content:"";
  position:absolute;inset:-1.5px;border-radius:29px;z-index:-1;
  background:conic-gradient(from var(--spin,0deg),#2563eb,#38bdf8,#d4af37,#ff5d73,#2563eb);
  animation:avSpin 8s linear infinite;
  filter:blur(.4px);
}
.main::after{
  content:"";
  position:absolute;inset:1.5px;border-radius:26.5px;background:rgba(255,255,255,.92);z-index:-1;
}
@keyframes avSpin{to{--spin:360deg}}
@property --spin{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes avCardIn{
  from{opacity:0;transform:translateY(28px) scale(.96) rotateX(8deg)}
  to{opacity:1;transform:none}
}

input[name="tabswitch"]{display:none}

.brand{text-align:center;padding:22px 24px 0;position:relative}
.brand-icon{
  width:86px;height:86px;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.brand-icon::before,.brand-icon::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1.5px dashed rgba(37, 99, 235,.55);
  animation:avOrbit 9s linear infinite;
}
.brand-icon::after{
  inset:-18px;border-style:dotted;border-color:rgba(212, 175, 55,.55);
  animation-direction:reverse;animation-duration:13s;
}
@keyframes avOrbit{to{transform:rotate(360deg)}}
.brand-icon img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 8px 16px rgba(11, 27, 63,.2))}
.brand h1{
  font-size:20px;font-weight:800;color:#0f2557;letter-spacing:.4px;
}
.brand p{font-size:12px;color:#5b6b88;margin-top:3px;font-weight:500}
.brand-kicker{
  display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#1e4fd8;font-weight:700;
  background:#eaf1fe;padding:4px 10px;border-radius:999px;
}

.tab-bar{
  display:flex;margin:16px 28px 0;background:#eef2f9;
  border-radius:14px;padding:4px;gap:4px;position:relative;
}
.tab{
  flex:1;text-align:center;padding:9px 14px;font-size:13px;font-weight:700;
  color:#5b6b88;cursor:pointer;border-radius:11px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);user-select:none;
}
.tab:hover{color:#163a7a}
#tabAsesores:checked ~ .tab-bar .tab-asesores,
#tabSupervisores:checked ~ .tab-bar .tab-supervisores{
  background:#fff;color:#1e4fd8;
  box-shadow:0 6px 16px rgba(11, 27, 63,.1);
}

.forms-wrap{position:relative;min-height:300px;overflow:hidden;margin-top:14px}
.signup,.login{
  position:absolute;width:100%;left:0;top:0;
  padding:0 28px 16px;
  transition:all .45s cubic-bezier(.4,0,.2,1);
}
.signup{transform:translateY(0);opacity:1}
.login{transform:translateY(16px);opacity:0;pointer-events:none;visibility:hidden}
#tabSupervisores:checked ~ .forms-wrap .signup{
  transform:translateY(-16px);opacity:0;pointer-events:none;visibility:hidden
}
#tabSupervisores:checked ~ .forms-wrap .login{
  transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible
}
.signup label[for="chk"],.login label[for="chk"]{display:none}

input[type="text"],input[type="password"]{
  width:100%;height:44px;padding:0 14px;margin-bottom:10px;
  border:1.5px solid #d9e1ef;border-radius:12px;font-size:13px;
  font-family:"Outfit",sans-serif;color:#0b1b3f;background:#f8fafd;
  outline:none;transition:all .25s ease;
}
input[type="text"]:focus,input[type="password"]:focus{
  border-color:#2563eb;background:#fff;
  box-shadow:0 0 0 4px rgba(37, 99, 235,.16);
}
input::placeholder{color:#94a3b8;font-weight:400}

button{
  width:100%;height:42px;margin-bottom:7px;border:none;border-radius:12px;
  font-size:14px;font-weight:700;font-family:"Outfit",sans-serif;
  cursor:pointer;transition:all .25s ease;
}
button[type="submit"],#signupBtn,#botonIngresoSupervisor{
  background:linear-gradient(135deg,#2563eb,#1e4fd8);
  color:#fff;letter-spacing:.4px;
  box-shadow:0 10px 24px rgba(30, 79, 216,.28);
}
button[type="submit"]:hover,#signupBtn:hover,#botonIngresoSupervisor:hover{
  filter:brightness(1.05);transform:translateY(-1px)
}
#btnReconAsesor,#btnSmsAsesor,#btnRecoSup,#btnSmsSup,#unlockBtn,#btnEnviarCodigoSupervisor,
.signup button[type="button"],.login button[type="button"]{
  background:#eef2f9;color:#3b4a6b;border:1.5px solid #d9e1ef;font-size:12px;height:40px
}
.signup button[type="button"]:hover,.login button[type="button"]:hover{background:#e1e8f5}

.alert{
  background:#ffe8ec;border:1px solid #ffc9d2;border-radius:12px;
  padding:10px 14px;margin-bottom:10px;font-size:13px
}
.hidden{display:none}
#videoElementSupervisor{width:100%;border-radius:14px;background:#000;display:none;margin-top:4px}

.brand-footer{
  text-align:center;padding:10px 24px 16px;
  border-top:1px solid #e8edf6;margin-top:4px;position:relative;z-index:1
}
.brand-footer img{height:22px;opacity:.5;transition:opacity .25s}
.brand-footer img:hover{opacity:.85}

@media (max-width:480px){
  .main{width:92%;border-radius:22px}
  .forms-wrap{min-height:280px}
  .signup,.login{padding:0 18px 12px}
  .brand{padding:16px 18px 0}
  .brand-icon{width:70px;height:70px}
  .tab-bar{margin:12px 18px 0}
}