/* e-PGM · navegação (reforma, Fase 2): barra lateral, abas da seção, paleta
 * Ctrl+K e o painel Hoje. Camada "componentes"; só tokens. */

@layer componentes {

/* ---------- moldura: barra lateral + área principal ---------- */

body { --largura-barra: 232px; }
.moldura:has(> .barra-lateral:is([data-modo="compacta"], [data-modo="sobreposta"])) { --largura-barra: 64px; }
.moldura { display: grid; grid-template-columns: var(--largura-barra) minmax(0, 1fr); min-height: 100vh; }
/* Só o recolher pelo botão anima; a mudança de tamanho da tela é imediata. */
body.barra-animando .moldura { transition: grid-template-columns var(--t-2) var(--curva); }
.moldura-principal { min-width: 0; display: flex; flex-direction: column; }
body.sem-sessao .moldura { visibility: hidden; }

.barra-lateral {
  position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--e-2);
  height: 100vh; min-width: 0; padding: var(--e-3) var(--e-2); overflow: hidden auto;
  border-right: 1px solid var(--linha); background: var(--vidro-fundo);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.barra-cabeca { display: flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-1); }
.barra-marca { display: inline-flex; flex: 1 1 auto; align-items: center; gap: var(--e-2); min-width: 0; color: var(--marca); font-size: var(--fs-4); font-weight: 600; white-space: nowrap; }
.barra-marca img { flex: none; width: 28px; height: 28px; }
.barra-recolher, .barra-rodape button, .barra-rodape summary {
  display: inline-flex; align-items: center; gap: var(--e-3); min-height: 36px; padding: var(--e-2) var(--e-3);
  border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-3);
  cursor: pointer; text-align: left;
}
.barra-recolher { flex: none; justify-content: center; width: 36px; padding: 0; }
.barra-recolher:hover, .barra-rodape button:hover, .barra-rodape summary:hover { background: var(--neutro-suave); color: var(--texto); }

.barra-secoes { display: grid; gap: 2px; }
.barra-secao {
  position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 38px; padding: var(--e-2) var(--e-3);
  border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-3);
  font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-1) var(--curva), color var(--t-1) var(--curva);
}
.barra-secao:hover { background: var(--neutro-suave); color: var(--texto); }
.barra-secao.ativa { background: var(--acao-suave); color: var(--marca); font-weight: 600; }
.barra-secao.ativa::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--raio-pilula); background: var(--marca); }
.barra-secao:focus-visible, .barra-rodape :is(button, summary):focus-visible, .aba-secao:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.barra-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.barra-secao .selo { margin-left: auto; }

.barra-rodape { display: grid; gap: 2px; margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--linha); }
.barra-rodape .menu-administracao[open] > summary { background: var(--neutro-suave); color: var(--texto); }
.barra-rodape .menu-administracao.ativo > summary { color: var(--marca); }
.barra-rodape .menu-administracao > summary { display: flex; list-style: none; }
.barra-rodape .menu-administracao > summary[aria-expanded="true"] { background: var(--neutro-suave); color: var(--texto); }
.barra-rodape .menu-administracao > summary::-webkit-details-marker { display: none; }
.menu-administracao-itens { display: grid; gap: 2px; padding: var(--e-1) 0 var(--e-1) var(--e-6); }
.barra-rodape .notificacao-topo span:not(.barra-rotulo) {
  margin-left: auto; min-width: 20px; padding: 0 var(--e-1); border-radius: var(--raio-pilula);
  background: var(--neutro-medio); color: var(--texto); font-size: var(--fs-1); text-align: center; font-variant-numeric: tabular-nums;
}
.barra-rodape .notificacao-topo.tem-notificacao span:not(.barra-rotulo) { background: var(--vencido); color: var(--texto-sobre-estado); }
.barra-rodape .notificacao-topo.ativa { color: var(--marca); background: var(--acao-suave); }
.barra-rodape .tema-topo.segmentado { justify-self: start; margin: var(--e-1) var(--e-2); }
.barra-usuario { display: flex; align-items: center; gap: var(--e-2); min-width: 0; padding: var(--e-2) var(--e-3); }
.barra-usuario-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--texto); font-size: var(--fs-2); font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.barra-usuario-nome small { display: block; color: var(--texto-3); font-size: var(--fs-1); font-weight: 400; }
.barra-usuario .barra-sair { flex: none; width: 32px; min-height: 32px; justify-content: center; padding: 0; }

