/* public/painel.css — o console e o mapa do radar (desenho v8, aplicado em 14/09/2026).
   Par de public/painel.js. Carregado pela casca (public/index.html) e, na etapa 2, pelo
   radar comparativo.

   Regras deste arquivo:
   1. PREFIXO `rp-` em tudo que nasceu do protótipo. Dezoito seletores do protótipo já
      existem no site com OUTRO significado (`.btn`, `.pilula`, `.modal-fundo`, `.kpi`,
      `.topo`, `.anuncio`, `.vazio`, `.campo`, `.erro-campo`, `.hero`, `.exemplos`...).
      Onde o site já tem o componente (`.btn`, `.pilula`, `.tag`), usa-se o DO SITE.
   2. Nenhuma cor literal fora do bloco de tokens abaixo. Cor em componente é defeito.
   3. Nenhuma fonte de terceiro. O protótipo carregava Chakra Petch e IBM Plex por
      `fonts.googleapis.com`, que a CSP de server.mjs (style-src/font-src 'self') bloqueia:
      erro de console garantido. Aqui a família é a do tema e o número usa `--serif-num`,
      que já é a mono vendorada do produto.
   ───────────────────────────────────────────────────────────────────────────────────── */

/* ── tokens da tela do radar ──────────────────────────────────────────────────────────
   Escala A de cor por ano (decisão do Bruno, C7 de 15/09): os tons EXATOS do protótipo v8
   aprovado (v8/painel.js::escalaDegraus): azul, verde-água, verde, amarelo e amarelo-claro,
   do ano forte mais velho ao mais novo. Não usa o azul de ação nem o cobre de atenção.
   O v8 é escuro e é o que vale. `-claro` é a rede para superfície clara: painel.js mede a
   luminância de --surface e escolhe (CSS não sabe se o tema do T1 ficou claro ou escuro). */
:root{
  --rp-cor-ano-1:#2e6fa8;  --rp-cor-ano-2:#29b8c0;  --rp-cor-ano-3:#4ee39a;
  --rp-cor-ano-4:#c9ee7a;  --rp-cor-ano-5:#e6f2a8;
  /* "sem ano" sólido e recessivo, mas com 3:1 sobre o campo escuro (o rgba .45 do v8 dava
     2,86:1, abaixo do mínimo de elemento gráfico, achado do tema em 15/09) */
  --rp-cor-ano-resto:#6b7f90;  --rp-cor-ano-sem:#627d8f;
  /* véu atrás de modal e folha: um token, nunca literal no componente */
  --rp-veu:rgba(2,9,15,.74);
  --rp-cor-ano-1-claro:#1f5a8f;  --rp-cor-ano-2-claro:#13858c;  --rp-cor-ano-3-claro:#1c9a5e;
  --rp-cor-ano-4-claro:#7f9a1c;  --rp-cor-ano-5-claro:#a39a2e;
  --rp-cor-ano-resto-claro:#8795a2;  --rp-cor-ano-sem-claro:#b3bcc5;
  --rp-malha:rgba(120,130,140,.24);
  /* fio da mediana por versão: um pouco mais claro que a malha, nunca cor de dado */
  --rp-fio-mediana:#9fb6c6;  --rp-fio-mediana-claro:#5f6f7c;

  /* radar polar (home e hub): tons do v8 no escuro, par legível no claro */
  --rp-radar-ponto:#3be0c8;              --rp-radar-ponto-claro:#0f8f7e;
  --rp-radar-anel:rgba(40,86,112,.75);   --rp-radar-anel-claro:rgba(19,28,38,.14);
  --rp-radar-eixo:rgba(40,86,112,.45);   --rp-radar-eixo-claro:rgba(19,28,38,.08);
  --rp-radar-rotulo:rgba(126,160,179,.95); --rp-radar-rotulo-claro:#5f6f7c;
  --rp-radar-placa:rgba(6,20,31,.92);    --rp-radar-placa-claro:rgba(255,255,255,.94);
  --rp-radar-foco:#dbe9f2;               --rp-radar-foco-claro:#131c26;
  --rp-radar-varredura:#dbe9f2;          --rp-radar-varredura-claro:#0b5fa5;
}

