/* ═══════════════════════════════════════════════════════════════════
   Shell de la aplicación — estilos comunes a todas las vistas que
   extienden base.html.

   Vivían incrustados en dos <style> dentro de base.html y viajaban en
   cada respuesta HTML sin cachearse nunca. Aquí se descargan una sola
   vez y el navegador los reutiliza.

   ORDEN DE LA CASCADA: este archivo va DESPUÉS de typography.css y
   ANTES de components/shell.css. Es la misma posición que ocupaban los
   dos bloques; moverlo cambia qué regla gana. No lo reordenes.

   El candado de fondo/color anti-parpadeo sigue en línea en base.html:
   tiene que aplicarse aunque esta hoja tarde o falle.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Micro-interacciones, gemas visuales y fuentes ─────────────── */

/* Body visible immediately — no opacity:0 anti-flash.
      Removed: body:not(.page-ready) was causing permanent black screens
      when JS had any error (Safari private mode, CSP, bfcache).
      View Transitions handle the visual fade between pages. */
body { opacity: 1 !important; visibility: visible !important; }
/* Nuclear rule removed Phase 4 Part 2 D (25 Abr 2026).
 * Was: body * { visibility: visible !important; }
 * [x-cloak] { display: none !important } handles Alpine FOUC.
 * Tested in Chromium + Webkit — no FOUC detected. */

/* ═══ PREMIUM MICRO-INTERACTIONS ═══ */

/* Smooth scroll globally */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Page load — no animation to avoid text jumping */

/* All links and buttons — smooth color transitions */
a, button { transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s; }

/* Tap feedback — subtle scale on press (mobile) */
@media (hover: none) {
    a:active, button:active { transform: scale(0.97); }
    .mob-tab:active { transform: scale(0.92); }
}

/* Cards and interactive elements — lift on hover (desktop) */
@media (hover: hover) {
    .form-card:hover, .m-continue:hover, .m-course-card:hover, .mc-card:hover, .mc-featured:hover,
    .mm-card:hover, .member-card:hover, .cf-post:hover, .mod-card:hover, .lesson-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
}

/* Bottom nav — smooth icon transitions */
.mob-tab svg { transition: transform 0.15s; }
.mob-tab:active svg { transform: scale(0.85); }
.mob-tab.active svg { transform: scale(1.1); }

/* Input focus — premium glow */
/* El tinte del foco es una variable: la Academy usa el violeta de marca y el
   panel de creador lo cambia a lima, que es su color de acción. Así esta regla
   con !important deja de imponer un color a toda la aplicación. */
:root { --focus-tint: var(--color-primary); }
input:focus, textarea:focus, select:focus {
    border-color: color-mix(in srgb, var(--focus-tint) 62%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--focus-tint) 35%, transparent),
        0 0 0 5px color-mix(in srgb, var(--focus-tint) 7%, transparent),
        0 6px 22px -6px color-mix(in srgb, var(--focus-tint) 22%, transparent) !important;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

/* Campos compuestos: hay controles donde el recuadro lo dibuja el envoltorio con
   :focus-within (el alias de Configuración y todos los buscadores). En esos, la
   regla de arriba pintaba ADEMÁS su propio anillo sobre el input de dentro y se
   veían dos líneas concéntricas. El envoltorio manda; el input no pinta nada. */
.st-alias-field input:focus,
.tb-search-box input:focus,
.mbr-search input:focus,
.bcov-search input:focus,
.catalog-search input:focus,
.msg-find input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Slide menu — smoother */
.mobile-slide-menu { transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); }
.mobile-slide-backdrop { transition: opacity 0.3s ease; }

/* Toast/flash messages — slide in */
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-item { animation: toastIn 0.3s ease-out; }

/* Skeleton shimmer for loading states */
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } }
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* ═══ PREMIUM GEMS ═══ */

/* Animated progress bars — fill on load */
@keyframes progressFill { from { width: 0; } }
.m-continue-fill, .level-bar-fill, .mod-progress-fill, .progress-fill {
    animation: progressFill 0.8s ease-out 0.3s both;
}