/* Conta e tema da barra com os ícones: escondidos na barra inteira. */
.barra-rodape :is(.barra-conta, .tema-compacto) { display: none; }
.barra-usuario-icone { display: inline-flex; flex: none; color: var(--texto-2); }

/* Barra só com os ícones (ajustes de 25/10, item 7): um modo só, data-modo="compacta",
 * que o navegacao.js põe no clique de recolher e na janela de 641 a 1100 px. O nome
 * fica na dica; o rodapé, em coluna e centralizado, com botões de 40 x 40 px; a conta,
 * o tema e a Administração abrem em menus ao lado da barra. */
.barra-lateral[data-modo="compacta"] :is(.barra-rotulo, .barra-marca strong, .barra-usuario-nome, .barra-usuario-icone,
  .barra-usuario .barra-sair, .menu-administracao-itens, .barra-rodape .tema-topo) { display: none; }
.barra-lateral[data-modo="compacta"] .barra-cabeca { flex-direction: column; }
.barra-lateral[data-modo="compacta"] .barra-secao { justify-content: center; min-height: 40px; padding: 0; }
.barra-lateral[data-modo="compacta"] .barra-rodape { justify-items: center; }
.barra-lateral[data-modo="compacta"] .barra-rodape :is(button, summary) {
  justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0;
}
.barra-lateral[data-modo="compacta"] .menu-administracao { width: 40px; }
.barra-lateral[data-modo="compacta"] .menu-administracao > summary { width: 100%; }
.barra-lateral[data-modo="compacta"] .barra-usuario { padding: 0; }
.barra-lateral[data-modo="compacta"] :is(.barra-conta, .barra-rodape .tema-compacto) { display: inline-flex; }
/* Selos: 16 px de altura, na borda direita da barra, ao lado do ícone (cobrem no
 * máximo 4 px dele) e com um anel da cor da barra. Os itens das seções têm 48 px
 * e os do rodapé, 40 px: a borda é a mesma, encostada na linha da barra. */
.barra-lateral[data-modo="compacta"] :is(.barra-secao .selo, .notificacao-topo span:not(.barra-rotulo)) {
  position: absolute; top: 4px; right: -7px; box-sizing: border-box; min-width: 16px; height: 16px; margin: 0;
  padding: 0 3px; border-radius: var(--raio-pilula); font-size: var(--fs-1); line-height: 16px; letter-spacing: -0.02em;
  text-align: center; box-shadow: 0 0 0 2px var(--superficie);
}
.barra-lateral[data-modo="compacta"] .notificacao-topo span:not(.barra-rotulo) { right: -11px; }
/* "99+" não cabe entre o ícone e a borda: sobe 6 px, até o canto do ícone, e entra
 * nele no máximo 4 px na altura. */
.barra-lateral[data-modo="compacta"] :is(.barra-secao .selo, .notificacao-topo span:not(.barra-rotulo)).selo-largo { top: -2px; padding: 0 2px; letter-spacing: -0.04em; }
.barra-lateral[data-modo="compacta"] .barra-rodape .notificacao-topo { position: relative; }
.barra-lateral[data-modo="compacta"] .barra-rodape .notificacao-topo:not(.tem-notificacao) span:not(.barra-rotulo) { display: none; }

