/* Camada visual do sistema.
 *
 * Um arquivo so, sem framework e sem build. O ARQUITETURA.md §1 fecha em HTML
 * no servidor; trazer Tailwind ou Bootstrap para sete telas custaria uma cadeia
 * de build que o projeto nao tem e uma dependencia de CDN que o patio, com
 * internet ruim, nao perdoaria. Pelo mesmo motivo as fontes sao locais: ver
 * static/fonts/LICENCA.txt.
 *
 * ─── Tres regras que nao sao estetica, sao funcionamento ─────────────────────
 *
 *   1. alvo de toque de 48 px (a WCAG 2.5.5 pede 44; dedo com luva pede mais);
 *   2. `font-size: 16px` em todo campo — abaixo disso o iOS aplica zoom ao
 *      focar e desalinha a tela inteira, e o operador perde o lugar;
 *   3. `touch-action: none` no canvas da assinatura, senao o tablet rola em vez
 *      de desenhar. Esse e invisivel em teste de desktop.
 *
 * Nenhuma das tres pode ser "limpada" depois.
 *
 * ─── Contrato com o JavaScript ───────────────────────────────────────────────
 *
 * `js/fotos.js`, `js/assinatura.js` e `js/diagnostico.js` procuram estes nomes no
 * DOM. Restilizar, sim; renomear, so mexendo nos arquivos junto:
 *
 *   .avisos .aviso .topo .nota .grade-fotos #grade-extras .slot-foto
 *   .preenchido .area .acoes .enviando [data-papel] [data-angulo] [data-envio]
 *   #estado-aceite #painel-assinatura #assinatura #form-assinatura
 *   #erro-assinatura #abrir-assinatura #limpar-assinatura #fechar-assinatura
 *   #form-busca #q #chips-tipo .chip #resultados [data-busca]
 *
 * ─── A ideia do desenho ──────────────────────────────────────────────────────
 *
 * A tela e uma ficha de oficina, nao um painel de SaaS. Duas consequencias:
 *
 *   - **Cor significa estado, nunca enfeite.** A acao primaria e tinta preta;
 *     ambar quer dizer "falta alguma coisa", verde "feito", vermelho "erro".
 *     Botao colorido sem estado por tras nao entra aqui.
 *   - **A placa e a identidade de tudo.** Entra-se pela placa, busca-se pela
 *     placa, a lista e uma coluna de placas. Por isso o bloco `.placa` e o
 *     mesmo objeto em toda tela — e o que o olho procura.
 */

/* ── fontes ───────────────────────────────────────────────────────────────── */

/* `swap`: sob internet ruim o texto aparece na fonte do sistema e troca depois.
 * Esperar a fonte seria deixar a tela em branco justamente onde a rede e pior. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.de2f1fe81758.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin-ext.589f7bc0fac4.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/spline-mono-var-latin.21113a44ca20.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/spline-mono-var-latin-ext.4d18dbf43065.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── fichas ───────────────────────────────────────────────────────────────── */

:root {
  /* Tinta e papel. O fundo e cinza-concreto, nao o azulado de painel. */
  --tinta: #16181a;
  --tinta-media: #3d4247;
  --tinta-fraca: #5b6165;
  --fundo: #e4e7e3;
  --superficie: #fbfbfa;
  --superficie-funda: #f1f3f0;
  --borda: #ccd0cb;
  --borda-forte: #a3a9a2;

  /* Identidade: o azul da faixa Mercosul, e so ali. */
  --placa: #0b2f7a;

  /* Estado. Nada aqui e decorativo — cada cor tem um significado unico. */
  --ok: #14653a;
  --ok-fundo: #dcefe2;
  --ok-borda: #a9d3ba;
  --atencao: #8a4c04;
  --atencao-fundo: #fbeacb;
  --atencao-borda: #e2bc74;
  --erro: #9c1f18;
  --erro-fundo: #fbe4e1;
  --erro-borda: #eab5ae;

  /* O anel de foco muda de cor conforme o que esta atras dele: sobre papel,
   * tinta; sobre botao de tinta, ambar. A WCAG 1.4.11 cobra contraste com a
   * cor VIZINHA, entao um anel unico reprovaria numa das duas situacoes. */
  --foco-claro: #f0a324;

  --raio: 3px;

  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-codigo: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --largura: 64rem;
}

* { box-sizing: border-box; }

/* `hidden` tem de vencer o `display` das classes de botão — é assim que o
 * JavaScript liga e desliga os caminhos com e sem script. */
[hidden] { display: none !important; }

html { background: var(--fundo); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

/* ── tipografia ───────────────────────────────────────────────────────────── */

/* Caixa alta so em texto curto — sobrancelha, faixa, selo, chip. Titulo em
 * caixa alta vira grito, e "Não encontrei “HLF5694”" nao pode gritar. */

h1, h2, h3 {
  font-stretch: 76%;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--tinta); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--placa); }

strong { font-weight: 650; }

/* A sobrancelha nomeia o bloco; o conteudo diz o valor. Uma faz uma coisa so. */
.sobrancelha {
  display: block;
  font-size: 0.6875rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 0.25rem;
}

.nota {
  color: var(--tinta-fraca);
  font-size: 0.875rem;
  line-height: 1.5;
}

.erro { color: var(--erro); font-size: 0.875rem; font-weight: 550; }

