/* ================================================================
   SHELL 2026 — chrome de la Academy: sidebar, topbar, móvil, menús.
   Referencia: panel Rocket beta. Sidebar navy idéntico en claro y oscuro.
   Prefijos: sb- (sidebar) · tb- (topbar) · mb- (móvil) · um- (menú usuario)
   ================================================================ */

/* ── Marca ─────────────────────────────────────────────────────── */
.brand-wordmark .brand-r { fill: var(--logo-accent); }
.brand-wordmark, .brand-isotipo { display: block; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR (260px, navy permanente) — atmósfera, tiles de icono, pase de nivel
   ══════════════════════════════════════════════════════════════════ */
.sidebar-nav {
    --logo-accent: var(--color-lime-logo);
    background:
        radial-gradient(120% 34% at 0% 0%, rgba(72,0,255,0.42) 0%, transparent 62%),
        radial-gradient(70% 22% at 100% 100%, rgba(224,99,213,0.10) 0%, transparent 60%),
        radial-gradient(60% 18% at 50% 78%, rgba(224,252,9,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #1D2043 0%, #14132E 58%, #100F26 100%);
    border-right: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.03), 12px 0 40px -30px rgba(0,0,0,0.6);
    transition: width var(--dur-base) var(--ease-in-out);
    color: var(--sb-fg);
}
.sidebar-nav::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 200px; pointer-events: none;
    background: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px) 0 0 / 20px 20px;
    -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent);
}

/* Lockup: R oficial en lima + "Rocket / Academy" apilados */
.sb-brand { position: relative; display: flex; align-items: center; gap: 11px; height: 90px; padding: 20px 20px 0; color: #fff; text-decoration: none; }
.sb-isotipo { display: block; flex-shrink: 0; }
.sb-isotipo svg { display: block; height: 50px; width: auto; color: var(--color-lime-logo); filter: drop-shadow(0 0 16px rgba(224,252,9,0.28)); }
.sb-wordmark { display: flex; flex-direction: column; gap: 0; font: 800 23px/0.98 var(--font-display); font-stretch: 92%; letter-spacing: -0.03em; white-space: nowrap; }
.sb-wordmark b { font-weight: 800; color: #fff; }
.sb-wordmark em { font-style: normal; font-weight: 800; color: var(--color-lime-logo); }
.sb-academy { display: none; }
.sb-hair { height: 1px; margin: 12px 16px 4px; background: linear-gradient(90deg, rgba(224,252,9,0.55), rgba(255,255,255,0.10) 45%, transparent); }

/* Nav */
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding: 0 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.sidebar-section-label {
    display: flex; align-items: center; gap: 10px;
    font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255,255,255,0.42); padding: 14px 20px 6px;
}
.sidebar-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.10), transparent); }
.sidebar-section-label:first-child { padding-top: 8px; }