/* Administração com a barra só nos ícones: menu ao lado da barra (navegacao.js). */
.menu-barra { min-width: 200px; gap: 2px; }
.menu-barra button {
  display: flex; align-items: center; gap: var(--e-3); min-height: 34px; padding: 0 var(--e-3);
  border: 0; border-radius: var(--raio-item); background: transparent; color: var(--texto); font: inherit; font-size: var(--fs-3);
  text-align: left; white-space: nowrap; cursor: pointer;
}
.menu-barra button .icone { color: var(--texto-2); }
.menu-barra button:hover { background: var(--neutro-suave); }
.menu-barra button:focus-visible { outline: none; background: var(--neutro-suave); box-shadow: inset 0 0 0 2px var(--acao-linha); }
.menu-barra button[aria-checked="true"] { font-weight: 600; }
.menu-barra button[aria-checked="true"] .icone { color: var(--link); }
.menu-barra-cabeca { display: grid; gap: 2px; margin: 0 0 var(--e-1); padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); }
.menu-barra-cabeca strong { color: var(--texto); font-size: var(--fs-3); font-weight: 600; }
.menu-barra-cabeca small { color: var(--texto-3); font-size: var(--fs-1); }

/* ---------- topo: título da seção, abas e ações ---------- */

.moldura-principal > .topo {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  min-height: 56px; padding: var(--e-2) var(--e-5); border-bottom: 1px solid var(--linha); background: var(--vidro-fundo);
  color: var(--texto); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.topo-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-5); min-width: 0; }
.topo-titulo h1 { margin: 0; color: var(--texto); font-size: var(--fs-5); font-weight: 600; letter-spacing: -0.01em; }
.abas-secao { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.aba-secao {
  min-height: 32px; padding: var(--e-1) var(--e-3); border: 0; border-radius: var(--raio-pilula); background: transparent;
  color: var(--texto-2); font: inherit; font-size: var(--fs-2); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.aba-secao:hover { background: var(--neutro-suave); color: var(--texto); }
.aba-secao.ativa { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-1); }
.topo-acoes { display: flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.busca-gatilho {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 34px; min-width: 240px; padding: 0 var(--e-3);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto-3);
  font: inherit; font-size: var(--fs-2); cursor: pointer;
}
.busca-gatilho:hover { border-color: var(--acao); color: var(--texto-2); }
.busca-gatilho kbd { margin-left: auto; padding: 0 var(--e-1); border: 1px solid var(--linha); border-radius: var(--raio-1); font-size: var(--fs-1); }
.escopo-global.segmentado { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--raio-2); background: var(--neutro-suave); }
.escopo-global button { min-height: 30px; padding: 0 var(--e-3); border: 0; border-radius: var(--raio-1); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-2); cursor: pointer; }
.escopo-global button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-1); }
/* O main tem margem automática (centraliza nas telas muito largas); na coluna
 * flexível isso o deixaria do tamanho do conteúdo. Ocupa a largura toda. */
.moldura-principal > #conteudo { flex: 1 1 auto; box-sizing: border-box; width: 100%; }
/* Interruptor do portal externo (só o Procurador-Geral): luz verde no ar; âmbar desligado. */
.topo-acoes .portal-topo {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 34px; padding: 0 var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: var(--fs-2); white-space: nowrap; cursor: pointer;
}
.topo-acoes .portal-topo:hover { border-color: var(--linha-forte); color: var(--texto); }
.topo-acoes .portal-topo[hidden] { display: none; }
.topo-acoes .portal-topo.desligado { border-color: var(--atencao-linha); background: var(--atencao-suave); color: var(--atencao); }
.topo-acoes .portal-topo:disabled { opacity: .6; cursor: progress; }
.busca-gatilho:focus-visible, .escopo-global button:focus-visible, .topo-acoes .portal-topo:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* ---------- paleta Ctrl+K ---------- */

