/* SICAV · folha única. Tema escuro do comando troca só os tokens. */

@font-face { font-family: 'Plex Sans'; src: url('/estatico/fontes/plex-sans/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/estatico/fontes/plex-sans/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/estatico/fontes/plex-sans/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Sans'; src: url('/estatico/fontes/plex-sans/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/estatico/fontes/plex-mono/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/estatico/fontes/plex-mono/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --fundo: #f3f1ec;
  --cartao: #ffffff;
  --cartao-2: #f7f5f1;
  --tinta: #17191e;
  --tinta-2: #4f535c;
  --tinta-3: #7d8089;
  --linha: #e4dfd6;
  --linha-forte: #bfb7a8;
  --vermelho: #c42a1e;
  --vermelho-fundo: #fce9e6;
  --verde: #1b7440;
  --verde-fundo: #e2f2e7;
  --azul: #33609f;
  --azul-fundo: #e5ecf6;
  --ambar: #a15c05;
  --ambar-barra: #df9226;
  --ambar-fundo: #fdf0da;
  --cinza-fundo: #ece9e3;
  --sombra: 0 1px 0 rgba(23, 25, 30, .04), 0 8px 24px -16px rgba(23, 25, 30, .18);
  --raio: 12px;
  --raio-p: 8px;
  --sans: 'Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: light;
}

[data-tema='escuro'] {
  --fundo: #0b1322;
  --cartao: #121d31;
  --cartao-2: #17243c;
  --tinta: #e9edf4;
  --tinta-2: #a4adbd;
  --tinta-3: #6f7a8e;
  --linha: #1f2c45;
  --linha-forte: #2c3b58;
  --vermelho: #f0564a;
  --vermelho-fundo: #3a1c24;
  --verde: #3fc27a;
  --verde-fundo: #13342a;
  --azul: #5b93e6;
  --azul-fundo: #182c4b;
  --ambar: #f0a83c;
  --ambar-barra: #f0a83c;
  --ambar-fundo: #3a2c16;
  --cinza-fundo: #1a263d;
  --sombra: none;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 1; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Marca */
.selo {
  display: inline-grid; place-items: center; align-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: #121317; color: #fff; line-height: 1; flex: none;
}
.selo b { font-size: 14px; font-weight: 700; }
.selo small { font-size: 6.5px; letter-spacing: .22em; margin-top: 2px; font-weight: 600; }
[data-tema='escuro'] .selo { background: #fff; color: #121317; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-nome { font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.marca-nome em { font-style: normal; color: var(--vermelho); }
.marca-unidade { display: block; font-size: 11.5px; color: var(--tinta-2); line-height: 1.2; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.topo-in {
  max-width: 1240px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 24px;
}
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a {
  text-decoration: none; padding: 7px 12px; border-radius: 999px;
  font-size: 14px; color: var(--tinta-2); font-weight: 500;
}
.nav a:hover { color: var(--tinta); background: var(--cartao-2); }
.nav a[aria-current='page'] { color: var(--tinta); background: var(--cartao); box-shadow: inset 0 0 0 1px var(--linha); }
.conta { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.conta-nome { text-align: right; line-height: 1.25; }
.conta-nome small { display: block; color: var(--tinta-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* Navegação inferior no celular */
.nav-baixo { display: none; }
@media (max-width: 860px) {
  .nav, .conta-nome { display: none; }
  .topo-in { padding: 8px 14px; }
  body { padding-bottom: 76px; }
  .nav-baixo {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--cartao); border-top: 1px solid var(--linha);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-baixo a {
    display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px;
    text-decoration: none; font-size: 11px; color: var(--tinta-2); font-weight: 500;
  }
  .nav-baixo a[aria-current='page'] { color: var(--vermelho); background: var(--vermelho-fundo); }
  .nav-baixo svg { width: 22px; height: 22px; }
}

/* Página */
.pagina { max-width: 1240px; margin: 0 auto; padding: 28px 20px 48px; }
.pagina.estreita { max-width: 760px; }
.cabeca { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabeca .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sobre {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 6px; display: flex; gap: 10px; align-items: center;
}
.sobre b { color: var(--vermelho); font-weight: 600; }
.cabeca h1 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; }
.cabeca p { color: var(--tinta-2); margin-top: 6px; max-width: 60ch; }
.voltar { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tinta-2); text-decoration: none; margin-bottom: 10px; }
.voltar:hover { color: var(--tinta); }

/* Cartões */
.cartao {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-cab {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--linha);
}
.cartao-cab h2, .rotulo {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2);
}
.cartao-cab .extra { margin-left: auto; font-size: 13px; color: var(--tinta-3); }
.cartao-corpo { padding: 16px 18px; }
.grade { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-lado { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 980px) { .g-lado, .g-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .g-2 { grid-template-columns: minmax(0, 1fr); } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pilha > * + * { margin-top: 16px; }

/* Números grandes */
.indicador { padding: 16px 18px; }
.indicador strong { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicador strong small { font-size: 15px; font-weight: 500; color: var(--tinta-2); margin-left: 2px; }
.indicador span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); font-weight: 500; }
.cor-verde { color: var(--verde); }
.cor-azul { color: var(--azul); }
.cor-vermelho { color: var(--vermelho); }
.cor-ambar { color: var(--ambar); }
.cor-suave { color: var(--tinta-3); }

/* Pílulas de situação */
.pilula {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--cinza-fundo); color: var(--tinta-2);
}
.pilula::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-em_servico, .p-ok, .p-conforme, .p-reparada { background: var(--verde-fundo); color: var(--verde); }
.p-disponivel { background: var(--azul-fundo); color: var(--azul); }
.p-baixada, .p-vencida, .p-nova, .p-alteracao { background: var(--vermelho-fundo); color: var(--vermelho); }
.p-manutencao, .p-atencao, .p-preexistente { background: var(--ambar-fundo); color: var(--ambar); }

/* Tabelas */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
  font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: 12px 18px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .dir { text-align: right; }
.tabela tbody tr[data-href] { cursor: pointer; }
.tabela tbody tr[data-href]:hover td { background: var(--cartao-2); }
.prefixo { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; text-decoration: none; }
a.prefixo:hover { color: var(--vermelho); }

/* Barra de óleo */
.barra { position: relative; height: 6px; width: 84px; background: var(--cinza-fundo); border-radius: 99px; overflow: hidden; }
.barra i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--verde); }
.barra.atencao i { background: var(--ambar-barra); }
.barra.vencida i { background: var(--vermelho); }
.barra-larga { width: 100%; height: 8px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--linha-forte);
  background: var(--cartao); color: var(--tinta); font-weight: 600; font-size: 14.5px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.botao:hover { border-color: var(--tinta-3); }
.botao.primario { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.botao.primario:hover { background: #000; }
[data-tema='escuro'] .botao.primario:hover { background: #fff; }
.botao.alerta { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.botao.pequeno { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.botao.grande { min-height: 54px; font-size: 16px; width: 100%; border-radius: 12px; }
.botao.fantasma { border-color: transparent; background: transparent; color: var(--tinta-2); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--tinta-2); text-decoration: underline; cursor: pointer; font-size: 13px; }

/* Formulários */
.campo { display: grid; gap: 6px; }
.campo > span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--tinta-2); }
.campo small { color: var(--tinta-3); font-size: 12.5px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--linha-forte); background: var(--cartao); font-size: 16px;
}
textarea.entrada { min-height: 84px; resize: vertical; }
.entrada:focus, .botao:focus-visible, .opcao input:focus-visible + span, a:focus-visible {
  outline: 2px solid var(--vermelho); outline-offset: 2px;
}
.entrada.km { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.form-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Avisos */
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--azul) 10%, var(--cartao));
  border: 1px solid color-mix(in srgb, var(--azul) 30%, var(--cartao));
  margin-bottom: 18px;
}
.aviso.ok { background: color-mix(in srgb, var(--verde) 10%, var(--cartao)); border-color: color-mix(in srgb, var(--verde) 32%, var(--cartao)); }
.aviso.erro { background: color-mix(in srgb, var(--vermelho) 9%, var(--cartao)); border-color: color-mix(in srgb, var(--vermelho) 35%, var(--cartao)); color: var(--tinta); }
.aviso.atencao { background: color-mix(in srgb, var(--ambar) 11%, var(--cartao)); border-color: color-mix(in srgb, var(--ambar) 35%, var(--cartao)); }
.aviso::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--azul); }
.aviso.ok::before { background: var(--verde); }
.aviso.erro::before { background: var(--vermelho); }
.aviso.atencao::before { background: var(--ambar); }

/* Listas simples */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--linha); }
.lista li:last-child { border-bottom: 0; }
.lista .fim { margin-left: auto; text-align: right; }
.lista .sub { display: block; font-size: 12.5px; color: var(--tinta-3); }
.vazio { padding: 22px 18px; color: var(--tinta-3); font-size: 14px; }

