/* estilo.css — brutalismo paulista (MASP/Lina Bo Bardi): concreto, vigas de
   tinta expostas, vermelho estrutural.

   Os tokens são OS MESMOS do tema `brutalista` do app Tk
   (roastlab/app/main.py:38). Se algum dia divergirem, o app manda: o site é
   espelho também na aparência.

   Regras da linguagem, não negociáveis:
     · divisória = viga de 6px em tinta; borda de componente = 3px
     · zero canto arredondado, zero sombra, zero gradiente
     · zero animação além do estado de foco
     · rótulo em CAPS com letter-spacing; número sempre em mono
*/

:root {
  --concreto: #CDC9C1;
  --painel: #DBD8D1;
  --tinta: #161511;
  --tinta-fraca: #5B574E;
  --vermelho: #C4321F;
  --creme: #F3EFE8;        /* texto SOBRE tinta ou vermelho */
  --campo: #F3EFE8;        /* fundo de campo/tabela */
  --mid: #B0ACA3;          /* divisória fina, desabilitado */
  --apagado: #8F8B82;
  --verde: #256B38;
  --azul: #1D5F9E;
  --laranja: #A05413;

  /* letreiro: no tema noite o bloco ativo continua ESCURO sobre o vermelho —
     figura/fundo não se invertem junto com o resto (TAB_SEL_* do app). */
  --aba-sel-bg: #161511;
  --aba-sel-fg: #F3EFE8;

  --viga: 6px;
  --borda: 3px;
  --marca-e: url("marca-e-creme.png");
  --fonte: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace;

  color-scheme: light;
}

/* "Concreto à noite" — a paleta noturna do app, que NÃO é a inversão da
   clara: as vigas viram creme e o texto sobre elas vira tinta.
   Bloco repetido de propósito (media query + atributo) para o botão de tema
   ganhar do sistema nos DOIS sentidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --concreto: #161511;
    --painel: #211F1A;
    --tinta: #DBD8D1;
    --tinta-fraca: #8F8B82;
    --vermelho: #E0492F;
    --creme: #161511;
    --campo: #26241F;
    --mid: #3A362F;
    --apagado: #5B574E;
    --verde: #4C9A63;
    --azul: #5B94CC;
    --laranja: #C97A3A;
    --aba-sel-bg: #161511;
    --aba-sel-fg: #DBD8D1;
    --marca-e: url("marca-e-tinta.png");
    color-scheme: dark;
  }
}

:root[data-tema="escuro"] {
  --concreto: #161511;
  --painel: #211F1A;
  --tinta: #DBD8D1;
  --tinta-fraca: #8F8B82;
  --vermelho: #E0492F;
  --creme: #161511;
  --campo: #26241F;
  --mid: #3A362F;
  --apagado: #5B574E;
  --verde: #4C9A63;
  --azul: #5B94CC;
  --laranja: #C97A3A;
  --aba-sel-bg: #161511;
  --aba-sel-fg: #DBD8D1;
  --marca-e: url("marca-e-tinta.png");
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  /* o body nunca rola na horizontal: tabela larga rola dentro da .rolagem */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--concreto);
  color: var(--tinta);
  font: 400 14px/1.5 var(--fonte);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--tinta); }

:focus-visible {
  outline: var(--borda) solid var(--vermelho);
  outline-offset: 2px;
}

/* ── Letreiro ─────────────────────────────────────────────────────────────── */
.letreiro {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--vermelho);
  border-bottom: var(--viga) solid var(--tinta);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: var(--creme);
  font: 900 20px var(--fonte);
  letter-spacing: .14em;
  text-decoration: none;
  white-space: nowrap;
}

/* A marca reduzida (o "e" do zip de 15/08) no lugar do wordmark de texto.
   PNG com alfa em DUAS tintas, trocadas pela mesma regra do --creme: creme
   sobre o vermelho do dia, tinta sobre o vermelho da noite. */
.marca-logo {
  width: 36px;
  height: 27px;
  background: var(--marca-e) center / contain no-repeat;
}

.marca small {
  font: 700 10px var(--fonte);
  letter-spacing: .18em;
  opacity: .78;
}

.secoes { display: flex; flex-wrap: wrap; align-items: stretch; }

.secao {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--creme);
  font: 800 12px var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.secao.ativa { background: var(--aba-sel-bg); color: var(--aba-sel-fg); }

.canto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 14px;
}

.canto button {
  border: 0;
  background: transparent;
  color: var(--creme);
  font: 800 10.5px var(--fonte);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
}

.canto button:hover { text-decoration: underline; }
.canto form { margin: 0; }

.canto .link-loja {
  color: var(--creme);
  font: 800 12px var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 8px;
}

.canto .link-loja:hover { text-decoration: underline; }

/* ── Página ───────────────────────────────────────────────────────────────── */
.pagina {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.titulo {
  margin: 0 0 18px;
  font: 900 26px var(--fonte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.titulo small {
  display: block;
  margin-top: 4px;
  font: 600 11.5px var(--fonte);
  letter-spacing: .1em;
  color: var(--tinta-fraca);
  text-transform: uppercase;
}

.modulo {
  border: var(--viga) solid var(--tinta);
  background: var(--painel);
  padding: 15px 17px 13px;
  margin: 0 0 22px;
}

.modulo > h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: var(--borda) solid var(--tinta);
  font: 800 12px var(--fonte);
  letter-spacing: .18em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.modulo > h2 span {
  font: 500 11px var(--mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

.nota {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.vazio {
  margin: 6px 0;
  padding: 18px 0;
  text-align: center;
  font: 700 12px var(--fonte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ── Cartões de indicador ─────────────────────────────────────────────────── */
/* Sem gap "vazio": o fundo de tinta aparece pelas frestas e vira viga. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: var(--viga);
  background: var(--tinta);
  border: var(--viga) solid var(--tinta);
  margin: 0 0 22px;
}

.kpi { background: var(--painel); padding: 11px 13px 13px; }

.kpi .rot {
  font: 700 10px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.kpi .val {
  margin-top: 5px;
  font: 700 21px var(--mono);
  line-height: 1.15;
  word-break: break-word;
}

.kpi .sub { margin-top: 3px; font-size: 11px; color: var(--tinta-fraca); }
.kpi.alarme { background: var(--vermelho); color: var(--creme); }
.kpi.alarme .rot, .kpi.alarme .sub { color: var(--creme); opacity: .85; }

/* ── Tabelas ──────────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rolagem table { min-width: 560px; }

th {
  background: var(--tinta);
  color: var(--creme);
  font: 800 11px var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 12px;
  white-space: nowrap;
}

td {
  padding: 8px 12px;
  border-bottom: 2px solid var(--mid);
  font-weight: 500;
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }

td.n, th.n {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
}

td.mono, .mono { font-family: var(--mono); }
td small { color: var(--tinta-fraca); font-weight: 400; }

/* Vermelho nunca é perigo: é estado vivo/seleção/alerta — mapa de botões do
   design (05/08). Linha selecionada (comparação de torras) e linha de alerta
   (estoque abaixo do mínimo) usam o mesmo tratamento visual. */
tr.sel td, tr.alerta td {
  background: var(--vermelho);
  color: var(--creme);
  border-bottom-color: var(--tinta);
}

tr.sel td a, tr.alerta td a { color: var(--creme); }

td a { color: inherit; }

.marcador {
  display: inline-block;
  padding: 2px 8px 3px;
  font: 700 10.5px var(--fonte);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--creme);
}

.marcador.saida { background: var(--laranja); }
.marcador.entrada { background: var(--verde); }
.marcador.frio { background: var(--mid); color: var(--tinta); }

/* ── Formulários ──────────────────────────────────────────────────────────── */
label.rotulo {
  display: block;
  margin: 0 0 5px;
  font: 700 10.5px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], select {
  width: 100%;
  background: var(--campo);
  color: var(--tinta);
  border: var(--borda) solid var(--tinta);
  border-radius: 0;
  font: 500 14px var(--fonte);
  padding: 9px 11px;
}

textarea {
  width: 100%;
  background: var(--campo);
  color: var(--tinta);
  border: var(--borda) solid var(--tinta);
  border-radius: 0;
  font: 500 14px/1.5 var(--fonte);
  padding: 9px 11px;
  resize: vertical;
}

input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--vermelho); }

.btn {
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: var(--tinta);
  color: var(--creme);
  font: 800 13px var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
  text-decoration: none;
}

.btn.verde { background: var(--verde); }

.btn.flat {
  background: var(--campo);
  color: var(--tinta);
  border: var(--borda) solid var(--tinta);
  padding: 8px 15px;
}

.btn.flat:hover { background: var(--tinta); color: var(--creme); }

/* P0 desabilitado: fica visível pra ensinar o que existe, sem convidar clique —
   mapa de botões do design (05/08). Sem hover invertido quando desabilitado. */
.btn:disabled, .btn.flat:disabled {
  background: var(--mid);
  color: var(--tinta-fraca);
  border-color: var(--mid);
  cursor: default;
}

.linha-busca { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.linha-busca input { flex: 1 1 190px; width: auto; }

/* ── Login ────────────────────────────────────────────────────────────────── */
.entrada { max-width: 420px; margin: 8vh auto 0; }
.entrada .campo { margin: 0 0 14px; }
.entrada .btn { width: 100%; }

.erro {
  margin: 0 0 14px;
  padding: 10px 13px;
  background: var(--vermelho);
  color: var(--creme);
  font: 600 13px var(--fonte);
}

/* ── Comparação de torras ─────────────────────────────────────────────────── */
.barra-comparar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.barra-comparar .contador {
  margin-right: auto;
  font: 700 11px var(--fonte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.barra-metrica { display: flex; gap: 8px; margin: 0 0 12px; }

.barra-metrica .btn.flat.ativo { background: var(--tinta); color: var(--creme); }

/* Quadradinho de cor da série na tabela de métricas — o fundo é pintado por
   JS (mesma fórmula HSL do gráfico), a marcação aqui é só o formato. */
.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tinta);
  vertical-align: middle;
}

/* ── Torra ────────────────────────────────────────────────────────────────── */
.moldura-grafico {
  position: relative;
  height: 420px;
  background: var(--painel);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px 18px;
  margin: 0;
}

.ficha div { padding: 6px 0; border-bottom: 2px solid var(--mid); }

.ficha dt {
  font: 700 10px var(--fonte);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.ficha dd { margin: 2px 0 0; font: 500 13.5px var(--mono); word-break: break-word; }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.colunas > .modulo { margin: 0; }

/* ── Download do instalador ───────────────────────────────────────────────── */
/* Um alvo só, do tamanho da página: a pessoa que abre esta tela abre uma vez na
   vida e não deve precisar procurar onde clicar. */
.baixa {
  display: block;
  padding: 20px 18px;
  background: var(--verde);
  color: var(--creme);
  border: var(--borda) solid var(--tinta);
  text-align: center;
  text-decoration: none;
}

.baixa b {
  display: block;
  font: 900 26px var(--fonte);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
}

.baixa .detalhe {
  display: block;
  margin-top: 7px;
  font: 600 12.5px var(--mono);
}

.baixa:hover { background: var(--tinta); }

.atencao { margin: 12px 0 0; font-size: 13px; }

/* Sem gap "vazio": o fundo de tinta aparece pelas frestas e vira viga —
   mesmo truque dos cartões do painel. */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--viga);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  background: var(--tinta);
  border: var(--viga) solid var(--tinta);
}

.passos li { background: var(--campo); padding: 12px 14px 14px; counter-increment: passo; }

.passos li::before {
  content: counter(passo);
  display: block;
  font: 900 30px var(--mono);
  line-height: 1;
  color: var(--vermelho);
}

.passos b { display: block; margin-top: 7px; font: 800 13.5px var(--fonte); }
.passos span { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-fraca); }

/* O aviso do SmartScreen: se ela não ler isto, acha que é vírus e não instala.
   Viga vermelha na lateral em vez de fundo vermelho — alarme, não pânico. */
.destaque {
  margin: 18px 0 0;
  padding: 12px 15px;
  background: var(--campo);
  border-left: var(--viga) solid var(--vermelho);
}

.destaque h3 {
  margin: 0 0 8px;
  font: 800 12px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.destaque p { margin: 0 0 9px; font-size: 13px; }
.destaque p:last-child { margin-bottom: 0; }

.destaque .caminho { font-family: var(--mono); font-weight: 700; }

.destaque .caminho span {
  display: inline-block;
  padding: 4px 9px;
  background: var(--tinta);
  color: var(--creme);
}

/* ── Guia de instalação (INSTALAR.md renderizado) ─────────────────────────── */
.guia { font-size: 14px; }
.guia h3 {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: var(--borda) solid var(--tinta);
  font: 800 12px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.guia h3:first-child { margin-top: 0; }
.guia h4 {
  margin: 16px 0 6px;
  font: 800 12.5px var(--fonte);
  letter-spacing: .04em;
}
.guia p { margin: 0 0 9px; }
.guia ol, .guia ul { margin: 0 0 12px; padding-left: 22px; }
.guia li { margin: 0 0 8px; }
.guia li p { margin: 6px 0; }
.guia li blockquote { margin: 8px 0; }
.guia hr { border: 0; border-top: var(--borda) solid var(--mid); margin: 18px 0; }
.guia code {
  font: 500 12.5px var(--mono);
  background: var(--campo);
  border: 1px solid var(--mid);
  padding: 1px 5px;
  word-break: break-word;
}
.guia pre {
  margin: 0 0 12px;
  padding: 11px 13px;
  background: var(--tinta);
  overflow-x: auto;
}
.guia pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--creme);
  font-size: 13px;
  white-space: pre;
}
.guia blockquote {
  margin: 0 0 12px;
  padding: 9px 13px;
  border-left: var(--viga) solid var(--vermelho);
  background: var(--campo);
}
.guia blockquote p:last-child { margin: 0; }
.guia a { color: var(--tinta); }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
.rodape {
  border-top: var(--viga) solid var(--tinta);
  padding: 13px 16px;
  font: 600 10.5px var(--fonte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

/* ── Vitrine pública (CONTRATO §9) ────────────────────────────────────────── */
/* Sem gap "vazio": mesmo truque dos .cartoes — o fundo de tinta vira viga. */
.vitrine-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--viga);
  background: var(--tinta);
  border: var(--viga) solid var(--tinta);
  margin: 0 0 22px;
}

.vitrine-cartao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--painel);
  padding: 16px 17px 15px;
  color: var(--tinta);
  text-decoration: none;
}

.vitrine-cartao h2 {
  margin: 0;
  font: 900 18px var(--fonte);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.vitrine-ficha { display: grid; gap: 2px; margin: 0; font-size: 12px; color: var(--tinta-fraca); }
.vitrine-ficha div { display: flex; gap: 6px; }
.vitrine-ficha dt { font-weight: 700; }
.vitrine-ficha dt::after { content: ":"; }
.vitrine-ficha dd { margin: 0; }

.vitrine-data {
  margin: 4px 0 0;
  font: 600 11px var(--mono);
  color: var(--tinta-fraca);
}

.vitrine-cartao h2 a { color: inherit; text-decoration: none; }

.vitrine-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  margin-top: auto;
}

/* ── Receitas públicas (CONTRATO §9.9) ────────────────────────────────────── */
/* Chips de filtro por método, acima do feed — mesmo tratamento .flat/.ativo
   da barra de métricas da comparação e das abas da calculadora. */
.chips-metodo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chips-metodo .btn.flat.ativo { background: var(--tinta); color: var(--creme); }

.receitas-pub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.receita-pub {
  display: flex;
  flex-direction: column;
  border: var(--borda) solid var(--tinta);
  padding: 12px 14px;
  background: var(--painel);
}

.rp-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--mid);
  padding: 0 0 8px;
  margin: 0 0 4px;
}