dialog.paleta {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, 80vh); margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--raio-3); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-3); overflow: hidden;
}
dialog.paleta::backdrop { background: var(--veu); }
.paleta-busca { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); color: var(--texto-3); }
.paleta-busca input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: var(--fs-4); outline: none; }
.paleta-busca kbd, .paleta-rodape kbd { padding: 0 var(--e-1); border: 1px solid var(--linha); border-radius: var(--raio-1); font-size: var(--fs-1); }
.paleta-lista { max-height: 380px; margin: 0; padding: var(--e-1); overflow: auto; list-style: none; }
.paleta-lista li[role="option"] { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--raio-2); cursor: pointer; }
.paleta-lista li[aria-selected="true"] { background: var(--acao-suave); }
.paleta-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-dica { flex: none; max-width: 45%; overflow: hidden; color: var(--texto-3); font-size: var(--fs-1); text-overflow: ellipsis; white-space: nowrap; }
.paleta-vazio { padding: var(--e-4); color: var(--texto-3); }
.paleta-rodape { margin: 0; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--linha); color: var(--texto-3); font-size: var(--fs-1); }

/* ---------- Hoje (por núcleo desde a 5.18.0) ----------
 * Prazos em cima, em três colunas delimitadas; trabalho por núcleo embaixo, um
 * painel com borda própria para cada núcleo. A grade usa a tela toda até 1240 px
 * de conteúdo; abaixo de 900 px tudo empilha, Prazos primeiro. Cor só de estado:
 * vermelho no vencido, âmbar na atenção. */

.hoje { display: grid; gap: var(--e-4); width: 100%; max-width: 1240px; }
.hoje-saudacao { margin: 0; color: var(--texto-2); font-size: var(--fs-3); }
.hoje-saudacao strong { color: var(--texto); font-size: var(--fs-4); }
.hoje-atualizado { color: var(--texto-3); font-size: var(--fs-1); }
.hoje-avisos { display: grid; gap: var(--e-1); }
.hoje-aviso { display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--raio-2); background: var(--atencao-suave); color: var(--texto); }
.hoje-aviso .icone { color: var(--atencao); }
.hoje-novidade { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--acao-linha); border-radius: var(--raio-2); background: var(--acao-suave); }
.hoje-novidade p { flex: 1 1 auto; margin: 0; color: var(--texto); }
.hoje-novidade kbd { padding: 0 var(--e-1); border: 1px solid var(--linha-forte); border-radius: var(--raio-1); font-size: var(--fs-1); }

.hoje-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.hoje-numero {
  display: grid; gap: 2px; padding: var(--e-3) var(--e-4); border: 1px solid var(--linha); border-radius: var(--raio-2);
  background: var(--superficie); color: var(--texto-2); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra-1);
}
.hoje-numero strong { color: var(--texto); font-size: var(--fs-6); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hoje-numero.vencido strong { color: var(--vencido); }
.hoje-numero.atencao strong { color: var(--atencao); }
.hoje-numero:hover { border-color: var(--linha-forte); }
.hoje-numero:focus-visible { outline: none; box-shadow: var(--anel-foco); }

.hoje-secao { display: grid; gap: var(--e-3); }
.hoje-secao > h2 { margin: var(--e-2) 0 0; color: var(--texto); font-size: var(--fs-4); font-weight: 600; }
.hoje-secao > h2:focus { outline: none; }
.hoje-prazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); align-items: start; }
/* Um núcleo por linha; dentro dele, "Na fila" e "Aguardando retorno" lado a lado (29/10/2026). */
.hoje-nucleos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.hoje-coluna, .hoje-nucleo {
  display: grid; gap: var(--e-2); min-width: 0; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio-3);
  background: var(--superficie); box-shadow: var(--sombra-1);
}
.hoje-coluna > h3, .hoje-bloco > h4 {
  display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--texto-2); font-size: var(--fs-2); font-weight: 600;
}
.hoje-coluna > h3:focus { outline: none; }
.hoje-coluna[data-coluna-hoje="vencidos"] > h3 { color: var(--vencido); }
.hoje-coluna[data-coluna-hoje="hoje"] > h3 { color: var(--atencao); }
.hoje-linha-objeto:empty { display: none; }