/* ── o instrumento: console em cima, mapa embaixo, uma carcaça só ───────────────────── */
.rp-instrumento{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;margin:6px 0 0}
.rp-console{border-bottom:1px solid var(--line)}
.rp-estacoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.rp-estacao{background:var(--surface);padding:12px 15px 10px;min-width:0}
.rp-q{margin:0;font-size:12px;color:var(--muted)}
.rp-val{margin:2px 0 8px;font-weight:800;font-size:clamp(15px,1.5vw,18px);line-height:1.2;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rp-val-aberto{color:var(--muted);font-weight:600}
.rp-rodape{margin:7px 0 0;font-size:11px;color:var(--muted);min-height:1.2em}

/* trilho que se pinta até onde a pessoa arrastou: o controle vira medidor */
.rp-range{--rp-pct:100;width:100%;height:30px;margin:0;background:transparent;display:block;
  appearance:none;-webkit-appearance:none;cursor:pointer}
.rp-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0 calc(var(--rp-pct) * 1%),var(--line2) calc(var(--rp-pct) * 1%))}
.rp-range::-moz-range-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0 calc(var(--rp-pct) * 1%),var(--line2) calc(var(--rp-pct) * 1%))}
.rp-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:var(--accent);border:5px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--accent)}
.rp-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);
  border:5px solid var(--surface);box-shadow:0 0 0 1.5px var(--accent)}
/* "a partir de X": o que a pessoa aceita fica à DIREITA do punho, então o trilho se pinta
   do punho pra direita. Pintar do zero até ele marcaria o que ela recusou. */
.rp-range[data-fill="direita"]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--line2) 0 calc(var(--rp-pct) * 1%),var(--accent) calc(var(--rp-pct) * 1%))}
.rp-range[data-fill="direita"]::-moz-range-track{
  background:linear-gradient(90deg,var(--line2) 0 calc(var(--rp-pct) * 1%),var(--accent) calc(var(--rp-pct) * 1%))}
.rp-range:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* estação do estado: um botão que abre o modal, nunca 27 chips soltos na tela (defeito D6) */
.rp-abrir{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:32px;padding:0 12px;border:1.5px solid var(--line2);border-radius:99px;
  background:var(--surface);color:var(--text2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.rp-abrir:hover{color:var(--accent);border-color:var(--accent)}
.rp-abrir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rp-seta{flex:none;width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}

/* segunda fila do console: versão, outros filtros e a saída de emergência */
.rp-extras{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 15px;
  border-top:1px solid var(--line);background:var(--surface2)}
.rp-solta{margin-left:auto;border-style:dashed}

/* ── o mapa: o herói da página ──────────────────────────────────────────────────────── */
.rp-mapa{position:relative;background:var(--surface);overflow:hidden}
.rp-mapa canvas{display:block;width:100%;
  /* --rp-altura-mapa é medida no boot por painel.js::ajustarAlturaDoMapa (a primeira tela
     tem que terminar na legenda em TODO aparelho). O clamp é só a rede de segurança. */
  height:var(--rp-altura-mapa,clamp(230px,34vw,440px));cursor:crosshair}
.rp-etiqueta{position:absolute;pointer-events:none;z-index:3;max-width:230px;padding:8px 10px;
  background:var(--text);color:var(--bg);border:0;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.4;opacity:0;transform:translate(-50%,-118%);
  transition:opacity .12s;box-shadow:var(--shadow-sm)}
.rp-etiqueta.on{opacity:1}
.rp-etiqueta .rp-n{display:block;font-weight:800;font-size:14px;margin-bottom:1px;
  font-family:var(--serif-num)}
.rp-etiqueta .rp-d{opacity:.85}

/* ── legenda: aqui mora TUDO que o gráfico precisa explicar, em px reais e em HTML.
   O rótulo da zona de garimpo era texto dentro do SVG, com 4,8px de altura real a 360
   (defeito D2) e caixa de fundo medida por contagem de caractere (defeito D4). Fora do
   desenho, os dois defeitos somem e o texto quebra linha sozinho. ───────────────────── */
/* C9 (15/09): legenda compacta. Uma linha só no desktop, régua de anos colada, marcas
   pequenas e espaço curto entre os itens; no celular quebra, mas sem folga sobrando. */
.rp-legenda{display:flex;gap:4px 16px;flex-wrap:wrap;align-items:center;margin:7px 0 0;
  font-size:11.5px;color:var(--text2);line-height:1.3}
.rp-legenda>span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.rp-regua{display:inline-flex;align-items:center;gap:2px 8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.rp-chip-cor{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;flex:none}
.rp-rampa{display:inline-flex;width:92px;height:9px;border-radius:99px;overflow:hidden;margin-right:6px}
.rp-rampa i{display:block;height:100%}
.rp-marca-novo{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--rp-cor-ano-4);box-shadow:0 0 0 3px var(--accent-soft)}
.rp-marca-versao{display:inline-block;width:16px;height:0;flex:none;
  border-top:1.4px dashed var(--rp-fio-mediana)}
.rp-marca-zona{display:inline-block;width:15px;height:11px;flex:none;border:1px dashed var(--good);
  background:repeating-linear-gradient(135deg,transparent 0 3px,var(--good-soft) 3px 5px)}
.rp-zona-txt b{font-weight:700;color:var(--text)}

/* ── a leitura: a resposta do console, em um número e uma frase ─────────────────────── */
.rp-leitura{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 20px;
  align-items:center;margin:16px 0 12px}
.rp-leitura .rp-n{font-family:var(--serif-num);font-size:clamp(30px,5vw,44px);line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.rp-dizeres{min-width:0}
.rp-frase{margin:0;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.35;max-width:56ch;color:var(--text2)}
.rp-frase b{font-weight:800;color:var(--text)}
.rp-apoio{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.rp-compacto{padding:10px 15px;font-size:13.5px}

/* medidas de apoio: uma linha fina, sem moldura, e respondendo ao recorte */
.rp-medidas{display:flex;flex-wrap:wrap;margin:0 0 16px;border-top:1px solid var(--line);padding-top:11px}
.rp-medidas div{padding:0 18px;border-left:1px solid var(--line);min-width:0}
.rp-medidas div:first-child{padding-left:2px;border-left:0}
.rp-medidas .rp-v{font-family:var(--serif-num);font-size:14.5px;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;font-weight:700}
.rp-medidas .rp-r{font-size:11.5px;color:var(--muted);margin-top:2px}

/* zerou: um toque pra afrouxar o que está apertando (o estado vazio do defeito D7 nunca
   mais é um retângulo branco sem caminho de volta) */
.rp-socorro{margin:0 0 16px;padding:12px 14px;border:1px dashed var(--line2);
  border-radius:var(--radius);background:var(--surface2);font-size:13.5px;display:flex;
  gap:12px;align-items:center;flex-wrap:wrap}
.rp-socorro[hidden]{display:none}
.rp-socorro p{margin:0;color:var(--text2)}

/* ── faixa da lista ─────────────────────────────────────────────────────────────────── */
.rp-faixa{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:26px 0 12px;
  max-width:var(--maxw);padding:0 18px;margin-left:auto;margin-right:auto}
.rp-faixa h2{margin:0;font-size:18px;font-weight:800;color:var(--text)}
.rp-quanto{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-faixa .ordenacao{margin-left:auto}

/* ── modal único (estados, versões, outros filtros). `rp-` porque `.modal-fundo` e
   `.modal-caixa` já são o modal de ALERTA do site, com outro tamanho e outro papel. ──── */
.rp-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;padding:16px}
.rp-modal[hidden]{display:none}
.rp-modal-fundo{position:absolute;inset:0;background:var(--rp-veu)}
.rp-modal-caixa{position:relative;display:flex;flex-direction:column;width:min(660px,100%);
  max-height:min(88vh,720px);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.rp-modal-topo{display:flex;align-items:flex-start;gap:14px;padding:16px 18px 12px;
  border-bottom:1px solid var(--line)}
.rp-modal-topo h2{margin:0;font-size:17px;font-weight:800;color:var(--text);flex:1}
.rp-modal-x{flex:none;width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;
  background:var(--surface2);color:var(--text2);font-size:17px;line-height:1;cursor:pointer}
.rp-modal-x:hover{color:var(--accent);border-color:var(--accent)}
.rp-modal-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rp-modal-corpo{padding:14px 18px;overflow:auto;flex:1}
.rp-modal-ajuda{margin:0 0 12px;font-size:13px;color:var(--text2);max-width:60ch;line-height:1.5}
.rp-modal-bloco{margin:0 0 16px}
.rp-modal-bloco h3{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.rp-modal-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--surface2);
  border-radius:0 0 var(--radius) var(--radius)}
.rp-modal-pe .pilula[hidden]{display:none}
.rp-opcoes{display:flex;flex-wrap:wrap;gap:7px}
.rp-opcao{border:1.5px solid var(--line2);background:var(--surface);color:var(--text2);
  cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;
  border-radius:99px;white-space:nowrap}
.rp-opcao:hover{color:var(--accent);border-color:var(--accent)}
.rp-opcao:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rp-opcao b{font-family:var(--serif-num);font-weight:400;opacity:.7;margin-left:6px;font-size:11px}
.rp-opcao[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:700}
.rp-opcao[aria-pressed="true"] b{opacity:.85}

/* ── passo "confere se é isto" (primeiro passo do modal de alerta) ──────────────────── */
.rp-confere-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.rp-confere-lista li{display:flex;gap:10px;align-items:baseline}
.rp-confere-lista li span{color:var(--muted);min-width:62px;font-size:12.5px;flex:none}
.rp-confere-lista li b{font-weight:700;color:var(--text);font-size:13.5px;min-width:0}
.rp-confere-extra{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5;
  border-top:1px solid var(--line);padding-top:9px}

/* ── radar polar (home e hub do comparativo) ───────────────────────────────────────────
   Quadrado que ocupa a largura inteira da coluna onde for posto. Quem monta a página limita
   o tamanho por `--rp-radar-max` (ex.: no celular, para caber inteiro na primeira tela). ── */
.rp-radar{position:relative;width:100%;max-width:var(--rp-radar-max,100%);aspect-ratio:1;margin-inline:auto}
.rp-radar-tela{display:block;width:100%;height:100%;border-radius:50%;cursor:crosshair;
  background:radial-gradient(circle at 50% 50%,var(--surface2,#0a1f2e) 0%,var(--bg,#06141f) 72%);
  border:1px solid var(--line,#1b3d53);touch-action:manipulation}
.rp-radar-etiqueta{position:absolute;pointer-events:none;z-index:3;min-width:150px;max-width:240px;
  padding:8px 11px;background:var(--surface,#0a1f2e);color:var(--text,#dbe9f2);
  border:1px solid var(--line2,#1b3d53);border-radius:var(--radius-sm,8px);box-shadow:var(--shadow-sm,none);
  font-size:12.5px;line-height:1.4;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .12s}
.rp-radar-etiqueta.rp-abaixo{transform:translate(-50%,14px)}
.rp-radar-etiqueta.on{opacity:1}
.rp-radar-etiqueta .rp-n{display:block;font-weight:700;font-size:14px;margin-bottom:1px}
.rp-radar-etiqueta .rp-d{display:block;color:var(--text2,#7ea0b3);font-variant-numeric:tabular-nums}
.rp-radar-etiqueta .rp-dica{color:var(--muted,#7ea0b3);font-size:11.5px;margin-top:2px}

/* ── busca de carro (modal único: buscar na home, trocar no painel) ─────────────────────
   Classe própria `rp-bc`: nasce e morre no body a cada abertura, não depende do #rpModal. */
.rp-bc{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;
  padding:min(9vh,72px) 16px 16px}
.rp-bc-fundo{position:absolute;inset:0;background:var(--rp-veu)}
.rp-bc-caixa{position:relative;display:flex;flex-direction:column;width:min(640px,100%);
  max-height:min(84vh,760px);background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);overflow:hidden;animation:rp-bc-sobe .18s ease-out}
@keyframes rp-bc-sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rp-bc-topo{display:flex;align-items:center;gap:14px;padding:16px 18px 10px}
.rp-bc-topo h2{margin:0;flex:1;font-size:18px;font-weight:800;color:var(--text)}
.rp-bc-form{display:flex;gap:8px;padding:0 18px 12px}
.rp-bc-campo{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:0 12px;
  border:1px solid var(--line2);border-radius:10px;background:var(--bg);cursor:text}
.rp-bc-campo:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rp-bc-campo svg{width:17px;height:17px;color:var(--muted);flex:none}
.rp-bc-texto{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:16px;padding:12px 0}
.rp-bc-texto::placeholder{color:var(--muted);opacity:.8}
.rp-bc-texto::-webkit-search-cancel-button{display:none}
.rp-bc-ir{flex:none}
.rp-bc-ajuda{margin:0;padding:0 18px 10px;font-size:13px;color:var(--text2)}
.rp-bc-corpo{flex:1;overflow:auto;padding:4px 18px 16px;border-top:1px solid var(--line)}

/* a varredura: o radar da home em miniatura, a frase do momento e a barra */
.rp-bc-varredura{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0 12px}
/* enquanto o catálogo não chega, a casa do radar já existe como anel apagado: nunca uma
   coluna vazia do lado da frase */
.rp-bc-mini{aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--surface2) 0%,var(--bg) 72%);border:1px solid var(--line)}
.rp-bc-mini .rp-radar{border:0}
.rp-bc-mini .rp-radar-tela{cursor:default;pointer-events:none}
.rp-radar-mudo .rp-radar-etiqueta{display:none}
.rp-bc-frase{margin:0 0 9px;font-size:16px;font-weight:700;color:var(--text);min-height:1.4em}
.rp-bc-barra{--rp-bc-pct:0%;position:relative;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.rp-bc-barra i{position:absolute;inset:0 auto 0 0;width:var(--rp-bc-pct);border-radius:inherit;
  background:var(--accent);transition:width .25s linear}
.rp-bc-varredura[aria-busy="true"] .rp-bc-barra i::after{content:"";position:absolute;inset:0 0 0 auto;width:28px;
  background:linear-gradient(90deg,transparent,var(--text));opacity:.45}
.rp-bc-pronto .rp-bc-barra i{background:var(--good,var(--accent))}
.rp-bc-falhou .rp-bc-barra i{background:var(--muted)}
.rp-bc-conta{margin:8px 0 0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-bc-modo-trocar .rp-bc-conta{margin:10px 0 8px}
.rp-bc-resposta{margin:2px 0 10px;font-size:13.5px;color:var(--text2);line-height:1.45;max-width:62ch}

.rp-bc-lista{display:flex;flex-direction:column;gap:6px}
.rp-bc-linha{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;
  text-align:left;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font:inherit;cursor:pointer;min-height:56px}
.rp-bc-linha:hover{border-color:var(--line2)}
.rp-bc-linha:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rp-bc-linha[disabled]{cursor:default;opacity:.62}
.rp-bc-linha[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.rp-bc-foto{width:64px;height:46px;border-radius:6px;object-fit:cover;background:var(--line);display:block}
.rp-bc-sem-foto{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px);border:1px dashed var(--line)}
.rp-bc-info{display:flex;flex-direction:column;min-width:0}
.rp-bc-nome{font-weight:700;font-size:14.5px;line-height:1.25}
.rp-bc-dado{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums}
.rp-bc-motivo{font-size:12px;color:var(--muted);margin-top:1px}
.rp-bc-tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:99px;font-size:11px;font-weight:600;
  vertical-align:1px;color:var(--text2);border:1px solid var(--line2)}
.rp-bc-abrir{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.rp-bc-marca{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);position:relative;flex:none}
.rp-bc-linha[aria-pressed="true"] .rp-bc-marca{background:var(--accent);border-color:var(--accent)}
.rp-bc-linha[aria-pressed="true"] .rp-bc-marca::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rp-bc-vazio{margin:6px 0;padding:14px;border:1px dashed var(--line2);border-radius:10px;color:var(--text2);font-size:13.5px}
.rp-bc-pe{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--surface2)}
.rp-bc-escolhidos{margin:0;flex:1 1 200px;font-size:13px;color:var(--text2)}
.rp-bc-escolhidos b{color:var(--text)}
.rp-bc-acoes{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ── cabeçalho do carro: a placa de duas casas (carro | versão) ──────────────────────── */
.rp-cab{margin:0 0 10px}
.rp-cab-placa{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--line2);
  border-radius:12px;background:var(--surface);position:relative}
.rp-cab-titulo{margin:0;display:flex;min-width:0;font-size:inherit;font-weight:inherit;line-height:1}
.rp-cab-carro{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 16px 10px 16px;background:none;border:0;
  border-radius:11px 0 0 11px;color:var(--text);font:inherit;cursor:pointer;text-align:left}
.rp-cab-nome{font-size:clamp(22px,2.9vw,34px);font-weight:800;line-height:1.08;letter-spacing:-.01em;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:2px;
  transition:text-decoration-color .15s}
.rp-cab-carro:hover .rp-cab-nome{text-decoration-color:var(--line2)}
.rp-cab-troca{display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 9px 4px 6px;border:1px solid var(--line2);
  border-radius:99px;color:var(--text2);font-size:12px;font-weight:600;line-height:1}
.rp-cab-troca svg{width:15px;height:15px}
.rp-cab-carro:hover .rp-cab-troca{color:var(--accent);border-color:var(--accent)}
.rp-cab-carro:focus-visible,.rp-cab-versao:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rp-cab-versao-caixa{position:relative;display:flex;border-left:1px solid var(--line2)}
.rp-cab-versao{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;
  align-content:center;min-width:176px;max-width:340px;padding:8px 16px;background:var(--surface2);border:0;
  border-radius:0 11px 11px 0;color:var(--text);font:inherit;cursor:pointer;text-align:left}
.rp-cab-versao:hover{background:var(--accent-soft)}
.rp-cab-versao[disabled]{cursor:default;background:transparent}
.rp-cab-rot{grid-column:1;font-size:11.5px;color:var(--muted);line-height:1.2}
.rp-cab-valor{grid-column:1;font-size:16px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-cab-versao .rp-seta{grid-column:2;grid-row:1/3;align-self:center;color:var(--text2)}
.rp-cab-versao[disabled] .rp-seta{display:none}
.rp-cab-versao[aria-expanded="true"] .rp-seta{transform:rotate(225deg) translate(-2px,-2px)}
/* versão escolhida: a casa acende com o fio de ação, o resto da placa fica quieto */
.rp-cab-ligada .rp-cab-versao{box-shadow:inset 3px 0 0 var(--accent)}
.rp-cab-ligada .rp-cab-valor{color:var(--accent)}
.rp-cab-pop{position:absolute;z-index:20;top:calc(100% + 6px);right:0;width:min(380px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);padding:8px}
.rp-cab-filtro{width:100%;margin:0 0 6px;padding:9px 11px;border:1px solid var(--line2);border-radius:8px;
  background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.rp-cab-filtro:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rp-cab-lista{max-height:min(320px,50vh);overflow:auto;display:flex;flex-direction:column;gap:2px}
.rp-cab-op{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 10px 10px;
  border-radius:8px;cursor:pointer;font-size:13.5px}
.rp-cab-op:hover,.rp-cab-op:focus-visible{background:var(--surface2);outline:none}
.rp-cab-op:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.rp-cab-op[aria-selected="true"]{background:var(--accent-soft)}
.rp-cab-op[aria-selected="true"] .rp-cab-op-nome{color:var(--accent);font-weight:700}
.rp-cab-op-nome{min-width:0;overflow-wrap:anywhere;color:var(--text)}
.rp-cab-op-n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.rp-cab-op-todas{border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:2px}
/* a barrinha é a fatia de anúncios da versão: magnitude numa cor só, neutra */
.rp-cab-op-barra{grid-column:1/-1;height:3px;border-radius:99px;background:var(--line);position:relative;overflow:hidden}
.rp-cab-op-barra::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--rp-fatia,0%);background:var(--muted);border-radius:inherit}
.rp-cab-vazio{margin:8px;color:var(--text2);font-size:13px}
.rp-cab-data{margin:7px 0 0;font-size:12.5px;color:var(--muted)}
.rp-curto{display:none}

/* ── responsivo ─────────────────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .rp-estacoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ C17a (15/09/2026, pedido do Bruno) — DEITADO: filtros à esquerda, gráfico à direita ═══
   Em pé, o console é uma faixa em cima do mapa e ainda sobra altura para o mapa e a legenda.
   Deitado, essa mesma faixa come quase toda a tela e o herói da página fica com um risco de
   190px. Em duas colunas o console vira uma coluna estreita à esquerda e o mapa ocupa a
   direita inteira, na altura que a A4 permite.

   A regra é por ORIENTAÇÃO e LARGURA, não por aparelho (o Bruno pediu assim):
   1) paisagem com altura curta e pelo menos 620px de largura → celular deitado (844×390,
      915×412, 740×360…);
   2) paisagem entre 1000 e 1200px de largura → tablet deitado (1024×768, 1180×820).
   Celular em pé (retrato) e computador (acima de 1200) não entram em nenhuma das duas.

   C17b (reprovado pelo Bruno a 667×375, e corrigido aqui): a coluna de filtros NÃO rola. A
   palavra dele é literal — "não é pra descer uma barra no meio da tela pra configurar os
   filtros principais, você precisa organizar a tela de forma a caber". As quatro estações
   passam a ser UMA por linha, com rótulo e valor na MESMA linha e o trilho fino embaixo; a
   altura veio de três lugares ao mesmo tempo, porque nenhum deles sozinho bastava: o topo
   voltou a uma linha (−32px, estilo.css), a legenda voltou a uma linha (−33px, estilo.css) e a
   estação encolheu de ~82px para ~44px. O que sobra vai todo para o retângulo de gráfico +
   filtros. O canvas cresce para preencher a célula (`flex:1`), com o piso medido por
   ajustarAlturaDoMapa. ══════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:540px) and (min-width:620px),
       (orientation:landscape) and (min-width:1000px) and (max-width:1200px){
  /* A linha tem altura DEFINIDA (`--rp-altura-instrumento`, que public/app.js e
     public/comparar.js copiam do `--rp-altura-mapa` medido por ajustarAlturaDoMapa). Sem isso
     a linha crescia até o conteúdo do console, que deitado é mais alto que o orçamento da
     dobra, e a legenda saía da primeira tela. Com a altura fixa o mapa preenche e o console
     rola por dentro — deitado é o console que cede, nunca o mapa nem a legenda (A4). */
  .rp-instrumento{display:grid;grid-template-columns:minmax(290px,44%) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);align-items:stretch;height:var(--rp-altura-instrumento,auto)}
  /* C17b: SEM `overflow-y`. A coluna não rola — os quatro controles principais cabem. */
  .rp-console{border-bottom:0;border-right:1px solid var(--line);
    display:flex;flex-direction:column;min-width:0}
  .rp-estacoes{grid-template-columns:minmax(0,1fr);flex:0 0 auto;gap:1px}
  /* nota de rodapé de cada estação: a primeira coisa a sair quando a altura é o recurso caro */
  .rp-rodape{display:none}
  /* rótulo e valor dividem a MESMA linha (pergunta à esquerda, resposta à direita, como um
     painel de instrumento), e o trilho ocupa a linha de baixo inteira. Empilhados, o rótulo
     ainda quebrava em duas linhas na coluna estreita e cada estação custava ~82px. */
  .rp-estacao{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
    align-items:center;column-gap:10px;padding:1px 12px 2px}
  .rp-q{grid-column:1;grid-row:1;font-size:11px;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-val{grid-column:2;grid-row:1;margin:0;font-size:13.5px;line-height:1.25;text-align:right}
  /* trilho fino: 20px de caixa com o trilho de 6px no meio. O punho continua com 20px de lado,
     que é o alvo de toque — ele sobra para fora da caixa de propósito (`margin-top:-7px`), e
     não é ele que paga a economia de altura. */
  .rp-range{grid-column:1/-1;grid-row:2;height:20px}
  .rp-range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;border-width:4px}
  .rp-range::-moz-range-thumb{width:14px;height:14px;border-width:4px}
  .rp-abrir{grid-column:1/-1;grid-row:2;min-height:24px;font-size:12px}
  .rp-extras{margin-top:auto;padding:2px 12px;gap:6px}
  .rp-extras .pilula{padding:3px 10px;font-size:12px}
  .rp-mapa{display:flex;flex-direction:column;min-width:0;min-height:0}
  .rp-mapa canvas{flex:1 1 auto;height:auto;min-height:var(--rp-altura-mapa,150px)}
  /* a placa carro+versão encolhe e a linha "Dados atualizados em" sai: deitado, cada pixel
     acima do instrumento é pixel que a legenda perde na primeira tela (A4). A data continua
     no fim da página e no topo da home. */
  .rp-cab{margin-bottom:6px}
  .rp-cab-data{display:none}
  .rp-cab-nome{font-size:19px}
  .rp-cab-carro{padding:5px 13px}
  .rp-cab-versao{padding:4px 13px}
  .rp-cab-rot{font-size:9.5px}
  /* legenda em UMA linha: sem o fio da mediana (rotulada na própria linha do gráfico desde a
     opção C) e com a zona de garimpo em duas palavras. As regras estão em public/estilo.css,
     que é quem carrega por último; aqui fica só o aperto de tamanho. */
  .rp-legenda{margin-top:5px;gap:2px 12px;font-size:10.5px;line-height:1.3}
}
@media (max-width:620px){
  /* A primeira dobra do celular termina na legenda. Tudo aqui existe pra caber nisso. */
  .rp-estacao{padding:8px 12px 6px}
  .rp-val{font-size:14.5px;margin:1px 0 2px}
  .rp-q{font-size:11px}
  /* o rodapé de cada estação é nota de rodapé e custava 4 linhas da dobra */
  .rp-rodape{display:none}
  .rp-range{height:28px}
  .rp-extras{padding:8px 12px}
  .rp-legenda{font-size:11px;gap:3px 12px;margin-top:7px;line-height:1.3}
  .rp-leitura{grid-template-columns:auto minmax(0,1fr);gap:10px 14px}
  .rp-leitura .rp-compacto{grid-column:1/-1;width:100%}
  .rp-medidas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 0}
  .rp-medidas div{padding:0 0 0 14px}
  .rp-medidas div:nth-child(odd){padding-left:2px;border-left:0}
  .rp-faixa{margin-top:22px;padding:0 16px}
  .rp-faixa .ordenacao{margin-left:0;width:100%}
  .rp-modal{padding:0;align-items:flex-end}
  .rp-modal-caixa{width:100%;max-height:92vh;border-radius:14px 14px 0 0;border-bottom:0}
  .rp-modal-corpo{padding:13px 16px}
  .rp-modal-topo,.rp-modal-pe{padding-left:16px;padding-right:16px}
  .rp-modal-pe{border-radius:0}
  /* busca vira folha de baixo pra cima; o radar da varredura encolhe e fica ao lado da frase */
  .rp-bc{padding:0;align-items:flex-end}
  .rp-bc-caixa{width:100%;max-height:92vh;border-radius:14px 14px 0 0;border-bottom:0}
  .rp-bc-topo{padding:14px 16px 8px}
  .rp-bc-form{padding:0 16px 10px}
  .rp-bc-ajuda{padding:0 16px 8px}
  .rp-bc-corpo{padding:2px 16px 14px}
  .rp-bc-pe{padding:10px 16px}
  .rp-bc-varredura{grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 0}
  .rp-bc-frase{font-size:14.5px;margin-bottom:7px}
  .rp-bc-linha{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
  .rp-bc-foto{width:52px;height:40px}
  .rp-bc-abrir{display:none}
  /* a placa vira duas linhas empilhadas, ainda um bloco só */
  .rp-cab-placa{display:flex;flex-direction:column;width:100%}
  .rp-cab-carro{border-radius:11px 11px 0 0;padding:9px 12px;justify-content:space-between;width:100%}
  .rp-cab-titulo{display:block}
  .rp-cab-versao-caixa{border-left:0;border-top:1px solid var(--line2)}
  .rp-cab-versao{width:100%;max-width:none;min-width:0;border-radius:0 0 11px 11px;padding:7px 12px}
  .rp-cab-ligada .rp-cab-versao{box-shadow:inset 0 3px 0 var(--accent)}
  .rp-cab-pop{left:0;right:0;width:auto}
  .rp-cab-nome{font-size:clamp(20px,6.2vw,26px)}
  .rp-cab-troca-txt{display:none}
  .rp-cab-troca{padding:5px}
}
@media (max-width:420px){
  .rp-q{display:none}
  .rp-val{font-size:14px;margin:0 0 2px}
  .rp-estacao{padding:6px 11px 2px}
  .rp-extras{padding:6px 11px}
  .rp-range{height:26px}
  .pilula{font-size:11.5px;padding:5px 10px}
  .rp-legenda{font-size:10.5px;gap:2px 10px;margin-top:6px}
}
@media (max-width:420px){
  .rp-cab-data .rp-longo{display:none}
  .rp-cab-data .rp-curto{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .rp-etiqueta,.rp-radar-etiqueta,.rp-bc-barra i{transition-duration:.001ms}
  .rp-bc-caixa{animation:none}
}