:root{
  --navy:#1B2A4A; --navy2:#24365C; --navy3:#2E4470;
  --brand:#27B8D8; --brand2:#3AC6E4; --brand-bg:#E7F7FC;
  --wa:#25D366; --wa2:#128C7E;
  --bg:#F2F5F9; --card:#FFFFFF; --line:#E3E9F0;
  --ink:#1E293B; --muted:#64748B; --soft:#94A3B8;
  --ok:#1B7D46; --ok-bg:#E8F5E9;
  --info:#2563EB; --info-bg:#E8F0FE;
  --warn:#D4820A; --warn-bg:#FDF3E3;
  --bad:#C0392B; --bad-bg:#FCEBE9;
  --gray:#64748B; --gray-bg:#EEF1F5;
  --radius:14px; --shadow:0 1px 2px rgba(27,42,74,.06),0 4px 14px rgba(27,42,74,.08);
  --shadow-lift:0 10px 28px rgba(27,42,74,.16),0 3px 8px rgba(27,42,74,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%}
[hidden]{display:none!important}
/* Layout de altura cheia: o <main> cresce e empurra o rodapé para o FIM da
   tela. Sem isto, em telas com pouco conteúdo (Frota vazia, login, relatórios
   curtos) o rodapé aparecia no meio da página e sobrava um vão claro embaixo. */
body{font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);min-height:100vh;font-size:15px;
  display:flex;flex-direction:column;
  background-image:radial-gradient(900px 380px at 110% -140px,rgba(39,184,216,.07),transparent 60%),
                   radial-gradient(700px 320px at -120px 30%,rgba(37,99,235,.05),transparent 55%);
  background-attachment:fixed}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
svg.ic{width:18px;height:18px;flex:none;vertical-align:-3px}
svg.ic-s{width:14px;height:14px;flex:none;vertical-align:-2px}
svg.ic-l{width:26px;height:26px;flex:none}
/* placeholders <svg data-ico> antes da hidratação JS — nunca deixar esticar */
svg[data-ico]{width:18px;height:18px;flex:none;vertical-align:-3px}
/* scrollbar discreta e temática */
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:#EDF1F6}
::-webkit-scrollbar-thumb{background:#C3CFDD;border-radius:99px;border:2px solid #EDF1F6}
::-webkit-scrollbar-thumb:hover{background:var(--navy3)}
/* foco visível elegante em qualquer elemento interativo */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- efeitos 4D (profundidade, ripple, micro-interações) ---------- */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
  transform:scale(0);animation:rip .55s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.4);opacity:0}}
@keyframes mup{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes vin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes brilho{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- header + nav ---------- */
.topo{position:relative;color:#fff;padding:18px 30px 0;overflow:hidden;
  background:radial-gradient(1100px 420px at 88% -160px,rgba(39,184,216,.30),transparent 62%),
             radial-gradient(700px 300px at -8% 120%,rgba(46,68,112,.55),transparent 60%),
             linear-gradient(135deg,#152238 0%,var(--navy) 52%,var(--navy2) 100%)}
.topo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.045) 50%,transparent 58%);
  background-size:220% 100%;animation:brilho 7s ease-in-out infinite}
.topo::after{content:"";display:block;height:3px;margin:0 -30px;
  background:linear-gradient(90deg,transparent,var(--brand) 28%,#8FE3F5 50%,var(--brand) 72%,transparent)}
.topo .marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 0 14px;position:relative;z-index:1}
.topo .logo{width:auto;min-width:56px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px rgba(10,20,40,.35);
  transition:transform .2s,box-shadow .2s}
.topo .logo:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px rgba(10,20,40,.45)}
.topo h1{font-size:18px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px;line-height:1.2}
.topo h1 .destaque{background:linear-gradient(90deg,#9FD8EC,var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.topo .sub{color:rgba(198,214,232,.62);font-size:10.5px;margin-top:3px;letter-spacing:.9px;text-transform:uppercase}
/* direita da marca: relógio + conta + selo HTTPS num bloco só, encostado na borda */
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.topo .pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(220,233,245,.78);font-size:10.5px;padding:6px 12px;border-radius:999px;font-weight:600;letter-spacing:.4px;
  display:flex;align-items:center;gap:6px;backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:.2s;white-space:nowrap}
.topo .pill:hover{background:rgba(255,255,255,.12);color:#fff}
.topo .pill svg{color:var(--brand2);width:14px;height:14px}
/* navegação: abas lowsat com sublinhado na aba ativa (sem adesivo branco) */
.nav{display:flex;gap:2px;flex-wrap:wrap;margin:0 -30px;padding:0 30px;position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.07)}
.nav button{background:transparent;border:0;color:rgba(197,213,231,.72);font-size:13px;font-weight:600;
  padding:11px 14px 12px;border-radius:0;transition:color .16s ease,background .16s ease;
  display:flex;gap:7px;align-items:center;line-height:1.2;white-space:nowrap;position:relative;overflow:visible}
.nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav button.on{color:#fff;background:transparent;box-shadow:none;transform:none}
.nav button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2.5px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--brand),#8FE3F5);box-shadow:0 0 12px rgba(58,198,228,.55)}
.nav button svg{opacity:.75}
.nav button.on svg{opacity:1;color:var(--brand2)}
.nav .navbadge{min-width:18px;height:18px;border-radius:999px;background:var(--bad);color:#fff;
  font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 0 0 2px rgba(27,42,74,.55)}
.nav .navbadge:empty{display:none}
.nav .navbadge.amb{background:var(--warn)}

/* ---------- barra de alerta (calma, legível, com ação clara) ---------- */
.alertbar{display:flex;align-items:center;gap:11px;padding:11px 26px;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;border-bottom:1px solid transparent;transition:filter .15s}
.alertbar:hover{filter:brightness(.985)}
.alertbar.crit{background:linear-gradient(90deg,#FDEBE8,#FBDCD7 70%,#F8D3CC);
  border-bottom-color:rgba(192,57,43,.22);color:#7E2418}
.alertbar.warn{background:linear-gradient(90deg,#FDF4E3,#FBE9CD 70%,#F8E1BE);
  border-bottom-color:rgba(212,130,10,.25);color:#7A4B02}
.alertbar > svg{width:20px;height:20px;flex:none;color:currentColor;opacity:.9}
.alertbar b{font-weight:800;letter-spacing:.2px}
.alertbar .ver{margin-left:auto;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06);
  color:inherit;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;
  display:flex;gap:6px;align-items:center;transition:background .15s}
.alertbar:hover .ver{background:#fff}
.alertbar .ver svg{width:14px;height:14px}

main{max-width:1220px;width:100%;margin:0 auto;padding:24px 22px 60px;flex:1 0 auto}
.view{display:none}
.view.on{display:block;animation:vin .3s ease-out}

/* ---------- cards de veículo ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.vcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;border-top:4px solid var(--navy3);position:relative;display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease,box-shadow .25s ease}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.vcard:hover::after{content:"";position:absolute;left:18px;right:18px;top:-4px;height:4px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,transparent,var(--navy3),transparent);opacity:.85}
.vcard.n-ok:hover::after{background:linear-gradient(90deg,transparent,var(--ok),transparent)}
.vcard.n-planejar:hover::after{background:linear-gradient(90deg,transparent,var(--info),transparent)}
.vcard.n-alerta:hover::after{background:linear-gradient(90deg,transparent,var(--warn),transparent)}
.vcard.n-critico:hover::after{background:linear-gradient(90deg,transparent,var(--bad),transparent)}
.vcard.n-ok{border-top-color:var(--ok)}
.vcard.n-planejar{border-top-color:var(--info)}
.vcard.n-alerta{border-top-color:var(--warn)}
.vcard.n-critico{border-top-color:var(--bad)}
.vcard.n-sem{border-top-color:var(--soft)}
.vcard.n-revisao{border-top-color:var(--info)}
/* aviso curto de revisão não informada (não é um bloco de espera) */
.rev-pend{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 10px;font-size:12px;
  color:var(--info);background:var(--info-bg);border:1px solid rgba(37,99,235,.22);border-radius:9px}
.rev-pend .ic{flex:none}
.vcard .cab{display:flex;align-items:flex-start;gap:10px}
.vcard .cab .vicon{width:38px;height:38px;border-radius:10px;background:var(--info-bg);color:var(--info);
  display:flex;align-items:center;justify-content:center;flex:none}
.vcard .cab h3{font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vcard .cab .placa{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.vcard .cab .acoes{margin-left:auto;display:flex;gap:6px}
.icobtn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#FBFCFE;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:all .18s;
  position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(27,42,74,.07)}
.icobtn:hover{color:var(--info);border-color:var(--info);background:var(--info-bg);transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(37,99,235,.22)}
.icobtn:active{transform:translateY(0) scale(.94)}
.icobtn.del:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg);
  box-shadow:0 6px 14px rgba(192,57,43,.22)}
.icobtn.wa:hover{color:var(--wa2);border-color:var(--wa);background:#E9FBF1;
  box-shadow:0 6px 14px rgba(37,211,102,.28)}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  padding:4px 9px;border-radius:999px;text-transform:uppercase}
.badge.zero{background:var(--navy);color:#fff}
.badge.conc{background:var(--info-bg);color:var(--info)}
.badge.comum{background:var(--gray-bg);color:var(--gray)}
.odo-atual{font-size:12.5px;color:var(--muted)}
.odo-atual b{font-size:19px;color:var(--navy);font-variant-numeric:tabular-nums}
/* barra de ciclo */
.ciclo{margin-top:2px}
.ciclo .cima,.ciclo .baixo{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px}
.ciclo .cima{margin-bottom:24px} /* folga para o rótulo do gatilho acima da barra */
.ciclo .cima b{color:var(--navy)}
.barra-c{height:12px;background:#E9EEF4;border-radius:999px;position:relative;overflow:visible}
.barra-c>i{display:block;height:100%;border-radius:999px;transition:width .4s;position:relative;overflow:hidden}
.barra-c>i::after{content:"";position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  background-size:200% 100%;animation:shim 2.8s linear infinite}
.barra-c>u{position:absolute;top:-6px;width:2px;height:22px;background:var(--warn);border-radius:2px}
.barra-c .lbl-gatilho{position:absolute;top:-18px;font-size:9.5px;color:var(--warn);white-space:nowrap;line-height:1;letter-spacing:.2px;font-weight:700}
.ciclo .baixo{margin-top:5px}
.ciclo .baixo .faltam{font-weight:800;color:var(--navy)}
.vcard .rodape{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.vcard .prev{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.3px;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.info{background:var(--info-bg);color:var(--info)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.sem{background:var(--gray-bg);color:var(--gray)}
.vcard .espera{font-size:12.5px;color:var(--muted);background:var(--bg);border:1.5px dashed #C4D0DE;
  border-radius:10px;padding:12px 14px;display:flex;gap:9px;align-items:center;line-height:1.45}
.vcard .espera svg{color:var(--soft)}

/* ---------- painéis / tabelas ---------- */
.painel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;margin-top:20px}
.painel>h2{font-size:15px;color:var(--navy);display:flex;align-items:center;gap:9px;letter-spacing:.2px;line-height:1.3}
.painel>h2 svg{color:var(--navy3)}
.painel .desc{color:var(--muted);font-size:12.5px;margin:6px 0 14px;line-height:1.5}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:12.8px}
th{background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-weight:600;
  font-size:11.5px;letter-spacing:.3px;white-space:nowrap}
th:first-child{border-radius:8px 0 0 0}th:last-child{border-radius:0 8px 0 0}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(odd) td{background:#FAFBFD}
tbody tr.clk:hover td{background:#EFF4FB;cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto}
.clicaveis tr td .mini-acao{opacity:0}
tbody tr:hover td .mini-acao{opacity:1}

/* ---------- botões ----------
   (.btn.btn-* com dupla classe: ganha de .mini{color:var(--muted)} que deixa
    o texto dos botões .mini cinza — bug de especificidade)
   4D: gradiente + brilho superior interno + sombra de base + press + ripple */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  padding:10px 18px;border-radius:11px;border:0;transition:transform .16s,box-shadow .22s,filter .2s;
  line-height:1.25;white-space:nowrap;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0 0 auto;height:45%;border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.985);filter:brightness(.97);transition-duration:.05s}
.btn.btn-p{background:linear-gradient(180deg,var(--navy3),var(--navy));color:#fff;
  box-shadow:0 2px 0 #101E38,0 7px 18px rgba(27,42,74,.35)}
.btn.btn-p:hover{box-shadow:0 2px 0 #101E38,0 11px 24px rgba(27,42,74,.42)}
.btn.btn-i{background:linear-gradient(180deg,#3E7BEF,var(--info));color:#fff;
  box-shadow:0 2px 0 #1D4FBF,0 7px 18px rgba(37,99,235,.32)}
.btn.btn-i:hover{box-shadow:0 2px 0 #1D4FBF,0 11px 24px rgba(37,99,235,.4)}
.btn.btn-s{background:linear-gradient(180deg,#F2F6FB,#E6ECF3);color:var(--navy);
  box-shadow:0 2px 0 #C9D6E4,0 5px 14px rgba(27,42,74,.14),inset 0 1px 0 #fff}
.btn.btn-s:hover{box-shadow:0 2px 0 #C9D6E4,0 9px 20px rgba(27,42,74,.2),inset 0 1px 0 #fff}
.btn.btn-d{background:linear-gradient(180deg,#F6DAD6,var(--bad-bg));color:var(--bad);
  box-shadow:0 2px 0 #EBC4BE,0 5px 14px rgba(192,57,43,.16)}
.btn.btn-d:hover{box-shadow:0 2px 0 #EBC4BE,0 9px 20px rgba(192,57,43,.22)}
.btn.btn-ok{background:linear-gradient(180deg,#22985A,var(--ok));color:#fff;
  box-shadow:0 2px 0 #135A31,0 7px 18px rgba(27,125,70,.32)}
.btn.btn-ok:hover{box-shadow:0 2px 0 #135A31,0 11px 24px rgba(27,125,70,.4)}
.btn.btn-wa{background:linear-gradient(180deg,#2FE070,#1FBF5C);color:#fff;
  box-shadow:0 2px 0 #0E9F52,0 7px 18px rgba(37,211,102,.35)}
.btn.btn-wa:hover{box-shadow:0 2px 0 #0E9F52,0 11px 24px rgba(37,211,102,.45)}
.btn:disabled{opacity:.55;cursor:wait;transform:none;filter:none}
.btn.mini{padding:7px 13px;font-size:12px;margin-top:0}

/* ---------- resumo topo frota ---------- */
.resumo-frota{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.rkpi{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:14px 17px;
  display:flex;gap:12px;align-items:center}
.rkpi .rico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.rkpi .rico.navy{background:var(--info-bg);color:var(--info)}
.rkpi .rico.ok{background:var(--ok-bg);color:var(--ok)}
.rkpi .rico.warn{background:var(--warn-bg);color:var(--warn)}
.rkpi .rico.bad{background:var(--bad-bg);color:var(--bad)}
.rkpi .lbl{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.rkpi .val{font-size:20px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.15}

/* ---------- dropzone ---------- */
.drop{background:var(--card);border:2px dashed #B9C8D8;border-radius:var(--radius);
  padding:46px 30px;text-align:center;transition:.2s;cursor:pointer;box-shadow:var(--shadow)}
.drop:hover,.drop.over{border-color:var(--info);background:#F7FAFF}
.drop .ico{color:var(--info);margin-bottom:12px}
.drop .ico svg{width:46px;height:46px}
.drop h2{font-size:18px;font-weight:700;color:var(--navy)}
.drop p{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.55}
.drop .formats{display:inline-block;margin-top:13px;font-size:11px;color:var(--info);
  background:var(--info-bg);padding:5px 12px;border-radius:999px;font-weight:700;letter-spacing:.4px}
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.passo{background:var(--card);border-radius:12px;padding:15px 18px;box-shadow:var(--shadow);
  border-left:4px solid var(--navy3)}
.passo b{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy)}
.passo b .n{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.passo span{display:block;color:var(--muted);font-size:12px;margin-top:7px;line-height:1.5}

/* ---------- progresso ---------- */
.proc{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px;margin-top:20px}
.proc h3{font-size:15px;color:var(--navy);margin-bottom:6px;display:flex;gap:9px;align-items:center}
.proc .status{color:var(--muted);font-size:13px;margin-bottom:16px}
.barra{height:10px;background:#E8EDF3;border-radius:999px;overflow:hidden}
.barra i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--navy3),var(--info));
  border-radius:999px;transition:width .15s}

/* ---------- tabs veículos ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tab{background:#E6ECF3;border:0;color:var(--navy);font-size:13px;font-weight:600;
  padding:10px 18px;border-radius:11px;transition:all .18s;display:flex;gap:8px;align-items:center;
  position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(27,42,74,.08),inset 0 1px 0 #fff}
.tab:hover{background:#D8E2ED;transform:translateY(-2px);box-shadow:0 6px 14px rgba(27,42,74,.16),inset 0 1px 0 #fff}
.tab:active{transform:translateY(0) scale(.97)}
.tab.on{background:linear-gradient(180deg,var(--navy3),var(--navy));color:#fff;
  box-shadow:0 2px 0 #101E38,0 8px 20px rgba(27,42,74,.38);transform:translateY(-2px)}
.tab .km{font-size:11px;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:999px}
.tab:not(.on) .km{background:#fff;color:var(--navy3)}
.tab .st-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 6px rgba(27,42,74,.35)}
.tab .st-dot.ok{background:var(--ok)}.tab .st-dot.warn{background:var(--warn)}
.tab .st-dot.bad{background:var(--bad);animation:brilho 1.6s infinite}
.tab .st-dot.sem{background:var(--soft)}
.tab .st-dot.info{background:var(--info)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-top:16px}
.kpi{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:14px 17px;
  border-top:3px solid var(--navy3)}
.kpi .lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.7px;text-transform:uppercase;
  display:flex;align-items:center;gap:6px}
.kpi .lbl svg{color:var(--navy3)}
.kpi .val{font-size:24px;font-weight:800;color:var(--navy);margin-top:5px;font-variant-numeric:tabular-nums}
.kpi .nota{font-size:11px;color:var(--soft);margin-top:3px}

/* ---------- seções ---------- */
.secao{margin-top:22px}
.secao .titulo{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.secao .titulo h2{font-size:15.5px;color:var(--navy);display:flex;align-items:center;gap:8px}
.secao .titulo h2 svg{color:var(--navy3)}
.secao .titulo .sub{color:var(--muted);font-size:12.5px}

/* ---------- card do ciclo (telemetria) ---------- */
.ciclobox{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px}
.ciclobox .topo-c{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ciclobox .topo-c .info{flex:1;min-width:230px}
.ciclobox h3{font-size:14px;color:var(--navy);display:flex;gap:8px;align-items:center}
.ciclobox .sub-c{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.ciclobox .num-c{font-size:34px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:8px}
.ciclobox .num-c small{font-size:13px;color:var(--muted);font-weight:600}
.ciclobox .dir{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ciclobox .ajustes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.campo input,.campo select{border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;
  font-size:13px;font-weight:600;color:var(--navy);background:#FBFCFE;min-width:110px}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--info);background:#fff}
.campo .dica{font-size:10.5px;color:var(--soft);max-width:150px;line-height:1.4}
/* cadastro de motoristas (código WESO → nome) na tela de Relatórios */
.cadMotInput{border:1.5px solid var(--line);border-radius:8px;padding:6px 9px;
  font-size:13px;font-weight:600;color:var(--navy);background:#FBFCFE;width:100%;max-width:300px}
.cadMotInput:focus{outline:none;border-color:var(--info);background:#fff}
.cadMotNovo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cadMotNovo[hidden]{display:none}   /* display:flex do bloco acima venceria o atributo hidden */

/* ---------- gráficos ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.charts{grid-template-columns:1fr}}
.chartbox{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px 19px 8px;
  overflow:hidden;position:relative;margin:0 0 16px}
/* espaço entre o gráfico e o que vem DEPOIS dele (tabela/painel): sem isto
   as caixas ficam COLADAS uma na outra */
.charts>.chartbox{margin:0}
.chartbox:last-child{margin-bottom:0}
.chartbox+.chartbox,.chartbox+.tblbox,.tblbox+.chartbox{margin-top:16px}
/* filete de energia 4D no topo do card de gráfico */
.chartbox::before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(39,184,216,.55),transparent);pointer-events:none}
.chartbox h3{font-size:13px;color:var(--navy);margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.chartbox h3 small{color:var(--soft);font-weight:500;font-size:11px}
canvas{width:100%;height:235px;display:block;max-width:100%}
/* tooltip interativo dos gráficos (segue o mouse sobre barras/pontos) */
.ctip{position:absolute;z-index:5;pointer-events:none;background:linear-gradient(180deg,#24365C,#1B2A4A);
  color:#fff;border-radius:10px;padding:8px 12px;font-size:11.5px;white-space:nowrap;
  box-shadow:0 10px 24px rgba(15,26,46,.38),0 0 0 1px rgba(58,198,228,.28);
  opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.ctip.on{opacity:1;transform:none}
.ctip b{display:block;font-size:12px;font-weight:800;letter-spacing:.2px}
.ctip i{display:block;font-style:normal;color:#BDE9F6;font-weight:600;margin-top:2px}
/* gráfico de deslocamento por horário (junto ao resumo diário) — com filtro por dia */
.ch-horas{margin-bottom:14px}
.ch-horas canvas{height:205px}
.chartbox h3{gap:10px}
.ch-ctl{margin-left:auto;display:flex;align-items:center;gap:8px}
.ch-ctl .ch-sel{min-width:168px}   /* sem vehicles nao pode virar caixinha solta */
/* ---------- campos de SELEÇÃO (todo o site) ----------
   A seta nativa do navegador vinha como um bloco cinza por cima da caixa e,
   ao passar o mouse/clicar, o anel de foco saía FORA do desenho (parecia
   desalinhado e sobreposto). Agora: seta desenhada dentro da caixa, foco
   por dentro (inset) e hover que não mexe nada. */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:30px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:12px}
select:hover{background-color:#fff;border-color:var(--brand)}
select:focus,select:focus-visible{outline:none;border-color:var(--brand);background-color:#fff;
  box-shadow:inset 0 0 0 2px rgba(39,184,216,.28)}
select::-ms-expand{display:none}          /* engine antiga do Windows */
select option{color:var(--ink);background:#fff}

.ch-sel{border:1.5px solid var(--line);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:600;
  color:var(--navy);background-color:#FBFCFE;cursor:pointer;transition:border-color .18s,background-color .18s;
  max-width:230px;box-shadow:0 1px 2px rgba(27,42,74,.06),inset 0 1px 0 #fff}
.ch-sel:hover{border-color:var(--brand);background-color:#fff}
.ch-sel:focus,select.ch-sel:focus-visible{outline:none;border-color:var(--brand);background-color:#fff;
  box-shadow:inset 0 0 0 2px rgba(39,184,216,.28),0 1px 2px rgba(27,42,74,.06)}

/* ---------- resumo diário: 2 linhas por dia ----------
   1ª linha: números · 2ª linha: faixa de trajeto com os endereços COMPLETOS
   em chips coloridos (azul = partiu · verde = parou · ciano = cidades) —
   texto quebra linha, nada é cortado */
#tblDiario tr.ln td{padding:8px 12px;border-bottom:0;background:#fff}
#tblDiario tr.ln .dt b{display:block;font-size:12.3px;font-weight:800;color:var(--navy);white-space:nowrap}
#tblDiario tr.ln .dt span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  color:var(--soft);text-transform:uppercase;margin-top:2px}
#tblDiario tr.ln .kmr b{color:var(--navy);font-weight:800}
#tblDiario tr.ln .hr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
#tblDiario tr.ln:hover td{background:#F2F7FE}
#tblDiario tr.lt td{background:#F6FAFE;padding:8px 12px 10px;border-bottom:1px solid var(--line)}
/* chips de trajeto: rótulo em cima + endereço COMPLETO embaixo (quebra linha,
   largura distribuída entre os 3 — nada cortado, tudo alinhado) */
.traj{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.traj .t-seta{align-self:center;color:#A9BACD;flex:none}
.traj .t-part,.traj .t-parada,.traj .t-cid{flex:1 1 250px;min-width:220px;max-width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  border-radius:11px;padding:9px 13px;box-shadow:0 1px 3px rgba(15,26,46,.06)}
.traj .t-part{background:var(--info-bg);border:1px solid #D3E1FC}
.traj .t-parada{background:var(--ok-bg);border:1px solid #D3ECD9}
.traj .t-cid{background:var(--brand-bg);border:1px solid #C9EDF7}
.traj em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;flex:none}
.traj b{font-size:12.2px;font-weight:600;color:var(--ink);line-height:1.5;width:100%;
  overflow-wrap:anywhere;word-break:break-word;text-align:left}
.traj .t-part svg{color:var(--info);flex:none}
.traj .t-parada svg{color:var(--ok);flex:none}
.traj .t-cid svg{color:var(--brand);flex:none}
/* dia selecionado no filtro do gráfico de horários — destaca as 2 linhas do dia */
#tblDiario tr.destaque td{background:var(--brand-bg)!important}
#tblDiario tr.ln.destaque td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
#tblDiario tr.lt.destaque td{box-shadow:inset 3px 0 0 var(--brand)}

/* ---------- tabelas box ---------- */
.tblbox{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px;overflow:hidden}
/* endereço COMPLETO nos registros de telemetria: quebra linha em várias linhas
   em vez de cortar com "…" — tudo o que o PDF da Movisat traz aparece na tela */
#tblRegs td.ender{max-width:620px;min-width:330px;white-space:normal;line-height:1.5;
  overflow-wrap:anywhere;word-break:break-word;font-size:12px;color:var(--ink);padding:7px 12px}
/* .scroll DEVE vencer sobre o overflow:hidden do .tblbox — era isso que CORTAVA
   a tabela larga (mesma especificidade, regra posterior vencia). Dupla classe = 0,2,0. */
.tblbox.scroll{overflow-x:auto;overflow-y:hidden}
/* Tabela de REGISTROS (telemetria): no máximo ~420px de altura, com rolagem.
   Antes a lista crescia sem limite e tomava a página inteira (1.081 linhas). */
#tblRegs{max-height:420px;overflow-y:auto}
#tblSeg,#tblAlertas,#tblUso{max-height:520px;overflow-y:auto}
#tblRegs thead th,#tblSeg thead th,#tblAlertas thead th,#tblUso thead th{position:sticky;top:0;z-index:2}
/* Comparativo mês × veículo: tabela COMPACTA, encostada à esquerda.
   Antes ela esticava 100% da largura e cada número ficava perdido no meio
   da página. Sem min-width:100% — o conteúdo que dá a largura, e o
   .tblbox.scroll já permite rolagem quando há muitos veículos. */
#tblCompar{table-layout:auto;width:auto;min-width:0;margin:0}
#tblCompar .col-mes{width:auto;white-space:nowrap;padding-right:24px}
#tblCompar .col-veic{width:auto;white-space:nowrap;min-width:112px;padding-left:10px;padding-right:10px}
#tblCompar .col-total{width:auto;white-space:nowrap;padding-left:24px}
/* nome do veículo em cima, placa logo abaixo (sem o margin de 9px do .mini
   global, que abria um buraco entre as duas linhas) */
#tblCompar th .mini{font-size:10.5px;font-weight:500;letter-spacing:.2px;
  margin:2px 0 0;line-height:1.2}
#tblCompar td .mini{font-size:10.5px;margin:2px 0 0;line-height:1.2}
.busca{margin:12px 0;display:flex;gap:10px;flex-wrap:wrap}
.busca input,.busca select{flex:1;min-width:190px;border:1.5px solid var(--line);border-radius:9px;
  padding:9px 13px;font-size:13px;background:#FBFCFE}
.busca select{flex:none;min-width:150px}
.busca input:focus,.busca select:focus{outline:none;border-color:var(--info)}
.mais-reg{margin:13px auto;display:block;background:var(--info-bg);color:var(--info);border:0;
  font-size:12.5px;font-weight:700;padding:9px 20px;border-radius:9px}
.mais-reg:hover{background:#D8E4FD}
.mini{color:var(--muted);font-size:12px;margin-top:9px}
.vazio{padding:34px 20px;text-align:center;color:var(--muted);font-size:13px}
.vazio svg{width:34px;height:34px;color:var(--soft);margin-bottom:10px}
.vazio b{display:block;font-size:14px;color:var(--navy);margin-bottom:4px}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,26,46,.58);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px;backdrop-filter:blur(4px)}
.overlay[hidden]{display:none}
.modal{background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,26,46,.45);width:100%;
  max-width:520px;max-height:90vh;overflow:auto;animation:mpop .24s cubic-bezier(.2,.9,.3,1.15)}
.modal.wa{max-width:920px}
@keyframes mpop{from{transform:scale(.93) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal .m-top{display:flex;align-items:center;gap:10px;padding:18px 22px 0;
  position:sticky;top:0;background:linear-gradient(180deg,#fff 78%,rgba(255,255,255,0));z-index:2}
.modal .m-top h3{font-size:16px;color:var(--navy);display:flex;align-items:center;gap:9px;flex:1}
.modal .m-top h3 svg{color:var(--info)}
.modal .m-top .fx{width:32px;height:32px;border-radius:9px;border:0;background:var(--gray-bg);
  color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.18s}
.modal .m-top .fx:hover{background:var(--bad-bg);color:var(--bad);transform:rotate(90deg)}
/* o corpo não pode esconder nada: sem corte, sem scroll invisível */
.modal .m-corpo{padding:16px 22px 22px;overflow:visible}
.modal .m-corpo::after{content:"";display:block;height:2px}
.modal .m-corpo>*:last-child{margin-bottom:0}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.mgrid .largo{grid-column:1/-1}
.mgrid label{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:flex;gap:6px;margin-bottom:5px}
.mgrid input,.mgrid select,.mgrid textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:13.5px;font-weight:600;color:var(--navy);background:#FBFCFE}
.mgrid textarea{font-weight:500;resize:vertical;min-height:64px}
.mgrid input:focus,.mgrid select:focus,.mgrid textarea:focus{outline:none;border-color:var(--info);background:#fff}
.chk{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1.5px solid var(--line);
  border-radius:10px;background:#FBFCFE;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink)}
.chk input{width:17px;height:17px;accent-color:var(--info)}
.chk.on{border-color:var(--info);background:var(--info-bg)}
.nota-modal{font-size:12px;color:var(--muted);background:var(--bg);border-radius:10px;padding:11px 13px;
  line-height:1.55;display:flex;gap:9px;align-items:flex-start;margin-top:13px}
.nota-modal svg{color:var(--info);flex:none;margin-top:1px}
.m-rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* ---------- confirmação estilizada ---------- */
.modal.conf{max-width:430px}
.conf-box{display:flex;gap:13px;align-items:flex-start;background:var(--bg);
  border:1.5px solid var(--line);border-radius:12px;padding:14px 15px;margin-top:2px}
.conf-box svg{color:var(--info);flex:none;margin-top:1px}
.conf-box.perigo{background:var(--bad-bg);border-color:#F1C9C3}
.conf-box.perigo svg{color:var(--bad)}
.conf-txt{font-size:13.5px;line-height:1.6;color:var(--ink)}
.conf-txt b{color:var(--navy)}

/* ---------- painel de administradores ---------- */
.adm-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.adm-cab-txt{min-width:0;flex:1}
.adm-cab h2{margin-bottom:5px}
.adm-cab .desc{max-width:620px}
.adm-busca{display:flex;align-items:center;gap:9px;margin:14px 0 4px;padding:8px 13px;
  background:var(--bg);border:1.5px solid var(--line);border-radius:11px;max-width:380px;
  transition:border-color .15s, box-shadow .15s}
.adm-busca:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(39,184,216,.12)}
.adm-busca svg{color:var(--soft);flex:none}
.adm-busca input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:13px;
  font-weight:600;color:var(--ink)}
.adm-busca input::placeholder{color:var(--soft);font-weight:500}
/* cabeçalho da tabela mais leve que a barra navy dos outros painéis */
#admUsuarios thead th{background:linear-gradient(180deg,#F7F9FC,#EFF3F8);color:var(--muted);
  font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
#admUsuarios thead th:first-child{border-radius:11px 0 0 0}
#admUsuarios thead th:last-child{border-radius:0 11px 0 0}
#admUsuarios thead th.num{text-align:right}
#admUsuarios tbody td{padding:13px 14px}
#admUsuarios tbody tr:hover td{background:#F5F9FE}
#admUsuarios .data{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-us-acoes .icobtn.del:hover{color:var(--bad);background:var(--bad-bg)}
.adm-vazio{padding:26px 14px;text-align:center;color:var(--soft);font-size:13px}
.adm-resumo{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)}
.adm-resumo b{color:var(--navy)}
.adm-resumo span{display:inline-flex;align-items:center;gap:6px}
.adm-resumo svg{color:var(--brand)}

/* ---------- painel: sessão e dados ---------- */
/* sessão: uma linha compacta (avatar + nome + usuário/sessão) e as ações
   embaixo à esquerda — sem painel esticado nem fileira de etiquetas */
.adm-sess{display:flex;align-items:center;gap:12px}
.adm-sess-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-sess-txt b{font-size:14.5px;color:var(--navy);line-height:1.25}
.adm-sess-txt span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-sess-txt svg{color:var(--soft);flex:none}
.adm-sess-tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:11.5px;font-weight:600;color:#0E7490;background:rgba(14,116,144,.10);
  border-radius:20px;padding:4px 11px}
.adm-sess-tag svg{color:var(--brand)}
.adm-sess-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* dados: uma linha de estatísticas e as ações, sem texto redundante */
.adm-banco-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  color:var(--soft)}
.adm-banco-stats .adm-st{display:inline-flex;align-items:center;gap:5px}
.adm-banco-stats .adm-st+.adm-st::before{content:"·";color:var(--line);margin-right:4px}
.adm-banco-stats b{color:var(--navy);font-weight:700}
.adm-banco-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.adm-banco-acoes .btn{min-width:0}
@media (max-width:560px){
  .adm-sess-tag{margin-left:0}
  .adm-banco-acoes .btn{flex:1;justify-content:center}
}

/* ---------- reenviar acesso (duas opções) ---------- */
.escolha{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:#FBFCFE;cursor:pointer;transition:border .15s,background .15s}
.escolha:hover{border-color:#CFDAE6}
.escolha input{width:16px;height:16px;accent-color:var(--info);margin-bottom:3px;cursor:pointer}
.escolha b{font-size:13.5px;color:var(--navy)}
.escolha span{font-size:11.5px;color:var(--soft);line-height:1.5}
.escolha.on{border-color:var(--info);background:var(--info-bg)}
.escolha.on input{accent-color:var(--info)}
.re-senha{margin-top:10px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px}
.re-mini{display:flex;align-items:flex-start;gap:7px;margin-top:9px;font-size:11.5px;color:var(--soft)}
.re-mini svg{color:var(--soft);flex:none;margin-top:1px}
.re-mini b{color:var(--muted)}

/* ---------- lista de administradores ---------- */
.adm-us{display:flex;align-items:center;gap:11px}
.adm-us-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#fff;letter-spacing:.3px;
  background:linear-gradient(180deg,#5B6E8C,#3A4A68);
  box-shadow:0 2px 6px rgba(27,42,74,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.adm-us-av.dev{background:linear-gradient(180deg,#2FBBDD,#0E7490)}
.adm-us-nm{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.adm-us-nm b{font-size:13.5px;color:var(--navy);line-height:1.25}
/* cargo como texto discreto com um ponto — sem "adesivo" colado no nome */
.adm-us-cargo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--soft);line-height:1.2}
.adm-us-cargo i{width:6px;height:6px;border-radius:50%;background:#A9B6C7;flex:none}
.adm-us-cargo.dev{color:#0E7490}
.adm-us-cargo.dev i{background:var(--brand)}
.adm-us-login{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:3px 8px;color:var(--muted)}
.adm-us-acoes{display:inline-flex;gap:3px;padding:3px;border-radius:11px;
  background:var(--bg);border:1px solid var(--line);transition:background .15s,border-color .15s}
.adm-us-acoes:hover{background:#fff;border-color:#CFDAE6}
.adm-us-acoes .icobtn{width:30px;height:30px;border-radius:8px}
@media (max-width:720px){
  .adm-us-login{font-size:11px}
}

/* ---------- convite (mensagem pro WhatsApp) ---------- */
.conv-label{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:6px}
.conv-wa{margin:0;background:#E6FFDD;color:#111B21;border-radius:12px 12px 12px 4px;
  padding:14px 15px;font:13px/1.6 "Segoe UI",system-ui,sans-serif;white-space:pre-wrap;
  word-break:break-word;max-height:38vh;overflow:auto;border:1px solid #D1E7C8;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.conv-dica{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:var(--soft)}
.conv-dica svg{color:var(--ok);flex:none}
/* duas colunas: imagem à esquerda, mensagem à direita (modal largo) */
.modal.conv-modal{max-width:900px}
.conv-duas{display:grid;grid-template-columns:330px minmax(0,1fr);gap:20px;align-items:start}
.conv-col{min-width:0}
.conv-prev{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px;
  display:grid;place-items:center;min-height:200px;overflow:hidden}
.conv-prev canvas{display:block;width:100%;height:auto;border-radius:12px;
  box-shadow:0 10px 26px rgba(15,26,46,.20)}
.conv-prev-load{font-size:12px;color:var(--soft);padding:60px 10px;text-align:center}
.conv-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.conv-btns .btn{flex:1;justify-content:center;min-width:0}
.conv-4k{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:9px;
  font-weight:800;letter-spacing:.4px;color:#0E7490;background:rgba(14,116,144,.12)}
.conv-wa{max-height:46vh}
@media (max-width:820px){
  .modal.conv-modal{max-width:min(520px,96vw)}
  .conv-duas{grid-template-columns:1fr}
  .conv-prev{max-width:340px;margin:0 auto}
}
@media (max-width:560px){
  .conv-wa{font-size:12.5px;padding:12px;max-height:32vh}
  .m-rodape .btn{flex:1;justify-content:center}
}

/* ---------- cargos (supervisor / desenvolvedor) ---------- */
.tag.dev{background:rgba(39,184,216,.12);color:#0E7490;border:1px solid rgba(39,184,216,.32)}
.cargo-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cargo-opt{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:11px;background:#FBFCFE;cursor:pointer;transition:border .15s,background .15s}
.cargo-opt:hover{border-color:#CFDAE6}
.cargo-opt input{width:15px;height:15px;accent-color:var(--info);margin-bottom:2px}
.cargo-opt b{font-size:13px;color:var(--navy)}
.cargo-opt span{font-size:11px;color:var(--soft);line-height:1.45;font-weight:500}
.cargo-opt:has(input:checked){border-color:var(--info);background:var(--info-bg)}
.cargo-opt.dev:has(input:checked){border-color:var(--brand);background:rgba(39,184,216,.1)}
.cargo-opt.dev input{accent-color:var(--brand)}
@media (max-width:560px){ .cargo-opcoes{grid-template-columns:1fr} }

/* ---------- gerador de senha (modais de acesso) ---------- */
.senha-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-3px}
.senha-bar .forca{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.forca-b{width:84px;height:6px;border-radius:999px;background:var(--gray-bg);overflow:hidden}
.forca-b i{display:block;height:100%;width:0;border-radius:999px;background:var(--soft);
  transition:width .25s,background .25s}
.forca[data-n="1"] .forca-b i{width:25%;background:var(--bad)}
.forca[data-n="2"] .forca-b i{width:50%;background:var(--warn)}
.forca[data-n="3"] .forca-b i{width:75%;background:var(--info)}
.forca[data-n="4"] .forca-b i{width:100%;background:var(--ok)}
/* no celular o medidor desce para a linha de baixo (botões ocupam a 1ª) */
@media (max-width:560px){
  .senha-bar .forca{margin-left:0;width:100%;justify-content:flex-end}
}

/* ---------- toast ---------- */
#toast{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:9px}
.tst{background:var(--navy);color:#fff;border-radius:12px;padding:13px 17px;font-size:13px;font-weight:600;
  box-shadow:0 8px 26px rgba(15,26,46,.35);display:flex;gap:10px;align-items:center;animation:mup .2s;max-width:380px}
.tst svg{flex:none}
.tst.ok{background:var(--ok)}.tst.warn{background:var(--warn)}.tst.bad{background:var(--bad)}

/* ---------- alertas ---------- */
.al-row td{font-size:12.5px}
.al-nivel{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;letter-spacing:.3px;
  padding:3px 10px;border-radius:999px}
.al-nivel.critico{background:var(--bad-bg);color:var(--bad)}
.al-nivel.alerta{background:var(--warn-bg);color:var(--warn)}
.al-nivel.planejar{background:var(--info-bg);color:var(--info)}
.al-nivel.ok{background:var(--ok-bg);color:var(--ok)}
.al-nivel.info{background:var(--gray-bg);color:var(--gray)}
.al-chk{width:36px;text-align:center}
.al-chk input{width:15px;height:15px;accent-color:var(--info);cursor:pointer}
.al-msg{font-weight:600;color:var(--ink)}
.al-row.naoLido{background:#F5FBFF}
.al-row.naoLido .al-msg{font-weight:800}

/* ---------- WhatsApp: painel p/ supervisor ---------- */
.wa-wrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;align-items:start}
@media(max-width:760px){.wa-wrap{grid-template-columns:1fr}}
.wa-prev{border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(15,26,46,.28),0 2px 6px rgba(15,26,46,.18);
  border:1px solid var(--line);background:#0E1930;position:relative}
.wa-prev canvas{width:100%;height:auto;display:block}
.wa-prev .stamp{position:absolute;top:10px;left:10px;background:rgba(37,211,102,.92);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.6px;padding:4px 10px;border-radius:999px;display:flex;gap:5px;align-items:center}
.wa-lado{display:flex;flex-direction:column;gap:10px}
.wa-lado label{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.wa-cont{display:flex;gap:8px;align-items:center}
.wa-cont select{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;
  font-weight:600;color:var(--navy);background:#FBFCFE}
.wa-cont select:focus{outline:none;border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.16)}
#waBoxNovo{background:var(--bg);border:1.5px dashed #B9C8D8;border-radius:11px;padding:12px;
  display:flex;flex-direction:column;gap:8px;animation:vin .25s ease-out}
#waBoxNovo input{border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;
  font-weight:600;color:var(--navy);background:#fff;width:100%}
#waBoxNovo input:focus{outline:none;border-color:var(--wa)}
.wa-msg{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font-size:12.5px;
  font-weight:500;color:var(--ink);background:#FBFCFE;resize:vertical;min-height:150px;line-height:1.55}
.wa-msg:focus{outline:none;border-color:var(--wa);background:#fff;box-shadow:0 0 0 3px rgba(37,211,102,.14)}
.wa-acts{display:flex;gap:9px;flex-wrap:wrap}
.wa-dica{font-size:11.5px;color:var(--muted);line-height:1.55}

/* ---------- ações ---------- */
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ---------- footer (minimalista: logo FAG + copyright) ---------- */
footer{margin-top:48px;position:relative;flex:none;
  background:radial-gradient(800px 300px at 90% -80px,rgba(39,184,216,.14),transparent 60%),
             linear-gradient(180deg,#16233C 0%,#101A2E 100%)}
footer::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,transparent,var(--brand) 25%,#8FE3F5 50%,var(--brand) 75%,transparent)}
footer .f-simples{max-width:1220px;margin:0 auto;padding:30px 22px 26px;
  display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
footer .f-logo{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:12px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 22px rgba(0,0,0,.28);
  transition:transform .2s,box-shadow .25s}
footer .f-logo:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.36)}
footer .f-logo svg{height:38px;width:auto;display:block}
footer .f-copy{font-size:12px;color:#8FA5C4;letter-spacing:.3px;line-height:1.6}
footer .f-copy b{color:#D7E4F4;font-weight:800}
.aviso-erro{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:12px 16px;
  font-size:13px;font-weight:600;margin-top:14px;display:none;align-items:center;gap:9px}
@media(max-width:760px){
  .topo{padding:14px 18px 0}
  .nav{margin:0 -18px;padding:6px 18px 10px;overflow-x:auto}
  main{padding:18px 14px 50px}
  .mgrid{grid-template-columns:1fr}
  .topo .pill{display:none}
  .mapa-grid{grid-template-columns:1fr}
  .adm-grid{grid-template-columns:1fr}
}

/* =====================================================================
   NOVIDADES · login administrativo · relatórios · combustível ·
   vencimentos · admin — mesmo design system da ferramenta
   ===================================================================== */

/* ---------- gate: sem sessão, NADA do painel aparece ---------- */
body.sem-sessao header.topo,
body.sem-sessao main,
body.sem-sessao footer,
body.sem-sessao #alertBar{display:none !important}
.auth{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;overflow:auto;padding:30px 16px;
  background:
    radial-gradient(1100px 640px at 12% -12%, rgba(58,198,228,.22), transparent 62%),
    radial-gradient(900px 620px at 106% 110%, rgba(37,99,235,.20), transparent 58%),
    linear-gradient(160deg,#0A1424 0%,#0F1E34 52%,#0B1728 100%);
  background-size:170% 170%;animation:authBg 22s ease-in-out infinite alternate}
@keyframes authBg{from{background-position:0% 0%}to{background-position:100% 100%}}
/* malha sutil ao fundo (dá profundidade sem distrair) */
.auth::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;animation:authGrid 60s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%)}
@keyframes authGrid{from{background-position:0 0}to{background-position:44px 88px}}
/* entrada em camadas: logo → título → campos → botão */
@keyframes authUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.auth-card>*{animation:authUp .5s cubic-bezier(.2,.9,.3,1) backwards}
.auth-logo{animation-delay:.02s}
.auth-card h2{animation-delay:.09s}
.auth-sub{animation-delay:.16s}
#authBox{animation-delay:.23s}
.auth-seg{animation-delay:.34s}
.auth-card{position:relative;width:min(440px,94vw);background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:34px 32px 24px;text-align:center;overflow:hidden;
  box-shadow:0 34px 90px rgba(2,8,18,.6),0 2px 6px rgba(2,8,18,.28),inset 0 1px 0 #fff;
  animation:authIn .34s cubic-bezier(.2,.9,.3,1.06)}
@keyframes authIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* filete de topo na cor da marca */
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand2) 42%,var(--navy3))}
.auth-logo{display:flex;justify-content:center;margin-bottom:18px;position:relative}
.auth-logo::before{content:"";position:absolute;width:112px;height:58px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(39,184,216,.26),transparent)}
.auth-logo svg{position:relative;animation:authFloat 6s ease-in-out infinite}
@keyframes authFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* selo de HTTPS: tranquiliza o supervisor de que o acesso é criptografado */
.auth-seg{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:11px;font-weight:600;color:var(--soft)}
.auth-seg svg{color:var(--ok)}
.auth-card h2{font-size:24px;font-weight:800;letter-spacing:-.2px;color:var(--navy);margin:0 0 9px}
.auth-sub{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--soft);
  background:rgba(27,42,74,.035);border:1px solid var(--line);border-radius:20px;padding:4px 11px;
  margin-bottom:20px}
.auth-setup-tag{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;color:var(--warn);background:rgba(217,119,6,.09);border:1px solid rgba(217,119,6,.35);
  border-radius:10px;padding:8px 12px;margin-bottom:14px}
/* campos do login: rótulo legível + caixa compacta com ícone à esquerda */
.acampo{display:block;text-align:left;margin:0 0 12px}
.acampo-txt{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.acampo-box{position:relative;display:block}
.acampo-box svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#A9B6C7;
  width:17px;height:17px;pointer-events:none;transition:color .18s}
.acampo-box:hover svg{color:var(--muted)}
.acampo-box:focus-within svg{color:var(--brand)}
.acampo input{width:100%;margin-top:5px;padding:10px 12px;font-size:14px;border:1.5px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink);outline:none;transition:border .15s, box-shadow .15s, background .15s}
.acampo-box input{margin-top:0;padding:11px 13px 11px 40px;font-size:14.5px;border-radius:11px;background:#FCFDFF}
.acampo input:hover{border-color:#CFDAE6}
.acampo-box input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(39,184,216,.13)}
.acampo input::placeholder{color:#B6C2D0}
/* botão olho (mostrar/ocultar senha) dentro do campo */
.acampo-olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;
  background:none;color:#A9B6C7;cursor:pointer;transition:color .15s,background .15s}
.acampo-olho:hover{color:var(--navy);background:rgba(27,42,74,.06)}
.acampo-olho:focus-visible{outline:2px solid rgba(39,184,216,.5);outline-offset:1px}
.acampo-box:has(.acampo-olho) input{padding-right:40px}
/* aviso de Caps Lock */
.auth-caps{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;font-weight:700;
  color:var(--warn)}
.auth-caps svg{color:var(--warn)}
/* opções: manter conectado + esqueci a senha */
.auth-opcoes{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:2px 0 0}
.auth-check{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);cursor:pointer;
  font-weight:600;user-select:none}
.auth-check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.auth-esqueci{font-size:11px;color:var(--soft);font-weight:600}
/* animação de sucesso */
.auth-ok{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px;
  animation:authOk .5s cubic-bezier(.2,.9,.3,1.15)}
.auth-ok svg{color:var(--ok);animation:authPop .5s cubic-bezier(.2,.9,.3,1.4)}
.auth-ok b{font-size:17px;color:var(--navy)}
.auth-ok span{font-size:12.5px;color:var(--soft)}
@keyframes authOk{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes authPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
/* contagem do bloqueio */
.auth-erro .auth-bloq{display:flex;align-items:center;gap:8px;justify-content:flex-start}
.auth-erro .auth-bloq b{font-variant-numeric:tabular-nums;font-size:14px}
.auth-erro .auth-bloq svg{color:var(--warn)}
/* marca d'água (caminhão) atrás do card */
.auth-marca{position:fixed;right:-70px;bottom:-60px;width:560px;opacity:.05;pointer-events:none;
  transform:rotate(-7deg);z-index:0}
.auth-marca svg{width:100%;height:auto;color:#fff;stroke-width:1.2}
.auth-card{position:relative;z-index:1}
/* botão ENTRAR: gradiente com brilho, linha de luz na marca e respiro */
.auth-btn.btn-p{background:linear-gradient(180deg,#31477A 0%,#22365F 48%,#1A2A4C 100%);
  border-radius:12px;box-shadow:0 8px 20px rgba(16,30,56,.26),inset 0 1px 0 rgba(255,255,255,.16)}
.auth-btn.btn-p:hover{background:linear-gradient(180deg,#3A548C 0%,#283D6A 48%,#1E2F55 100%);
  box-shadow:0 12px 28px rgba(16,30,56,.34),inset 0 1px 0 rgba(255,255,255,.22)}
/* filete de luz na cor da marca (dá o "vital" sem parecer neon) */
.auth-btn::before{content:"";position:absolute;left:16%;right:16%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(58,198,228,.95),transparent)}
.auth-btn{position:relative;overflow:hidden;width:100%;justify-content:center;margin-top:18px;
  font-size:14.5px;font-weight:700;letter-spacing:.02em;padding:14px 20px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1),box-shadow .22s,background .22s}
.auth-btn:hover{transform:translateY(-1.5px);filter:brightness(1.05)}
.auth-btn:active{transform:translateY(1px) scale(.995)}
.auth-btn:focus-visible{outline:3px solid rgba(39,184,216,.45);outline-offset:3px}
/* brilho que "passa" pelo botão ao passar o mouse */
.auth-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);pointer-events:none}
.auth-btn:hover::after{animation:authSheen .8s ease-out}
@keyframes authSheen{from{left:-70%}to{left:135%}}
.auth-btn:disabled{opacity:.92;cursor:wait;transform:none!important;filter:none;
  box-shadow:0 2px 0 #101E38}
.auth-btn.carregando{background:linear-gradient(180deg,var(--navy3),var(--navy))}
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.32);border-top-color:#fff;
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* tremor no erro: o supervisor sente o "não" na hora */
@keyframes authShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.auth-erro.shake{animation:authShake .42s cubic-bezier(.36,.07,.19,.97)}
/* respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion:reduce){
  .auth,.auth::before,.auth-logo svg,.auth-card,.auth-card>*,#authBox *,
  .auth-btn::after,.spinner,.auth-erro.shake{animation:none!important}
}
.auth-links{margin-top:12px;display:flex;justify-content:center}
.alink{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--soft);padding:6px 10px;border-radius:8px}
.alink:hover{background:rgba(27,42,74,.06);color:var(--navy)}
.auth-erro{color:#8F2C1E;font-size:13px;font-weight:600;margin-top:14px;min-height:16px}
/* aviso com borda vermelha e selo "!" — bem menos agressivo que a caixa rosa cheia */
.auth-erro:not(:empty){display:flex;align-items:center;gap:10px;text-align:left;
  background:linear-gradient(90deg,rgba(192,57,43,.10),rgba(192,57,43,.03));
  border:1px solid rgba(192,57,43,.16);border-left:3px solid var(--bad);
  border-radius:10px;padding:11px 14px;margin-top:14px;animation:mpop .18s ease-out}
.auth-erro:not(:empty)::before{content:"!";flex:none;width:19px;height:19px;border-radius:50%;
  background:var(--bad);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;
  line-height:1;box-shadow:0 2px 5px rgba(192,57,43,.35)}
.auth-dica{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:11px;color:var(--soft);
  background:rgba(27,42,74,.05);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:4px 0 12px}
.auth-aviso{font-size:12px;font-weight:600;color:var(--navy);background:rgba(39,184,216,.1);
  border:1px solid rgba(39,184,216,.35);border-radius:10px;padding:9px 12px;margin-bottom:14px;
  display:flex;gap:7px;align-items:center;justify-content:center;text-align:left}
.auth-nota{font-size:10.5px;color:var(--soft);margin-top:16px;line-height:1.5}
.auth-copy{font-size:11px;color:rgba(220,231,243,.55)}

/* chip do usuário logado (topo) */
.navright{display:flex;align-items:center;gap:8px;margin-left:auto;padding:0}
/* nome + avatar são um botão só: abre "Minha conta" (foto e senha) */
.u-minha{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;
  border-radius:22px;padding:2px 10px 2px 2px;cursor:pointer;min-width:0;transition:background .15s,border-color .15s}
.u-minha:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}
.u-ava{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;  background:linear-gradient(145deg,#1E3358,#142443);color:#5FD7F2;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden}
.u-ava img,.adm-us-av img,.perfil-ava img{width:100%;height:100%;object-fit:cover;display:block}
.u-nome{display:flex;flex-direction:column;line-height:1.2;min-width:0;max-width:190px}
.u-nome b{font-size:12.5px;color:#F3F8FE;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}   /* chip vive no .topo ESCURO: nunca var(--navy) aqui (some no fundo) */
.u-nome i{font-style:normal;font-size:10px;color:rgba(220,231,243,.5);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* botão de sair discreto: não pode competir com o nome */
.navright .icobtn{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);color:rgba(230,240,250,.75);flex:none}
.navright .icobtn:hover{background:rgba(192,57,43,.16);border-color:rgba(192,57,43,.45);color:#FFB4A8}
/* ---------- cabeçalho da lista de veículos ---------- */
.frota-cab{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:6px 0 16px;
  padding:12px 15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.frota-cab-ico{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#EAF8FC,#fff);border:1px solid rgba(39,184,216,.28);color:var(--brand)}
.frota-cab-ico svg{width:20px;height:20px}
.frota-cab h2{font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.frota-cab .mini{font-size:11.5px;color:var(--soft);margin:2px 0 0;line-height:1.3}
.frota-badge{font-size:11px;font-weight:800;color:var(--brand);background:var(--brand-bg);
  border:1px solid rgba(39,184,216,.3);padding:1px 8px;border-radius:999px}
.frota-cab-dir{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filtro-grupo{display:flex;align-items:center;gap:7px;padding:3px 6px 3px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--soft);transition:border-color .15s,box-shadow .15s}
.filtro-grupo:hover,.filtro-grupo:focus-within{border-color:rgba(39,184,216,.5);box-shadow:0 0 0 3px rgba(39,184,216,.12)}
.filtro-grupo select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-size:12.5px;font-weight:600;color:var(--ink);padding:5px 20px 5px 2px;outline:none;max-width:200px;
  cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                    linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%, calc(100% - 8px) 52%;
  background-size:4px 4px, 4px 4px;background-repeat:no-repeat}
.filtro-grupo select:focus{outline:none}
/* campo de data dentro do mesmo grupo */
.filtro-grupo input[type=date]{border:0;background:transparent;font-size:12.5px;font-weight:600;
  color:var(--ink);padding:5px 2px;outline:none;cursor:pointer}
.frota-cab .btn{border-radius:10px}
.frota-cab .btn-s{background:var(--brand-bg);border-color:rgba(39,184,216,.35);color:#12657F;font-weight:700}
.frota-cab .btn-s:hover{background:#DBF2F9;border-color:var(--brand)}
@media (max-width:640px){
  .frota-cab-dir{width:100%;margin-left:0}
  .filtro-grupo{flex:1}
  .filtro-grupo select{max-width:none;width:100%}
}

/* ---------- lista de arquivos exportados ---------- */
.exp-arquivos{display:grid;gap:6px;margin-top:6px}
.exp-arq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 11px;border-radius:10px;
  background:var(--gray-bg);border:1px solid var(--line);font-size:12.5px}
.exp-arq b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--navy)}
.exp-arq span{color:var(--soft);font-size:11.5px}
.exp-arq .btn{margin-left:auto}

/* ---------- PAINEL "AGORA" ---------- */
.agora-cab{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.agora-cab h2{font-size:17px;color:var(--navy);display:flex;align-items:center;gap:8px}
.agora-cab .desc{font-size:12.5px;color:var(--muted);margin-top:3px;max-width:720px}
/* horário da tela: etiqueta separada no canto (antes grudava no fim da
   frase e parecia que os veículos tinham sido atualizados naquele minuto) */
.agora-stamp{display:inline-flex;align-items:center;gap:6px;align-self:center;
  font-size:11.5px;font-weight:600;color:var(--soft);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.agora-stamp svg{flex:none;opacity:.8}
.agora-acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ag-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.ag-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.ag-card b{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}
.ag-card span{font-size:12px;color:var(--muted);font-weight:600}
.ag-card small{font-size:11px;color:var(--soft)}
.ag-card.ok{border-left:4px solid var(--ok)}
.ag-card.warn{border-left:4px solid var(--warn)}
.ag-card.info{border-left:4px solid var(--info)}
.ag-card.gray{border-left:4px solid var(--gray)}
.ag-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.ag-st i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.ag-st.ok{color:var(--ok)} .ag-st.warn{color:var(--warn)} .ag-st.info{color:var(--info)} .ag-st.gray{color:var(--gray)}
.ag-sub{font-size:11.5px;color:var(--soft);margin-top:2px}
.ag-end{font-size:12px;color:var(--muted);max-width:280px}
/* Alertas de hoje: caixas com RESPIRO — o texto encostava no ícone e nas
   bordas, e a linha de base ficava torta. Padding maior, gap claro entre
   ícone e texto, entre uma linha e outra e entre uma caixa e outra. */
.ag-alertas{display:grid;gap:10px;margin-top:12px}
.ag-alerta{display:flex;align-items:flex-start;gap:11px;padding:12px 15px;border-radius:11px;
  font-size:13px;line-height:1.55;background:var(--warn-bg);color:var(--warn);
  border:1px solid rgba(212,130,10,.25)}
.ag-alerta.critico{background:var(--bad-bg);color:var(--bad);border-color:rgba(192,57,43,.25)}
.ag-alerta > svg{flex:none;margin-top:2px}
.ag-alerta > span{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* ---------- cronômetro de uso ---------- */
.u-tempo{display:inline-flex;align-items:center;gap:5px;flex:none;padding:4px 9px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  color:rgba(220,231,243,.72);font-size:11px}
.u-tempo svg{color:rgba(95,215,242,.9)}
.u-tempo b{color:#E8F2FB;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.u-tempo.aviso{background:rgba(212,130,10,.16);border-color:rgba(212,130,10,.40)}
.u-tempo.aviso b{color:#FFD79A}
.u-tempo.urgente{background:rgba(192,57,43,.18);border-color:rgba(192,57,43,.45);animation:pulsa 1.6s ease-in-out infinite}
.u-tempo.urgente b{color:#FFC0B4}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.62}}
/* erro de sincronização por empresa (v6): visível no card, sem mistério */
.sync-erro{display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:7px 10px;border-radius:9px;
  font-size:12px;line-height:1.35;color:#8A2418;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.22)}
.sync-erro svg{flex:none;margin-top:1px;color:#C0392B}
.vcard-venc.n-bad{background:rgba(192,57,43,.035)}
.tag.warn{background:#FFF4DF;color:#8A5A00}

/* supervisor não vê os painéis internos (contas, dados, sincronização) */
#v-admin.sem-dev .p-dev{display:none}
#v-admin.sem-dev .painel{padding:0}
#v-admin.sem-dev #admMeuPerfil{padding:18px 20px}

/* ---------- MINHA CONTA (foto + senha) ---------- */
.perfil-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.perfil-ava{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;
  background:linear-gradient(145deg,var(--brand),#1B4E7A);box-shadow:0 4px 14px rgba(10,30,60,.18)}
.perfil-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.perfil-info>b{font-size:15.5px;color:var(--navy)}
.perfil-user{font-size:12px;color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.perfil-sess{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--soft);margin-top:2px}
.cargo-tag{display:inline-block;width:max-content;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  padding:2px 8px;border-radius:20px;text-transform:uppercase}
.cargo-tag.sup{background:#E8F4FB;color:#14628C}
.cargo-tag.dev{background:#F1E9FB;color:#6A3FA0}
.perfil-foto-btns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.perfil-div{height:1px;background:var(--line);margin:16px 0 4px}
@media (max-width:620px){
  .u-nome i{display:none}
  .u-nome{max-width:120px}
}

/* ---------- sub-abas dos relatórios ---------- */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.subtabs button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);
  background:var(--card);color:var(--soft);font-size:12px;font-weight:700;padding:8px 15px;
  border-radius:12px;cursor:pointer;transition:all .15s}
.subtabs button:hover{border-color:var(--brand);color:var(--navy)}
.subtabs button.on{background:linear-gradient(145deg,#1B2A4A,#24365C);border-color:#1B2A4A;color:#fff;
  box-shadow:0 4px 14px rgba(27,42,74,.25)}
.subview{display:none}
.subview.on{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- mapa de calor ---------- */
.mapa-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.mapabox{position:relative;background:transparent;padding:0;border-radius:16px;overflow:hidden}
.mapabox canvas{border-radius:16px;display:block;touch-action:none;cursor:grab}
.mapabox canvas.arrastando{cursor:grabbing}
/* mapa do Google (modo principal) — o canvas fica escondido como plano B */
.gmap{display:none;width:100%;height:440px;background:#0B1626}
.mapabox.modo-g .gmap{display:block}
.mapabox.modo-g canvas,.mapabox.modo-g .mapa-ctrls{display:none}
.grot{background:rgba(6,14,26,.92);padding:2px 6px;border:1px solid rgba(60,198,228,.30);
  border-radius:7px;font:700 10px 'Segoe UI',system-ui!important;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sv-info{font:12px 'Segoe UI',system-ui;color:#31445f;min-width:190px;max-width:270px}
.sv-info b{display:block;font-size:12.5px;margin-bottom:3px;color:#12233f}
.sv-info i{font-style:normal;display:block;font-size:11.5px;color:#4a5b78;margin-bottom:2px}
.sv-info a{display:inline-block;margin-top:6px;font-weight:700;font-size:11.5px;color:#1a7f9b;text-decoration:none}
.sv-info a:hover{text-decoration:underline}
.mapa-ctrls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:3}
.mapa-ctrls button{min-width:30px;height:30px;padding:0 7px;border-radius:9px;cursor:pointer;
  background:rgba(8,16,30,.86);border:1px solid rgba(60,198,228,.30);color:#DCE7F3;
  font-weight:800;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.mapa-ctrls button:hover{background:rgba(16,38,68,.95);border-color:rgba(60,198,228,.65)}
.mapa-ctrls .sv{width:auto;font-size:10.5px;letter-spacing:.02em}
.sv-box iframe{display:block;width:100%;height:min(60vh,460px);border:0;border-radius:12px;background:#0B1626}
.sv-rod{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
  font-size:11.5px;color:var(--soft)}
.sv-rod span{flex:1;min-width:0}
.sv-rod .btn{flex:none}
.mtop{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 8px}
.mtop h3{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--navy);margin:0 0 10px}
.mtop-list{display:flex;flex-direction:column}
.mtop-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid rgba(27,42,74,.07)}
.mtop-item:first-child{border-top:none}
.mtop-item .pos{width:22px;height:22px;border-radius:7px;background:rgba(27,42,74,.07);color:var(--navy);
  font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.mtop-item .mt-end{flex:1;min-width:0}
.mtop-item .mt-end b{display:block;font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mtop-item .mt-end i{font-style:normal;font-size:10px;color:var(--soft)}
.mtop-item .h{font-size:11.5px;font-weight:800;color:var(--navy);flex:none}

/* ---------- vencimentos ---------- */
.venc-lista{display:flex;flex-direction:column;gap:10px}
.vcard-venc{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--ok);border-radius:14px;padding:13px 16px;transition:box-shadow .15s}
.vcard-venc:hover{box-shadow:var(--shadow)}
.vcard-venc.n-bad{border-left-color:var(--bad)}
.vcard-venc.n-warn{border-left-color:var(--warn)}
.vcard-venc.n-info{border-left-color:var(--info)}
.vcard-venc.n-ok{border-left-color:var(--ok)}
.vc-ico{width:42px;height:42px;border-radius:12px;background:rgba(27,42,74,.06);color:var(--navy);
  display:flex;align-items:center;justify-content:center;flex:none}
.vcard-venc.n-bad .vc-ico{background:rgba(220,38,38,.1);color:var(--bad)}
.vcard-venc.n-warn .vc-ico{background:rgba(217,119,6,.12);color:var(--warn)}
.vcard-venc.n-info .vc-ico{background:rgba(3,105,161,.1);color:var(--info)}
.vc-corpo{flex:1;min-width:0}
.vc-linha1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vc-linha1 b{font-size:13.5px;color:var(--navy)}
.vc-veic{font-size:11px;color:var(--soft);font-weight:600}
.vc-desc{font-size:12px;color:var(--ink);margin:2px 0}
.vc-linha2{font-size:11px;color:var(--soft)}
.vc-acoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- admin ---------- */
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.adm-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink);margin:3px 0}
.adm-linha.mini{font-size:11px;color:var(--soft)}

/* ---------- sincronização (API WESO) ---------- */
.sync-prog{margin-top:9px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:9px 12px}
.sync-prog-linha{font-size:12px;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sync-prog-linha svg{color:var(--info)}
.sync-barra{height:5px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.sync-barra i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--info),#7DB4FF,var(--info));
  animation:syncSlide 1.1s ease-in-out infinite}
@keyframes syncSlide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.sinc-gira{animation:sincGira 1.1s linear infinite}
@keyframes sincGira{to{transform:rotate(360deg)}}
.nav button.sinc svg{color:var(--info);animation:sincGira 1.1s linear infinite}
#navBadgSync{color:var(--info);font-size:14px;animation:pisca 1s ease-in-out infinite}
@keyframes pisca{50%{opacity:.25}}

/* =====================================================================
   TAREFAS · FAG — as telas deste sistema (o design system acima é o mesmo
   do Controle de Km; aqui só entram os blocos de tarefa, agenda, conversa).
   ===================================================================== */

/* ---------- cabeçalho de cada visão ---------- */
.t-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.t-cab h2{font-size:17px;color:var(--navy);display:flex;align-items:center;gap:8px}
.t-cab h2 svg{color:var(--navy3)}
.t-cab .desc{font-size:12.5px;color:var(--muted);margin-top:3px;max-width:720px;line-height:1.5}

/* ---------- formulário de tarefa (modal) ---------- */
/* select do formulário: seta própria à direita, foco por dentro (inset) e
   opções com respiro — o navegador deixa a LISTA aberta com a cara do
   sistema, mas o campo fechado é 100% nosso */
.t-campo select,.t-filtros select,.det-grid select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;cursor:pointer}
.t-campo select:hover,.t-filtros select:hover{border-color:var(--brand)}
.t-campo select option,.t-filtros select option{padding:9px 11px;color:var(--ink);background:#fff;font-size:13px}
.t-campo select option:checked,.t-filtros select option:checked{
  background:linear-gradient(0deg,var(--brand-bg),var(--brand-bg));color:#0E7490;font-weight:700}
.t-campo select:focus,.t-filtros select:focus{
  border-color:var(--brand);box-shadow:inset 0 0 0 2px rgba(39,184,216,.28);background-color:#fff}
/* grade de 2 colunas com rótulo ACIMA do campo: o grid antigo (.mgrid) usava
   o <label> como item e a dica caía numa terceira coluna sem lugar —
   ficava tudo desalinhado. Aqui cada campo é uma caixa e a dica fica fora. */
/* grade do formulário: 2 colunas, MAS a última linha pode ocupar a largura
   toda (ex.: as etiquetas). Com 2 colunas fixas sobrava uma coluna vazia e a
   nota de rodapé acabava espremida embaixo dos botões. */
.t-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px 18px;align-items:start}
.t-form>.t-detalhe{grid-column:1/-1}
.t-campo{display:flex;flex-direction:column;min-width:0}
.t-campo.largo{grid-column:1/-1}
.t-campo label{font-size:10.5px;font-weight:800;color:var(--navy3);letter-spacing:.5px;text-transform:uppercase;
  display:flex;align-items:baseline;gap:6px;margin-bottom:5px;line-height:1.2}
.t-campo label i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--soft);
  text-transform:none;letter-spacing:0}
.t-campo input,.t-campo select,.t-campo textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;
  padding:8px 12px;font-size:13.5px;font-weight:500;background-color:#FCFDFF;color:var(--ink);outline:none;
  transition:border .15s, box-shadow .15s, background-color .15s;min-height:40px}
/* textareas mais compactos: o formulário inteiro precisa caber na tela
   para a nota de rodapé e os botões aparecerem SEM precisar rolar */
.t-campo textarea{font-weight:500;resize:vertical;min-height:64px;line-height:1.5;font-size:12.5px;
  padding:8px 11px}
.t-campo textarea.alto{min-height:72px}
.t-campo select[multiple]{min-height:42px;padding:6px 10px}
.t-campo select[multiple]:focus{background:#fff}
.t-campo input::placeholder,.t-campo textarea::placeholder{color:#B6C2D0}
.t-campo input:hover,.t-campo select:hover,.t-campo textarea:hover{border-color:#CFDAE6}
.t-campo input:focus,.t-campo select:focus,.t-campo textarea:focus{
  border-color:var(--info);background-color:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.t-campo input[type=datetime-local]{font-variant-numeric:tabular-nums}
/* ---------- barra de botões do modal ----------
   Fica GRUDADA no fim (sticky) e tem fundo próprio. O corpo do modal ganha
   uma folga no rodapé igual à altura da barra, senão a última informação
   (a nota de rodapé) fica escondida ATRÁS dos botões — era o que acontecia
   com o aviso de "tempo real medido sozinho". */
.m-rodape{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px -22px -22px;
  padding:14px 22px;border-top:1px solid var(--line);background:#FBFCFE;
  border-radius:0 0 18px 18px;position:sticky;bottom:0;z-index:3;
  box-shadow:0 -8px 18px -12px rgba(27,42,74,.28)}
.m-rodape .btn{flex:none}
/* espaço extra: a barra tem ~60px — o corpo precisa desse mesmo vão */
.modal:has(.m-rodape) .m-corpo{padding-bottom:84px}
@media (max-height:760px){
  .modal:has(.m-rodape) .m-corpo{padding-bottom:76px}
  .t-campo textarea{min-height:74px}
  .t-detalhe textarea{min-height:70px}
}
/* interruptor (checkboxbonito) usado nos avisos */
.sw{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);
  background:#FCFDFF;border:1.5px solid var(--line);border-radius:11px;padding:10px 13px;
  min-height:40px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.sw:hover{border-color:#CFDAE6;background:#fff}
.sw input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;flex:none;margin:0}
.sw:has(input:checked){border-color:rgba(39,184,216,.5);background:var(--brand-bg);color:#0E7490}

/* co-responsáveis: botões em vez de <select multiple> (era "0 selecionados") */
.co-chips{display:flex;flex-wrap:wrap;gap:8px}
.co-chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;
  border-radius:999px;padding:5px 12px 5px 5px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:border-color .14s,background .14s,color .14s;max-width:100%;flex:0 0 auto}
.co-chip>*{flex:none}
.co-chip:hover{border-color:#CFDAE6;background:#FAFCFE}
.co-chip.on{border-color:rgba(39,184,216,.55);background:var(--brand-bg);color:#0E7490}
.co-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#1E3358,#142443);
  color:#5FD7F2;font-size:10px;font-weight:800;display:grid;place-items:center;flex:none}
.co-perfil{font-style:normal;font-size:9.5px;font-weight:700;color:var(--soft);
  border-left:1px solid var(--line);padding-left:7px;margin-left:2px;white-space:nowrap;flex:none}
.co-chip.on .co-perfil{color:#0E7490;border-left-color:rgba(39,184,216,.35)}
/* bloco que abre e fecha (checklist) */
.t-detalhe{border:1.5px solid var(--line);border-radius:11px;background:#FBFCFE;overflow:hidden}
.t-detalhe summary{display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:12px;font-weight:800;
  color:var(--navy3);text-transform:uppercase;letter-spacing:.4px;cursor:pointer;list-style:none}
.t-detalhe summary::-webkit-details-marker{display:none}
.t-detalhe summary::after{content:"▾";margin-left:auto;color:var(--soft);font-size:14px}
.t-detalhe[open] summary::after{content:"▴"}
.t-detalhe summary i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--soft);
  text-transform:none;letter-spacing:0}
.t-detalhe summary svg{color:var(--navy3)}
.t-detalhe textarea{width:calc(100% - 26px);margin:0 13px 13px;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12.5px;min-height:88px;resize:vertical;outline:none;background:#fff;line-height:1.55}
.t-detalhe textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ---------- etiquetas ---------- */
.t-et{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  background:rgba(39,184,216,.10);color:#0E7490;border:1px solid rgba(39,184,216,.28);
  border-radius:999px;padding:3px 9px;max-width:100%;line-height:1.35}
.t-et svg{flex:none;opacity:.8}
.t-et.botao{padding-right:4px;gap:3px}
.t-et button{border:0;background:none;padding:2px;margin:0;border-radius:50%;cursor:pointer;
  color:inherit;opacity:.55;display:grid;place-items:center;flex:none;transition:opacity .12s,background .12s}
.t-et button:hover{opacity:1;background:rgba(192,57,43,.14);color:var(--bad)}
.t-et .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- filtros ---------- */
.t-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.t-filtros .busca-t{position:relative;flex:1;min-width:230px}
.t-filtros .busca-t svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:#A9B6C7;width:16px;height:16px;pointer-events:none}
.t-filtros .busca-t input{width:100%;padding:9px 12px 9px 37px;font-size:13px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);outline:none}
.t-filtros .busca-t input:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.t-filtros select{padding:9px 12px;font-size:12.5px;font-weight:600;border:1.5px solid var(--line);
  border-radius:10px;background-color:#fff;color:var(--ink);outline:none;min-width:150px}
.t-filtros select:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.t-resumo{font-size:12px;color:var(--muted);margin:0 0 12px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.t-resumo b{color:var(--navy);font-variant-numeric:tabular-nums}
/* contadores da lista como etiqueta (antes era texto solto e ficava torto) */
.rs-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--navy3);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;box-shadow:0 1px 2px rgba(27,42,74,.05)}
.rs-chip b{font-size:13px;color:var(--navy)}
.rs-chip svg{color:var(--soft)}
.rs-chip.rs-fixo{background:var(--brand-bg);border-color:rgba(39,184,216,.35);color:#0E7490}
.rs-chip.rs-fixo svg{color:#0E7490}
.rs-chip button{border:0;background:none;padding:0;margin-left:1px;cursor:pointer;color:inherit;display:grid;place-items:center}
.rs-chip button:hover{color:var(--bad)}
/* paginação: conjunto de botões entre ‹ e › */
.rs-chip.rs-pag{gap:4px;padding:3px 6px}
.rs-chip.rs-pag button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);
  background:#fff;color:var(--navy3);display:grid;place-items:center;cursor:pointer}
.rs-chip.rs-pag button:hover:not(:disabled){background:var(--info);border-color:var(--info);color:#fff}
.rs-chip.rs-pag button:disabled{opacity:.35;cursor:default}

/* ---------- lista de tarefas ---------- */
#tblTarefas tbody tr{cursor:pointer;transition:background .12s}
#tblTarefas tbody tr:hover{background:#F7FAFD}
#tblTarefas tbody tr.p-urgente td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
#tblTarefas tbody tr.p-alta td:first-child{box-shadow:inset 4px 0 0 var(--warn)}
#tblTarefas tbody tr.p-normal td:first-child{box-shadow:inset 4px 0 0 var(--info)}
#tblTarefas tbody tr.p-baixa td:first-child{box-shadow:inset 4px 0 0 var(--line)}
.t-cel-tit{min-width:250px}
.t-cel-tit b{display:block;font-size:13px;color:var(--navy);font-weight:700;line-height:1.35}
.t-cel-tit .t-meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:4px}
.t-cel-tit .t-desc{font-size:11.5px;color:var(--soft);margin-top:3px;max-width:520px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-et{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  background:rgba(39,184,216,.10);color:#0E7490;border:1px solid rgba(39,184,216,.28);
  border-radius:999px;padding:2px 8px}
.t-prazo b{display:block;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.t-prazo i{font-style:normal;font-size:10.5px;color:var(--soft)}
.t-prazo.atrasado b{color:var(--bad)}
.t-prazo.atrasado i{color:var(--bad);font-weight:700}
.t-prazo.today b{color:var(--warn)}
.t-prazo.today i{color:var(--warn);font-weight:700}
.t-prog{display:flex;align-items:center;gap:8px;min-width:96px}
.t-prog .barra{flex:1;min-width:54px}
.t-prog span{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.t-real{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--navy3);background:var(--info-bg);border-radius:999px;padding:3px 9px;white-space:nowrap}
.t-real.ativo{color:var(--warn);background:var(--warn-bg)}

/* ---------- cartões do painel ---------- */
.t-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.t-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px}
.t-card h3{font-size:13.5px;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:3px}
.t-card h3 svg{color:var(--navy3);flex:none}
.t-card .t-card-sub{font-size:11.5px;color:var(--soft);margin-bottom:9px}
.t-card.late{border-left:4px solid var(--bad)}
.t-card.today{border-left:4px solid var(--warn)}
.t-card.soon{border-left:4px solid var(--info)}
.t-card.done{border-left:4px solid var(--ok)}
.t-linha{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid rgba(27,42,74,.07)}
.t-linha:first-of-type{border-top:0}
.t-linha .t-l{flex:1;min-width:0}
.t-linha .t-l b{display:block;font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-linha .t-l .t-prazo-l{font-size:10.5px;color:var(--soft);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.t-linha .t-l .t-prazo-l .bad{color:var(--bad);font-weight:700}
.t-linha .t-l .t-prazo-l .warn{color:var(--warn);font-weight:700}
.t-linha .t-dir{flex:none;display:flex;align-items:center;gap:6px}
.t-linha .prio{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
.prio-urgente{background:var(--bad)} .prio-alta{background:var(--warn)}
.prio-normal{background:var(--info)} .prio-baixa{background:var(--soft)}

/* ---------- agenda ---------- */
.ag-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ag-cab .ag-tit{font-size:16px;font-weight:800;color:var(--navy);min-width:180px;text-align:center}
.ag-cont{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.ag-cab button.nb{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;
  transition:background .14s,transform .14s;flex:none}
.ag-cab button.nb:hover{background:#F2F6FB;transform:translateY(-1px)}
.ag-cab button.nb:disabled{opacity:.4;cursor:default;transform:none;background:#FAFBFD}
/* minmax(0,1fr) é o que segura as 7 colunas: com 1fr puro o texto longo dos
   eventos esticava a coluna e a semana inteira saía torta (dias de largura
   diferente e o cabeçalho SEG/TER... deixava de bater com os dias). */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cal .cal-dow{background:#F7F9FC;padding:9px 6px;text-align:center;font-size:10.5px;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:.6px;min-width:0}
.cal .cal-day{background:#fff;min-height:104px;padding:7px 8px 9px;display:flex;flex-direction:column;gap:4px;
  transition:background .12s;min-width:0;overflow:hidden}
.cal .cal-day.fora{background:#FAFBFD;color:var(--soft)}
.cal .cal-day.today{background:#F2F9FD;box-shadow:inset 0 0 0 2px rgba(39,184,216,.35)}
.cal .cal-day.sel{background:#EAF6FB;box-shadow:inset 0 0 0 2px var(--brand)}
.cal .cal-day:hover:not(.sel){background:#F7FAFD}
.cal .cal-num{font-size:11.5px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:5px;min-width:0}
/* botão "+" do dia: aparece ao passar o mouse (também serve no celular) */
.cal-add{margin-left:auto;width:20px;height:20px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--info);display:grid;place-items:center;cursor:pointer;flex:none;
  opacity:0;transition:opacity .12s,background .12s,transform .12s;padding:0}
.cal-add svg{width:11px;height:11px}
.cal-day:hover .cal-add{opacity:1}
.cal-add:hover{background:var(--info);border-color:var(--info);color:#fff;transform:scale(1.08)}
.cal-day.today .cal-add{opacity:1}
@media (hover:none){ .cal-add{opacity:.75} }
.cal .cal-day.fora .cal-num{color:var(--soft)}
.cal .cal-num .hoje-tag{font-size:9px;font-weight:800;color:#fff;background:var(--brand);
  border-radius:999px;padding:1px 6px;text-transform:uppercase;letter-spacing:.4px;flex:none}
.cal .cal-num .qtd{font-size:10px;font-weight:700;color:var(--info);
  background:var(--info-bg);border-radius:999px;padding:1px 7px;flex:none}
.cal-evt{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink);
  background:#F4F7FB;border-left:3px solid var(--info);border-radius:6px;padding:3px 6px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.cal-evt .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cal-evt:hover{background:#E9F1FA}
.cal-evt .h{color:var(--soft);font-weight:700;flex:none}
.cal-evt.p-urgente{border-left-color:var(--bad)}
.cal-evt.p-alta{border-left-color:var(--warn)}
.cal-evt.p-baixa{border-left-color:var(--soft)}
.cal-evt.feita{opacity:.55}
.cal-evt.feita .tx{text-decoration:line-through}
.cal-mais{font-size:10px;color:var(--info);font-weight:700;padding-left:4px;cursor:pointer}
.cal-mais:hover{text-decoration:underline}
.cal-lista{margin-top:16px}
.cal-lista .t-linha .prio{margin-top:4px}

/* ---------- detalhe da tarefa ---------- */
.det-cab{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.det-cab .det-t{flex:1;min-width:220px}
.det-cab .det-t h4{font-size:16.5px;color:var(--navy);line-height:1.35;font-weight:800}
.det-cab .det-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;align-items:center}
.det-desc{font-size:13px;color:var(--ink);line-height:1.6;white-space:pre-wrap;background:#FAFBFD;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
.det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.det-campo{background:#FAFBFD;border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.det-campo .l{font-size:10px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;
  display:flex;align-items:center;gap:5px}
.det-campo .v{font-size:13px;color:var(--navy);font-weight:700;margin-top:3px;word-break:break-word}
.det-campo .v small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.det-secao{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.det-secao h5{font-size:12.5px;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:9px;
  text-transform:none;letter-spacing:0}
.det-secao h5 svg{color:var(--navy3)}
.det-secao h5 .qtd{font-size:10.5px;font-weight:700;color:var(--muted);background:#F1F5F9;
  border-radius:999px;padding:2px 8px}

/* checklist */
.chk-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;
  border:1px solid transparent;transition:background .12s}
.chk-item:hover{background:#F7FAFD;border-color:var(--line)}
.chk-item input{width:17px;height:17px;accent-color:var(--ok);margin-top:1px;flex:none;cursor:pointer}
.chk-item .ci-t{flex:1;min-width:0;font-size:12.5px;color:var(--ink);line-height:1.5;word-break:break-word}
.chk-item.feito .ci-t{color:var(--soft);text-decoration:line-through}
.chk-item .ci-q{font-size:10.5px;color:var(--soft);margin-top:2px}
.chk-item .ci-x{opacity:0;border:0;background:none;color:var(--soft);cursor:pointer;padding:2px;border-radius:6px;flex:none}
.chk-item:hover .ci-x{opacity:1}
.chk-item .ci-x:hover{color:var(--bad);background:var(--bad-bg)}
.chk-add{display:flex;gap:8px;margin-top:8px}
.chk-add input{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px;outline:none}
.chk-add input:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ---------- conversa (só supervisores) ---------- */
.conv{display:flex;flex-direction:column;gap:11px;max-height:340px;overflow-y:auto;padding-right:4px}
.conv-vazio{font-size:12px;color:var(--soft);text-align:center;padding:16px 8px;
  border:1px dashed var(--line);border-radius:12px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .av{width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.3px}
.msg .mb{flex:1;min-width:0;background:#F7F9FC;border:1px solid var(--line);border-radius:4px 12px 12px 12px;
  padding:9px 12px}
.msg.eu .mb{background:var(--brand-bg);border-color:rgba(39,184,216,.28)}
.msg .mt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.msg .mt b{font-size:12px;color:var(--navy)}
.msg .mt span{font-size:10.5px;color:var(--soft)}
.msg .mt button{margin-left:auto;border:0;background:none;color:var(--soft);cursor:pointer;font-size:10.5px;
  font-weight:700;padding:2px 5px;border-radius:6px;opacity:0}
.msg:hover .mt button{opacity:1}
.msg .mt button:hover{color:var(--bad);background:var(--bad-bg)}
.msg .mc{font-size:12.5px;color:var(--ink);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.conv-add{margin-top:12px;display:flex;gap:9px;align-items:flex-end}
.conv-add textarea{flex:1;min-height:42px;max-height:150px;resize:vertical;border:1.5px solid var(--line);
  border-radius:11px;padding:10px 12px;font-size:12.5px;outline:none;line-height:1.5}
.conv-add textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ---------- histórico da tarefa (linha do tempo) ---------- */
.hist{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;padding-right:4px}
.hist-linha{display:flex;gap:11px;align-items:flex-start;padding:7px 2px;position:relative}
.hist-linha:not(:last-child)::before{content:"";position:absolute;left:5px;top:20px;bottom:-4px;width:2px;
  background:var(--line)}
.hist-ponto{width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--info);
  flex:none;margin-top:4px;z-index:1}
.hist-ponto.ok{border-color:var(--ok)}
.hist-ponto.bad{border-color:var(--bad)}
.hist-txt{font-size:12px;color:var(--muted);line-height:1.5;min-width:0}
.hist-txt b{color:var(--navy);font-weight:700}
.hist-quem{font-size:10.5px;color:var(--soft);margin-top:2px}

/* ---------- rotinas ---------- */
.rot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.rot{border:1px solid var(--line);border-left:4px solid var(--info);border-radius:13px;background:#FAFBFD;
  padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rot b{font-size:12.5px;color:var(--navy);line-height:1.4}
.rot .rot-m{font-size:11px;color:var(--soft);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rot .rot-m b{font-size:11px;color:var(--navy3)}

/* ---------- relatórios ---------- */
/* FLEX (não grid): na segunda linha os cartões esticam até o fim da tela,
   em vez de deixar buracos à direita como acontecia com repeat(auto-fit) */
.rel-kpis{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.rel-kpis>.rkpi{flex:1 1 168px;min-width:168px}
.rel-tbl td b{color:var(--navy)}
.medal{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;vertical-align:-4px;
  margin-right:5px;background:var(--warn-bg);color:#B8730A}
.rel-tbl .pos{font-weight:800;color:var(--soft);width:34px;text-align:center}
.rel-barr{display:flex;align-items:center;gap:8px;min-width:120px}
.rel-barr .barra{flex:1;min-width:60px}
.rel-barr span{font-size:11.5px;font-weight:700;color:var(--navy);min-width:26px;text-align:right;
  font-variant-numeric:tabular-nums}

/* ---------- lista vazia / carregando ---------- */
.t-vazio{padding:26px 16px;text-align:center;color:var(--muted);font-size:12.5px;
  border:1px dashed var(--line);border-radius:12px;background:#FAFBFD}
.t-carregando{opacity:.55;pointer-events:none;transition:opacity .15s}

/* ---------- bate-papo dos supervisores ---------- */
.chat-caixa{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;height:min(72vh,720px);overflow:hidden}
.chat-topo{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);
  background:#FBFCFE;flex:none;flex-wrap:wrap}
.chat-selo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:#0E7490;
  background:var(--brand-bg);border:1px solid rgba(39,184,216,.30);border-radius:999px;padding:4px 10px;
  text-transform:uppercase;letter-spacing:.5px}
.chat-selo svg{color:var(--brand)}
.chat-digitando{font-size:11.5px;font-weight:600;color:var(--info);font-style:italic}
.chat-online{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.on-pessoa{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ok);
  background:var(--ok-bg);border-radius:999px;padding:3px 9px}
.on-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;
  animation:pisca 1.6s ease-in-out infinite}
.chat-lista{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px;
  background:
    linear-gradient(180deg,rgba(39,184,216,.035),transparent 120px),
    repeating-linear-gradient(0deg,rgba(27,42,74,.02) 0 1px,transparent 1px 26px)}
.chat-lista .t-vazio{margin:auto;text-align:center}
.bubble{max-width:74%;background:#fff;border:1px solid var(--line);border-radius:4px 14px 14px 14px;
  padding:9px 12px 8px;box-shadow:0 1px 2px rgba(27,42,74,.06);align-self:flex-start;position:relative}
.bubble.minha{align-self:flex-end;background:linear-gradient(180deg,#EAF8FC,#E1F4FA);
  border-color:rgba(39,184,216,.34);border-radius:14px 4px 14px 14px}
.bubble.apagada{background:transparent;border:1px dashed var(--line);box-shadow:none;
  color:var(--soft);font-size:11.5px;font-style:italic;align-self:center;max-width:100%}
.b-topo{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.b-topo b{font-size:11.5px;color:var(--navy);font-weight:800}
.b-topo span{font-size:10px;color:var(--soft);font-variant-numeric:tabular-nums}
.b-apagar{margin-left:auto;border:0;background:none;color:var(--soft);cursor:pointer;padding:1px 3px;
  border-radius:6px;opacity:0;display:grid;place-items:center}
.bubble:hover .b-apagar{opacity:1}
.b-apagar:hover{color:var(--bad);background:var(--bad-bg)}
.b-txt{font-size:13px;color:var(--ink);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.b-txt a{color:var(--info)}
.b-lido{font-size:9.5px;color:var(--soft);text-align:right;margin-top:2px;min-height:11px}
.b-anexo{display:flex;align-items:center;gap:9px;width:100%;border:1px solid var(--line);background:#F8FAFC;
  border-radius:10px;padding:9px 11px;cursor:pointer;text-align:left;font-size:12.5px;color:var(--navy);
  font-weight:600;transition:background .14s,border-color .14s}
.b-anexo:hover{background:#F0F6FB;border-color:rgba(39,184,216,.4)}
.b-anexo svg{color:var(--info);flex:none}
.b-anexo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-anexo i{font-style:normal;font-size:10.5px;color:var(--soft);flex:none}
.b-anexo.imagem{border-left:3px solid var(--brand)}
.b-anexo.video{border-left:3px solid #7C3AED}
.b-audio{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#F8FAFC;
  border-radius:999px;padding:7px 14px;cursor:pointer;font-size:12px;font-weight:700;color:var(--navy);
  border-left:3px solid var(--ok)}
.b-audio:hover{background:#F0F6FB}
.b-audio svg{color:var(--ok)}
/* barra de escrita: 3 botões-compactos + campo + enviar, tudo em UMA linha
   (antes eram pílulas empilhadas e o campo ficava enorme) */
.chat-rodape{display:flex;align-items:center;gap:9px;padding:11px 13px;border-top:1px solid var(--line);
  background:#FBFCFE;flex:none}
.chat-botoes{display:flex;gap:6px;flex:none}
.chat-ic{width:42px;height:42px;border-radius:11px;border:1.5px solid var(--line);background:#fff;
  color:var(--navy3);display:grid;place-items:center;cursor:pointer;position:relative;flex:none;
  transition:background .14s,border-color .14s,color .14s,transform .14s}
.chat-ic:hover{background:#F2F6FB;border-color:#CFDAE6;color:var(--navy);transform:translateY(-1px)}
.chat-ic.once{gap:0;grid-auto-flow:column;width:auto;padding:0 11px;gap:6px;font-style:normal}
.chat-ic.once i{font-style:normal;font-size:11px;font-weight:800}
.chat-ic.once.on{background:var(--brand-bg);border-color:rgba(39,184,216,.5);color:#0E7490}
.chat-ic.gravando{background:linear-gradient(180deg,#F6DAD6,var(--bad-bg));border-color:rgba(192,57,43,.35);
  color:var(--bad);width:auto;padding:0 12px;gap:6px;grid-auto-flow:column;animation:pulsa 1.4s ease-in-out infinite}
.chat-ic.gravando i{font-style:normal;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.chat-campo{flex:1;min-width:0;display:flex}
.chat-campo textarea{width:100%;min-height:42px;max-height:120px;padding:11px 14px;font-size:13.5px;
  border:1.5px solid var(--line);border-radius:12px;outline:none;line-height:1.45;background:#fff;
  resize:none;overflow-y:auto}
.chat-campo textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.chat-envia{width:42px;height:42px;border-radius:11px;border:0;cursor:pointer;flex:none;
  background:linear-gradient(180deg,var(--navy3),var(--navy));color:#fff;display:grid;place-items:center;
  box-shadow:0 2px 0 #101E38,0 6px 14px rgba(27,42,74,.28);transition:transform .14s,filter .14s}
.chat-envia:hover{transform:translateY(-1px);filter:brightness(1.08)}
.chat-envia:active{transform:translateY(1px)}
@media (max-width:700px){
  .chat-rodape{flex-wrap:wrap}
  .chat-campo{order:-1;flex:1 0 100%}
}
/* visor de imagem/vídeo em visualização única */
.chat-visor{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.visor-fundo{position:absolute;inset:0;background:rgba(8,14,26,.88);backdrop-filter:blur(6px)}
.visor-caixa{position:relative;max-width:min(1000px,94vw);max-height:92vh;background:#0C1626;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px}
.visor-caixa img,.visor-caixa video{max-width:100%;max-height:74vh;border-radius:10px;display:block;background:#000}
.visor-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;border:0;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.visor-x:hover{background:var(--bad);transform:rotate(90deg)}
.visor-uma{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#FFD79A;
  background:rgba(212,130,10,.16);border:1px solid rgba(212,130,10,.4);border-radius:10px;padding:8px 11px;
  letter-spacing:.4px}
.visor-acoes{display:flex;gap:9px;justify-content:flex-end;align-items:center}
.visor-acoes .btn{flex:none}

@media (max-width:700px){
  .bubble{max-width:88%}
  .chat-check{order:5}
  .chat-rodape textarea{min-width:100%;order:4}
}

/* ---------- registro de atividades (log) ---------- */
.log-lista{margin-top:12px;max-height:460px;overflow-y:auto;border:1px solid var(--line);
  border-radius:12px;background:#FBFCFE}
.log-dia{position:sticky;top:0;z-index:1;background:#F1F5F9;color:var(--muted);font-size:10px;font-weight:800;
  letter-spacing:.7em;padding:7px 14px 6px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.log-item{display:flex;align-items:baseline;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(27,42,74,.06);
  font-size:12.5px;color:var(--ink)}
.log-item:last-child{border-bottom:0}
.log-item:hover{background:#fff}
.log-hora{font-size:11px;font-weight:700;color:var(--soft);font-variant-numeric:tabular-nums;flex:none;width:38px}
.log-quem{font-size:12px;font-weight:700;color:var(--navy);flex:none;min-width:120px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-o-que{flex:1;min-width:0;color:var(--muted);line-height:1.5;word-break:break-word}
.log-o-que b{color:var(--ink);font-weight:700}
.log-item.ok .log-o-que b{color:var(--ok)}
.log-item.bad .log-o-que b{color:var(--bad)}
.log-item.info .log-o-que b{color:var(--info)}
.qtd{font-size:10.5px;font-weight:700;color:var(--muted);background:#F1F5F9;border-radius:999px;padding:2px 9px}

/* ---------- selo de notificação no menu ---------- */
.selo-notif{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:#9EE9F7;
  background:rgba(39,184,216,.14);border:1px solid rgba(39,184,216,.30);border-radius:999px;
  padding:4px 10px;margin:0 22px 10px auto}
.selo-notif svg{color:var(--brand2)}

/* ---------- gate das notificações ---------- */
.gate-notif{text-align:center;padding:4px 6px 2px}
.gate-ico{width:62px;height:62px;border-radius:18px;background:var(--brand-bg);color:var(--info);
  display:grid;place-items:center;margin:0 auto 14px}
.gate-notif p{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.gate-notif p b{color:var(--navy)}
.gate-btn{width:100%;justify-content:center}
.gate-depois{margin-top:9px}
.gate-notif small{display:block;margin-top:14px;font-size:11px;color:var(--soft);line-height:1.5}

/* ---------- responsivo ---------- */
@media (max-width:1040px){
  /* colunas secundárias da lista saem para a tabela não ficar espremida */
  #tblTarefas th:nth-child(5),#tblTarefas td:nth-child(5),
  #tblTarefas th:nth-child(7),#tblTarefas td:nth-child(7){display:none}
  .rel-tbl th:nth-child(6),.rel-tbl td:nth-child(6){display:none}
}
@media (max-width:820px){
  .t-filtros select,.t-filtros .busca-t{min-width:100%}
  #tblTarefas th:nth-child(3),#tblTarefas td:nth-child(3){display:none}
  .cal .cal-day{min-height:64px;padding:4px}
  .cal-evt{font-size:0;padding:3px;border-radius:4px}
  .cal-evt .h{display:none}
  .det-grid{grid-template-columns:1fr 1fr}
  .t-cel-tit .t-desc{display:none}
  .t-cab{align-items:stretch}
  .t-cab>div:last-child{justify-content:flex-start}
}
@media (max-width:560px){
  .det-grid{grid-template-columns:1fr}
  .t-card{padding:14px 15px 12px}
  .hist .hl b{min-width:0}
  #tblTarefas th:nth-child(8),#tblTarefas td:nth-child(8){display:none}
  .rel-kpis>.rkpi{flex:1 1 140px;min-width:140px}
}