/* Chassi, codigo de peca, numero de OS: onde 0/O e 1/l se confundem e alguem
 * vai ler em voz alta para o telefone. */
.codigo {
  font-family: var(--fonte-codigo);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
  font-size: 0.9375em;
}

/* Marca e modelo do veiculo, onde ele aparece sem ser dentro da lista. */
.modelo {
  font-stretch: 88%;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}

/* Uma so utilidade de espaco, e ela diz o que faz. */
.afastado { margin-top: 1.25rem; }

/* Fila de acoes de uma tela sem formulario: estado vazio, pagina de erro. */
.acoes-fila { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ── topo ─────────────────────────────────────────────────────────────────── */

/* Quem navega por teclado nao deve ter de passar pelo menu inteiro em toda
 * tela. Fica fora de vista ate receber foco. */
.pular {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  border-radius: var(--raio);
  background: var(--tinta);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  transition: top 0.12s ease;
}
.pular:focus { top: 0.5rem; outline: 3px solid var(--foco-claro); outline-offset: 2px; }

.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  background: var(--superficie);
  border-bottom: 2px solid var(--tinta);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tinta);
  font-stretch: 74%;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marca svg { display: block; width: 1.5rem; height: 1.5rem; flex: none; }

.menu { display: flex; gap: 0.25rem; align-items: center; flex: 1; flex-wrap: wrap; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--raio);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 550;
  border: 2px solid transparent;
}
.menu a:hover { background: var(--superficie-funda); border-color: var(--borda); }
.menu a[aria-current="page"] { border-color: var(--tinta); }

.menu .botao-topo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.menu .botao-topo:hover { background: #000; border-color: #000; }

.sessao { display: flex; gap: 0.875rem; align-items: center; }
.usuario { color: var(--tinta-fraca); font-size: 0.8125rem; }

.link {
  background: none;
  border: none;
  color: var(--tinta-fraca);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.link:hover { color: var(--tinta); }

main { padding: 1.5rem 1rem 5rem; max-width: var(--largura); margin: 0 auto; }

/* A excecao da largura, pedida pela propria pagina (`{% block classe_conteudo %}`).
 * 64rem e largura de leitura e vale para tudo o que se le; o quadro do patio nao
 * se le, se varre — sao sete colunas lado a lado, e espremer o cartao ate o
 * bloco de placa nao caber mais custaria a identidade da tela inteira. */
/* 94rem e a conta das sete colunas: 7 x 12,5rem + 6 vaos de 0,625rem + o
 * respiro do `main`. A coluna nao encolhe mais do que 12,5rem porque abaixo
 * disso "Pedido de peça" nao cabe no selo — e distinguir pedido de peça de
 * execução e a razao de a coluna 6 ter selo. Em tela mais estreita a faixa
 * rola, que e melhor do que cortar a unica palavra que explica o carro parado. */
main.largo { max-width: 94rem; }

/* ── cabecalho de pagina ──────────────────────────────────────────────────── */

.titulo-pagina { margin: 0 0 1.5rem; }
.titulo-pagina .nota { margin-top: 0.375rem; }

/* Cabecalho das telas de uma OS: a placa a esquerda, a identificacao a direita.
 * A mesma gramatica no detalhe e no check-in — quem passa de uma para outra
 * encontra a informacao no mesmo lugar. */
.cabecalho-os {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}
.cabecalho-os h1 { font-size: 1.625rem; }
.cabecalho-os .nota { margin: 0.25rem 0 0; }

/* A seta e desenhada, nao digitada: U+2190 nao esta no subconjunto latino das
 * fontes e sairia como glifo de reserva, fora da linha de base. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-bottom: 0.25rem;
  color: var(--tinta-fraca);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}
.voltar::before {
  content: "";
  width: 1.125rem;
  height: 0.5rem;
  background: currentcolor;
  clip-path: polygon(100% 40%, 32% 40%, 32% 0, 0 50%, 32% 100%, 32% 60%, 100% 60%);
}
.voltar:hover { color: var(--tinta); text-decoration: underline; }

/* ── avisos ───────────────────────────────────────────────────────────────── */

/* O `fotos.js` cria esta lista se ela nao existir, logo depois do `.topo`. */
.avisos {
  list-style: none;
  padding: 0 1rem;
  margin: 1rem auto 0;
  max-width: var(--largura);
}
.aviso {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--tinta-fraca);
  border-radius: var(--raio);
  background: var(--superficie);
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.aviso.success { background: var(--ok-fundo); border-color: var(--ok-borda); border-left-color: var(--ok); color: var(--ok); }
.aviso.error { background: var(--erro-fundo); border-color: var(--erro-borda); border-left-color: var(--erro); color: var(--erro); }
.aviso.warning { background: var(--atencao-fundo); border-color: var(--atencao-borda); border-left-color: var(--atencao); color: var(--atencao); }

/* ── folhas ───────────────────────────────────────────────────────────────── */

/* Sem sombra. A separacao vem do filete e da barra de tinta no topo, que da o
 * ar de talao — o cartao com sombra e a assinatura do painel administrativo. */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: 1.25rem;
}
.cartao.estreito { max-width: 24rem; margin: 3rem auto; }

.secao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}