.hoje-linhas { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hoje-linha {
  display: grid; gap: 2px; width: 100%; min-width: 0; padding: var(--e-2); border: 0; border-radius: var(--raio-2);
  background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.hoje-linha:hover { background: var(--neutro-suave); }
.hoje-linha:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.hoje-linha-cabeca { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.hoje-linha-id { min-width: 0; overflow: hidden; color: var(--texto); font-size: var(--fs-3); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hoje-linha-objeto { overflow: hidden; color: var(--texto-2); font-size: var(--fs-2); text-overflow: ellipsis; white-space: nowrap; }
.hoje-linha-abaixo { overflow: hidden; color: var(--texto-3); font-size: var(--fs-1); text-overflow: ellipsis; white-space: nowrap; }
.hoje-tipo {
  flex: none; padding: 0 var(--e-2); border: 1px solid var(--linha); border-radius: var(--raio-pilula); color: var(--texto-2);
  font-size: var(--fs-1); line-height: 18px; white-space: nowrap;
}
.hoje-prazo { flex: none; margin-left: auto; color: var(--texto-2); font-size: var(--fs-2); font-weight: 500; white-space: nowrap; }
.hoje-prazo.vencido { color: var(--vencido); font-weight: 600; }
.hoje-prazo.atencao { color: var(--atencao); font-weight: 600; }
.hoje-ordem { flex: none; color: var(--texto-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoje-urgente { flex: none; color: var(--vencido); font-size: var(--fs-1); font-weight: 600; }
.hoje-linha-fim { display: inline-flex; flex: none; align-items: center; gap: var(--e-2); margin-left: auto; }

.hoje-link {
  justify-self: start; padding: var(--e-1) 0; border: 0; background: transparent; color: var(--link); font: inherit; font-size: var(--fs-2);
  font-weight: 500; cursor: pointer;
}
.hoje-link:hover { text-decoration: underline; }
.hoje-link:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-1); }
.hoje-vazio { margin: 0; padding: var(--e-1) var(--e-2); color: var(--texto-3); font-size: var(--fs-2); }
.hoje-rodape { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: 0; }

.hoje-nucleo-cabeca { display: flex; align-items: center; gap: var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--linha); }
.hoje-nucleo-sigla {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 var(--e-2);
  border-radius: var(--raio-2); background: var(--neutro-suave); color: var(--texto); font-size: var(--fs-2); font-weight: 600;
}
.hoje-nucleo-titulo { flex: 1 1 auto; min-width: 0; }
.hoje-nucleo-titulo h3 { margin: 0; color: var(--texto); font-size: var(--fs-3); font-weight: 600; }
.hoje-nucleo-resumo { margin: 0; color: var(--texto-3); font-size: var(--fs-1); }
.hoje-nucleo-cabeca .hoje-link { flex: none; }
.hoje-bloco { display: grid; gap: var(--e-1); }
/* Os dois blocos do núcleo, cada um com fundo, cabeçalho, contagem e vazio próprios:
 * o que depende da PGM na superfície, o que está com as unidades no fundo neutro. */
.hoje-nucleo-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); align-items: start; }
.hoje-nucleo-blocos[data-blocos="1"] { grid-template-columns: minmax(0, 1fr); }
.hoje-nucleo-blocos > .hoje-bloco { gap: var(--e-2); min-width: 0; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio-2); }
.hoje-bloco[data-bloco="fila"] { background: var(--superficie); }
.hoje-bloco[data-bloco="aguardando"] { background: var(--superficie-2); }
.hoje-bloco > h4 { color: var(--texto); font-size: var(--fs-3); }
.hoje-bloco-quem { color: var(--texto-3); font-size: var(--fs-2); font-weight: 400; }
.hoje-situacao { display: grid; gap: 2px; }
.hoje-situacao + .hoje-situacao { padding-top: var(--e-2); border-top: 1px solid var(--linha); }
.hoje-situacao > h5 { display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: 0 var(--e-2); color: var(--texto-2); font-size: var(--fs-1); font-weight: 600; }
.hoje-situacao[data-situacao="vencido"] > h5 { color: var(--vencido); }
.hoje-faixa { display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3); border: 1px solid var(--atencao-linha); border-radius: var(--raio-2); background: var(--atencao-suave); }
.hoje-faixa-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--texto); font-size: var(--fs-2); font-weight: 600; }
.hoje-faixa-titulo .icone { color: var(--atencao); }
.hoje-faixa ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hoje-faixa-item {
  display: block; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: var(--fs-2);
  text-align: left; cursor: pointer;
}
button.hoje-faixa-item:hover { text-decoration: underline; }
button.hoje-faixa-item:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-1); }
.hoje-faixa-item strong { margin-right: var(--e-1); }

