/* Raio-x do Congresso: identidade do pesquisalegis (~/projetos/pesquisalegis/DESIGN.md e marca/GUIA.md), com tema
   claro e escuro; o padrão segue o sistema, e o seletor do topo (tema.js) grava a escolha em data-theme */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontes/overpass-400-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fontes/overpass-400-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ameixa: a cor do pesquisalegis; marca seleção, etapa e o que aguarda (sem degradê, brilho nem sombra) */
  --papel: #ffffff;
  --folha: #ffffff;
  --tinta: #2a2030;
  --cinza: #675e6c;
  --destaque: #4a1f5c;
  --destaque-claro: #f4edf6;
  --destaque-forte: #4a1f5c;
  --vaga: #a487b0;            /* ameixa média: o campo em branco da relatoria */
  --filete: #e6dcea;
  --filete-forte: #a487b0;
  --topo: #4a1f5c;
  --topo-texto: #ffffff;
  --topo-suave: #e3d0ea;

  --sans: "Overpass", system-ui, sans-serif;

  --gutter: 1rem;
  --raio: 6px;
  color-scheme: light;
}

/* escuro: o fundo vira uma ameixa quase preta; os acentos passam ao lilás (versões "-escuro" da marca) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #17111b;
    --folha: #1f1724;
    --tinta: #efe8f2;
    --cinza: #b5a9bb;
    --destaque: #dcc6e6;
    --destaque-claro: #3a2846;
    --destaque-forte: #efe2f5;
    --vaga: #a487b0;
    --filete: #382c3f;
    --filete-forte: #8a7594;
    --topo: #4a1f5c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #17111b;
  --folha: #1f1724;
  --tinta: #efe8f2;
  --cinza: #b5a9bb;
  --destaque: #dcc6e6;
  --destaque-claro: #3a2846;
  --destaque-forte: #efe2f5;
  --vaga: #a487b0;
  --filete: #382c3f;
  --filete-forte: #8a7594;
  --topo: #4a1f5c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--destaque); }

:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }

/* topo: o bloco ameixa do pesquisalegis, com a marca, o aviso de que não é oficial, as páginas e o tema */
.topo { background: var(--topo); color: var(--topo-texto); }
.topo-dentro { max-width: 76rem; margin: 0 auto; padding: 1.25rem var(--gutter) 0.25rem; }
.topo a { color: var(--topo-texto); }
.topo :focus-visible { outline-color: var(--topo-texto); }
.topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.marca { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.marca a { text-decoration: none; }
/* símbolo das duas cúpulas (marca do pesquisalegis): a base da cúpula na linha de base do nome */
.marca-simbolo {
  height: 1.37em;
  width: auto;
  aspect-ratio: 240 / 158;
  vertical-align: -0.85em;
  margin-right: 0.45em;
}
.s-cupula { fill: var(--topo-suave); }
.s-cuia { fill: var(--topo-texto); }
.assinatura { margin: 0.35rem 0 0; color: var(--topo-suave); }
.assinatura .pl { font-weight: 500; color: var(--topo-texto); }
.assinatura .pl b { font-weight: 800; }
.aviso { margin: 0.6rem 0 0; max-width: 55ch; font-size: 0.875rem; color: var(--topo-suave); }
.aviso strong { color: var(--topo-texto); font-weight: 750; }
.paginas { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.75rem; }
.paginas a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 3px solid transparent;
  color: var(--topo-suave);
  font-weight: 650;
  text-decoration: none;
}
.paginas a:hover { color: var(--topo-texto); }
.paginas a[aria-current="page"] { color: var(--topo-texto); border-bottom-color: var(--topo-suave); }

/* seletor de tema: sistema, claro, escuro */
.tema { display: inline-flex; gap: 2px; margin: 0; padding: 2px; border: 1px solid var(--topo-suave); border-radius: var(--raio); }
.tema legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tema label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border-radius: calc(var(--raio) - 2px);
  color: var(--topo-suave);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.tema input { position: absolute; opacity: 0; pointer-events: none; }
.tema label:has(input:checked) { background: var(--topo-suave); color: #4a1f5c; }
.tema label:has(input:focus-visible) { outline: 3px solid var(--topo-texto); outline-offset: -3px; }

/* cabeçalho da página, abaixo do topo */
.cabecalho {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1.75rem;
}

/* abas: projetos de lei; PECs e PDLs; aguardando despacho; vindas da Câmara */
.visoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--filete);
}
.visoes a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--cinza);
  font-weight: 600;
  text-decoration: none;
}
.visoes a:hover { color: var(--tinta); border-bottom-color: var(--filete-forte); }
.visoes a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--destaque); }
.visoes .n { font-weight: 400; font-size: 0.875rem; color: var(--cinza); }
.cabecalho h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.resumo { margin: 0; max-width: 54ch; color: var(--cinza); }
#atualizado { color: var(--tinta); }