.rp-cab b {
  font: 900 15px var(--fonte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rp-autor { font: 600 11px var(--mono); color: var(--tinta-fraca); }

.rp-cafe { margin: 4px 0 0; font: 600 11px var(--mono); color: var(--tinta-fraca); }
.rp-cafe a { color: inherit; }

/* o passo a passo guarda as quebras de linha de quem escreveu */
.rp-passos, .rp-obs { margin: 8px 0 0; white-space: pre-line; }
.rp-obs { color: var(--tinta-fraca); }

.rp-quando { margin: 10px 0 0; font: 600 11px var(--mono); color: var(--apagado); }

.rp-campo { margin: 0 0 14px; }

/* célula longa da tabela de moderação: quebra em vez de esticar a linha */
td.quebra { white-space: normal; min-width: 220px; }

/* ── Prova do cliente (vitrine pública, CONTRATO §9.7) ────────────────────── */
/* Utilitária: o JS esconde os chips quando a roda sensorial monta. Sem JS a
   classe nunca é aplicada e o formulário continua inteiro. */
.oculto { display: none !important; }

/* Honeypot: fora da tela para gente (e para leitor de tela, via aria-hidden no
   HTML), presente no DOM para o robô que preenche todo <input> que encontra.
   `display:none` não serviria — é a primeira coisa que um script decente pula. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.chips-grupo { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }

.chips-grupo legend {
  padding: 0;
  font: 700 10px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }

/* O checkbox é REAL e continua focável (fora da tela, não `display:none`): é
   ele que o form envia, é ele que a roda toggla, e é ele que o teclado alcança
   quando não há roda. O que se vê é o <span>. */
.chip { position: relative; display: inline-flex; cursor: pointer; }

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.chip span {
  display: inline-block;
  padding: 6px 10px 7px;
  background: var(--campo);
  color: var(--tinta);
  border: var(--borda) solid var(--tinta);
  font: 700 11px var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Marcado = vermelho cheio, o MESMO estado do setor selecionado na roda e da
   ficha removível. Aqui o vermelho não é alarme: é "isto é seu". */
.chip input:checked + span {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: var(--creme);
}

.chip input:focus-visible + span {
  outline: var(--borda) solid var(--vermelho);
  outline-offset: 2px;
}

/* Teto de notas atingido: o que sobra fica visível e apagado, sem convidar o
   dedo — mesma regra do botão P0 desabilitado. */
.chip input:disabled + span {
  background: var(--campo);
  border-color: var(--mid);
  color: var(--apagado);
  cursor: default;
}

.prova-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 16px;
  margin: 14px 0 16px;
}

.prova-sub {
  margin: 10px 0 0;
  font: 700 10px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}



/* ── Lambe: o mapa sensorial (§9.7) ───────────────────────────────────────── */
/* Cartaz de rua, não gráfico: as palavras se empilham em fluxo e o TAMANHO é o
   dado. Alinhamento pela BASE (nunca pelo centro) — é o que faz corpos
   diferentes na mesma linha lerem como uma linha só de texto, do jeito que um
   lambe-lambe colado na parede lê.

   Corpo e cor são escritos por provas.js (só ali se sabe a largura da folha e
   o token do tema corrente). Sem JavaScript ficam estes valores: as palavras
   continuam na tela, na ordem certa, sem escala. */
.lambe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  margin: 2px 0 14px;
}

.lambe b {
  font: 900 15px/0.92 var(--fonte);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* A marca de quem votou, escrita pelo navegador de quem votou. Herda a COR da
   palavra, mas em corpo pequeno e mono: é anotação sobre a palavra, não parte
   dela — "JABUTICABA" grita, o "você" sussurra do lado. O .3em escala junto:
   palavra grande, anotação proporcional. */
.lambe .tag-voce {
  font-style: normal;
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 700;
  letter-spacing: .1em;
  vertical-align: super;
}

/* Linha de botões de um módulo (provar, votar de novo, ver a torra). */
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

/* Carimbo de registrado: verde do "feito" do resto do sistema, canto reto. */
.feito {
  margin: 12px 0 0;
  padding: 11px 14px;
  background: var(--verde);
  color: var(--creme);
  font: 800 12px var(--fonte);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Roda sensorial: SVG desenhado por provas.js sobre os checkboxes do form.
   Só o continente mora aqui — cor de setor é pintada por JS (getComputedStyle
   + repinte no `ers:tema`), porque atributo de SVG não herda variável de CSS. */
.roda { margin: 2px 0 12px; display: flex; justify-content: center; }
.roda svg { display: block; width: 100%; max-width: 430px; height: auto; }
.roda .setor { cursor: pointer; }
.roda .setor.travado { cursor: default; }
.roda .divisoria { pointer-events: none; }
.roda text { pointer-events: none; user-select: none; -webkit-user-select: none; }

/* Contador do topo (o mesmo número do miolo da roda): mono, porque é número,
   e vermelho quando já tem nota marcada. Nasce VAZIO no HTML — sem JS não há
   roda nem fichas, e um "0/3" parado mentiria sobre o que a página sabe. */
.prova-contador { font: 700 14px var(--mono); color: var(--vermelho); }
.prova-contador[data-zerado] { color: var(--tinta-fraca); }

/* Fichas do que foi marcado, com o × para tirar. Alvo de 44px (dedo), vermelho
   cheio como o setor selecionado: a ficha é o MESMO estado visto de outro
   ângulo, não um segundo controle. */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

.fichas .ficha {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--vermelho);
  color: var(--creme);
  border: var(--borda) solid var(--tinta);
  font: 700 12px var(--fonte);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Legenda das famílias da roda: uma linha só, na ordem em que elas aparecem no
   giro. Nasce oculta — sem roda não há setor para as cores agruparem. */
.legenda-cats {
  margin: 0 0 12px;
  font: 400 9.5px/1.7 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ENVIAR é o fim do caminho: largura inteira, alvo alto, vermelho cheio —
   e apagado enquanto não há nota marcada (o JS põe data-vazio; sem JS ele
   nasce armado, porque o servidor valida de qualquer jeito). */
.btn-enviar {
  display: block;
  width: 100%;
  min-height: 56px;
  border: var(--borda) solid var(--tinta);
  background: var(--vermelho);
  color: #F3EFE8;
  font: 900 15px var(--fonte);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-enviar[data-vazio] {
  background: transparent;
  color: var(--tinta-fraca);
  cursor: default;
}

/* ── Cartão da Prova Viva (desenho aprovado: 3a voto, 4b mapa) ───────────── */
/* O nome de prateleira em corpo grande com a régua embaixo é a identidade do
   cartão; o rodapé apartado por borda é onde mora a ação. */
.cartao-mapa .mapa-nome {
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: var(--borda) solid var(--tinta);
  font: 900 26px/1 var(--fonte);
  text-transform: uppercase;
}

.cartao-mapa .mapa-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
}

.cartao-mapa .mapa-cab b {
  font: 800 13px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cartao-mapa .mapa-cab span:not(.marcador) { font: 400 10px var(--mono); color: var(--tinta-fraca); }
.cartao-mapa .mapa-cab span a { color: inherit; }

.voto-registrado {
  font: 700 11px var(--mono) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vermelho) !important;
}

.mapa-pe {
  border-top: var(--borda) solid var(--tinta);
  margin-top: 14px;
  padding-top: 14px;
}

.mapa-regua {
  margin: 0 0 12px;
  font: 400 10px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.btn-votar {
  display: block;
  border: var(--borda) solid var(--tinta);
  padding: 15px;
  text-align: center;
  font: 800 13px var(--fonte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}

/* O anel de foco do navegador desenha a CAIXA-LIMITE do setor — um retângulo
   atravessando a roda. O foco de teclado vira traço no próprio setor. */
.roda [role="checkbox"]:focus,
.roda [role="checkbox"]:focus-visible { outline: 0; }
.roda [role="checkbox"]:focus-visible path { stroke: var(--vermelho); stroke-width: 3; }

/* ── Calculadora de extração (pública) ────────────────────────────────────── */
/* Abas dos modos e o par filtrado/espresso: mesmo tratamento da barra de
   métricas da comparação — .flat apagado, o escolhido em tinta cheia. */
.calc-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.calc-abas .btn.flat.ativo { background: var(--tinta); color: var(--creme); }

.calc-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 16px;
  margin: 0 0 4px;
}

/* Número sempre em mono e à direita — a coluna de dígitos tem que alinhar
   quando a pessoa compara dose com bebida no olho. O seletor traz o `input`
   junto de propósito: a regra base de campo usa o atalho `font:` e ganharia
   de uma classe sozinha, devolvendo o número à fonte de texto. */
input.campo-num { font-family: var(--mono); font-weight: 700; text-align: right; }

/* A variável escolhida no cadeado é CALCULADA, não digitada: fundo de
   divisória para o dedo entender que não adianta bater ali. */
.calc-campo input[readonly] { background: var(--mid); color: var(--tinta-fraca); }

/* Grade com `display` de classe ganha do `[hidden]` do navegador: sem esta
   linha, o bloco do modo preciso continuaria na tela desligado. */
.calc-campos[hidden] { display: none; }

/* "RESOLVER" é radio de verdade (um por grupo, navegável pelo teclado) com
   cara de rótulo; o marcador nativo é o único círculo tolerado na folha.
   O interruptor do modo preciso usa o MESMO tratamento: é um controle da
   mesma família, não um segundo assunto. */
.calc-resolver,
.calc-preciso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 700 9.5px var(--fonte);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  cursor: pointer;
}

.calc-resolver input,
.calc-preciso input { width: auto; margin: 0; accent-color: var(--vermelho); }

.calc-preciso { margin-top: 14px; }
.calc-preciso + .calc-campos { margin-top: 10px; }

/* Stepper de xícaras: os dois botões são alvos de dedo, o número fica entre
   eles em mono — digitar também funciona, o passo é só o atalho. */
.calc-passo { display: flex; gap: 8px; align-items: stretch; }
.calc-passo input { flex: 1 1 60px; width: auto; }
.calc-passo .btn.flat { flex: 0 0 auto; padding: 8px 14px; font-size: 16px; line-height: 1; }

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .marca { padding: 11px 14px; }
  .marca small { display: none; }
  .secoes { width: 100%; border-top: var(--borda) solid var(--tinta); }
  .secao { flex: 1 1 auto; justify-content: center; padding: 10px 8px; font-size: 11px; }
  .canto { order: -1; margin-left: auto; }
  .pagina { padding: 16px 12px 32px; }
  .titulo { font-size: 21px; }
  .modulo { padding: 13px 13px 11px; }
  .moldura-grafico { height: 300px; }
  th, td { padding: 7px 9px; }
  .baixa b { font-size: 20px; }
  .baixa .detalhe { font-size: 11.5px; }
  /* o cliente chega por QR NO CELULAR: cartão nenhum divide a largura com
     outro, tabela nenhuma — uma coluna só, do topo ao fim da lista */
  .vitrine-grade { grid-template-columns: 1fr; }
  /* duas colunas fixas: as 4 variáveis do cadeado ficam num quadrado que cabe
     na tela sem rolagem, e o auto-fit não decide sozinho por 1 ou 2 */
  .calc-campos { grid-template-columns: 1fr 1fr; }
  /* método/dose/água lado a lado no celular — os três cabem em duas linhas e
     ninguém rola para achar o botão de enviar */
  .prova-campos { grid-template-columns: 1fr 1fr; }
}