.sidebar-item {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 42px; padding: 0 12px; margin: 0 12px;
    border-radius: 12px;
    font: 500 14px/1.2 var(--font-display); letter-spacing: -0.005em;
    color: var(--sb-fg); text-decoration: none; cursor: pointer;
    border: 0; background: none; text-align: left; width: calc(100% - 24px);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-fast);
}
.sidebar-item > svg {
    width: 19px; height: 19px; flex-shrink: 0; margin: 0 2px;
    color: rgba(255,255,255,0.62);
    transition: color var(--dur-fast), transform var(--dur-fast);
}
.sidebar-item:hover { background: rgba(255,255,255,0.05); color: #fff; transform: translateX(2px); }
.sidebar-item:hover > svg { color: #fff; }
.sidebar-item:active { transform: scale(0.985); }
.sidebar-item:focus-visible { outline: 2px solid var(--color-lime-logo); outline-offset: 2px; }
.sidebar-item.active, .sidebar-item.active:hover {
    background: linear-gradient(135deg, #4800FF 0%, #3B00D6 100%); color: #fff; font-weight: 600; transform: none;
    box-shadow: 0 14px 30px -12px rgba(72,0,255,0.7), inset 0 1px 0 rgba(255,255,255,0.16);
}
.sidebar-item.active > svg { color: var(--color-lime-logo); filter: drop-shadow(0 0 8px rgba(224,252,9,0.45)); }
.sidebar-item.active::before {
    content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--color-lime-logo); box-shadow: 0 0 10px rgba(224,252,9,0.6);
}
.sidebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges */
.sidebar-item-badge {
    margin-left: auto; height: 20px; min-width: 22px; padding: 0 7px;
    border-radius: 999px; background: var(--sb-badge-bg); color: var(--sb-badge-fg);
    font: 700 10.5px/20px var(--font-mono); text-align: center; flex-shrink: 0;
    box-shadow: 0 0 12px rgba(224,252,9,0.25);
}
.sidebar-item-badge--word {
    background: transparent; border: 1px solid rgba(224,252,9,0.55); color: var(--color-lime-logo);
    border-radius: 5px; letter-spacing: 0.08em; line-height: 18px; box-shadow: none;
}
.sidebar-item.active .sidebar-item-badge { background: #fff; color: #4800FF; box-shadow: none; }

/* Submenú Comunidad */
.sb-trigger .sb-chev { margin-left: auto; color: rgba(255,255,255,0.45); transition: transform var(--dur-fast); flex-shrink: 0; width: 14px; height: 14px; padding: 0; background: none; border: 0; }
.sb-trigger.is-open .sb-chev { transform: rotate(180deg); }
.sb-trigger.has-active-child > svg { color: var(--color-lime-logo); }
.sb-sub { position: relative; margin: 2px 12px 6px 12px; padding-left: 26px; }
.sb-sub::before { content: ''; position: absolute; left: 24px; top: 4px; bottom: 8px; width: 1px; background: rgba(255,255,255,0.14); }
.sb-subitem {
    position: relative; display: flex; align-items: center; gap: 10px;
    min-height: 34px; padding: 0 10px 0 12px; border-radius: 8px;
    font: 500 13px/1.2 var(--font-display); color: rgba(255,255,255,0.66); text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.sb-subitem::before {
    content: ''; position: absolute; left: -29px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: var(--navy-2);
}
.sb-subitem:hover { background: var(--sb-hover); color: #fff; }
.sb-subitem.active { color: var(--color-lime-logo); background: rgba(72,0,255,0.35); }
.sb-subitem.active::before { background: var(--color-lime-logo); border-color: var(--color-lime-logo); box-shadow: 0 0 8px rgba(224,252,9,0.6); }
.sb-subitem--muted { color: rgba(255,255,255,0.55); font-size: 12.5px; }
.sb-subicon { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; color: currentColor; }
.sb-subicon svg { height: 14px; width: auto; }
.sb-subicon--ava { border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.12); font: 700 8px/18px var(--font-mono); text-align: center; }
.sb-subicon--ava img { width: 100%; height: 100%; object-fit: cover; }
.sb-sub .sb-subitem { animation: sb-sub-in 0.22s var(--ease-out) both; animation-delay: calc(var(--i, 1) * 40ms); }
@keyframes sb-sub-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.sb-comm-collapsed { display: none; }

/* Pase de nivel */
.sb-grow {
    display: block; margin: 8px 12px 10px; padding: 12px 14px 13px; border-radius: 14px; text-decoration: none; color: #fff; flex-shrink: 0; position: relative; overflow: hidden;
    background:
        radial-gradient(90% 100% at 100% 0%, rgba(72,0,255,0.30), transparent 60%),
        radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 12px 12px,
        linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 24px -16px rgba(0,0,0,0.6);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.sb-grow:hover { transform: translateY(-1px); border-color: rgba(224,252,9,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 28px -14px rgba(72,0,255,0.5); }
.sb-grow:focus-visible { outline: 2px solid var(--color-lime-logo); outline-offset: 2px; }
.sb-grow-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sb-grow-num {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--color-lime-logo); color: var(--color-navy); font: 900 17px/1 var(--font-display); font-stretch: 90%;
    box-shadow: 0 0 16px rgba(224,252,9,0.35);
}
.sb-grow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sb-grow-txt small { font: 600 8.5px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.sb-grow-txt b { font: 800 14px/1.1 var(--font-display); font-stretch: 92%; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-grow-xp { font: 700 12px/1 var(--font-mono); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-grow-xp em { font: 600 8.5px var(--font-mono); font-style: normal; color: rgba(255,255,255,0.55); margin-left: 3px; }
.sb-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-lime-logo), #C9E204); box-shadow: 0 0 12px rgba(224,252,9,0.45); transition: width 0.7s var(--ease-out) 0.2s; }
.sb-grow-t { margin: 8px 0 0; font: 400 11.5px/1.35 var(--font-display); color: rgba(255,255,255,0.62); }
.sb-grow-t b { color: #fff; font-weight: 600; }
.sb-grow-mini { display: none; }
/* Rango: la chapita en lugar del número de nivel */
.sb-grow-rango { width: 30px; height: auto; filter: drop-shadow(0 0 10px rgba(224,252,9,0.28)) drop-shadow(0 3px 5px rgba(0,0,0,0.5)); }
.sb-grow-mini .rg-mini { width: 24px; height: auto; }
.tb-cell.tb-cell--rango { gap: 7px; }
.tb-cell.tb-cell--rango img { width: 22px; height: auto; }
.mb-slide-user small.mb-slide-rango { display: flex; align-items: center; gap: 6px; }
.mb-slide-bar { margin-top: 12px; }

/* User card + footer */
.sb-bottom { padding: 8px 12px 10px; flex-shrink: 0; border-top: 1px solid var(--sb-line); }
.sb-user {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 8px;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left; color: #fff;
    transition: background var(--dur-fast);
}
.sb-user:hover { background: rgba(255,255,255,0.06); }
.sb-user:focus-visible { outline: 2px solid var(--color-lime-logo); outline-offset: 2px; }
.sb-user-ava {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, #4800FF, #7C3AED); font: 700 13px var(--font-display); color: #fff;
    box-shadow: 0 0 0 2px #14132E, 0 0 0 3.5px var(--color-lime-logo);
}
.sb-user-ava img { width: 100%; height: 100%; object-fit: cover; }
.sb-user-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sb-user-txt b { font: 600 13px/1.2 var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-txt small { font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-chev { color: rgba(255,255,255,0.4); transition: transform var(--dur-fast); flex-shrink: 0; }
.sb-user[aria-expanded="true"] .sb-user-chev { transform: rotate(180deg); }
.sb-foot { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px; }
.sb-copy { font: 500 10px var(--font-mono); color: rgba(255,255,255,0.5); }
.sb-collapse {
    width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent;
    color: rgba(255,255,255,0.45); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast), color var(--dur-fast);
}
.sb-collapse:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.sb-collapse:focus-visible { outline: 2px solid var(--color-lime-logo); outline-offset: 2px; }

/* ── Colapsado (72px) — colgado de .is-collapsed Y de html.sidebar-pre-collapsed ── */
.sidebar-nav.is-collapsed .sb-wordmark, html.sidebar-pre-collapsed .sidebar-nav .sb-wordmark,
.sidebar-nav.is-collapsed .sb-academy,  html.sidebar-pre-collapsed .sidebar-nav .sb-academy,
.sidebar-nav.is-collapsed .sidebar-label, html.sidebar-pre-collapsed .sidebar-nav .sidebar-label,
.sidebar-nav.is-collapsed .sb-grow,     html.sidebar-pre-collapsed .sidebar-nav .sb-grow,
.sidebar-nav.is-collapsed .sb-sub,      html.sidebar-pre-collapsed .sidebar-nav .sb-sub,
.sidebar-nav.is-collapsed .sb-trigger,  html.sidebar-pre-collapsed .sidebar-nav .sb-trigger,
.sidebar-nav.is-collapsed .sb-chev,     html.sidebar-pre-collapsed .sidebar-nav .sb-chev,
.sidebar-nav.is-collapsed .sb-copy,     html.sidebar-pre-collapsed .sidebar-nav .sb-copy { display: none; }
.sidebar-nav.is-collapsed .sb-isotipo,  html.sidebar-pre-collapsed .sidebar-nav .sb-isotipo { display: block; margin: 0 auto; }
.sidebar-nav.is-collapsed .sb-isotipo svg, html.sidebar-pre-collapsed .sidebar-nav .sb-isotipo svg { height: 32px; }
.sidebar-nav.is-collapsed .sb-comm-collapsed, html.sidebar-pre-collapsed .sidebar-nav .sb-comm-collapsed { display: flex; }
.sidebar-nav.is-collapsed .sb-grow-mini, html.sidebar-pre-collapsed .sidebar-nav .sb-grow-mini { display: flex; }
.sidebar-nav.is-collapsed .sb-brand, html.sidebar-pre-collapsed .sidebar-nav .sb-brand { padding: 20px 0 0; height: 72px; justify-content: center; }
.sidebar-nav.is-collapsed .sidebar-section-label, html.sidebar-pre-collapsed .sidebar-nav .sidebar-section-label {
    font-size: 0; padding: 0; height: 1px; margin: 10px 18px; background: rgba(255,255,255,0.10);
}
.sidebar-nav.is-collapsed .sidebar-item, html.sidebar-pre-collapsed .sidebar-nav .sidebar-item {
    width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0 auto; justify-content: center;
}
.sidebar-nav.is-collapsed .sidebar-item.active::before, html.sidebar-pre-collapsed .sidebar-nav .sidebar-item.active::before { left: -14px; }
.sidebar-nav.is-collapsed .sidebar-item > svg, html.sidebar-pre-collapsed .sidebar-nav .sidebar-item > svg { width: 21px; height: 21px; margin: 0; }
.sidebar-nav.is-collapsed .sidebar-item-badge, html.sidebar-pre-collapsed .sidebar-nav .sidebar-item-badge {
    position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; min-width: 0; padding: 0;
    border-radius: 50%; font-size: 0; line-height: 0; border: 0; background: var(--sb-badge-bg);
}
.sidebar-nav.is-collapsed .sb-nav, html.sidebar-pre-collapsed .sidebar-nav .sb-nav { overflow: visible; }
@media (max-height: 760px) {
    .sidebar-nav.is-collapsed .sb-nav, html.sidebar-pre-collapsed .sidebar-nav .sb-nav { overflow-y: auto; overflow-x: hidden; }
    .sidebar-nav.is-collapsed .sidebar-item, html.sidebar-pre-collapsed .sidebar-nav .sidebar-item { height: 40px; min-height: 40px; }
    .sidebar-nav.is-collapsed .sidebar-section-label, html.sidebar-pre-collapsed .sidebar-nav .sidebar-section-label { margin: 6px 18px; }
}
.sidebar-nav.is-collapsed .sidebar-item[data-tip]::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
    background: #14132E; border: 1px solid rgba(255,255,255,0.12); color: #fff;
    font: 500 11px/1 var(--font-mono); padding: 6px 9px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); z-index: var(--z-tooltip);
}
.sidebar-nav.is-collapsed .sidebar-item[data-tip]:hover::after,
.sidebar-nav.is-collapsed .sidebar-item[data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.sidebar-nav.is-collapsed .sb-grow-mini, html.sidebar-pre-collapsed .sidebar-nav .sb-grow-mini {
    position: relative; width: 40px; height: 40px; margin: 8px auto 10px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    align-items: center; justify-content: center; text-decoration: none;
    font: 700 14px var(--font-mono); color: #fff;
}
.sb-grow-mini i { position: absolute; left: 0; bottom: 0; height: 3px; max-width: 100%; border-radius: 0 0 0 10px; background: var(--color-lime-logo); }
.sidebar-nav.is-collapsed .sb-grow-mini[data-tip]::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: #14132E; border: 1px solid rgba(255,255,255,0.12); color: #fff; font: 500 11px/1 var(--font-mono);
    padding: 6px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: var(--z-tooltip); transition: opacity 120ms;
}
.sidebar-nav.is-collapsed .sb-grow-mini:hover::after, .sidebar-nav.is-collapsed .sb-grow-mini:focus-visible::after { opacity: 1; }
.sidebar-nav.is-collapsed .sb-user, html.sidebar-pre-collapsed .sidebar-nav .sb-user { justify-content: center; padding: 0; }
.sidebar-nav.is-collapsed .sb-foot, html.sidebar-pre-collapsed .sidebar-nav .sb-foot { justify-content: center; }
.sidebar-nav.is-collapsed .um-menu--up { left: calc(100% + 10px); right: auto; bottom: 0; width: 264px; }
.sidebar-nav.is-collapsed .sb-bottom { overflow: visible; }

/* ══════════════════════════════════════════════════════════════════
   TOPBAR desktop (64px) — sobrio: un acento, cápsulas de vidrio, profundidad
   ══════════════════════════════════════════════════════════════════ */
.topbar-desktop { display: none; }
@media (min-width: 768px) { .topbar-desktop { display: grid; } }
.topbar-desktop {
    grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
    height: var(--topbar-height); padding: 0 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)), var(--bg-topbar-blur);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.topbar-desktop::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 40%, transparent) 30%, transparent 62%);
    opacity: 0.85;
}
.topbar-desktop.is-scrolled { border-bottom-color: var(--border-default); box-shadow: var(--topbar-shadow); }
html[data-theme="light"] .topbar-desktop, html.light .topbar-desktop {
    background: linear-gradient(180deg, #F8F7F3, #F1F0EB);
    border-bottom-color: #E6E6E2;
    box-shadow: 0 1px 0 #fff inset, 0 6px 18px -14px rgba(20,21,26,0.18);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .topbar-desktop { background: linear-gradient(180deg, #F8F7F3, #F1F0EB); border-bottom-color: #E6E6E2; box-shadow: 0 1px 0 #fff inset, 0 6px 18px -14px rgba(20,21,26,0.18); }
}

/* Título con eyebrow y barra de acento */
.tb-head { position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 14px; }
.tb-head::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: var(--color-primary); box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 45%, transparent); }
.tb-eyebrow { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--label-muted); white-space: nowrap; }
.tb-title { margin: 0; font: 800 1.35rem/1 var(--font-display); font-stretch: 90%; letter-spacing: -0.02em; color: var(--text-primary); white-space: nowrap; }

/* Cápsula base (buscador, stats, wallet, perfil) */
.tb-glass {
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
    border: 1px solid var(--border-default);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.12), 0 8px 24px -18px rgba(0,0,0,0.5);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
html[data-theme="light"] .tb-glass, html.light .tb-glass { background: #FFFFFF; border-color: #E6E6E2; box-shadow: 0 1px 2px rgba(20,21,26,0.04), 0 8px 20px -16px rgba(20,21,26,0.16); }
@media (prefers-color-scheme: light) { html[data-theme="auto"] .tb-glass { background: #FFFFFF; border-color: #E6E6E2; box-shadow: 0 1px 2px rgba(20,21,26,0.04), 0 8px 20px -16px rgba(20,21,26,0.16); } }

/* Buscador */
.tb-search { position: relative; justify-self: center; width: 100%; max-width: 420px; min-width: 0; }
.tb-search-box {
    display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 14px; border-radius: 13px; cursor: text;
    background: var(--bg-surface-sunken); border: 1px solid var(--border-subtle);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
html[data-theme="light"] .tb-search-box, html.light .tb-search-box { background: #F3F2EE; border-color: #E6E6E2; box-shadow: inset 0 1px 2px rgba(20,21,26,0.05); }
@media (prefers-color-scheme: light) { html[data-theme="auto"] .tb-search-box { background: #F3F2EE; border-color: #E6E6E2; box-shadow: inset 0 1px 2px rgba(20,21,26,0.05); } }
.tb-search-box:hover { border-color: var(--border-default); }
.tb-search-box:focus-within { border-color: var(--border-focus); box-shadow: var(--accent-focus-ring), inset 0 1px 2px rgba(0,0,0,0.12); background: var(--bg-surface); }
.tb-search-box input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: 400 13.5px var(--font-display); color: var(--text-primary); }
.tb-search-box input::placeholder { color: var(--text-placeholder); }
.tb-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tb-search-ico { color: var(--text-tertiary); flex-shrink: 0; }
.tb-kbd { font: 500 10px/18px var(--font-mono); color: var(--text-tertiary); border: 1px solid var(--border-default); border-radius: 6px; padding: 0 6px; background: var(--bg-surface); box-shadow: 0 1px 0 var(--border-default); }
.tb-search-box:focus-within .tb-kbd { display: none; }
.tb-spin { width: 14px; height: 14px; color: var(--color-primary); animation: tb-spin 0.7s linear infinite; }
@keyframes tb-spin { to { transform: rotate(360deg); } }
.tb-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: 14px;
    box-shadow: var(--dropdown-shadow); max-height: 420px; overflow-y: auto; z-index: var(--z-dropdown); padding: 6px;
}
.tb-res-group + .tb-res-group { border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 4px; }
.tb-res-head { padding: 8px 10px 4px; font: 600 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label-muted); }
.tb-res { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; }
.tb-res:hover { background: var(--bg-hover); }
.tb-res-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); overflow: hidden; }
.tb-res-ico img { width: 100%; height: 100%; object-fit: cover; }
.tb-res-ico--ava { border-radius: 50%; font: 700 11px var(--font-display); }
.tb-res-txt { flex: 1; min-width: 0; }
.tb-res-title { display: block; font: 600 13px/1.2 var(--font-display); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-res-meta { display: block; margin-top: 2px; font: 400 11px var(--font-display); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-res-price { font: 700 11px var(--font-mono); color: var(--color-primary); letter-spacing: 0.06em; flex-shrink: 0; }
.tb-res-price.is-free { color: color-mix(in srgb, var(--success) 70%, var(--text-primary)); }
.tb-res-empty { padding: 22px 12px; text-align: center; font: 400 12.5px/1.4 var(--font-display); color: var(--text-secondary); }
.tb-res-empty b { color: var(--text-primary); }

/* Cluster derecho */
.tb-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.tb-sep { width: 1px; height: 22px; background: var(--border-default); flex-shrink: 0; }

/* Stats: tira silenciosa — cifra + etiqueta, hairlines, un solo acento (línea de nivel) */
.tb-stats { display: flex; align-items: center; height: 40px; padding: 0 4px; border-radius: 12px; text-decoration: none; transition: background var(--dur-fast); }
.tb-stats:hover { background: var(--bg-hover); }
.tb-stats:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-cell { position: relative; display: flex; align-items: center; gap: 5px; padding: 0 14px; height: 40px; }
.tb-cell + .tb-cell::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--border-default); }
.tb-cell b { font: 700 14px/14px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.tb-cell small { font: 600 9.5px/14px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-muted); white-space: nowrap; padding-top: 1px; }
.tb-cell img { width: 14px; height: 14px; flex-shrink: 0; }
.tb-cell.is-zero b { color: var(--text-secondary); }
.tb-cell--level { gap: 6px; }
.tb-cell--level .tb-level-line { position: absolute; left: 14px; right: 14px; bottom: 7px; width: auto; }
.tb-level-line { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--bg-active); overflow: hidden; }
.tb-level-line em { display: block; height: 100%; border-radius: 2px; background: var(--color-primary); }
.tb-cell-ico, .tb-cell-txt { display: contents; }
.tb-stats--compact { display: none; }

/* Wallet: cápsula hermana con tile del icono en acento suave */
.tb-wallet { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; border-radius: 14px; text-decoration: none; }
.tb-wallet:hover { border-color: var(--border-strong); }
.tb-wallet-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.tb-wallet-ico svg { width: 16px; height: 16px; }
.tb-wallet-txt { display: flex; flex-direction: column; gap: 3px; }
.tb-wallet-txt small { font: 600 9px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-muted); white-space: nowrap; }
.tb-wallet-txt b { font: 600 14px/1 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-wallet-txt b #walletCurrency { font-size: 10px; color: var(--label-muted); }
.tb-wallet-chev { color: var(--text-tertiary); transition: transform var(--dur-fast); }
.tb-wallet:hover .tb-wallet-chev { transform: translateX(2px); }

/* Iconos: botones circulares silenciosos */
.tb-icons { display: flex; align-items: center; gap: 2px; }
.topbar-icon-btn {
    position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: transparent; border: 1px solid transparent; color: var(--text-secondary);
    cursor: pointer; text-decoration: none; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.topbar-icon-btn:hover { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--text-primary); transform: none; }
.topbar-icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.topbar-icon-btn .notif-badge, .mb-btn .notif-badge {
    position: absolute; top: 3px; right: 3px; width: auto; min-width: 17px; height: 17px;
    background: var(--notif-badge-bg); color: var(--notif-badge-fg); border-radius: 100px;
    font: 700 9.5px/1 var(--font-mono); display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid var(--bg-surface);
}

/* Perfil: píldora de vidrio */
.tb-user { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px 0 5px; border-radius: 999px; cursor: pointer; }
.tb-user:hover { border-color: var(--border-strong); }
.tb-user:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tb-user-ava {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, #4800FF, #7C3AED); color: #fff; font: 700 12.5px var(--font-display);
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3.5px var(--color-primary);
}
.tb-user-ava img { width: 100%; height: 100%; object-fit: cover; }
.tb-user-name { font: 600 13.5px var(--font-display); color: var(--text-primary); white-space: nowrap; }
.tb-user-chev { color: var(--text-tertiary); transition: transform var(--dur-fast); }
.tb-user[aria-expanded="true"] .tb-user-chev { transform: rotate(180deg); }

/* Menú de usuario (macro) — patrón del panel Rocket, elevado */
.um-menu { position: absolute; width: 264px; z-index: 60; padding: 0; border-radius: 18px; overflow: hidden; }
.um-menu.user-dropdown, .tb-notif.user-dropdown { background: var(--bg-surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); }
html[data-theme="light"] .um-menu.user-dropdown, html.light .um-menu.user-dropdown, html[data-theme="light"] .tb-notif.user-dropdown, html.light .tb-notif.user-dropdown { background: #FFFFFF; box-shadow: 0 24px 60px -18px rgba(20,21,26,0.28), 0 2px 8px rgba(20,21,26,0.06); }
.um-menu--down { right: 0; top: calc(100% + 10px); transform-origin: top right; }
.um-menu--up { left: 0; right: 0; bottom: calc(100% + 8px); width: auto; transform-origin: bottom left; }
.um-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px;
    background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 60%);
}
.um-ava {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, #4800FF, #7C3AED); color: #fff; font: 700 14px var(--font-display);
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3.5px var(--color-primary);
}
.um-ava img { width: 100%; height: 100%; object-fit: cover; }
.um-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.um-id b { display: flex; align-items: center; font: 700 13.5px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
.um-verif { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; margin-left: 6px; flex-shrink: 0; background: var(--color-lime-logo); color: var(--color-navy); font-style: normal; }
.um-alias { font: 500 10.5px var(--font-mono); color: var(--kicker-color); }
.um-mail { font: 400 11px var(--font-display); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-level {
    display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 11px; text-decoration: none;
    border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
    transition: background var(--dur-fast);
}
.um-level:hover { background: var(--bg-hover); }
.um-level-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.um-level-row small { display: flex; align-items: center; gap: 6px; font: 600 9px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-level-row small::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.um-level-row b { font: 700 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.um-level-row b em { font: 600 9.5px var(--font-mono); font-style: normal; color: var(--label-muted); }
.um-level-bar { display: block; height: 3px; border-radius: 99px; background: var(--bg-active); overflow: hidden; }
.um-level-bar b { display: block; height: 100%; border-radius: 99px; background: var(--color-primary); }
.um-rango .um-level-row { align-items: center; justify-content: flex-start; margin-bottom: 8px; }
.um-rango .um-level-row small::before { display: none; }
.um-rango .um-level-row b { margin-left: auto; font: 800 14px/1 var(--font-display); font-stretch: 92%; }
.um-rango .rg-mini { width: 22px; height: auto; }
.um-rango-bar.rg-barra { height: 4px; }
.um-list { padding: 6px; }
.um-item {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 8px 10px; border-radius: 9px; margin: 0;
    font: 500 13px var(--font-display); color: var(--text-primary); text-decoration: none;
    border: 0; background: none; cursor: pointer; text-align: left; transition: background 0.14s, color 0.14s;
}
.um-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); transition: color 0.14s; }
.um-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.um-item:hover svg { color: var(--text-primary); }
.um-lang { display: flex; gap: 4px; padding: 8px 2px; margin: 0 6px; border-top: 1px solid var(--border-subtle); }
.um-lang button {
    flex: 1; text-align: center; padding: 6px; border-radius: 7px; border: 0; background: none; cursor: pointer;
    font: 600 11.5px var(--font-mono); letter-spacing: 0.05em; color: var(--text-tertiary); transition: background 0.16s, color 0.16s;
}
.um-lang button:hover { background: var(--bg-hover); color: var(--text-primary); }
.um-lang button.on { background: var(--color-lime-logo); color: var(--color-navy); }
.um-logout-form { margin: 0 6px 6px; border-top: 1px solid var(--border-subtle); }
.um-logout { padding: 11px 10px 8px; border-radius: 0 0 12px 12px; color: var(--danger); }
.um-logout svg { color: var(--danger); }
.um-logout:hover { background: rgba(224,87,83,0.07); color: var(--danger); }
.um-logout:hover svg { color: var(--danger); }
/* Menú del sidebar (colapsado o no) sale como flyout arriba: mismo look */
.sb-bottom .um-menu--up { width: 264px; left: 0; right: auto; }

/* Notificaciones — compacto, una sola señal de "sin leer" (punto), sin lavados de color */
.tb-notif { position: absolute; right: 0; top: calc(100% + 10px); width: 336px; padding: 0; z-index: 60; border-radius: 18px; overflow: hidden; }
.tb-notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 10px; border-bottom: 1px solid var(--border-subtle); }
.tb-notif-title { display: flex; align-items: center; gap: 8px; font: 700 13px var(--font-display); color: var(--text-primary); }
.tb-notif-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--color-lime-logo); color: var(--color-navy); font: 700 10px/1 var(--font-mono); font-style: normal; }
.tb-notif-head form { display: inline; }
.tb-notif-head button { font: 600 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.tb-notif-head button:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-notif-list { max-height: 330px; overflow-y: auto; padding: 6px; }
.tb-nrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; text-decoration: none; transition: background 0.14s; }
.tb-nrow:hover { background: var(--bg-hover); }
.tb-nrow.is-read p { color: var(--text-secondary); font-weight: 400; }
.tb-nrow.is-read .tb-nicon { color: var(--text-tertiary); }
.tb-nicon { width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.tb-nicon--money { color: var(--success); }
.tb-nicon--learn, .tb-nicon--social { color: var(--color-primary); }
.tb-nicon--danger { color: var(--danger); }
.tb-nicon--neutral { color: var(--text-secondary); }
.tb-nbody { min-width: 0; flex: 1; }
.tb-nrow p { margin: 0; font: 500 12.5px/1.35 var(--font-display); color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-nrow time { display: block; margin-top: 3px; font: 500 10px var(--font-mono); letter-spacing: 0.04em; color: var(--label-muted); }
.tb-ndot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; margin-top: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.tb-notif-foot { display: block; margin: 0 6px 6px; padding: 10px; border-radius: 10px; text-align: center; font: 600 12px var(--font-display); color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border-subtle); transition: background 0.14s, color 0.14s; }
.tb-notif-foot:hover { background: var(--bg-hover); color: var(--text-primary); }
.tb-notif-empty { padding: 26px 16px 24px; text-align: center; color: var(--text-secondary); font: 400 12px var(--font-display); }
.tb-notif-empty .tb-nicon { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px; background: var(--bg-surface-sunken); color: var(--text-tertiary); }
.tb-notif-empty b { display: block; font: 600 13px var(--font-display); color: var(--text-primary); margin-bottom: 2px; }

/* Responsive del topbar */
.tb-search-btn { display: none; }
@media (max-width: 1500px) { .tb-cell--prestige { display: none; } .tb-user-name { display: none; } .tb-wallet-txt small { display: none; } .tb-wallet-chev { display: none; } .tb-wallet { padding-right: 12px; } }
@media (max-width: 1360px) { .tb-eyebrow { display: none; } }
@media (max-width: 1100px) {
    .topbar-desktop { grid-template-columns: auto minmax(0, 1fr) auto; }
    .topbar-desktop > .tb-search:not(.tb-search--row) { display: none; }
    .tb-search-btn { display: flex; }
    .tb-search--row { display: block; position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: 8px 28px 10px; background: var(--bg-topbar-blur); border-bottom: 1px solid var(--border-subtle); justify-self: stretch; }
    .tb-search--row .tb-results { left: 28px; right: 28px; }
}
@media (min-width: 1101px) { .tb-search--row { display: none !important; } }
@media (max-width: 1024px) { .tb-stats { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   MÓVIL
   ══════════════════════════════════════════════════════════════════ */
.mobile-topbar {
    height: var(--topbar-height); padding: 0 10px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg-topbar-mobile); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--topbar-edge);
}
/* Marca en una línea. El acento vive SOLO en el isotipo: cuando además lo
   llevaban «Academy» y el aro del avatar, el violeta salía tres veces en 56px
   y la barra quedaba con dos centros de peso tirando de cada extremo. */
/* Área de toque vertical hasta el alto de la barra: el logo mide 24px y el
   enlace se quedaba en ese alto. El padding no mueve el logo (align-items lo
   centra) y sube la zona clicable a ~44px. (Auditoría 4.3) */
.mb-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; color: var(--text-primary); padding: 10px 0; }
.mb-mark { display: block; height: 24px; color: var(--logo-accent); flex-shrink: 0; }
.mb-mark svg { height: 100%; width: auto; display: block; }
.mb-name { font: 800 16px/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.mb-name em { font-style: normal; color: inherit; }
.mb-actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.mb-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--text-primary); opacity: 0.82; display: grid; place-items: center; text-decoration: none; cursor: pointer; transition: background var(--dur-fast), opacity var(--dur-fast); }
.mb-btn svg { width: 21px; height: 21px; }
.mb-btn:active { background: var(--bg-active); opacity: 1; }
.mb-btn .notif-badge { top: 6px; right: 6px; }
.mb-ava {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 0; padding: 0; margin-left: 8px; margin-right: 4px; display: grid; place-items: center;
    color: #fff; font: 700 13px var(--font-display); background: linear-gradient(135deg, #4800FF, #7C3AED); cursor: pointer;
    box-shadow: 0 0 0 1px var(--ava-ring);
}
.mb-ava img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { :root { --topbar-height: 56px; } }
.mb-searchrow { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 10px; background: var(--bg-topbar-mobile); border-bottom: 1px solid var(--border-subtle); }
.mb-searchrow .tb-search { width: 100%; }
.mb-searchrow #mobileSearch:focus, .mb-searchrow #mobileSearch:focus-visible { outline: none !important; box-shadow: none !important; }
.mb-searchrow .tb-search-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--logo-accent) 55%, transparent); }
.mb-searchrow .tb-results { left: 0; right: 0; }

