/* A barra única (12/10/2026): a mesma da agenda (acoes-segundo-turno/app: o <style> do index.html e o marca.css da
   Natália, no guia do Comitê), aqui no site antigo (/completo/: Painel, Moderação…). Montada por barra.js. No celular,
   a barra de abas branca embaixo (Início, Mapa, Painel, Ajuda, Conta); no computador, a barra vermelha de 64 px no alto,
   com a marca BORA LULA, Início, Mapa e Painel à esquerda, e Ajuda e a conta à direita. A aba da tela aberta fica em
   vermelho, sem sublinhado (celular; pedido de 13/10/2026), ou com o sublinhado grosso amarelo colado na borda de baixo
   (computador). No celular, as abas seguem o componente Navigation bar do Figma do Bora Lula (Redesign, nó 54:241; pedido
   de 13/10/2026): 64 px de altura (10 em cima, 8 embaixo), ícone Lucide de 20 px (o Figma tem 24; pedido de 13/10/2026) a 4 px do rótulo (Montserrat 700 de
   12 px, entrelinha 1), 8 px de respiro nos lados; as inativas em grafite a 60%, a ativa com o ícone em grafite e o
   rótulo em vermelho. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fontes/montserrat/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fontes/montserrat/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fontes/montserrat/montserrat-latin-800-normal.woff2") format("woff2"); }

/* --bu-nav: os 64 px das abas, mais 1 px da borda e a área segura */
:root { --bu-nav: calc(65px + env(safe-area-inset-bottom, 0px)); --bu-cab: 64px; --bu-margem: 64px; }
.topo { display: block; margin: 0; padding: 0; }
/* a barra acima do conteúdo: o topo que a guarda é a camada dela (com a faixa de fotos, estilo.css e inicio-novo.css o
   punham em 5 e 6, e os números grudados do painel, em 20, cobriam o menu da conta). 50 passa o conteúdo (até 30) e
   fica abaixo da dica dos gráficos e do aviso de instalar (60) e do mapa em tela cheia (80). O :has(#nav) ganha das
   regras "body:has(…) .topo" */
.topo:has(#nav) { position: relative; z-index: 50; }

#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: var(--bu-nav);
  padding-bottom: env(safe-area-inset-bottom, 0px); background: #FFFFFF; border-top: 1px solid #D9D4CC;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; line-height: 1.2;
}
#nav .barra { display: flex; align-items: stretch; max-width: 560px; height: 100%; margin: 0 auto; padding: 0 8px; }
/* a marca só aparece no computador; com "#nav .barra-marca" o "#nav .barra > a" abaixo ganhava e ela virava uma aba
   vazia no celular, empurrando as outras para a direita */
#nav .barra > .barra-marca { display: none; }
#nav .barra > a, #nav .conta > a, #nav .conta summary {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 10px 0 8px; color: rgb(42 42 42 / .6); font-size: 0.75rem; font-weight: 700; line-height: 1; text-decoration: none;
  cursor: pointer; list-style: none;
}
#nav .barra > a > span:first-child { display: flex; line-height: 1; }
#nav .barra > a > span:first-child svg { width: 20px; height: 20px; }
#nav .barra > a[aria-current="page"] { color: #C3090A; }
#nav .barra > a[aria-current="page"] > span:first-child { color: #2A2A2A; }
#nav a:focus-visible, #nav summary:focus-visible { outline: none; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #2A2A2A; border-radius: 8px; }
#nav .so-desk { display: none; }

