/* =====================================================================
   TRIBFAN · ACCESO (usuarios, administración, socios): escena animada + formulario
   ===================================================================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); background: var(--paper); }
.auth-aside { position: relative; overflow: hidden; background: #0C0A2B; color: #fff; padding: 0; display: block; }
.au-scene { position: relative; isolation: isolate; min-height: 100vh; padding: 38px clamp(26px, 4vw, 64px) 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.au-brand { color: #fff; align-self: flex-start; } .au-brand img { height: 34px; }

/* Fondo vivo: orbes que derivan, rejilla y destellos */
.au-orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(72px); opacity: .7; animation: au-drift 18s ease-in-out infinite alternate; }
.au-orb.o1 { width: 560px; height: 560px; background: #7C3AED; top: -170px; right: -140px; }
.au-orb.o2 { width: 520px; height: 520px; background: #06B6D4; bottom: -190px; left: -150px; animation-delay: -6s; }
.au-orb.o3 { width: 380px; height: 380px; background: #DB2777; top: 36%; left: 34%; opacity: .42; animation-delay: -11s; }
@keyframes au-drift { to { transform: translate(60px, 40px) scale(1.12); } }
.au-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(70% 70% at 50% 48%, #000 25%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 48%, #000 25%, transparent 100%); }
.au-spark { position: absolute; z-index: -1; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.8); opacity: 0; animation: au-twinkle 4.4s ease-in-out infinite; }
.au-spark.s1 { left: 9%; top: 16%; } .au-spark.s2 { left: 24%; top: 8%; animation-delay: .8s; } .au-spark.s3 { left: 82%; top: 12%; animation-delay: 1.6s; } .au-spark.s4 { left: 91%; top: 38%; animation-delay: 2.4s; }
.au-spark.s5 { left: 6%; top: 52%; animation-delay: 3s; } .au-spark.s6 { left: 70%; top: 66%; animation-delay: 1.1s; } .au-spark.s7 { left: 40%; top: 90%; animation-delay: 2s; } .au-spark.s8 { left: 58%; top: 6%; animation-delay: 3.4s; } .au-spark.s9 { left: 16%; top: 78%; animation-delay: .4s; }
@keyframes au-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }

/* Escena 3D: tarjetas que flotan y reaccionan al ratón */
.au-stage { --mx: 0; --my: 0; position: relative; height: clamp(380px, 48vh, 470px); margin-top: 6px; perspective: 1400px; transform-style: preserve-3d; transform: rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg)); }
.au-card { position: absolute; transform-style: preserve-3d; }
@keyframes au-float { 50% { translate: 0 -14px; } }
.au-main { left: 50%; top: 50%; width: 350px; margin: -196px 0 0 -128px; transform: translateZ(80px); animation: au-float 7s ease-in-out infinite; }
.au-member { position: relative; overflow: hidden; padding: 20px 22px 18px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), linear-gradient(150deg, #1E1B4B, #2E1065 60%, #4C1D95); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 34px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter: blur(14px); }
.au-member::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(120deg, #67E8F9, #A78BFA, #F472B6, #FDE68A, #67E8F9); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; pointer-events: none; }
.au-shine { position: absolute; top: -50%; bottom: -50%; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: au-sweep 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes au-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.am-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .am-wm { font-weight: 850; font-size: 1.1rem; letter-spacing: -0.04em; } .am-tag { font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); letter-spacing: .03em; }
.am-id { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .am-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: 1.2rem; background: linear-gradient(135deg, #22D3EE, #A78BFA 55%, #F472B6); box-shadow: 0 0 0 3px rgba(255,255,255,.3); } .am-id strong { display: block; font-size: 1.05rem; } .am-id small { opacity: .72; font-size: .76rem; }
.am-mods { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; } .am-mods li { padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.08); }
.am-pts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); } .am-pts span { display: block; font-size: .62rem; opacity: .72; text-transform: uppercase; letter-spacing: .05em; } .am-pts strong { font-size: 1.2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.au-trade { left: -4px; top: 34px; width: 196px; transform: translateZ(20px) rotate(-9deg); animation: au-float 8s ease-in-out -2s infinite; background: #fff; color: #121528; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 50px rgba(0,0,0,.45); }
.au-trade-img { position: relative; aspect-ratio: 4 / 4.2; background: linear-gradient(140deg, #312E81, #7C3AED 55%, #DB2777); display: grid; place-items: center; overflow: hidden; }
.au-holo { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent 30%, rgba(110,231,183,.35), transparent 60%, rgba(253,224,71,.3), transparent); animation: au-spin 7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-ico { position: relative; font-size: 3.6rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.au-badges { position: absolute; top: 9px; left: 9px; display: flex; gap: 5px; } .au-badges b { padding: 3px 9px; border-radius: 999px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: rgba(20,22,46,.7); backdrop-filter: blur(6px); } .au-badges b.f { background: linear-gradient(135deg, #4F46E5, #DB2777); } .au-badges b.n { background: linear-gradient(135deg, #10B981, #059669); }
.au-trade-body { padding: 11px 14px 14px; display: grid; gap: 2px; } .au-trade-body strong { font-size: .92rem; letter-spacing: -0.01em; } .au-trade-body small { color: #5C6280; font-size: .72rem; }
.au-price { font-size: 1.3rem; font-weight: 850; letter-spacing: -0.03em; margin: 3px 0; animation: au-pulse 3s ease-in-out infinite; } @keyframes au-pulse { 50% { color: #4F46E5; transform: scale(1.04); transform-origin: left; } }

.au-duel { right: -10px; bottom: -4px; width: 262px; transform: translateZ(36px) rotate(6deg); animation: au-float 7.5s ease-in-out -4s infinite; background: rgba(18,16,56,.78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 26px 50px rgba(0,0,0,.5); }
.au-duel-top { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 750; margin-bottom: 12px; }
.au-live { width: 9px; height: 9px; border-radius: 50%; background: #34D399; animation: au-ping 1.8s infinite; } @keyframes au-ping { 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } }
.au-duel-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.au-fighter { position: relative; display: grid; justify-items: center; gap: 7px; }
.au-mini-card { width: 64px; height: 86px; border-radius: 12px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(150deg, #4F46E5, #7C3AED); border: 2px solid rgba(255,255,255,.4); box-shadow: 0 10px 20px rgba(0,0,0,.35); }
.au-fighter.r .au-mini-card { background: linear-gradient(150deg, #DB2777, #F97316); }
.au-fighter.l .au-mini-card { animation: au-lunge 5s ease-in-out infinite; } .au-fighter.r .au-mini-card { animation: au-hit 5s ease-in-out infinite; }
@keyframes au-lunge { 0%, 60%, 100% { translate: 0 0; } 68% { translate: 26px 0; } 74% { translate: 0 0; } }
@keyframes au-hit { 0%, 66%, 100% { translate: 0 0; } 70% { translate: 7px 0; } 74% { translate: -6px 0; } 78% { translate: 4px 0; } 82% { translate: 0 0; } }
.au-hp { width: 64px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; } .au-hp i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #34D399, #A3E635); }
.au-fighter.r .au-hp i { animation: au-hpdrop 5s ease-in-out infinite; } @keyframes au-hpdrop { 0%, 68% { width: 100%; } 74%, 96% { width: 58%; } 100% { width: 100%; } }
.au-vs { font-weight: 900; font-size: 1.05rem; letter-spacing: .05em; color: #FDE68A; text-shadow: 0 0 14px rgba(253,230,138,.8); }
.au-dmg { position: absolute; top: -6px; right: 4px; font-weight: 900; color: #FCA5A5; font-size: 1.1rem; opacity: 0; animation: au-dmg 5s ease-out infinite; } @keyframes au-dmg { 0%, 69% { opacity: 0; translate: 0 6px; } 74% { opacity: 1; translate: 0 -8px; } 92% { opacity: 0; translate: 0 -26px; } 100% { opacity: 0; } }

.au-chip { position: absolute; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(10px); font-weight: 700; font-size: .8rem; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.28); animation: au-float 6s ease-in-out infinite; transform: translateZ(110px); }
.au-chip.c1 { left: 36%; top: -14px; } .au-chip.c2 { right: -2px; top: 26px; animation-delay: -1.5s; } .au-chip.c3 { left: 0; bottom: 14px; animation-delay: -3s; } .au-chip.c4 { left: 34%; bottom: -14px; animation-delay: -4.5s; }

.au-copy h2 { color: #fff; font-size: clamp(1.7rem, 2.7vw, 2.5rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1.08; margin: 0 0 10px; max-width: 18ch; text-wrap: balance; }
.au-lead { color: rgba(255,255,255,.82); max-width: 44ch; font-size: 1.05rem; }
.au-rot { position: relative; display: block; height: 1.7em; margin: 0; font-weight: 650; color: #C7D2FE; font-size: 1.12rem; }
.au-rot > span { position: absolute; inset: 0 auto auto 0; white-space: nowrap; opacity: 0; animation: au-rot 16s infinite; }
.au-rot > span:nth-child(2) { animation-delay: 4s; } .au-rot > span:nth-child(3) { animation-delay: 8s; } .au-rot > span:nth-child(4) { animation-delay: 12s; }
@keyframes au-rot { 0% { opacity: 0; translate: 0 10px; } 4%, 22% { opacity: 1; translate: 0 0; } 26%, 100% { opacity: 0; translate: 0 -10px; } }
.au-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.au-list li { position: relative; padding-left: 28px; color: rgba(255,255,255,.9); font-weight: 550; opacity: 0; animation: tf-in .6s var(--ease) forwards; }
.au-list li:nth-child(2) { animation-delay: .15s; } .au-list li:nth-child(3) { animation-delay: .3s; }
.au-list li::before { content: "✓"; position: absolute; left: 0; width: 19px; height: 19px; border-radius: 50%; background: rgba(110,231,183,.2); color: #6EE7B7; display: grid; place-items: center; font-size: .72rem; font-weight: 900; top: 2px; }

/* Administración y socios: escenas sobrias */
.auth-admin .auth-aside { background: #0A0F1C; } .auth-admin .au-orb.o1 { background: #3B5BDB; } .auth-admin .au-orb.o2 { background: #0EA5E9; opacity: .4; } .auth-admin .au-orb.o3 { background: #475569; opacity: .35; }
.auth-soc .auth-aside { background: #0B1230; } .auth-soc .au-orb.o1 { background: #1D4ED8; } .auth-soc .au-orb.o2 { background: #0F766E; opacity: .45; } .auth-soc .au-orb.o3 { background: #4338CA; opacity: .3; }
.au-scene-admin, .au-scene-soc { justify-content: flex-start; gap: 0; } .au-scene-admin .au-copy, .au-scene-soc .au-copy { margin-top: auto; }
.au-hero-ico { position: relative; width: 190px; height: 190px; margin: auto; display: grid; place-items: center; color: #fff; }
.au-hero-ico svg { position: relative; z-index: 1; filter: drop-shadow(0 10px 24px rgba(59,91,219,.6)); animation: au-float 6s ease-in-out infinite; }
.au-hero-ico .ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); animation: au-ring 5s ease-out infinite; } .au-hero-ico .r1 { inset: 30px; } .au-hero-ico .r2 { inset: 8px; animation-delay: 1.6s; } .au-hero-ico .r3 { inset: -14px; animation-delay: 3.2s; }
@keyframes au-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.au-docs .sheet { position: absolute; width: 124px; height: 158px; border-radius: 12px; background: linear-gradient(160deg, #fff, #E2E8F0); box-shadow: 0 18px 34px rgba(0,0,0,.4); } .au-docs .s1 { transform: rotate(-12deg) translate(-34px, 6px); animation: au-float 7s ease-in-out infinite; opacity: .75; } .au-docs .s2 { transform: rotate(8deg) translate(30px, 0); animation: au-float 7s ease-in-out -2s infinite; opacity: .88; }
.au-docs .s3 { padding: 22px 18px; display: grid; align-content: start; gap: 10px; animation: au-float 7s ease-in-out -4s infinite; } .au-docs .s3 i { height: 7px; border-radius: 4px; background: #CBD5E1; } .au-docs .s3 i:first-child { width: 60%; background: #1E3A8A; } .au-docs .s3 i:last-child { width: 80%; }

/* Formulario */
.auth-right { display: flex; flex-direction: column; min-height: 100vh; background: radial-gradient(60% 40% at 100% 0%, color-mix(in srgb, var(--action) 9%, transparent), transparent 70%), var(--paper); }
.auth-main { flex: 1; display: grid; place-items: center; padding: 34px 22px; }
.auth-form { width: min(450px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 36px 34px 30px; box-shadow: var(--sh-3); animation: tf-in .5s var(--ease); }
.auth-form h1 { font-size: 1.85rem; margin: 0 0 4px; } .auth-form .sub { color: var(--muted); margin-bottom: 18px; } .auth-form .btn { min-height: 48px; }
.auth-form .form-actions { margin-top: 20px; } .auth-form .alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.auth-foot { margin: 0; padding: 14px 20px 24px; text-align: center; color: var(--muted); font-size: .8rem; } .auth-foot a { color: var(--muted); }
.mobile-brand { display: none; }
.au-mini { display: none; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; } .auth-aside { display: none; }
  .mobile-brand { display: block; padding: 22px 22px 22px; background: linear-gradient(135deg, #1E1B4B, #4338CA 70%, #7C3AED); color: #fff; }
  .mobile-brand .brand { color: #fff; } .mobile-brand .logo-l { display: none; } .mobile-brand .logo-d { display: block !important; height: 30px; width: auto; }
  .au-mini { display: block; margin-top: 12px; } .au-mini .au-rot { height: 1.5em; font-size: .98rem; color: #C7D2FE; }
  .auth-main { padding: 22px 16px 10px; } .auth-form { padding: 28px 22px 24px; border-radius: 22px; margin-top: -26px; position: relative; }
}
@media (prefers-reduced-motion: reduce) { .au-orb, .au-spark, .au-card, .au-chip, .au-holo, .au-rot > span, .au-mini-card, .au-hero-ico svg, .au-hero-ico .ring { animation: none !important; } .au-rot > span:first-child { opacity: 1; } .au-list li { opacity: 1; animation: none; } }