/* GUARITA — estilo próprio (em cima do app.css, que é a base do kit editorial TOPNEX). */

/* --- menu gaveta: o app.css entrega a gaveta, mas quem acerta o lugar do conteúdo é o
   CSS do módulo (mesmo modelo do EPI/pneus: trilho de ícones no desktop). Sem este
   bloco o menu fica POR CIMA do conteúdo. --- */
.drawer{padding-bottom:6px}
/* Sair no PÉ do menu (além do cabeçalho): é onde as pessoas procuram. Quem empurra o
   rodapé do menu pra baixo é ele — o "Fixar menu" some no celular e no trilho, então
   o margin-top:auto não pode ficar na etiqueta. */
.drawer .drawer-sair{margin-top:auto;color:var(--verm)}
.drawer .drawer-sair:hover{background:#FDECEC;color:var(--verm)}
.drawer .drawer-sair.ativa{background:transparent}
.drawer .drawer-flag{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:12.5px;
  font-weight:600;color:var(--suave);cursor:pointer;user-select:none;border-top:1px solid var(--linha)}
.drawer .drawer-flag .fl-txt{margin-right:auto}
.drawer .drawer-flag input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;clip:rect(0 0 0 0)}
.drawer .drawer-flag .sw{width:38px;height:22px;border-radius:11px;background:var(--linha);position:relative;transition:background .18s;flex:none}
.drawer .drawer-flag .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.drawer .drawer-flag input:checked + .sw{background:var(--teal)}
.drawer .drawer-flag input:checked + .sw::after{transform:translateX(16px)}
.drawer button .ic svg{width:19px;height:19px;display:block}
@media (max-width:899px){ .drawer .drawer-flag{display:none} }
@media (min-width:900px){
  .drawer{transition:width .2s,box-shadow .2s}
  /* FIXO ABERTO (padrão): conteúdo ao LADO da gaveta (248px) */
  main{margin-left:248px !important;margin-right:auto !important;transition:margin-left .2s}
  /* TRILHO (menu não fixado): sobra só 64px; a gaveta desliza por cima no hover */
  body.drawer-mini .drawer-flag{display:none}
  body.drawer-mini .drawer:hover .drawer-flag{display:flex}
  body.drawer-mini .drawer{width:64px;overflow:hidden}
  body.drawer-mini main{margin-left:64px !important}
  body.drawer-mini .drawer button{justify-content:center;padding:13px 0;gap:0}
  body.drawer-mini .drawer button span:not(.ic){display:none}
  body.drawer-mini .drawer:hover{width:248px;overflow-y:auto;box-shadow:0 14px 44px rgba(0,12,24,.28);z-index:60}
  body.drawer-mini .drawer:hover button{justify-content:flex-start;padding:13px 14px;gap:13px}
  body.drawer-mini .drawer:hover button span:not(.ic){display:inline}
}

/* --- cabeçalho: o kit deixa o topo BRANCO quando o app não usa body.ed (app.css:304),
   mas o ☰ e o Sair continuam com letra branca — some tudo no fundo claro. Como o
   GUARITA tem cabeçalho próprio, refaço os dois em tom claro. --- */