/* a conta: a bolinha diz se a pessoa entrou (o ícone circle-user: não; com a inicial: sim) */
#nav .conta { flex: 1; display: flex; position: relative; min-width: 0; }
#nav .conta-menu { flex: 1; display: flex; min-width: 0; }
#nav .conta summary::-webkit-details-marker { display: none; }
#nav .bolinha {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 2px solid currentColor; border-radius: 50%; font: 800 13px/1 "Montserrat", system-ui, sans-serif;
}
#nav .bolinha:not(.logado) { border: 0; }
#nav .bolinha svg { width: 100%; height: 100%; }
#nav .bolinha.logado { background: #C3090A; border-color: #C3090A; color: #FFFFFF; }
/* a Ajuda junto da conta só aparece no celular (ver o bloco do celular) */
#nav .conta > a.conta-ajuda, #conta .opcoes a.conta-ajuda-menu { display: none; }
#nav .seta { display: none; }
#nav .conta-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* o menu da conta: camada branca, raio 8, sombra 2, itens de 44 px; no celular abre para cima */
#conta .opcoes {
  position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 1001; min-width: 240px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; padding: 8px; background: #FFFFFF; border: 1px solid #D9D4CC; border-radius: 8px;
  box-shadow: 0 6px 16px rgb(42 42 42 / .14);
}
#conta .opcoes a, #conta .opcoes button {
  display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 4px;
  background: none; color: #2A2A2A; font: 500 0.875rem/1.2 "Montserrat", system-ui, sans-serif; text-align: left;
  text-decoration: none; cursor: pointer;
}
#conta .opcoes a:hover, #conta .opcoes button:hover { background: #F3F1EE; color: #2A2A2A; }
#conta .opcoes .contador { margin-left: 8px; background: #FBCE02; color: #2A2A2A; font-weight: 800; }
#conta .opcoes .contador[hidden] { display: none; }
#conta .conta-quem { display: flex; flex-direction: column; min-width: 0; margin-bottom: 6px; padding: 8px 12px 10px; border-bottom: 1px solid #D9D4CC; }
#conta .conta-quem b { color: #2A2A2A; font-size: 0.875rem; font-weight: 700; }
#conta .conta-quem span { overflow: hidden; color: #5E5E5E; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
#conta .opcoes .conta-sair { margin-top: 6px; border-top: 1px solid #D9D4CC; border-radius: 0 0 4px 4px; font-weight: 700; }

@media (max-width: 899px) {
  body { padding-bottom: var(--bu-nav); }
  .aviso-app { bottom: calc(var(--bu-nav) + 8px); }

  /* No celular, a conta sai da barra de abas e fica fixa no alto, numa barra transparente (Figma do Bora Lula, Redesign,
     tela "360 – Mobile", nó 137:1122; pedido de 13/10/2026): 88 px de altura, 20 px das bordas, a conta à direita. Sem
     login, o botão "Entrar" em pílula vermelha (44 px, 24 px dos lados, Montserrat 700 de 16 px); com login, a bolinha
     com a inicial, do mesmo tamanho. A barra deixa passar o toque (só a conta o recebe), e o menu abre para baixo. */
  #nav .conta {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001; display: flex; justify-content: flex-end; align-items: center;
    height: calc(88px + env(safe-area-inset-top, 0px)); padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 20px;
    background: transparent; pointer-events: none;
  }
  #nav .conta > a, #nav .conta-menu { flex: none; pointer-events: auto; }
  #nav .conta > a, #nav .conta summary {
    flex: none; flex-direction: row; gap: 0; height: 44px; padding: 0 24px; border-radius: 22px; background: #C3090A;
    color: #FFFFFF; font-size: 1rem; font-weight: 700; line-height: 1;
  }
  #nav .conta > a .bolinha { display: none; }
  #nav .conta summary { width: 44px; padding: 0; border-radius: 50%; }
  #nav .conta summary .bolinha { width: 44px; height: 44px; border: 0; font-size: 16px; }
  #nav .conta summary .so-cel { display: none; }
  #nav .conta a:focus-visible, #nav .conta summary:focus-visible { border-radius: 22px; }
  #conta .opcoes { top: calc(100% - 12px); bottom: auto; right: 20px; }
  /* a Ajuda sai da barra de abas (ficam Início, Mapa, Salvos e Painel): sem login, um botão redondo de 44 px ao lado do
     Entrar, branco para se ler sobre foto e sobre o branco; com login, no menu da conta */
  #nav .barra > a.ajuda { display: none; }
  #nav .conta { gap: 8px; }
  #nav .conta > a.conta-ajuda {
    display: flex; width: 44px; padding: 0; border-radius: 50%; background: #FFFFFF; color: #2A2A2A;
    box-shadow: 0 1px 4px rgb(42 42 42 / .16);
  }
  #nav .conta > a.conta-ajuda svg { display: block; width: 24px; height: 24px; }
  #conta .opcoes a.conta-ajuda-menu { display: flex; }
  /* sem foto no alto, o conteúdo começa abaixo da barra da conta (com foto, como no painel, ela fica por cima, como no
     Figma); 68 px mais a margem de cima do título, que já passa dos 88 px da barra */
  body:not(.rota-painel):not(:has(.fotos-topo)) main { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }
}

