/* Pelagus -- identidade da carta batimetrica.
 *
 * Papel de carta nautica, tinta de sondagem, latao para o que esta assinalado
 * como perigo. A mesma paleta do relatorio de engenharia da Fase 0, agora como
 * tela de produto.
 *
 * NENHUMA fonte externa, e nao por gosto: uma tela interna atras de login
 * que busca WOFF no Google conta a visita para o Google em toda carga. O
 * Dockerfile ja registra a mesma decisao ao subir o Streamlit com
 * `gatherUsageStats false`. A hierarquia tipografica sai de peso, tamanho e
 * espacamento sobre a pilha do sistema, que e o que sempre a sustentou.
 */

:root {
  color-scheme: light dark;

  --papel:      #EFF2F0;
  --painel:     #F7F9F7;
  --tinta:      #101E27;
  --tinta-suave:#40555F;
  --tinta-fraca:#71858E;
  --regua:      #CBD5D2;
  --regua-fina: #DFE6E3;

  --sonda:      #1A5A73;
  --sonda-lava: #E2EBEE;
  --latao:      #96682F;
  --latao-lava: #F0E7DA;
  --musgo:      #6B4A6B;

  --alta:       #2C6349;
  --baixa:      #8A3A31;
  --neutro:     #71858E;

  --sombra: 0 1px 2px rgb(16 30 39 / 6%);
  --raio: 2px;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:      #0B151C;
    --painel:     #111E26;
    --tinta:      #E4EBE9;
    --tinta-suave:#A2B4BB;
    --tinta-fraca:#75898F;
    --regua:      #273945;
    --regua-fina: #1C2C36;

    --sonda:      #63B4CE;
    --sonda-lava: #14303C;
    --latao:      #CFA063;
    --latao-lava: #2C2418;
    --musgo:      #B08BB0;

    --alta:       #74BE99;
    --baixa:      #DE8B80;
    --neutro:     #75898F;

    --sombra: 0 1px 2px rgb(0 0 0 / 35%);
  }
}

