/* Navegação em 5 áreas (Início, Treino, Simulado, Progresso, Perfil), sub-abas por área
   e destaques de "Apoie com R$1" e "Seja um parceiro". Carregado depois de style.css. */

/* Barra lateral (computador) */
.sidebar .side-nav{gap:4px}
.sidebar .side-nav a{font-size:15px;font-weight:600;min-height:46px}
.sidebar .side-nav a .error-count{margin-left:auto}
.side-cta{display:grid;gap:8px;margin-top:18px}
.side-cta-card{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:12px;text-decoration:none;line-height:1.2;transition:background .16s,transform .12s}
.side-cta-card .nav-icon{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-cta-card span{display:grid;gap:2px;min-width:0}
.side-cta-card b{font:800 14px/1.2 Manrope,sans-serif}
.side-cta-card small{font-size:12px;font-weight:500;opacity:.85}
.sidebar .side-cta .donate-link{margin:0;background:#f4d632;border:1.5px solid #c9a800;color:#3d3200;box-shadow:0 2px 0 #b7950f}
.sidebar .side-cta .donate-link .nav-icon{fill:#c72b3b;stroke:#c72b3b}
.sidebar .side-cta .donate-link:hover{background:#ffe55a;color:#3d3200}
.sidebar .side-cta .partner-link{margin:0;background:var(--primary);border:1.5px solid var(--primary);color:#fff;box-shadow:0 2px 0 #0c4f83}
.sidebar .side-cta .partner-link:hover{background:#0c4f83;color:#fff}
.side-cta-card:active{transform:translateY(1px)}
.side-cta-card:focus-visible,.area-tabs a:focus-visible,.support-card:focus-visible,.home-continue:focus-visible,.home-area a:focus-visible{outline:3px solid #f4d632;outline-offset:2px}

/* Sub-abas da área (todos os tamanhos) */
.area-tabs{display:flex;gap:8px;margin:0 0 20px;padding:0 0 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.area-tabs[hidden]{display:none}
.area-tabs::-webkit-scrollbar{display:none}
.area-tabs a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid #d4e6f1;border-radius:999px;background:#fff;color:#455869;font:700 14px/1 'DM Sans',sans-serif;text-decoration:none;white-space:nowrap}
.area-tabs a:hover{border-color:var(--primary);color:var(--primary)}
.area-tabs a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.area-tabs .error-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red,#c72b3b);color:#fff;font-size:11px;line-height:20px;text-align:center}

/* Tela Início */
.home-hub{display:grid;gap:20px}
.home-continue{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:16px 22px;border-radius:18px;background:var(--primary);color:#fff;text-decoration:none;box-shadow:0 4px 0 #0c4f83;transition:transform .12s,box-shadow .12s}
.home-continue:active{transform:translateY(3px);box-shadow:0 1px 0 #0c4f83}
.home-continue span:first-child{display:grid;gap:4px}
.home-continue small{font-size:12px;font-weight:700;letter-spacing:.08em;color:#f4d632}
.home-continue b{font:800 22px/1.15 Manrope,sans-serif}
.home-continue-arrow{font-size:26px;font-weight:800}
.home-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.home-area{padding:18px 18px 10px}
.home-area h2{margin:0 0 8px;font-size:17px}
.home-area ul{list-style:none;margin:0;padding:0}
.home-area li+li{border-top:1px solid var(--line)}
.home-area a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;color:#10212f;font-weight:600;text-decoration:none}
.home-area a:hover{color:var(--primary)}
.home-area a span{color:var(--primary)}

/* Destaques de apoio e parceria (Início e Perfil) */
.support-highlights{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:20px}
.support-highlights[hidden],.account-panel[hidden]{display:none}
.support-card{display:flex;align-items:center;gap:14px;min-height:84px;padding:16px 18px;border-radius:16px;text-decoration:none;transition:transform .12s,box-shadow .12s}
.support-card .nav-icon{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.support-card-copy{display:grid;gap:4px;min-width:0;flex:1}
.support-card b{font:800 17px/1.2 Manrope,sans-serif}
.support-card small{font-size:14px;line-height:1.35}
.support-card-go{flex:none;font-weight:800;font-size:14px;white-space:nowrap}
.support-card--donate{background:#f4d632;border:1.5px solid #c9a800;color:#3d3200;box-shadow:0 3px 0 #b7950f}
.support-card--donate .nav-icon{fill:#c72b3b;stroke:#c72b3b}
.support-card--partner{background:var(--primary);border:1.5px solid var(--primary);color:#fff;box-shadow:0 3px 0 #0c4f83}
.support-card--partner small{color:#e7f2fa}
.support-card:active{transform:translateY(2px);box-shadow:none}

/* Conta no celular (no computador, o "Sair" fica no topo) */
.account-panel{display:none}

@media(max-width:1024px){
  .mobile-tabbar .tab{font-size:11px;font-weight:600;min-height:56px}
  .mobile-tabbar .tab>span{font-size:11px;line-height:1.2}
  .mobile-tabbar .tab.active{font-weight:800}
  .area-tabs{margin:-4px -14px 16px;padding:0 14px 2px}
  .home-continue b{font-size:20px}
  .account-panel:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
  .account-panel p{margin:0;font-size:13px;color:var(--muted)}
  .account-panel .btn{min-height:48px}
  /* Questão: botões maiores e "Conferir"/"Próxima" sempre no mesmo lugar, fixos acima da barra de baixo. */
  body[data-view=treino] .actions{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin-inline:-14px;padding:10px 14px;background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
  body[data-view=treino] .actions .btn{min-height:52px;font-size:16px}
  body[data-view=treino] .actions #confirm,body[data-view=treino] .actions #next{flex:1 1 100%;order:-1}
  body[data-view=treino] .actions .btn.text,body[data-view=treino] .actions .btn.secondary{flex:1 1 0}
  /* Na tela da questão, a faixa de R$1 dá lugar ao botão fixo; nas outras telas ela continua. */
  body[data-view=treino] .mobile-donate-bar{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .side-cta-card,.home-continue,.support-card{transition:none}
}


/* Barra lateral agrupada (computador) */
.sidebar .side-nav{display:flex;flex-direction:column;gap:6px}
.grp{display:grid;gap:4px}
.grp+.grp{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ghead{display:flex;align-items:center;gap:8px;padding:2px 8px 4px;font:800 11px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ghead .nav-icon{width:16px;height:16px;stroke-width:2}
.nb{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 12px;border-radius:10px;background:var(--btn,#f1f5f9);border:1px solid var(--btn-b,#dbe3eb);box-shadow:0 1px 0 #cfd8e2;font:600 13px 'DM Sans',sans-serif;color:var(--ink,#24313d);text-decoration:none;transition:all .12s}
.nb:hover{background:#fff;border-color:#b9c5d1}
.nb.active,.nb.on{background:var(--primary);color:#fff;border-color:var(--primary-d,#0c4f83);box-shadow:0 2px 0 var(--primary-d,#0c4f83)}
.nb .nav-icon{width:16px;height:16px;flex:none}
.nb.top{min-height:40px;font-weight:700}
.badge{margin-left:auto;padding:1px 7px;border-radius:999px;background:#e23b3b;color:#fff;font:800 11px Manrope,sans-serif}
.nb.active .badge,.nb.on .badge{background:#fff;color:#c02b2b}
/* Celular: atalhos táteis confortáveis em botões */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:14px;background:#fff;border:1.5px solid var(--btn-b,#dbe3eb);box-shadow:0 2px 0 #cfd8e2;font:700 14px/1.2 'DM Sans',sans-serif;color:var(--ink,#24313d);text-decoration:none;transition:border-color .12s}
.tile:hover{border-color:var(--primary)}

/* No computador, os botões das 13 telas já estão na barra lateral: sai o painel em 4 colunas */
@media(min-width:1025px){
  .home-all, .home-grid{display:none !important}
}

/* Destaque do Pódio no topo da barra lateral no PC */
.nb.podio-highlight{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1.5px solid #f59e0b;color:#78350f;font-weight:700;box-shadow:0 2px 4px rgba(245,158,11,.15);min-height:42px}
.nb.podio-highlight .nav-icon{stroke:#d97706;color:#d97706}
.nb.podio-highlight:hover{background:#fef3c7;border-color:#d97706;color:#78350f}
.nb.podio-highlight.active,.nb.podio-highlight.on{background:#d97706;border-color:#b45309;color:#fff;box-shadow:0 2px 0 #92400e}
.nb.podio-highlight.active .nav-icon,.nb.podio-highlight.on .nav-icon{stroke:#fff;color:#fff}
.nb.podio-highlight.active .podio-pill,.nb.podio-highlight.on .podio-pill{background:#fff;color:#92400e}
.podio-pill{margin-left:auto;padding:1px 7px;border-radius:999px;background:#f59e0b;color:#fff;font:800 11px Manrope,sans-serif;letter-spacing:.02em}