/* Navegação agrupada, menu da conta e a tela Guia. Usa só os tokens do app. */
.lateral { gap: 12px; }
.lateral .nav { gap: 14px; }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
.nav-titulo { margin: 0; padding: 0 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lateral-fraco); opacity: .75; }
.lateral .nav-grupo a { min-height: 38px; font-size: 14.5px; }
.lateral .rodape-lateral { gap: 0; padding-top: 10px; }

.conta-wrap { position: relative; }
.botao-conta { width: 100%; justify-content: flex-start; }
.botao-conta .botao-conta-nome { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-conta { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--lateral-fundo); border: 1px solid rgba(245, 240, 232, .22); border-radius: var(--raio-md); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.menu-conta[hidden] { display: none; }
.menu-conta-cab { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(245, 240, 232, .18); color: var(--lateral-texto); min-width: 0; }
.menu-conta-cab .fraco { color: var(--lateral-fraco); }
.menu-conta a, .menu-conta button { min-height: 40px; }

.faixa-guia { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px clamp(16px, 3vw, 32px); background: var(--destaque-suave); color: var(--texto); border-bottom: 1px solid var(--linha); }
.faixa-guia > .icone { color: var(--destaque); width: 22px; height: 22px; }
.faixa-guia > div { flex: 1 1 260px; font-size: 14.5px; }
.faixa-guia .btn { min-height: 38px; }

.guia-caminho { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.guia-caminho li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--linha); border-radius: var(--raio-md); background: var(--fundo); }
.guia-caminho p { margin: 4px 0 6px; }
.guia-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque); color: var(--marfim, #fff); font-weight: 800; font-size: 14px; }

.guia-checks, .guia-telas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.guia-checks li, .guia-telas li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--linha); }
.guia-checks li:first-child, .guia-telas li:first-child { border-top: 0; }
.guia-checks li > div, .guia-telas li > div { flex: 1; min-width: 0; }
.guia-checks p, .guia-telas p { margin: 3px 0 0; }
.guia-marca { flex: none; color: var(--texto-tenue); }
.guia-checks li.feito .guia-marca { color: var(--ok); }
.guia-checks li.atencao .guia-marca { color: var(--alerta); }
.guia-ico { flex: none; width: 40px; height: 40px; border-radius: var(--raio-md); display: grid; place-items: center; background: var(--destaque-suave); color: var(--destaque); }
@media (max-width: 640px) {
  .guia-checks li, .guia-telas li { flex-wrap: wrap; }
  .guia-checks li .btn, .guia-telas li .btn { margin-left: 0; }
}
.lateral .nav { margin-top: 8px; }