/* corpo: lateral de comissões + lista */
.corpo {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.lateral { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.painel-comissoes > summary { display: none; }
.lateral-titulo { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 650; }

.comissoes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); }
.comissoes li { border-bottom: 1px solid var(--filete); }
.comissoes button {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.comissoes.siglas-longas button { grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
.comissoes button:hover .sigla { color: var(--destaque); }
.comissoes button[aria-pressed="true"] { background: var(--destaque-claro); }
.comissoes button[aria-pressed="true"] .sigla { color: var(--destaque-forte); }
.comissoes .sigla { font-weight: 650; }
.comissoes .nome { font-size: 0.8125rem; line-height: 1.35; color: var(--cinza); }
.comissoes .n { font-weight: 600; }
.comissoes button.zerada { color: var(--cinza); }
.comissoes button.zerada .n { font-weight: 400; }

/* filtros */
.filtros { margin: 0 0 1rem; }
.rotulo { display: block; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 600; padding: 0; }
.busca {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  font: inherit;
  font-size: 1.0625rem;
}
.busca::placeholder { color: var(--cinza); opacity: 1; }

.linha-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: end;
  justify-content: space-between;
  margin-top: 1rem;
}
.tipos { border: 0; margin: 0; padding: 0; min-width: 0; }
.tipos-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tipo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio);
  background: var(--folha);
  cursor: pointer;
  user-select: none;
}
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo .sigla { font-weight: 650; }
.tipo .n { color: var(--cinza); font-size: 0.875rem; }
.tipo:has(input:checked) { background: var(--destaque-claro); border-color: var(--destaque); }
.tipo:has(input:not(:checked)) .sigla { text-decoration: line-through; color: var(--cinza); }
.tipo:has(input:focus-visible) { outline: 3px solid var(--destaque); outline-offset: 2px; }

.linha-temas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: end;
  margin-top: 1rem;
}
.campo { min-width: 0; }
.campo select { width: 100%; max-width: 24rem; }
.nota-temas { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; color: var(--cinza); }
.campo-etapa select { font-weight: 600; border-color: var(--destaque); }

/* filtros a mais, recolhidos: abrem num clique e dizem quantos estão em uso */
.mais-filtros { margin-top: 1rem; border-top: 1px solid var(--filete); padding-top: 0.75rem; }
.mais-filtros > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 600;
  cursor: pointer;
}
.mais-filtros > summary::-webkit-details-marker { display: none; }
.mais-filtros > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.mais-filtros[open] > summary::before { transform: translateY(-0.15rem) rotate(45deg); }
.mais-filtros > summary:hover { color: var(--destaque); }
.mais-filtros > summary:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; }
.mais-filtros .linha-temas { margin-top: 0.25rem; }
.n-mais { font-weight: 400; color: var(--destaque-forte); }
.pauta .situacao { color: var(--cinza); }
.pauta .prazo { color: var(--cinza); }
.pauta .prazo.perto { color: var(--destaque-forte); font-weight: 600; }

.campo select,
.ordem select {
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  font: inherit;
}

