/*
 * O VOCABULÁRIO DE FORMULÁRIO E TABELA DO ESQUELETO EP.
 *
 * O esqueleto de um produto EP usa um punhado de classes que a folha da
 * família NÃO declara: `.wide` para o campo que atravessa as duas colunas,
 * `.pilula` para o selo de atende/não atende, e `table.dados` para o quadro
 * de verificações. Dez folhas de produto guardam esse mesmo bloco copiado.
 *
 * Quatro produtos novos foram escritos copiando o esqueleto de HTML de um
 * produto antigo e derivando a folha de outro, e o resultado foi um
 * vocabulário PELA METADE: eles usavam `class="wide"` em vinte campos e
 * nenhuma regra respondia. Os campos não atravessavam a coluna, os rótulos
 * quebravam em número diferente de linhas e as caixas de entrada ficavam
 * desalinhadas em 37 px. O `.pilula` tinha as cores `ok` e `nao` e não tinha
 * a forma: o selo saía como texto colorido solto.
 *
 * Nada disso derruba a página, e é por isso que passou. Só apareceu quando o
 * auditor mecânico mediu o desalinhamento — e a verificação que o achou de
 * verdade foi outra: listar as classes usadas no HTML e perguntar quais não
 * têm nenhuma regra. Duas de cinquenta e seis.
 *
 * Quem escrever produto novo liga esta folha e a `ep-grafico.css` antes da
 * folha do produto. As dez folhas antigas continuam válidas — declaram o
 * mesmo — e migram uma a uma.
 */

/* -- o campo que atravessa as duas colunas ------------------------------- */

.field-grid .wide { grid-column: 1 / -1; }
.field-grid label.checkbox {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: .78rem; color: #24302c;
}
.field-grid label.checkbox input { width: auto; margin: 0; }

/* -- o selo de situação --------------------------------------------------- */

.pilula {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 600;
}
.pilula.ok { background: #e3f3ec; color: #0e6b4f; }
.pilula.nao { background: #fbe6e6; color: #9b3232; }

/* -- o quadro de verificações -------------------------------------------- */

table.dados {
  width: 100%; border-collapse: collapse; font-size: .75rem;
}
table.dados th, table.dados td {
  padding: 6px 8px; border-bottom: 1px solid #eef4f1; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.dados th { font-weight: 600; color: #0b2b21; border-bottom-color: #cfe0d8; }
table.dados th:first-child, table.dados td:first-child { text-align: left; }
table.dados td.nome { white-space: normal; }
table.dados tr.reprova td { background: #fdf5f5; }
table.dados caption {
  caption-side: top; text-align: left; font-size: .73rem; color: #5a7469;
  padding-bottom: 8px; line-height: 1.6;
}
/* Célula que traz uma frase, e não um número, quebra linha e alinha à
 * esquerda: com `nowrap` ela estoura a largura da tabela. */
table.dados td:has(.mem-fonte),
table.dados td.prosa,
table.dados th.prosa { white-space: normal; }
table.dados td.prosa, table.dados th.prosa { text-align: left; }
/* Coluna de TEXTO CURTO: cabe numa linha, mas não é número. Alinhada à
 * direita ela obriga o olho a procurar o começo de cada palavra numa borda
 * serrilhada, que é exatamente o que o alinhamento à direita serve para
 * evitar em coluna de número. A regra é a natureza do conteúdo, e não o
 * comprimento dele. */
table.dados td.texto, table.dados th.texto { text-align: left; }
.tab-panel { overflow-x: auto; }

/* -- a caixa de aviso ----------------------------------------------------- */

/*
 * A ciclovia e a capacidade viária montam `<div class="avisos">` com uma
 * `.aviso-caixa` por aviso, e nenhuma das duas folhas declarava essas
 * classes: os avisos saíam como texto corrido, sem caixa e sem a cor que
 * separa "atenção" de "informativo". O bloco é o mesmo que dez folhas de
 * produto guardam.
 *
 * `white-space: pre-wrap` está aqui porque o texto de aviso carrega parágrafo
 * duplo: sem isso ele vira um bloco só.
 */
.avisos { display: grid; gap: 8px; margin-top: 14px; }
.aviso-caixa {
  padding: 11px 13px; border-radius: 9px; font-size: .75rem; line-height: 1.65;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7; color: #2f4c42;
  white-space: pre-wrap;
}
.aviso-caixa.atencao { border-color: #ecd9b0; border-left-color: #b8860b; background: #fdf9f0; color: #6b5010; }
.aviso-caixa.fronteira { border-color: #d3d9e4; border-left-color: #4a6fa5; background: #f5f7fb; color: #33465f; }
.aviso-caixa.procedencia { border-color: #d8dfd9; border-left-color: #62766e; background: #f7f9f8; color: #3b4a44; }
.aviso-caixa b { color: inherit; font-weight: 600; }

/* ==========================================================================
 * A FAIXA DE VEREDITO: o número que a pessoa veio buscar, no topo.
 *
 * Nasceu dentro do painel de resultados, que é o lugar lógico, e a medida
 * mostrou o preço: numa janela de 860 px ela começava a 2 280 px do topo,
 * quase três telas abaixo do herói. Subiu para o topo da área de trabalho,
 * atravessando as duas colunas — e de lá foi copiada de produto em produto.
 * Agora mora aqui.
 *
 * Os três selos são de SITUAÇÃO, e não de marca: verde atende, vermelho não
 * atende, âmbar atende com pendência. O âmbar existe porque dizer "atende"
 * em verde com uma verificação por fazer é mentir por cor.
 * ======================================================================== */
.veredito {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #0d2a20 0%, #123a2c 100%);
  color: #eef7f3; border-radius: 16px; padding: 18px 22px; margin-bottom: 4px;
}
.veredito .placar {
  display: grid; grid-template-columns: auto auto 1fr; gap: 22px; align-items: center;
}
.veredito h3 {
  margin: 0 0 6px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #9ec9b7; font-weight: 500;
}
.veredito .nivel {
  display: grid; justify-items: center; gap: 2px;
  min-width: 92px; padding: 10px 14px; border-radius: 12px; background: #12382c;
}
.veredito .nivel b {
  font-size: 2.1rem; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums;
}
.veredito .nivel b i { font-style: normal; font-size: .9rem; margin-left: 2px; }
/* Designação de perfil, nome de zona, código de lote: texto não cabe no
 * corpo de 2,1 rem que serve a um número de três dígitos. */
.veredito .nivel.texto b { font-size: 1.12rem; line-height: 1.25; text-align: center; }
.veredito .nivel span {
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: #cfe6dc;
}
.veredito .frase { font-size: .84rem; line-height: 1.55; color: #dcece5; }
.veredito .frase b { color: #fff; font-weight: 600; }
.veredito .selo {
  justify-self: start; display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.veredito .selo.ok { background: #1f6b4f; color: #eafff6; }
.veredito .selo.nao { background: #7d2418; color: #ffeceb; }
.veredito .selo.aviso { background: #8a6a10; color: #fff6db; }

@media (max-width: 900px) {
  .veredito .placar { grid-template-columns: 1fr; }
  .veredito .selo { justify-self: start; }
}