.mobile-bottom-nav {
    display: flex; align-items: stretch; height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-bottomnav); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border-subtle);
}
.mob-tab {
    position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; padding: 0; font: 600 10.5px/1 var(--font-display); letter-spacing: 0.01em;
    color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast); cursor: pointer;
}
.mob-tab.active { color: var(--nav-active); }
/* La marca de activo va bajo la etiqueta de su pestaña, no como una rayita suelta
   en el borde superior de la barra: así se lee a qué pestaña pertenece.
   Sin relleno detrás del icono: la barra mide 56px y, con el icono de 22 y la
   etiqueta debajo, una pastilla solo cabe pegada al icono — quedaba como un
   charco lila alrededor. El violeta del icono y del texto ya marcan el estado. */
.mob-tab::after {
    content: ''; position: absolute; bottom: 6px; left: 50%; width: 20px; height: 3px;
    margin-left: -10px; border-radius: 2px; background: var(--nav-active);
    opacity: 0; transform: scaleX(0.4); transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.mob-tab.active::after { opacity: 1; transform: scaleX(1); }
.mob-tab:active { transform: scale(0.94); }
.mob-dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--nav-active); border: 2px solid var(--bg-surface); }

.mobile-slide-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bg-overlay); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-base); }
.mobile-slide-backdrop.open { opacity: 1; }
.mobile-slide-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 340px; z-index: var(--z-modal);
    background: var(--bg-slide-menu); backdrop-filter: blur(20px); border-left: 1px solid var(--border-subtle);
    transform: translateX(100%); transition: transform var(--dur-base) var(--ease-in-out); overflow-y: auto;
    display: flex; flex-direction: column;
}
.mobile-slide-menu.open { transform: translateX(0); }
.mb-slide-head { position: relative; margin: 12px; padding: 18px 18px 16px; border-radius: 16px; background: var(--sb-bg-wash), var(--sb-bg); color: #fff; flex-shrink: 0; }
.mb-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); display: grid; place-items: center; cursor: pointer; }
.mb-slide-user { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; padding-right: 40px; }
.mb-slide-ava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px #14132E, 0 0 0 3.5px var(--color-lime-logo); background: linear-gradient(135deg, #4800FF, #7C3AED); display: grid; place-items: center; font: 700 15px var(--font-display); color: #fff; }
.mb-slide-ava img { width: 100%; height: 100%; object-fit: cover; }
.mb-slide-user b { display: block; font: 700 15px/1.2 var(--font-display); color: #fff; }
/* En monoespaciada con letras separadas no cabía y «6.470 XP» caía a una segunda línea */
.mb-slide-user small { display: block; margin-top: 4px; font: 600 11.5px/1.35 var(--font-display); letter-spacing: 0.01em; color: var(--color-lime-logo); }
.mb-slide-t { margin: 8px 0 0; font: 400 12px var(--font-display); color: rgba(255,255,255,0.7); }
.mb-slide-t a { color: #fff; font-weight: 600; text-decoration: none; }
/* Saldo dentro de la cabecera navy del menú: separado por un filete para que no
   se lea como una línea más del bloque de nivel — es dinero, no progreso. */
.mb-slide-wallet {
    display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; color: #fff;
}
.mb-slide-wallet > svg:first-child { flex-shrink: 0; color: var(--color-lime-logo); }
.mb-slide-wallet > svg:last-child { flex-shrink: 0; margin-left: auto; color: rgba(255, 255, 255, 0.45); }
.mb-slide-wallet-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-slide-wallet-txt small { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.mb-slide-wallet-txt b { font: 700 16px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mb-slide-wallet-txt b span:last-child { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.mb-slide-nav { flex: 1; padding: 4px 12px; }
.mb-slide-sec { padding: 16px 10px 6px; font: 600 11.5px/1 var(--font-display); letter-spacing: 0.01em; color: var(--label-muted); }
.mb-slide-nav a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 10px; border-radius: 10px; font: 500 15px var(--font-display); color: var(--text-primary); text-decoration: none; position: relative; }
.mb-slide-nav a:active { background: var(--bg-hover); }
.mb-slide-nav a svg { color: var(--text-secondary); flex-shrink: 0; }
.mb-slide-nav a.active { background: var(--accent-muted); color: var(--color-primary); }
.mb-slide-nav a.active svg { color: var(--color-primary); }
.mobile-slide-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font: 700 10px/20px var(--font-mono); text-align: center; background: var(--color-primary); color: #fff; }
.mb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 8px; padding: 4px; border-radius: 10px; background: var(--bg-surface-sunken); border: 1px solid var(--border-subtle); }
.mb-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 7px; background: transparent; font: 600 12.5px var(--font-display); color: var(--text-secondary); cursor: pointer; }
.mb-seg button.is-on { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
/* El enlace al panel externo va separado del resto por una línea, no por una cabecera */
.mb-slide-nav a.mb-slide-ext { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); border-radius: 0 0 10px 10px; }
/* Hueco extra al final: en iPhone el final del panel puede quedar detrás de la barra del
   navegador; así, al bajar, «Cerrar sesión» (último de la lista) siempre queda por encima */
.mb-slide-foot { padding: 8px 12px calc(88px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
.mb-logout-form { margin: 4px 0 8px; }
.mb-logout { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: 500 15px var(--font-display); color: color-mix(in srgb, var(--danger) 80%, var(--text-primary)); text-align: left; cursor: pointer; }
.mb-copy { display: block; padding: 8px 10px 0; font: 500 11px var(--font-display); color: var(--label-muted); }

/* Skip link sin handlers inline */
.skip-link { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: 1rem 1.5rem; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px; border-radius: 0 0 var(--radius-md) 0; text-decoration: none; }
.skip-link:focus { left: 0; width: auto; height: auto; }

/* Toasts sin emoji */
.toast-ico { display: grid; place-items: center; flex-shrink: 0; color: var(--color-primary); }
.toast-ico--gold { color: #FBBF24; }
.toast-ico--warn { color: #FBBF24; }
.toast-ico--ok { color: var(--success); }
.toast-ico--err { color: var(--danger, #F87171); }
.streak-toast-icon { display: grid; place-items: center; color: var(--color-primary); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sb-sub .sb-subitem { animation: none; }
    .sidebar-nav, .sb-bar i, .tb-user-chev, .sb-user-chev { transition: none; }
}

/* Streak toast (racha) — de marrón legacy a navy de marca */
.streak-toast {
    background: var(--sb-bg-wash), var(--sb-bg) !important;
    border: 1px solid rgba(224,252,9,0.35) !important;
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5), 0 0 24px rgba(72,0,255,0.18) !important;
    color: #fff;
}
.streak-toast .streak-toast-title { color: #fff; }
.streak-toast .streak-toast-body { color: rgba(255,255,255,0.7); }
.streak-toast .streak-toast-icon { color: var(--color-lime-logo); }
.streak-toast .streak-toast-close { color: rgba(255,255,255,0.5); }
.streak-toast .streak-toast-close:hover { color: #fff; }
/* Desktop: abajo a la derecha (no tapa header, menús ni el pase de vuelo) */
@media (min-width: 768px) { .streak-toast { top: auto !important; bottom: 24px !important; right: 24px !important; z-index: 45 !important; } }
@media (max-width: 767px) { .streak-toast { top: auto !important; bottom: calc(var(--bottomnav-height) + 12px + env(safe-area-inset-bottom)) !important; left: 12px !important; right: 12px !important; min-width: 0 !important; max-width: none !important; } }

/* Dropdowns: opacos de verdad (en claro se transparentaba el contenido de abajo) */
.user-dropdown { background: color-mix(in srgb, var(--bg-surface-raised) 97%, transparent); }

/* Glows ambientales: solo en oscuro (en claro el canvas es crema limpio) */
html[data-theme="light"] .page-glow, html.light .page-glow,
html[data-theme="light"] .page-glow-secondary, html.light .page-glow-secondary { display: none; }
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .page-glow, html[data-theme="auto"] .page-glow-secondary { display: none; }
}

/* Pie legal */
.legal-footer {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 32px; padding: 16px 0 24px; border-top: 1px solid var(--border-subtle);
    font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--label-muted);
}
.legal-footer a { display: inline-block; padding: 8px 2px; color: var(--label-muted); text-decoration: none; margin-left: 12px; }  /* ≥ 24 px de alto: zona de toque */
.legal-footer a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
    /* En el móvil el pie se partía en dos líneas, en monoespaciada y pegado a la
       barra de pestañas. Una sola línea centrada, discreta, y separada de la barra. */
    .legal-footer {
        margin: 0 16px;
        justify-content: center; gap: 6px 14px; text-align: center;
        padding: 14px 0 calc(var(--bottomnav-height) + 28px);
        font: 500 11.5px/1.5 var(--font-display); letter-spacing: 0;
    }
    .legal-footer a { margin-left: 0; }
    /* En las páginas con barra fija de compra, el pie también tiene que esquivarla */
    body:has(.sticky-cta-mobile) .legal-footer { padding-bottom: calc(var(--bottomnav-height) + 84px); }

    /* ── El colchón de las pestañas se pone UNA vez ──────────────────────────
       El contenedor reserva al fondo la altura de la barra de pestañas para que
       nada quede debajo. Pero el pie legal, que es el último elemento de la
       página, ya reserva lo mismo por su cuenta. Sumados dejaban entre 100 y 250
       px de vacío al final (pasaba en Ajustes, la ficha del curso y la home).
       Donde hay pie legal, manda el pie. */
    body:has(.legal-footer) main.main-authenticated { padding-bottom: 0 !important; }

    /* El contenedor se forzaba a la altura completa de la pantalla (min-h-screen),
       así que el pie legal, que va DESPUÉS, empezaba siempre por debajo del borde:
       en cualquier página corta quedaba un hueco vacío y había que desplazar para
       ver el pie. Creciendo en vez de imponer altura, el pie se apoya al fondo. */
    main.main-authenticated { min-height: 0 !important; flex: 1 1 auto; }
    .legal-footer-links { display: inline-flex; gap: 14px; }
}

.mb-seg--2 { grid-template-columns: repeat(2, 1fr); }
/* Botón de tema: giro sutil del icono al cambiar */
.tb-theme svg { transition: transform .35s var(--ease-out); }
.tb-theme:active svg { transform: rotate(40deg) scale(.9); }

/* Tema auto (sistema en claro): menús elevados en blanco */
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .um-menu.user-dropdown, html[data-theme="auto"] .tb-notif.user-dropdown { background: #FFFFFF; box-shadow: 0 24px 60px -18px rgba(20,21,26,0.28), 0 2px 8px rgba(20,21,26,0.06); }
}

/* Aviso de cambio de idioma (navy, abajo al centro) */
.rk-lang-toast { position: fixed; left: 50%; bottom: 28px; z-index: 1200; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 14px; border-radius: 14px; color: #fff; background: radial-gradient(80% 100% at 100% 0%, rgba(72,0,255,0.55), transparent 60%), linear-gradient(160deg, #23264F, #14132E); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 30px 70px -24px rgba(0,0,0,0.7); transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out); pointer-events: none; }
.rk-lang-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.rk-lang-toast i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--color-lime); color: var(--color-navy); flex-shrink: 0; }
.rk-lang-toast small { display: block; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-lime-logo); margin-bottom: 5px; }
.rk-lang-toast b { display: block; font: 800 15px/1 var(--font-display); letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
@media (max-width: 767px) { .rk-lang-toast { bottom: calc(var(--bottom-nav-height, 64px) + 16px); left: 14px; right: 14px; transform: translateY(16px); } .rk-lang-toast.is-in { transform: translateY(0); } }