/* Fotos */
.angulos { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .angulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.angulo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--cinza-fundo); border: 1.5px dashed var(--linha-forte);
  display: grid; place-items: center; text-align: center; cursor: pointer;
}
.angulo.feito { border: 1.5px solid var(--verde); }
.angulo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.angulo .legenda {
  position: absolute; inset: auto 0 0 0; padding: 18px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: left;
  display: flex; justify-content: space-between; align-items: end;
}
.angulo:not(.feito) .legenda { background: none; color: var(--tinta-2); position: static; padding: 0; display: block; }
.angulo .toque { display: grid; gap: 6px; justify-items: center; color: var(--tinta-2); font-size: 12px; }
.angulo .toque svg { width: 28px; height: 28px; }
.angulo .check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: #fff;
  display: grid; place-items: center; font-size: 13px;
}
.angulo input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.angulo.enviando::after {
  content: 'Enviando…'; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-weight: 600; font-size: 13px;
}
.angulo.falhou { border-color: var(--vermelho); }
.progresso-fotos { display: flex; align-items: baseline; gap: 6px; }
.progresso-fotos strong { font-size: 28px; font-weight: 600; }

.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparacao figure { margin: 0; }
.comparacao figcaption { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); font-weight: 600; margin-bottom: 6px; }
.quadro { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--cinza-fundo); display: grid; place-items: center; color: var(--tinta-3); font-size: 12px; }
.quadro img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.miniaturas a { display: block; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--cinza-fundo); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