:root[data-tema="escuro"] {
  --papel:      #0B151C;
  --painel:     #111E26;
  --tinta:      #E4EBE9;
  --tinta-suave:#A2B4BB;
  --tinta-fraca:#75898F;
  --regua:      #273945;
  --regua-fina: #1C2C36;

  --sonda:      #63B4CE;
  --sonda-lava: #14303C;
  --latao:      #CFA063;
  --latao-lava: #2C2418;
  --musgo:      #B08BB0;

  --alta:       #74BE99;
  --baixa:      #DE8B80;
  --neutro:     #75898F;

  --sombra: 0 1px 2px rgb(0 0 0 / 35%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.folha { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------------------------------------------------------------- topo */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Fundo opaco, sem `backdrop-filter`. O desfoque era mais bonito e cobra por
     quadro: barra fixa com blur obriga o compositor a recapturar o fundo a cada
     rolagem, sobre uma pagina de 5.400 px com tres canvas. Nao foi medido aqui
     -- e custo conhecido do recurso, e a ficha tem fluidez como requisito
     escrito, entao o vidro fosco e a primeira coisa que se troca por ela. */
  background: var(--papel);
  border-bottom: 1px solid var(--regua);
}
.barra-interna {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.marca {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.marca svg { display: block; }
/* A marca vira link na ficha, que e destino de drill-down. Sem sublinhado e
   sem cor de link: ela e a marca antes de ser navegacao. */
a.marca { color: inherit; text-decoration: none; }
a.marca:hover { color: var(--sonda); }

/* O caminho de volta ao radar. Explicito, e nao so a marca clicavel: quem
   chegou aqui por um clique numa linha precisa de um alvo que se anuncie. */
.voltar {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  text-decoration: none;
  border: 1px solid var(--regua);
  padding: 4px 9px;
  border-radius: var(--raio);
}
.voltar::before { content: "← "; }
.voltar:hover { color: var(--sonda); border-color: var(--sonda); }

/* Busca ------------------------------------------------------------- */

.busca { position: relative; flex: 1 1 260px; max-width: 380px; }
.busca input {
  width: 100%;
  padding: 8px 12px;
  font: 500 14px/1.4 var(--mono);
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
}
.busca input:focus { outline: 2px solid var(--sonda); outline-offset: -1px; }
.busca input::placeholder { color: var(--tinta-fraca); font-family: var(--sans); font-weight: 400; }

.sugestoes {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--painel);
  border: 1px solid var(--regua);
  box-shadow: var(--sombra);
  max-height: 340px;
  overflow-y: auto;
  z-index: 30;
}
.sugestoes li {
  list-style: none;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--regua-fina);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sugestoes li:last-child { border-bottom: none; }
.sugestoes li:hover, .sugestoes li[aria-selected="true"] { background: var(--sonda-lava); }
.sugestoes b { font-family: var(--mono); font-size: 13px; letter-spacing: -.01em; }
.sugestoes span { color: var(--tinta-fraca); font-size: 12.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugestoes ul { margin: 0; padding: 0; }

/* Cabecalho do papel ------------------------------------------------- */

header.papel { padding: 40px 0 26px; border-bottom: 2px solid var(--tinta); }
.sobrenome {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sonda);
  margin: 0 0 12px;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
h1 .nome {
  display: block;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 400;
  color: var(--tinta-suave);
  letter-spacing: 0;
  margin-top: 8px;
}
.linha-selos { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 14px; }

.selo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentcolor;
  border-radius: var(--raio);
  white-space: nowrap;
}
.selo.viva  { color: var(--alta); background: color-mix(in srgb, var(--alta) 10%, transparent); }
.selo.morta { color: var(--latao); background: var(--latao-lava); }
.selo.neutra{ color: var(--tinta-fraca); }
.selo.aviso { color: var(--baixa); background: color-mix(in srgb, var(--baixa) 10%, transparent); }

/* Janelas ------------------------------------------------------------ */

.janelas {
  display: flex;
  gap: 2px;
  margin: 26px 0 0;
  border: 1px solid var(--regua);
  border-radius: var(--raio);
  background: var(--regua-fina);
  width: fit-content;
  overflow: hidden;
}
.janelas button {
  font: 500 12px/1 var(--mono);
  letter-spacing: .06em;
  padding: 9px 15px;
  border: none;
  background: var(--painel);
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.janelas button:hover { background: var(--sonda-lava); }
.janelas button[aria-pressed="true"] { background: var(--sonda); color: var(--papel); }
.janelas button:disabled { color: var(--tinta-fraca); cursor: not-allowed; opacity: .5; }
.janelas button:disabled:hover { background: var(--painel); }

.janela-legenda {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-fraca);
  margin: 10px 0 0;
}

/* Secoes ------------------------------------------------------------- */

section { margin-top: 52px; scroll-margin-top: 70px; }
h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 4px;
  padding-left: 20px;
  position: relative;
}
h2::before {
  content: "";
  position: absolute;
  left: 0; top: .46em;
  width: 10px; height: 2px;
  background: var(--sonda);
}
.nota {
  padding-left: 20px;
  color: var(--tinta-fraca);
  font-size: 13px;
  margin: 0 0 20px;
  max-width: 74ch;
}

/* Grade de medidas --------------------------------------------------- */

.medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--regua-fina);
  border: 1px solid var(--regua);
  box-shadow: var(--sombra);
}
.medida { background: var(--painel); padding: 15px 17px; }
.medida dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.medida dd {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.medida dd small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tinta-suave);
  letter-spacing: 0;
  margin-top: 4px;
  font-variant-numeric: normal;
}
.medida dd.ausente { color: var(--tinta-fraca); font-weight: 400; font-size: 19px; }
.pos { color: var(--alta); }
.neg { color: var(--baixa); }

.destaque .medida dd { font-size: 27px; }

/* Ajuda ------------------------------------------------------------- */

.ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border: 1px solid var(--tinta-fraca);
  border-radius: 50%;
  font: 500 9px/1 var(--sans);
  color: var(--tinta-fraca);
  cursor: help;
  flex: none;
}

/* Graficos ----------------------------------------------------------- */