/* Glow pulse on primary CTA cards */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 8%, transparent); }
}
.m-continue, .continue-bar, .continue-card {
    animation: glowPulse 3s ease-in-out infinite;
}

/* Overscroll bounce feel */
body { overscroll-behavior-y: contain; }

/* Image lazy blur-up */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded, img[loading="lazy"][complete] {
    opacity: 1;
}

/* Glassmorphism on stat cards */
.m-stat, .hero-stat {
    background: var(--bg-hover);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
}

/* Stats — no animation to avoid text jumping */

/* Streak fire glow when active */
.streak-active { text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 40%, transparent); }

/* Premium scrollbar (webkit) */

/* Selection color */

/* ═══ ANIMATED GRADIENT BORDERS ═══ */
@keyframes borderGlow {
    0%, 100% { border-color: color-mix(in srgb, var(--color-primary) 15%, transparent); }
    50% { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
}
.m-continue {
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    animation: borderGlow 3s ease-in-out infinite, glowPulse 3s ease-in-out infinite;
}

/* Stats cards — gradient accent line on top */
.m-stat {
    position: relative;
    overflow: hidden;
}
.m-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent);
    opacity: 0.6;
}

/* Focus visible ring for keyboard nav */
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth image reveal */
img { image-rendering: auto; }

/* Sidebar pre-collapse — applied before Alpine loads (desktop only) */
@media (min-width: 768px) {
    html.sidebar-pre-collapsed .sidebar-nav { width: 72px; }
    html.sidebar-pre-collapsed .main-content { margin-left: 72px; }
    html.sidebar-pre-collapsed .topbar-desktop { left: 72px; }
}

/* Font-display swap lock — prevent FOUT (Rebrand 2026: Archivo + IBM Plex Mono) */
@font-face {
    font-family: 'Archivo';
    src: url('/static/fonts/archivo-var.woff2') format('woff2');
    font-weight: 400 900;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/static/fonts/plexmono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/static/fonts/plexmono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/static/fonts/plexmono-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo FB';
    src: local('Arial'), local('Helvetica'), local('Roboto');
    size-adjust: 98.5%;
    ascent-override: 87.8%;
    descent-override: 21%;
    line-gap-override: 0%;
}

/* ─── Tipografía, superficies, temas, layout base y avisos ──────── */
body {
    font-family: 'Archivo', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern', 'liga', 'calt';
}
.font-display { font-family: 'Archivo', system-ui, sans-serif; }

/* === Premium spacing system (Skool/Maven/Domestika) === */
:root {
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
    --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 100px;
}

/* === Premium card pattern (universal) === */
.premium-card {
    background: #0E0E15;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.premium-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: 0 24px 48px rgba(0,0,0,0.30);
}

/* === 16:9 cover (Domestika/Maven) === */
.cover-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
}
.cover-fallback {
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 64px;
    letter-spacing: 0.06em;
    color: var(--text-disabled);
    position: relative;
    overflow: hidden;
}
.cover-fallback::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04) 0%, transparent 50%);
}