/* Ficha */
.ficha-topo { display: flex; gap: 24px; align-items: end; flex-wrap: wrap; }
.ficha-prefixo { font-family: var(--mono); font-size: clamp(34px, 6vw, 52px); font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.ficha-km { margin-left: auto; text-align: right; }
.ficha-km strong { font-family: var(--mono); font-size: 34px; font-weight: 600; display: block; line-height: 1; }
.grafico { position: relative; height: 220px; }

/* Login */
.tela-acesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.acesso-lado {
  background: #121317; color: #f2efe8; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.acesso-lado .selo { background: #f2efe8; color: #121317; width: 46px; height: 46px; }
.acesso-lado h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; margin-top: 36px; max-width: 12ch; }
.acesso-lado h1 em { font-style: normal; color: #ff5a4b; }
.acesso-lado p { color: #b8b5ae; max-width: 40ch; margin-top: 16px; }
.acesso-lado .rodape-restrito { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8b8880; }
.acesso-lado .rodape-restrito b { color: #ff5a4b; font-weight: 600; }
.acesso-numero {
  position: absolute; right: -24px; bottom: -60px; font-size: 360px; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 90, 75, .28); pointer-events: none; user-select: none;
}
.acesso-form { display: grid; place-items: center; padding: 32px 20px; }
.acesso-form form { width: min(380px, 100%); }
.acesso-form h2 { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 860px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .acesso-lado { padding: 28px 22px; }
  .acesso-lado h1 { margin-top: 20px; font-size: 32px; }
  .acesso-lado .rodape-restrito, .acesso-numero { display: none; }
}

/* Rodapé */
.rodape {
  max-width: 1240px; margin: 0 auto; padding: 18px 20px 28px; border-top: 1px solid var(--linha);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.rodape b { color: var(--vermelho); font-weight: 600; }

/* Painel de comando */
.ao-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-2); }
.ao-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 var(--verde); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ao-vivo::before { animation: none; } }
.rosca { display: flex; align-items: center; gap: 22px; }
.rosca svg { width: 132px; height: 132px; flex: none; }
.legenda-lista { list-style: none; padding: 0; margin: 0; flex: 1; display: grid; gap: 8px; font-size: 14px; }
.legenda-lista li { display: flex; align-items: center; gap: 8px; }
.legenda-lista i { width: 9px; height: 9px; border-radius: 3px; }
.legenda-lista b { margin-left: auto; font-variant-numeric: tabular-nums; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.area {
  border-radius: 10px; padding: 12px; min-height: 76px; display: flex; flex-direction: column; justify-content: space-between;
  background: color-mix(in srgb, var(--verde) 12%, var(--cartao)); border: 1px solid color-mix(in srgb, var(--verde) 26%, var(--cartao));
  font-size: 13px;
}
.area b { align-self: flex-end; min-width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #08130d; font-size: 13px; }
.area.descoberta { background: color-mix(in srgb, var(--vermelho) 12%, var(--cartao)); border: 1px dashed var(--vermelho); }
.area.descoberta em { font-style: normal; color: var(--vermelho); font-size: 11px; letter-spacing: .12em; font-weight: 600; }
@media (max-width: 520px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.barras-dia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; margin-top: 14px; }
.barras-dia div { display: grid; gap: 6px; justify-items: center; align-self: stretch; grid-template-rows: 1fr auto; }
.barras-dia i { width: 100%; max-width: 36px; align-self: end; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--azul) 55%, var(--cartao-2)); min-height: 3px; }
.barras-dia .hoje i { background: var(--vermelho); }
.barras-dia span { font-size: 11px; color: var(--tinta-3); }
.reincidencia li { display: grid; grid-template-columns: 64px 1fr 24px; gap: 12px; align-items: center; padding: 8px 0; border: 0; }
.trilho { height: 7px; background: var(--cinza-fundo); border-radius: 99px; overflow: hidden; }
.trilho i { display: block; height: 100%; border-radius: 99px; }
.semaforo li { padding: 10px 18px; }
.semaforo .marcador { width: 20px; height: 14px; border-radius: 3px; background: var(--ambar-barra); flex: none; }
.semaforo .vencida .marcador { background: var(--vermelho); }

/* Telas da praça: uma coisa por vez, alvo grande para o dedo */
.praca { padding-top: 22px; }
.turno { margin: 8px 0 20px; }
.turno h1 { font-size: 26px; font-weight: 600; }
.turno .turno-prefixo { font-family: var(--mono); font-size: clamp(44px, 14vw, 64px); line-height: 1; margin: 6px 0 8px; }
.acoes-turno { display: grid; gap: 10px; }
.acao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 68px; padding: 12px 20px; border-radius: 14px;
  background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra);
  text-decoration: none; font-size: 18px; font-weight: 600;
}
.acao:hover { border-color: var(--linha-forte); }
.acao small { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.acao b { font-size: 15px; font-weight: 600; }
.acao.primaria { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); margin-top: 8px; }