.quadro {
  border: 1px solid var(--regua);
  background: var(--painel);
  box-shadow: var(--sombra);
  position: relative;
}
.quadro-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--regua-fina);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.legenda { display: flex; gap: 14px; letter-spacing: .04em; text-transform: none; font-size: 11.5px; }
.legenda i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; }
.tela-grafico { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }

.dica {
  position: absolute;
  pointer-events: none;
  background: var(--papel);
  border: 1px solid var(--regua);
  box-shadow: var(--sombra);
  padding: 8px 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .1s;
  z-index: 10;
}
.dica.vista { opacity: 1; }
.dica b { font-weight: 600; }
.dica-data { color: var(--tinta-fraca); display: block; margin-bottom: 3px; }

/* Decomposicao ------------------------------------------------------- */

.decomposicao { display: grid; gap: 14px; }
.decomp-linha { display: grid; grid-template-columns: 130px 1fr 92px; gap: 14px; align-items: center; }
.decomp-linha .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraca); }
.decomp-linha .valor { font-family: var(--mono); font-size: 13.5px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 500; }
.trilho { position: relative; height: 20px; background: var(--regua-fina); border-radius: var(--raio); }
.trilho .zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--tinta-fraca); }
.trilho .barra { position: absolute; top: 0; bottom: 0; border-radius: 1px; }

.ressalva {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--regua);
  font-size: 12.5px;
  color: var(--tinta-fraca);
  max-width: 76ch;
}
.ressalva b { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* Ressalva que qualifica um numero exibido, e nao so o contextualiza. O latao
   e a cor de perigo assinalado da carta: mesma tinta dos defeitos no relatorio
   de engenharia, pelo mesmo motivo -- e um aviso de que o numero ao lado nao
   quer dizer o que parece. */
.ressalva.alerta {
  border-top-color: var(--latao);
  border-left: 2px solid var(--latao);
  padding: 12px 0 2px 12px;
  color: var(--tinta-suave);
}
.ressalva.alerta b { color: var(--latao); }
.ressalva .fonte { display: block; margin-top: 5px; color: var(--tinta-fraca); font-size: 11.5px; }

/* Numero que existe, foi medido, e nao quer dizer o que aparenta. Nao e erro
   -- entao nao usa a cor de baixa -- e nao e ausencia, entao nao esmaece. */
dd.suspeito { color: var(--latao); }

/* Heatmap ------------------------------------------------------------ */

.rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--painel); }
th, td { padding: 7px 10px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--regua-fina); white-space: nowrap; }
th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
  background: var(--papel);
  position: sticky; top: 0;
}
td:first-child, th:first-child { text-align: left; font-family: var(--mono); font-size: 12px; }
tbody tr:last-child td { border-bottom: none; }
.mapa td { border: 1px solid var(--papel); font-size: 11.5px; padding: 6px 8px; font-family: var(--mono); }
.mapa .vazia { background: var(--regua-fina); color: transparent; }
.mapa td.ano { background: var(--papel); border-color: var(--papel); color: var(--tinta-fraca); }

.tabela-quadro { border: 1px solid var(--regua); box-shadow: var(--sombra); }

/* A grade da Tela 1 ---------------------------------------------------- */

/* A linha inteira e alvo de clique, e por isso precisa parecer alvo. O `a`
   dentro dela continua sendo o link de verdade -- e o que da menu de contexto,
   nova aba e navegacao por teclado. */
.grade tbody tr.linha-papel { cursor: pointer; }
.grade tbody tr.linha-papel:hover { background: var(--sonda-lava); }
.grade a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--regua); }
.grade a:hover, .grade tr:hover a { color: var(--sonda); border-bottom-color: var(--sonda); }
.grade td.posicao { color: var(--tinta-fraca); width: 1%; }
/* `z` e a chave da ordenacao. Ela e a unica coluna com peso, para que a lista
   se leia de cima para baixo sem que nada mais dispute o olho. */
.grade td.z { font-weight: 600; font-size: 14px; }
.grade td.ausente { color: var(--tinta-fraca); }
/* Numero medido que nao quer dizer o que aparenta -- o beta parcial negativo
   num papel que sobe com o mercado. Mesma cor de `dd.suspeito`, pela mesma
   razao: nao e erro e nao e ausencia. */
