/* Acceso y registro: tokens de los temas del sitio. */
.security-link { display:flex; align-items:center; justify-content:center; gap:7px; margin:20px 0 0; font-size:12px; color:var(--muted); text-decoration:none; text-align:center; }
.security-link:hover { color:var(--accent); text-decoration:underline; }
.security-link .icon { width:14px; height:14px; }
.security-card { padding:26px; border:1px solid var(--border); border-radius:16px; background:var(--surface-soft); }
.security-card h2 { font-size:19px; margin:16px 0; }
.security-card p,.security-help { font-size:12px; line-height:1.8; color:var(--muted); }
.security-card .access-submit { margin-top:24px; text-decoration:none; }
.security-emblem { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:var(--accent); background:var(--tint); }
.security-emblem .icon { width:26px; height:26px; }
.security-steps { display:flex; justify-content:space-between; list-style:none; padding:0; margin:0 0 28px; gap:8px; }
.security-steps:empty { display:none; }
.security-steps li { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.security-steps span { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--border); border-radius:50%; }
.security-steps [aria-current] { color:var(--accent); font-weight:700; }
.security-steps [aria-current] span { border-color:var(--accent); background:var(--tint); }
.portal .field-control .security-code { text-align:center; letter-spacing:10px; font-size:26px; height:64px; font-variant-numeric:tabular-nums; }
.portal { display:grid; grid-template-columns:44% 56%; min-height:100svh; background:var(--surface); color:var(--text); }
.portal * { box-sizing:border-box; }
.visual-panel { position:relative; min-width:0; display:flex; flex-direction:column; padding:48px 8% 28px; background-color:var(--banner); background-image:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px); background-size:48px 48px; overflow:hidden; }
.visual-header { position:relative; z-index:2; }
.visual-header .brand { color:var(--banner-text); }
.visual-footer { display:flex; justify-content:space-between; gap:20px; font-size:10px; color:var(--banner-text); opacity:.65; }
.scene-wrap { position:relative; margin:auto -8%; width:116%; min-height:380px; aspect-ratio:1; max-height:670px; isolation:isolate; }
.scene-grid { position:absolute; inset:0; background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px); background-size:48px 48px; opacity:.08; mask-image:radial-gradient(ellipse,#000,transparent 69%); transition:opacity .3s; }
.scene-wrap.is-engaged .scene-grid { opacity:.15; }
.mushroom-stage { position:absolute; inset:0; perspective:900px; }
.mushroom-model { position:absolute; width:64%; height:64%; left:18%; top:16%; transform-style:preserve-3d; transform:rotateX(-8deg) rotateY(-15deg); }
.mushroom-front,.mushroom-layer { position:absolute; inset:0; -webkit-mask:url('/static/img/setax-symbol-512.webp') center / contain no-repeat; mask:url('/static/img/setax-symbol-512.webp') center / contain no-repeat; }
.mushroom-layer { background:color-mix(in srgb,var(--accent) 64%,#17251a); transform:translateZ(var(--depth)); }
.mushroom-front { transform:translateZ(1px); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 48%,white) 0%,var(--accent) 45%,color-mix(in srgb,var(--accent) 83%,black) 82%,color-mix(in srgb,var(--accent) 70%,white) 100%); }
.mushroom-shadow { position:absolute; width:50%; height:8%; left:25%; bottom:12%; background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%); filter:blur(9px); }
.orbit { position:absolute; width:92%; height:51%; left:4%; top:26%; border:1px solid color-mix(in srgb,var(--accent) 17%,transparent); border-radius:50%; pointer-events:none; }
.orbit::after { content:''; position:absolute; width:7px; height:7px; left:var(--electron-x,100%); top:var(--electron-y,50%); transform:translate(-50%,-50%); background:var(--accent); border-radius:50%; box-shadow:0 0 10px color-mix(in srgb,var(--accent) 30%,transparent); opacity:.9; }
.orbit-one { transform:rotate(-24deg); }
.orbit-two { transform:rotate(66deg); opacity:.7; }
.orbit-three { transform:rotate(120deg); opacity:.45; }
.scene-controls { position:absolute; bottom:1%; left:8%; right:8%; display:flex; align-items:center; justify-content:flex-end; gap:12px; color:var(--banner-text); font-size:10px; opacity:.72; }
.scene-controls[hidden] { display:none; }
.scene-controls>span { display:flex; align-items:center; gap:6px; }
.scene-controls .icon { width:13px; height:13px; }
.motion-button { display:flex; align-items:center; gap:9px; padding:6px 10px; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:20px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.access-panel { display:flex; flex-direction:column; min-width:0; min-height:100svh; padding:28px clamp(26px,4vw,70px) 35px; }
.access-top { display:flex; justify-content:flex-end; align-items:center; position:relative; z-index:5; margin-bottom:36px; }
.mobile-brand { display:none; }
.portal .theme-dropdown-panel { width:min(280px,calc(100vw - 40px)); }
.portal .theme-dropdown-panel h2 { margin:0; }
.access-content { width:100%; max-width:420px; margin:auto; padding:20px 0; }
.form-heading { margin-bottom:27px; }
.form-kicker { font-size:10px; letter-spacing:2px; font-weight:700; color:var(--muted); }
.form-heading h1 { font-size:29px; line-height:1.22; letter-spacing:-1.15px; margin:14px 0 13px; font-weight:750; color:var(--text); }
.form-heading h1 span { color:var(--accent); }
.form-heading p { font-size:13px; line-height:1.7; color:var(--muted); margin:0; }
.access-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:5px; background:var(--surface-soft); border:1px solid var(--border); border-radius:12px; margin-bottom:28px; }
.access-tabs a { display:flex; justify-content:center; align-items:center; min-height:39px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:650; border-radius:8px; transition:background .18s,color .18s; }
.access-tabs a[aria-current=page] { background:var(--surface); color:var(--text); box-shadow:0 2px 8px #00000006; }
.access-tabs a:hover { color:var(--text); }
.access-form { display:grid; gap:20px; }
.portal-field label,.verification>label { display:flex; font-size:13px; color:var(--text); font-weight:650; margin:0 0 9px; }
.field-control { display:flex; align-items:center; gap:11px; padding:0 15px; border:1px solid var(--border); background:var(--surface); border-radius:11px; transition:border-color .2s,box-shadow .2s; min-width:0; }
.field-control>.icon { width:17px; height:17px; color:var(--muted); flex:none; }
.portal .field-control input { height:49px; width:100%; min-width:0; background:transparent; border:0; padding:0; border-radius:0; color:var(--text); font-size:14px; outline:none; box-shadow:none; }
.portal input::placeholder { color:var(--muted); opacity:.85; }
.field-control:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--tint); }
.portal input:autofill { box-shadow:0 0 0 100px var(--surface) inset; -webkit-text-fill-color:var(--text); }
.portal .reveal-button { display:flex; align-items:center; justify-content:center; height:40px; width:29px; padding:0; background:transparent; border:0; color:var(--muted); flex-shrink:0; cursor:pointer; }
.reveal-button .icon { width:18px; height:18px; }
.verification>label { align-items:center; justify-content:space-between; gap:8px; }
.verification>label>span { color:var(--muted); font-size:11px; font-weight:400; }
.verification-row { display:grid; grid-template-columns:116px minmax(0,1fr); gap:10px; }
.challenge { display:flex; align-items:center; justify-content:center; gap:8px; border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); border-radius:11px; font-size:14px; font-weight:700; color:var(--accent); background:var(--surface-soft); }
.challenge .icon { width:17px; height:17px; }
.portal .verification-row input { width:100%; min-width:0; height:49px; padding:0 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); font-size:14px; }
.portal .verification-row input:focus { outline:1px solid var(--accent); box-shadow:none; }
.access-submit { margin-top:2px; display:flex; justify-content:center; gap:12px; align-items:center; height:49px; width:100%; padding:0 19px; background:var(--button); color:var(--on-button); border:1px solid transparent; border-radius:11px; font-size:13px; font-weight:750; transition:transform .2s,box-shadow .2s; cursor:pointer; }
.access-submit:hover { transform:translateY(-1px); box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 18%,transparent); }
.access-submit:disabled { opacity:.6; cursor:wait; transform:none; }
.access-submit .icon { width:18px; height:18px; }
.portal-contacts { margin-top:30px; }
.contact-label { display:flex; align-items:center; gap:13px; color:var(--text); font-size:12px; font-weight:600; }
.contact-label>span { height:1px; flex:1; background:var(--border); }
.portal-contacts>p { text-align:center; color:var(--muted); font-size:12px; margin:12px 0 18px; }
.portal .social-links { display:flex; justify-content:center; gap:30px; margin:0; }
.portal .social-link { font-size:11px; }
.access-note { display:flex; align-items:center; justify-content:center; gap:7px; font-size:10px; color:var(--muted); margin:30px 0 0; }
.access-note .icon { width:12px; height:12px; }
.portal .notice { font-size:12px; margin-bottom:20px; }
@media (max-width:1050px) { .portal { grid-template-columns:43% 57%; } .visual-panel { padding:35px 8% 25px; } .scene-wrap { min-height:300px; } }
@media (max-width:760px) { .portal { grid-template-columns:1fr; } .visual-panel { display:none; } .access-panel { padding:24px 24px 30px; } .access-top { justify-content:space-between; margin-bottom:25px; } .mobile-brand { display:block; } .mobile-brand .brand>span { font-size:20px; } .mobile-brand .brand-symbol { width:30px; height:30px; } .mobile-brand .brand small { font-size:7px; } .access-content { padding:16px 0; } .portal .field-control input,.portal .verification-row input { font-size:16px; } }
@media (max-width:360px) { .access-panel { padding-inline:18px; } .form-heading h1 { font-size:26px; } .verification>label>span { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .portal *, .portal *::before,.portal *::after { transition:none!important; animation:none!important; } }

/* Reserva el tamaño completo del título mientras se escribe, sin saltos. */
.typewriter { position:relative; }
.form-heading h1 .typewriter-reserve,.form-heading h1 .typewriter-output { color:var(--text); }
.typewriter-reserve { visibility:hidden; }
.typewriter-output { position:absolute; inset:0; }
.typewriter-output::after { content:''; display:inline-block; height:.82em; width:2px; margin-left:4px; vertical-align:-.02em; background:var(--accent); animation:typing-caret .7s step-end infinite; }
.typewriter.is-complete .typewriter-output::after { display:none; }
@keyframes typing-caret { 50% { opacity:0; } }
/* Pantalla de carga: colores heredados del tema activo. */
.auth-loader { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:28px; border:0; background:var(--bg); color:var(--text); z-index:1000; }
.auth-loader::backdrop { background:var(--bg); }
.auth-loader[open] { display:grid; place-items:center; }
.loader-content { text-align:center; width:min(100%,440px); }
.loader-emblem { position:relative; width:220px; height:220px; margin:0 auto 34px; display:grid; place-items:center; }
.loader-emblem::before { content:''; position:absolute; inset:-35px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%); }
.loader-logo { width:110px; height:110px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 55%,white),var(--accent)); mask:url('/static/img/setax-symbol-512.webp') center/contain no-repeat; -webkit-mask:url('/static/img/setax-symbol-512.webp') center/contain no-repeat; animation:loader-breathe 2.4s ease-in-out infinite; }
.loader-ring { position:absolute; inset:0; border:1px solid var(--border); border-top:2px solid var(--accent); border-radius:50%; animation:loader-orbit 2.2s linear infinite; }
.loader-ring::after { content:''; position:absolute; top:28px; right:28px; width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent); }
.loader-ring.inner { inset:17px; animation-direction:reverse; animation-duration:3.4s; opacity:.6; }
.loader-brand { font-size:12px; font-weight:750; letter-spacing:3px; color:var(--accent); }
.auth-loader h2 { font-size:26px; line-height:1.3; margin:18px 0 10px; letter-spacing:-.6px; }
.auth-loader p { color:var(--muted); font-size:13px; }
.loader-track { width:160px; height:2px; overflow:hidden; margin:26px auto; background:var(--border); }
.loader-track::after { content:''; display:block; width:45%; height:100%; background:var(--accent); animation:loader-progress 1.7s ease-in-out infinite; }
@keyframes loader-orbit { to { transform:rotate(360deg); } }
@keyframes loader-breathe { 50% { transform:scale(.94); opacity:.75; } }
@keyframes loader-progress { from { transform:translateX(-110%); } to { transform:translateX(330%); } }
@media (prefers-reduced-motion:reduce) { .auth-loader *, .auth-loader *::after, .typewriter-output::after { animation:none!important; } }