/* ------------------------------------------------------------------
   Formulário de campo (recebimento e devolução da viatura)
   Pensado para o celular na mão, na rua, com sol: alvo de 52px, estado
   dito três vezes (cor cheia, ícone e texto), nada depende de nuance.
   ------------------------------------------------------------------ */
.form-campo { padding-bottom: 24px; }
.form-etapas { display: grid; gap: 18px; }
@media (min-width: 861px) { .form-etapas { gap: 22px; } }

.etapa {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px;
  padding: 18px 16px 20px; box-shadow: var(--sombra);
}
.etapa > * + * { margin-top: 14px; }
.etapa-aberta { background: transparent; border: 0; box-shadow: none; padding: 10px 0 0; }
.etapa-aberta > .etapa-cab { padding: 0 4px; }
.etapa-aberta > * + * { margin-top: 16px; }
.etapa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.etapa-titulo {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.etapa-titulo > span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--tinta); color: var(--cartao); font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.etapa-titulo small { font-size: 13px; font-weight: 400; color: var(--tinta-3); }
.etapa-dobra > summary { cursor: pointer; list-style: none; }
.etapa-dobra > summary::-webkit-details-marker { display: none; }
.etapa-dobra > summary > span { background: var(--ambar); }
.lista-simples { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 15px; }
.lista-simples small { color: var(--tinta-3); }

.grupo { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
.grupo legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.grupo legend small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-campo .entrada { min-height: 52px; border-width: 1.5px; border-radius: 12px; font-size: 17px; }
.form-campo .entrada:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta) 18%, transparent); }
.form-campo textarea.entrada { min-height: 88px; line-height: 1.45; }
.dica { margin: 8px 0 0; font-size: 14px; color: var(--tinta-2); }
.dica b { color: var(--tinta); }
.dica a { color: var(--tinta); font-weight: 600; }
@media (max-width: 420px) { .linha-campos { grid-template-columns: 1fr; } }

/* Áreas */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--linha-forte); background: var(--cartao); cursor: pointer; font-weight: 500; font-size: 15.5px;
  transition: background .12s, border-color .12s;
}
.chip span::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linha-forte); flex: none;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
}
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 600; }
.chip input:checked + span::before { content: '✓'; background: #fff; border-color: #fff; color: var(--tinta); font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Óleo */
.oleo { border-top: 1px dashed var(--linha-forte); padding-top: 12px; }
.oleo > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; font-size: 15px; min-height: 32px; }
.oleo > summary::-webkit-details-marker { display: none; }
.oleo-link { color: var(--tinta-2); text-decoration: underline; font-size: 14px; }
.oleo[open] > summary { margin-bottom: 12px; }