body:not(.ed):not(.dark) .topo-menu,
body:not(.ed):not(.dark) .topo-sair{background:#f4f5f7;border:1px solid #e9eaed;color:#101828}
body:not(.ed):not(.dark) .topo-menu:hover,
body:not(.ed):not(.dark) .topo-sair:hover{background:#eceef1}
body:not(.ed):not(.dark) .topo-user{color:#475467}
/* sem o botão de local (que no kit é quem tem o margin-left:auto), o nome e o canto do
   usuário ficavam grudados no título — empurro os dois pra direita aqui */
/* nome de gente sempre em CAIXA ALTA, e por CSS: o nome vem do ERP com acento e caixa
   mista ("Diogo José Almeida Camilo") e o padrão da casa é maiúsculo na tela. */
.topo-user{margin-left:auto;text-transform:uppercase}
/* o nome do app não encolhe: quem cede espaço é o bloco do veículo, que tem reticências.
   Sem isto o flex espreme o "GUARITA" letra a letra numa coluna, no celular estreito. */
.topo-marca{flex:0 0 auto;white-space:nowrap}

/* --------- bloco do contexto no alto: caminhão + transportadora de agora ---------
   Duas linhas dentro de um botão só: a PLACA em cima, grande, porque é ela que abre a
   cancela e é por ela que a pessoa se reconhece; a transportadora embaixo, pequena, que é
   contexto e não identificação. Largura com teto e `text-overflow` porque razão social de
   transportadora é comprida ("TRANSPORTES XYZ LTDA - FILIAL SAO JOSE") e não pode empurrar
   o avatar pra fora da tela. `min-width:0` no miolo: sem ele o flex se recusa a encolher o
   texto e o `ellipsis` nunca acontece. */
/* `min-width:0` é o que faz o bloco CEDER. Item de flex não encolhe abaixo do próprio
   conteúdo enquanto o mínimo for `auto` — e com razão social comprida no celular ele
   empurrava o avatar pra fora da tela em vez de aparar o texto. */
.topo-ctx{display:flex;align-items:center;gap:9px;margin-left:14px;flex:0 1 auto;min-width:0;
  padding:5px 9px;border:1px solid var(--linha);border-radius:12px;background:#f7f8fa;
  font-family:inherit;cursor:pointer;text-align:left;max-width:min(44vw,340px);
  transition:background .15s,border-color .15s}
.topo-ctx:hover{background:#eceef1;border-color:#d4d8de}
.topo-ctx:active{transform:scale(.985)}
.ctx-ic,.ctx-seta{flex:0 0 auto;display:flex;align-items:center}
.ctx-ic{color:var(--teal)}
.ctx-ic svg{width:20px;height:20px}
.ctx-seta{color:var(--suave)}
.ctx-seta svg{width:15px;height:15px}
.ctx-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ctx-placa{font-size:14px;font-weight:700;letter-spacing:.6px;color:var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-transp{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sem escolha ainda: o botão vira convite, não identificação. O modificador NÃO pode se
   chamar `.vazio` — esse nome já é da caixa de "nada encontrado" desta mesma folha (lá
   embaixo, com 26px de recheio), e o cabeçalho inchava de 63 pra 105px de altura. */
.topo-ctx.sem-escolha{border-style:dashed}
.topo-ctx.sem-escolha .ctx-ic{color:var(--suave)}
.topo-ctx.sem-escolha .ctx-placa{font-weight:600;letter-spacing:0;color:var(--suave)}
body.dark .topo-ctx{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
body.dark .topo-ctx:hover{background:rgba(255,255,255,.14)}
body.dark .ctx-placa{color:#eaeef3}
@media(max-width:640px){
  /* no celular o nome escrito some (regra lá embaixo), então a conta do espaço é
     ☰ + GUARITA + este bloco + avatar. O teto sai em pixels pra não depender do vw. */
  .topo-ctx{margin-left:9px;gap:6px;padding:4px 7px;max-width:calc(100vw - 208px)}
  /* quem cede é a razão social, NUNCA a placa: é a placa que abre a cancela. Esta reserva
     de 62px é o que a placa ocupa nesta fonte (7 caracteres) — sem ela, num aparelho de
     360px de largura com transportadora de nome comprido, o corte caía em cima da placa
     e a tela mostrava "ABC1D...". */
  .ctx-txt{min-width:62px}
  .ctx-placa{font-size:12.5px;letter-spacing:.3px}
  .ctx-transp{font-size:9.5px;letter-spacing:1px}
  .ctx-ic svg{width:18px;height:18px}
}

/* --------- canto do usuário: avatar redondo + menuzinho --------- */
.topo-eu{position:relative;margin-left:10px;flex:0 0 auto}
.avatar{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;
  letter-spacing:.4px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0;transition:box-shadow .15s,transform .08s}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar:hover{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.avatar:active{transform:scale(.96)}
body:not(.ed):not(.dark) .avatar{border-color:#e0e2e6}
body:not(.ed):not(.dark) .avatar:hover{box-shadow:0 0 0 3px rgba(16,24,40,.08)}

.eu-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:232px;background:#fff;
  border:1px solid var(--linha);border-radius:14px;box-shadow:0 14px 40px rgba(0,12,24,.22);
  padding:7px;z-index:60;display:flex;flex-direction:column;gap:2px}
.eu-cab{padding:9px 11px 10px;border-bottom:1px solid var(--linha);margin-bottom:4px}
.eu-nome{font-size:13.5px;font-weight:600;color:var(--tinta);text-transform:uppercase;
  word-break:break-word;line-height:1.25}
.eu-perfil{font-size:11.5px;color:var(--suave);margin-top:2px}
.eu-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  padding:11px 11px;border-radius:10px;font-family:inherit;font-size:14px;color:var(--tinta);
  cursor:pointer;text-align:left}
.eu-item .ic{width:20px;height:20px;flex:0 0 auto;color:var(--suave)}
.eu-item .ic svg{width:20px;height:20px;display:block}
.eu-item:hover{background:var(--teal-xl);color:var(--teal-d)}
.eu-item:hover .ic{color:var(--teal-d)}
.eu-item.ruim:hover{background:#fdecec;color:#b42318}
.eu-item.ruim:hover .ic{color:#b42318}
body.dark .eu-menu{background:#151d27;border-color:rgba(255,255,255,.12)}
/* no celular o nome escrito sai do cabeçalho: virava "FILIPE ..." cortado e ainda espremia
   o título do app em três linhas. O nome inteiro está a um toque, dentro do menuzinho. */
@media(max-width:640px){
  .topo-user{display:none}
  .eu-menu{min-width:min(268px,calc(100vw - 24px))}
}

/* --------- login: botão que troca CPF <-> Sankhya --------- */
.login-troca{margin-top:14px;background:none;border:0;color:var(--suave);font-size:13px;font-family:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}
.login-troca:hover{color:var(--teal)}

/* --------- faixa de aviso (ambiente / pendência) --------- */
/* display:block, NÃO flex: a faixa é um parágrafo. Como flex, cada <b>/<code> de dentro
   virava uma coluna e o texto descia empilhado numa escadinha ilegível. */
.faixa{border-radius:12px;padding:11px 14px;font-size:13.5px;margin-bottom:14px;
  display:block;line-height:1.5}
.faixa b{font-weight:600}
/* O link herda a cor da faixa (currentColor) em vez de ficar azul: dentro de um aviso
   vermelho, um link azul parece coisa de outro assunto. Sublinhado grosso + negrito é o
   que diz "isto leva a algum lugar" sem brigar com o fundo. */
.faixa a{color:currentColor;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:2px;cursor:pointer}
.faixa a:hover{opacity:.72}
.faixa.alerta{background:#FFF7E6;border:1px solid #F2D48A;color:#7A5300}
.faixa.info{background:#EEF6FC;border:1px solid #BBDCF2;color:#134A6B}
.faixa.ruim{background:#FDECEC;border:1px solid #F3BDBD;color:#8C1414}
/* verde = está funcionando agora (usada no "câmera falando com o app") */
.faixa.ok{background:#ECF7EF;border:1px solid #B7DFC3;color:#15602F}

/* --------- KPIs da portaria --------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid #edeff3;border-radius:16px;padding:15px 16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.05)}
.kpi .k-rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);font-weight:600}
.kpi .k-val{font-size:28px;font-weight:700;color:var(--navy);line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:12px;color:var(--suave);margin-top:2px}
.kpi.destaque .k-val{color:var(--teal)}

/* --------- listas de registro (entrega / autorização / passagem) --------- */
.lista{display:flex;flex-direction:column;gap:11px}
.reg{background:#fff;border:1px solid #edeff3;border-radius:15px;padding:14px 16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.04)}
.reg-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reg-placa{font-family:"Poppins",sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;color:var(--navy)}
.reg-linha{font-size:13.5px;color:var(--suave);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.reg-linha b{color:var(--tinta);font-weight:600}
.reg-acoes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.reg-acoes .btn{margin-top:0;padding:9px 15px;font-size:14px}
.reg.pendente{border-left:4px solid #E8A33D}
.reg.entrou{border-left:4px solid var(--verde)}
.reg.ativa{border-left:4px solid var(--azul)}
.reg.morta{opacity:.62}

/* --------- selos --------- */
.selo{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.selo.ok{background:#E6F4EC;color:#0A5C34}
.selo.espera{background:#FFF3DF;color:#8A5A00}
.selo.ruim{background:#FDECEC;color:#A11515}
.selo.neutro{background:#EEF0F3;color:#4B5563}
.selo.azul{background:#E7F1FB;color:#12507E}

/* --------- relógio da validade --------- */
.prazo{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:var(--verde)}
.prazo.perto{color:#B4690E}
.prazo.fim{color:var(--verm)}

/* --------- chave de NF-e --------- */
.chave{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.3px;word-break:break-all;color:var(--tinta)}
.nfe-item{background:#fafbfc;border:1px solid #eef0f3;border-radius:11px;padding:9px 11px;margin-top:7px}
.nfe-item .nfe-meta{font-size:12px;color:var(--suave);margin-top:3px}
input.chave-in{font-family:"Roboto Mono",ui-monospace,monospace;letter-spacing:.4px;font-size:14px}

/* --------- campo da chave + botão de escanear ---------
   O botão fica GRUDADO no campo, do lado direito, e não numa linha própria: assim ele se lê
   como "o jeito de preencher ISTO", que é o ponto — digitar 44 dígitos passou a ser a exceção.
   No celular a palavra "Escanear" some e sobra o ícone, porque o campo precisa da largura. */
.chave-linha{display:flex;gap:8px;align-items:stretch}
.chave-linha input.chave-in{flex:1 1 auto;min-width:0}
.chave-ler{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 13px;
  border:1px solid var(--teal);border-radius:11px;background:#fff;color:var(--teal);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s}
.chave-ler svg{width:19px;height:19px;flex:0 0 auto}
.chave-ler:hover{background:var(--teal);color:#fff}
.chave-ler:active{transform:scale(.98)}
@media(max-width:560px){ .chave-ler span{display:none} .chave-ler{padding:0 12px} }

/* --------- grade de entregas --------- */
/* A grade rola na horizontal (.grade-scroll deixa tudo em nowrap). A célula da NF-e é a chave
   e só: uma linha por nota, clicável, que abre a janela com a nota aberta. Duas notas na
   mesma entrega viram duas linhas na mesma célula. */
td.chave-cel{font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:1px;
  color:var(--navy);font-size:15px}
/* a chave inteira numa linha só: quebrada, sobrava um dígito órfão embaixo e conferir
   número de nota com o olho vira jogo dos sete erros. */
/* navy e não o vermelho da marca: são 44 dígitos em TODA linha da grade — em vermelho a
   tela inteira parece um alerta.
   O que diz "isto é um link" (Diogo, 02/09/2026 — o tracejado sozinho não dizia): o ícone de
   "abre em outra aba" grudado na frente, e o sublinhado embaixo dos dígitos. O sublinhado vai
   no SPAN dos dígitos, não na caixa: no telefone a chave quebra em duas linhas, e uma borda na
   caixa riscaria só o pé do bloco, longe do número. */
a.lnk-nfe{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;
  word-break:normal;color:var(--navy);text-decoration:none;
  width:max-content;max-width:100%;cursor:pointer}
a.lnk-nfe svg{width:13px;height:13px;flex:0 0 auto;opacity:.8}
/* sublinhado no VERMELHO da marca, não no vermelho claro: no claro, a 12px, some — foi o
   primeiro desenho e no teste mal dava pra ver. O dígito continua navy, então a linha vermelha
   marca "isto é clicável" sem pintar a grade inteira de vermelho. */
a.lnk-nfe .chave{text-decoration:underline;text-decoration-color:var(--teal);
  text-decoration-thickness:1.5px;text-underline-offset:3px;color:inherit}
a.lnk-nfe + a.lnk-nfe{margin-top:5px}
a.lnk-nfe:hover{color:var(--teal)}
a.lnk-nfe:hover svg{opacity:1}
a.lnk-nfe:hover .chave{text-decoration-color:var(--teal)}
/* o foco pelo teclado tem que aparecer: quem navega por Tab não vê o hover. */
a.lnk-nfe:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:5px}
/* as duas chaves da entrega ficam dentro de UMA caixa. No celular a célula do cartão é um
   flex (rótulo à esquerda, valor à direita): sem esta caixa, cada chave virava uma coluna do
   flex e a segunda descia espremida um dígito por linha. */
.cel-nfe{white-space:normal;width:340px}
@media(max-width:560px){
  .cel-nfe{width:auto}
  /* no cartão a chave quebra em duas linhas — 44 dígitos não cabem na largura do telefone.
     O ícone sobe pro alto da caixa: centralizado, ele flutuaria no meio das duas linhas. */
  a.lnk-nfe{white-space:normal;width:auto;justify-content:flex-end;align-items:flex-start}
  a.lnk-nfe .chave{word-break:break-all;text-align:right}
  a.lnk-nfe svg{margin-top:2px}
}
.cel-sub{display:block;font-size:11.5px;color:var(--suave);margin-top:2px}

/* --------- janela da NF-e --------- */
/* 640 e não os 520 do padrão: a chave em blocos de 4 (como no DANFE) tem 55 caracteres e,
   na largura normal, sobrava um bloco órfão na segunda linha — justo o pedaço que a pessoa
   confere de olho contra o papel. */
.pop-card.pop-nfe{max-width:640px}
.nf-chave{background:#F7F9FB;border:1px solid var(--linha);border-radius:11px;
  padding:10px 12px;margin:0 0 14px;text-align:center}
.nf-chave .chave{font-size:13.5px;letter-spacing:.6px;word-break:break-word}
.nf-bloco{border:1px solid var(--linha);border-radius:13px;padding:12px 14px;margin-bottom:14px}
.nf-titulo{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--suave);margin-bottom:9px}
.nf-grade{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.nf-campo.largo{grid-column:1/-1}
.nf-rot{display:block;font-size:11.5px;color:var(--suave)}
.nf-val{display:block;font-size:13.5px;color:var(--tinta);word-break:break-word}
.nf-itens{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.nf-itens th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--suave);font-weight:700;padding:5px 6px;border-bottom:1px solid var(--linha)}
.nf-itens td{padding:6px;border-bottom:1px solid var(--linha);vertical-align:top}
.nf-itens .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pop-acoes a.mini{text-decoration:none;display:inline-flex;align-items:center}
/* links que fazem o papel de botão (abrir em outra aba, baixar) não podem vir sublinhados */
.nf-acoes-sefaz{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.nf-acoes-sefaz .btn,.nf-acoes-sefaz a.mini{margin-top:0;text-decoration:none;
  display:inline-flex;align-items:center}
.nf-sefaz .nf-grade{margin-top:11px}

/* O visor do DANFE dentro da janela saiu em 02/09/2026: o documento agora abre em aba nova, no
   leitor de PDF do próprio navegador (o porquê está no app.js, em `abreNota`). Com ele foi a
   janela larga de 900 px — sem o papel dentro, aquilo era só espaço vazio. */
@media(max-width:520px){.nf-grade{grid-template-columns:1fr}
  .nf-acoes-sefaz .btn{width:100%;justify-content:center}}
body.dark .nf-chave{background:rgba(255,255,255,.05)}

/* --------- fotos do veículo --------- */
.fotos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:10px}
.foto-slot{border:1.5px dashed #dde2e8;border-radius:14px;background:#fafbfc;padding:12px;text-align:center;
  transition:border-color .15s,background .15s}
/* mãozinha e realce SÓ no que é botão de verdade. A foto já aprovada continua na tela como
   <div>, e prometer toque onde não acontece nada é o tipo de coisa que faz o motorista achar
   que o sistema travou. */
button.foto-slot{cursor:pointer}
button.foto-slot:hover{border-color:var(--teal);background:var(--teal-xl)}
.foto-slot.cheio{border-style:solid;border-color:#e3e7ec;background:#fff;padding:0;overflow:hidden}
.foto-slot img{width:100%;height:160px;object-fit:cover;display:block}
.foto-slot .fs-rot{font-size:12.5px;font-weight:600;color:var(--suave);padding:8px 6px}
.foto-slot .fs-dica{font-size:11.5px;color:#9AA3AD;padding-bottom:8px}
.foto-slot input[type=file]{display:none}
/* o slot virou <button> (era <label>): botão de verdade responde a teclado e leitor de tela,
   e o navegador não herda nada de formulário nele — daí o reset de aparência. */
button.foto-slot{width:100%;font:inherit;display:block}

/* --------- câmera na hora --------- */
/* o `100dvh` não é redundante com o `inset:0`: no Chrome do Android a barra de endereço fica
   POR CIMA do que o `inset:0` considera tela, e o pé da janela — que é onde moram os botões —
   cai atrás dela. O `dvh` mede a altura que a pessoa realmente enxerga. */
.cam-bg{position:fixed;inset:0;height:100dvh;background:rgba(8,16,26,.88);z-index:70;display:flex;
  align-items:center;justify-content:center;padding:16px}
.cam-card{background:#fff;border-radius:18px;width:min(560px,100%);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.cam-tit{font-weight:700;color:var(--navy);padding:14px 16px 10px;font-size:15px}
/* fundo preto no palco: enquanto a câmera abre, cinza claro pisca como se fosse erro. */
.cam-palco{background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.cam-palco video{width:100%;height:100%;object-fit:cover;display:block}
.cam-dica{font-size:12.5px;color:var(--suave);padding:10px 16px 0;text-align:center}
.cam-acoes{display:flex;gap:10px;padding:14px 16px 16px}
.cam-acoes .btn{flex:1}
/* mira do leitor da chave: a faixa é DEITADA e baixa porque o código de barras do DANFE é
   comprido e fino — a moldura quadrada de QR faria a pessoa chegar perto demais e cortar as
   pontas do código, que é justamente onde a leitura falha. */
.cam-alvo{position:absolute;left:8%;right:8%;top:50%;height:74px;transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.9);border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.32);pointer-events:none}
.cam-palco{position:relative}
/* sem o palco do vídeo não sobra o que esticar: a janela vira um cartãozinho no meio da tela,
   em vez de uma folha em branco de 800px com dois botões no alto. */
.cam-card.sem-palco{height:auto;border-radius:18px;width:min(460px,100%)}
.cam-card.sem-palco .cam-dica{padding:2px 16px 0;font-size:13.5px;color:var(--tinta);text-align:left}
.cam-lendo{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 16px 0;font-size:13.5px;color:var(--suave)}
.cam-lendo .spin{width:16px;height:16px;border:2px solid var(--linha);
  border-top-color:var(--teal);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media(max-width:560px){
  /* no celular a câmera ocupa a tela inteira: enquadrar caminhão numa janelinha é o que
     produz foto tremida e placa cortada. */
  .cam-bg{padding:0}
  .cam-card{width:100%;height:100%;border-radius:0;display:flex;flex-direction:column}
  /* o `min-height:0` é o que faz o botão de tirar a foto existir. Sem ele o palco não encolhe
     abaixo da altura NATURAL do vídeo, e câmera de celular entrega imagem em pé (1080x1920):
     numa tela de 393px de largura isso dá ~700px de vídeo, que empurra a dica e os botões pra
     fora do cartão — e o cartão tem `overflow:hidden`, então eles somem sem deixar rastro.
     Foi o que o Diogo viu em 02/09/2026: câmera aberta, nada pra apertar. Com a câmera deitada
     (a do meu teste) o vídeo cabe e o defeito não aparece — por isso passou. */
  .cam-palco{flex:1;min-height:0;aspect-ratio:auto}
  /* e os botões são a última coisa que cede, nunca a primeira */
  .cam-tit,.cam-dica,.cam-acoes{flex:0 0 auto}
  /* barra de gestos do aparelho não pode ficar em cima do "Tirar foto" */
  .cam-acoes{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  /* a tela cheia é pra enquadrar; sem vídeo ela não tem função nenhuma */
  .cam-card.sem-palco{height:auto;width:calc(100% - 32px);margin:16px;border-radius:18px}
}

.ia-box{background:#F7F9FB;border:1px solid #e6eaee;border-radius:13px;padding:12px 14px;margin-top:12px}
.ia-box .ia-tit{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);font-weight:700;
  display:flex;align-items:center;gap:8px}
.ia-box .ia-txt{font-size:13.5px;margin-top:6px;line-height:1.55}

/* --------- senha gerada / mensagem pro WhatsApp --------- */
.senha-box{background:var(--navy);color:#fff;border-radius:14px;padding:16px 18px;text-align:center;margin:14px 0}
.senha-box .sb-rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.72}
.senha-box .sb-val{font-family:"Poppins",sans-serif;font-size:30px;font-weight:700;letter-spacing:4px;margin-top:4px}
.wa-msg{background:#F0FAF3;border:1px solid #CDE9D6;border-radius:12px;padding:12px 14px;font-size:13.5px;
  white-space:pre-wrap;line-height:1.6;color:#14432A}

/* --------- busca / filtros --------- */
.barra{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.barra > div{flex:1;min-width:150px}
.barra label{margin-top:0}
.barra .btn{margin-top:0;padding:11px 18px}

/* --------- combo de busca (transportadora) --------- */
.combo{position:relative}
.combo-lista{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:#fff;
  border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra);max-height:260px;overflow:auto}
.combo-lista div{padding:10px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid #f2f4f6}
.combo-lista div:hover{background:var(--teal-xl)}
.combo-lista div:last-child{border-bottom:0}

/* --------- modal simples --------- */
.pop-bg{position:fixed;inset:0;background:rgba(10,20,32,.5);display:flex;align-items:center;justify-content:center;
  z-index:60;padding:18px}
.pop-card{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:88dvh;overflow:auto;padding:22px 24px;
  box-shadow:0 20px 60px rgba(10,20,32,.35)}
.pop-card h3{margin:0 0 6px;font-size:18px;color:var(--navy)}
/* X de fechar, no canto de cima de toda janela.
   `float:right` pro título correr ao lado dele em vez de nascer embaixo, e `position:sticky`
   porque quem rola é o próprio .pop-card (overflow:auto): sem o sticky o X subiria junto com
   o cabeçalho e sumiria justo na janela alta, que é onde ele faz falta. Fundo branco pro
   texto não passar por baixo do ícone quando a janela rola. */
.pop-x{position:sticky;top:-4px;float:right;z-index:3;margin:-8px -10px 0 10px;
  width:36px;height:36px;padding:0;border:0;border-radius:11px;background:#fff;
  color:var(--suave);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pop-x svg{width:20px;height:20px}
.pop-x:hover{background:var(--cinza,#f2f4f7);color:var(--navy)}
.pop-card .pop-sub{font-size:13.5px;color:var(--suave);margin:0 0 14px}
.pop-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.pop-acoes .btn{margin-top:0}
/* campo travado (o CPF na edição do motorista): tem que PARECER travado, senão a pessoa
   fica batendo nele e achando que o sistema travou. */
.pop-card input:disabled{background:var(--cinza,#f2f4f7);color:var(--suave);cursor:not-allowed;
  border-style:dashed}

/* botão que apaga: vermelho, e só aqui — se tudo fosse vermelho ninguém repara no que é.
   Cinza (.off) quando o cadastro tem vínculo e não pode sair; o motivo vai no title. */
/* Especificidade importa aqui: `button.btn.sec` e `body.ed button.btn.sec` já pintam todo
   secundário do vermelho da marca, então um `.btn.perigo` sozinho perde a disputa e o botão
   de apagar sai idêntico ao de editar. Por isso os seletores repetem `button` e `body.ed`. */
/* Duas roupas pro mesmo perigo, e a diferença é onde ele aparece:
   - na LISTA (`.btn.sec.perigo`) ele é contornado — ali o Excluir divide espaço com Editar e
     Desativar, e um botão cheio de tinta puxaria o olho pro que menos se deve clicar;
   - na CONFIRMAÇÃO (`.btn.perigo`, sem `.sec`) ele é cheio e vermelho-escuro — a pessoa já
     leu a janela, já sabe o que vai sair, e o botão que conclui tem que parecer o principal.
     Sem o `background`, o `.btn` do kit (que nasce com `border:0`) deixava o Excluir sem
     borda nenhuma: virava texto solto ao lado de um Cancelar contornado, e o Cancelar é que
     parecia o botão. */
button.btn.sec.perigo,body.ed button.btn.sec.perigo{color:#8C1414;background:#fff;
  border:1.5px solid #C98A8A}
button.btn.sec.perigo:hover,body.ed button.btn.sec.perigo:hover{background:#8C1414;color:#fff;
  border-color:#8C1414}
button.btn.perigo:not(.sec),body.ed button.btn.perigo:not(.sec){background:#8C1414;color:#fff;
  border:0}
button.btn.perigo:not(.sec):hover,body.ed button.btn.perigo:not(.sec):hover{background:#6E0F0F}
/* o .off precisa ganhar de duas regras do kit que vieram antes: `body.ed .btn.sec` (que pinta
   todo secundário de vermelho) e `button.btn:disabled{opacity:.5}` — sem repetir o seletor com
   body.ed e sem o :disabled, o botão travado sai rosa-claro, que lê como "vermelho apagado" e
   não como "não dá pra clicar". */
.btn.off,.btn.off:hover,body.ed .btn.off,body.ed button.btn.off,body.ed .btn.off:hover,
button.btn.off:disabled{color:var(--suave);border-color:#d3d9df;background:#f2f4f7;
  cursor:not-allowed;opacity:1;box-shadow:none}

/* botão do WhatsApp na janela da senha. Verde só quando dá pra clicar; sem celular no
   cadastro ele fica cinza e travado — em vez de sumir, porque sumido ninguém descobre que
   existe, e cinza a pessoa entende na hora que falta o número. */
.btn.wa{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1FA855;
  border:1.5px solid #1FA855;box-shadow:none;margin-top:0}
.btn.wa:hover{background:#EAF9F0}
.btn.wa svg{width:19px;height:19px;flex:none}
.btn.wa.off,.btn.wa.off:hover{color:var(--suave);border-color:#d3d9df;background:#f2f4f7;
  cursor:not-allowed;opacity:1}

/* --------- tabela de passagens --------- */
.passagens td.hora{font-variant-numeric:tabular-nums;white-space:nowrap}
.passagens .p-placa{font-weight:700;letter-spacing:1px;color:var(--navy)}

/* --------- o que está dentro da câmera (janela "Placas dentro da câmera") ---------
   Tabela pequena e de prova: quem abre isto está conferindo placa contra horário, então a
   placa e as horas vêm em números de largura fixa, pra a coluna alinhar e o olho comparar. */
.pop-card.pop-cam{max-width:760px}
/* no telefone a tabela não cabe em pé: rola de lado dentro da própria janela, em vez de
   espremer a coluna "Confere?" — que é a que responde a pergunta — até virar reticências. */
.cam-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cam-lista{width:100%;min-width:520px;border-collapse:collapse;margin:12px 0 4px;font-size:13.5px}
.cam-lista th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--suave);font-weight:700;padding:0 10px 6px 0;border-bottom:1px solid var(--linha)}
.cam-lista td{padding:8px 10px 8px 0;border-bottom:1px solid var(--linha);vertical-align:middle}
.cam-lista td.hora{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--suave)}
.cam-lista .p-placa{font-weight:700;letter-spacing:1px;color:var(--navy);
  font-variant-numeric:tabular-nums}
.cam-lista .pop-sub{display:inline;margin:0}

.vazio{padding:26px 14px;text-align:center;color:var(--suave);font-size:14px}
.rodape-dev{margin:26px 0 0;text-align:center;font-size:12px;color:var(--suave)}

@media (max-width:640px){
  .reg-placa{font-size:17px}
  .kpi .k-val{font-size:24px}
}

/* --------- barra de filtros das entregas --------- */
/* Grade fluida: no computador dá 4 campos por linha, no celular vira uma coluna só,
   sem media query — o auto-fit resolve. minmax(170px,1fr) é o ponto em que o rótulo
   "Transportadora" ainda cabe sem cortar. */
.filtros{background:var(--cartao,#fff);border:1px solid var(--linha);border-radius:14px;
  padding:12px 14px 14px;margin-bottom:14px}

/* --------- barra de cima: dobrar os filtros pra liberar tela ---------
   Fica SEMPRE visível, mesmo com a seção fechada, porque carrega três coisas que a pessoa
   precisa justamente quando não está mexendo em filtro: o que está filtrado agora, o
   "Limpar filtro" e o "Colunas". */
.f-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.f-topo .mini{margin:0;padding:8px 12px;flex:0 0 auto}
.f-dobra{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;border:0;
  border-radius:9px;background:none;color:var(--texto);font:inherit;font-size:14px;
  cursor:pointer;flex:0 0 auto}
.f-dobra:hover{background:rgba(0,0,0,.05)}
.f-dobra svg{width:16px;height:16px;transition:transform .16s ease}
.f-dobra b{font-weight:600}
.f-resumo{flex:1 1 140px;min-width:0;font-size:13px;color:var(--suave);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-resumo.aceso{color:var(--verm,#E11A12);font-weight:600}
/* fechada: a seta deita pro lado e os campos somem. margin-bottom volta a 0 pra caixa
   encolher de verdade — senão sobrava uma faixa branca no lugar dos campos. */
.filtros.fechada{padding-bottom:12px}
.filtros.fechada .f-corpo{display:none}
.filtros.fechada .f-dobra svg{transform:rotate(-90deg)}
.f-corpo{margin-top:12px}
body.dark .f-dobra:hover{background:rgba(255,255,255,.08)}
.f-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 12px;
  align-items:end}
.f-linha + .f-linha{margin-top:10px}
.f-campo{display:block;margin:0}
.f-campo > span{display:block;font-size:12px;color:var(--suave);font-weight:600;
  margin:0 0 5px;letter-spacing:.2px}
.f-campo input,.f-campo select{padding:9px 11px;font-size:14px;border-radius:10px}
/* a caixa de procurar come a linha inteira. Ela dividia espaço com o "Limpar filtro" e o
   "Colunas", mas esses dois subiram pra barra de cima (ficam à mão com o filtro fechado). */
.f-larga{grid-column:1/-1}
/* Saíram daqui, em 02/09/2026, as regras do interruptor "mostrar as arquivadas" e da linha
   apagada das arquivadas: o Diogo tirou a função de arquivar da tela. Sem o interruptor, eram
   três regras que ninguém mais pintava. */
.f-atalhos > div{display:flex;gap:6px;flex-wrap:wrap}
.f-atalhos .mini{padding:9px 10px;margin:0;flex:1 1 auto;white-space:nowrap}
/* filho DIRETO: o "Limpar filtro" ocupa a coluna toda, mas os atalhos ficam lado a lado
   dentro da própria caixa — sem o `>` a regra pegava os dois e empilhava os atalhos. */
.f-campo > .mini{width:100%;padding:10px 12px}
.f-campo .mini[disabled]{opacity:.45;cursor:default}
/* os 4 atalhos ocupam duas colunas: em uma só eles quebram em duas linhas e a linha
   inteira do filtro cresce junto, deixando um buraco em cima dos campos de data. */
@media(min-width:681px){.f-atalhos{grid-column:span 2}}
/* no celular o resumo pode ocupar a linha toda: cortar "Hoje · TOPMIX-040" em três palavras
   espremidas entre os botões não diz nada a ninguém. */
@media(max-width:560px){
  .f-resumo{flex:1 1 100%;order:3;white-space:normal}
  .f-topo .mini{flex:1 1 auto}
}

/* --------- tela de grade: usa o monitor inteiro --------- */
/* A casa centraliza o conteúdo em 1760px, que é largura de LEITURA: linha de texto muito
   comprida cansa o olho. Grade não é texto. Regra do Diogo em 01/09/2026: "as grades no
   sistema sempre têm que aproveitar todo o monitor que o usuário tiver" — num monitor de
   2560px o que sobrava de margem era exatamente a largura que faltava na grade, e a pessoa
   rolava para o lado com meia tela vazia do lado de fora. Vale nas telas COM grade (Entregas
   e Veículos, hoje); a classe entra na tela e sai do body na troca de aba. */
body.tela-larga main{max-width:none !important;padding-inline:clamp(12px,1.2vw,20px);padding-bottom:12px}
@media(min-width:561px){
  /* a grade rola por dentro (a altura vem medida do JS) em vez de a página inteira rolar:
     assim o filtro e o rodapé com a contagem ficam sempre à vista enquanto se desce a lista. */
  body.tela-larga #grade-ent{overflow:auto}
  body.tela-larga #grade-ent thead th{position:sticky;top:0;z-index:3;background:#faf9f6;
    box-shadow:inset 0 -1px 0 var(--linha)}
  body.dark.tela-larga #grade-ent thead th{background:#1d2125 !important}
}

/* --------- painel "Colunas da grade" --------- */
/* Lista de arrastar: cada linha é uma grade de 4 casas (pega · nome · ↑ · ↓) pra que as
   setas fiquem ALINHADAS uma embaixo da outra, independente do tamanho do nome da coluna —
   com flex simples elas dançavam da esquerda pra direita e clicar errado era fácil. */
.cols-lista{list-style:none;margin:0;padding:0;max-height:52dvh;overflow:auto;
  border:1px solid var(--linha);border-radius:12px}
.cols-lista li{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;
  gap:8px;padding:7px 10px;background:var(--cartao,#fff)}
.cols-lista li + li{border-top:1px solid var(--linha)}
.cols-lista li.off{opacity:.55}
.cols-lista li.alvo{background:rgba(23,105,170,.10);outline:1px dashed var(--azul,#1769aa);outline-offset:-2px}
.cols-lista .pega{cursor:grab;color:var(--suave);font-size:15px;line-height:1;text-align:center;
  user-select:none}
.cols-lista label{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;
  font-weight:500;color:var(--navy);cursor:pointer;min-width:0}
.cols-lista label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cols-lista input[type=checkbox]{width:16px;height:16px;flex:none;margin:0}
/* seta é botão de toque: quadrada e larga o bastante pro dedo no celular, sem esticar a linha */
.cols-lista .mini{margin:0;padding:4px 9px;min-width:32px;line-height:1.2}
.cols-lista .mini[disabled]{opacity:.3}
/* as duas ações da esquerda ficam longe do "Fechar": botar tudo junto convida a clicar
   "Voltar ao padrão" achando que é o de sair. */
#cols-fechar{margin-left:auto}
/* no celular a seta cresce: 26px de altura é alvo de mouse, não de dedo — errar a seta e
   esconder a coluna sem querer é o defeito clássico de lista de configuração no telefone. */
@media(max-width:560px){
  .cols-lista li{padding:9px 10px;gap:10px}
  .cols-lista .mini{padding:9px 12px;min-width:40px}
  .cols-lista input[type=checkbox]{width:20px;height:20px}
}

/* --------- grade: arrastar coluna e filtrar por coluna --------- */
/* O cabeçalho é a alça: agarrou e puxou, a coluna vai junto. Feito com Pointer Events no JS,
   então o mesmo gesto vale pro mouse e pro dedo — o touch-action:none é o que impede o
   navegador de entender o arrasto como "rolar a tabela" e engolir o movimento. */
#grade-ent thead tr.cab-arrasta th{cursor:grab;user-select:none;touch-action:none}
#grade-ent thead tr.cab-arrasta th[data-col="acoes"]{cursor:default}
#grade-ent thead tr.cab-arrasta th.pegou{opacity:.45;cursor:grabbing}
/* a marca de onde vai cair é uma barra vermelha grossa no lado em que a coluna entra */
#grade-ent thead tr.cab-arrasta th.solta-antes{box-shadow:inset 3px 0 0 var(--verm,#E11A12)}
#grade-ent thead tr.cab-arrasta th.solta-depois{box-shadow:inset -3px 0 0 var(--verm,#E11A12)}

/* O funil que abre o campo daquela coluna. Fica apagadinho ao lado do título — presente pra
   quem procura, quieto pra quem só está lendo a grade. Acende quando aquela coluna está
   filtrando: com o campo fechado, é ele a única pista de que tem filtro em pé. */
#grade-ent thead tr.cab-arrasta th .fc-btn{display:inline-flex;align-items:center;
  justify-content:center;width:17px;height:17px;margin-left:4px;padding:0;vertical-align:-3px;
  border:0;border-radius:5px;background:none;color:var(--suave,#697585);opacity:.42;
  cursor:pointer;touch-action:manipulation}
#grade-ent thead tr.cab-arrasta th .fc-btn svg{width:11px;height:11px}
#grade-ent thead tr.cab-arrasta th .fc-btn:hover{opacity:.9;background:rgba(0,0,0,.06)}
#grade-ent thead tr.cab-arrasta th .fc-btn[aria-expanded="true"]{opacity:1;
  color:var(--verm,#E11A12);background:rgba(225,26,18,.10)}
#grade-ent thead tr.cab-arrasta th .fc-btn.aceso{opacity:1;color:var(--verm,#E11A12)}
#grade-ent thead tr.cab-arrasta th .fc-btn.aceso svg{fill:rgba(225,26,18,.18)}

/* O "i" da legenda, irmão do funil: mesmo tamanho, mesma discrição. Vem ANTES do funil no
   cabeçalho porque a pergunta "o que é esta coluna?" vem antes de "quero filtrar por ela".
   No hover ele acende de azul (o funil acende de vermelho) — cores diferentes pra ninguém
   confundir o botão que explica com o botão que filtra. */
#grade-ent thead tr.cab-arrasta th .ic-info{display:inline-flex;align-items:center;
  justify-content:center;width:17px;height:17px;margin-left:4px;padding:0;vertical-align:-3px;
  border:0;border-radius:5px;background:none;color:var(--suave,#697585);opacity:.38;
  cursor:help;touch-action:manipulation}
#grade-ent thead tr.cab-arrasta th .ic-info svg{width:12px;height:12px}
#grade-ent thead tr.cab-arrasta th .ic-info:hover{opacity:1;color:var(--navy,#0E2A47);
  background:rgba(14,42,71,.08)}

/* A janelinha da legenda. O texto da coluna tocada fica em corpo de leitura; a lista das
   outras vem menor, atrás de uma linha, pra ficar claro o que é resposta e o que é apêndice. */
.pop-card .leg-txt{margin:0;font-size:14.5px;line-height:1.55;color:var(--texto,#1c2b3a)}
.pop-card .leg-mais{margin-top:16px;padding-top:14px;border-top:1px solid var(--linha,#e6e8ec)}
.pop-card .leg-mais h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--suave,#697585)}
.pop-card .leg-lista{margin:0;font-size:13px;line-height:1.5}
.pop-card .leg-lista dt{font-weight:600;color:var(--navy,#0E2A47)}
.pop-card .leg-lista dd{margin:0 0 9px;color:var(--suave,#697585)}
/* o "i" dentro do botão "Legenda" da barra de filtros — mesmo tamanho da letra ao lado */
#f-legenda{display:inline-flex;align-items:center;gap:5px}
#f-legenda svg{width:14px;height:14px}

#grade-ent thead tr.linha-filtro th{padding:4px 6px 7px;background:#faf9f6;
  box-shadow:inset 0 -1px 0 var(--linha)}
/* size="1" + min-width:0 é o que impede o campo de EMPURRAR a coluna: input tem largura
   natural de ~20 caracteres, e sem isto a coluna "#" ficava do tamanho de um nome. */
#grade-ent thead tr.linha-filtro input{width:100%;min-width:0;box-sizing:border-box;
  padding:4px 7px;font:inherit;font-size:12.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--tinta,#101828);background:#fff;
  border:1px solid var(--linha,#e6ebf2);border-radius:7px}
#grade-ent thead tr.linha-filtro input:focus{outline:none;border-color:var(--verm,#E11A12);
  box-shadow:0 0 0 3px rgba(225,26,18,.12)}
#grade-ent tbody tr.sem-linha td{text-align:center;padding:26px 10px;color:var(--suave,#697585)}

/* a 2ª linha do cabeçalho gruda logo abaixo da 1ª quando a grade rola */
@media(min-width:561px){
  body.tela-larga #grade-ent thead tr.linha-filtro th{position:sticky;top:var(--cab-h,34px);z-index:3}
}
body.dark #grade-ent thead tr.linha-filtro th{background:#1d2125 !important}
body.dark #grade-ent thead tr.linha-filtro input{background:#22272b !important;
  border-color:#2c333a !important;color:#dee4ea !important}
body.dark #grade-ent thead tr.cab-arrasta th .fc-btn:hover{background:rgba(255,255,255,.10)}

/* ================= GRADE DE VEÍCULOS (AG Grid) =================
   A tela de Veículos virou grade em 01/09/2026 (pedido do Diogo). O AG Grid entra aqui
   porque já é o padrão dos outros apps do TOPNEX — mas ele vem com a cara dele, e a cara
   dele não é a nossa. Este bloco é só isso: encaixar a grade na identidade (letra, linha,
   cabeçalho azul-marinho, cantos) sem mexer no arquivo da biblioteca. */
.barra-grade{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.barra-grade .btn{margin-top:0;display:inline-flex;align-items:center;gap:7px}
.barra-grade .btn svg{width:17px;height:17px;flex:none}
.busca-grade{flex:1 1 260px;min-width:180px;margin:0;padding:11px 14px;border:1.5px solid var(--linha);
  border-radius:10px;font:inherit;font-size:15px;color:var(--navy);background:#fff}
.busca-grade:focus{outline:none;border-color:var(--teal)}
.grade-tot{color:var(--suave);font-size:13.5px;font-weight:600;white-space:nowrap}

.grade-ag{width:100%;border:1px solid var(--linha);border-radius:12px;overflow:hidden;
  --ag-font-family:inherit;--ag-font-size:14px;--ag-border-color:var(--linha);
  --ag-header-background-color:#fff;--ag-header-foreground-color:var(--navy);
  --ag-odd-row-background-color:#fbfcfd;--ag-row-hover-color:var(--teal-xl);
  --ag-selected-row-background-color:var(--teal-xl);--ag-header-height:42px;
  --ag-borders:none;--ag-borders-critical:solid 1px;--ag-cell-horizontal-padding:14px}
.grade-ag .ag-header{border-bottom:2px solid var(--linha)}
.grade-ag .ag-header-cell-text{font-weight:700;letter-spacing:.01em}
.grade-ag .ag-row{cursor:pointer}
.grade-ag .ag-cell{display:flex;align-items:center}
/* O funil do cabeçalho (Diogo, 01/09/2026: a fileira de campos sai, o filtro abre pelo ícone).
   Mesmo desenho, mesmo tamanho e mesmo tom do funil da grade de Entregas — as duas telas
   filtram do mesmo jeito, então têm que ter o mesmo botão. O tema Alpine desenha ícone por
   FONTE, com o glifo no ::before; trocando por SVG o span fica sem largura nenhuma e o botão
   some (fica 0px de largura, clicável por ninguém). Daí a medida explícita aqui. */
.grade-ag .ag-header-cell-menu-button{display:inline-flex;align-items:center;
  justify-content:center;width:17px;height:17px;border-radius:5px;
  color:var(--suave,#697585);opacity:.42;cursor:pointer}
.grade-ag .ag-header-cell-menu-button svg{width:11px;height:11px;display:block}
.grade-ag .ag-header-cell-menu-button:hover{opacity:.9;background:rgba(0,0,0,.06)}
/* O AG Grid tem um SEGUNDO funil, só de aviso, que ele acende ao lado do título quando a
   coluna está filtrando. Com o nosso funil já ficando vermelho, os dois juntos viravam dois
   funis lado a lado na mesma coluna — e o da esquerda nem clica. Fica só o nosso. */
.grade-ag .ag-header-icon.ag-filter-icon{display:none}
/* coluna filtrando: com o campo escondido, o funil aceso é a única pista de que tem filtro
   em pé — então ele fica vermelho, igual ao "aceso" da grade de Entregas, e não cinza no
   cinza. O título vermelho junto, pra enxergar de longe qual coluna está segurando linha. */
.grade-ag .ag-header-cell-filtered .ag-header-cell-menu-button{opacity:1;color:var(--verm,#E11A12)}
.grade-ag .ag-header-cell-filtered .ag-header-cell-menu-button svg{fill:rgba(225,26,18,.18)}
.grade-ag .ag-header-cell-filtered .ag-header-cell-text{color:var(--verm,#E11A12)}
.grade-ag .ag-paging-panel{border-top:1px solid var(--linha);color:var(--suave)}

/* nome de gente na grade: sempre em MAIÚSCULO, como no resto da casa — cadastro chega
   com "josé", "JOSE" e "José da Silva" e a coluna ficaria com três alturas de letra. */
.grade-ag .cel-nome{font-weight:700;text-transform:uppercase;letter-spacing:.02em}

/* placa com o desenho do caminhão: báscula, silo e betoneira se distinguem de relance */
.cel-placa{display:inline-flex;align-items:center;gap:9px;letter-spacing:.03em}
.cel-placa b{font-weight:700;color:var(--navy)}
.ic-veic{width:22px;height:22px;flex:none;color:var(--suave)}
.ic-silo{color:#1769AA}          /* cimento: azul  */
.ic-bascula{color:#B8860B}       /* agregado: terra */
.ic-betoneira{color:#0F7B6C}     /* concreto: verde */
.ic-bomba{color:#7A4FA3}
.mini.perigo,body.ed .mini.perigo{color:#8C1414;border-color:#C98A8A}
.mini.perigo:hover,body.ed .mini.perigo:hover{background:#8C1414;color:#fff;border-color:#8C1414}
.mini.off,.mini.off:hover,body.ed .mini.off,body.ed .mini.off:hover{color:var(--suave);
  border-color:#d3d9df;background:#f2f4f7;cursor:not-allowed}

/* celular: a grade não cabe em 390px, então vira lista enxuta — o que ele não quis foi o
   cartão GIGANTE com duas fotos, não a lista. Tocar no cartão abre a mesma janela de
   cadastro que o duplo-clique abre no computador. */
.veic-linha{background:var(--cartao,#fff);border:1px solid var(--linha);border-radius:12px;
  padding:13px 15px;margin-bottom:10px;cursor:pointer}
.veic-linha.morta{opacity:.62}
.vl-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vl-topo b{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:.04em}
.vl-sub{color:var(--suave);font-size:13.5px;margin:5px 0 0}

/* janela de cadastro do veículo (duplo-clique na linha) */
.ed-selos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
/* o recado embaixo do campo travado. Campo cinza sem explicação vira reclamação; com a
   explicação do lado, a pessoa entende que é regra, não defeito. */
.campo-dica{font-size:12.5px;color:var(--suave);line-height:1.5;margin:-6px 0 4px}
/* a fileira de botões do rodapé da janela de cadastro — a de veículo e a de motorista usam
   a mesma. Excluir vai pra ponta esquerda, o mais longe possível do Salvar: os dois são
   cliques de uma vez só e não podem ficar vizinhos. */
.ed-acoes{justify-content:space-between}
.ed-acoes .btn.perigo{margin-right:auto}
/* No telefone os cinco botões quebravam em três fileiras tortas e o Salvar ficava metade
   fora da tela, embaixo — quem não rolasse achava que a janela não tinha como salvar.
   Empilhados e da largura toda, cada um vira alvo de dedo. `column-reverse` põe o ÚLTIMO
   botão do código (Salvar) no alto e o primeiro (Excluir) lá embaixo: a ordem de importância
   no celular, e os dois de uma-vez-só continuam nas pontas opostas. */
@media(max-width:640px){
  .ed-acoes{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .ed-acoes .btn{width:100%;justify-content:center;margin-right:0 !important}
}
/* barra de rolagem lateral VISÍVEL: são 20 colunas, a maioria fica fora da tela, e barra
   fantasma (o padrão do Chrome) faz a pessoa achar que a grade acabou na Transportadora. */
.grade-ag .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.grade-ag .ag-body-viewport::-webkit-scrollbar{height:11px;width:11px}
.grade-ag .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.grade-ag .ag-body-viewport::-webkit-scrollbar-thumb{background:#c4ccd6;border-radius:6px}
.grade-ag .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
.grade-ag .ag-body-viewport::-webkit-scrollbar-thumb:hover{background:#9aa6b4}
.grade-ag .ag-body-horizontal-scroll{background:#f7f9fb;border-top:1px solid var(--linha)}