/* JD gestão — a mesma família do JD sync (noite quente, azul do JD), com UM
   elemento forte: a placa da viatura, o prefixo pintado na lateral do caminhão. */
:root{
  color-scheme: dark;
  --noite:#1a1917; --sup:#2a2825; --sup2:#33302c; --sup3:#3d3a35;
  --linha:rgba(255,244,228,.10); --linha2:rgba(255,244,228,.18);
  --texto:#e8e3da; --texto2:#bdb6ab; --apagado:#a39c91;
  --azul:#8db1db; --azul-cheio:#3d6496; --azul-fundo:rgba(141,177,219,.12);
  --ok:#56b28c; --perigo:#e48369; --perigo-fundo:rgba(228,131,105,.12); --aviso:#d9ab55;
  --placa:#e8e3da; --placa-tinta:#1a1917;
  --placa-fonte: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
/* `hidden` tem de vencer qualquer display de classe (label.campo é flex) */
[hidden]{display:none!important}
html,body{margin:0;background:var(--noite);color:var(--texto)}
body{font:15px/1.5 system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.35rem} h2{font-size:1.1rem} h3{font-size:.98rem}
p{margin:0}
.apagado{color:var(--apagado)}
.pequeno{font-size:.84rem}

/* ---------- botões e campos ---------- */
.bt{border:1px solid var(--linha2);background:var(--sup2);border-radius:8px;padding:.5rem .85rem;cursor:pointer;line-height:1.2}
.bt:hover{background:var(--sup3)}
.bt.prim{background:var(--azul-cheio);border-color:var(--azul-cheio);color:#f4f1ec}
.bt.prim:hover{background:#46709f}
/* desligar fica discreto até a mão chegar: perto de cada pessoa ele não pode gritar */
.bt.perigo{color:var(--perigo);border-color:transparent;background:transparent;padding:.25rem .55rem;font-size:.84rem}
.bt.perigo:hover{border-color:rgba(228,131,105,.45);background:var(--perigo-fundo)}
.bt.perigo.armado{background:var(--perigo);color:var(--noite);border-color:var(--perigo)}
.bt.leve{background:transparent;border-color:transparent;color:var(--azul);padding:.35rem .5rem}
.bt:disabled{opacity:.5;cursor:default}
label.campo{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;color:var(--texto2)}
.entrada{background:var(--noite);border:1px solid var(--linha2);border-radius:8px;padding:.55rem .7rem;min-width:0}
.entrada:focus{border-color:var(--azul)}
.form{display:flex;flex-direction:column;gap:.8rem}
.linha-form{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.linha-form > *{flex:1 1 180px}
.escolha{display:flex;flex-wrap:wrap;gap:.4rem}
.escolha label{border:1px solid var(--linha2);border-radius:8px;padding:.4rem .7rem;cursor:pointer;font-size:.88rem;color:var(--texto)}
.escolha input{position:absolute;opacity:0;pointer-events:none}
.escolha label:has(input:checked){background:var(--azul-fundo);border-color:var(--azul);color:var(--azul)}
.escolha label:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.erro{color:var(--perigo);font-size:.88rem}

/* ---------- entrar ---------- */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.entrar .caixa{width:100%;max-width:380px;display:flex;flex-direction:column;gap:1.1rem}
.marca{display:flex;align-items:baseline;gap:.5rem}
.marca b{font-size:1.5rem;letter-spacing:-.02em}
.marca span{color:var(--apagado)}
.faixa-teste{border-left:3px solid var(--aviso);padding:.45rem .7rem;background:rgba(217,171,85,.08);font-size:.84rem;color:var(--texto2)}

/* ---------- moldura ---------- */
.moldura{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.trilho{border-right:1px solid var(--linha);padding:20px 14px;display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:0;height:100vh}
.trilho .empresa{display:flex;flex-direction:column;gap:.25rem}
.trilho .empresa b{font-size:1.02rem;line-height:1.3}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;padding:.5rem .7rem;border-radius:8px;color:var(--texto2)}
.nav button:hover{background:var(--sup)}
.nav button[aria-current="page"]{background:var(--sup2);color:var(--texto)}
.nav button:focus-visible{outline:2px solid var(--azul)}
.trilho .rodape{margin-top:auto;display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;color:var(--apagado);word-break:break-all}
.miolo{padding:28px clamp(16px,3vw,40px) 64px;max-width:1180px;width:100%}
.topo{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.topo p{margin-top:.25rem}
.bloco{background:var(--sup);border:1px solid var(--linha);border-radius:var(--r);padding:18px}
.bloco + .bloco{margin-top:16px}
.vazio{color:var(--apagado);padding:.6rem 0}

/* ---------- a PLACA (o elemento forte) ---------- */
.placa{display:inline-flex;align-items:center;justify-content:center;font-family:var(--placa-fonte);
  font-weight:700;font-stretch:condensed;letter-spacing:.06em;color:var(--placa-tinta);background:var(--placa);
  border-radius:4px;padding:.12rem .5rem;font-size:.95rem;line-height:1.2;box-shadow:inset 0 0 0 2px var(--placa-tinta),0 0 0 1px var(--placa)}
.placa.grande{font-size:2rem;padding:.25rem .9rem;border-radius:6px}
.placa.desativada{background:var(--sup3);color:var(--apagado);box-shadow:inset 0 0 0 2px var(--apagado)}
.placa.vaga{background:transparent;color:var(--apagado);box-shadow:inset 0 0 0 1.5px var(--linha2);font-weight:500;letter-spacing:.02em}

/* ---------- equipe: o quadro de despacho ---------- */
.admins{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center}
.quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0}
.raia{background:var(--sup);border:1px solid var(--linha);border-radius:var(--r);display:flex;flex-direction:column}
.raia > header{padding:14px 14px 12px;border-bottom:1px solid var(--linha)}
.raia > header .papel{font-size:.8rem;color:var(--apagado)}
.raia.orfa{border-style:dashed}
.raia ol{list-style:none;margin:0;padding:8px}
.tec{padding:10px 8px;border-radius:8px}
.tec + .tec{border-top:1px solid var(--linha)}
.tec .nome{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.tec .placas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.pessoa-mail{font-size:.82rem;color:var(--apagado);word-break:break-all}
.acoes-pessoa{display:flex;gap:.3rem;flex-wrap:wrap}

/* ---------- viaturas ---------- */
.frota{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.vtr{all:unset;cursor:pointer;background:var(--sup);border:1px solid var(--linha);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:.55rem}
.vtr:hover{border-color:var(--linha2)}
.vtr:focus-visible{outline:2px solid var(--azul)}
.vtr[aria-pressed="true"]{border-color:var(--azul)}
.vtr .cel{display:flex;gap:4px;align-items:center}
.vtr .cel i{width:11px;height:18px;border:2px solid var(--azul);border-radius:3px}
.vtr .cel i.livre{border-color:var(--linha2)}
.detalhe{margin-top:16px}
.celulares{list-style:none;margin:.4rem 0 0;padding:0}
.celulares li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--linha)}

/* ---------- o código de pareamento ---------- */
.bilhete{margin-top:14px;border:1px dashed var(--placa);border-radius:var(--r);padding:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.bilhete .texto{flex:1 1 220px;display:flex;flex-direction:column;gap:.3rem}

/* ---------- registro ---------- */
.registro{list-style:none;margin:0;padding:0}
.registro li{display:grid;grid-template-columns:118px 1fr;gap:.8rem;padding:.6rem 0;border-top:1px solid var(--linha)}
.registro time{color:var(--apagado);font-variant-numeric:tabular-nums;font-size:.86rem}

/* ---------- empresas (super) ---------- */
.empresas{list-style:none;margin:0;padding:0}
.empresas li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;border-top:1px solid var(--linha)}

/* ---------- aviso flutuante ---------- */
#aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:min(92vw,520px);
  background:var(--sup3);border:1px solid var(--linha2);border-radius:10px;padding:.65rem 1rem;display:none;z-index:9}
#aviso.on{display:block}
#aviso.erro{border-color:var(--perigo);color:var(--perigo)}

/* ---------- celular ---------- */
@media (max-width: 760px){
  .moldura{grid-template-columns:1fr}
  .trilho{position:static;height:auto;border-right:0;border-bottom:1px solid var(--linha);padding:14px 16px;gap:.8rem}
  .nav{flex-direction:row;overflow-x:auto}
  .trilho .rodape{flex-direction:row;justify-content:space-between;align-items:center;margin-top:0}
  .miolo{padding:20px 16px 56px}
  .registro li{grid-template-columns:1fr;gap:.1rem}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }