/* ==========================================================================
   Análise de Grupos Servopa — Prop5 Invest
   --------------------------------------------------------------------------
   Identidade Prop5, medida nos arquivos oficiais da marca
   (Logos/PROP5/PROP5 - LOGO2 - tipo B.png), não estimada de captura de tela:

     tinta   #051824   navy da marca, e a cor do texto
     ouro    #FDBE1A   acento da marca
     branco  #FFFFFF

   O ouro é ACENTO, nunca texto: #FDBE1A sobre branco dá 1,7:1 de contraste, e
   o mínimo legível é 4,5:1. Ele aparece em filete, em borda e em fundo de
   realce — em lugar nenhum onde precise ser lido.

   Tema claro, densidade alta: aqui é tela de decisão, em que o vendedor compara
   dezenas de grupos enquanto conversa. Números em tabular-nums, linhas curtas,
   bordas de 1px, sem ornamento — mas sem descer a tipografia a 11px nem adotar
   tema escuro.

   Cor semântica carrega significado e nunca decora:
     --pos  o número que favorece o cliente (lance baixo, pouca concorrência)
     --out  o que custa ou exige atenção (lance alto, estoque acabando)
     --neg  erro e falha de importação, mais nada

   As semânticas NÃO foram trocadas pela paleta da marca: verde/âmbar/vermelho
   são convenção de leitura, e repintá-las de ouro apagaria o significado.

   O semáforo do §18 nunca depende só de cor: cada classe tem um glifo próprio
   e um rótulo textual. Proposta comercial é fotocopiada em preto e branco, e
   daltonismo vermelho-verde atinge 8% dos homens.
   ========================================================================== */

:root {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Marca — Prop5 Invest. Tinta e ouro medidos no arquivo oficial. */
  --brand: #051824;
  --brand-600: #0D3348;
  --brand-300: #5C7383;
  --brand-wash: #E3EAEF;
  --accent: #FDBE1A;
  --accent-wash: #FFF6DF;
  --accent-rule: #E9A800;

  /* Superfícies — neutro frio, viés no matiz da marca (~202°) */
  --paper: #EDF1F4;
  --surface: #FFFFFF;
  --sunken: #F4F7F9;
  --rule: #D9E1E6;
  --rule-strong: #BCC8D0;

  /* Texto */
  --text: #051824;
  --text-muted: #4A5C68;
  --text-subtle: #5B6C77;

  /* Semânticas */
  --pos: #0F6244;
  --pos-wash: #E6F1EC;
  --out: #8A5216;
  --out-wash: #FAF1E3;
  --neg: #93251F;
  --neg-wash: #FAEBEA;

  --radius: 4px;
  --radius-lg: 6px;

  --shadow-card: 0 1px 2px rgba(5, 24, 36, 0.05), 0 1px 3px rgba(5, 24, 36, 0.04);
  --shadow-raised: 0 2px 6px rgba(5, 24, 36, 0.08);

  --t: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Conteúdo só para leitor de tela. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ------------------------------------------------------------- cabeçalho */

.identity-rule {
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 62%, var(--accent) 62%, var(--accent) 100%);
}

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.brand-container { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 40px; width: auto; display: block; }

.brand-title h1 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: normal;
}

.brand-title p {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--text-muted);
  font-variant-numeric: normal;
}

.chrome-rotulo {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: right;
}

.app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 48px;
}

/* --------------------------------------------------------------- botões */

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}

.btn:hover { background: var(--sunken); border-color: var(--brand-300); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  letter-spacing: 0.02em;
}

.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }

.pilula {
  font-family: inherit;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t);
}

.pilula:hover { border-color: var(--brand-300); color: var(--text); }

.pilula.is-ativa {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 500;
}

.pilula-contagem {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-wash);
  color: var(--brand);
}

.pilula.is-ativa .pilula-contagem { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* --------------------------------------------------------------- filtros */

.filtros {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.filtros-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 16px;
}

.filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.filtro-rotulo {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-input-sm,
.filtro-controle {
  font-family: inherit;
  font-size: 13.5px;
  width: 100%;
  padding: 8px 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color var(--t);
}

.filtro-controle:hover { border-color: var(--brand-300); }
.filtro-controle:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-wash); }

.filtro-par-campos { display: flex; align-items: center; gap: 6px; }
.filtro-par-separador { font-size: 12.5px; color: var(--text-subtle); flex: 0 0 auto; }

/* A faixa de crédito é o único filtro em dois níveis: a lista de faixas é quem
   manda, e o par de campos abaixo só afina o que ela já escolheu. Sem o rótulo
   miúdo separando os dois, o vendedor os lê como filtros concorrentes e não
   entende por que digitar no campo troca a opção da lista. */
.filtro-credito { gap: 7px; }

/* O rótulo do ajuste ocupa a linha inteira do grupo: numa coluna de 170px ele
   não cabe ao lado dos dois campos, e encolher os campos para caber deixaria o
   valor cortado. */
.filtro-credito .filtro-par-campos { flex-wrap: wrap; gap: 4px 5px; }

/* `flex: 0 0 auto` E NÃO `flex: 1 0 100%`. O rótulo já esteve dentro de
   `.filtro-par-campos`, que é flex de LINHA, e ali `flex-basis: 100%` queria
   dizer "ocupe uma linha inteira e deixe os campos descerem". Ele foi movido
   para dentro de `.filtro-credito`, que é flex de COLUNA — e na coluna o
   flex-basis é ALTURA. A mesma declaração passou a significar "tenha 100% da
   altura do filtro e cresça": o rótulo virou uma faixa de 118px, empurrou os
   dois campos para FORA da caixa do pai e eles foram cair sobre o cabeçalho
   "Grupo 1524 — Imóveis" do detalhe.

   Regra de flex é relativa ao eixo do PAI. Mover o elemento sem revisar a
   declaração é o defeito. */
.filtro-ajuste-rotulo {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.filtros-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.filtros-resumo {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  flex: 1 1 260px;
}

/* --------------------------------------------------------------- ranking */

.ranking h2, .detalhe h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: normal;
}

.criterio-ranking {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 78ch;
}

.referencia-conjunto {
  font-size: 12.5px;
  color: var(--text);
  background: var(--sunken);
  border-left: 3px solid var(--brand-300);
  padding: 7px 11px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 10px;
  max-width: 78ch;
}

/* Sem texto, estes nós pintariam uma barra cinza vazia. Eles são preenchidos
   por textContent e ficam vazios em situações legítimas — modalidade TODOS não
   tem referência de conjunto, porque os critérios não são comparáveis. */
.referencia-conjunto:empty,
.criterio-ranking:empty,
.filtros-resumo:empty { display: none; }

.lista-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
  /* Folga para o selo de posição, que é absoluto e sobe 9px acima do cartão. */
  margin-top: 22px;
}

.bloco-secundario { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); }

.bloco-titulo {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: normal;
}

/* Na modalidade TODOS, cada bloco é filho direto de #lista-ranking, que é um
   grid de cartões. Sem ocupar a linha inteira, os blocos virariam colunas do
   grid de fora e o grid de cartões de dentro nunca teria largura para abrir —
   quatro modalidades empilhadas lado a lado, uma coluna cada. */
.bloco-modalidade { grid-column: 1 / -1; margin-top: 26px; }
.bloco-modalidade:first-child { margin-top: 4px; }

.criterio-bloco {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  max-width: 78ch;
}

/* ---------------------------------------------------------------- cartão */

.cartao-grupo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t), border-color var(--t);
}

.cartao-grupo:hover { box-shadow: var(--shadow-raised); border-color: var(--rule-strong); }
.cartao-grupo.is-selecionado { border-color: var(--brand); }

.cartao-posicao {
  position: absolute;
  top: -9px;
  left: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
}

.cartao-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.cartao-codigo { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cartao-segmento { font-size: 12px; color: var(--text-muted); }

.cartao-selos { display: flex; flex-wrap: wrap; gap: 5px; }

.selo {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  background: var(--sunken);
  color: var(--text-muted);
  white-space: nowrap;
}

.selo-escassez { background: var(--out-wash); border-color: #E2CBA4; color: var(--out); }
.selo-quitacao { background: var(--out-wash); border-color: #E2CBA4; color: var(--out); }
.selo-seguro { background: var(--out-wash); border-color: #E2CBA4; color: var(--out); }
.selo-formacao { background: var(--brand-wash); border-color: var(--brand-300); color: var(--brand); }
.selo-parcial, .selo-embutido { background: var(--sunken); }

/* O indicador principal é o maior peso visual do cartão: é a resposta que o
   vendedor precisa ler em menos de dez segundos. */
.cartao-destaque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 11px 13px;
}

.cartao-destaque-valor {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.cartao-destaque-rotulo { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.cartao-destaque-apoio { font-size: 12px; color: var(--text-subtle); margin-top: 3px; }

.cartao-grade { display: flex; flex-direction: column; gap: 4px; }

.cartao-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--rule);
}

.cartao-item:last-child { border-bottom: 0; }
.cartao-rotulo { color: var(--text-muted); flex: 1 1 auto; }
.cartao-valor { font-weight: 500; text-align: right; flex: 0 0 auto; }

.cartao-acoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.cartao-acoes .btn { justify-content: center; }

.cartao-aviso {
  font-size: 12.5px;
  color: var(--out);
  background: var(--out-wash);
  border-radius: var(--radius);
  padding: 8px 10px;
  line-height: 1.4;
}

/* -------------------------------------------------------------- semáforo */

/* O glifo antes do rótulo é o que faz o semáforo sobreviver à fotocópia em
   preto e branco e ao daltonismo. A cor é reforço, não a informação. */
.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--sunken);
  color: var(--text-muted);
}

.semaforo::before { font-size: 11px; line-height: 1; }
.semaforo-verde::before { content: '\25CF'; }      /* ● cheio */
.semaforo-ambar::before { content: '\25D0'; }      /* ◐ meio */
.semaforo-vermelho::before { content: '\25CB'; }   /* ○ vazio */
.semaforo-sem-classe::before { content: '\2013'; } /* – travessão */

.semaforo-verde { background: var(--pos-wash); border-color: #A9CDBD; color: var(--pos); }
.semaforo-ambar { background: var(--out-wash); border-color: #E2CBA4; color: var(--out); }
.semaforo-vermelho { background: var(--neg-wash); border-color: #DFB2AE; color: var(--neg); }

/* O rótulo textual completo fica só para leitor de tela e para o título: o
   cartão não tem espaço para uma frase, mas a informação não pode sumir. */
.semaforo-rotulo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ------------------------------------------------------ valores semânticos */

.val-forte { color: var(--brand); font-weight: 600; }
.val-favoravel { color: var(--pos); font-weight: 600; }
.val-custo { color: var(--out); font-weight: 500; }
.val-marca { color: var(--brand); font-weight: 500; }
.val-indisponivel { color: var(--text-subtle); font-style: italic; font-weight: 400; }
.val-erro { color: var(--neg); font-weight: 500; }

/* --------------------------------------------------------------- detalhe */

.detalhe-cabecalho {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.detalhe-blocos { display: flex; flex-direction: column; gap: 18px; }

.bloco {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.bloco > .bloco-titulo { padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.bloco-corpo { display: flex; flex-direction: column; gap: 14px; }

.bloco-subtitulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.grade-comercial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 22px;
}

.lista-creditos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 18px;
}

.lista-creditos li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--rule);
}

.lista-planos { display: flex; flex-direction: column; gap: 16px; }

.plano {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 11px 12px;
  background: var(--sunken);
}

.plano-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 8px;
}

/* ----------------------------------------------------------- indicadores */

.indicador-principal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--brand-wash);
  border: 1px solid var(--brand-300);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.indicador-valor { font-size: 38px; font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; }
.indicador-rotulo { font-size: 13px; font-weight: 500; color: var(--brand-600); }
.indicador-denominador { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.grade-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 22px;
}

.grade-indicadores .cartao-item { font-size: 13px; }

.comparativo-filas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 13px;
}

/* O invólucro de cada uma das duas filas. Ele era emitido por tela.js e não
   tinha regra — os dois itens caíam no fluxo padrão do grid e o rótulo não
   alinhava com o valor. */
.comparativo-fila { min-width: 0; }

.comparativo-diferenca {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}

/* Distinguir o que foi MEDIDO na planilha do que a ferramenta CALCULOU é o
   que impede o vendedor de atribuir à Servopa um número que é nosso. */
.camada-medido { border-bottom: 1px dotted var(--rule-strong); }
.camada-calculado { border-bottom: 1px dashed var(--brand-300); }

.procedencia {
  font-size: 11.5px;
  color: var(--text-subtle);
  line-height: 1.45;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------- tabelas */

.tabela-envolucro { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }

.tabela-analise {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--surface);
}

.tabela-analise th,
.tabela-analise td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  white-space: nowrap;
}

.tabela-analise thead th {
  position: sticky;
  top: 0;
  background: var(--sunken);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule-strong);
}

.tabela-analise tbody tr:last-child th,
.tabela-analise tbody tr:last-child td { border-bottom: 0; }

.tabela-analise tbody tr:hover { background: var(--sunken); }

.celula-rotulo { text-align: left !important; font-weight: 500; }
.celula-numero { font-variant-numeric: tabular-nums; }
.celula-apoio { font-size: 11px; color: var(--text-subtle); font-weight: 400; }

.linha-quitacao { background: var(--out-wash); }
.linha-quitacao:hover { background: #F5E7D2; }
.linha-todos-contemplados { background: var(--pos-wash); }
.linha-sorteio { color: var(--text-muted); }

.aviso-linha {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: normal;
  max-width: 26ch;
  margin-left: auto;
}

/* ------------------------------------------------------------ parâmetros */

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

.parametro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}

.parametro-rotulo { color: var(--text-muted); }
.parametro-valor { font-weight: 500; text-align: right; }

.parametro-pendente {
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--sunken);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* --------------------------------------------------------------- avisos */

/* O disclaimer fica permanentemente visível no detalhe: sem rolagem, sem
   clique, sem "leia mais". É exigência regulatória, não rodapé. */
.disclaimer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--sunken);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 13px;
  margin-top: 14px;
}

.disclaimer-curto { font-size: 11px; color: var(--text-subtle); line-height: 1.35; text-align: center; }

.aviso { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

.aviso-vazio {
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-top: 16px;
  max-width: 78ch;
}

.rodape-app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 30px;
  font-size: 11.5px;
  color: var(--text-subtle);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------ importação */

.zona-importacao {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25, 28, 56, 0.42);
}

.zona-importacao[hidden] { display: none; }

.zona-alvo {
  width: min(620px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 2px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-raised);
  transition: border-color var(--t), background var(--t);
}

.zona-importacao.is-ativa .zona-alvo { border-color: var(--brand); background: var(--brand-wash); }

.zona-alvo h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.zona-alvo p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.zona-alvo code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.zona-alvo label.btn { cursor: pointer; }

.relatorio-carga { display: flex; flex-direction: column; margin-top: 6px; }

.relatorio-linha {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}

.relatorio-linha span:last-child { font-weight: 600; }

.relatorio-avisos { margin-top: 10px; padding-left: 18px; font-size: 12px; color: var(--out); }
.relatorio-avisos li { margin-bottom: 4px; }

.relatorio-erro {
  font-size: 13px;
  color: var(--neg);
  background: var(--neg-wash);
  border: 1px solid #DFB2AE;
  border-radius: var(--radius);
  padding: 10px 12px;
  line-height: 1.45;
}

/* ------------------------------------------------------------ responsivo */

/* =========================================================== visao tabela
   Linhas e colunas para COMPARAR. O cartao continua existindo para LEVAR um
   grupo ao cliente — as duas visoes leem o mesmo ranking.

   Tres decisoes que sustentam a legibilidade e nao sao estetica:

   1. tabular-nums em toda celula numerica. Sem isso o "1" ocupa menos que o
      "8" e as colunas de percentual deixam de alinhar na vertical, que e
      exatamente o movimento de leitura que a tabela existe para servir.
   2. Cabecalho e as duas primeiras colunas grudados. Rolando na horizontal
      atras da coluna de credito, sem isso o vendedor perde de vista QUAL grupo
      esta lendo.
   3. A rolagem horizontal vive no envelope, nunca na pagina. Pagina que rola
      de lado esconde o filtro e o botao de busca.
   ------------------------------------------------------------------------ */

.ranking-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.visao-alternador { display: inline-flex; gap: 0; }

.btn-visao {
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 0;
  margin: 0;
}
.btn-visao:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.btn-visao:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }

/* aria-pressed e a fonte da verdade do estado, e o CSS le dele: assim nao
   existe caminho em que o botao pareca ativo e nao esteja. */
.btn-visao[aria-pressed="true"] {
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
  font-weight: 600;
}

.tabela-ranking-envolucro {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.tabela-ranking {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tabela-ranking thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Fundo OPACO: com cabecalho translucido a linha que passa por baixo dele
     durante a rolagem fica ilegivel. */
  background: var(--sunken);
  border-bottom: 1px solid var(--rule-strong);
  padding: 9px 10px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: bottom;
}

.tabela-ranking thead th.celula-numero { text-align: right; }

.tabela-ranking tbody td,
.tabela-ranking tbody th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  background: var(--surface);
}

.tabela-ranking tbody tr:last-child td,
.tabela-ranking tbody tr:last-child th { border-bottom: 0; }

.tabela-ranking tbody tr:nth-child(even) td,
.tabela-ranking tbody tr:nth-child(even) th { background: var(--sunken); }

/* O realce de hover e o de foco sao DIFERENTES do zebra e um do outro: com a
   mesma cor, quem navega por teclado nao sabe onde esta. */
.tabela-ranking tbody tr:hover td,
.tabela-ranking tbody tr:hover th { background: var(--brand-wash); }

.tabela-ranking tbody tr:focus-within td,
.tabela-ranking tbody tr:focus-within th {
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-rule);
}

.tabela-ranking .celula-numero {
  text-align: right;
  white-space: nowrap;
}

.tabela-ranking .celula-apoio {
  display: block;
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 400;
  margin-top: 1px;
}

/* A coluna do criterio e a que o cliente pediu para nao perder de vista em
   nenhuma ordenacao. Ela se destaca por peso, tamanho e um filete de acento —
   e nao so por cor. */
.tabela-ranking .celula-criterio {
  background: var(--accent-wash);
  border-left: 2px solid var(--accent);
  border-right: 1px solid var(--rule);
}
.tabela-ranking tbody tr:nth-child(even) td.celula-criterio { background: #FDF3DC; }
.tabela-ranking tbody tr:hover td.celula-criterio { background: #F7EBCE; }
.tabela-ranking thead th.celula-criterio {
  background: #FBEDC8;
  color: var(--text);
}
.tabela-ranking .celula-criterio-valor {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.tabela-ranking .celula-posicao {
  width: 46px;
  color: var(--text-subtle);
  font-weight: 600;
}

.tabela-ranking .celula-rank { width: 76px; white-space: nowrap; }
.tabela-ranking .celula-rank-valor { font-weight: 600; margin-left: 4px; }

/* Quando a ordem exibida E a do criterio, as duas colunas dizem o mesmo. A
   coluna continua na tela — sumir e reaparecer conforme a ordenacao faria a
   tabela mudar de largura a cada troca de filtro. */
.tabela-ranking .col-rank-espelho { color: var(--text-subtle); }

/* Primeira coluna e coluna do grupo grudadas: sao a referencia da linha
   durante a rolagem horizontal. */
.tabela-ranking .celula-posicao,
.tabela-ranking .celula-grupo { position: sticky; z-index: 2; }
.tabela-ranking .celula-posicao { left: 0; }
.tabela-ranking .celula-grupo { left: 46px; border-right: 1px solid var(--rule); }
.tabela-ranking thead th.celula-posicao,
.tabela-ranking thead th.celula-grupo { z-index: 4; }

.tabela-ranking .celula-grupo {
  min-width: 152px;
  text-align: left;
  font-weight: 400;
}

.celula-grupo-codigo {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.tabela-ranking .celula-grupo .cartao-selos {
  margin-top: 4px;
  gap: 3px;
}
.tabela-ranking .celula-grupo .selo { font-size: 9.5px; padding: 1px 5px; }

.tabela-ranking .celula-motivo {
  max-width: 320px;
  white-space: normal;
  color: var(--text-muted);
  font-size: 12.5px;
}

.tabela-ranking .celula-credito { font-weight: 500; }
.tabela-ranking .celula-acao { text-align: right; }

.tabela-secundaria .celula-grupo { left: 0; }

/* Semaforo de tabela: ponto COM forma. Verde e vermelho viram o mesmo cinza na
   fotocopia, e 8% dos homens nao distinguem os dois na tela. */
.semaforo-ponto {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: -1px;
  border: 2px solid currentColor;
}
.semaforo-ponto.semaforo-verde { color: var(--pos); background: var(--pos); }
.semaforo-ponto.semaforo-ambar {
  color: var(--out);
  background: linear-gradient(90deg, var(--out) 0 50%, transparent 50% 100%);
}
.semaforo-ponto.semaforo-vermelho { color: var(--neg); background: transparent; }
.semaforo-ponto.semaforo-sem-classe { color: var(--rule-strong); background: transparent; }

/* ==================================================== dica no hover
   Sinal discreto de "tem explicacao aqui" mais a caixinha que aparece ao passar
   o mouse. O gatilho e o ELEMENTO INTEIRO marcado com .tem-dica, nao so o
   sinalzinho: o pedido foi que passar o mouse sobre a palavra "concorrencia"
   tambem mostrasse o texto, e mirar um circulo de 14px com o mouse e trabalho
   que ninguem quer ter.

   `:focus-within` ao lado de `:hover` nao e enfeite de acessibilidade: sem ele
   quem chega no sinal pelo Tab nunca ve a caixa que o proprio botao anuncia via
   aria-describedby. */

.tem-dica { position: relative; }

.dica { display: inline-block; }

.dica-sinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  /* O sinal nao e um texto em caixa alta como o cabecalho da tabela: herdar o
     text-transform deixaria o "!" igual e o rotulo de leitor de tela gritado. */
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
  transition: border-color var(--t), color var(--t), background var(--t);
}

.tem-dica:hover .dica-sinal,
.dica-sinal:hover,
.dica-sinal:focus-visible {
  border-color: var(--brand);
  background: var(--brand-wash);
  color: var(--brand);
}

/* PADRAO: ancorada a esquerda da celula, abrindo para a DIREITA. Serve para a
   coluna que fica no comeco da tabela — abrindo para a esquerda ela cobriria a
   coluna GRUPO, que e sticky e e o que identifica a linha, justo no momento em
   que o vendedor pediu ajuda.

   `.dica-abre-esquerda` inverte, e existe para a coluna que fica no fim: medido,
   a concorrencia na familia PRECO comeca a 879px e uma caixa de 300px abrindo
   para a direita e RECORTADA pelo `overflow-x` do envolucro em qualquer janela
   abaixo de 1400px. */
.dica-caixa {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 300px;
  padding: 9px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  /* O cabecalho da tabela e caixa alta, sem quebra e com espacamento de letra.
     Sem estas tres, a caixinha herdaria tudo isso e sairia como uma faixa de
     texto gritado numa unica linha, atravessando a tela. */
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t);
}

.dica-abre-esquerda .dica-caixa {
  left: auto;
  right: 0;
}

.tem-dica:hover .dica-caixa,
.tem-dica:focus-within .dica-caixa {
  visibility: visible;
  opacity: 1;
}

/* O cabecalho da tabela e `position: sticky` com z-index 3, e a coluna do grupo
   e sticky com z-index 4. Um filho nao escapa da pilha do pai: sem subir o
   z-index da PROPRIA celula no hover, a caixinha seria pintada por baixo da
   coluna do grupo ao se estender para a esquerda. */
.tabela-ranking thead th.tem-dica:hover,
.tabela-ranking thead th.tem-dica:focus-within { z-index: 6; }

/* No cartao e no detalhe o rotulo pode ser a ultima linha do bloco, e ali a
   caixinha para baixo sairia do cartao. Nesses dois casos ela abre para CIMA. */
.cartao-destaque-rotulo .dica-caixa,
.indicador-rotulo .dica-caixa {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Tela estreita: 300px de caixa nao caberiam ancorados a direita de uma coluna
   estreita sem vazar. Prende a largura ao viewport. */
@media (max-width: 640px) {
  .dica-caixa { max-width: min(300px, calc(100vw - 40px)); }
}

/* ============================================ quitacao no ultimo lance
   O destaque passou a mostrar o corte da assembleia mais recente mesmo quando
   foi quitacao a 100%. Sem marca visual, "100,0%" e lido como lance altissimo
   — o oposto do que houve, que foi ausencia de disputa. A marca e sobria de
   proposito: nao e alarme, e procedencia. */

.celula-criterio.is-quitacao .celula-criterio-valor,
.indicador-principal.is-quitacao .indicador-valor {
  color: var(--text-muted);
}

.celula-criterio.is-quitacao .celula-apoio,
.indicador-principal.is-quitacao .indicador-rotulo {
  color: var(--out);
}

/* ----------------------------------------------- filtro de faixa de credito */

.filtro-credito { display: flex; flex-direction: column; gap: 5px; }

.filtro-ajuste-rotulo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* Os dois campos dividem a linha. Sem o flex-basis zero eles herdam a largura
   cheia do controle de filtro, estouram o container e o flex-wrap do pai os
   empilha um sobre o outro — o ajuste fino passa a ocupar três linhas e empurra
   o resto da barra para baixo. */
.filtro-credito .filtro-par-campos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.filtro-credito .filtro-par-campos input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.filtro-credito .filtro-par-separador { flex: 0 0 auto; }

/* ------------------------------------- blocos novos do painel de detalhe */

#bloco-ordem-contemplacoes .tabela-analise td.val-indisponivel { color: var(--text-subtle); }

#bloco-regras .bloco-subtitulo { margin-top: 18px; }
#bloco-regras .bloco-subtitulo:first-child { margin-top: 0; }

/* ==================================================== afordancia de clique
   A linha e o cartao inteiros abrem o grupo. Duas regras sustentam isso sem
   quebrar teclado nem leitor de tela:

   1. O controle de verdade continua sendo um <button> — o do codigo do grupo na
      tabela, o do rodape no cartao. O clique na area toda e atalho de mouse,
      nao o unico caminho.
   2. A area clicavel tem cursor, realce de hover e realce de foco. Area que
      responde ao clique sem dizer que responde e adivinhacao.
   ------------------------------------------------------------------------ */

.tabela-ranking tbody tr.is-clicavel { cursor: pointer; }

/* O botao do grupo nao parece botao: ele parece o proprio conteudo da celula,
   porque a celula inteira ja e clicavel. O que ele precisa e de foco visivel e
   de sublinhado no hover, que e o que sinaliza "isto abre algo". */
.celula-grupo-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tabela-ranking tbody tr:hover .celula-grupo-codigo,
.celula-grupo-botao:hover .celula-grupo-codigo,
.celula-grupo-botao:focus-visible .celula-grupo-codigo {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.celula-grupo-botao:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A ultima coluna e afordancia, nao controle: ela diz para onde o clique leva.
   A seta anda um pouco no hover — movimento curto o suficiente para ler como
   direcao, nao como animacao. */
.celula-acao-dica {
  font-size: 11px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.celula-acao-seta {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  vertical-align: -2px;
  transition: transform var(--t);
}

.tabela-ranking tbody tr:hover .celula-acao-dica { color: var(--brand); font-weight: 600; }
.tabela-ranking tbody tr:hover .celula-acao-seta { transform: translateX(3px); }

/* O cartao inteiro tambem abre. A borda esquerda acende no hover: e o sinal mais
   barato de "este bloco e uma unidade clicavel". */
.cartao-grupo.is-clicavel { cursor: pointer; }

.cartao-grupo.is-clicavel:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-raised);
}

.cartao-grupo.is-clicavel:focus-within {
  border-color: var(--brand);
  box-shadow: var(--shadow-raised);
}

/* ================================================= cabecalho que ordena
   Clicar na coluna ordena por ela. O gesto que o usuario tenta de qualquer
   forma — antes ele tinha de achar o select de "Ordenacao" e adivinhar qual
   chave correspondia a qual coluna. O select continua la, em sincronia. */

.th-ordenar {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.tabela-ranking thead th.celula-numero .th-ordenar { justify-content: flex-end; width: 100%; }

.th-ordenar:hover { color: var(--brand); text-decoration: underline; }

.th-ordenar:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A seta ocupa lugar mesmo quando a coluna nao esta ordenada, para o cabecalho
   nao mudar de largura a cada clique. */
.th-seta {
  font-size: 11px;
  color: var(--brand);
}

.tabela-ranking thead th.is-ordenada {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.tabela-ranking thead th.is-ordenada .th-ordenar { font-weight: 700; }

/* A dica de que a coluna e ordenavel so aparece no hover da tabela: mostrar seis
   setas cinzas o tempo todo polui a leitura, que e o que a tabela existe para
   servir. */
.tabela-ranking thead th:not(.is-ordenada) .th-ordenar::after {
  content: "\2195";
  font-size: 10px;
  color: var(--rule-strong);
  opacity: 0;
  transition: opacity var(--t);
}

.tabela-ranking-envolucro:hover thead th:not(.is-ordenada) .th-ordenar::after,
.th-ordenar:focus-visible::after { opacity: 1; }

/* ============================================= explicacao de metrica
   "40,0" nao diz se 40 e bom nem 40 de que. Este bloco desmonta a conta nos dois
   numeros que a produziram, para o vendedor poder conferir na planilha e
   responder ao cliente que perguntar de onde saiu o numero.

   Fica visualmente MENOR que o indicador que explica: se competir em peso com
   ele, o vendedor le a explicacao e nao o numero.
   ------------------------------------------------------------------------ */

.explicacao-metrica {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.explicacao-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.explicacao-leitura {
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 8px;
}

/* A conta em tabular-nums e com o resultado em negrito: e a linha que o vendedor
   vai reproduzir em voz alta. */
.explicacao-conta {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 7px 10px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.explicacao-conta strong { color: var(--text); font-size: 14.5px; }

.explicacao-nota {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-subtle);
}

.explicacao-nota + .explicacao-nota { margin-top: 6px; }

/* Subrotulo do indicador principal: a definicao em uma linha, logo abaixo do
   nome comercial da metrica. */
.indicador-subrotulo {
  display: block;
  font-size: 11.5px;
  color: var(--text-subtle);
  margin-top: 2px;
}

/* A celula de vagas tem dois numeros: o que esta a venda e o total do grupo.
   O total vem menor porque e contexto, nao a resposta. */
.tabela-ranking .celula-numero .celula-apoio { font-variant-numeric: tabular-nums; }

/* ================================ explicacao interativa da metrica
   O gatilho e um botao de verdade com aria-expanded; o painel e irmao dele e
   nasce com o atributo hidden. O CSS nao esconde nada por conta propria: quem
   esconde e o `hidden` do HTML, que o leitor de tela tambem respeita. Regra de
   display no painel quebraria isso — por isso ele nao tem display definido aqui.
   ------------------------------------------------------------------------ */

.explicar { margin-top: 12px; }

.explicar-gatilho {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  font: inherit;
  font-size: 12.5px;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}

.explicar-rotulo { font-weight: 500; }

.explicar-gatilho:hover { background: var(--brand-wash); border-color: var(--brand-300); }

.explicar-gatilho:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* O "?" num circulo: e o sinal que o usuario procura quando nao entende um
   numero, e ele funciona sem depender de fonte de icone. */
.explicar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
}

.explicar-gatilho[aria-expanded="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.explicar-gatilho[aria-expanded="true"] .explicar-icone {
  background: var(--accent);
  color: var(--brand);
}

.explicacao-metrica .explicacao-titulo + .explicacao-leitura,
.explicacao-metrica .explicacao-titulo + .explicacao-conta { margin-top: 0; }

.explicacao-metrica .explicacao-titulo { margin-top: 13px; }
.explicacao-metrica .explicacao-titulo:first-child { margin-top: 0; }

.explicacao-curta { margin-top: 9px; padding: 9px 11px; }
.explicar-cartao { margin-top: 10px; }

/* ------------------------------------------------------- regua de quartis

   Quatro trechos de largura igual, um por quartil. Cada trecho contem um quarto
   dos grupos, e por isso a mediana cai sempre no meio do desenho — o que uma
   escala linear nao faria: no lance fixo os valores vao de 1,0 a 655,9 e a
   mediana 112,6 cairia em 17% da barra.
   ---------------------------------------------------------------------- */

.regua { margin: 10px 0 4px; }

.regua-barra {
  position: relative;
  display: flex;
  height: 10px;
  /* 32px, não 26: o balão do valor desce 20px e tem ~19px de altura, o que
     deixava 1px de folga até a escala. Um px sobrevive ao teste e não sobrevive
     a zoom nem a outra métrica de fonte. */
  margin-bottom: 32px;
  border-radius: 5px;
  overflow: visible;
}

/* Do verde ao vermelho seguindo as semanticas do projeto: menor concorrencia
   favorece o cliente. A cor nao carrega a informacao sozinha — o texto abaixo da
   regua diz o quartil por escrito. */
.regua-trecho { flex: 1 1 25%; }
.regua-trecho:nth-child(1) { background: var(--pos); border-radius: 5px 0 0 5px; }
.regua-trecho:nth-child(2) { background: var(--pos-wash); }
.regua-trecho:nth-child(3) { background: var(--out-wash); }
.regua-trecho:nth-child(4) { background: var(--neg); border-radius: 0 5px 5px 0; }

.regua-marca {
  position: absolute;
  top: -4px;
  width: 3px; height: 18px;
  margin-left: -1px;
  background: var(--brand);
  border-radius: 2px;
}

.regua-marca-valor {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
  background: var(--brand);
  border-radius: 3px;
}

.regua-escala {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  margin-bottom: 7px;
}

/* Os marcos das pontas colam nas bordas; os do meio ficam centrados no seu
   limite de trecho. Sem isso o "menor" e o "maior" saem da caixa. */
.regua-escala span { flex: 1 1 0; text-align: center; }
.regua-escala span:first-child { text-align: left; }
.regua-escala span:last-child { text-align: right; }

.regua-leitura {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 5px;
}

.regua-nota {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-subtle);
}

/* =========================================== ordem de chamada do edital
   A sequencia numerada e a informacao: e o que a planilha nunca teve. A faixa
   VIGENTE ganha destaque porque e a unica que descreve a situacao de hoje; as
   outras ficam como contexto do que ja passou ou do que ainda vem.
   ------------------------------------------------------------------------ */

.ordem-edital { margin-bottom: 20px; }

.faixa-ordem {
  padding: 11px 13px;
  margin-bottom: 8px;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
}

/* A faixa em vigor: filete de acento e fundo claro. As demais nao competem. */
.faixa-ordem.is-vigente {
  background: var(--accent-wash);
  border-left-color: var(--accent);
  border-color: var(--accent-rule);
}

.faixa-titulo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.faixa-situacao {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
}
.faixa-vigente { background: var(--brand); color: #fff; }
.faixa-futura { background: var(--brand-wash); color: var(--brand); }
.faixa-passada { background: var(--rule); color: var(--text-subtle); }

/* A numeracao e desenhada, nao herdada do <ol>: o numero precisa do mesmo peso
   visual do nome da rota, porque a ordem E a informacao. */
.rotas { list-style: none; margin: 0; padding: 0; }

.rota {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.rota + .rota { border-top: 1px dashed var(--rule); }

.rota-ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
}

.faixa-ordem.is-vigente .rota-ordem { background: var(--brand); }

.rota-nome { font-weight: 500; }

.rota-observacao {
  font-size: 11.5px;
  color: var(--text-subtle);
}

/* Rota que o catalogo nao conhece: reproduzida como esta no portal, e dizendo
   que e isso. Nunca escondida — esconder seria editar o regulamento. */
.rota-desconhecida .rota-ordem { background: var(--text-subtle); }

.rota-aviso {
  flex: 1 0 100%;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-subtle);
}

/* ========================================= outras regras do edital

   Regras preservadas sem campo proprio. As que so existem NESTE grupo ganham
   uma nota discreta: o vendedor precisa saber que aquilo nao e padrao da
   carteira, sem que o aviso competa com a regra em si.
   ------------------------------------------------------------------------ */

.regras-livres { list-style: none; margin: 0 0 4px; padding: 0; }

.regra-livre {
  padding: 8px 11px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.regra-texto { display: block; color: var(--text); }

/* Filete de acento, discreto: sinaliza sem alarmar. */
.regra-livre.is-especifica {
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
}

.regra-nota {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--accent-rule);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}

/* O edital inteiro, na sanfona. Monoespacado porque o texto do portal vem
   quebrado em coluna fixa: reflowar destruiria o alinhamento original que o
   vendedor usa para conferir contra a tela do portal. */
.edital-integral {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  padding: 11px 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  /* A tabela CONTINUA tabela, com rolagem horizontal. Virar cartao por CSS
     criaria uma segunda implementacao da mesma visao, e as duas divergiriam. */
  .tabela-ranking { font-size: 12px; }
  .tabela-ranking thead th,
  .tabela-ranking tbody td,
  .tabela-ranking tbody th { padding: 7px 8px; }
  .ranking-cabecalho { align-items: flex-start; }

  .app-container { padding: 16px 14px 40px; }
  .top-header { padding: 12px 14px; }
  .chrome-rotulo { text-align: left; width: 100%; }
  .lista-cartoes { grid-template-columns: 1fr; }
  .comparativo-filas { grid-template-columns: 1fr; }
  .filtros-resumo { margin-left: 0; text-align: left; }
}

/* -------------------------------------------------------------- impressão */

@media print {
  /* Cabecalho repetido em toda pagina impressa, e nada de sticky nem de
     rolagem: no papel nao existe rolagem, e sticky imprime sobreposto. */
  .tabela-ranking thead { display: table-header-group; }
  .tabela-ranking thead th,
  .tabela-ranking .celula-posicao,
  .tabela-ranking .celula-grupo { position: static; }
  .tabela-ranking-envolucro { overflow: visible; box-shadow: none; }
  .tabela-ranking { font-size: 9.5pt; }
  .tabela-ranking tbody tr { break-inside: avoid; }
  .visao-alternador { display: none; }
  .celula-acao-dica { display: none; }
  .explicacao-metrica { break-inside: avoid; background: none; }
  .faixa-ordem, .regra-livre { break-inside: avoid; }
  .edital-integral { white-space: pre-wrap; overflow: visible; font-size: 8.5pt; }
  .explicar-gatilho { display: none; }
  /* O painel impresso aparece mesmo com o atributo hidden: no papel nao ha
     clique, e a explicacao e justamente o que se quer levar. */
  .explicacao-metrica[hidden] { display: block !important; }
  .regua-marca-valor { color: var(--text); background: none; font-weight: 700; }
  .th-seta, .th-ordenar::after { display: none; }
  .celula-grupo-botao { text-decoration: none; }
  .celula-acao { display: none; }

  body { background: #fff; font-size: 10.5pt; }
  .filtros, .zona-importacao, .cartao-acoes, .detalhe-cabecalho .btn { display: none !important; }
  .cartao-grupo, .bloco { box-shadow: none; break-inside: avoid; }
  .lista-cartoes { grid-template-columns: 1fr 1fr; }
  .tabela-analise thead th { position: static; }
  .semaforo-rotulo {
    position: static; width: auto; height: auto; clip: auto;
  }
  .disclaimer { border-left-width: 2px; }
}

/* Respeita quem pediu menos movimento no sistema operacional. A seta e a sombra
   sao decoracao; a informacao nao depende delas. */
@media (prefers-reduced-motion: reduce) {
  .celula-acao-seta,
  .explicar-gatilho,
  .tabela-ranking thead th .th-ordenar::after { transition: none; }
  .tabela-ranking tbody tr:hover .celula-acao-seta { transform: none; }
}