@font-face {
  font-family: "Commissioner";
  src: url("fontes/commissioner.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fontes/literata.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* âmbar = "aguardando", como no semáforo: só marca espera e seleção */
  --papel: #f5f6f8;
  --folha: #ffffff;
  --tinta: #1c2230;
  --cinza: #586173;
  --ambar: #a85a00;
  --ambar-claro: #fbe9c8;
  --ambar-forte: #8f4d00;   /* texto âmbar sobre o fundo âmbar claro (contraste AA) */
  --filete: #dadde3;
  --filete-forte: #b9bec8;

  --sans: "Commissioner", system-ui, sans-serif;
  --serifa: "Literata", Georgia, serif;

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

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #14171d;
    --folha: #1b1f27;
    --tinta: #e6e8ed;
    --cinza: #a3abb9;
    --ambar: #f0a54a;
    --ambar-claro: #3a2a12;
    --ambar-forte: #f0a54a;
    --filete: #2d333e;
    --filete-forte: #48505e;
    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(--ambar); }

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

/* topo */
.topo {
  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(--ambar); }
.visoes .n { font-weight: 400; font-size: 0.875rem; color: var(--cinza); }
.topo h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.resumo { margin: 0; max-width: 62ch; 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(--ambar); }
.comissoes button[aria-pressed="true"] { background: var(--ambar-claro); }
.comissoes button[aria-pressed="true"] .sigla { color: var(--ambar-forte); }
.comissoes .sigla { font-weight: 650; }
.comissoes .nome { font-size: 0.8125rem; line-height: 1.3; 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(--ambar-claro); border-color: var(--ambar); }
.tipo:has(input:not(:checked)) .sigla { text-decoration: line-through; color: var(--cinza); }
.tipo:has(input:focus-visible) { outline: 3px solid var(--ambar); 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 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(--ambar); font-weight: 600; white-space: nowrap; }

.ementa {
  margin: 0.4rem 0 0.5rem;
  max-width: 68ch;
  font-family: var(--serifa);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.temas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.35rem;
  max-width: 75ch;
  font-size: 0.875rem;
}
.temas span:not(:last-child)::after { content: ";"; }
.autoria {
  margin: 0;
  max-width: 75ch;
  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 âmbar */
.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(--ambar);
  border-radius: var(--raio);
  background: var(--ambar-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(--ambar);
  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; }

/* 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 { padding: 2rem 0; }
.vazio p { margin: 0 0 1rem; }

.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(--ambar); color: var(--ambar); }
.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 { padding: 1rem; background: var(--ambar-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: 80ch; }

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

/* celular e janelas estreitas: comissões recolhidas acima da lista */
@media (max-width: 60rem) {
  .topo { padding-top: 1.75rem; padding-bottom: 1.25rem; }
  .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; }
}

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