.grade td.suspeito { color: var(--latao); }

/* O nome do grupo com o nivel embaixo. A §4 exige declarar a escolha, e o
   nivel e metade da resposta: `Bancos` subsetor e `Bancos` setor economico sao
   grupos diferentes. */
.grade td.grupo { text-align: left; white-space: normal; max-width: 200px; }
.grupo-rotulo { font-size: 12px; color: var(--tinta-suave); }
.grupo-rotulo small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* O indice ex-papel que e, em mais da metade, um unico par -- 84 dos 152
   qualificados, medido na auditoria do item 24.

   Marca e nao alarme: nao e defeito, e leitura fragil. Vermelho aqui diria
   "este numero esta errado", e ele esta certo; o que muda e o que a palavra
   "setor" quer dizer naquela linha. Por isso so peso e a tinta normal, contra o
   cinza fraco do resto da legenda. */
.grupo-rotulo b { font-weight: inherit; }
.grupo-rotulo b.concentrado { font-weight: 700; color: var(--tinta-suave); }

/* A barra empilhada da decomposicao. Largura fixa para que as barras de linhas
   diferentes sejam comparaveis entre si -- uma barra que se estica ao conteudo
   comparia cada papel consigo mesmo e com mais ninguem. */
.grade td.barra-celula { width: 150px; }
.barra-decomp {
  display: flex;
  width: 140px;
  height: 12px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--regua-fina);
}
.barra-decomp .fatia { display: block; height: 100%; }
.fatia.mercado, i.chave.mercado { background: var(--tinta-fraca); }
.fatia.setor,   i.chave.setor   { background: var(--musgo); }
.fatia.idio,    i.chave.idio    { background: var(--sonda); }
i.chave { display: inline-block; width: 9px; height: 9px; border-radius: 1px; vertical-align: baseline; }

/* A comparacao da Tela 2 ---------------------------------------------- */

/* A tabela e transposta em relacao as outras: as GRANDEZAS sao linhas e os dois
   LADOS sao colunas. E o que a §4 pede ao dizer "lado a lado" -- com os lados
   em linhas, comparar o `eps` de um com o do outro exigiria pular a tabela
   inteira com o olho, e sao justamente esses dois numeros que a tela existe
   para por um do lado do outro.

   A consequencia e que o cabecalho de linha e um `th[scope=row]`, e ele nao
   pode herdar o `position: sticky` do `th` do topo. */
.confronto th[scope="row"] {
  position: static;
  background: var(--papel);
  text-align: left;
  white-space: normal;
  width: 34%;
  font-size: 10px;
}
.confronto td { width: 33%; text-align: right; vertical-align: top; }
/* Com um lado so -- tres em cada quatro papeis do radar nao tem cluster -- a
   coluna unica toma o que sobra, em vez de deixar um vao do tamanho da coluna
   que nao veio. */
.confronto.um-lado th[scope="row"] { width: 50%; }
.confronto.um-lado td { width: 50%; }
.confronto td:first-child, .confronto th:first-child { text-align: left; }
.confronto td.ausente { color: var(--tinta-fraca); font-family: var(--mono); font-size: 11.5px; }

/* Os dois numeros que a leitura compara. Peso, e so neles: numa tabela de dez
   linhas, dar destaque a todas nao destaca nenhuma. */
.confronto .forte { font-weight: 600; font-size: 14px; }
.confronto .pos { color: var(--alta); }
.confronto .neg { color: var(--baixa); }

/* A cor do cabecalho distingue as duas colunas sem pintar numero nenhum. O
   cluster leva a tinta de sondagem porque e a fonte orientada a dado -- a
   novidade desta tela --, e o segmento fica no cinza do resto. */
.confronto th.col-cluster { color: var(--sonda); }

/* As duas barras de residuo, dentro da caixa do veredito.

   A escala vem do servidor, e o maior dos dois vale a largura toda: escalar
   pelo lado do segmento faria a barra do cluster estourar a caixa toda vez que
   o residuo CRESCESSE em vez de evaporar, que nao e caso raro. */
