/* Arya CRM - login: animacion original (orbes, rejilla, particulas, anillo del card y orbitas del logo)
   adaptada al fondo claro + constelacion/aurora + halo del logo. Asesores = azul, Supervisores = dorado champana.
   Se carga despues de arya-theme-azul-dorado.css */

@property --av-g1 { syntax: "<color>"; inherits: true; initial-value: rgba(96, 165, 250, .55); }
@property --av-g2 { syntax: "<color>"; inherits: true; initial-value: rgba(59, 130, 246, .30); }
@property --av-g3 { syntax: "<color>"; inherits: true; initial-value: rgba(147, 197, 253, .22); }
@property --av-au1 { syntax: "<color>"; inherits: true; initial-value: rgba(96, 165, 250, .20); }
@property --av-au2 { syntax: "<color>"; inherits: true; initial-value: rgba(147, 197, 253, .30); }

html body.av-login {
  --av-g1: rgba(96, 165, 250, .55); --av-g2: rgba(59, 130, 246, .30); --av-g3: rgba(147, 197, 253, .22);
  --av-au1: rgba(96, 165, 250, .20); --av-au2: rgba(147, 197, 253, .30);
  transition: --av-g1 .6s ease, --av-g2 .6s ease, --av-g3 .6s ease, --av-au1 .6s ease, --av-au2 .6s ease;
}
html body.av-login.av-sup {
  --av-g1: rgba(251, 233, 183, .85); --av-g2: rgba(243, 217, 139, .50); --av-g3: rgba(233, 196, 106, .30);
  --av-au1: rgba(243, 217, 139, .26); --av-au2: rgba(251, 233, 183, .40);
}