.secao > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0 0 0.875rem;
}
.secao > h2 .contagem {
  font-size: 0.75rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

/* Subtitulo dentro da folha — "Fotos extras" debaixo de "Fotos do veiculo". */
.secao > h3 {
  font-size: 0.6875rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 1.75rem 0 0.375rem;
}

/* ── atalhos do inicio ────────────────────────────────────────────────────── */

.atalhos { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 40rem) { .atalhos { grid-template-columns: 1fr 1fr; } }

.atalho {
  display: block;
  padding: 1.125rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta);
  border-radius: 0 var(--raio) var(--raio) 0;
  text-decoration: none;
  color: var(--tinta);
}
.atalho:hover { background: #fff; border-color: var(--borda-forte); border-left-color: var(--tinta); }
.atalho .nome { display: block; font-stretch: 80%; font-weight: 700; font-size: 1.125rem; }
.atalho .nota { display: block; margin-top: 0.125rem; }

.papeis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.papeis li {
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-funda);
  font-size: 0.6875rem;
  font-stretch: 84%;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* ── o bloco de placa ─────────────────────────────────────────────────────── */

/* A assinatura visual do sistema. Nao e desenho de placa: e um bloco
 * identificador com a faixa que a placa real tem. A cor da faixa carrega
 * informacao — azul e veiculo licenciado, tinta e maquina ou implemento, que
 * nao tem placa e por isso nao tem faixa azul. */

.placa {
  display: inline-grid;
  justify-items: stretch;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

.placa-faixa {
  background: var(--placa);
  color: #fff;
  font-size: 0.5625rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem 0.1875rem;
  white-space: nowrap;
}
.placa.maquina .placa-faixa { background: var(--tinta); }

.placa-id {
  font-stretch: 74%;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.09em;
  /* O tracking abre um vao a direita do ultimo caractere; o padding compensa. */
  padding: 0.3125rem 0.4375rem 0.375rem 0.5625rem;
  color: var(--tinta);
  white-space: nowrap;
}

.placa-g .placa-id { font-size: 2rem; padding: 0.4375rem 0.5rem 0.5rem 0.625rem; }
.placa-g .placa-faixa { font-size: 0.625rem; padding: 0.3125rem 0.5rem 0.25rem; }

a.placa { text-decoration: none; }
a.placa:hover { border-color: var(--placa); }
a.placa:hover .placa-id { color: var(--placa); }

/* O campo de digitar placa ecoa o bloco: mesma condensada, mesmo tracking, e a
 * largura de uma placa em vez da largura da tela. */
.campo-placa {
  max-width: 16rem;
  font-size: 1.5rem;
  font-stretch: 78%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── trilha das etapas ────────────────────────────────────────────────────── */

/* A numeracao 0–7 se justifica porque o conteudo E uma sequencia tipada: uma
 * maquina de estados com guardas. Numero aqui informa, nao decora. */

.trilha-etapa {
  display: flex;
  gap: 0.1875rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.trilha-etapa li { flex: 1 1 0; min-width: 0; }

.trilha-etapa .barra {
  display: block;
  height: 5px;
  border-radius: 1px;
  background: var(--borda-forte);
}
.trilha-etapa .n {
  display: block;
  font-family: var(--fonte-codigo);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--tinta-fraca);
  margin-top: 0.375rem;
}
.trilha-etapa .rot {
  display: block;
  font-size: 0.75rem;
  font-stretch: 82%;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trilha-etapa .feita .barra { background: var(--tinta); }
.trilha-etapa .feita .n,
.trilha-etapa .feita .rot { color: var(--tinta-media); }

.trilha-etapa .atual .barra { background: var(--atencao); }
.trilha-etapa .atual .n { color: var(--atencao); font-weight: 700; }
.trilha-etapa .atual .rot { color: var(--tinta); font-weight: 700; }

/* Em tela estreita so a etapa atual mantem o rotulo — sete rotulos de 8 px
 * seriam sete borroes. As barras continuam contando a historia toda. */
@media (max-width: 40rem) {
  .trilha-etapa .rot { display: none; }
  .trilha-etapa .atual .rot { display: block; white-space: normal; }
  .trilha-etapa .atual { flex-grow: 3; }
}

.trilha-cancelada {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--erro-borda);
  border-left: 4px solid var(--erro);
  border-radius: var(--raio);
  background: var(--erro-fundo);
  color: var(--erro);
  font-size: 0.9375rem;
  font-weight: 550;
}

/* ── selo de etapa ────────────────────────────────────────────────────────── */

.selo-etapa {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1;
  background: var(--superficie);
  white-space: nowrap;
  vertical-align: middle;
}
.selo-etapa .numero {
  display: inline-flex;
  align-items: center;
  padding: 0 0.375rem;
  background: var(--tinta);
  color: #fff;
  font-family: var(--fonte-codigo);
  font-weight: 600;
}
.selo-etapa .rotulo {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.5rem;
  font-stretch: 82%;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.selo-etapa.cancelada { border-color: var(--erro-borda); background: var(--erro-fundo); }
.selo-etapa.cancelada .rotulo { color: var(--erro); }

/* ── formulario ───────────────────────────────────────────────────────────── */

label {
  display: block;
  margin: 1rem 0 0.375rem;
  font-size: 0.8125rem;
  font-stretch: 88%;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--tinta-media);
}

input, select, textarea {
  width: 100%;
  /* 16px exatos: abaixo disso o iOS dá zoom ao focar. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 0.625rem 0.75rem;
  min-height: 48px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: #fff;
  color: var(--tinta);
}
input::placeholder, textarea::placeholder { color: #949a94; }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }

/* Campo nao precisa da largura da tela. Uma caixa de 1.100 px para seis digitos
 * de hodometro nao ajuda a digitar e ainda faz o olho viajar ate o fim da linha
 * para conferir o que escreveu. Textarea fica de fora: ali a largura ajuda. */
input, select { max-width: 34rem; }
input[type=number], input[type=search] { max-width: 22rem; }

input:hover, select:hover, textarea:hover { border-color: var(--tinta-fraca); }
input:focus, select:focus, textarea:focus { border-color: var(--tinta); }

/* Caixa de marcar: alvo de 48 px sem esticar a marca em si. Substitui os
 * `style=` que estavam soltos no lista.html. */
.caixa {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  margin: 0;
  font-size: 0.9375rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinta);
  cursor: pointer;
}
.caixa input {
  width: 1.375rem;
  height: 1.375rem;
  min-height: 0;
  flex: none;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}

.dupla { display: grid; gap: 0 1.25rem; }
@media (min-width: 48rem) { .dupla { grid-template-columns: 1fr 1fr; } }

/* Campo de placa e "Buscar" na mesma linha. Precisa ser flex e nao dois
 * inline-blocks: o campo tem 55 px por causa da fonte grande e o botao 48, e
 * encostados pela linha de base eles saem 6 px fora de esquadro. */
.linha-busca { display: flex; align-items: stretch; gap: 0.625rem; flex-wrap: wrap; }
.linha-busca .campo-placa { flex: 0 1 16rem; }
.linha-busca button[type=submit] { flex: 0 0 auto; }

/* Linha de filtros da busca: as caixas a esquerda, o botao empurrado ao fim. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  margin-top: 0.75rem;
}
.filtros button[type=submit] { margin-left: auto; }

/* ── botoes ───────────────────────────────────────────────────────────────── */

button[type=submit], .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--tinta);
  border-radius: var(--raio);
  background: var(--tinta);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-stretch: 92%;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
button[type=submit]:hover, .botao:hover { background: #000; border-color: #000; }
button[type=submit]:active, .botao:active { transform: translateY(1px); }

/* Os modificadores valem tanto para `<a class="botao">` quanto para
 * `<button type=submit>`: sem a segunda metade do seletor, um botao de submit
 * marcado como secundario continuaria saindo preto — e o erro e invisivel ate
 * alguem olhar a tela. */
.botao.secundario, button[type=submit].secundario {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--borda-forte);
}
.botao.secundario:hover, button[type=submit].secundario:hover {
  background: var(--superficie-funda);
  border-color: var(--tinta);
}

.botao.perigo, button[type=submit].perigo { background: var(--erro); border-color: var(--erro); }
.botao.perigo:hover, button[type=submit].perigo:hover { background: #7d1812; border-color: #7d1812; }

.botao-largo { width: 100%; }

/* Botao que fecha um formulario precisa de ar, senao encosta na borda do ultimo
 * campo e a dupla vira um bloco so.
 *
 * O seletor so pega quem ocupa a linha inteira — `.botao-largo` e o botao
 * depois de um textarea. Um `input + button` generico tambem pegaria o par
 * "campo de placa + Buscar", que fica lado a lado: ali a margem de topo
 * desalinharia o botao em vez de separar. */
input + .botao-largo,
select + .botao-largo,
p + .botao-largo,
textarea + button[type=submit] { margin-top: 1.25rem; }

button[disabled], .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ── foco ─────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}
/* Sobre tinta preta um anel de tinta some. Ambar contrasta 8,4:1 com o preto. */
button[type=submit]:focus-visible,
.botao:focus-visible,
.menu .botao-topo:focus-visible,
.chips a.ativo:focus-visible {
  outline-color: var(--foco-claro);
}
.botao.secundario:focus-visible { outline-color: var(--tinta); }

/* ── nivel de combustivel ─────────────────────────────────────────────────── */

/* Cinco radios viram cinco botoes. Funciona sem JavaScript. */
.botoes-nivel { display: flex; gap: 0.375rem; flex-wrap: wrap; }
/* `relative` prende o radio absoluto dentro do proprio botao. Sem isto ele se
 * posiciona contra a viewport e, herdando `width: 100%` da regra geral de
 * campo, cinco radios invisiveis esticavam a pagina para o dobro da largura —
 * scroll horizontal que so aparecia como uma barra estranha embaixo. */
.botoes-nivel label { margin: 0; flex: 1 1 4.5rem; position: relative; }
/* 1 px em vez de zero: continua focavel e continua sendo lido por leitor de
 * tela, que e como o teclado navega entre as cinco opcoes. */
.botoes-nivel input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.botoes-nivel .rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 0.5rem;
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  cursor: pointer;
  font-size: 0.9375rem;
  font-stretch: 92%;
  font-weight: 650;
  color: var(--tinta);
}
.botoes-nivel .rotulo:hover { border-color: var(--tinta-fraca); }
.botoes-nivel input:checked + .rotulo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.botoes-nivel input:focus-visible + .rotulo { outline: 3px solid var(--tinta); outline-offset: 2px; }
.botoes-nivel input:checked:focus-visible + .rotulo { outline-color: var(--foco-claro); }

/* ── fotos ────────────────────────────────────────────────────────────────── */

.grade-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
}