.confronto-barras { margin-top: 12px; display: grid; gap: 7px; }
.confronto-linha { display: grid; grid-template-columns: 92px 1fr 76px; gap: 12px; align-items: center; }
.confronto-linha .rotulo {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.confronto-linha .trilho {
  position: relative;
  display: block;
  height: 14px;
  background: var(--regua-fina);
  border-radius: var(--raio);
}
.confronto-linha .barra { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 1px; }
.confronto-linha .barra.seg { background: var(--tinta-fraca); }
.confronto-linha .barra.clu { background: var(--sonda); }
.confronto-linha .valor {
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Os pares de cada lado, um ao lado do outro.

   `auto-fit` e nao `1fr 1fr`: tres em cada quatro papeis do radar nao tem
   cluster, e com uma coluna so a largura fixa deixaria metade da secao vazia --
   um vao do tamanho exato da lista que nao veio. Abaixo de 720 px as duas
   empilham, porque duas listas de oito nomes em 360 px sao duas colunas de uma
   palavra. */
.pares-lado-a-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pares-coluna { background: var(--painel); border: 1px solid var(--regua); padding: 14px 16px 6px; }
.pares-coluna h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  font-weight: 500;
}
.pares-lista { list-style: none; margin: 0; padding: 0; }
.pares-lista li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--regua-fina);
  font-size: 13px;
}
.pares-lista li:last-child { border-bottom: none; }
.pares-lista a {
  font-family: var(--mono);
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--regua);
}
.pares-lista a:hover { color: var(--sonda); border-bottom-color: var(--sonda); }
.pares-lista span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* A classe que NAO entrou na arvore -- ela herdou o cluster e o rho da irma
   mais liquida. Marca na excecao e nao na regra: a maioria dos emissores tem uma
   classe so, e uma etiqueta que acende em quase toda linha nao marca nada.

   Cor de sondagem e nao de alarme: nada ali esta errado, e o que muda e de quem
   e o numero ao lado. */
.pares-lista i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sonda);
  border: 1px solid var(--regua);
  padding: 0 4px;
  border-radius: var(--raio);
}
/* O proprio papel dentro da lista do segmento. Ele esta la porque o peso dele e
   justamente o que o fator remove -- esconde-lo faria "Transporte, 12 papeis"
   parecer a mesma coisa num papel que e 2% do grupo e noutro que e 40%. */