/* ---------- Fondo animado ---------- */
html body.av-login .av-orb {
  mix-blend-mode: normal !important; opacity: .30 !important; filter: blur(60px) !important;
  transition: background-color .6s ease, opacity .6s ease;
}
html body.av-login .av-orb.a { background: #93C5FD !important; }
html body.av-login .av-orb.b { background: #60A5FA !important; opacity: .24 !important; }
html body.av-login .av-orb.c { background: #2563EB !important; opacity: .15 !important; }
html body.av-login.av-sup .av-orb.b { background: #FBE9B7 !important; opacity: .45 !important; }
html body.av-login.av-sup .av-orb.c { background: #F3D98B !important; opacity: .22 !important; }

html body.av-login .av-grid {
  filter: none !important; opacity: 1 !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(37, 99, 235, .07) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(37, 99, 235, .07) 38px 39px) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
}
html body.av-login.av-sup .av-grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(233, 196, 106, .14) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(233, 196, 106, .14) 38px 39px) !important;
}
html body.av-login .av-noise { display: block !important; opacity: .035 !important; mix-blend-mode: multiply; }
html body.av-login canvas#avField { opacity: 1 !important; }

/* Cinta de aurora que barre el fondo de vez en cuando */
html body.av-login .av-aurora {
  position: absolute; left: -30%; top: 14%; width: 160%; height: 40vh; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(42px); opacity: 0;
  background: linear-gradient(100deg, transparent 8%, var(--av-au1) 30%, var(--av-au2) 50%, var(--av-au1) 70%, transparent 92%);
  transform: translateX(-55%) rotate(-9deg);
  animation: avAurora 18s ease-in-out infinite; animation-delay: 1.5s;
}
@keyframes avAurora {
  0%   { opacity: 0;   transform: translateX(-55%) rotate(-9deg) scaleY(.8); }
  12%  { opacity: .95; }
  35%  { opacity: .85; transform: translateX(-5%) rotate(-5deg) scaleY(1.1); }
  60%  { opacity: 0;   transform: translateX(45%) rotate(-2deg) scaleY(.9); }
  100% { opacity: 0;   transform: translateX(45%) rotate(-2deg) scaleY(.9); }
}

/* ---------- Anillo animado alrededor del card ---------- */
html body.av-login .main { border: 0 !important; }
html body.av-login .main::before {
  display: block !important; content: ""; inset: -1.5px !important; border-radius: 17.5px !important; opacity: .8;
  background: conic-gradient(from var(--spin, 0deg), #2563EB, #93C5FD, #60A5FA, #DBE7FE, #2563EB) !important;
}
html body.av-login.av-sup .main::before {
  opacity: .95;
  background: conic-gradient(from var(--spin, 0deg), #E9C46A, #FBE9B7, #F3D98B, #FFF6DD, #E9C46A) !important;
}
html body.av-login .main::after { inset: 1.5px !important; border-radius: 14.5px !important; background: #fff !important; }

/* ---------- Logo: halo que respira + destello conico + orbitas ---------- */
html body.av-login .brand-icon { margin-bottom: 20px !important; }
html body.av-login .brand-icon .av-glow {
  position: absolute; inset: -26px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 52%, var(--av-g1) 0%, var(--av-g2) 36%, var(--av-g3) 56%, transparent 72%);
  filter: blur(8px); animation: avBreathe 4s ease-in-out infinite;
}
html body.av-login .brand-icon .av-glow::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; opacity: .85;
  background: conic-gradient(from 0deg, transparent 0deg, var(--av-g1) 50deg, transparent 120deg, transparent 190deg, var(--av-g2) 250deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 50%, transparent 70%);
          mask: radial-gradient(circle, transparent 36%, #000 50%, transparent 70%);
  filter: blur(5px); animation: avOrbit 12s linear infinite;
}
@keyframes avBreathe {
  0%, 100% { transform: scale(.92); opacity: .72; }
  50%      { transform: scale(1.07); opacity: 1; }
}
html body.av-login .brand-icon img { position: relative; z-index: 1; }
html body.av-login .brand-icon::before,
html body.av-login .brand-icon::after {
  display: block !important; content: ""; position: absolute; border-radius: 50%; z-index: 2;
  inset: -8px; border: 1.5px dashed rgba(37, 99, 235, .35);
  animation: avOrbit 9s linear infinite; transition: border-color .6s ease;
}
html body.av-login .brand-icon::after {
  inset: -15px; border-style: dotted; border-color: rgba(96, 165, 250, .55);
  animation-direction: reverse; animation-duration: 13s;
}
html body.av-login.av-sup .brand-icon::before { border-color: rgba(214, 178, 84, .55); }
html body.av-login.av-sup .brand-icon::after { border-color: rgba(233, 196, 106, .75); }

/* ---------- Pestanas: pastilla deslizante azul (Asesores) / champana (Supervisores) ---------- */
html body.av-login .tab-bar { position: relative !important; background: #F1F5F9 !important; }
html body.av-login .tab-bar::before,
html body.av-login .tab-bar::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px);
  border-radius: 11px; z-index: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
html body.av-login .tab-bar::before { background: linear-gradient(135deg, #2563EB, #3B82F6); box-shadow: 0 6px 14px rgba(37, 99, 235, .25); }
html body.av-login .tab-bar::after  { background: linear-gradient(135deg, #F3D98B, #FBE9B7); box-shadow: 0 6px 14px rgba(233, 196, 106, .35), inset 0 0 0 1px rgba(233, 196, 106, .55); opacity: 0; }
html body.av-login #tabSupervisores:checked ~ .tab-bar::before,
html body.av-login #tabSupervisores:checked ~ .tab-bar::after { transform: translateX(calc(100% + 4px)); }
html body.av-login #tabSupervisores:checked ~ .tab-bar::before { opacity: 0; }
html body.av-login #tabSupervisores:checked ~ .tab-bar::after { opacity: 1; }
html body.av-login .tab-bar .tab {
  position: relative; z-index: 1; background: transparent !important; box-shadow: none !important;
  transition: color .25s ease !important;
}
html body.av-login #tabAsesores:checked ~ .tab-bar .tab-asesores { color: #fff !important; background: transparent !important; box-shadow: none !important; }
html body.av-login #tabSupervisores:checked ~ .tab-bar .tab-supervisores { color: #5B4A1E !important; background: transparent !important; box-shadow: none !important; }

/* ---------- Boton Ingresar y foco ---------- */
html body.av-login #signupBtn { background: #2563EB !important; color: #fff !important; transition: background .25s ease, filter .25s ease; }
html body.av-login #signupBtn:hover { background: #1D4ED8 !important; }
html body.av-login #botonIngresoSupervisor {
  background: linear-gradient(135deg, #F3D98B, #FBE9B7) !important; color: #5B4A1E !important;
  border: 1px solid #E9C46A !important; box-shadow: 0 8px 18px rgba(233, 196, 106, .32) !important; transition: filter .25s ease;
}
html body.av-login #botonIngresoSupervisor:hover { background: linear-gradient(135deg, #EFCF73, #F8E2A3) !important; filter: none; }
html body.av-login .login input[type="text"]:focus,
html body.av-login .login input[type="password"]:focus { border-color: #E9C46A !important; box-shadow: 0 0 0 3px rgba(233, 196, 106, .30) !important; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html body.av-login .av-orb, html body.av-login .av-grid, html body.av-login .main,
  html body.av-login .main::before, html body.av-login .brand-icon::before, html body.av-login .brand-icon::after,
  html body.av-login .brand-icon .av-glow, html body.av-login .brand-icon .av-glow::after { animation: none !important; }
  html body.av-login .av-aurora { animation: none !important; opacity: .45; transform: translateX(-5%) rotate(-5deg); }
  html body.av-login .tab-bar::before, html body.av-login .tab-bar::after, html body.av-login .tab-bar .tab { transition-duration: .01ms !important; }
}