/* As quatro faces sao um conjunto fechado, e nao uma lista que cresce: com
 * `auto-fit` elas dividem a largura entre si em vez de deixar trilhas vazias a
 * direita. Slot maior e miniatura maior na hora de julgar uma avaria. */
.grade-fotos.faces {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  max-width: 46rem;
}

.slot-foto {
  position: relative;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-funda);
  overflow: hidden;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
}
/* Solido e verde: a face esta registrada. Tracejado e o vazio esperando foto. */
.slot-foto.preenchido {
  border-style: solid;
  border-color: var(--ok);
  background: var(--superficie);
}

.slot-foto .rotulo-slot {
  padding: 0.4375rem 0.5rem;
  font-size: 0.6875rem;
  font-stretch: 82%;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tinta-fraca);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.slot-foto.preenchido .rotulo-slot { color: var(--ok); }

.slot-foto .area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  cursor: pointer;
  color: var(--tinta-fraca);
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.5rem;
}
.slot-foto .area:hover { color: var(--tinta); background: var(--superficie); }
.slot-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot-foto .acoes {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.slot-foto .acoes button, .slot-foto .acoes label {
  flex: 1;
  margin: 0;
  min-height: 40px;
  padding: 0 0.375rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-stretch: 88%;
  font-weight: 650;
  letter-spacing: 0.04em;
  border-radius: 2px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot-foto .acoes button:hover, .slot-foto .acoes label:hover { border-color: var(--tinta); }
.slot-foto .acoes [data-papel=remover]:hover { border-color: var(--erro); color: var(--erro); }

/* Com JavaScript o botao "Enviar" e escondido (o arquivo sobe sozinho ao ser
 * escolhido), e um slot ainda vazio ficava com uma faixa de acoes sem nada
 * dentro. Onde `:has()` nao existir, o pior caso e a faixa vazia de antes. */
.slot-foto .acoes:not(:has(button:not([hidden]))) { display: none; }

.slot-foto .enviando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(251 251 250 / 88%);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}
.slot-foto input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }

.selo-falta {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--raio);
  font-size: 0.6875rem;
  font-stretch: 88%;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--atencao-fundo);
  color: var(--atencao);
  border: 1px solid var(--atencao-borda);
}
.selo-pronto {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--raio);
  font-size: 0.6875rem;
  font-stretch: 88%;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ok-fundo);
  color: var(--ok);
  border: 1px solid var(--ok-borda);
}

/* Envio de fotos extras: o campo e o botao lado a lado, sem virar formulario. */
.envio-extra { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; }
.envio-extra input[type=file] { flex: 1 1 14rem; width: auto; padding: 0.5rem; }
.envio-extra button[type=submit] { flex: 0 1 auto; }

/* Vazio no HTML ate o JavaScript pendurar a primeira miniatura — sem conteudo
 * o `gap` do grid nao aparece, entao a margem so custa quando ha o que mostrar. */
#grade-extras:not(:empty) { margin-top: 0.875rem; }

/* ── assinatura ───────────────────────────────────────────────────────────── */

.assinatura-registrada {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.assinatura-registrada img {
  max-width: 18rem;
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: #fff;
}

dialog.painel {
  width: min(100vw, 60rem);
  max-width: 100%;
  border: 2px solid var(--tinta);
  border-radius: var(--raio);
  padding: 0;
  background: var(--superficie);
  color: var(--tinta);
}
dialog.painel::backdrop { background: rgb(22 24 26 / 62%); }
dialog.painel .corpo { padding: 1.25rem; }
dialog.painel .rodape {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
  flex-wrap: wrap;
}
dialog.painel .rodape > * { flex: 1 1 8rem; }

#assinatura {
  width: 100%;
  height: min(45vh, 16rem);
  margin-top: 0.75rem;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: #fff;
  /* Sem isto o tablet rola e dá zoom em vez de desenhar. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}

/* O caminho de excecao — "o cliente nao pode assinar" — fica dobrado, abaixo de
 * uma linha, para nao disputar espaco com o de assinar. */
.detalhes {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}
.detalhes > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--tinta-media);
}
.detalhes > summary:hover { color: var(--tinta); }
/* O `display: flex` acima apaga o triangulo que o navegador desenha no
 * `summary`, e sem nenhum sinal a linha vira titulo inerte: alguem le "O que o
 * check-in registrou" e nunca descobre que ha algo atras. O sinal volta como
 * texto, que nao depende de fonte de icone nem de emoji do sistema. */
.detalhes > summary::before {
  content: "+";
  display: inline-block;
  width: 1rem;
  margin-right: 0.5rem;
  font-family: var(--fonte-codigo);
  font-weight: 700;
  text-align: center;
  color: var(--tinta-fraca);
}
.detalhes[open] > summary::before { content: "\2212"; }

/* ── filtros da lista ─────────────────────────────────────────────────────── */