/* Combustível: cinco blocos lado a lado, como o marcador do painel */
.tanque { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tanque-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.tanque-corpo {
  display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 76px; padding: 10px 4px;
  border: 1.5px solid var(--linha-forte); border-radius: 12px; background: var(--cartao); cursor: pointer;
  font-weight: 600; font-size: 15px; transition: background .12s, border-color .12s;
}
.medidor { display: grid; grid-template-columns: repeat(4, 7px); gap: 3px; align-items: end; }
.medidor i { height: 18px; border-radius: 2px; background: var(--cinza-fundo); }
.medidor i.cheia { background: var(--verde); }
.reserva .medidor i:first-child { background: var(--vermelho); }
.tanque-opcao input:checked + .tanque-corpo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.tanque-opcao input:checked + .tanque-corpo .medidor i { background: rgba(255, 255, 255, .22); }
.tanque-opcao input:checked + .tanque-corpo .medidor i.cheia { background: #6ee7a0; }
.tanque-opcao.reserva input:checked + .tanque-corpo { background: var(--vermelho); border-color: var(--vermelho); }
.tanque-opcao.reserva input:checked + .tanque-corpo .medidor i:first-child { background: #fff; }
.tanque-opcao input:focus-visible + .tanque-corpo { outline: 3px solid var(--azul); outline-offset: 2px; }
.comb { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.comb.reserva { color: var(--vermelho); font-weight: 600; }

/* Escolha: dois botões separados, estado inconfundível */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha-opcao { position: relative; display: block; }
.escolha-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-botao {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 12px;
  border: 1.5px solid var(--linha-forte); border-radius: 12px; background: var(--cartao); color: var(--tinta);
  font-size: 16px; font-weight: 600; text-align: center; line-height: 1.2; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.escolha-botao:active { transform: scale(.98); }
.escolha-marca {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linha-forte); flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
}
.escolha-opcao input:checked + .escolha-botao { color: #fff; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .55); }
.escolha-opcao input:checked + .escolha-botao .escolha-marca { background: #fff; border-color: #fff; }
.tom-ok input:checked + .escolha-botao { background: var(--verde); border-color: var(--verde); }
.tom-ok input:checked + .escolha-botao .escolha-marca { color: var(--verde); }
.tom-ok input:checked + .escolha-botao .escolha-marca::after { content: '✓'; }
.tom-alerta input:checked + .escolha-botao { background: var(--vermelho); border-color: var(--vermelho); }
.tom-alerta input:checked + .escolha-botao .escolha-marca { color: var(--vermelho); }
.tom-alerta input:checked + .escolha-botao .escolha-marca::after { content: '!'; }
.tom-atencao input:checked + .escolha-botao { background: var(--ambar); border-color: var(--ambar); }
.tom-atencao input:checked + .escolha-botao .escolha-marca { color: var(--ambar); }
.tom-atencao input:checked + .escolha-botao .escolha-marca::after { content: '!'; }
.escolha-opcao input:focus-visible + .escolha-botao { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (hover: hover) {
  .escolha-opcao input:not(:checked) + .escolha-botao:hover { border-color: var(--tinta-3); background: var(--cartao-2); }
  .chip input:not(:checked) + span:hover, .tanque-opcao input:not(:checked) + .tanque-corpo:hover { border-color: var(--tinta-3); }
}

/* Itens da conferência */
.faixa-pendencias {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--ambar) 12%, var(--cartao));
  border: 1px solid color-mix(in srgb, var(--ambar) 28%, var(--cartao)); border-left: 5px solid var(--ambar);
  font-size: 15px; line-height: 1.45;
}
.faixa-pendencias-icone {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--ambar); color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
}
.itens { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; gap: 14px; }
.item {
  position: relative; padding: 14px 14px 16px; border: 1.5px solid var(--linha); border-radius: 14px; background: var(--cartao);
  border-left-width: 5px; border-left-color: var(--linha-forte); scroll-margin: 90px;
  transition: border-color .15s;
}
.item > * + * { margin-top: 12px; }
.item.completo { border-left-color: var(--verde); }
.item.com-alteracao { border-left-color: var(--vermelho); }
.item.falta { border-color: var(--vermelho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 20%, transparent); }
.item-cab { display: flex; gap: 12px; align-items: flex-start; }
.item-num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none; margin-top: 1px;
  background: var(--cinza-fundo); color: var(--tinta-2); font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.item-nome { flex: 1; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.item-nome small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--tinta-2); line-height: 1.35; }
.item-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* O número do item vira o estado: cinza a conferir, verde conferido, âmbar mantida, vermelho nova alteração */
.item-num { transition: background .15s, color .15s; }
.item.completo .item-num, .item.mantida .item-num, .item.com-alteracao .item-num { color: #fff; font-size: 0; }
.item.completo .item-num { background: var(--verde); }
.item.mantida .item-num { background: var(--ambar); }
.item.com-alteracao .item-num { background: var(--vermelho); }
.item.completo .item-num::after { content: '✓'; font-size: 15px; }
.item.mantida .item-num::after, .item.com-alteracao .item-num::after { content: '!'; font-size: 15px; }
.item.mantida { border-left-color: var(--ambar); }
.item-pergunta { font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: -4px; }
.item-obs { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--vermelho) 6%, var(--cartao)); }
.item-obs > * + * { margin-top: 10px; }
.item-obs .campo > span { color: var(--vermelho); }
.item:not(.com-alteracao) .item-obs { display: none; }

.pendencia {
  padding: 12px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--ambar) 45%, var(--cartao));
  background: color-mix(in srgb, var(--ambar) 8%, var(--cartao));
}
.pendencia > * + * { margin-top: 10px; }
.pendencia-rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.pendencia-texto { display: flex; gap: 12px; align-items: flex-start; }
.pendencia-foto { flex: none; width: 64px; height: 48px; border-radius: 8px; overflow: hidden; }
.pendencia-foto img { width: 100%; height: 100%; object-fit: cover; }
.pendencia-descricao { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.pendencia-meta { margin: 3px 0 0; font-size: 13px; color: var(--tinta-2); }
.pendencia:has(input[value="sanada"]:checked) { background: color-mix(in srgb, var(--verde) 8%, var(--cartao)); border-color: color-mix(in srgb, var(--verde) 45%, var(--cartao)); }
.pendencia:has(input[value="sanada"]:checked) .pendencia-rotulo { color: var(--verde); }
.pendencia:has(input[value="sanada"]:checked) .pendencia-descricao { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--tinta-2); }

.foto-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px;
  border: 1.5px dashed var(--linha-forte); border-radius: 12px; background: var(--cartao); cursor: pointer;
}
.foto-item input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.foto-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.foto-item-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--cinza-fundo); color: var(--tinta); flex: none; }
.foto-item-icone svg { width: 24px; height: 24px; }
.foto-item-texto b { display: block; font-size: 15px; }
.foto-item-texto small { display: block; font-size: 13px; color: var(--tinta-2); }
.foto-item.com-foto { border-style: solid; border-color: var(--verde); }
.foto-item.com-foto .foto-item-icone { display: none; }