.pares-lista li.proprio { background: var(--sonda-lava); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

/* As colunas que a §3 pede e o banco ainda nao tem. Lista, e nao coluna vazia:
   celula em branco sugere medicao que ninguem fez. */
.omissoes { margin: 0; padding-left: 18px; color: var(--tinta-suave); font-size: 14px; max-width: 76ch; }
.omissoes li { margin-bottom: 8px; line-height: 1.6; }
.omissoes b { color: var(--tinta); font-weight: 600; }
.omissoes code { font-family: var(--mono); font-size: .9em; }

/* O painel de evidencia (item 30) ------------------------------------- */

/* A palavra de forca. Nenhuma das quatro usa a cor de alta nem a de baixa, e e
   decisao: verde em `forte` se leria como "bom", e a palavra e sobre evidencia
   historica, nao sobre direcao nem desfecho. A escala e de intensidade da tinta
   de sondagem -- quanto mais a historia sustenta, mais tinta --, e
   `insuficiente` e tracejada porque e ausencia de base, e nao um grau dela. */
.forca {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentcolor;
  border-radius: var(--raio);
  white-space: nowrap;
  line-height: 1.5;
}
.forca-forte { background: var(--sonda); border-color: var(--sonda); color: var(--papel); }
.forca-moderada { background: var(--sonda-lava); color: var(--sonda); }
.forca-fraca { color: var(--tinta-suave); }
.forca-insuficiente { color: var(--tinta-fraca); border-style: dashed; }

.contagem-forca {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--regua-fina);
  border: 1px solid var(--regua);
  margin-bottom: 18px;
}
.contagem-caixa { background: var(--painel); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.contagem-caixa b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

.grade-familia td:last-child, .grade-familia th:last-child { text-align: left; }
.grade tbody tr.aberta { background: var(--sonda-lava); }
.grade tr.linha-total td { font-weight: 600; border-top: 1px solid var(--regua); }

#numero .nota .fonte { display: block; font-family: var(--mono); font-size: 11px; margin-top: 4px; }

.cartao-forca {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  border: 1px solid var(--regua);
  background: var(--painel);
  box-shadow: var(--sombra);
}
.cartao-palavra { padding: 20px 22px; border-right: 1px solid var(--regua-fina); }
.cartao-palavra .forca { font-size: 15px; padding: 5px 14px; letter-spacing: .14em; }
.cartao-palavra p { margin: 14px 0 0; font-size: 14px; color: var(--tinta-suave); line-height: 1.55; }

.criterios { list-style: none; margin: 0; padding: 8px 0; }
.criterios li {
  display: grid;
  grid-template-columns: 22px 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 18px;
  border-bottom: 1px solid var(--regua-fina);
  font-size: 13px;
}
.criterios li:last-child { border-bottom: none; }
.marca-criterio { font-family: var(--mono); font-weight: 700; text-align: center; }
.nome-criterio {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.criterios .exige { color: var(--tinta-fraca); font-size: 12.5px; }
.criterios .mediu {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  max-width: 190px;
}
/* Passou, falhou e nao medido sao tres estados, e nao dois. Falhou nao e
   vermelho pela mesma razao da palavra: nao e defeito, e o que a historia
   mostrou. Latao e a tinta de "assinalado" da carta. */
.criterios li.passou .marca-criterio { color: var(--sonda); }
.criterios li.falhou .marca-criterio, .criterios li.falhou .mediu { color: var(--latao); }
.criterios li.sem-medida { color: var(--tinta-fraca); }
/* Criterio avaliado que nao decidiu a palavra. Esmaecido, e o ✓ perde a tinta de
   sondagem: azul ao lado de `fraca` se le como atenuante. */
.criterios li.nao-decide { opacity: .5; }
.criterios li.nao-decide .marca-criterio,
.criterios li.nao-decide .mediu { color: var(--tinta-fraca); }
.nota-criterios {
  margin: 0;
  padding: 8px 18px 12px;
  font-size: 12px;
  color: var(--tinta-fraca);
  border-top: 1px solid var(--regua-fina);
}

.svg-quadro { padding: 8px 10px 4px; }
.grafico-svg { display: block; width: 100%; height: auto; font-family: var(--mono); }
.grafico-svg .grade-linha { stroke: var(--regua-fina); stroke-width: 1; }
.grafico-svg .eixo-zero { stroke: var(--tinta-fraca); stroke-width: 1; }
.grafico-svg .eixo-texto { fill: var(--tinta-fraca); font-size: 11px; }
.grafico-svg .banda { fill: var(--sonda); fill-opacity: .16; stroke: none; }
.grafico-svg .linha-condicional { fill: none; stroke: var(--sonda); stroke-width: 2; }
.grafico-svg .linha-comparador { fill: none; stroke: var(--tinta-fraca); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico-svg .ponto-condicional { fill: var(--sonda); stroke: var(--painel); stroke-width: 1.5; }
.grafico-svg .ponto-comparador { fill: var(--painel); stroke: var(--tinta-fraca); stroke-width: 1.5; }
.grafico-svg .barra-condicional { fill: var(--sonda); fill-opacity: .55; }
.grafico-svg .barra-sobra { fill: var(--sonda); fill-opacity: .3; }
.grafico-svg .linha-baseline { fill: none; stroke: var(--tinta-suave); stroke-width: 1.6; }
.grafico-svg .media-condicional { stroke: var(--sonda); stroke-width: 1.2; stroke-dasharray: 3 3; }
.grafico-svg .media-baseline { stroke: var(--tinta-suave); stroke-width: 1.2; stroke-dasharray: 3 3; }
.grafico-svg .media-condicional-texto { fill: var(--sonda); }
.grafico-svg .media-baseline-texto { fill: var(--tinta-suave); }
/* O horizonte aberto, na curva de todos os horizontes do padrao. */
.grafico-svg .marca-aberta { stroke: var(--sonda); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 2 3; }
.grafico-svg .eixo-aberto { fill: var(--sonda); font-weight: 700; }
.vazio-grafico { color: var(--tinta-fraca); font-size: 13px; padding: 28px 10px; margin: 0; text-align: center; }

.regra { margin: 0; padding-left: 38px; color: var(--tinta-suave); font-size: 14px; max-width: 80ch; }
.regra li { margin-bottom: 8px; line-height: 1.6; }
.regra b { color: var(--tinta); font-weight: 600; }

/* A coluna de evidencia na grade do radar. Uma marca por horizonte, com a
   mesma escala de tinta da palavra no painel -- e o numero dentro e o
   horizonte, e nao uma nota. */
.grade td.evidencia { text-align: left; white-space: nowrap; }
.grade-radar-evidencia { text-align: left; }
.evidencia-celula { display: grid; gap: 4px; }
/* O nome em cima e as marcas embaixo, sempre: com as marcas ao lado do nome, a
   celula quebrava no meio das quatro palavras e o horizonte de 63 caia sozinho
   na linha de baixo, lido como outro padrao. */
.grade a.evidencia-padrao { display: block; border-bottom: none; line-height: 1.2; }
.evidencia-padrao small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  margin-bottom: 2px;
}
.evidencia-padrao .forca-mini + .forca-mini { margin-left: 2px; }
.evidencia-celula .sem-padrao { font-family: var(--mono); font-size: 9.5px; color: var(--tinta-fraca); }
.forca-mini {
  display: inline-block;
  min-width: 18px;
  padding: 0 3px;
  font: 600 9px/14px var(--mono);
  font-style: normal;
  text-align: center;
  border: 1px solid currentcolor;
  border-radius: var(--raio);
}
i.forca-mini.forca-forte { background: var(--sonda); border-color: var(--sonda); color: var(--papel); }
i.forca-mini.forca-moderada { background: var(--sonda-lava); color: var(--sonda); }
i.forca-mini.forca-fraca { color: var(--tinta-suave); }
i.forca-mini.forca-insuficiente { color: var(--tinta-fraca); border-style: dashed; }
.forca-sem { font: 9px var(--mono); font-style: normal; color: var(--latao); }
.alerta-laudo { color: var(--latao); }

/* O caminho do radar para o painel. Mesma forma do `voltar`, com a seta do
   outro lado: e ida, e nao volta. */
.voltar.ir::before { content: none; }
.voltar.ir::after { content: " →"; }

@media (max-width: 720px) {
  .cartao-forca { grid-template-columns: 1fr; }
  .cartao-palavra { border-right: none; border-bottom: 1px solid var(--regua-fina); }
  .criterios li { grid-template-columns: 18px minmax(0, 1fr); padding: 8px 14px; }
  .criterios .exige, .criterios .mediu { grid-column: 2; text-align: left; white-space: normal; }
  .contagem-forca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Estados ------------------------------------------------------------ */

.aviso-caixa {
  border: 1px solid var(--regua);
  border-left: 3px solid var(--latao);
  background: var(--painel);
  padding: 18px 20px;
  margin: 40px 0;
}
.aviso-caixa.grave { border-left-color: var(--baixa); }
.aviso-caixa h3 { margin: 0 0 6px; font-size: 16px; }
.aviso-caixa p { margin: 0; color: var(--tinta-suave); font-size: 14px; max-width: 70ch; }
.aviso-caixa code { font-family: var(--mono); font-size: .9em; background: var(--sonda-lava);
  padding: 1px 5px; border-radius: var(--raio); }

.carregando {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding: 80px 0;
  text-align: center;
}
.carregando::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--sonda);
  animation: sonda 1.1s ease-in-out infinite;
}
@keyframes sonda { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.esqueleto {
  background: linear-gradient(90deg, var(--regua-fina) 25%, var(--painel) 50%, var(--regua-fina) 75%);
  background-size: 200% 100%;
  animation: varre 1.4s linear infinite;
  border-radius: var(--raio);
}
@keyframes varre { to { background-position: -200% 0; } }

/* Agenda (item 33) ---------------------------------------------------- */

.agenda-celula { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.agenda-celula small { font-family: var(--mono); font-size: 11px; }
.agenda-resultado { color: var(--latao); font-weight: 600; }
.agenda-provento  { color: var(--sonda); }
.agenda-nada      { color: var(--tinta-fraca); }

/* Noticias ----------------------------------------------------------- */

/* Oito temas nao cabem numa linha de celular: a faixa de botoes quebra. */
.janelas.quebra { flex-wrap: wrap; max-width: 100%; }

.noticias { list-style: none; margin: 30px 0 0; padding: 0; max-width: 82ch; }
.noticias li { padding: 16px 0 16px 20px; border-top: 1px solid var(--regua-fina); }
.noticias li:first-child { border-top: none; }
.noticias .titulo {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
}
.noticias .titulo:hover { color: var(--sonda); }
.noticias .meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  margin: 6px 0 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--tinta-fraca);
}
.noticias .trecho { margin: 8px 0 0; color: var(--tinta-suave); font-size: 14px; line-height: 1.6; }
.noticias .vazia { color: var(--tinta-fraca); font-size: 14px; }
.noticias code { font-family: var(--mono); font-size: .9em; }

/* A leitura do agente, na ficha ---------------------------------------- */

.leitura-agente { padding: 18px 22px 16px; }
.leitura-agente h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-fraca); margin: 22px 0 8px;
}
.leitura-agente p, .leitura-agente li { color: var(--tinta-suave); font-size: 14px; line-height: 1.6; max-width: 80ch; }
.leitura-agente p { margin: 0; }
.leitura-agente ul { margin: 0; padding-left: 20px; }
.leitura-agente .leitura-observacao { font-family: var(--serif); font-size: 17px; color: var(--tinta); }
.leitura-agente .leitura-fatias b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.leitura-agente .leitura-rodape { font-family: var(--mono); font-size: 11px; color: var(--tinta-fraca); margin: 4px 0 6px; }
.leitura-agente p.leitura-rodape:last-child { margin: 22px 0 0; }
.grade a.marca-leitura {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; margin-left: 8px;
  color: var(--sonda); border-bottom: none; vertical-align: 1px;
}