@media (min-width: 900px) {
  #nav { position: static; height: var(--bu-cab); padding: 0; background: #C3090A; border: 0; }
  #nav .barra { justify-content: flex-start; align-items: center; gap: 4px; max-width: none; padding: 0 var(--bu-margem); }
  #nav .barra > .barra-marca { display: inline-flex; flex: none; align-items: center; height: var(--bu-cab); margin-right: 16px; padding: 0 8px 0 0; }
  #nav .barra-marca img { display: block; width: auto; height: 36px; }
  #nav .barra > a:not(.barra-marca), #nav .conta > a, #nav .conta summary {
    flex: 0 0 auto; flex-direction: row; gap: 7px; height: var(--bu-cab); padding: 0 14px; color: #FFFFFF; font-size: 0.875rem;
  }
  #nav .barra > a > span:first-child svg { width: 19px; height: 19px; }
  #nav .barra > a:not(.barra-marca):hover, #nav .conta > a:hover, #nav .conta summary:hover,
  #nav .conta-menu[open] summary { background: rgb(255 255 255 / .14); }
  #nav .barra > a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -4px 0 #FBCE02; }
  #nav .barra > a[aria-current="page"] > span:first-child { color: inherit; }
  #nav a:focus-visible, #nav summary:focus-visible { box-shadow: 0 0 0 3px #FBCE02; border-radius: 0; }
  #nav .so-desk { display: inline; }
  #nav .so-cel { display: none; }
  /* à direita: o Colabore (logo antes da Ajuda) leva o resto do espaço; no celular ele é a 5ª aba */
  #nav .colabore { margin-left: auto; }
  #nav .conta, #nav .conta-menu { flex: 0 0 auto; }
  #nav .conta > a, #nav .conta summary { gap: 10px; padding: 0 12px; }
  #nav .conta summary { padding-right: 8px; }
  #nav .bolinha { width: 32px; height: 32px; font-size: 15px; }
  #nav .bolinha svg { stroke-width: 1.5; }   /* o círculo do ícone com o traço de 2 px de antes */
  /* sobre o vermelho, a bolinha de quem entrou é amarela com a letra grafite */
  #nav .bolinha.logado { background: #FBCE02; border-color: #FBCE02; color: #2A2A2A; }
  #nav .seta { display: block; width: 16px; height: 16px; }
  #nav .seta svg { display: block; width: 16px; height: 16px; }
  #nav .conta-email { max-width: 220px; }
  #conta .opcoes { top: calc(100% - 4px); bottom: auto; right: 0; }
}
/* entre 900 e 1199 px fica só a bolinha (o e-mail continua no title e no menu); até 1099, a barra mais justa */
@media (min-width: 900px) and (max-width: 1199px) { #nav .conta-email { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { #nav .barra-marca img { height: 32px; } #nav .barra > a:not(.barra-marca) { padding: 0 10px; } }