.botao-secundario {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linha-forte);
  background: var(--cartao); color: var(--tinta); font-size: 14px; font-weight: 600; cursor: pointer;
}
.botao-secundario:active { background: var(--cinza-fundo); }

/* Barra de envio: acompanha a rolagem e diz o que falta */
.barra-envio {
  position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--tinta); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.barra-envio-status { flex: 1; min-width: 0; line-height: 1.25; }
.barra-envio-status strong { display: block; font-size: 15px; }
.barra-envio-status span { display: block; font-size: 13px; color: rgba(255, 255, 255, .72); }
.barra-envio .botao.primario { background: #fff; color: var(--tinta); border-color: #fff; min-height: 50px; padding: 0 20px; font-size: 16px; }
.barra-envio.pronta .botao.primario { background: #6ee7a0; border-color: #6ee7a0; color: #0b2a17; }
.barra-envio.pronta strong::before { content: '✓ '; color: #6ee7a0; }
@media (max-width: 480px) {
  .pagina.form-campo { padding-inline: 12px; }
  .etapa { padding: 16px 14px 18px; }
  .item { padding: 12px 12px 14px; border-left-width: 5px; }
  .escolha { gap: 8px; }
  .escolha-botao { gap: 8px; padding: 8px 6px; font-size: 15.5px; }
  .escolha-marca { width: 20px; height: 20px; }
  .barra-envio-status span { display: none; }
  .barra-envio { padding: 8px 8px 8px 14px; }
  .barra-envio .botao.primario { min-height: 46px; padding: 0 16px; }
}
@media (max-width: 860px) {
  .barra-envio { bottom: calc(80px + env(safe-area-inset-bottom)); margin-inline: -4px; }
}
@media (min-width: 861px) {
  .etapa { padding: 24px 24px 26px; }
  .item { padding: 16px 18px 18px; }
  .escolha { max-width: 460px; }
  .itens { gap: 16px; }
  .etapa-aberta > * + * { margin-top: 18px; }
  .pendencia .escolha { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .escolha-botao, .chip span, .tanque-corpo, .item { transition: none; }
}

.mini-lista { width: 56px; flex: none; }
.mini-lista img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.mini-item { display: flex; gap: 6px; margin-top: 6px; }
.mini-item a { width: 64px; }
details.cartao > summary { cursor: pointer; list-style: none; border-bottom: 0; }
details.cartao[open] > summary { border-bottom: 1px solid var(--linha); }

/* ------------------------------------------------------------------
   Instrumentos: velocímetro, hodômetro, marcador de combustível
   Lembram o painel da viatura. A cor diz a faixa; o ponteiro varre até o valor.
   ------------------------------------------------------------------ */
.painel-instrumentos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.painel-instrumentos > .instrumento {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; padding: 16px 12px 18px;
  box-shadow: var(--sombra);
}
@media (max-width: 980px) { .painel-instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .painel-instrumentos { gap: 10px; } .painel-instrumentos > .instrumento { padding: 12px 6px 14px; } }

.instrumento { display: grid; justify-items: center; align-content: start; text-align: center; text-decoration: none; color: inherit; min-width: 0; }
.instrumento svg { width: 100%; max-width: 230px; height: auto; overflow: visible; }
.instrumento.tam-p svg { max-width: 170px; }
a.instrumento { border-radius: 14px; padding: 8px 4px 10px; transition: background .15s; }
a.instrumento:hover { background: var(--cartao-2); }
.instrumento-rotulo { margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.instrumento-sub { margin-top: 3px; font-size: 13px; color: var(--tinta-3); line-height: 1.3; }
a.instrumento .instrumento-rotulo { font-family: var(--mono); font-size: 15px; letter-spacing: .02em; text-transform: none; color: var(--tinta); }

.med-trilho { fill: none; stroke: var(--cinza-fundo); stroke-width: 12; stroke-linecap: round; }
.med-zona { fill: none; stroke-width: 3; opacity: .9; }
.zona-bom { stroke: var(--verde); }
.zona-medio { stroke: var(--ambar-barra); }
.zona-ruim { stroke: var(--vermelho); }
.zona-neutro { stroke: var(--linha-forte); }
.med-marca { stroke: var(--tinta-3); stroke-width: 1.2; opacity: .55; }
.med-marca.principal { stroke: var(--tinta-2); stroke-width: 2; opacity: .9; }
.med-valor { fill: none; stroke-width: 12; stroke-linecap: round; stroke: var(--verde); }
.nivel-medio .med-valor { stroke: var(--ambar-barra); }
.nivel-ruim .med-valor { stroke: var(--vermelho); }
.nivel-neutro .med-valor { stroke: var(--azul); }
.med-rotulo { fill: var(--tinta-3); font: 600 11px var(--mono); }
.med-ponteiro { fill: var(--tinta); }
.nivel-ruim .med-ponteiro { fill: var(--vermelho); }
.med-eixo { fill: var(--tinta); }
.med-eixo-centro { fill: var(--cartao); }
.med-texto { fill: var(--tinta); font: 600 30px var(--sans); letter-spacing: -.02em; }
.tam-p .med-texto { font-size: 28px; }
.med-unidade { fill: var(--tinta-2); font-size: 14px; font-weight: 500; }
.nivel-ruim .med-texto { fill: var(--vermelho); }

/* Hodômetro de dígitos, com a última casa invertida como no painel do carro */
.instrumento-hodometro { align-content: center; gap: 12px; }
.hodometro { display: grid; justify-items: center; gap: 6px; }
.hodometro-digitos { display: inline-flex; gap: 3px; padding: 6px; border-radius: 10px; background: #0c0f14; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.digito {
  display: grid; place-items: center; width: 30px; height: 44px; border-radius: 5px;
  background: linear-gradient(#262b33, #14171c 48%, #0a0c10 52%, #1b1f26);
  color: #f5f5f0; font: 600 26px var(--mono); font-variant-numeric: tabular-nums;
}
.digito.ultimo { background: linear-gradient(#f3f1ec, #dcd8cf 48%, #cfcac0 52%, #ebe8e2); color: #111; }
.hodometro.tam-p .digito { width: 20px; height: 30px; font-size: 17px; }
.hodometro-unidade { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: -2px; }
.parciais-km { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--tinta-2); }
.parciais-km b { font-family: var(--mono); color: var(--tinta); }
@media (max-width: 420px) { .digito { width: 22px; height: 34px; font-size: 19px; } }

.grade-mostradores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }

/* Ficha: cabeçalho como o painel da própria viatura */
.ficha-painel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; align-items: center;
  padding: 24px; border-radius: 20px; color: var(--tinta);
  background: radial-gradient(120% 140% at 80% 0%, #1b2a45 0%, var(--fundo) 60%);
  border: 1px solid var(--linha-forte); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .7);
}
.ficha-painel .ficha-prefixo { font-family: var(--mono); font-size: clamp(38px, 6vw, 56px); font-weight: 600; line-height: 1; margin: 4px 0; }
.ficha-identidade > * + * { margin-top: 8px; }
.ficha-servico { font-size: 14px; color: var(--verde); font-weight: 500; }
.ficha-instrumentos { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; align-items: center; }
@media (max-width: 860px) {
  .ficha-painel { grid-template-columns: 1fr; padding: 18px 14px; }
  .ficha-instrumentos { grid-template-columns: 1fr 1fr; }
  .ficha-instrumentos .instrumento-hodometro { grid-column: 1 / -1; order: -1; }
}

/* Frota em cartões, com filtro */
.filtro-frota { display: flex; gap: 12px 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtro-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--linha-forte); background: var(--cartao); color: var(--tinta); font-size: 14px; font-weight: 600; cursor: pointer;
}
.filtro-chip b { font-family: var(--mono); font-size: 13px; padding: 1px 7px; border-radius: 999px; background: var(--cinza-fundo); }
.filtro-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); }
.filtro-chip[data-filtro="todas"]::before { display: none; }
.filtro-chip.sit-em_servico::before { background: var(--verde); }
.filtro-chip.sit-disponivel::before { background: var(--azul); }
.filtro-chip.sit-manutencao::before { background: var(--ambar-barra); }
.filtro-chip.sit-baixada::before { background: var(--vermelho); }
.filtro-chip.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--cartao); }
.filtro-chip.ativo b { background: rgba(255, 255, 255, .18); }
[data-tema='escuro'] .filtro-chip.ativo b { background: rgba(0, 0, 0, .12); }
.filtro-lado { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; min-width: 220px; }
.filtro-busca {
  flex: 1; max-width: 280px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--linha-forte); background: var(--cartao); font-size: 15px;
}
.filtro-busca:focus { outline: none; border-color: var(--tinta); }
.visao { display: inline-flex; border: 1.5px solid var(--linha-forte); border-radius: 12px; overflow: hidden; }
.visao-botao { display: grid; place-items: center; width: 40px; height: 38px; border: 0; background: var(--cartao); color: var(--tinta-2); cursor: pointer; }
.visao-botao svg { width: 18px; height: 18px; }
.visao-botao.ativo { background: var(--tinta); color: var(--cartao); }
.filtro-vazio { color: var(--tinta-3); padding: 12px 2px; }
@media (max-width: 600px) { .filtro-lado { min-width: 100%; } .filtro-busca { max-width: none; } .filtro-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: -2px; } .filtro-chip { flex: none; } }