/* Seção com muitas abas cabe numa linha: a busca fica só com o ícone e o atalho. */
@media (max-width: 1500px) {
  .busca-gatilho { min-width: 0; }
  .busca-gatilho .barra-rotulo { display: none; }
}
@media (max-width: 1024px) {
  .hoje-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Abaixo de 900 px tudo empilha, Prazos primeiro (a ordem do documento). */
@media (max-width: 900px) {
  .hoje-prazos, .hoje-nucleos, .hoje-nucleo-blocos { grid-template-columns: minmax(0, 1fr); }
  /* Empilhados, os blocos se separam por uma divisória forte. */
  .hoje-nucleo-blocos > .hoje-bloco + .hoje-bloco { margin-top: var(--e-2); border-top: 2px solid var(--linha-forte); }
}
/* Botão de menu do topo: só no celular. */
.menu-movel { display: none; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: var(--raio-2); background: transparent; color: var(--texto); cursor: pointer; }
.menu-movel:hover { background: var(--neutro-suave); }
.menu-movel:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.veu-barra { display: none; }

/* Janela estreita: a barra fica com os ícones (data-modo="compacta"), e o botão
 * "Abrir a barra lateral" do topo a abre inteira por cima do conteúdo, como no
 * celular (data-modo="sobreposta"). */
@media (min-width: 641px) and (max-width: 1100px) {
  .menu-movel { display: inline-flex; }
  .barra-recolher { display: none; }
}
.barra-lateral[data-modo="sobreposta"] {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 232px; background: var(--superficie); box-shadow: var(--sombra-3);
}
.barra-lateral[data-modo="sobreposta"] ~ .moldura-principal { grid-column: 2; }
.barra-lateral[data-modo="sobreposta"] + .veu-barra { display: block; position: fixed; inset: 0; z-index: 39; background: var(--veu); }
/* Celular: a barra sai da tela e abre pelo botão de menu, por cima de um véu. */
@media (max-width: 640px) {
  .moldura { grid-template-columns: minmax(0, 1fr); }
  .barra-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 232px; transform: translateX(-100%);
    background: var(--superficie);
  }
  body.barra-animando .barra-lateral { transition: transform var(--t-2) var(--curva); }
  body.barra-aberta .barra-lateral { transform: none; box-shadow: var(--sombra-3); }
  body.barra-aberta .veu-barra { display: block; position: fixed; inset: 0; z-index: 39; background: var(--veu); }
  .barra-recolher { display: none; }
  .menu-movel { display: inline-flex; }
  .moldura-principal > .topo { padding: var(--e-2) var(--e-3); }
}

/* Filtro ou vista no alto da tela (setor da Instrução, Acervo, Gestão atual). */
.vista-secao.segmentado { display: inline-flex; gap: 2px; margin: 0 0 var(--e-4); padding: 2px; border-radius: var(--raio-2); background: var(--neutro-suave); }
.vista-secao button { min-height: 32px; padding: 0 var(--e-3); border: 0; border-radius: var(--raio-1); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-2); cursor: pointer; }
.vista-secao button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-1); }
.seletor-pesquisavel { grid-template-columns: minmax(0, 1fr); }

}