.chips {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 44px;
  padding: 0 0.6875rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  text-decoration: none;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-stretch: 84%;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.chips a:hover { border-color: var(--tinta); color: var(--tinta); }
.chips a.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chips .n {
  font-family: var(--fonte-codigo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ── lista de ordens ──────────────────────────────────────────────────────── */

.lista-ordens { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }

.lista-ordens li {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 0.875rem 1rem;
  display: grid;
  gap: 0.75rem;
  align-items: center;
  grid-template-columns: auto 1fr;
}
@media (min-width: 48rem) {
  .lista-ordens li { grid-template-columns: auto 1fr auto; }
}
.lista-ordens li:hover { border-color: var(--borda-forte); border-left-color: var(--tinta); }

/* Largura fixa na coluna da placa: placa de verdade tem sempre o mesmo
 * tamanho, e alinhar os blocos faz a lista virar uma coluna que se le de cima
 * a baixo, em vez de uma escada. */
.lista-ordens .placa { min-width: 9.5rem; }

.lista-ordens .miolo { min-width: 0; }
.lista-ordens .identificacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.lista-ordens .numero-os {
  font-family: var(--fonte-codigo);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-fraca);
}
.lista-ordens .modelo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-ordens .detalhe { color: var(--tinta-fraca); font-size: 0.8125rem; line-height: 1.45; }
/* A acao ocupa a linha inteira no celular e a coluna da direita no tablet. */
.lista-ordens .acao { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .lista-ordens .acao { grid-column: auto; }
  .lista-ordens .acao .botao { min-width: 9.5rem; }
}

.paginacao {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Tela vazia e convite, nao lamento. */
.vazio {
  text-align: center;
  padding: 3rem 1.25rem;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}
.vazio h2 { margin-bottom: 0.5rem; }
.vazio .nota { max-width: 32rem; margin: 0 auto 1.25rem; }

/* ── quadro do patio ──────────────────────────────────────────────────────── */

/* Irma da lista, logo acima: os mesmos dados, outra pergunta. A lista responde
 * "onde esta a OS 2026-0042"; o quadro responde "onde esta cada carro". Por isso
 * ele nao tem botao de acao nem paginacao — e para varrer, nao para trabalhar.
 *
 * Nenhum nome novo entra no contrato com o JavaScript declarado no topo deste
 * arquivo: o quadro nao tem uma linha de script. */

.quadro { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }

/* A partir de 48rem — o mesmo corte que a lista usa — as etapas viram colunas
 * lado a lado. Abaixo disso elas empilham: rolagem horizontal dentro de rolagem
 * vertical, com luva e sol, e o pior par de gestos que esta tela poderia pedir. */
@media (min-width: 48rem) {
  .quadro {
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, 1fr);
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Sem isto, o flick horizontal perto da borda vira o "voltar" do navegador
     * — no tablet acontece toda hora, e leva os filtros junto. */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .quadro .coluna { scroll-snap-align: start; }
}

.quadro .coluna {
  min-width: 0;
  background: var(--superficie-funda);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: 0.625rem;
}

/* Mesma forma do `h2` das folhas: versalete, tracking largo, tinta fraca. */
.quadro .coluna > h2 {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* O mesmo numero do selo de etapa, com o mesmo desenho: e o mesmo numero. */
.quadro .coluna > h2 .n {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: var(--raio);
  background: var(--tinta);
  color: #fff;
  font-family: var(--fonte-codigo);
  font-weight: 600;
  letter-spacing: 0;
}
.quadro .coluna > h2 .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro .coluna > h2 .contagem {
  margin-left: auto;
  font-family: var(--fonte-codigo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.cartao-ordem {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  margin-bottom: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--tinta);
  text-decoration: none;
}
.cartao-ordem:last-of-type { margin-bottom: 0; }
.cartao-ordem:hover { border-color: var(--borda-forte); border-left-color: var(--tinta); }
/* As regras `a.placa:hover` do bloco de placa esperavam por este caso: aqui a
 * placa esta dentro do link, e nao e o link. */
.cartao-ordem:hover .placa { border-color: var(--placa); }
.cartao-ordem:hover .placa .placa-id { color: var(--placa); }

/* `justify-items: start` deixa a placa no tamanho dela — e daria o mesmo a todo
 * o resto, com uma consequencia ruim: filho dimensionado pelo conteudo nao
 * encolhe, e "Pronto para retirada" ou o nome de uma prefeitura vazavam por
 * cima da borda do cartao. Estes voltam a ocupar a coluna inteira, que e o que
 * faz o `text-overflow: ellipsis` abaixo ter onde cortar. */
.cartao-ordem > .identificacao,
.cartao-ordem > .modelo,
.cartao-ordem > .detalhe,
.cartao-ordem > .marcas,
.cartao-ordem > .tempo { justify-self: stretch; min-width: 0; }

/* Ambar quer dizer "falta alguma coisa", e um carro parado ha dias e exatamente
 * isso. O limite esta em `DIAS_ATE_O_ALERTA`, no views.py. */
.cartao-ordem.parada { border-left-color: var(--atencao); }
.cartao-ordem.parada .tempo { color: var(--atencao); font-weight: 650; }

.cartao-ordem .identificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
/* O selo so aparece nas etapas de dois estados, e "Pronto para retirada" quase
 * nao cabe numa coluna de 12,5rem. `min-width: 0` e o que permite ao item de
 * flex encolher abaixo do proprio conteudo — sem ele o selo empurra a borda do
 * cartao para fora e o corte nunca acontece. */
.cartao-ordem .selo-etapa { min-width: 0; }
.cartao-ordem .selo-etapa .rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.5;
}

.cartao-ordem .numero-os {
  font-family: var(--fonte-codigo);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-fraca);
}
.cartao-ordem .modelo {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao-ordem .detalhe {
  color: var(--tinta-fraca);
  font-size: 0.75rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Numero se confere na monoespaçada, como o resto do sistema. */
.cartao-ordem .tempo {
  font-family: var(--fonte-codigo);
  font-size: 0.6875rem;
  color: var(--tinta-fraca);
}

.cartao-ordem .marcas { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cartao-ordem .marca {
  border-radius: var(--raio);
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-stretch: 82%;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Vermelho e ambar com o mesmo significado do resto da folha: um e "isto fura a
 * fila", o outro e "falta um papel que ainda nao chegou". */
.cartao-ordem .marca.urgente {
  border: 1px solid var(--erro-borda);
  background: var(--erro-fundo);
  color: var(--erro);
}
.cartao-ordem .marca.naf {
  border: 1px solid var(--atencao-borda);
  background: var(--atencao-fundo);
  color: var(--atencao);
}

/* Coluna vazia e informacao — "ninguem esta esperando peca" —, nao ausencia. */
.coluna-vazia {
  margin: 0;
  padding: 0.75rem 0.5rem;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  text-align: center;
  color: var(--tinta-fraca);
  font-size: 0.75rem;
}

.quadro .mais {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.5rem;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 650;
}
.quadro .mais:hover { color: var(--tinta); }

/* ── veiculo achado na busca ──────────────────────────────────────────────── */

.achado {
  border: 1px solid var(--borda);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--raio) var(--raio);
  padding: 1.25rem;
  margin-bottom: 0.875rem;
  background: var(--superficie);
}
.achado .cabeca {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.achado .ja-aberta {
  background: var(--atencao-fundo);
  border: 1px solid var(--atencao-borda);
  border-left: 4px solid var(--atencao);
  color: var(--atencao);
  border-radius: var(--raio);
  padding: 0.75rem 0.875rem;
  margin: 0.875rem 0;
  font-size: 0.9375rem;
}
.achado .ja-aberta strong { font-weight: 700; }
.achado hr {
  border: none;
  border-top: 1px solid var(--borda);
  margin: 1rem 0;
}

/* ── diagnostico: lista, sugestao e similares ─────────────────────────────── */

/* Tres listas com a mesma forma — o que a ordem ja tem, o que a familia
 * costuma levar, e o que a busca achou. Compartilham o desenho de proposito:
 * sao a mesma decisao ("isto entra?") tomada tres vezes, e desenhar cada uma de
 * um jeito faria o olho reaprender a tela a cada secao. */
.lista-itens,
.lista-sugestoes {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.lista-itens > li,
.lista-sugestoes > li {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--borda);
}
.lista-itens > li:last-child,
.lista-sugestoes > li:last-child { border-bottom: none; }

.item-corpo { flex: 1 1 18rem; min-width: 0; }
.item-descricao {
  margin: 0 0 0.125rem;
  font-weight: 600;
  line-height: 1.35;
}

/* A pontuacao do SMOA na tela. E o que da credito a lista: sem o numero, a
 * sugestao vira palpite; com ele, o mecanico sabe se sao doze caminhoes iguais
 * ou um caso isolado. Por isso e monoespacada — numero se compara em coluna. */
.lista-sugestoes .confianca {
  font-family: var(--fonte-codigo);
  font-size: 0.8125rem;
  color: var(--tinta-media);
}

/* Cor significa estado: verde e "ja resolvido", nao enfeite. */
.selo-sugestao {
  display: inline-block;
  background: var(--ok-fundo);
  border: 1px solid var(--ok-borda);
  border-radius: var(--raio);
  padding: 0.0625rem 0.375rem;
  color: var(--ok);
  font-size: 0.8125rem;
}

/* Ja na lista: continua legivel, mas para de disputar atencao com o que ainda
 * pode ser escolhido. Apagar a linha esconderia a informacao util de que a
 * familia tambem usa essa peca. */
.lista-sugestoes > li.ja-na-lista { opacity: 0.55; }

.similares { margin-top: 0.25rem; }
.similares .fraco {
  color: var(--tinta-fraca);
  /* Codigo sem peca no catalogo: da para reconhecer no balcao, mas nao da para
   * pedir daqui — por isso nao vira botao. */
  border-bottom: 1px dotted var(--borda-forte);
}

/* Botao que se le como link. O similar e uma acao secundaria dentro da linha:
 * virar botao cheio competiria com o "Por na lista" da propria sugestao. */
/* O seletor precisa do `button[type=submit]` junto: a regra base dos botoes usa
 * esse par (elemento + atributo) e ganha de uma classe sozinha na especificidade.
 * Sem isto o similar sai como botao preto de 48 px e a linha estoura na lateral. */
button[type=submit].link-similar {
  min-height: 0;
  padding: 0.0625rem 0.125rem;
  border: none;
  background: none;
  font-family: var(--fonte-codigo);
  font-size: 0.875rem;
  color: var(--placa);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
button[type=submit].link-similar:hover { background: var(--superficie-funda); border-color: transparent; }

/* Os formularios dos similares vivem fora do paragrafo — formulario dentro de
 * formulario nao e HTML valido. O botao os alcanca pelo atributo `form`. */
.oculto { display: none; }

/* ── suspeitas do mecanico ────────────────────────────────────────────────── */

/* Reusa `.lista-itens`: e a mesma leitura ("uma linha, uma coisa que alguem
 * escreveu"), e o que muda entre uma suspeita e um item e a cor da situacao, nao
 * a forma. A faixa a esquerda e o unico sinal — verde confirmou, cinza
 * descartou, ambar ainda nao se sabe, na mesma gramatica de cor do resto. */
.suspeita { border-left: 4px solid var(--atencao-borda); }
.suspeita.confirmada { border-left-color: var(--ok-borda); }
.suspeita.descartada { border-left-color: var(--borda-forte); }

.selo-situacao {
  font-size: 0.6875rem;
  font-stretch: 84%;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.suspeita.confirmada .selo-situacao { color: var(--ok); }
.suspeita.descartada .selo-situacao { text-decoration: line-through; }

.acoes-suspeita { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: flex-start; }
.avaliar-suspeita { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.avaliar-suspeita input[type=text] { flex: 1 1 10rem; width: auto; }

/* ── chips de tipo (peca x servico) ───────────────────────────────────────── */

/* O par de `.chips a` da lista de ordens, com radio dentro: aqui o filtro faz
 * parte do formulario de busca, e sem JavaScript ele precisa ser submit do
 * mesmo GET. Radio escondido do jeito do `.botoes-nivel` — 1 px em vez de
 * `display: none`, para continuar focavel e lido por leitor de tela. */
.chips .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 0.6875rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-stretch: 84%;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}
.chips .chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chips .chip.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chips .chip input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.chips .chip:focus-within { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ── quantidade na hora de por na lista, e correcao depois ────────────────── */

/* Campo curto de proposito: quantidade tem uma ou duas casas na pratica, e um
 * input de largura total ao lado do botao empurraria "Por na lista" para fora
 * da linha no tablet. */
input.qtde {
  width: 4.5rem;
  min-width: 4.5rem;
  flex: 0 0 auto;
  font-family: var(--fonte-codigo);
  text-align: right;
}

.por-na-lista { display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }

.editar-item {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}
.editar-item input[type=text] { flex: 1 1 8rem; width: auto; }

/* Enquanto a resposta da busca nao chegou. Nao e spinner: a lista antiga
 * continua legivel e so perde um pouco de contraste, o que evita a tela pular. */
#resultados[aria-busy=true] { opacity: 0.55; transition: opacity 120ms linear; }

/* ── rodape fixo de acoes ─────────────────────────────────────────────────── */

.rodape-fixo {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 0;
  margin-top: 1.25rem;
  background: var(--fundo);
  border-top: 2px solid var(--tinta);
}
.rodape-fixo > * { flex: 1 1 12rem; }
.rodape-fixo form { display: flex; }
.rodape-fixo form > .botao { flex: 1; }

/* ── ficha (detalhe) ──────────────────────────────────────────────────────── */

.ficha { display: grid; gap: 0.125rem 1.5rem; margin: 0; }
@media (min-width: 36rem) { .ficha { grid-template-columns: max-content 1fr; } }
.ficha dt {
  color: var(--tinta-fraca);
  font-size: 0.6875rem;
  font-stretch: 84%;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.375rem;
}
.ficha dd { margin: 0 0 0.75rem; }
@media (min-width: 36rem) { .ficha dd { padding-top: 0.125rem; } }

/* ── historico ────────────────────────────────────────────────────────────── */

.trilha { list-style: none; padding: 0; margin: 0; }
.trilha li {
  position: relative;
  padding: 0 0 0.875rem 1.375rem;
  font-size: 0.875rem;
  border-left: 1px solid var(--borda);
}
.trilha li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borda-forte);
}
/* O historico corre do mais antigo para o mais novo (`TransicaoEstado.Meta`
 * ordena por `em`), entao quem marca "onde a ordem esta agora" e o ultimo. */
.trilha li:last-child::before { background: var(--tinta); }
.trilha li:last-child { border-left-color: transparent; padding-bottom: 0; }
.trilha .quando {
  font-family: var(--fonte-codigo);
  font-size: 0.75rem;
  color: var(--tinta-fraca);
}
.trilha .passo { font-stretch: 88%; font-weight: 650; }
.trilha .de { color: var(--tinta-fraca); font-weight: 500; }
/* A seta U+2192 nao esta no subconjunto latino das fontes: desenhada em CSS
 * ela nao vira glifo de fallback nem quebra a linha de base. */
.trilha .seta {
  display: inline-block;
  width: 1.125rem;
  height: 0.5rem;
  margin: 0 0.125rem;
  vertical-align: -0.0625rem;
  background: currentcolor;
  color: var(--borda-forte);
  clip-path: polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
}

/* ── paginas de erro ──────────────────────────────────────────────────────── */

.pagina-erro {
  max-width: 34rem;
  margin: 4rem auto;
  text-align: center;
}
.pagina-erro .selo-http {
  display: inline-block;
  font-family: var(--fonte-codigo);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  color: var(--tinta-fraca);
  background: var(--superficie);
  margin-bottom: 1rem;
}
.pagina-erro h1 { margin-bottom: 0.75rem; }
.pagina-erro .nota { margin: 0 auto 1.75rem; max-width: 30rem; text-align: left; }

/* ── movimento ────────────────────────────────────────────────────────────── */

/* Tablet de oficina nao pede animacao, pede resposta. O pouco que existe some
 * quando o sistema pede. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button[type=submit]:active, .botao:active { transform: none; }
}