/* ── Auth-state flicker prevention ────────────────────────────────────── Pairs with the inline script that synchronously reads the auth session from storage and sets html[data-epso-auth-state] BEFORE first paint. This avoids the brief flash where: • "Iniciar sesión" appears for an authenticated user, or • "Cerrar sesión" / user dropdown appears for an anonymous visitor. States: pending — script not yet decided; both CTAs invisible (layout reserved) anonymous — no session; hide user dropdown + user-only mobile links authenticated — has session; hide login link until JS converts it to logout ──────────────────────────────────────────────────────────────────── */ /* While auth state is unknown, keep both CTAs in the layout but invisible so clicks don't land on the wrong action and no text flash occurs. */ html[data-epso-auth-state="pending"] .nav-actions a.btn-ghost[href^="login"], html[data-epso-auth-state="pending"] .nav-user-wrap, html[data-epso-auth-state="pending"] .nav-user-btn-mobile, html[data-epso-auth-state="pending"] .mobile-menu-login { visibility: hidden; } /* Anonymous visitors see only "Iniciar sesión" — hide the user dropdown, the mobile profile shortcut, and the user-only mobile menu links. */ html[data-epso-auth-state="anonymous"] .nav-user-wrap, html[data-epso-auth-state="anonymous"] .nav-user-btn-mobile { display: none !important; } html[data-epso-auth-state="anonymous"] .mobile-menu-links a[href$="dashboard.html"], html[data-epso-auth-state="anonymous"] .mobile-menu-links a[href$="progress.html"], html[data-epso-auth-state="anonymous"] .mobile-menu-links a[href$="study.html"], html[data-epso-auth-state="anonymous"] .mobile-menu-links a[href$="profile.html"] { display: none !important; } /* Authenticated visitors should not flash "Iniciar sesión" before the JS converts the link to "Cerrar sesión" (href changes to #logout). The selector targets the original href; once mutated it stops matching and the link becomes visible. */ html[data-epso-auth-state="authenticated"] .nav-actions a.btn-ghost[href$="login.html"], html[data-epso-auth-state="authenticated"] .nav-actions a.btn-ghost[href*="login.html?"], html[data-epso-auth-state="authenticated"] .mobile-menu-login[href$="login.html"], html[data-epso-auth-state="authenticated"] .mobile-menu-login[href*="login.html?"] { visibility: hidden; }