.vtr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.vtr-bloco {
  position: relative; display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 14px; overflow: hidden;
  background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.vtr-bloco::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tinta-3); }
.vtr-bloco.sit-em_servico::before { background: var(--verde); }
.vtr-bloco.sit-disponivel::before { background: var(--azul); }
.vtr-bloco.sit-manutencao::before { background: var(--ambar-barra); }
.vtr-bloco.sit-baixada::before { background: var(--vermelho); }
.vtr-bloco:hover { transform: translateY(-2px); border-color: var(--linha-forte); box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .45); }
.vtr-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vtr-prefixo { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.vtr-topo .pilula { font-size: 11.5px; padding: 2px 8px 2px 6px; }
.vtr-quem { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtr-medidas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px dashed var(--linha); }
.vtr-comb, .vtr-oleo { display: inline-flex; align-items: center; gap: 6px; }
.vtr-comb-barras { display: inline-grid; grid-template-columns: repeat(4, 5px); gap: 2px; align-items: end; }
.vtr-comb-barras i { height: 14px; border-radius: 1.5px; background: var(--cinza-fundo); }
.vtr-comb-barras i.cheia { background: var(--verde); }
.vtr-comb.reserva .vtr-comb-barras i:first-child { background: var(--vermelho); }
.vtr-comb.reserva .vtr-mini-rotulo { color: var(--vermelho); font-weight: 700; }
.vtr-mini-rotulo { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.vtr-oleo svg { width: 20px; height: 20px; }
.anel-trilho { fill: none; stroke: var(--cinza-fundo); stroke-width: 3.5; }
.anel-valor { fill: none; stroke: var(--verde); stroke-width: 3.5; stroke-linecap: round; }
.vtr-oleo.nivel-atencao .anel-valor { stroke: var(--ambar-barra); }
.vtr-oleo.nivel-vencida .anel-valor { stroke: var(--vermelho); }
.vtr-oleo.nivel-vencida .vtr-mini-rotulo { color: var(--vermelho); }
.vtr-km { margin-left: auto; font: 600 14px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vtr-km small { font-size: 11px; color: var(--tinta-3); font-weight: 400; }
@media (max-width: 420px) { .vtr-grade { grid-template-columns: 1fr 1fr; gap: 8px; } .vtr-bloco { padding: 12px 10px 10px; } .vtr-prefixo { font-size: 17px; } .vtr-topo .pilula { display: none; } .vtr-medidas { gap: 8px; } .vtr-oleo .vtr-mini-rotulo { display: none; } }

/* Rodagem de 7 dias: colunas que crescem */
.barras-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 170px; align-items: end; }
.barra-dia { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; text-align: center; }
.barra-dia-valor { font: 600 11px var(--mono); color: var(--tinta-2); min-height: 14px; }
.barra-dia-trilho { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.barra-dia-trilho i {
  display: block; width: 100%; max-width: 34px; height: 0; min-height: 3px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, color-mix(in srgb, var(--azul) 70%, var(--cartao)), var(--azul));
  transition: height .9s cubic-bezier(.2, .8, .2, 1);
}
.barra-dia.hoje .barra-dia-trilho i { background: linear-gradient(to top, color-mix(in srgb, var(--vermelho) 70%, var(--cartao)), var(--vermelho)); }
.barra-dia.hoje .barra-dia-rotulo { color: var(--tinta); font-weight: 700; }
.barra-dia-rotulo { font-size: 12px; color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) {
  .barra-dia-trilho i, .vtr-bloco { transition: none; }
}

/* Cores por classe: atributo de SVG não aceita var(), e a CSP bloqueia style inline */
.st-trilho { stroke: var(--cinza-fundo); }
.st-em_servico { stroke: var(--verde); }
.st-disponivel { stroke: var(--azul); }
.st-manutencao { stroke: var(--ambar); }
.st-baixada { stroke: var(--vermelho); }
.bg-em_servico, .bg-verde { background: var(--verde); }
.bg-disponivel { background: var(--azul); }
.bg-manutencao, .bg-ambar { background: var(--ambar-barra); }
.bg-baixada, .bg-vermelho { background: var(--vermelho); }
.svg-tinta { fill: var(--tinta); }
.svg-fraco { fill: var(--tinta-3); }
.svg-dia { fill: var(--azul); opacity: .55; }
.svg-hoje { fill: var(--vermelho); }
svg.mt { width: 100%; height: auto; display: block; }
a.cartao { display: block; text-decoration: none; }
a.cartao:hover { border-color: var(--linha-forte); }
.cartao-corpo strong.mono { font-size: 22px; font-weight: 600; display: block; }

/* Utilitários */
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mt { margin-top: 16px; }
.mt-g { margin-top: 28px; }
.pequeno { font-size: 13px; }
.suave { color: var(--tinta-2); }
.fraco { color: var(--tinta-3); }
details.dobra summary { cursor: pointer; list-style: none; }
details.dobra summary::-webkit-details-marker { display: none; }
.senha-gerada { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: .06em; padding: 10px 14px; background: var(--cartao-2); border-radius: 8px; display: inline-block; margin: 6px 0; user-select: all; }
.tag { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px; background: var(--cinza-fundo); color: var(--tinta-2); letter-spacing: .04em; }