.barra-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1.5rem 0 0.75rem;
}
.contagem { margin: 0; color: var(--cinza); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao:disabled:hover { border-color: var(--filete-forte); color: var(--tinta); }
.contagem strong { color: var(--tinta); font-weight: 650; }

/* lista: linhas de uma pauta, sobre uma folha */
.folha {
  background: var(--folha);
  border: 1px solid var(--filete);
  border-radius: var(--raio);
  padding: 0 1.5rem;
}
.lista { list-style: none; margin: 0; padding: 0; }
.projeto { padding: 1.25rem 0 1.15rem; border-top: 1px solid var(--filete); }
.projeto:first-child { border-top: 0; }

.cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
.ident { font-size: 1.125rem; font-weight: 650; text-decoration: none; }
.ident:hover { text-decoration: underline; }
.espera { color: var(--destaque); font-weight: 600; white-space: nowrap; }

.ementa {
  margin: 0.4rem 0 0.5rem;
  max-width: 55ch;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.temas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.35rem;
  max-width: 55ch;
  font-size: 0.875rem;
}
.temas span:not(:last-child)::after { content: ";"; }
.autoria {
  margin: 0;
  max-width: 55ch;
  font-size: 0.875rem;
  color: var(--cinza);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* o campo de relatoria em branco, como numa pauta ainda sem relator */
.pauta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

/* linha do tempo do despacho: comissões em ordem, ligadas por um fio; a atual em destaque */
.despacho { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.rotulo-despacho { color: var(--cinza); }
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trilha li { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.05rem 0; }
.trilha li + li::before {
  content: "";
  align-self: center;
  width: 0.9rem;
  margin: 0 0.45rem;
  border-top: 1px solid var(--filete-forte);
}
.trilha .sigla { font-weight: 600; }
.trilha .passou { color: var(--cinza); }
.trilha .passou .sigla { font-weight: 400; }
.trilha .feito { font-size: 0.8125rem; }
.trilha .aqui .sigla {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--destaque);
  border-radius: var(--raio);
  background: var(--destaque-claro);
  font-weight: 650;
}
.trilha .terminativa { font-size: 0.75rem; color: var(--cinza); }
.relatoria { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--cinza); }
.relator { color: var(--tinta); font-weight: 600; }
.vaga {
  display: inline-block;
  width: 8.5rem;
  border-bottom: 1.5px dashed var(--vaga);
  transform: translateY(-0.15em);
}
.pauta .desde { color: var(--cinza); }
.relatoria .relator { color: var(--tinta); font-weight: 600; }
.pauta .onde { font-weight: 600; }
.pauta .origem { color: var(--cinza); }
.pauta .texto { margin-left: auto; }
.copiar {
  min-height: 2.75rem;
  margin: -0.85rem 0;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--cinza);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.copiar:hover { color: var(--destaque); }
/* link para uma proposição: a faixa que diz que a lista mostra só ela */
.faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 1rem 0 0;
  padding: 0.5rem 1rem;
  border-radius: var(--raio);
  background: var(--destaque-claro);
  color: var(--destaque-forte);
  font-weight: 600;
}
.faixa[hidden] { display: none; }
.botao-texto {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* aba de aprovadas na Câmara: a última semana e as três anteriores, com título */
.secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1.25rem 0 0.5rem;
  border-top: 1px solid var(--filete-forte);
}
.secao:first-child { border-top: 0; }
.secao h2 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.secao .periodo, .secao .n { font-size: 0.875rem; font-weight: 400; color: var(--cinza); }
.secao + .projeto { border-top: 0; }
.secao-vazia, .secao-nota { padding: 0.25rem 0 1.25rem; color: var(--cinza); }
.secao-nota { padding-top: 1.25rem; color: var(--tinta); }
.pauta abbr { text-decoration: none; }
.no-senado { font-weight: 600; }

.vazio { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 2rem 0; }
.vazio[hidden] { display: none; }
.vazio p { flex: 1 1 100%; margin: 0 0 0.5rem; }

.botao {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--filete-forte);
  border-radius: var(--raio);
  background: var(--folha);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.botao:hover { border-color: var(--destaque); color: var(--destaque); }
.mais { display: block; margin: 1.25rem auto 0; }
/* o display acima venceria o hidden do navegador: sem isto, o botão aparecia com "Mostrar mais -94" */
.mais[hidden] { display: none; }
.aviso-js { padding: 1rem; background: var(--destaque-claro); border-radius: var(--raio); }

.rodape {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--filete);
  font-size: 0.875rem;
  color: var(--cinza);
}
.rodape p { margin: 0; max-width: 55ch; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* páginas além do painel: novidades, relatorias, números, metodologia */
.pagina { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.indice { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 0.75rem; }
.indice a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--destaque); }
.feeds { margin-top: 0.5rem; }
.feeds a, .resumo a { color: var(--destaque); }
.cinza { color: var(--cinza); }

.evento { padding: 1rem 0; border-top: 1px solid var(--filete); }
.secao + .evento { border-top: 0; }
.onde-evento { color: var(--cinza); font-size: 0.875rem; }
.o-que { margin: 0.25rem 0 0.35rem; font-weight: 650; color: var(--destaque-forte); }

.tabela-rolagem { overflow-x: auto; }
.folha.tabela-rolagem { padding-bottom: 0.75rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabela th, .tabela td { padding: 0.65rem 0.75rem 0.65rem 0; border-top: 1px solid var(--filete); text-align: left;
  vertical-align: top; }
.tabela thead th { border-top: 0; font-size: 0.8125rem; color: var(--cinza); font-weight: 650; }
.tabela tbody th { font-weight: 400; }
.tabela .num { text-align: right; white-space: nowrap; }
.relator-nome { font-weight: 650; }
.relatorias summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--destaque);
  font-size: 0.875rem; cursor: pointer; }
