/* hub.css — Elite+ Fluido (barra inferior, stepper, hub em cards, Explorar, Treinos, Progresso).
   Só tokens var(--…) de elite.css/premium.css; nenhum hex novo. Carregado por último (depois de reta-final.css)
   para vencer a pele escura de forja-app.css. Breakpoints permitidos: 480 / 880 / 1024.
   Fase 2: topo compacto, stepper de localização, barra inferior, gaveta (Tema/Foco/Feedback/Termos),
   linha de progresso. Fase 3: hub em 4 cards (grade 2×2 no desktop, largura máxima 1100 px), Explorar
   com "Começar", Treinos, Progresso/Revisões/Ranking em abas, objetivo do primeiro acesso, sessão concluída. */

/* ============================================================
   CHROME — regras válidas em todas as larguras
   ============================================================ */
/* O nível vive só na patente da sidebar e em #/perfil (roteiro, seção 2). */
.nivel-chip{ display:none !important; }
/* Alvos de toque do chrome: nunca abaixo de 44 px. */
.menu-toggle,.tema-toggle,.foco-toggle,.topbar .avatar-sm{ min-width:44px; min-height:44px; }
.topbar .avatar-sm{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
.topo-entrar{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; white-space:nowrap; }
.foco-toggle .ic{ width:17px; height:17px; }
.foco-toggle.on{ color:var(--tx-ouro); border-color:var(--primary); background:rgba(var(--primary-rgb),.12); }
.streak-chip .streak-n{ font-variant-numeric:tabular-nums; }

/* ---------- stepper de localização (vive no slot da topbar; nasce no conteúdo e sobe) ---------- */
.topo-stepper{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.stepper-wrap{ min-width:0; width:100%; }
.stepper{ display:flex; align-items:center; gap:2px; min-height:44px; min-width:0; }
.st-voltar{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:-10px;
  border-radius:var(--r-sm,10px); color:var(--muted); text-decoration:none; transition:color .15s, background .15s; }
.st-voltar .ic{ width:18px; height:18px; transform:rotate(180deg); }
.st-voltar:hover{ color:var(--text); background:rgba(var(--primary-rgb),.08); }
.st-trilha{ display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.st-trilha::-webkit-scrollbar{ display:none; }
.st-item{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 6px; border-radius:var(--r-xs,8px);
  font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s; }
.st-item .st-tx{ display:block; max-width:18ch; overflow:hidden; text-overflow:ellipsis; }
a.st-item:hover{ color:var(--text); background:rgba(var(--primary-rgb),.08); }
.st-atual{ color:var(--text); font-weight:700; }
.st-atual .st-tx{ max-width:32ch; }
.st-sep{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--border-2); }

/* ---------- linha de progresso do módulo/exercício (fase 4 usa; pontos check / cheio / caveira) ---------- */
.linha-prog{ display:flex; align-items:center; gap:10px; min-height:32px; min-width:0; }
.lp-pontos{ display:flex; align-items:center; min-width:0; overflow-x:auto; scrollbar-width:none; }
.lp-pontos::-webkit-scrollbar{ display:none; }
.lp-pt{ flex:none; position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  color:var(--muted-2); text-decoration:none; border-radius:var(--r-xs,8px); }
.lp-pt + .lp-pt::before{ content:''; position:absolute; left:-6px; top:50%; width:12px; height:2px; background:var(--border-2); }
.lp-pt .ex-status{ display:inline-flex; }
.lp-pt .ic{ width:16px; height:16px; }
.lp-feito{ color:var(--tx-ok); }
.lp-boss{ color:var(--tx-erro); }
.lp-atual{ color:var(--tx-ouro); }
.lp-atual .ic{ fill:currentColor; }
a.lp-pt:hover{ background:rgba(var(--primary-rgb),.1); }
.lp-num{ flex:none; font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- gaveta: rodapé (Tema e Foco só no celular; Feedback e Termos sempre) ---------- */
.gv-ferr{ display:none; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.gv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 10px;
  border-radius:var(--r-sm,10px); border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.gv-btn .ic{ width:17px; height:17px; }
.gv-btn.on{ border-color:var(--primary); color:var(--tx-ouro); background:rgba(var(--primary-rgb),.12); }
.gv-btn span{ display:inline-flex; }
.gv-btn .ti-l{ display:none; }
html.tema-claro .gv-btn .ti-d{ display:none; }
html.tema-claro .gv-btn .ti-l{ display:inline-flex; }
.gv-links{ display:flex; flex-wrap:wrap; gap:2px; margin-bottom:8px; }
.gv-link{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 10px; border-radius:var(--r-sm,10px);
  border:none; background:none; color:var(--muted); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; }
.gv-link:hover{ color:var(--text); background:rgba(var(--primary-rgb),.08); }
.gv-link .ic{ width:16px; height:16px; }

/* ---------- barra inferior: só existe no celular ---------- */
.tabbar{ display:none; }
.tab-badge[hidden]{ display:none; }

/* ---------- título de página com ícone (área) ---------- */
.pagina-titulo .pt-ic{ display:inline-flex; vertical-align:-.12em; }
.pagina-titulo .pt-ic .ic{ width:1em; height:1em; color:var(--tx-ouro-2); }

/* ============================================================
   HUB — home logada em 4 cards (fase 3, roteiro 5.2)
   ============================================================ */
.hub{ display:flex; flex-direction:column; gap:14px; max-width:1100px; margin:0 auto; min-width:0; }
.hub-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; max-height:64px; }
.hub-saud{ margin:0; min-width:0; font-size:20px; line-height:1.2; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-saud b{ color:var(--text); font-weight:800; }
.hub-cab-dir{ flex:none; display:flex; align-items:center; gap:8px; }
.hub-seq{ display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 10px; border-radius:var(--r-sm,10px); border:1px solid var(--border);
  background:var(--panel-2); color:var(--muted); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.hub-seq .ic{ width:16px; height:16px; }
.hub-seq.aceso{ color:var(--tx-ouro); border-color:rgba(var(--primary-rgb),.5); }
.hub-meta{ display:inline-flex; align-items:center; gap:6px; min-height:44px; text-decoration:none; color:var(--muted); font-size:12px; font-weight:600; }
.anel{ position:relative; flex:none; width:var(--tam,56px); height:var(--tam,56px); display:grid; place-items:center; }
.anel svg{ position:absolute; inset:0; width:100%; height:100%; }
.anel circle{ fill:none; stroke-width:3.4; }
.anel-tr{ stroke:var(--track); }
.anel-pr{ stroke:var(--primary); stroke-linecap:round; transition:stroke-dasharray .4s ease; }
.anel-tx{ position:relative; font-size:12px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.hub-grade{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.hub-card{ display:flex; flex-direction:column; gap:10px; padding:16px; min-width:0; }
.hub-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hub-card-t{ margin:0; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--text); }
.hub-card-t .hc-ic{ display:inline-flex; color:var(--tx-ouro-2); }
.hub-card-t .ic{ width:18px; height:18px; }
.hub-card-link{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-10px -12px -10px 0; border-radius:var(--r-sm,10px); color:var(--muted); }
.hub-card-link .ic{ width:18px; height:18px; }
.hub-card-link:hover{ color:var(--text); background:rgba(var(--primary-rgb),.08); }
.hub-card .btn-block{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin-top:0; text-align:center; }
.hub-card-pe{ display:flex; align-items:center; justify-content:center; min-height:36px; margin-bottom:-6px; font-size:13px; font-weight:600; color:var(--tx-ouro); text-decoration:none; }
.hub-card-pe:hover{ text-decoration:underline; }
.hub-vazio-cta{ display:flex; flex-direction:column; gap:8px; }
.hub-vazio-cta .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; }
.hub-vazio-cta .btn .ic{ width:15px; height:15px; }
.hub-card .empty{ padding:8px 6px 10px; }
.hub-card .empty-art{ width:46px; height:46px; }
/* continuar: primeira linha do card Treinamentos */
.hub-continuar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"rot btn" "tit btn" "sub btn"; align-items:center; column-gap:12px; row-gap:2px;
  padding:12px 14px; border-radius:var(--r-md,14px); border:1px solid rgba(var(--primary-rgb),.45);
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.16), rgba(var(--primary-rgb),.04)); text-decoration:none; color:var(--text); }
.hub-continuar .hc-rot{ grid-area:rot; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-ouro); }
.hub-continuar .hc-rot .ic{ width:13px; height:13px; }
.hub-continuar .hc-tit{ grid-area:tit; min-width:0; font-size:15px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-continuar .hc-sub{ grid-area:sub; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hub-continuar .hc-btn{ grid-area:btn; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; }
.hub-continuar.travada{ border-style:dashed; background:var(--panel-2); }
.hub-continuar.travada .hc-rot{ color:var(--muted); }
/* trilhas (card e página #/treinos) */
.treino-lista{ display:flex; flex-direction:column; }
.treino-linha{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:52px; padding:6px 4px; border-top:1px solid var(--border); text-decoration:none; color:var(--text); }
.treino-linha:first-child{ border-top:none; }
.tl-ic{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(var(--primary-rgb),.1); color:var(--tx-ouro-2); }
.tl-ic .ic{ width:18px; height:18px; }
.tl-corpo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tl-tit{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-meta{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-bar{ display:block; height:4px; border-radius:var(--r-full,999px); background:var(--track); overflow:hidden; }
.tl-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); }
.tl-num{ font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.treino-linha.travada .tl-ic{ color:var(--muted); background:var(--panel-2); }
.treino-lista-pagina{ padding:4px 14px; }
.treino-lista-pagina .treino-linha{ min-height:60px; }
/* revisões */
.hub-rev{ display:flex; align-items:center; gap:14px; }
.hr-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.hr-tx b{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.hr-tx > span{ font-size:12.5px; color:var(--muted); }
.hr-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.hr-tag{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:var(--r-full,999px); border:1px solid var(--border-2); color:var(--muted); }
.hr-tag.atraso{ color:var(--tx-aviso); border-color:var(--warning); }
.hr-tag.erro{ color:var(--tx-erro); border-color:var(--error); }
.hub-rev-vazio .hr-ic{ flex:none; display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:var(--panel-2); color:var(--muted); }
.hub-rev-vazio .hr-ic.ok{ color:var(--tx-ok); }
.hub-rev-vazio .hr-ic .ic{ width:22px; height:22px; }
.hub-rev-vazio div b{ font-size:15px; }
.hub-rev-vazio p{ margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--muted); }
/* ranking */
.hub-rank{ display:flex; align-items:center; gap:14px; }
.hk-emb{ flex:none; display:inline-flex; }
.hk-emb .rank-emb{ width:44px; }
.hk-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.hk-num{ font-size:28px; line-height:1; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.hk-num-sm{ font-size:16px; }
.hk-tx > span{ font-size:12.5px; color:var(--muted); }
.hk-tx .hk-geral{ color:var(--text); font-weight:600; }
.hk-prox{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.hk-prox .ic{ width:14px; height:14px; color:var(--tx-ok); }
/* explorar (chips) */
.hub-chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hub-chip{ display:flex; align-items:center; gap:7px; min-height:44px; min-width:0; padding:4px 10px; border-radius:var(--r-sm,10px); border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); text-decoration:none; font-size:13px; font-weight:600; }
.hub-chip .ic{ flex:none; width:17px; height:17px; color:var(--tx-ouro-2); }
.hub-chip-tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-chip small{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hub-chip:hover,.hub-chip.destaque{ border-color:var(--primary); }
.hub-chip.destaque{ background:rgba(var(--primary-rgb),.12); }
.selo-gratis{ flex:none; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:var(--r-full,999px); color:var(--tx-ok); border:1px solid var(--success); }
/* linha Premium */
.hub-premium{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:var(--r-sm,10px); border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); text-decoration:none; font-size:13px; font-weight:600; }
.hub-premium .ic{ flex:none; width:16px; height:16px; color:var(--tx-ouro-2); }
.hub-premium span{ flex:1; min-width:0; }
/* objetivo do primeiro acesso (5.12) */
.objetivo{ max-width:560px; margin:0 auto; }
.objetivo-ops{ display:grid; grid-template-columns:1fr; gap:10px; }
.objetivo-op{ display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-areas:"ic tit" "ic sub"; column-gap:12px; align-items:center; text-align:left; min-height:72px; padding:12px 14px;
  border-radius:var(--r-md,14px); border:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; cursor:pointer; box-shadow:var(--shadow-elev); }
.objetivo-op:hover,.objetivo-op:focus-visible{ border-color:var(--primary); }
.objetivo-op:disabled{ opacity:.6; cursor:progress; }
.oo-ic{ grid-area:ic; display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:rgba(var(--primary-rgb),.12); color:var(--tx-ouro-2); }
.oo-ic .ic{ width:22px; height:22px; }
.oo-tit{ grid-area:tit; font-size:16px; font-weight:700; }
.oo-sub{ grid-area:sub; font-size:12.5px; color:var(--muted); }
/* skeleton do hub */
.hub-skel .hub-grade{ margin-top:8px; }
.hub-skel-card{ height:160px; }

/* ---------- abas (padrão cmTabs) e miolos de Progresso / Revisões / Ranking ---------- */
.hub-abas{ flex-wrap:wrap; }
.hub-abas .cm-tab{ display:inline-flex; align-items:center; min-height:44px; }
.prog-topo{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:18px; }
.prog-topo .rail-card{ margin:0; }
/* fila de revisões: cabeçalho fixo da sessão */
.rev-cab{ position:sticky; top:72px; z-index:5; display:flex; align-items:center; gap:8px; min-height:44px; margin:0 0 12px; padding:6px 12px; border-radius:var(--r-sm,10px);
  border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow-elev); font-size:14px; }
.rev-cab .rc-ic{ display:inline-flex; color:var(--tx-ouro-2); }
.rev-cab .ic{ width:16px; height:16px; }
.rc-n{ font-weight:800; font-variant-numeric:tabular-nums; }
.rc-sep{ color:var(--muted); }
.rc-pct{ font-weight:700; color:var(--tx-ouro); font-variant-numeric:tabular-nums; }
.rc-bar{ flex:1; min-width:40px; height:6px; border-radius:var(--r-full,999px); background:var(--track); overflow:hidden; }
.rc-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); transition:width .3s; }
.rc-dia{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rev-comecar{ display:flex; align-items:center; justify-content:center; min-height:48px; margin:0 0 14px; }
.rev-sessao .ex-card.rev-feita{ opacity:.72; }
.rev-sessao .ex-card.rev-feita .ex-status{ color:var(--tx-ok); }
.rev-tarde{ margin-top:16px; }
.rev-tarde summary{ display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; color:var(--muted); font-weight:600; list-style:none; }
.rev-tarde summary::-webkit-details-marker{ display:none; }
.rev-tarde summary .ic{ width:16px; height:16px; }
.rev-tarde summary b{ color:var(--text); }
.rev-zerado{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.rz-ic{ flex:none; display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; background:rgba(var(--primary-rgb),.1); color:var(--tx-ok); }
.rz-ic .ic{ width:22px; height:22px; }
/* sessão concluída (5.10) */
.sessao-fim{ text-align:center; }
.sf-ic{ display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:50%; background:rgba(var(--primary-rgb),.14); color:var(--tx-ok); margin-bottom:10px; }
.sf-ic .ic{ width:28px; height:28px; }
.sf-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 10px; }
.sf-nums div{ display:flex; flex-direction:column; gap:2px; padding:10px 6px; border-radius:var(--r-sm,10px); background:var(--panel-2); }
.sf-nums b{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.sf-nums span{ font-size:12px; color:var(--muted); }
.sf-prox{ margin:0; font-size:13px; color:var(--muted); }
.sf-acoes{ justify-content:center; flex-wrap:wrap; }
.sf-acoes .btn{ display:inline-flex; align-items:center; min-height:44px; }

/* ---------- Explorar: botão "Começar" e selo "Grátis" dentro do .area-card ---------- */
.area-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.area-link:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }
.area-acoes{ position:relative; z-index:2; margin-top:auto; padding-top:10px; }
.area-comecar{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; }
.area-comecar .ic{ width:14px; height:14px; }
.area-selo-gratis{ color:var(--tx-ok); background:var(--panel); border:1px solid var(--success); box-shadow:none; }
.grupo-titulo .selo-gratis{ margin-left:6px; vertical-align:middle; }
.ex-chip.destaque{ border-color:var(--primary); }

/* ---------- Explorar / Treinos / Progresso ---------- */
.explorar-busca{ margin:0 0 12px; max-width:100%; }
.explorar-busca input{ min-height:28px; }
.explorar-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:6px; scrollbar-width:none; }
.explorar-chips::-webkit-scrollbar{ display:none; }
.ex-chip{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 14px; border-radius:var(--r-full,999px);
  border:1px solid var(--border-2); background:var(--panel-2); color:var(--text); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.ex-chip .ic{ width:16px; height:16px; color:var(--tx-ouro-2); }
.ex-chip b{ color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.ex-chip.ativo{ border-color:var(--primary); background:rgba(var(--primary-rgb),.14); color:var(--tx-ouro); }
.explorar .grupo-sec{ content-visibility:auto; contain-intrinsic-size:auto 320px; }
.area-sob-medida{ margin-top:18px; display:flex; flex-direction:column; }
.area-sob-medida .area-ico{ color:var(--tx-ouro-2); }
.stub-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
.stub-links .btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.stub-links .btn .ic{ width:16px; height:16px; }

/* ============================================================
   HOME DO VISITANTE (fase 6, roteiro 5.8): hero curto + catálogo recolhido por categoria + linha Premium
   ============================================================ */
.home-visitante{ display:flex; flex-direction:column; gap:18px; max-width:1100px; margin:0 auto; min-width:0; }
.vis-hero{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:8px 0 4px; }
.vis-h1{ margin:0; font-family:var(--serif); font-size:clamp(26px,5vw,40px); line-height:1.12; font-weight:700; color:var(--text); max-width:18ch; }
.vis-sub{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); max-width:52ch; }
.vis-sub b{ color:var(--text); }
.vis-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; font-size:16px; margin-top:6px; }
.vis-cta .ic{ width:16px; height:16px; }
.vis-nota{ margin:0; font-size:12.5px; color:var(--muted); }
.vis-catalogo{ display:flex; flex-direction:column; min-width:0; }
.vis-cat-t{ margin:0 0 10px; font-size:17px; font-weight:700; color:var(--text); }
.vis-catalogo .explorar-chips{ margin-bottom:4px; }
.vis-catalogo .grupo-sec{ margin:0; }
/* categoria recolhida (<details>): cabeçalho de 48 px tocável; só a primeira grátis nasce aberta */
.grupo-rec > summary{ list-style:none; display:flex; align-items:center; gap:10px; min-height:48px; padding:4px 0; cursor:pointer; user-select:none; border-radius:var(--r-sm,10px); }
.grupo-rec > summary::-webkit-details-marker{ display:none; }
.grupo-rec > summary .grupo-titulo{ flex:1 1 auto; min-width:0; margin:0; padding:0; border:0; }
.grupo-rec > summary .grupo-titulo::after{ display:none; }
.grupo-rec > summary:hover .grupo-titulo{ color:var(--text); }
.grupo-n{ flex:none; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.grupo-seta{ flex:none; width:9px; height:9px; margin:0 8px 3px 2px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; }
.grupo-rec[open] > summary .grupo-seta{ transform:rotate(-135deg); margin-bottom:-3px; }
.grupo-rec > .areas-grid{ padding:4px 0 14px; }
.home-visitante .hub-premium{ margin-top:4px; }

/* ---------- "Começar" nas páginas de área e trilha (fase 5, roteiro 5.4) ---------- */
.pagina-acoes{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:-6px 0 20px; }
.area-comecar-topo,.trilha-comecar{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; text-decoration:none; }
.area-comecar-topo .ic,.trilha-comecar .ic{ width:15px; height:15px; }
.pagina-acoes-tx{ font-size:13px; color:var(--muted); min-width:0; }
.trilha-concluida{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:13px; font-weight:700; color:var(--tx-ok); }
.trilha-concluida .ic{ width:16px; height:16px; }

/* ---------- página do exercício: coluna única centrada (760 px de conteúdo + 28 px de cada lado) ---------- */
body.rota-exercicio main.conteudo{ max-width:816px; }

/* ============================================================
   CELULAR (≤ 880 px — o mesmo breakpoint da gaveta)
   ============================================================ */
@media (max-width:880px){
  /* topo compacto: uma linha de 56 px — stepper à esquerda, sequência e avatar à direita */
  .topbar{ height:56px; min-height:56px; max-height:56px; padding:0 max(12px, env(safe-area-inset-right,0px)) 0 max(12px, env(safe-area-inset-left,0px)); gap:8px; flex-wrap:nowrap; overflow:hidden; }
  .tabbar{ padding-left:max(4px, env(safe-area-inset-left,0px)); padding-right:max(4px, env(safe-area-inset-right,0px)); }
  main.conteudo{ padding-left:max(14px, env(safe-area-inset-left,0px)); padding-right:max(14px, env(safe-area-inset-right,0px)); }
  .menu-toggle{ display:none; }                 /* o "Mais" da barra inferior abre a mesma gaveta */
  .topbar .search{ display:none; }              /* a busca de áreas mora em #/explorar */
  .tema-toggle,.foco-toggle{ display:none; }    /* Tema e Foco moram na gaveta */
  .topbar-right{ flex:none; gap:8px; margin-left:auto; }
  .streak-chip{ min-height:40px; padding:6px 10px; font-size:13px; }
  .st-voltar{ margin-left:-8px; }
  .st-item .st-tx{ max-width:10ch; }
  .st-atual .st-tx{ max-width:44vw; }
  .stepper{ min-height:44px; }

  /* barra inferior fixa: 5 itens, rótulo 12 px, 56 px + safe-area */
  .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:37; display:flex; align-items:stretch;
    height:calc(56px + env(safe-area-inset-bottom,0px)); padding:0 4px env(safe-area-inset-bottom,0px);
    background:var(--panel); border-top:1px solid var(--border); box-shadow:var(--shadow-elev); }
  .tab-item{ flex:1 1 0; min-width:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px; border:none; background:none; color:var(--muted); text-decoration:none; font:inherit; font-size:12px; font-weight:600;
    line-height:1; cursor:pointer; border-radius:var(--r-sm,10px); -webkit-tap-highlight-color:transparent; }
  .tab-item:active{ transform:scale(.96); }
  .tab-ic{ position:relative; display:inline-flex; width:30px; height:26px; align-items:center; justify-content:center; border-radius:9px; transition:background .15s; }
  .tab-ic .ic{ width:22px; height:22px; stroke-width:1.7; }
  .tab-tx{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tab-item.ativo{ color:var(--tx-ouro); }
  .tab-item.ativo .tab-ic{ background:rgba(var(--primary-rgb),.14); }
  .tab-badge{ position:absolute; top:-6px; right:-10px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-full,999px);
    background:var(--primary); color:var(--code-bg); font-size:12px; font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
  .tab-badge[hidden]{ display:none; }

  /* o conteúdo e os flutuantes respeitam a barra */
  main.conteudo{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
  .fab-chat{ right:14px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  .mini-toast{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  /* na página de exercício a barra inferior dá lugar à barra de ação (fase 4); sem flutuante sobre o conteúdo */
  body.rota-exercicio .tabbar{ display:none; }
  body.rota-exercicio .fab-chat{ display:none; }
  body.rota-exercicio .mini-toast{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); }   /* acima da barra de ação (68 px) */

  /* gaveta: altura real da tela (dvh com fallback), safe-area e ferramentas no rodapé */
  .sidebar{ height:100vh; height:100dvh; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .gv-ferr{ display:grid; }

  /* hub no celular: uma coluna, cabeçalho de uma linha; cabeçalho da fila gruda logo abaixo do topo de 56 px */
  .hub{ gap:12px; }
  .hub-card{ padding:14px; }
  .rev-cab{ top:62px; }
  .area-acoes .area-comecar{ width:100%; justify-content:center; min-height:44px; }
  /* área/trilha: o botão primário ocupa a largura toda, na zona do polegar logo abaixo do título */
  .pagina-acoes{ flex-direction:column; align-items:stretch; gap:6px; }
  .area-comecar-topo,.trilha-comecar{ width:100%; min-height:48px; }
  .pagina-acoes-tx{ text-align:center; }
  /* visitante: hero centrado e CTA largo */
  .vis-hero{ align-items:center; text-align:center; padding-top:4px; }
  .vis-h1,.vis-sub{ max-width:none; }
  .vis-cta{ width:100%; }
}

/* ============================================================
   COMPACTO (≤ 480 px)
   ============================================================ */
@media (max-width:480px){
  .st-item .st-tx{ max-width:8ch; }
  .st-atual .st-tx{ max-width:40vw; }
  .tab-item{ font-size:12px; }
  .explorar-chips{ margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
  .hub-saud{ font-size:18px; }
  .hub-meta-tx{ display:none; }                 /* o anel "3/10" já diz tudo em 375 px */
  .hub-continuar{ padding:10px 12px; column-gap:10px; }
  .hub-continuar .hc-btn{ padding-left:12px; padding-right:12px; }
  .treino-linha{ min-height:48px; }
  .sf-nums{ gap:6px; }
  .sf-nums b{ font-size:16px; }
  /* visitante a 375 px: 2 colunas de áreas (elite.css cai para 1 coluna abaixo de 430 px) para a página caber em ≤ 2.400 px */
  .vis-catalogo .areas-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .vis-catalogo .area-comecar{ padding-left:8px; padding-right:8px; font-size:12.5px; }
  .vis-catalogo .explorar-chips{ margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
}

/* ============================================================
   DESKTOP (≥ 1024 px): topbar com stepper + busca + tema + Foco + sequência
   ============================================================ */
@media (min-width:1024px){
  .topo-stepper{ max-width:46%; }
  .topbar .search{ flex:1 1 260px; }
  /* hub: grade 2×2 dos 4 cards abaixo do cabeçalho, largura máxima 1100 px (a fase 5 só vai polir) */
  .hub{ gap:18px; }
  .hub-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .hub-card{ padding:18px 20px; }
  .hub-saud{ font-size:24px; }
  .hub-chips{ grid-template-columns:repeat(3,1fr); }
  .hub-skel-card{ height:200px; }
  .objetivo-ops{ grid-template-columns:1fr 1fr; }
  .prog-topo{ grid-template-columns:1fr 1fr; }
  .rev-cab{ top:80px; }

  /* ---- fase 5 (5.7): grade 2×2 com alturas equilibradas — o CTA/rodapé de cada card desce para a base ---- */
  .hub-grade{ align-items:stretch; }
  .hub-card > .btn-block:last-child,.hub-card > .hub-card-pe:last-child,.hub-card > .hub-vazio-cta:last-child{ margin-top:auto; }
  /* Explorar e catálogo do visitante em 3-4 colunas (220 px mínimos: 3 colunas a 1024, 4 a 1366) */
  .explorar .areas-grid,.vis-catalogo .areas-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
  .home-visitante{ gap:24px; }
  .vis-hero{ padding:16px 0 8px; }
  .vis-sub{ font-size:17px; }
  /* página do exercício em DUAS colunas: mini-aula (details.licao-teoria) fixa à esquerda, o resto à direita.
     Só CSS (o markup de Views.exercicio e o licao.js não mudam): main.conteudo vira grid quando tem a mini-aula
     como filha direta; os demais filhos diretos caem na coluna 2. Sem mini-aula (ou em revisão com o trilho,
     .ex-wrap.com-fila), continua coluna única. Navegador sem :has() ignora a regra e fica na coluna única. */
  body.rota-exercicio main.conteudo:has(> .ex-wrap.com-fila){ max-width:1180px; }
  body.rota-exercicio main.conteudo:has(> .licao-teoria){ max-width:1180px; display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,2fr);
    column-gap:32px; row-gap:0; align-items:start; align-content:start; justify-content:center; }
  body.rota-exercicio main.conteudo:has(> .licao-teoria) > *{ grid-column:2; min-width:0; }
  body.rota-exercicio main.conteudo:has(> .licao-teoria) > .licao-teoria{ grid-column:1; grid-row:1 / span 64; position:sticky; top:84px; align-self:start; margin:0; }
  body.rota-exercicio main.conteudo:has(> .licao-teoria) > .licao-teoria .lt-corpo{ max-height:calc(100vh - 230px); }
  body.rota-exercicio main.conteudo:has(> .licao-teoria) > .licao-teoria .lt-corpo.recolhido{ max-height:min(600px, calc(100vh - 230px)); }
}

@media (prefers-reduced-motion:reduce){
  .tab-item,.tab-ic,.st-item,.st-voltar,.anel-pr,.rc-bar i{ transition:none; }
  .tab-item:active{ transform:none; }
}