/* === Social proof row (alumnos · rating · credenciales) === */
.social-proof {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.social-proof .star { color: #FBBF24; }

/* === Design System: Glass Surfaces === */
.glass-panel {
    background: rgba(15,15,23,0.7);
    backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--border-subtle);
}
.glass-card {
    background: rgba(15,15,23,0.65);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-subtle);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.4);
}
.glass-subtle {
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
}
/* Light mode: glass becomes solid white with subtle border */
html[data-theme="light"] .glass-panel,
html.light .glass-panel {
    background: #fff;
    backdrop-filter: none;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html[data-theme="light"] .glass-card,
html.light .glass-card {
    background: #fff;
    backdrop-filter: none;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
html[data-theme="light"] .glass-card:hover,
html.light .glass-card:hover {
    border-color: rgba(0,0,0,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .glass-panel { background: #fff; backdrop-filter: none; border-color: rgba(0,0,0,0.10); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    html[data-theme="auto"] .glass-card { background: #fff; backdrop-filter: none; border-color: rgba(0,0,0,0.10); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
    html[data-theme="auto"] .glass-card:hover { border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
}
/* Light mode: override Tailwind text colors globally */
html[data-theme="light"] .text-white,
html.light .text-white { color: var(--text-primary) !important; }
html[data-theme="light"] .text-rocket-muted,
html.light .text-rocket-muted { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-rocket-orange,
html.light .text-rocket-orange { color: var(--color-primary) !important; }
html[data-theme="light"] .font-display,
html.light .font-display { color: var(--text-primary); }
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .text-white { color: var(--text-primary) !important; }
    html[data-theme="auto"] .text-rocket-muted { color: var(--text-secondary) !important; }
    html[data-theme="auto"] .text-rocket-orange { color: var(--color-primary) !important; }
}
/* EXCEPCION: relleno de acento (botones y pastillas azules). El texto va
   siempre en blanco; con el hack de arriba salia tinta oscura sobre azul. */
.bg-rocket-orange, .bg-rocket-orange .text-white { color: #fff; }
html[data-theme="light"] .bg-rocket-orange, html.light .bg-rocket-orange,
html[data-theme="light"] .bg-rocket-orange .text-white, html.light .bg-rocket-orange .text-white,
html[data-theme="light"] .btn--primary, html.light .btn--primary,
html[data-theme="light"] .btn--primary .text-white, html.light .btn--primary .text-white { color: #fff !important; }
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .bg-rocket-orange, html[data-theme="auto"] .bg-rocket-orange .text-white,
    html[data-theme="auto"] .btn--primary, html[data-theme="auto"] .btn--primary .text-white { color: #fff !important; }
}
/* EXCEPCION: el sidebar es navy permanente — dentro de el los claros
   se quedan claros aunque el tema sea claro (el hack de arriba lo rompia) */
html[data-theme="light"] .sidebar-nav .text-white,
html.light .sidebar-nav .text-white,
html[data-theme="light"] .sidebar-nav .font-display,
html.light .sidebar-nav .font-display { color: #fff !important; }
html[data-theme="light"] .sidebar-nav .text-rocket-muted,
html.light .sidebar-nav .text-rocket-muted { color: rgba(255,255,255,0.5) !important; }
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .sidebar-nav .text-white,
    html[data-theme="auto"] .sidebar-nav .font-display { color: #fff !important; }
    html[data-theme="auto"] .sidebar-nav .text-rocket-muted { color: rgba(255,255,255,0.5) !important; }
}

/* Hide Alpine templates until Alpine loads (prevents dropdown flash) */
/* Softened: timeout removes x-cloak after 1s even if Alpine fails */
[x-cloak] { display: none !important; }

/* === View Transitions API (progressive enhancement) === */
/* Disabled: causes black screen on some browsers after POST redirects */
/* @view-transition { navigation: auto; } */

/* Keep old page visible while new one loads — no gap */
::view-transition-old(root) {
    animation: 160ms ease both vt-fade-out;
}
/* New page: starts at opacity:0 immediately, no delay — kills the flash */
::view-transition-new(root) {
    animation: 220ms ease both vt-fade-in;
}
@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* During transition: bg stays locked so no white gap appears */
::view-transition-image-pair(root) {
    isolation: auto;
}

/* === Scroll reveal === */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll, .fade-in { opacity: 1 !important; transform: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === Skeleton loaders === */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line.w-3\/4 { width: 75%; }
.skeleton-line.w-1\/2 { width: 50%; }
.skeleton-card {
    height: 180px;
    border-radius: 16px;
}

/* === Smooth scroll === */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* === Accessibility: focus rings === */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
    outline-offset: 2px;
}

/* === Selection color === */

/* === Scrollbar === */

/* === Button loading state === */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(0.5px);
}
.btn-loading::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--border-strong);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    z-index: 2;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* === Default Layout (works before Alpine loads) === */
@media (min-width: 768px) {
    .sidebar-nav { width: var(--sidebar-width); }
    .main-content { margin-left: var(--sidebar-width); transition: margin-left var(--dur-base) var(--ease-in-out); }
    .topbar-desktop { left: var(--sidebar-width); transition: left var(--dur-base) var(--ease-in-out); }
    .sidebar-nav.is-collapsed { width: var(--sidebar-collapsed); }
    .main-content.is-collapsed { margin-left: var(--sidebar-collapsed); }
    .topbar-desktop.is-collapsed { left: var(--sidebar-collapsed); }
}
/* Mobile: prevenir desbordamiento horizontal + topbar offset + bottom nav space */
@media (max-width: 767px) {
    .main-content { max-width: 100vw; overflow-x: hidden; }
    body { overflow-x: hidden; }
    .main-authenticated { padding-top: var(--topbar-height) !important; padding-bottom: calc(var(--bottomnav-height) + var(--space-6) + env(safe-area-inset-bottom)) !important; }
}
.main-content { min-width: 0; }
@media (min-width: 768px) {
    .main-authenticated { padding-top: var(--topbar-height) !important; padding-bottom: var(--space-6) !important; }
}

/* (sidebar/topbar: ver css/components/shell.css) */
/* Level ring — refined */
.level-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    color: white;
    background: conic-gradient(var(--color-brand) var(--progress), var(--bg-active) var(--progress));
    position: relative;
    transition: box-shadow 0.3s;
    font-variant-numeric: tabular-nums;
}
.level-ring:hover { box-shadow: 0 0 14px var(--accent-alpha-35); }
.level-ring::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #07070A;
}
.level-ring span { position: relative; z-index: 1; }

/* Skeleton loader utility */
.skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #22223a 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast system */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: rgba(15,15,23,0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-brand);
    border-radius: 0 0 14px 14px;
    animation: toast-countdown 5s linear forwards;
}
@keyframes toast-countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/* (notif-badge, mobile nav, mobile topbar, slide menu: ver shell.css) */
/* Ambient glows */
.page-glow {
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, var(--accent-glow-soft) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.page-glow-secondary {
    position: fixed;
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(139,92,246,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Entrance animations */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fade-up 0.5s ease-out both; }
.animate-in-d1 { animation: fade-up 0.5s 0.08s ease-out both; }
.animate-in-d2 { animation: fade-up 0.5s 0.16s ease-out both; }
.animate-in-d3 { animation: fade-up 0.5s 0.24s ease-out both; }
.animate-in-d4 { animation: fade-up 0.5s 0.32s ease-out both; }

/* During View Transition: freeze animate-in at final state so the
   new-page snapshot isn't empty when the browser captures it.
   Without this, the crossfade shows a blank page for one frame. */
::view-transition-new(*) .animate-in,
::view-transition-new(*) .animate-in-d1,
::view-transition-new(*) .animate-in-d2,
::view-transition-new(*) .animate-in-d3,
::view-transition-new(*) .animate-in-d4 {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Section divider */
.section-line {
    background: linear-gradient(90deg, var(--accent-glow-strong), var(--accent-glow-soft), transparent);
}

/* (scrollbar defined above — no duplicate) */

/* (duplicates removed — view-transition, reveal-on-scroll, skeleton defined above) */

/* User dropdown */
.user-dropdown {
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: 18px;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
/* Menú de usuario: ver css/components/shell.css (.um-*) */

/* ── Transición «Ignición / Despegue» al entrar al Panel de Creador (#studio-enter en base.html) ── */
#studio-enter{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:
        radial-gradient(60% 60% at 50% 44%, rgba(159,162,255,0.16), transparent 66%),
        #0B0B10;
    opacity:0; visibility:hidden; pointer-events:none; overflow:hidden;
}
#studio-enter.is-playing{ visibility:visible; pointer-events:all; animation:se-in .18s ease-out forwards; }
@keyframes se-in{ to{ opacity:1; } }

#studio-enter .se-rocket{ position:absolute; opacity:0; will-change:transform,opacity; }
#studio-enter .se-rocket svg{ width:80px; height:auto; color:#E0FC09; display:block; }
#studio-enter.is-playing .se-rocket{ animation:se-rocket 1s cubic-bezier(.2,.7,.15,1) forwards; }
@keyframes se-rocket{
    0%{ opacity:0; transform:translateY(34px) scale(.4) rotate(-6deg); filter:drop-shadow(0 0 0 rgba(224,252,9,0)); }
    22%{ opacity:1; transform:translateY(0) scale(1) rotate(0); filter:drop-shadow(0 0 24px rgba(224,252,9,.85)); }
    52%{ opacity:1; transform:translateY(-8px) scale(1.03); filter:drop-shadow(0 0 30px rgba(224,252,9,.9)); }
    100%{ opacity:0; transform:translateY(-150px) scale(.62); filter:drop-shadow(0 0 44px rgba(224,252,9,.95)); }
}

#studio-enter .se-burst{
    position:absolute; width:320px; height:320px; border-radius:50%;
    background:radial-gradient(circle, rgba(224,252,9,.5) 0%, rgba(224,252,9,0) 62%);
    opacity:0; transform:scale(.2); will-change:transform,opacity;
}
#studio-enter.is-playing .se-burst{ animation:se-burst 1s ease-out forwards; }
@keyframes se-burst{ 0%,10%{opacity:0;transform:scale(.2)} 22%{opacity:1;transform:scale(1)} 46%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }

#studio-enter .se-warp{
    position:absolute; width:220vmax; height:220vmax; opacity:0; will-change:transform,opacity;
    background:repeating-conic-gradient(from 0deg,
        rgba(159,162,255,0) 0deg, rgba(159,162,255,0) 2.6deg,
        rgba(159,162,255,.24) 3.2deg, rgba(159,162,255,0) 3.9deg);
    -webkit-mask:radial-gradient(circle, transparent 7%, #000 26%, transparent 60%);
    mask:radial-gradient(circle, transparent 7%, #000 26%, transparent 60%);
}
#studio-enter.is-playing .se-warp{ animation:se-warp .85s ease-out .32s forwards; }
@keyframes se-warp{ 0%{opacity:0;transform:scale(.3) rotate(0)} 40%{opacity:.9} 100%{opacity:0;transform:scale(1.6) rotate(16deg)} }

#studio-enter .se-copy{ position:absolute; text-align:center; opacity:0; transform:translateY(20px); padding:0 24px; will-change:transform,opacity; }
#studio-enter.is-playing .se-copy{ animation:se-copy .6s cubic-bezier(.2,.8,.2,1) .56s forwards; }
@keyframes se-copy{ to{ opacity:1; transform:none; } }
#studio-enter .se-kicker{
    font:700 12px/1 'IBM Plex Mono', monospace; letter-spacing:.22em; text-transform:uppercase;
    color:#AEB0E8; margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:9px;
}
#studio-enter .se-kicker::before{ content:''; width:7px; height:7px; border-radius:50%; background:#9FA2FF; box-shadow:0 0 10px rgba(159,162,255,.9); }
#studio-enter .se-title{
    font:850 clamp(26px,7vw,40px)/1.05 'Archivo', system-ui, sans-serif; font-stretch:88%;
    text-transform:uppercase; letter-spacing:-.012em; color:#F5F5F2;
}
#studio-enter .se-title span{
    display:inline-block; background:#E9FD3D; color:#14132E;
    padding:.02em .14em .05em; border-radius:6px; transform:rotate(-1.4deg);
}
@media (prefers-reduced-motion: reduce){
    #studio-enter .se-warp, #studio-enter .se-burst{ display:none; }
    #studio-enter.is-playing .se-rocket{ animation:se-copy .3s ease forwards; }
    #studio-enter.is-playing .se-copy{ animation:se-copy .3s ease forwards; }
}