.relatorias ul { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.875rem; }
.relatorias li { margin: 0.2rem 0; }
.relatorias p { margin: 0; font-size: 0.875rem; }

.secao-numeros { padding-top: 1.5rem; }
.secao-numeros > h2 { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 800; }
.secao-numeros > h2 .n { font-size: 1rem; font-weight: 400; color: var(--cinza); }
.grafico { margin: 1rem 0 1.75rem; padding: 1rem 1.25rem; background: var(--folha); border: 1px solid var(--filete);
  border-radius: var(--raio); }
.grafico h3 { margin: 0; font-size: 1.0625rem; font-weight: 750; }
.grafico figcaption p { margin: 0.25rem 0 0; color: var(--cinza); font-size: 0.875rem; }
.barras { width: 100%; margin-top: 0.75rem; border-collapse: collapse; font-size: 0.9375rem; }
.barras thead th { padding: 0 0.75rem 0.35rem 0; font-size: 0.8125rem; font-weight: 650; color: var(--cinza);
  text-align: left; }
.barras tbody th { width: 34%; padding: 0.35rem 0.75rem 0.35rem 0; font-weight: 400; text-align: left; }
.barras tbody th a { color: var(--tinta); }
.barras tbody th .sigla { font-weight: 700; }
.barra-celula { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.barra { display: block; min-width: 2px; height: 1rem; background: var(--destaque); border-radius: 2px; }
.valor { font-weight: 650; white-space: nowrap; }
.barras .num { width: 9rem; padding-left: 0.75rem; text-align: right; color: var(--cinza); white-space: nowrap; }

.texto-longo section { max-width: 55ch; }
.texto-longo h2 { margin: 2rem 0 0.5rem; font-size: 1.375rem; font-weight: 800; }
.texto-longo p, .texto-longo li { line-height: 1.6; }
.texto-longo ul { padding-left: 1.2rem; }
.texto-longo li { margin: 0.35rem 0; }
.texto-longo a { color: var(--destaque); }
.texto-longo .tabela-rolagem { max-width: 76rem; }

/* celular e janelas estreitas: comissões recolhidas acima da lista */
@media (max-width: 60rem) {
  .cabecalho { padding-top: 1rem; padding-bottom: 1.25rem; }
  .marca { font-size: 1.375rem; }
  .corpo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .lateral { position: static; max-height: none; overflow: visible; }
  .painel-comissoes {
    background: var(--folha);
    border: 1px solid var(--filete-forte);
    border-radius: var(--raio);
  }
  .painel-comissoes > summary {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
  }
  .painel-comissoes > summary::-webkit-details-marker { display: none; }
  .painel-comissoes > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
  }
  .painel-comissoes[open] > summary::after { transform: translateY(0.15rem) rotate(-135deg); }
  .painel-comissoes[open] > summary { border-bottom: 1px solid var(--filete); }
  .lateral-titulo { display: none; }
  .comissoes { border-top: 0; }
  .comissoes li:last-child { border-bottom: 0; }
  .comissoes button { padding: 0.55rem 0.85rem; }
  .campo { flex: 1 1 100%; }
  .campo select { max-width: none; }
  .tipos-opcoes { gap: 0.4rem; }
  .tipo { padding: 0 0.6rem; gap: 0.3rem; }
  .folha { padding: 0 1rem; }
  .vaga { width: 5.5rem; }
  .pauta .texto { margin-left: 0; }
  .barras tbody th { width: 40%; }
  .barras .num { width: auto; }
  .grafico { padding: 0.75rem; }
}

/* celular: a tabela de relatorias vira uma ficha por parlamentar, com o nome de cada coluna */
@media (max-width: 40rem) {
  .tabela-empilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-empilha, .tabela-empilha tbody { display: block; }
  /* os números antes da lista das relatorias, que pode ser longa */
  .tabela-empilha tr { display: flex; flex-direction: column; padding: 0.75rem 0; border-top: 1px solid var(--filete); }
  .tabela-empilha tbody th { display: contents; }
  .tabela-empilha td { display: block; padding: 0.1rem 0; border-top: 0; }
  .tabela-empilha .num { text-align: left; }
  .tabela-empilha td:empty { display: none; }
  .tabela-empilha td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--cinza); }
  .tabela-empilha .relatorias { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}