/* Rodape ------------------------------------------------------------- */

footer {
  margin-top: 72px;
  padding-top: 18px;
  border-top: 1px solid var(--regua);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-fraca);
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  line-height: 1.9;
}
footer b { color: var(--tinta-suave); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  /* Duas listas de oito nomes espremidas lado a lado sao duas colunas de uma
     palavra. Empilhadas, continuam sendo duas listas. */
  .pares-lado-a-lado { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .folha { padding: 0 16px 64px; }
  .confronto-linha { grid-template-columns: 70px 1fr 66px; gap: 8px; }
  /* A tabela do confronto e a excecao a regra "a grade nao encolhe, ela rola".
     La sao onze colunas de numero e rolar e a unica saida; aqui sao tres, e a
     tela existe para por DUAS delas uma ao lado da outra. Uma comparacao que
     exige rolagem horizontal para ver o segundo lado nao e lado a lado.

     O que estoura a largura e o `white-space: nowrap` global sobre o rotulo do
     cluster -- "cluster 0 de 2026-09-11" em uma linha so. Deixa-lo quebrar e o
     que faz os tres caberem em 375 px. */
  .confronto th, .confronto td { padding-left: 0; padding-right: 6px; white-space: normal; }
  .confronto th[scope="row"] { width: 26%; font-size: 9px; letter-spacing: .06em; }
  .confronto td { width: 37%; font-size: 12px; }
  .confronto .grupo-rotulo { font-size: 11px; }
  .confronto .grupo-rotulo small { font-size: 8.5px; letter-spacing: .04em; }
  .barra-interna { padding: 10px 16px; }
  .decomp-linha { grid-template-columns: 96px 1fr 76px; gap: 9px; }
  /* A grade nao encolhe: ela rola. Onze colunas de numero espremidas em 360 px
     seriam onze colunas ilegiveis, e `.rolagem` ja existe para isto. */
  .voltar { display: none; }
}