/* Mapa da Frota — folha unica. Identidade propria (vermelho institucional
   #de0013 como acento estrategico), plataforma operacional integrada:
   sidebar escura + header compacto + area de conteudo. */

/* ── Design tokens ──────────────────────────────────────── */
:root{
  /* TEMA SIGO (13/09/2026): tokens do Gestão de Jornadas, para os sistemas da
     casa terem uma linguagem visual só. Os nomes antigos continuam (o CSS
     inteiro fala por eles); o que mudou foram os valores. Referência:
     gestao-de-jornada/client/src/index.css. */
  /* marca */
  --brand:#de0013;                 /* o vermelho oficial fica: é o mesmo do Jornadas escuro */
  --brand-escuro:#b80010;
  --brand-suave:#fcebec;
  --brand-texto:#fff5f6;
  /* o DEGRADÊ vermelho padrão dos botões de ação (o mesmo do .btn-primario e do "Abrir o mapa"), num token só para quem quiser o mesmo (02/10/2026: o link da viagem na Trilha) */
  --brand-degrade:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));
  /* OS RESPIROS DAS TELAS (Alan, 02/10/2026, com o print da Pontualidade: "tem uns gaps nas telas que talvez desse pra otimizar diminuindo um pouco esses gaps"): a lateral do conteúdo era 18 px, do cabeçalho ao
     1º bloco 16 px e entre os blocos 14 px — agora 12 (a mesma do celular), 10 e 10. Três números só, para TODAS as telas (.tela-pagina, .pagina-cab e .cartao); o espaço de DENTRO dos cartões não mudou */
  --pag-lateral:12px;
  --pag-cab-respiro:10px;
  --pag-entre-cartoes:10px;
  --vermelho:var(--brand);            /* aliases historicos */
  --vermelho-escuro:var(--brand-escuro);
  --marca-faixa:#f03127;           /* o fundo do PNG do logo: a faixa não mostra o logo como um retângulo de outro vermelho */
  /* superficies */
  --canvas:#eceff3;
  --surface:#ffffff;
  --surface-2:#f4f6f9;
  --accent:#e9edf2;
  --accent-texto:#252b33;
  --ring:#7e98b0;
  --destructive:#cf4b58;
  --dark:#1b1f27;                  /* continua: telão, agrupamentos e dicas do mapa */
  --dark-2:#232936;
  --dark-3:#2c3342;
  --topo:var(--dark);
  /* texto */
  --ink:#1d2229;
  --texto-2:#3b444f;
  --muted:#66707b;
  --faint:#949ba3;
  /* bordas */
  --line:#d4dae3;
  --line-forte:#b9bec4;
  --linha-tabela:rgba(212,218,227,.8);
  /* status (as famílias de cor que a operação já lê não mudam) */
  --ok:#177a3d;         --ok-bg:#e8f5ec;
  --info:#2f6fb2;       --info-bg:#e9f1f9;
  --desenho:#19e65a;    /* o desenho da cerca no mapa (criar/ajustar): verde vivo, que aparece sobre o satélite, o asfalto e a terra (Alan, 01/10/2026: o azul quase sumia) */
  --desenho-contorno:rgb(0 0 0 / .85);   /* o contorno escuro fino que separa o verde do fundo claro do mapa */
  --pin-mapa:#27303b;   --pin-mapa-contorno:#ffffff;   /* o PIN do botão direito no mapa (Alan, 22/10/2026): gota escura de contorno branco, que lê sobre o mapa, o satélite e o relevo; o mapa é o mesmo nos dois temas, os valores também */
  --alerta:#9a5b00;     --alerta-fundo:#fdf3e1;
  --erro:#b42318;       --erro-bg:#fdeceb;
  --cinza:#707680;      --cinza-bg:#eef0f3;
  /* campos e botões */
  --campo-fundo:rgba(255,255,255,.9);
  --campo-borda:rgba(212,218,227,.78);
  --campo-texto:#1d2229;
  --btn-contorno-fundo:#fefefe;
  --btn-contorno-borda:rgba(212,218,227,.82);
  --btn-contorno-texto:#292e35;
  /* menu lateral, barra do topo e cartão */
  --sidebar:#f8f9fb;
  --sidebar-texto:#3b444f;
  --sidebar-acento:rgba(88,104,124,.12);
  --sidebar-acento-texto:#273240;
  --sidebar-borda:#d4dae3;
  --sidebar-fundo:linear-gradient(180deg,#f8f9fb,#f6f8fa);
  --sidebar-sombra:inset -1px 0 0 rgba(212,218,227,.84);
  --topo-fundo:linear-gradient(180deg,#fefefe,#f7f9fb);
  --topo-borda:rgba(212,218,227,.82);
  --topo-sombra:0 8px 18px rgba(20,24,30,.06);
  --cartao-fundo:linear-gradient(180deg,#ffffff,#f7f8fb);
  --cartao-fundo-fim:#f7f8fb;   /* a ponta de baixo do gradiente: o que cobre o cartão sem mostrar emenda (o rodapé colado do celular) */
  --cartao-borda:rgba(212,218,227,.76);
  --sombra-cartao:0 18px 55px rgba(15,23,42,.08);
  --tooltip-fundo:#1d2229;
  --tooltip-texto:#eceff3;
  --fundo-app:radial-gradient(circle at 12% 10%,rgba(255,255,255,.78),transparent 44%),
    radial-gradient(circle at 88% 84%,rgba(102,112,123,.20),transparent 46%),
    repeating-linear-gradient(135deg,rgba(31,36,44,.015) 0 2px,transparent 2px 10px),
    linear-gradient(140deg,#f9fafc,#eceff3 42%,#d9dde4);
  /* geometria */
  --r-xs:4px; --r-sm:12px; --r-md:14px; --r-lg:16px; --r-xl:20px; --r-full:9999px;
  --radius:var(--r-lg);
  --shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-soft:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-pop:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  /* espacamento (multiplos de 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  /* microinteracoes */
  --t-rapida:150ms cubic-bezier(.4,0,.2,1);
  --t-media:220ms cubic-bezier(.23,1,.32,1);
  --ease-out-smooth:cubic-bezier(.23,1,.32,1);
  --ease-in-out-smooth:cubic-bezier(.77,0,.175,1);
  --font-sans:'Manrope','Segoe UI',system-ui,sans-serif;
}
/* TEMA ESCURO (14/09/2026): os valores do .dark do Gestão de Jornadas
   (index.css:120-170), no mesmo esquema do claro — mesmos nomes, só os valores
   mudam. A classe `dark` entra no <html> pelo tema-inicial.js antes da primeira
   pintura e pelo botão do canto superior direito. html.dark (0,1,1) vence o
   :root (0,1,0) em qualquer posição do arquivo. Ficam iguais nos dois temas, e
   por isso não aparecem aqui: --brand e --brand-escuro (o Jornadas escuro usa
   os mesmos), --marca-faixa (a faixa do logo), --dark (telão, clusters e dicas
   do mapa), --sombra-cartao, --shadow-soft, geometria, espaços e transições.
   As correções de cores fixas estão no fim do arquivo, também em html.dark. */
html.dark{
  color-scheme:dark;
  /* marca */
  --brand-suave:#371e2f;            /* color-mix(#de0013 16%, #172434): a lógica do claro sobre o cartão escuro */
  --brand-texto:#fff6f7;
  /* superfícies */
  --canvas:#0f1824;
  --surface:#172434;
  --surface-2:#1a293a;
  --accent:#24374d;
  --accent-texto:#f5f8fd;
  --ring:#94b0cd;
  --destructive:#ff6b7c;
  /* texto */
  --ink:#eaf0f8;
  --texto-2:#d4deea;
  --muted:#9eb0c4;
  --faint:#8494a8;                  /* mais claro que a fórmula do claro (#768699): aquele dava 3,8:1 no cartão e 3,3:1 na linha em hover; este dá 4,6 e 4,0 */
  /* bordas */
  --line:#2f435a;
  --line-forte:rgba(171,196,224,.34);
  --linha-tabela:rgba(47,67,90,.8);
  /* status */
  /* chip = texto sobre o próprio -bg: a .16 e com #ff6678/#67a8ff ficava abaixo
     de 4,5:1 no cartão (erro 4,05, info 4,35) e na linha em hover; assim dá
     5,1/5,5 no cartão e 4,6/4,9 no hover */
  --ok:#31c591;         --ok-bg:rgba(49,197,145,.12);
  --info:#84b9ff;       --info-bg:rgba(132,185,255,.12);
  --desenho:#19e65a;    /* (o mapa é o mesmo nos dois temas: o verde do desenho e o contorno não mudam) */
  --desenho-contorno:rgb(0 0 0 / .85);
  --pin-mapa:#27303b;   --pin-mapa-contorno:#ffffff;   /* (o mapa é o mesmo nos dois temas: o PIN não muda) */
  --alerta:#ffb547;     --alerta-fundo:rgba(255,181,71,.16);
  --erro:#ff8a97;       --erro-bg:rgba(255,138,151,.12);
  --cinza:#9caec2;      --cinza-bg:#1a293a;
  /* campos e botões: o que o Jornadas pinta DE FATO (bg-card/90 e a borda
     .filtro-borda-tabela a 78% vencem a regra escura do .app-input-field) */
  --campo-fundo:rgba(23,36,52,.9);
  --campo-borda:rgba(47,67,90,.78);
  --campo-texto:#f3f7fc;
  --btn-contorno-fundo:rgba(148,176,205,.08);
  --btn-contorno-borda:rgba(171,196,224,.28);
  --btn-contorno-texto:rgba(233,241,251,.92);
  /* menu lateral, barra do topo e cartão */
  --sidebar:#132031;
  --sidebar-texto:#c3d2e5;
  --sidebar-acento:rgba(148,176,205,.19);
  --sidebar-acento-texto:#f6f9ff;
  --sidebar-borda:#2b3e54;
  --sidebar-fundo:linear-gradient(180deg,#162638,#101d2c);
  --sidebar-sombra:inset -1px 0 0 rgba(163,186,212,.2),12px 0 24px rgba(2,8,18,.28);
  --topo-fundo:linear-gradient(180deg,#1b2c3f,#162638);
  --topo-borda:rgba(177,198,220,.22);
  --topo-sombra:0 10px 24px rgba(3,8,16,.28);
  --cartao-fundo:linear-gradient(180deg,rgba(29,44,63,.98),rgba(23,37,54,.98));
  --cartao-fundo-fim:#172536;
  --cartao-borda:rgba(171,196,224,.23);
  /* o balão padrão INVERTE no escuro, como o tooltip do Jornadas (bg-foreground) */
  --tooltip-fundo:#eaf0f8;
  --tooltip-texto:#0f1824;
  --fundo-app:radial-gradient(circle at 10% 8%,rgba(138,170,205,.2),transparent 42%),
    radial-gradient(circle at 86% 84%,rgba(255,92,106,.15),transparent 42%),
    repeating-linear-gradient(140deg,rgba(255,255,255,.02) 0 2px,transparent 2px 11px),
    linear-gradient(145deg,#0c141f 0%,#0f1824 46%,#111d2b 100%);
  /* sombras: rgb(0 0 0 / .1) some no fundo escuro (modal e popover escuros do Jornadas) */
  --shadow:0 16px 34px rgba(9,16,28,.44);
  --shadow-pop:0 18px 36px rgba(5,10,18,.6),0 4px 10px rgba(5,10,18,.44);
}
/* troca de tema sem 16 cores animando ao mesmo tempo (o theme-instant-switch do
   Jornadas). Só as TRANSIÇÕES: desligar `animation` reiniciaria as entradas já
   terminadas (cartões, traço da linha do tempo, cartão do telão) e a tela
   piscaria. A classe só existe durante dois quadros da troca. */
html.tema-instantaneo *,html.tema-instantaneo *::before,html.tema-instantaneo *::after{transition:none!important}
/* A TROCA DE TEMA ANIMADA (Alan, 05/11/2026; o revelar circular da tela de entrada v3): durante a troca (a classe «tema-troca», posta pelo app.js) a animação padrão da View Transitions API sai e a tela de antes fica inteira por baixo — quem
   anima a tela nova é o JS: o círculo que nasce no botão do tema */
html.tema-troca::view-transition-old(root),html.tema-troca::view-transition-new(root){animation:none;mix-blend-mode:normal}
*{box-sizing:border-box}
/* O atributo hidden TEM de vencer qualquer display definido aqui. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{font:13.5px/1.45 var(--font-sans);color:var(--ink);background:var(--canvas);background-image:var(--fundo-app);background-attachment:fixed;
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,button,input,select,textarea,label{letter-spacing:-.01em}
/* O TELÃO DA AGÊNCIA FICA COMO FOI APROVADO. O JS dele mede o DOM (o nome da
   linha encolhe até caber; o cartão mede quanto cobre o mapa), então trocar a
   fonte ou os tons mexeria no que já está acertado. O palco guarda os valores
   de antes do tema SIGO. */
.pn-palco,.pn-vazio{--brand-suave:#fdeaec;--muted:#667085;--faint:#98a2b3;--line:#e4e7ec;--surface:#ffffff;--surface-2:#f8f9fb;--line-forte:#cfd5dd;
  --texto-2:#475061;--ink:#16181d;--ok:#177a3d;--canvas:#f2f3f6;
  --shadow:0 12px 32px rgba(15,20,30,.16);--shadow-soft:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --t-rapida:.15s ease;--t-media:.22s ease;font-family:Inter,'Segoe UI',system-ui,sans-serif;letter-spacing:0}
/* TEMA ESCURO NO TELÃO (Alan, 14/09/2026: "você não fez o tema dark pra essa
   parte"). Na primeira passada o palco ficou preso no claro; agora ele segue o
   tema. Só as CORES mudam: fonte, tamanhos e espaçamentos são os mesmos, então
   a medição do nome da linha e da altura do cartão não muda. O palco lê os
   próprios tokens (os de cima), por isso eles são redefinidos aqui com os
   valores escuros do SIGO; --brand e --dark ficam explícitos para o palco não
   depender do :root. A cor do texto precisa ser declarada: .pn-fila-hora,
   .pn-fila-linha e .pn-vazio b não têm cor própria. */
html.dark .pn-palco,html.dark .pn-vazio{--brand:#de0013;--dark:#1b1f27;--brand-suave:rgba(222,0,19,.16);--muted:#9eb0c4;--faint:#8494a8;
  --line:#2f435a;--surface:#172434;--surface-2:#1a293a;--line-forte:#3a506a;--texto-2:#c5d2e0;--ink:#eaf0f8;--ok:#31c591;--canvas:#0f1824;
  --shadow:0 12px 32px rgba(0,0,0,.45);--shadow-soft:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(47,67,90,.6);color:var(--ink);color-scheme:dark}
button{font:inherit;cursor:pointer}
input,select{font:inherit}
.icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}

/* ── Login ──────────────────────────────────────────────── */
.login-fundo{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1b1f27 0%,#2a303c 60%,#3a2126 100%);padding:20px}
.login-card{width:min(380px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:30px 28px}
.login-card h1{margin:0;font-size:21px;letter-spacing:-.01em}
.login-card .login-sub{margin:4px 0 22px;color:var(--muted);font-size:13px}
.login-marca{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-marca .marca-pin{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center}
.login-marca .marca-pin .icon{width:20px;height:20px}
.login-marca span{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--muted)}
.login-card label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.login-card input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.login-card input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.login-btn{width:100%;margin-top:20px;padding:12px;border:0;border-radius:9px;background:var(--brand);color:#fff;font-weight:700;letter-spacing:.02em;transition:background var(--t-rapida)}
.login-btn:hover{background:var(--brand-escuro)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-erro{margin-top:12px;color:var(--erro);font-size:13px;min-height:18px}

/* ── Casca: sidebar + area principal ────────────────────── */
.app{display:flex;height:100vh;height:100dvh}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* MENU LATERAL NO PADRÃO DO JORNADAS (13/09/2026): claro, com a faixa vermelha
   da marca no topo, item ativo marcado por uma barra vermelha à esquerda e o
   usuário com avatar no rodapé. Antes era um menu escuro próprio. */
.snav{width:256px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--sidebar);background-image:var(--sidebar-fundo);
  border-right:1px solid var(--sidebar-borda);box-shadow:var(--sidebar-sombra);color:var(--sidebar-texto)}
/* O TOPO DO MENU É TEXTO (Alan, 04/11/2026, vendo o logo do SIGO na faixa: «esse logo ficou bom não… vc pode usar o texto igual estava antes… e aí você escreve abaixo da sigla SIGO: Sistema Integrado de / Gestão Operacional»; o mesmo «aqui pode usar o texto como estava antes» de 03/11):
   o logo da Itamarati, o fio e a SIGLA «SIGO» em texto (17 px, negrito) com o nome do sistema EMBAIXO, em duas linhas de 9 px. A imagem do SIGO não mora mais aqui (nem a que tinha a frase em letras de ~1,5 px, que não se lia): o logo do SIGO fica só na tela de entrada. A faixa de 256 px comporta: 14 + 100 (Itamarati) + 12 + 1 + 12 + ~95 (a linha mais larga, «Sistema Integrado de») + 14 */
.snav-marca{flex:none;height:56px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;background:var(--marca-faixa);border-bottom:1px solid var(--sidebar-borda)}
.snav-marca-logo{display:block;width:100px;height:auto;flex:none}
.snav-marca-div{display:block;width:1px;height:30px;background:rgba(255,255,255,.45);flex:none}
.snav-marca .snav-marca-txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.1}
.snav-marca .snav-marca-txt b{font-size:17px;font-weight:800;line-height:1.05;letter-spacing:.06em;color:#fff;white-space:nowrap}
.snav-marca .snav-marca-txt span{font-size:9px;font-weight:600;line-height:1.1;letter-spacing:.02em;color:rgba(255,255,255,.88);white-space:nowrap}
.snav-corpo{flex:1;min-height:0;overflow-y:auto;padding:12px 12px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--sidebar-texto) 22%,transparent) transparent}
/* os grupos de cima (Agora, Consultar, Cadastro, Sistema) viraram snav-pai também
   (22/09/2026): o respiro que o antigo rótulo ".snav-grupo" dava entre eles vem do
   ">" — só pega o pai de primeiro nível, nunca um pai de dentro de um snav-filhos */
.snav-corpo > .snav-pai{margin-top:10px}
.snav-corpo > .snav-pai:first-child{margin-top:0}
.snav-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:7px 12px;border:0;border-radius:var(--r-xs);
  background:transparent;color:color-mix(in srgb,var(--sidebar-texto) 78%,transparent);font:inherit;font-size:14px;line-height:20px;font-weight:500;
  letter-spacing:-.01em;text-align:left;transition:background-color var(--t-rapida),color var(--t-rapida)}
/* o item de tela é um <a href> (25/09/2026): sem sublinhado, mão no ponteiro, como o botão que era */
a.snav-item{text-decoration:none;cursor:pointer}
.snav-item + .snav-item,.snav-filhos + .snav-item{margin-top:2px}
.snav-item:hover{background:color-mix(in srgb,var(--sidebar-acento) 60%,transparent);color:var(--sidebar-texto)}
.snav-item.ativa,.snav-pai.aberta{background:var(--sidebar-acento);color:var(--sidebar-acento-texto);font-weight:600}
.snav-item.ativa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 var(--r-full) var(--r-full) 0;background:var(--brand)}
.snav-item .icon{width:18px;height:18px;color:currentColor;transition:none}
.snav-item:hover .icon,.snav-item.ativa .icon{color:currentColor}
.snav-rotulo{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav-beta{display:inline-flex;align-items:center;height:16px;padding:0 6px;margin-left:8px;border-radius:var(--r-full);background:var(--brand);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* O CONTADOR DAS SOLICITAÇÕES (28/09/2026; era a pílula de 27/09), COPIADO DO GESTÃO DE JORNADA (AppLayout.tsx: o Badge "destructive" com
   rounded-md, tabular-nums e texto branco, no vermelho da casa #de0013 = --brand): o número das pendentes no item Solicitações › Pendentes (16 px,
   fonte 9 px) e, com o grupo FECHADO, também no pai (20 px, fonte 10 px, antes da seta). A vaga é FIXA (mora no markup e só fica visível com
   número): o menu não pula quando o número chega pela presença */
.snav-conta{display:inline-flex;align-items:center;justify-content:center;flex:none;height:16px;min-width:16px;padding:0 4px;margin-left:8px;border-radius:6px;
  background:var(--brand);color:#fff;font-size:9px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;visibility:hidden}
.snav-conta.ativa{visibility:visible}
/* FORA DO FLUXO (revisão de 27/09/2026): a vaga no fluxo somava ao rótulo, que não quebra linha, e o grid das filhas crescia até ele — o menu
   ganhava rolagem lateral e o número passava da borda. O contador fica por cima, no canto direito do item, e o rótulo só cede espaço
   (reticências) enquanto ele tem número; o tamanho do item nunca muda */
.snav-filho .snav-conta{position:absolute;top:50%;right:8px;margin:-8px 0 0}
.snav-filho:has(.snav-conta.ativa) .snav-rotulo{padding-right:28px}
/* no PAI, só com o grupo fechado (no Jornadas: !isExpanded); aberto, o número está à vista no filho */
.snav-conta.snav-conta-pai{height:20px;min-width:20px;padding:0 6px;margin:0 4px;font-size:10px}
.snav-pai.expandido .snav-conta-pai{display:none}
/* a ENTRADA (a sidebarBadgePop do Jornadas, 480 ms): só quando o número MUDA — o corrPilula tira a classe, força o reflow e põe de novo; a
   montagem do menu e a repintura com o mesmo número não animam */
.snav-conta-entrada{animation:sidebarBadgePop 480ms cubic-bezier(.23,1,.32,1)}
@keyframes sidebarBadgePop{0%{opacity:0;transform:translateY(-5px) scale(.72)}55%{opacity:1;transform:translateY(2px) scale(1.08)}78%{transform:translateY(-1px) scale(.98)}100%{transform:none}}
.snav-rodape{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;border-top:1px solid var(--sidebar-borda)}
/* selo "MiX Online" centralizado (Alan, 16/09/2026) */
.snav-mix{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10.5px;color:var(--muted)}
/* "‹ Recolher menu" do Jornadas: texto discreto, centralizado, ganha cor no hover */
.snav-recolher{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:7px 12px;border:0;border-radius:12px;background:none;
  font:inherit;font-size:12px;color:color-mix(in srgb,var(--sidebar-texto) 45%,transparent);cursor:pointer;transition:background var(--t-rapida),color var(--t-rapida)}
.snav-recolher:hover{color:var(--sidebar-texto);background:color-mix(in srgb,var(--sidebar-acento) 40%,transparent)}
.snav-recolher .icon{width:16px;height:16px;transform:rotate(90deg);transition:transform 300ms cubic-bezier(.23,1,.32,1)}
.snav-recolher .snav-rotulo{flex:none}
@media(min-width:901px){
  .snav{transition:width 300ms cubic-bezier(.23,1,.32,1)}
  .snav-recolhido .snav{width:68px}
  /* recolhido fica o LOGOTIPO DA ITAMARATI, como no Jornadas (Alan, 16/09/2026:
     "quando esse menu recolhe... o que aparece é o logo da Itamarati") */
  .snav-recolhido .snav-marca{padding:0 6px}
  .snav-recolhido .snav-marca-div,.snav-recolhido .snav-marca .snav-marca-txt{display:none}
  .snav-recolhido .snav-marca-logo{width:56px}
  .snav-recolhido .snav-corpo{padding:12px 8px;overflow-x:hidden}
  /* sem o rótulo do grupo (agora um snav-pai clicável), fica só um fio entre os
     blocos de primeiro nível — nunca antes de um pai de dentro (Integrações etc.).
     O item direto (Auditoria, sem lista) é um bloco de primeiro nível como os pais */
  .snav-recolhido .snav-corpo > .snav-pai,.snav-recolhido .snav-corpo > .snav-direto{margin-top:6px;padding-top:12px;border-top:1px solid var(--sidebar-borda)}
  .snav-recolhido .snav-corpo > .snav-pai:first-child,.snav-recolhido .snav-corpo > .snav-direto:first-child{margin-top:0;padding-top:9px;border-top:0}
  .snav-recolhido .snav-item{justify-content:center;gap:0;padding:9px 0}
  /* .snav-recolhido .snav-pai: vence o ".snav-pai .snav-seta{display:inline-flex}" que vem depois */
  .snav-recolhido .snav-item .snav-rotulo,.snav-recolhido .snav-pai .snav-seta{display:none}
  /* o selo "beta" vira um ponto no canto do ícone */
  .snav-recolhido .snav-beta{position:absolute;top:7px;right:13px;width:7px;height:7px;min-width:0;padding:0;margin:0;font-size:0}
  /* o contador também vira BOLINHA de 8 px no canto do ícone (como no Jornadas; o número vai no balão dela). As filhas ficam à vista no menu
     recolhido, então a bolinha fica no filho e o pai não mostra nada */
  .snav-recolhido .snav-conta{position:absolute;top:4px;right:4px;width:8px;height:8px;min-width:0;padding:0;margin:0;border-radius:50%;font-size:0;box-shadow:0 0 0 2px var(--sidebar)}
  .snav-recolhido .snav-conta-pai{display:none}
  .snav-recolhido .snav-filhos{margin:2px 0;border-left:0}
  .snav-recolhido .snav-filhos-int{padding-left:0}
  /* recolhido (só ícones): as filhas ficam sempre à vista, também as dos grupos fechados */
  .snav-recolhido .snav-pai:not(.expandido) + .snav-filhos{grid-template-rows:1fr;margin:2px 0;opacity:1;visibility:visible;
    transition:grid-template-rows 280ms cubic-bezier(.4,0,.2,1),margin 280ms cubic-bezier(.4,0,.2,1),opacity 220ms ease,visibility 0s}
  .snav-recolhido .snav-filho{justify-content:center;padding:7px 0}
  .snav-recolhido .snav-filho.ativa::before{left:0;width:3px;border-radius:0 var(--r-full) var(--r-full) 0}
  .snav-recolhido .snav-rodape{padding:10px 8px}
  .snav-recolhido .snav-recolher{padding:7px 0}
  .snav-recolhido .snav-recolher .snav-rotulo{display:none}
  .snav-recolhido .snav-recolher .icon{transform:rotate(-90deg)}
  /* recolhido, o selo da MiX fica só com a bolinha de cor */
  .snav-recolhido .snav-mix .pill{font-size:0;gap:0;padding:4px}
}
.snav-versao{text-align:center;font-size:10px;line-height:14px;font-weight:600;letter-spacing:.04em;color:color-mix(in srgb,var(--sidebar-texto) 45%,transparent)}
.app-main{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* USUÁRIO NO CANTO SUPERIOR DIREITO — o menu do usuário do TopBar do Jornadas
   (AppLayout.tsx:860-915): bolinha vermelha de 36px e cartão de 320px alinhado
   à direita, 8px abaixo. Cada tela monta o próprio cabeçalho de 56px, então o
   botão fica solto no canto e os cabeçalhos guardam o lugar dele no padding. */
/* 116 = 24 da margem + 36 do avatar + 8 + 32 do botão de tema + 16 de respiro */
:root{--topo-usuario-vao:116px}
/* 890: acima da barra do mapa (805/806) e da gaveta (810), que ficariam por
   cima do cartão aberto; abaixo do fundo dos modais (900) e dos balões (950) */
.topo-usuario{position:absolute;top:10px;right:24px;z-index:890}
/* BOTÃO DO TEMA (14/09/2026), à esquerda do avatar: o ghost 32px do TopBar do
   Jornadas (AppLayout.tsx:827-840) — transparente, fundo accent no hover (accent
   a 50% no escuro), sombra sm e o ícone do tema ATUAL (sol no claro, lua no
   escuro). Fica fora do fluxo, pendurado à esquerda da caixa do usuário, para o
   avatar não sair do pixel em que está. top:2px centra os 32px nos 36 do avatar.
   Raio 16px: o rounded-lg do Jornadas (--radius 1rem), igual ao .btn-fantasma. */
.topo-tema{position:absolute;top:2px;right:calc(100% + 8px);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:var(--r-lg);background:transparent;color:var(--ink);box-shadow:var(--shadow-soft);
  transition:background-color 180ms ease-out,color 180ms ease-out}
.topo-tema:hover{background:var(--accent)}
.topo-tema:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent),var(--shadow-soft)}
.topo-tema .icon{width:16px;height:16px;transition:transform 180ms ease-out}
.topo-tema:hover .icon,.topo-tema:focus-visible .icon{transform:translateY(-1px)}
.topo-avatar{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--brand);border-radius:var(--r-full);
  background:var(--brand);color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px 8px rgba(222,0,19,.18);
  transition:background-color var(--t-rapida),border-color var(--t-rapida)}
.topo-avatar:hover,.topo-avatar.aberto{background:var(--brand-escuro);border-color:var(--brand-escuro)}
.topo-avatar:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.topo-menu{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 24px);overflow:hidden;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-xl);box-shadow:0 18px 38px rgba(15,23,42,.14)}
.topo-menu-cab{padding:16px;background:color-mix(in srgb,var(--surface-2) 25%,var(--surface))}
.topo-menu-quem{display:flex;align-items:center;gap:12px;min-width:0}
.topo-menu-avatar{width:44px;height:44px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:var(--brand);
  color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-soft),0 0 0 2px rgba(222,0,19,.15)}
.topo-menu-quem > div{display:flex;flex-direction:column;min-width:0;flex:1}
.topo-menu-quem b{display:block;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-menu-quem > div > span{display:block;margin-top:4px;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-menu-rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.topo-menu-papel{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-texto);
  font-size:10px;font-weight:600;letter-spacing:.025em;text-transform:uppercase}
.topo-menu-sessao{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--muted)}
.topo-menu-sessao i{width:6px;height:6px;border-radius:var(--r-full);background:#10b981;flex:none}
.topo-menu-sessao.livre i{background:var(--faint)}
.topo-menu-sair{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--brand);border-radius:var(--r-md);
  background:var(--brand);color:#fff;font-size:11px;font-weight:600;transition:background-color var(--t-rapida),border-color var(--t-rapida)}
.topo-menu-sair:hover{background:var(--brand-escuro);border-color:var(--brand-escuro)}
.topo-menu-sair .icon{width:14px;height:14px}
.tela-conteudo{display:flex;flex-direction:column;flex:1;min-height:0}

/* Header compacto de pagina */
.cab{flex:none;position:relative;z-index:30;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px var(--topo-usuario-vao) 6px 24px;background:var(--surface);background-image:var(--topo-fundo);
  border-bottom:1px solid var(--topo-borda);box-shadow:var(--topo-sombra)}
.cab-titulo{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cab-titulo h1{margin:0;font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.cab-titulo p{margin:0;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-dir{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);min-width:0}
.cab-vivo{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--texto-2);white-space:nowrap}
.cab-vivo i{width:8px;height:8px;border-radius:50%;background:var(--cinza);flex:none}
.cab-vivo.ok i{background:#22a04f;box-shadow:0 0 0 3px #22a04f2b}
.cab-vivo.warn i{background:#dd8f10;box-shadow:0 0 0 3px #dd8f102b}
.cab-vivo.blocked i{background:var(--brand);box-shadow:0 0 0 3px #de00132b}
.topo-sync{white-space:nowrap}
.topo-sync.warn{color:var(--alerta);font-weight:600}

/* pill de status da integracao (sidebar e diagnostico) */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700;letter-spacing:0}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--alerta-fundo);color:var(--alerta)}
.pill.blocked{background:var(--erro-bg);color:var(--erro)}
.pill.neutral{background:var(--cinza-bg);color:var(--muted)}

/* Balão de ajuda padrão (data-balao): cartão escuro fixo, abre ABAIXO do
   elemento; nunca cortado por containers com rolagem */
.balao-flutuante{position:fixed;transform:translateX(-50%);z-index:950;background:var(--tooltip-fundo);color:var(--tooltip-texto);border-radius:var(--r-sm);
  box-shadow:var(--shadow-pop);padding:8px 12px;font-size:12px;line-height:1.45;max-width:280px;text-align:left;pointer-events:none}
.balao-flutuante::before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-bottom-color:var(--tooltip-fundo)}
/* aberto PARA CIMA: a seta vira para baixo (10/09/2026) */
/* várias linhas (data-balao-linhas): as quebras do texto valem, com a lista de nomes de quem conferiu o carro */
.balao-flutuante.balao-linhas{white-space:pre-line;max-width:min(420px,calc(100vw - 16px));overflow-wrap:anywhere}
.balao-flutuante.balao-direita{transform:none}
.balao-flutuante.balao-direita::before{bottom:auto;left:auto;right:100%;top:50%;margin:-5px 0 0;border-bottom-color:transparent;border-right-color:var(--tooltip-fundo)}
.balao-flutuante.balao-acima::before{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:var(--tooltip-fundo)}
/* balão alto que deslizou para caber na tela (balaoTopoNaTela, 27/10/2026): a seta apontaria para o vazio, então some */
.balao-flutuante.balao-deslizou::before{display:none}

/* Chips de status (linguagem unica em listas e tabelas) */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-full);font-size:10.5px;line-height:16px;font-weight:700;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor;opacity:1}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.pt-folga{display:inline-block;margin-left:5px;padding:0 6px;border-radius:99px;font-size:10px;font-weight:600;line-height:16px;color:var(--muted);background:var(--cinza-bg);vertical-align:middle;white-space:nowrap}
.chip-info{background:var(--info-bg);color:var(--info)}
.chip-warn{background:var(--alerta-fundo);color:var(--alerta)}
.chip-danger{background:var(--erro-bg);color:var(--erro)}
.chip-neutral{background:var(--cinza-bg);color:var(--muted)}

/* ── Corpo do mapa: lista a esquerda + mapa protagonista ── */
.corpo{display:flex;flex:1;min-height:0}
.lateral{width:296px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--line)}
/* A LISTA SOBE ATÉ O CABEÇALHO (Alan, 16/09/2026: "colocar os KPIs com a largura
   do mapa ... pra poder aumentar a altura" da lista): avisos e KPIs vivem numa
   coluna própria, só em cima do mapa */
.mapa-coluna{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}

/* Barra operacional de KPIs: linha unica integrada, cada KPI e um botao-
   filtro; numero forte sobre rotulo discreto. */
.kpis-topo{display:flex;background:var(--surface);border-bottom:1px solid var(--line);flex:none;overflow-x:auto}
.kpi-topo{flex:1;min-width:96px;background:none;padding:9px 16px 8px;display:flex;flex-direction:column;gap:0;border:0;border-left:1px solid var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;transition:background var(--t-rapida)}
.kpi-topo:first-child{border-left:0}
.kpi-topo:hover{background:var(--surface-2)}
.kpi-topo.ativa{background:var(--brand-suave)}
.kpi-topo.ativa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--brand)}
.kpi-topo b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kpi-topo span{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kpi-topo.destaque b{color:var(--alerta)}
.kpi-topo.apagado b{color:var(--faint)}

/* Busca e filtros da lateral */
.lateral-cab{padding:11px 14px 0;display:flex;align-items:baseline;gap:8px;flex:none}
.lateral-cab h2{margin:0;font-size:13.5px;font-weight:700}
.lateral-cab span{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.lateral-filtros{padding:9px 12px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;flex:none}
/* BUSCA NO PADRÃO DO JORNADAS (Alan, 16/09/2026: "esse campo deveria ser padrão
   que temos no gestão de jornada"): o Input de filtro da tela de Usuários de lá
   (classeInputFiltro) — 36 px, cantos de 16 px, fundo bg-card/90 e a borda
   .filtro-borda-tabela a 78% (os mesmos --campo-* das listas), lupa de 16 px a
   12 px da borda e texto a 40 px; no foco, só o anel de 2 px do ring a 25% (a
   borda fica: o !important de lá vence o focus-visible:border-ring). Sem o
   contorno vermelho e o fundo cinza de antes. Vale no Mapa e nas Cercas. */
.busca-wrap{position:relative}
.busca-wrap input{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;height:36px;margin:0;
  font:inherit;font-size:13px;font-weight:400;color:var(--campo-texto);padding:0 12px 0 40px;
  border:1px solid var(--campo-borda);border-radius:var(--r-lg);background:var(--campo-fundo);box-shadow:none;outline:none;
  transition:color var(--t-rapida),box-shadow var(--t-rapida)}
.busca-wrap input::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent);opacity:1}
.busca-wrap input:focus{outline:none;border-color:var(--campo-borda);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.busca-wrap .busca-lupa{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none}
.lateral-selects{display:flex;gap:8px}
.lateral-selects label{flex:1;display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;min-width:0}
.lateral-selects select{width:100%;padding:6.5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:12.5px;text-transform:none;letter-spacing:0;font-weight:500}
/* mesma caixa do select nativo para a lista propria (com busca) da lateral */
.lateral-selects .cs-btn{padding:6.5px 8px;font-size:12.5px}
.lateral-selects .cs-panel{max-width:min(420px,calc(100vw - 32px))}
/* Empresa | Núcleo / Setor de atividade | Alocação: duas colunas na lateral de 296 px */
.lateral-selects.lateral-hierarquia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lateral-hierarquia .cs-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FILTROS RECOLHÍVEIS (16/09/2026): o cabeçalho "Filtros" abre e fecha o bloco de
   empresa/setor/núcleo/alocação e situação, no computador e no celular; fechado,
   ele diz quantos e quais filtros valem. A busca fica sempre à vista, embaixo. */
.lateral-busca-linha{display:flex;gap:8px;align-items:center}
.lateral-busca-linha .busca-wrap{flex:1;min-width:0}
.lateral-busca-linha .btn-icone{flex:none}
.lateral-filtros-cab{display:flex;align-items:center;gap:7px;width:100%;min-height:26px;padding:0 2px;border:0;border-radius:6px;background:none;color:var(--muted);
  font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:left;cursor:pointer}
.lateral-filtros-cab:hover,.lateral-filtros-cab[aria-expanded="true"]{color:var(--ink)}
.lateral-filtros-cab:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.lateral-filtros-titulo{flex:none}
/* funil de filtro antes do título (Alan, 16/09/2026: "coloca um ícone talvez de
   filtro... pra ficar explícito"); o mesmo Filter do lucide que o Jornadas usa */
.lateral-filtros-cab>.icon{width:14px;height:14px}
.lateral-filtros-cab b{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:10.5px;line-height:18px;letter-spacing:0;text-align:center}
.lateral-filtros-resumo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.lateral-filtros-cab .dp-seta{flex:none;margin-left:auto;transition:transform var(--t-rapida)}
.lateral-filtros-cab[aria-expanded="true"] .dp-seta{transform:rotate(180deg)}
.lateral-filtros-cab[aria-expanded="true"] .lateral-filtros-resumo{visibility:hidden}
/* OS FILTROS ABREM E FECHAM COM ANIMAÇÃO (Alan, 21/10/2026: "quando eu clico para expandir e visualizar a opção de filtros não tem transição, simplesmente pisca com a tela aberta e depois pisca com a tela fechada... tem que ter animação").
   SÓ CSS, como o menu lateral (.snav-filhos): o JS segue trocando a classe .filtros-abertos na hora (quem pergunta "está aberto?" já tem a resposta certa) e a linha do grid vai de 0fr a 1fr — a altura anima sem
   saber o tamanho do bloco —, com a folga de cima (margin-top) e um esmaecer junto. Fechado o bloco continua na página com 0 de altura (por isso o -8px: ele cancela o `gap` do .lateral-filtros e a altura de quem
   está embaixo é a de sempre) e `visibility:hidden` ao fim da saída, para o teclado não entrar nele. O .lateral-filtros-int é quem corta; ABERTO E PARADO ele não corta (as listas suspensas — Empresa, Situação —
   abrem para fora do bloco): o `overflow` vira só depois da animação (transition-behavior: allow-discrete; sem ele o corte some na hora, só um detalhe da entrada). Sem gate de prefers-reduced-motion, como o
   menu (o Windows daqui tem as animações desligadas e o pedido é justamente ver o movimento). A abertura do navegador com o bloco já aberto não anima: a regra de aberto é a de repouso, não há estado "de antes". */
.lateral-filtros-extra{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:0fr;margin-top:-8px;opacity:0;visibility:hidden;
  transition:grid-template-rows 260ms cubic-bezier(.4,0,.2,1),margin-top 260ms cubic-bezier(.4,0,.2,1),opacity 200ms ease,visibility 0s linear 260ms}
.lateral-filtros-int{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow:clip}
.lateral.filtros-abertos .lateral-filtros-extra{grid-template-rows:1fr;margin-top:0;opacity:1;visibility:visible;
  transition:grid-template-rows 260ms cubic-bezier(.4,0,.2,1),margin-top 260ms cubic-bezier(.4,0,.2,1),opacity 200ms ease 60ms,visibility 0s}
.lateral.filtros-abertos .lateral-filtros-int{overflow:visible}
@supports (transition-behavior:allow-discrete){
  .lateral-filtros-int{transition:overflow 0s allow-discrete}
  .lateral.filtros-abertos .lateral-filtros-int{transition:overflow 0s 260ms allow-discrete}
}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:500;cursor:pointer;user-select:none}
.chk input{accent-color:var(--brand);width:14px;height:14px;margin:0}

/* Lista de veiculos: cada item com hierarquia (prefixo/placa > motorista >
   velocidade e idade) e cor de situacao. */
.lista-cab{display:flex;align-items:center;gap:6px;padding:8px 14px 5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex:none}
.lista-contagem{font-weight:600;margin-left:auto}
.ordem-select{border:0;background:none;font:inherit;font-size:10px;color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:0;max-width:170px}
.lista-veiculos{flex:1;overflow-y:auto;min-height:0;padding:0 8px 8px}
.veic-row{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:9px;background:none;text-align:left;font:inherit;transition:background var(--t-rapida)}
.veic-row:hover{background:#f2f4f6}
.veic-row.ativa{background:var(--brand-suave);outline:1px solid #f2c6cb}
.veic-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 1px #0001}
.veic-dot.ok{background:#1ea254}
.veic-dot.par{background:#5f7d9c}
.veic-dot.stale{background:#dd8f10}
.veic-dot.sem{background:#c2c7cf}
.veic-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.veic-l1{display:flex;align-items:baseline;gap:7px;min-width:0}
/* O PREFIXO NUNCA É CORTADO (Alan, 16/09/2026): ele não encolhe; se faltar espaço
   a placa cede por último, e a idade (#fmLista) desce para a segunda linha antes.
   O max-width só pega nome sem prefixo e comprido demais para a linha.
   O NEGRITO É O PREFIXO (Alan, 28/09/2026: "e eu acho que negrito teria que ser o prefixo..."): prefixo, placa e velocidade saíam todos com
   600 — o prefixo é o único negrito (700); a placa e a velocidade ficam médias (500), com o mesmo tamanho e a mesma cor. */
.veic-l1 b{font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:100%}
.veic-l1 i{font-style:normal;font-size:11px;font-weight:500;color:var(--faint);letter-spacing:.03em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.veic-l2{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veic-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none}
.veic-meta b{font-size:11.5px;font-weight:500;color:var(--texto-2);white-space:nowrap}
.veic-meta span{font-size:10.5px;color:var(--faint);white-space:nowrap}
#fmLista .veic-meta{max-width:62px}
#fmLista .veic-meta span{white-space:normal;text-align:right;line-height:1.2}
.lista-vazia{padding:14px;font-size:13px;color:var(--muted)}

/* avisos */
.aviso{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;flex:none}
.aviso .icon{width:15px;height:15px;flex:none}
.aviso.atencao{background:var(--alerta-fundo);color:var(--alerta);border-bottom:1px solid #f3dcb2}
.aviso.config{background:#eef2ff;color:#3b4bbd;border-bottom:1px solid #d8ddf5}

/* ── Mapa ───────────────────────────────────────────────── */
.mapa-area{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}
#mapaCanvas,#cercaCanvas{position:absolute;inset:0;z-index:1;background:#dfe3e8}
/* isolation: as camadas internas do Leaflet usam z-index 400 a 1000 e, sem um
   contexto próprio, disputavam com a página — o mini-mapa da viagem passava por
   cima do cabeçalho fixo (.pagina-cab, z-index 30) ao rolar (15/09/2026) */
.leaflet-container{font:inherit;isolation:isolate}

/* Toolbar flutuante do mapa: camadas + cercas + enquadrar num grupo so */
/* fica ABAIXO do drawer (810), mas nao por tras dele: com o inspetor aberto a barra anda para a esquerda dele
   (bloco "MAPA DA FROTA: OS CONTROLES ACOMPANHAM O INSPETOR", antes das Conferencias) */
.mapbar{position:absolute;top:10px;right:10px;z-index:805;display:flex;gap:6px;align-items:flex-start}
.mapbar-btn{display:flex;align-items:center;gap:6px;background:#fffffff2;border:1px solid var(--line-forte);border-radius:9px;box-shadow:var(--shadow-soft);padding:7px 11px;font-size:12px;font-weight:600;color:var(--texto-2);white-space:nowrap;transition:background var(--t-rapida),color var(--t-rapida)}
/* Barra RECOLHIDA — nos mapas da viagem e do histórico do veículo (pedido do usuário, 07/09/2026): fica
   só o ícone, e o texto abre ao passar o mouse; no mapa, o que importa é o
   mapa. Abre também no foco pelo teclado, senão quem navega por Tab nunca lê o
   rótulo. As barras das outras telas de mapa continuam como estavam. */
/* o botão que nasce escondido (Pedir ajuste da cerca, 01/10/2026): sem isto o display:flex do .mapbar-btn vence o [hidden] do navegador */
.mapbar-btn[hidden]{display:none}
/* o botão que SUMIU com o mouse em cima da barra guarda o lugar, invisível, até o mouse sair (ptAjusteCercaSincronizar): os vizinhos não andam para debaixo do mouse */
.mapbar-btn.mapbar-fantasma{visibility:hidden;pointer-events:none}
/* a lista de cercas do pedido de ajuste: o nome e, embaixo, o que distingue duas cercas de mesmo nome (tamanho, a da passagem) */
#ptMiniAjusteMenu button small{display:block;margin-top:1px;font-size:10.5px;font-weight:400;color:var(--muted)}
#ptMiniAjusteMenu button.sel small,#ptMiniAjusteMenu button:hover small{color:inherit}
.mapbar-recolhida{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 20px);interpolate-size:allow-keywords}
.mapbar-recolhida .mapbar-btn{gap:0;padding:7px 10px}
/* O RÓTULO CRESCE DENTRO DO BOTÃO, COMO SEMPRE FOI (Alan, 01/10/2026: "não gostei do novo estilo que você colocou nesses botões... era só ter ajustado ele para não ter tanto bug"; a etiqueta por cima das v618–619 foi desfeita).
   Só o COMPORTAMENTO mudou, para o passar rápido do mouse não "bugar" (a barra é alinhada à direita: cada botão que abre empurra os da esquerda, e o que está debaixo do mouse muda no meio do movimento):
   (1) INTENÇÃO: abrir espera 120 ms com o mouse em cima (transition-delay no hover) — quem só passa varrendo os botões não abre nada, e então nada se mexe;
   (2) fechar espera 160 ms (transition-delay no repouso) — ao ir de um botão para o vizinho, o novo abre (a partir de 120 ms) quase junto com o antigo fechar (160 ms), em vez de o antigo fechar na hora e os botões
       deslizarem por debaixo do mouse;
   (3) a animação vai até a LARGURA REAL do texto (max-width: max-content, com interpolate-size): antes ia de 0 a 180 px e um texto de 45 px chegava aos 45 px na primeira metade do tempo e ficava parado — na volta,
       o botão levava ~150 ms para começar a fechar, sobrando aberto debaixo do mouse. O foco de teclado abre igual; o do botão de camadas só pelo teclado (:focus-within ficava aberto depois de um clique do mouse) */
.mapbar-recolhida .mapbar-txt{display:inline-block;overflow:hidden;max-width:0;opacity:0;margin-left:0;transition:max-width .2s ease .16s,opacity .14s ease .16s,margin-left .2s ease .16s}
.mapbar-recolhida .mapbar-btn:hover .mapbar-txt,.mapbar-recolhida .mapbar-btn:focus-visible .mapbar-txt{max-width:max-content;opacity:1;margin-left:7px;transition-delay:.12s}
.mapbar-recolhida .mapbar-wrap:has(:focus-visible) .mapbar-txt{max-width:max-content;opacity:1;margin-left:7px;transition-delay:.12s}
.mapbar-recolhida .mapbar-btn .dp-seta{margin-left:4px}
.mapbar-recolhida .mapbar-btn.carregando{opacity:.65}
/* No celular não há mouse: um ícone sozinho não teria como se explicar */
@media (hover:none){.mapbar-recolhida .mapbar-txt{max-width:180px;opacity:1;margin-left:7px}}
.mapbar-btn:hover{background:#fff;color:var(--ink)}
.mapbar-btn.ligado{background:var(--dark);border-color:var(--dark);color:#fff}
.mapbar-btn .icon{width:14px;height:14px}
.mapbar-btn .dp-seta{font-size:9px}
.mapbar-wrap{position:relative}
.mapbar-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:806;background:var(--surface);border:1px solid var(--line-forte);border-radius:10px;box-shadow:var(--shadow-pop);padding:4px;min-width:132px}
.mapbar-menu button{display:block;width:100%;border:0;background:none;font:inherit;font-size:12.5px;text-align:left;padding:7px 11px;border-radius:7px;color:var(--ink)}
.mapbar-menu button:hover{background:#f2f4f6}
.mapbar-menu button.sel{background:var(--brand-suave);color:var(--brand);font-weight:600}
/* A LISTA DE VISÕES DO MAPA CABE NO MAPA CURTO DO CELULAR (Alan, 30/09/2026: "eu não consigo escolher um"): com os filtros abertos o mapa em pé tem ~160 px de altura e o painel (4 opções em coluna, 139 px)
   era cortado pelo mapa — o Relevo ficava escondido e não dava para tocar. Em tela estreita ou baixa as opções vão em 2 × 2 (~75 px). Vale para os quatro mapas (frota, viagem, histórico, cercas) */
@media (max-width:600px),(max-height:520px){
  .mapbar-menu:not([hidden]){display:grid;grid-template-columns:1fr 1fr;min-width:188px}
  .mapbar-menu button{white-space:nowrap}
  /* a lista de cercas do pedido de ajuste (01/10/2026) NÃO é a grade 2 × 2 das visões: tem nomes compridos (duas cercas de mesmo nome), então uma coluna só, que quebra linha e não passa da área do mapa */
  #ptMiniAjusteMenu:not([hidden]){display:block;min-width:0;max-width:calc(100% - 20px)}
  #ptMiniAjusteMenu button{white-space:normal}
}

/* Barra de status do mapa (confianca operacional, canto inferior) */
.map-status{position:absolute;left:10px;bottom:10px;z-index:800;display:flex;align-items:center;gap:10px;background:#ffffffe9;backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-soft);padding:6px 12px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.map-status .cab-vivo{font-size:11.5px}
.map-status .sep{width:1px;height:14px;background:var(--line)}
/* a legenda (movimento, parado, desatualizado) saiu da barra e mora no card do mouse do "Tempo real" (25/09/2026): título + um pontinho colorido por item */
.balao-flutuante.balao-legenda{display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.balao-leg-titulo{font-weight:700}
/* título e explicação (data-balao-titulo): o título em negrito e a frase embaixo, mais discreta */
.balao-flutuante.balao-tit{display:flex;flex-direction:column;gap:2px;white-space:normal;max-width:min(360px,calc(100vw - 16px))}
.balao-tit-texto{font-weight:400;opacity:.85}
/* LINHAS QUE NÃO QUEBRAM (data-balao-uma-linha; Alan, 26/09/2026: "exibir a informação numa única linha"): cada linha do texto (\n) fica inteira, o balão cresce até 720 px (com título também); no celular, onde não cabe, volta a quebrar. Vem depois de .balao-linhas e .balao-tit: mesma força, vence pela ordem */
.balao-flutuante.balao-uma-linha{white-space:pre;max-width:min(720px,calc(100vw - 16px))}
@media (max-width:600px){.balao-flutuante.balao-uma-linha{white-space:pre-line;overflow-wrap:anywhere}}
/* A BOLINHA DO VÍNCULO na lista de viagens (26/09/2026): no lugar do chip com texto. Verde = automático (confiança Alta), âmbar = automático abaixo de Alta, azul = manual; o balão diz qual, quem e quando. 28/10/2026 (11ª rodada): apoiada na linha de base e não no `middle` (que mira o meio do «x»), os 9 px dela vão do pé à altura das maiúsculas e ela fica no meio das letras do nome e dos algarismos do prefixo (o `middle` a deixava 1 px abaixo) */
.pt-bol{display:inline-block;position:relative;width:9px;height:9px;margin-right:6px;border-radius:50%;vertical-align:baseline;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.pt-bol-ok{background:var(--ok)}
.pt-bol-info{background:var(--info)}
.pt-bol-alerta{background:var(--alerta)}
html.dark .pt-bol{box-shadow:0 0 0 1px rgba(234,240,248,.25)}
/* O «+N» DOS MOTORISTAS (28/10/2026, Alan: "uma bolinha com o +1… uma viagem com 5 motoristas, o nome e logo à direita a bolinha com o +4"): logo depois do nome, na linha dele (a matrícula segue embaixo); cinza do texto de apoio com o texto na cor do fundo, para valer nos dois temas
   e não parecer a bolinha do vínculo (verde, âmbar, azul) nem um alerta (vermelho). Pequena como a contagem dos alertas (.pt-notif): 17 px, redonda com 1 dígito e uma pílula com 2 */
.pt-mais-mot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:17px;min-width:17px;margin:-1px 0 -1px 6px;padding:0 5px;border-radius:9px;background:var(--muted);color:var(--surface);font-size:10px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;vertical-align:1px;white-space:nowrap;cursor:default}
/* ALINHADA COM O NOME (28/10/2026, 11ª rodada, Alan: "mais alinhado com o nome do motorista… e centraliza o valor dentro da bolinha verticalmente"): o nome é em MAIÚSCULAS e o `middle` mira o meio do «x» (letra minúscula), a bolinha ficava cerca de 1 px abaixo do meio das letras (medido nos pixels, com a Manrope do aplicativo e com a Segoe UI); subir 1 px põe o centro dela no centro das letras.
   O VALOR NO MEIO: centrar o texto pela caixa da linha nunca é exato, porque cada fonte reparte a altura de um jeito (a Manrope do aplicativo o deixa 0,5 px alto, a Segoe UI 0,5 px baixo); onde o navegador apara a caixa do texto até a altura dos algarismos (text-box: Chrome/Edge 133+, Safari 18.2+), a bolinha vira bloco e a LINHA DE BASE do valor fica a 12 px do alto dela (enchimento de cima = 12 px − a altura das maiúsculas, uns 4,8 px): o valor cai no meio, qualquer que seja a fonte do aparelho. Sem esse recurso fica o centro pela linha (a diferença é de meio pixel).
   POR QUE 12 PX (16ª rodada, Alan: "o texto +3 não tá centralizado dentro da bolinha"): o enchimento era (17 px − maiúsculas) / 2, que põe a linha de base a 12,1 px — número QUEBRADO. O navegador arredonda a caixa da bolinha e a linha de base CADA UM para o seu pixel do aparelho, e conforme a posição da bolinha na tela o texto descia 1 pixel
   (medido em 20 posições e nos zooms de 100 a 200%: até 0,8 px de desvio, quase sempre para baixo — sobretudo nos 125% e 150% do Windows). Com 12 px a linha de base cai num pixel INTEIRO do aparelho em 100, 125, 150, 175 e 200% (12 × 1,25 = 15; × 1,5 = 18; × 1,75 = 21; × 2 = 24) e o texto fica no mesmo lugar da bolinha em qualquer posição */
/* NÃO ENCOLHER DE NOVO (04/11/2026): numa noite ela teve 9 px (a altura das maiúsculas, a pedido de «a mesma altura da linha da letra») e o Alan não gostou: «pode deixar como tava antes». Voltou aos 17 px acima, com a linha de base do valor a 12 px. É a mesma bolinha do «+N» dos VEÍCULOS (.pt-mais-vei), logo depois do prefixo, na lista e no cartão da viagem */
@supports (text-box:trim-both cap alphabetic){
  .pt-mais-mot{display:inline-block;text-align:center;padding:calc(12px - 1cap) 5px 0;text-box:trim-both cap alphabetic}
}
/* OS ÍCONES DOS RÓTULOS EM VERMELHO (Alan, 26/09/2026: "você colocou os ícones cinza; o ideal é em vermelho, para ficar padrão"): o mesmo tom dos títulos dos cartões. O "i" do por que segue discreto (regra própria) */
.pt-kpi-rot > .icon{color:var(--brand)}
/* (o vermelho cheio nos botões de trocar/alocar durou uma noite: 26/09/2026, Alan: "não ficou bom essa cor" — voltaram ao contorno discreto de sempre) */
@media (pointer:coarse){.pt-bol::after{content:"";position:absolute;inset:-8px}}
.balao-leg-item{display:flex;align-items:center;gap:7px}
.balao-leg-ponto{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px #0002}
.balao-leg-ponto.lg-ok{background:#1ea254}
.balao-leg-ponto.lg-par{background:#5f7d9c}
.balao-leg-ponto.lg-stale{background:#dd8f10}
/* O "N cadastrados" e o "N veículos no mapa" SAÍRAM da barra (Alan, 05/10/2026: "aqui não precisamos desses... pode remover"). Ficou o "Tempo real", o "Atualizado" e, só quando há um
   veículo em foco, o aviso "só o X no mapa" (escondido pelo atributo hidden, que a regra de display do .sep não pode vencer) */
.map-status .sep[hidden],.map-status #fmBarraVeic[hidden]{display:none}

/* Marcadores na linguagem de status (verde=movimento, azul=parado,
   ambar=desatualizado) */
.fm-marker{position:relative;width:24px;height:24px;border-radius:50%;background:#1ea254;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;transition:box-shadow var(--t-rapida)}
.fm-marker.off{background:#5f7d9c}
.fm-marker.stale{background:#dd8f10}
.fm-marker.selected{outline:3px solid var(--brand);outline-offset:1px}
/* SELECIONADO PULSA NO MAPA DA FROTA (15/09/2026, Alan: "em vez desse círculo
   vermelho, uma animação pulsante que sai da bolinha do veículo, igual ao Painel
   da agência" — em teste). Mesma onda do telão (pnHalo), num pseudo-elemento
   atrás da bolinha: não disputa o box-shadow do marcador. Só no #mapaCanvas; o
   mini-mapa da Pontualidade mantém o anel e a pulsação cinza do "ao vivo". */
#mapaCanvas .fm-marker.selected{outline:none}
/* O PULSO É DE QUEM ESTÁ AO VIVO E É VERDE (Alan, 01/10/2026: "se não é uma localização em realtime (verde ou azul) não tem o pulso; e a cor do pulso é melhor verde do que
   vermelho, porque remete a algo online"): só o marcador verde (em movimento) ou azul (parado) pulsa — o âmbar (posição desatualizada) NÃO é tempo real e pulsar ali diria
   o que não é verdade (a mesma regra do halo cinza `.aovivo`). O verde é o do "online" do sistema (o selo do telão, pnSeloPulso). O selecionado desatualizado fica marcado
   com um anel PARADO âmbar, para a seleção não sumir */
#mapaCanvas .fm-marker.selected:not(.stale)::after{content:"";position:absolute;inset:-2px;border-radius:50%;z-index:-1;pointer-events:none;animation:fmSelecionadoPulsa 2.2s ease-out infinite}
#mapaCanvas .fm-marker.selected.stale{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 5px rgba(221,143,16,.4)}
@keyframes fmSelecionadoPulsa{0%{box-shadow:0 0 0 0 rgba(47,191,113,.55)}70%{box-shadow:0 0 0 26px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
/* AO VIVO (06/09/2026): o carro que está sendo acompanhado agora pulsa igual
   ao ponto "atual" da linha do tempo — mesma leitura nas duas telas. O halo é
   cinza neutro de propósito: a cor do marcador continua contando o status.
   A sombra de apoio do marcador é mantida em todos os quadros. */
@keyframes fmPulsa{
  0%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 3px rgba(27,31,39,.30)}
  70%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 15px rgba(27,31,39,0)}
  100%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 3px rgba(27,31,39,0)}
}
.fm-marker.aovivo{animation:fmPulsa 1.8s ease-out infinite}
.fm-marker-bus{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fm-marker-seta{position:absolute;inset:-7px;pointer-events:none}
.fm-marker-seta::before{content:"";position:absolute;top:-2px;left:50%;margin-left:-4px;border:4px solid transparent;border-bottom:7px solid #1b1f27}

/* Clusters na identidade do sistema (sobrepoe o tema padrao do plugin) */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(27,31,39,.2)}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--dark);color:#fff;font-weight:700;font-family:inherit}
.marker-cluster span{line-height:30px}

/* Balaozinho do veiculo (hover) */
/* balão deslizado para caber no mapa (tooltipsDentroDoMapa): a setinha volta a
   apontar para o ponto, sem sair do próprio balão */
.leaflet-tooltip-top::before,.leaflet-tooltip-bottom::before{left:clamp(10px,calc(50% - var(--tt-dx,0px)),calc(100% - 10px))}
.leaflet-tooltip-left::before,.leaflet-tooltip-right::before{top:clamp(10px,calc(50% - var(--tt-dy,0px)),calc(100% - 10px))}
/* (22/10/2026) balão que não coube nem em cima nem embaixo e foi deslizado também na vertical (tooltipsDentroDoMapa): a setinha já não encostaria no ponto — sai */
.leaflet-tooltip[data-sem-seta]::before{display:none}
.leaflet-tooltip.fm-tip{background:var(--dark);color:#fff;border:0;border-radius:8px;box-shadow:0 4px 14px rgba(10,14,20,.35);padding:6px 11px;font-family:inherit;white-space:nowrap}
.fm-tip b{font-size:12.5px;letter-spacing:.01em}
.fm-tip .tip-pos{display:block;font-size:10.5px;color:#b9c0cb;margin-top:1px;white-space:nowrap}
.leaflet-tooltip-top.fm-tip::before{border-top-color:var(--dark)}
.leaflet-tooltip-bottom.fm-tip::before{border-bottom-color:var(--dark)}
.leaflet-tooltip-left.fm-tip::before{border-left-color:var(--dark)}
.leaflet-tooltip-right.fm-tip::before{border-right-color:var(--dark)}
/* balão de texto longo (vão de GPS, buraco do traçado; 25/09/2026, Alan: "o texto está muito grande e às vezes corta na lateral do mapa"): quebra em linhas
   dentro de uma largura máxima, em vez da linha única do Leaflet (nowrap), que passava da borda do mapa */
/* O BALÃO DA CERCA: o nome na 1ª linha e o tipo na de baixo, cada um com o rótulo apagado (Alan, 06/10/2026) — vale no claro e no escuro (o rótulo só abaixa a opacidade do texto do balão) */
.cerca-tip,.cerca-tip-linha{display:block;white-space:nowrap}
.cerca-tip-rot{margin-right:6px;font-size:.88em;font-weight:600;letter-spacing:.02em;opacity:.62}
.leaflet-tooltip.pt-tip-quebra{white-space:normal;width:max-content;max-width:min(300px,78vw);line-height:1.35;text-wrap:pretty}

/* ── Inspetor do veiculo (drawer) ───────────────────────── */
/* A LARGURA DO INSPETOR MORA NUMA VARIAVEL SO (29/09/2026): o proprio painel (.drawer) e os controles que andam para a esquerda dele quando abre
   (barra do mapa, atribuicao do Leaflet, faixa de status) leem a MESMA expressao — nenhum numero solto que possa divergir. A % vale a largura da
   .mapa-area nos dois usos (o painel e a barra tem essa area como referencia). Deitado no celular a variavel vale outra coisa (bloco DEITADO, com o entalhe) */
.mapa-area{--fm-gaveta-w:min(344px,94%)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:var(--fm-gaveta-w);z-index:810;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(105%);transition:transform var(--t-media);display:flex;flex-direction:column;overflow-y:auto}
.drawer.aberta{transform:none}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:14px 16px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.drawer-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.drawer-head p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.drawer-situ{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
/* nome e botões dividem a 1ª linha; placa, situação e aviso usam a largura toda */
.drawer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}
.drawer-head>:not(h2):not(.drawer-head-acoes){grid-column:1/-1}
/* "Atualizar": pergunta à MiX a posição mais recente do veículo */
.drawer-head-acoes{display:flex;align-items:center;gap:4px;margin:-2px -6px -2px 0}
.drawer-atualizar{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px;font-weight:600;padding:3px 10px 3px 8px;border-radius:999px;cursor:pointer;transition:background var(--t-rapida),border-color var(--t-rapida),opacity var(--t-rapida)}
.drawer-atualizar .icon{width:13px;height:13px}
.drawer-atualizar:hover:not(:disabled){background:var(--accent);border-color:var(--line-forte)}
.drawer-atualizar:disabled{opacity:.55;cursor:default}
.drawer-atualizar.girando{opacity:1}
.drawer-atualizar.girando .icon{animation:fmGira .9s linear infinite}
@keyframes fmGira{to{transform:rotate(360deg)}}
.drawer-aovivo{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
.drawer-aovivo-nova{color:var(--ok)}
.drawer-aovivo-erro{color:var(--alerta)}
.fechar-btn{border:0;background:none;font-size:21px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:var(--r-sm);opacity:.8;transition:background var(--t-rapida),opacity var(--t-rapida)}
.fechar-btn:hover{background:var(--accent);color:var(--ink);opacity:1}
.drawer-corpo{padding:4px 16px 16px}
.drawer-secao{padding:12px 0;border-bottom:1px solid var(--line)}
.drawer-secao:last-child{border-bottom:0}
.drawer-secao h3{margin:0 0 7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
/* bloco de telemetria em destaque: numeros grandes, rotulos discretos */
.insp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:2px 0}
.insp-stat{background:var(--surface);padding:9px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.insp-stat b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-stat b small{font-size:10.5px;font-weight:600;color:var(--muted)}
.insp-stat span{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
/* O BOTÃO DE DIA E HORA (o seletor da tela Histórico do veículo; nasceu no Trajeto do veículo do inspetor, que saiu em 28/10/2026): o ícone e o texto dele. Só tokens de cor (claro e escuro). */
.fm-traj-btn .icon{width:15px;height:15px;flex:none;color:var(--muted)}
.fm-traj-btn-txt{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
/* O CARTÃO FLUTUANTE de dia e hora (Alan, 25/09/2026: "o calendário pode ser flutuante; a hora, parecida com a do XP, mas com a cara do sistema, mais moderno"): mora no <body>, fora da gaveta (que rola e corta),
   com o calendário da casa em cima e a hora em dois relógios de rolar embaixo (seta, número grande, seta), atalhos e OK. Só tokens de cor (claro e escuro). */
.fm-pop{position:fixed;z-index:930;width:min(288px,calc(100vw - 16px));box-sizing:border-box;overflow-y:auto;background:var(--surface);border:1px solid var(--line-forte);border-radius:14px;box-shadow:var(--shadow-pop);padding:12px;display:flex;flex-direction:column;gap:12px}
.fm-pop .dp-dia{padding:7px 0}
.fm-pop-hora{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.fm-rel{display:flex;align-items:center;gap:6px;flex:none}
.fm-rel-col{display:flex;flex-direction:column;align-items:center;gap:3px}
.fm-rel-seta{display:grid;place-items:center;width:46px;height:22px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.fm-rel-seta:hover{background:var(--accent);color:var(--ink)}
.fm-rel-seta .icon{width:14px;height:14px}
.fm-rel-seta.cima .icon{transform:rotate(180deg)}
.fm-rel-in{width:46px;height:42px;box-sizing:border-box;padding:0;text-align:center;font:inherit;font-size:22px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface-2);border:1px solid var(--campo-borda);border-radius:10px}
.fm-rel-in:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 28%,transparent)}
.fm-rel-sep{font-size:22px;font-weight:700;color:var(--muted);padding-bottom:1px}
.fm-pop-atalhos{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.fm-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums}
.fm-chip:hover{background:var(--accent);border-color:var(--line-forte)}
.fm-chip.sel{border-color:var(--brand);color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.fm-pop-ok{margin:0;width:100%}
/* os atalhos de PERÍODO no alto do cartão (a tela Histórico do veículo, 28/09/2026: Hoje, Ontem, Últimas 12 h) — mexem no começo e no fim de uma vez */
.fm-pop-periodos{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.insp-nome{font-size:14px;font-weight:600;letter-spacing:.01em}
.fm-matricula{margin-top:2px;padding-bottom:0}
.fm-matricula b{font-variant-numeric:tabular-nums}
.linha{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px}
.linha span{color:var(--muted)}
.linha b{text-align:right;font-weight:600;word-break:break-all}
.texto-stale{color:var(--alerta)}
.drawer-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--brand);text-decoration:none}
.drawer-link:hover{text-decoration:underline}

/* ── Modais (padrao unico, transicao curta) ─────────────── */
@keyframes modalFundo{from{opacity:0}to{opacity:1}}
@keyframes modalEntra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.diag-overlay{position:fixed;inset:0;z-index:900;background:rgba(15,20,30,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:modalFundo .16s ease}
.diag-box{width:min(560px,100%);max-height:88vh;max-height:88dvh;overflow-y:auto;background:var(--surface);background-image:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 56%,var(--surface)));
  border:1px solid var(--campo-borda);border-radius:var(--r-lg);box-shadow:var(--shadow);animation:modalEntra .2s ease}
.diag-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 22px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.95));z-index:1}
.diag-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.diag-head p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.diag-corpo{padding:8px 18px 16px}
.diag-corpo h3{margin:14px 0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.diag-corpo table{width:100%;border-collapse:collapse;font-size:12.5px}
.diag-corpo td,.diag-corpo th{padding:4.5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.diag-corpo td:last-child{text-align:right;word-break:break-all}
/* tabelas de números do Diagnóstico (rotas lentas, guichê): a 1ª coluna é o nome, as outras são números alinhados à direita */
.diag-corpo table.diag-num td:not(:first-child),.diag-corpo table.diag-num th:not(:first-child){text-align:right;white-space:nowrap;word-break:normal;font-variant-numeric:tabular-nums}
/* O CORPO DO DIAGNÓSTICO ROLA SOZINHO (04/11/2026, Alan: "você precisa arrumar a barra de rolagem lateral porque do jeito que você deixou está destruindo o acabamento arredondado do modal"): a caixa rolava por inteiro e a barra nativa (15 px, um trilho cinza de ponta a ponta) corria por cima do cabeçalho e dos cantos arredondados. Como a janela do caso do Desempenho e as de detalhe (ds-caso-box, cf-box): a caixa não rola mais (`overflow:hidden` recorta no arredondado), o cabeçalho fica fixo e só o corpo rola, com a barra PRÓPRIA (rolagem-rail, ligada pelo app.js em SELETOR_ROLAGEM) por dentro do card */
.diag-box.dg-box{display:flex;flex-direction:column;overflow:hidden}
.diag-box.dg-box > .diag-head{flex:none;position:static}
.diag-box.dg-box > .dg-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.diag-box.dg-box > .dg-corpo:focus{outline:none}   /* focável só para o teclado rolar (tabindex -1): o contorno do foco não desenha a caixa inteira */

/* ── Paginas (historico, pontualidade) ──────────────────── */
/* A TELA USA A LARGURA TODA (10/09/2026: "tela de pontualidade tbm da pra
   melhorar pra ocupar melhor o espaco da tela... pq hj limita a largura do card
   principal"). O teto de 1280px deixava faixas brancas dos dois lados em
   monitor grande, e as tabelas daqui sao largas — pontualidade tem 12 colunas.
   Texto corrido continua com limite de leitura na propria tela (.doc-corpo,
   .prm-intro): linha de 1900px nao se le. */
/* o respiro de BAIXO é o mesmo das laterais (Alan, 06/10/2026: "esse gap que fica no rodapé do último card... não acho que seja padrão com os outros espaços que temos nas laterais ou topo"): eram 24 px contra 12 */
.tela-pagina{flex:1;overflow-y:auto;padding:0 var(--pag-lateral) var(--pag-lateral);max-width:none;width:100%;margin:0 auto}
/* a página que TERMINA num cartão (data-fim, marcarFimDaPagina em app.js): o cartão já traz a margem de baixo (--pag-entre-cartoes), então o respiro de baixo é só o que falta para os 12 px dos lados — antes eram 22 */
.tela-pagina[data-fim="cartao"]{padding-bottom:calc(var(--pag-lateral) - var(--pag-entre-cartoes))}
/* A BARRA DA PÁGINA TAMBÉM É A PRÓPRIA (Alan, 23/10/2026: "essa barra de rolagem lateral não tá legal... dava pra ser mais minimalista... e barra de rolagem jamais passa por cima do topo/cabeçalho do sistema"): a nativa (15 px, trilho cinza de ponta a ponta, ao lado do
   cabeçalho e do avatar) é escondida e o rail fino das tabelas (rolagem-rail, ligado pelo app.js em SELETOR_ROLAGEM) corre só ABAIXO do cabeçalho da página — nunca estilizada: a nativa some e é substituída */
.tela-pagina{scrollbar-width:none}
.tela-pagina::-webkit-scrollbar{display:none}
/* a barra do topo do Jornadas: 56px, clara, colada no alto enquanto a página rola */
.pagina-cab{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:56px;
  margin:0 calc(-1 * var(--pag-lateral)) var(--pag-cab-respiro);padding:8px var(--topo-usuario-vao) 8px calc(var(--pag-lateral) + 6px);background:var(--surface);background-image:var(--topo-fundo);border-bottom:1px solid var(--topo-borda);box-shadow:var(--topo-sombra)}
.pagina-cab h1{margin:0;font-size:18px;line-height:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.pagina-cab .chip{margin-bottom:0}
.pagina-cab p{margin:0;color:var(--muted);font-size:12px;line-height:16px}
/* TÍTULO EM CIMA, TEXTO DE APOIO EMBAIXO (Alan, 28/09/2026: "em todas as páginas que costumam ter um texto descritivo, o ideal é alocar este texto abaixo
   do texto principal, visando manter a altura desta seção com a mesma altura da seção do logo"): o mesmo .cab-titulo do Mapa da Frota — 26 + 16 px com
   6 px em cima e embaixo = os 56 px da faixa do logo (.snav-marca). O selo e o botão de ajuda seguem na linha do título; o texto fica numa linha só, com
   reticências (o balão o lê inteiro quando corta — varrerRolagens) */
.pagina-cab:has(> .cab-titulo){padding-top:6px;padding-bottom:6px}
.pagina-cab > .cab-titulo{flex:1 1 0}
.cab-titulo-linha{display:flex;align-items:center;gap:8px 10px;height:26px;min-width:0}
.cab-titulo-linha > *{flex:none}
/* ── HISTÓRICO DO VEÍCULO (refeita em 28/09/2026: veículo e período com dia E hora, os números em cima, o mapa do trajeto embutido, a tabela sem o previsto) ──
   Os filtros NUMA linha no computador: o Veículo mais largo, De e Até (o botão do seletor do Trajeto do veículo: "28/09/2026 · 14:32" ou "Agora"), o Consultar e o
   Limpar na ponta — a linha nunca quebra por causa do ícone; os campos cedem (o texto do botão corta com reticências) */
@media (min-width:761px){.campo-grupo.campo-grupo-linha-unica.ht-filtros{flex-wrap:nowrap}}
/* AS QUATRO LISTAS DO TOPO (28/10/2026, Alan: "mais filtros, talvez os mesmos do Mapa da Frota"): Empresa, Setor de atividade, Núcleo e Alocação numa grade só delas, na linha de CIMA da do Veículo; o lugar já está reservado
   quando a tela desenha (a frota da MiX chega depois) */
.campo-grupo.ht-niveis{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px}
.campo-grupo.ht-niveis[hidden]{display:none}
.ht-niveis > .campo{min-width:0}
.campo-grupo.ht-filtros > .campo.ht-campo-veiculo{flex:1.6 1 0;min-width:100px}
.campo-grupo.ht-filtros > .campo.ht-campo-periodo{flex:1 1 0;min-width:136px}
/* medido (28/09/2026, página com o HTML real em 1920, 1366, 1190, 980 e 901 px): em 1190 com o menu aberto o "28/09/2026 · 00:00" só cabe sem o ícone, e até 1100 sem
   a setinha e com a letra de 12,5 px; em 901 (o menu lateral aberto, a menor largura com ele) a linha cabe nos 560 px com esses pisos. Os números da faixa descem para 17 px */
@media (max-width:1280px){.ht-filtros .fm-traj-btn > .icon{display:none}.pt-kpis.ht-kpis-periodo .pt-kpi b{font-size:17px}}
@media (max-width:1100px){.ht-filtros .ht-dh .fm-traj-btn{padding:0 8px;font-size:12.5px}.ht-filtros .fm-traj-btn .dp-seta{display:none}}
.campo-grupo.ht-filtros > .campo-acoes.ht-acoes{flex:none;gap:8px;margin-left:0}
.ht-filtros .ht-dh,.ht-filtros .ht-dh .dp-wrap{display:block;min-width:0}
.ht-filtros .ht-dh .dp-input{width:100%;min-width:0;box-sizing:border-box;padding:0 10px}
.ht-filtros #htBuscar{margin-top:0;height:36px}
.ht-aviso{flex:1 1 100%;margin:0;font-size:12px;line-height:1.4;color:var(--erro)}
/* o mapa na largura toda, alto o bastante para ler o trajeto (tela cheia pelo botão da barra); o recado ("Buscando…", "Nenhuma posição…") no meio dele */
.ht-mapa-area{position:relative;margin-top:8px;isolation:isolate;scroll-margin-top:72px}
#htMapa{height:clamp(360px,55vh,640px);border-radius:10px;overflow:hidden;background:#dfe3e8}
#htMapa .leaflet-overlay-pane{transition:opacity .22s ease-out}
#htMapa.pt-mini-voando .leaflet-overlay-pane{opacity:0;transition-duration:.06s}
.ht-mapa-area.ht-mapa-cheio{position:fixed;inset:0;z-index:940;margin:0;background:var(--surface)}
.ht-mapa-area.ht-mapa-cheio #htMapa{height:100%;border-radius:0}
.ht-mapa-estado{position:absolute;left:50%;top:50%;z-index:790;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:8px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-forte);box-shadow:var(--shadow-pop);color:var(--ink);font-size:12.5px;font-weight:600;text-align:center;pointer-events:none}
.ht-mapa-nota{margin:8px 0 0}
/* cada aviso do mapa no seu parágrafo (revisão de 28/09/2026: a regra TEXTO EM FRASES — juntos, viravam um bloco corrido) */
.ht-mapa-nota > p{margin:0}
.ht-mapa-nota > p + p{margin-top:4px}
/* o fuso das pontas do trecho sem posição (o balão do tracejado cinza do Histórico): a mesma linha pequena das bolinhas, embaixo */
.leaflet-tooltip.pt-tip-quebra .tip-fuso{display:block;font-size:9.5px;color:var(--muted);opacity:.8;margin-top:2px}
.ht-selo{margin-left:auto;min-width:0;font-size:11.5px;line-height:1.3;color:var(--muted);text-align:right}
.ht-selo-alerta{color:var(--alerta)}
.ht-passagens-sub{font-size:12px}
/* a tabela das passagens rola dentro da própria caixa (a barra própria, rolagem-rail), com o cabeçalho preso; a linha marcada pelo clique na cerca vem para a vista abaixo dele */
.ht-rol-tela{max-height:min(560px,70vh)}
.ht-rol-tela thead th{position:sticky;top:0;z-index:2}
.ht-rol-tela tbody tr{scroll-margin-top:44px}
.pt-folga.ht-marca-aviso{color:var(--alerta);background:var(--alerta-fundo)}

/* ── Cards e campos ─────────────────────────────────────── */
.cartao{background:var(--surface);background-image:var(--cartao-fundo);border:1px solid var(--cartao-borda);border-radius:var(--r-lg);padding:15px 16px 16px;
  box-shadow:var(--sombra-cartao);margin-bottom:var(--pag-entre-cartoes)}
.cartao-titulo{margin:0 0 10px;font-size:14px;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.cartao-ident{margin:2px 0 8px;font-size:12px;line-height:16px;color:var(--muted)}
.cartao-cab .cartao-titulo{margin-bottom:2px}
/* barra de filtros avulsa (Cercas a cadastrar): em LINHA. Nunca teve regra de
   layout e empilhava um campo por linha; com os campos de 36px do tema isso
   ocupava meia tela */
.cartao.filtros{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 16px}
.cartao.filtros .pn-acoes{margin-left:auto}
.cartao.filtros .panel-btn{margin-top:0}
.btn-icone{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);color:var(--muted);cursor:pointer;transition:background 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out}
/* hover só com mouse de verdade (16/09/2026): no toque o :hover fica preso no
   último botão tocado, com o ícone levantado e a cor trocada */
@media (hover:hover){
  .btn-icone:hover:not(:disabled){background:var(--surface);color:var(--ink);border-color:var(--line-forte)}
  .btn-icone:hover:not(:disabled) .icon{transform:translateY(-1px)}
}
.btn-icone:disabled{opacity:.5;cursor:default}
.btn-icone .icon{width:16px;height:16px;transition:transform 180ms ease-out}
.panel-btn{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--btn-contorno-borda);
  border-radius:var(--r-lg);background:var(--btn-contorno-fundo);color:var(--btn-contorno-texto);font:inherit;font-size:13.5px;line-height:20px;font-weight:600;white-space:nowrap;
  cursor:pointer;box-shadow:var(--shadow-soft);transition:background-color var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida)}
.panel-btn .icon{width:16px;height:16px}
.cartao-cab .panel-btn{height:32px;padding:0 10px;font-size:12px}
@media (hover:hover){.panel-btn:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}}
.panel-btn:disabled{opacity:.5;cursor:default}
.btn-primario,.panel-btn.btn-primario{color:var(--brand-texto);border-color:color-mix(in srgb,var(--brand) 76%,transparent);
  background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872))}
@media (hover:hover){
  .btn-primario:hover,.panel-btn.btn-primario:hover{color:var(--brand-texto);border-color:color-mix(in srgb,var(--brand) 76%,transparent);
    background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));filter:brightness(1.06);transform:translateY(-1px)}
  /* as cores de AÇÃO do Jornadas: limpar em vermelho, exportar em verde, só no hover */
  .btn-perigo:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.52 0.2 25),oklch(0.62 0.2 25));border-color:oklch(0.62 0.2 25);box-shadow:0 4px 11px rgba(207,75,88,.18)}
  .btn-sucesso:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.5 0.17 155),oklch(0.6 0.17 155));border-color:oklch(0.52 0.17 155);box-shadow:0 4px 11px oklch(0.56 0.17 155 / 20%)}
}
.btn-fantasma{height:32px;padding:0 10px;border:0;border-radius:var(--r-lg);background:transparent;color:var(--ink);font-size:12px;font-weight:600}
.btn-fantasma:hover{background:var(--accent);color:var(--accent-texto)}
/* OS BOTÕES DO PEDIDO COM COR E MOVIMENTO (Alan, 05/10/2026: "esses botões precisam ter cores sugestivas e ter animações... interessante ter animações nos ícones dos botões... um exemplo é a animação que fizemos no
   botão de abrir mapa... cada ícone com a animação que mais combina"). Cada ação tem a sua cor — Feito na MiX = verde, Recusar = vermelho, Cancelar = âmbar, Reforçar = azul —, em repouso tingida (borda, texto e fundo
   suaves, pelos tokens: claro e escuro sozinhos) e, no hover, cheia no degradê da cor com texto branco, um brilho que atravessa o botão (o mesmo do "Abrir o mapa") e o ÍCONE se movendo conforme o que ele diz: o visto SE
   DESENHA, o X gira e estala, o desfazer dá a volta para trás, o reforçar dá a volta para a frente. Ao apertar, o botão afunda. SÓ movimento em resposta ao gesto: nenhum relógio, nenhum laço. O "Confirmar" do formulário leva a cor da ação, cheio */
.cr-acao{--cr-cor:var(--ok);--cr-fundo:var(--ok-bg);--cr-g1:oklch(0.5 0.17 155);--cr-g2:oklch(0.6 0.17 155);position:relative;overflow:hidden;color:var(--cr-cor);border-color:color-mix(in srgb,var(--cr-cor) 45%,transparent);background:var(--cr-fundo);
  transition:background-color var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida),box-shadow var(--t-rapida),transform var(--t-rapida),filter var(--t-rapida)}
.cr-acao-recusa{--cr-cor:var(--erro);--cr-fundo:var(--erro-bg);--cr-g1:oklch(0.52 0.2 25);--cr-g2:oklch(0.62 0.2 25)}
.cr-acao-cancela{--cr-cor:var(--alerta);--cr-fundo:var(--alerta-fundo);--cr-g1:oklch(0.5 0.12 55);--cr-g2:oklch(0.6 0.13 55)}
.cr-acao-reforco{--cr-cor:var(--info);--cr-fundo:var(--info-bg);--cr-g1:oklch(0.5 0.15 258);--cr-g2:oklch(0.6 0.15 258)}
.cr-acao .icon{flex:none;transform-origin:center}
.cr-acao::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;opacity:0;transform:translateX(-140%) skewX(-20deg);background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent)}
.cr-acao-cheio{color:#fff;border-color:var(--cr-g2);background:linear-gradient(92deg,var(--cr-g1),var(--cr-g2))}
@keyframes crVisto{0%{stroke-dasharray:24;stroke-dashoffset:24;transform:scale(.85)}65%{stroke-dasharray:24;stroke-dashoffset:0;transform:scale(1.22)}100%{stroke-dasharray:24;stroke-dashoffset:0;transform:scale(1)}}
@keyframes crX{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-16deg) scale(1.18)}72%{transform:rotate(104deg) scale(1.1)}100%{transform:rotate(90deg) scale(1)}}
@keyframes crDesfaz{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
@keyframes crRepete{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}
@media (hover:hover){
  .cr-acao:hover:not(:disabled),.cr-acao:focus-visible:not(:disabled){color:#fff;border-color:var(--cr-g2);background:linear-gradient(92deg,var(--cr-g1),var(--cr-g2));box-shadow:0 4px 11px color-mix(in srgb,var(--cr-g2) 28%,transparent);transform:translateY(-1px)}
  .cr-acao:hover:not(:disabled)::after{animation:ptMapaBrilho 780ms cubic-bezier(.23,1,.32,1) 1 both}
  .cr-acao-ok:hover:not(:disabled) .icon{animation:crVisto 620ms cubic-bezier(.34,1.4,.64,1) 1}
  .cr-acao-recusa:hover:not(:disabled) .icon{animation:crX 560ms cubic-bezier(.3,.9,.4,1) 1}
  .cr-acao-cancela:hover:not(:disabled) .icon{animation:crDesfaz 700ms cubic-bezier(.45,.05,.55,.95) 1}
  .cr-acao-reforco:hover:not(:disabled) .icon{animation:crRepete 640ms cubic-bezier(.45,.05,.55,.95) 1}
  .cr-acao:disabled:hover{color:var(--cr-cor);border-color:color-mix(in srgb,var(--cr-cor) 45%,transparent);background:var(--cr-fundo)}   /* desabilitado (o Descartar enquanto o Aplicar tudo grava): o pouso do mouse não o tinge de vermelho (revisão de 08/10/2026) */
}
.cr-acao:active:not(:disabled){transform:translateY(0) scale(.97);filter:brightness(.97)}

/* Estados vazios e carregamento */
.vazio{padding:28px 16px;text-align:center;color:var(--muted)}
.vazio b{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--texto-2)}
.vazio span{font-size:12px}
@keyframes skelPulsa{0%,100%{opacity:1}50%{opacity:.5}}
.skel{background:var(--accent);border-radius:var(--r-md);animation:skelPulsa 2s cubic-bezier(.4,0,.6,1) infinite}
.skel-linha{height:13px;margin:8px 0}
.skel-bloco{height:72px;margin:10px 0}

/* Calendario proprio (o popup nativo destoa do sistema) */
.dp-wrap{position:relative;display:inline-block}
.dp-input{display:flex;align-items:center;justify-content:space-between;gap:8px;height:36px;font:inherit;font-size:13px;font-weight:500;color:var(--btn-contorno-texto);
  padding:0 12px;border:1px solid var(--campo-borda);border-radius:var(--r-lg);background:var(--campo-fundo);min-width:124px;cursor:pointer;text-transform:none;letter-spacing:-.01em;
  transition:background-color var(--t-rapida),box-shadow var(--t-rapida)}
.dp-input:hover{background:var(--surface)}
.dp-seta{margin-left:auto;font-style:normal;font-size:10px;color:var(--muted);transition:transform var(--t-rapida)}
.dp-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:700;background:var(--surface);border:1px solid var(--line-forte);border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);padding:8px;width:252px}
.dp-wrap.aberto .dp-input{border-radius:var(--r-lg);border-color:var(--campo-borda);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.dp-wrap.aberto .dp-input .dp-seta{transform:rotate(180deg)}
.dp-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dp-cab b{font-size:13px;text-transform:capitalize}
.dp-nav{width:28px;height:28px;border:1px solid var(--campo-borda);border-radius:var(--r-sm);background:var(--surface);font-size:15px;cursor:pointer;color:var(--muted)}
.dp-nav:hover{color:var(--ink);background:var(--accent)}
.dp-semana{display:grid;grid-template-columns:repeat(7,1fr);font-size:10px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:2px}
.dp-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dia{border:0;background:none;font:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);font-size:12.5px;padding:6px 0;border-radius:var(--r-sm);cursor:pointer;text-align:center}
.dp-dia:hover{background:var(--accent)}
.dp-dia.fora{color:#c2c7cf}
.dp-dia:disabled{color:#d5dae2;cursor:default;background:none}
.dp-dia.hoje{outline:0;background:var(--accent);color:var(--accent-texto);font-weight:600}
.dp-dia.sel{background:var(--brand);color:var(--brand-texto);font-weight:700}

/* legenda no topo direito do card da linha do tempo */
.proto-legenda-topo{margin:0 0 6px;gap:12px;font-size:11px}

/* Lista suspensa propria (painel estilizado; o popup do select nativo e do SO) */
.cs-wrap{position:relative;display:block;min-width:0}
.cs-btn{display:flex;align-items:center;gap:8px;width:100%;height:36px;font:inherit;font-size:13px;font-weight:500;color:var(--btn-contorno-texto);padding:0 12px;
  border:1px solid var(--campo-borda);border-radius:var(--r-lg);background:var(--campo-fundo);cursor:pointer;text-transform:none;letter-spacing:-.01em;min-width:0;
  transition:background-color var(--t-rapida),box-shadow var(--t-rapida)}
.cs-btn:hover{background:var(--surface)}
.cs-btn:disabled{opacity:.55;cursor:default}
.cs-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:left}
/* o painel DESCOLA 4px do campo e tem os cantos arredondados, como as listas do Jornadas (13/09/2026) */
.cs-panel{position:absolute;top:calc(100% + 4px);left:0;right:auto;min-width:100%;width:max-content;max-width:min(560px,calc(100vw - 48px));z-index:700;
  background:var(--surface);border:1px solid var(--line-forte);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:4px;max-height:560px;overflow-y:auto}
/* ~15 OPÇÕES À VISTA (Alan, 28/09/2026: "deixe as listas um pouco maior, pra mostrar pelo menos uns 15 resultados"): 560 px = 15 opções de 32 px + o
   rodapé Limpar/Todos das listas de várias escolhas (antes 320 px, ~8). Onde não couber, o csMontar abre para cima ou corta na área útil; no toque
   (opções de 44 px) segue o teto de 320 px / meia tela */
.cs-panel.cs-panel-dir{left:auto;right:0}
/* A LISTA ABERTA FICA POR BAIXO DA TELINHA DE CARREGAMENTO (.pt-carregando-viagem, 880) — como tudo o que está na área de conteúdo (Alan, 01/10/2026: "o blur não pegou por cima da lista suspensa,
   mas deveria pegar: tudo o que está na área de conteúdo da página ele deveria pegar"). Em 28/09/2026 ela subia a 892 para escapar do blur ao marcar vários itens; NÃO volte a subir: desde 01/10/2026 a telinha BLOQUEIA o mouse
   (pointer-events:auto), então a lista fica borrada e parada enquanto a tela carrega, e o clique que cai na telinha não fecha a lista (o ouvinte de clique-fora ignora .pt-carregando-viagem).
   Fica no 700 de sempre (a folha do celular deitado, abaixo, segue no 892) */
/* O PRÓPRIO CAMPO VIRA A BUSCA (Alan, 16/09/2026, cópia do FiltroDropdownMultiSelecao
   do Gestão de Jornadas): aberta a lista, o botão dá lugar a um campo "Buscar…"
   com lupa à esquerda e X à direita, na mesma caixa e no mesmo lugar */
.cs-campo{display:none;position:absolute;inset:0;z-index:2}
.cs-wrap.aberto > .cs-campo{display:block}
.cs-wrap.aberto.cs-com-busca > .cs-btn{visibility:hidden}
/* min-width:0 — dentro de .campo o input herdava min-width:150px e passava do seletor estreito */
.cs-campo .cs-busca{height:100%;min-width:0;font-weight:400;color:var(--ink);border-radius:var(--r-lg);padding:0 30px 0 34px;background:var(--campo-fundo);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.cs-campo .cs-lupa{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.cs-fechar{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font:inherit;font-size:18px;
  line-height:1;padding:2px 6px;border-radius:6px;cursor:pointer;text-transform:none}
.cs-fechar:hover{color:var(--ink);background:var(--surface-2)}
.lateral-selects .cs-campo .cs-busca{font-size:12.5px;padding-left:30px}
.lateral-selects .cs-campo .cs-lupa{left:9px;width:14px;height:14px}
/* várias escolhas: caixinha do Jornadas (16 px, raio 4, marcada no vermelho da
   marca com o visto branco) e rodapé Limpar / Todos preso no pé da lista */
.cs-op.cs-op-multi{display:flex;align-items:center;gap:9px}
.cs-op-multi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cs-check{position:relative;flex:none;width:16px;height:16px;border-radius:4px;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);
  background:var(--surface);transition:background-color var(--t-rapida),border-color var(--t-rapida)}
.cs-op-multi:hover .cs-check{border-color:color-mix(in srgb,var(--ring) 75%,transparent)}
.cs-op-multi.marcado .cs-check{background:var(--brand);border-color:var(--brand)}
.cs-op-multi.marcado .cs-check::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cs-rodape{position:sticky;bottom:-4px;display:flex;justify-content:space-between;gap:8px;margin:4px -4px -4px;padding:8px;border-top:1px solid var(--line);background:var(--surface)}
/* A ROLAGEM FICA SÓ NA LISTA (Alan, 16/09/2026: "a barra de rolagem tem que
   estar dentro da lista, e não dessa forma toda fora"), como no Jornadas: com
   caixinhas, o painel não rola — rola a .cs-lista, e o rodapé Limpar/Todos fica
   fixo embaixo, fora da barra. Barra fina e discreta em todas as listas. */
.cs-panel,.cs-lista,.esc-sug{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 38%,transparent) transparent}
.cs-wrap.cs-multi > .cs-panel{display:flex;flex-direction:column;overflow:hidden}
.cs-wrap.cs-multi > .cs-panel[hidden]{display:none}
.cs-multi .cs-lista{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cs-multi .cs-rodape{position:static;flex:none}
/* a lateral do Mapa começa pelos filtros (sem o título "Veículos") */
.lateral > .lateral-filtros:first-child{padding-top:12px}
.cs-acao{height:30px;padding:0 10px;border:1px solid var(--line-forte);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px;
  font-weight:500;text-transform:none;letter-spacing:0;cursor:pointer}
.cs-acao:hover{background:var(--surface-2)}
.cs-acao:disabled{opacity:.5;cursor:default}
/* seletor em forma de link (o "Ordenar" do mapa): sem campo de busca */
.cs-wrap.cs-link{display:inline-block}
.cs-link .cs-btn{height:auto;padding:0;border:0;background:none;color:var(--brand);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;gap:4px;max-width:190px}
.cs-link .cs-btn:hover{background:none}
.cs-wrap.cs-link.aberto .cs-btn{box-shadow:none}
.cs-link .cs-panel{min-width:210px;text-transform:none;letter-spacing:0}
html.dark .cs-link .cs-btn{color:var(--destructive)}
/* sem espaço embaixo (a lateral do mapa fica no pé da tela do celular): abre para cima */
.cs-panel.cs-panel-cima{top:auto;bottom:calc(100% + 4px)}
.cs-wrap.aberto .cs-btn{border-radius:var(--r-lg);border-color:var(--campo-borda);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
/* busca dentro da lista (listas longas): fica presa no topo enquanto a lista rola */
.cs-busca-wrap{position:sticky;top:0;z-index:1;background:var(--surface);padding:2px 2px 6px}
.cs-busca{display:block;width:100%;box-sizing:border-box;height:36px;font:inherit;font-size:13px;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--ink);
  padding:0 12px;border:1px solid var(--campo-borda);border-radius:var(--r-sm);background:var(--surface);outline:none}
.cs-busca:focus{border-color:var(--campo-borda);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.cs-op.foco{background:var(--accent);color:var(--accent-texto)}
.cs-wrap.aberto .dp-seta{transform:rotate(180deg)}
/* font-weight explicito: o painel vive dentro do label .campo (rotulo em
   negrito) e font:inherit puxava o 700 para todos os itens */
.cs-op{display:block;width:100%;border:0;background:none;font:inherit;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--ink);font-size:13.5px;line-height:20px;
  text-align:left;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
.cs-op:hover{background:var(--accent);color:var(--accent-texto)}
.cs-op.sel{background:var(--accent);color:var(--accent-texto);font-weight:600}
/* separador da reserva da busca: "de outros estados" */
.cs-grupo{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);border-top:1px solid var(--line);margin-top:4px}
.cs-vazio{padding:8px 11px;font-size:12.5px;color:var(--muted)}

/* consulta em LINHA UNICA: flex (nao grade) — os campos com uma opcao so
   ficam hidden e, numa grade fixa, os demais caiam nas colunas erradas e
   ficavam espremidos (reclamacao do usuario, 04/09/2026). Linha e o campo
   mais largo; Dia e Horario tem largura fixa; acoes encostam a direita. */
/* gap mais apertado (23/09/2026, Alan: "chegar mais perto um do outro pra
   ganharmos espaço") — os campos de 36px têm respiro interno de sobra */
.campo-grupo.campo-grupo-linha-unica{display:flex;flex-wrap:nowrap;gap:8px;align-items:flex-end}
.campo-grupo-linha-unica .campo{flex:1.1 1 0;min-width:0}
.campo-grupo-linha-unica .campo-dia{flex:0 0 136px}   /* cabe "Todos os dias" (05/09/2026) */
.campo-grupo-linha-unica .campo-linha{flex:1.8 1 0}   /* cedeu espaço no tema SIGO: os campos de 36px têm mais respiro interno */
.campo-grupo-linha-unica .campo-horario{flex:0 0 130px}
/* Serviço ENCOLHE (23/09/2026, "evitar que os filtros estourem a largura do
   card"): número curto ("87003"), não precisa de largura fixa como o
   Horário — cede espaço pros campos de texto (Linha, Origem, Destino) */
.campo-grupo-linha-unica .campo-servico{flex:0.9 1 90px}
/* Veículo (prefixo) à direita do Horário; o filtro Tipo saiu em 16/09/2026 */
.campo-grupo-linha-unica .campo-veiculo{flex:0 0 150px}
.campo-grupo-linha-unica .campo-empresa{flex:1.2 1 0;min-width:128px}
.campo-grupo-linha-unica .campo-origem,.campo-grupo-linha-unica .campo-destino{flex:1.9 1 0}   /* nomes de cidade são longos */
.campo-grupo-linha-unica .campo-acoes{flex:0 0 auto;margin-left:auto}
.campo-grupo-linha-unica .dp-wrap{display:block}
.campo-grupo-linha-unica .dp-input{width:100%;padding:8px 10px}
.campo-grupo-linha-unica .dp-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campo-acoes{display:flex;align-items:center;gap:4px;padding-bottom:1px}
@media(max-width:1080px){.campo-grupo.campo-grupo-linha-unica{flex-wrap:wrap}.campo-grupo-linha-unica .campo{flex:1 1 200px}.campo-grupo-linha-unica .campo-linha{flex:1 1 100%}.campo-grupo-linha-unica .campo-horario{flex:1 1 200px}.campo-acoes{justify-content:flex-end}}
/* FILTROS DA PONTUALIDADE: TODOS DO MESMO TAMANHO (23/09/2026, Alan: "cada filtro tem
   uma largura diferente... padronizar para ficar mais simétrico"). Os campos moram
   em .pt-filtros-campos, uma grade de colunas IGUAIS. Cabem 9 numa fileira só quando
   a grade tem ~1130px (cada coluna com o mínimo de 118px que o "Todas (171)" pede:
   viewport de 1551px com o menu aberto, 1363px com o menu recolhido); abaixo disso são
   5 colunas (5 + 4), sem campo sozinho na segunda fileira. Os botões de ação ficam à
   direita, na base da última fileira. Até 1080px o contêiner some (display:contents)
   e vale a quebra de sempre. */
.pt-filtros-campos{display:contents}
@media(min-width:1081px){
  .campo-grupo.campo-grupo-linha-unica.pt-filtros-grupo{flex-wrap:nowrap;align-items:flex-end}
  .pt-filtros-campos{display:grid;flex:1 1 0;min-width:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}
  .pt-filtros-campos > .campo{min-width:0}
}
@media(min-width:1551px){.pt-filtros-campos{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(min-width:1363px){.snav-recolhido .pt-filtros-campos{grid-template-columns:repeat(9,minmax(0,1fr))}}
/* COM DEZ CAMPOS À VISTA (o filtro Classe entrou em 25/09/2026; o JS põe data-campos com quantos aparecem): 5 + 5, sem campo sozinho
   na segunda fileira; dez numa fileira só quando cabem (10 × 118 px + os vãos = 1252 px de grade: viewport 1678 com o menu
   aberto, 1490 com ele recolhido). Com nove (Classe escondida por falta de dado) vale o de sempre. */
@media(min-width:1081px){.pt-filtros-campos[data-campos="10"]{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1678px){.pt-filtros-campos[data-campos="10"]{grid-template-columns:repeat(10,minmax(0,1fr))}}
@media(min-width:1363px){.snav-recolhido .pt-filtros-campos[data-campos="10"]{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1490px){.snav-recolhido .pt-filtros-campos[data-campos="10"]{grid-template-columns:repeat(10,minmax(0,1fr))}}
/* FILTROS DA PONTUALIDADE COM ONZE CAMPOS À VISTA (29/09/2026: o Setor de atividade E a Classe de verdade, cada um o seu campo; o JS põe data-campos com quantos aparecem).
   "Filtros numa linha": a barra não quebra por causa do campo novo, os campos se reajustam — 6 + 5, sem campo sozinho na última fileira; onze numa fileira só quando cabem
   (o 3º campo, o Setor de atividade, leva 1,3 fração: "Rodoviário (2.174)" não cabe em 118 px e saía cortado). A conta (revisão de 29/09/2026, medida no navegador: a grade tem
   a largura da tela menos 407 px com o menu aberto e menos 227 px com ele recolhido, e cada coluna precisa de 118 px para "Todas (171)"): onze colunas são 11,3 frações × 118 px + 10 vãos
   de 8 px = 1414 px de grade, isto é, tela de 1830 px com o menu aberto e de 1650 px com ele recolhido; seis colunas são 6,3 frações × 118 px + 5 vãos = 784 px, isto é, 1195 px com o
   menu aberto (o recolhido já cabe desde 1081). Entre 1081 e 1194 com o menu aberto são 4 colunas (4 + 4 + 3). Até 1080 px a barra quebra sozinha (display:contents) e a Linha, que toma a
   fileira toda com dez campos, só divide a fileira com onze: sozinha ela e a Classe deixavam duas fileiras com um campo só (5 fileiras contra 4).
   No celular em pé (o deitado, de altura até 520 px, tem a grade contada dele), com número ímpar de campos de meia largura (data-impar), a Linha toma a linha toda e o resto fecha em pares. */
@media(min-width:1081px){.pt-filtros-campos[data-campos="11"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1fr)}}
@media(min-width:1195px){.pt-filtros-campos[data-campos="11"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media(min-width:1830px){.pt-filtros-campos[data-campos="11"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(8,minmax(0,1fr))}}
@media(min-width:1081px){.snav-recolhido .pt-filtros-campos[data-campos="11"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media(min-width:1650px){.snav-recolhido .pt-filtros-campos[data-campos="11"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(8,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1080px){.campo-grupo-linha-unica .pt-filtros-campos[data-campos="11"] > .campo-linha{flex:1 1 200px}}
/* COM DOZE CAMPOS À VISTA (05/10/2026: o filtro Órgão entrou ao lado da Classe; o JS põe data-campos com quantos aparecem): 6 + 6, sem campo sozinho; doze numa fileira só quando cabem
   (12,3 frações × 118 px + 11 vãos de 8 px = 1539 px de grade: tela de 1950 px com o menu aberto e de 1770 px com ele recolhido); entre 1081 e 1194 com o menu aberto, 4 colunas (4 + 4 + 4) */
@media(min-width:1081px){.pt-filtros-campos[data-campos="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1fr)}}
@media(min-width:1195px){.pt-filtros-campos[data-campos="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media(min-width:1950px){.pt-filtros-campos[data-campos="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(9,minmax(0,1fr))}}
@media(min-width:1081px){.snav-recolhido .pt-filtros-campos[data-campos="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
@media(min-width:1770px){.snav-recolhido .pt-filtros-campos[data-campos="12"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(9,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1080px){.campo-grupo-linha-unica .pt-filtros-campos[data-campos="12"] > .campo-linha{flex:1 1 200px}}
/* COM TREZE CAMPOS À VISTA (04/11/2026, Alan: «aqui falta um filtro pra filtrar a linha»: a Escala do dia ganhou o filtro Linha, logo depois do Órgão, e manteve o Buscar; o JS põe data-campos com quantos aparecem): 7 + 6, sem campo sozinho; o Setor de atividade segue com a coluna mais larga (1,3 fração).
   A conta é a de sempre (cada coluna pede 118 px; a grade tem a largura da tela menos 407 px com o menu aberto e menos 227 px com ele recolhido): cinco colunas (5 + 5 + 3) são 5,3 frações × 118 + 4 vãos de 8 px = 657 px (tela de 1064 px com o menu aberto; recolhido, desde 884 px);
   sete colunas (7 + 6) são 7,3 × 118 + 6 vãos = 909 px (1316 px com o menu aberto, 1136 com ele recolhido); treze numa fileira só são 13,3 × 118 + 12 vãos = 1665 px (2072 px com o menu aberto, 1892 com ele recolhido). Até 1080 px a barra quebra sozinha (display:contents) e o Buscar toma a fileira toda (a regra de sempre da .campo-linha, como com dez campos) — desde 05/11/2026 ele é o ÚLTIMO campo (Alan: «esse campo poderia ser o último da lista... pq é diferente dos demais»): 3 + 3 + 3 + 3 + Buscar, sem campo pequeno sozinho */
@media(min-width:1081px){.pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(2,minmax(0,1fr))}}
@media(min-width:1316px){.pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(4,minmax(0,1fr))}}
@media(min-width:2072px){.pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(10,minmax(0,1fr))}}
@media(min-width:1081px){.snav-recolhido .pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(2,minmax(0,1fr))}}
@media(min-width:1136px){.snav-recolhido .pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(4,minmax(0,1fr))}}
@media(min-width:1892px){.snav-recolhido .pt-filtros-campos[data-campos="13"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(10,minmax(0,1fr))}}
@media (max-width:760px) and (min-height:521px){.pt-filtros-campos[data-impar] > .campo-linha{grid-column:1/-1}}
/* O RÓTULO DO CAMPO ESTREITO NÃO QUEBRA (revisão de 29/09/2026): "Setor de atividade" no campo da Escala (114 px a 1800, 62 px a 1471) virava 2 ou 3 linhas e a barra crescia de 55 para 70 e
   86 px; numa linha só, com reticências, o balão do próprio rótulo (data-balao) mostra o nome inteiro quando está cortado */
.campo-rotulo-corta{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao-consulta{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 16px}
/* min-width:0 (23/09/2026, "evitar que os filtros estourem a largura do
   card"): sem isso um flex item não encolhe além do conteúdo, e com 8 campos
   em .campo-grupo-linha-unica (nowrap) a SOMA das larguras mínimas passava
   da largura do cartão — o cartão estourava mesmo os campos internos já
   sabendo encolher */
.campo-grupo{display:flex;gap:12px;flex-wrap:wrap;flex:1;min-width:0}
.campo{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.campo select,.campo input{appearance:none;-webkit-appearance:none;height:36px;font:inherit;font-size:13px;line-height:20px;font-weight:500;text-transform:none;letter-spacing:-.01em;
  color:var(--campo-texto);padding:0 12px;border:1px solid var(--campo-borda);border-radius:var(--r-lg);background-color:var(--campo-fundo);min-width:150px;
  transition:background-color var(--t-rapida),box-shadow var(--t-rapida)}
.campo select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292e35' stroke-opacity='.5' stroke-width='2' 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:16px;cursor:pointer}
.campo select:hover,.campo input:hover{background-color:var(--surface)}
.campo select:focus,.campo input:focus{outline:none;border-color:var(--campo-borda);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
/* animacao de entrada ao trocar filtro (JS re-renderiza o conteudo; nos novos
   disparam a animacao de novo) */
@keyframes cartaoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.anima-entrada{animation:cartaoEntra .24s ease}

/* KPIs da tela de pontualidade: SEMPRE numa unica linha */
/* cada número numa caixa própria, como os indicadores do Jornadas */
.pt-kpis{display:grid;grid-template-columns:1.5fr 1.5fr 1.1fr .9fr .9fr 1fr;gap:12px;padding:0}
.cartao.pt-kpis{background:none;border:0;box-shadow:none;overflow:visible;padding:0}
.pt-kpi{position:relative;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;border:1px solid var(--cartao-borda);border-radius:var(--r-lg);
  background:var(--surface);background-image:var(--cartao-fundo);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.pt-kpi:first-child{border-left:1px solid var(--cartao-borda)}
.pt-kpi b{font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* > span: o rotulo e FILHO DIRETO. Sem o >, esta regra pegava tambem os spans
   de dentro do valor (o numero do servico, a hora da partida, o icone do "por
   que este carro") e os deixava 10px, cinza e em caixa alta (10/09/2026). */
.pt-kpi > span{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* acao discreta dentro de um KPI (ex.: "ver no mapa agora" do veiculo) */
.mini-acao{border:0;background:none;color:var(--brand);font:inherit;font-size:11px;font-weight:600;padding:0;margin-top:3px;cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.mini-acao .icon{width:12px;height:12px}
.mini-acao:hover{text-decoration:underline}
@media(max-width:900px){.pt-kpis{grid-template-columns:repeat(3,1fr)}}
/* faixa de KPIs do DIA (modo real): 6 colunas iguais por padrão, numeros maiores. A faixa com outro número de cartões diz quantos em `style="--n:N"` e ocupa a largura toda
   (15/10/2026, Alan: "ficou um gap vazio na direita do último card": Escala 5, Auditoria 4, DadosFlex 5 deixavam a(s) coluna(s) que sobrava(m) vazia(s)) */
.pt-kpis-dia{grid-template-columns:repeat(var(--n,6),1fr)}
.pt-kpis-dia .pt-kpi b{font-size:20px;font-weight:800;letter-spacing:-.02em}
/* TÍTULO EM CIMA DO NÚMERO (23/09/2026, Alan: "os títulos dessas fileiras de
   KPIs devem vir primeiro, acima dos números") — em toda faixa de KPIs do dia
   (Pontualidade, Escala, Auditoria, Histórico, Integrações). O markup segue
   número→título; o `order` só inverte o que se vê, e a faixa da viagem
   (.pt-kpis-viagem, já com o rótulo antes) não é tocada. */
.pt-kpis-dia .pt-kpi > span{order:-1}
/* título no alto e número embaixo: os cards da faixa têm a mesma altura, então os
   números ficam alinhados mesmo quando o título quebra em 2 ou 3 linhas (as
   Integrações têm títulos compridos) */
.pt-kpis-dia .pt-kpi{justify-content:space-between}
@media(max-width:900px){.pt-kpis-dia{grid-template-columns:repeat(3,1fr)}}
/* DADOSFLEX (15/10/2026, Alan: "o texto aparece cortado com reticências... e ficou um gap vazio na direita do último card"): a faixa tem 5 cartões, não 6 — as colunas seguem o
   --n do markup e ocupam a largura toda; o rótulo e o valor quebram de linha em vez de serem cortados (a mesma altura vale para todos, o número fica alinhado embaixo) */
.df-kpis{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.df-kpis .pt-kpi > span,.df-kpis .pt-kpi b{white-space:normal;overflow:visible;text-overflow:clip}
.df-kpis .pt-kpi > span{line-height:1.25}
@media(max-width:900px){.df-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.df-kpis .pt-kpi:last-child:nth-child(odd){grid-column:span 2}}
/* UM ÍCONE ANTES DO RÓTULO também na faixa do dia (Alan, 26/09/2026: "vamos padronizando todo o sistema"): o rótulo segue em bloco (com reticências) e o ícone entra em linha, sem somar altura */
.pt-kpis-dia .pt-kpi > .pt-kpi-rot{display:block;margin-bottom:0}
.pt-kpis-dia .pt-kpi-rot .icon{display:inline-block;vertical-align:-2px;margin-right:4px}


/* Tabela de viagens do dia (nivel 2) */
/* a tabela vive numa caixa própria dentro do cartão, com borda e cantos, como no Jornadas */
.tabela-rol{overflow:auto;margin:12px 0 0;padding:0;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
/* Barra de rolagem PRÓPRIA das tabelas (26/09/2026 — "a barra jamais por cima do cabeçalho"): a nativa some
   e o app.js desenha o rail/thumb SÓ entre o cabeçalho fixo e o pé (ligarRolagemPropria) */
.tabela-rol{scrollbar-width:none}
.rolagem-host{position:relative}
.rolagem-rail{position:absolute;z-index:6;border-radius:999px;background:transparent;pointer-events:none}
.rolagem-rail[hidden]{display:none}
.rolagem-rail.eixo-y{width:8px}
.rolagem-rail.eixo-x{height:8px}
.rolagem-thumb{position:absolute;top:0;left:0;border-radius:999px;background:color-mix(in srgb,var(--muted) 38%,transparent);touch-action:none;pointer-events:auto}
.rolagem-rail.eixo-y .rolagem-thumb{width:100%}
.rolagem-rail.eixo-x .rolagem-thumb{height:100%}
.rolagem-thumb:hover,.rolagem-thumb.arrastando{background:color-mix(in srgb,var(--muted) 62%,transparent)}
.pt-chips + .tabela-rol{margin-top:0}
/* as abas da API Totalbus moram no cabeçalho da página, à direita (sem a folga de baixo dos chips soltos) */
.pagina-cab > .tb-abas{margin:0;flex:none}
/* o parâmetro que é uma lista de códigos (as empresas do Totalbus): o campo é de texto, mais largo que o de número */
.prs-in.prs-in-codigos[type=text]{width:min(100%,280px);text-align:left}
.vg-tabela{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.35}
.vg-tabela th{text-align:left;padding:10px 12px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.25;
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--linha-tabela)}
.vg-tabela td{padding:8px 12px;border-bottom:1px solid var(--linha-tabela);white-space:nowrap;vertical-align:middle;transition:background-color 160ms ease}
.vg-tabela tr:last-child td{border-bottom:0}
.vg-tabela tbody tr{cursor:pointer}
.vg-tabela tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
@media (hover:hover){
  .vg-tabela tbody tr:hover td{background:color-mix(in srgb,var(--ring) 10%,var(--surface))}
  .vg-tabela tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--ring) 60%,transparent)}
}
.vg-tabela tbody tr.sel td{background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.vg-tabela tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.vg-tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.vg-tabela td b{font-weight:600}
.vg-tabela .sub{display:block;font-size:10.5px;color:var(--faint);font-weight:400}
/* cabeçalho que ordena (Viagens do dia): o botão herda a cara do título da coluna */
/* o botão de ordenar vale em TODA tabela desde 16/09/2026 (antes, só na lista da Pontualidade) */
.th-ordenar{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;border-radius:4px;transition:color var(--t-rapida)}
.th-ordenar:hover,.th-ordenar.ativa{color:var(--ink)}
.th-ordenar:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* a seta some da coluna que não ordena (Alan, 22/09/2026: "não se faz necessário
   mostrar... já é padrão, todas as tabelas se ordenam quando clica no cabeçalho") —
   só a coluna ATIVA mostra a seta. Era um triângulo desenhado em CSS; virou o
   chevron do sprite (Alan, mesmo dia: "não tem outros ícones melhores?") — o
   mesmo traço fino das outras setas do sistema, girado para cima ou para baixo */
.th-seta{display:inline-flex;flex:none;opacity:0;transition:opacity var(--t-rapida),transform var(--t-rapida)}
.th-seta .icon{width:14px;height:14px}
.th-ordenar[data-dir="asc"] .th-seta,.th-ordenar[data-dir="desc"] .th-seta{opacity:1}
.th-ordenar[data-dir="asc"] .th-seta{transform:rotate(180deg)}
/* veículo: o prefixo é o que se procura; a placa fica embaixo, bem apagada. SEM negrito (Alan, 02/10/2026: "não vejo por que deixar os prefixos em negrito... pode deixar com fonte normal igual os outros campos"):
   o prefixo tem o peso da célula, como o motorista e o serviço (o <b> sozinho o poria em negrito) */
.vg-tabela .pt-veic-cod{font-weight:inherit}
.vg-tabela .pt-veic-placa{margin-top:1px;letter-spacing:.02em}
.vg-prog{display:inline-flex;align-items:center;gap:6px}
.vg-prog i{display:block;width:52px;height:5px;border-radius:3px;background:#e8eaee;overflow:hidden;position:relative}
.vg-prog i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--info);border-radius:3px;transition:width var(--t-media)}
.vg-prog span{font-size:11px;color:var(--muted)}
/* PONTOS: O NÚMERO EMBAIXO DA BARRA (Alan, 05/10/2026: "esse número, ex: 6/9... pode colocar pra aparecer abaixo da barrinha azul... mais discreto... pq assim ganhamos espaço na largura da tabela"). Na tabela (fora do
   celular, onde os cartões mantêm a barra e o número lado a lado) a coluna passa a medir só a barra (52 px; eram 52 + 6 + ~28 do número) e o número vai embaixo dela, menor (10 px) e no cinza de apoio */
@media (min-width:761px) and (min-height:521px){
  .pt-c-pontos .vg-prog{flex-direction:column;align-items:flex-start;gap:3px}
  .pt-c-pontos .vg-prog span{font-size:10px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
}

/* balaozinho do trecho (hover na bolinha): distancia · velocidade media,
   no mesmo estilo escuro dos tooltips do mapa — a timeline fica limpa.
   Aparece ACIMA da bolinha (as informacoes de baixo continuam legiveis);
   position:fixed + coordenadas via JS porque a timeline tem rolagem propria
   que cortaria um balao absoluto para cima. */
.pt-balao{position:fixed;left:-9999px;top:-9999px;transform:translate(-50%,-100%);z-index:900;background:var(--dark);color:#fff;border-radius:8px;box-shadow:0 4px 14px rgba(10,14,20,.35);padding:8px 13px;display:flex;flex-direction:column;gap:1px;white-space:nowrap;text-align:center;opacity:0;visibility:hidden;transition:opacity var(--t-rapida);pointer-events:none;width:max-content;max-width:min(300px,calc(100vw - 16px))}
.pt-balao::before{content:"";position:absolute;top:100%;left:clamp(10px,calc(50% + var(--pt-dx,0px)),calc(100% - 10px));margin-left:-5px;border:5px solid transparent;border-top-color:var(--dark)}
.pt-balao b{font-size:11.5px}
.pt-balao span{font-size:10px;color:#b9c0cb}
.pt-balao i{font-style:normal;font-size:14px;font-weight:700;letter-spacing:-.01em;margin-top:1px}
/* o título, o trecho e a explicação QUEBRAM dentro dos 300 px (antes: uma linha de ~500 px com o resto centrado no meio de um vazio); o número (i) segue numa linha */
.pt-balao b,.pt-balao span,.pt-balao small{white-space:normal}
.pt-balao small{display:block;font-size:9px;color:#8f97a5}
.pt-no:hover + .pt-balao{opacity:1;visibility:visible}
/* mini-mapa expansivel da viagem (pontualidade) */
.pt-mini-area{position:relative;margin-top:12px;isolation:isolate}   /* a barra de botões (z-index 805) fica embaixo do cabeçalho fixo ao rolar; 12px: o mapa não cola no "Recolher" */
/* TELA CHEIA do mapa da viagem (15/09/2026): a classe manda, o fullscreen nativo é extra.
   z-index 940: acima do menu e do cabeçalho, abaixo do balão de ajuda (950) */
.pt-mini-area.pt-mini-cheio{position:fixed;inset:0;z-index:940;margin:0;background:var(--surface)}
.pt-mini-area.pt-mini-cheio #ptMiniMapa{height:100%;border-radius:0}
/* O VOO NÃO BORRA O TRAÇADO (26/09/2026): com a câmera voando, o Leaflet estica o desenho do canvas (traçado, pontos, cercas) até 14× — uma faixa vermelha borrada. Some rápido e volta suave, já nítido (mapaVoaSemBorrar) */
#ptMiniMapa .leaflet-overlay-pane{transition:opacity .22s ease-out}
#ptMiniMapa.pt-mini-voando .leaflet-overlay-pane{opacity:0;transition-duration:.06s}
#ptMiniMapa{height:340px;border-radius:10px;overflow:hidden;background:#dfe3e8}

/* evolucao do atraso (recuperacao visivel de relance) */

/* ── Timeline previsto × realizado ──────────────────────── */
.topo-beta{font-size:9px;font-weight:800;letter-spacing:.08em;background:var(--brand);color:#fff;border-radius:5px;padding:1.5px 4px;margin-left:5px;text-transform:uppercase}
.proto-selo{font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--alerta-fundo);color:var(--alerta);border:1px solid #f3dcb2;border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:middle}
/* sem barra de rolagem: os pontos se comprimem para caber na largura;
   overflow-x fica como valvula de escape para linhas com MUITOS pontos */
.proto-timeline{display:flex;align-items:flex-start;overflow-x:auto;padding:18px 2px 8px;margin-top:4px}
.pt-ponto{position:relative;display:flex;flex-direction:column;align-items:center;min-width:108px;flex:1}
.pt-trilho{position:absolute;top:7px;right:calc(50% + 9px);left:calc(-50% + 9px);height:4px;border-radius:2px;background:#e3e6eb}
.pt-trilho-verde{background:var(--ok)}
.pt-trilho-amarelo{background:#d99514}
.pt-trilho-vermelho{background:var(--brand)}
.pt-trilho-pendente{background:#e3e6eb}
/* O TRAÇO ANDANDO ATÉ A BOLINHA NOVA (Alan, 10/09/2026: "seria interessante ter
   uma animação, tipo a linha do tempo carregando até chegar na bolinha de onde
   ele está agora"). Só os trechos que ACABARAM de ser medidos ganham a
   animação; o resto da linha já está desenhado e não pisca. Os trechos entram
   em cascata (`--pt-passo`), então quando o ônibus recupera três localidades de
   uma vez dá para ver o traço passando por cada uma na ordem. */
@keyframes ptTrilhoAvanca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ptNoAcende{
  0%{transform:scale(.35);opacity:.2}
  60%{transform:scale(1.28);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes ptInfoEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pt-trilho-avancando{transform-origin:left center;animation:ptTrilhoAvanca .5s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--pt-passo,0) * .42s)}
.pt-ponto-novo .pt-no{animation:ptNoAcende .45s cubic-bezier(.34,1.4,.5,1) both;animation-delay:calc(var(--pt-passo,0) * .42s + .38s)}
.pt-ponto-novo .pt-info{animation:ptInfoEntra .4s ease both;animation-delay:calc(var(--pt-passo,0) * .42s + .44s)}
/* o ponto que virou o "agora" tem o halo pulsante de sempre; a animação de
   acender é `both`, então ela termina no estado final e devolve o nó ao pulso */
.pt-ponto-novo.atual .pt-no{animation:ptNoAcende .45s cubic-bezier(.34,1.4,.5,1) both,ptPulsa 1.8s ease-out .85s infinite}
.pt-no{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #0002;z-index:1;transition:transform var(--t-rapida)}
/* o ULTIMO ponto realizado e o "agora" da viagem: halo cinza PULSANTE
   (neutro de proposito — a cor do no continua contando o atraso) */
@keyframes ptPulsa{
  0%{box-shadow:0 0 0 2px #0003,0 0 0 4px rgba(27,31,39,.28)}
  70%{box-shadow:0 0 0 2px #0003,0 0 0 13px rgba(27,31,39,0)}
  100%{box-shadow:0 0 0 2px #0003,0 0 0 4px rgba(27,31,39,0)}
}
.pt-ponto.atual .pt-no{transform:scale(1.18);animation:ptPulsa 1.8s ease-out infinite}
.proto-timeline .pt-no{cursor:pointer}
@media (hover:hover){.proto-timeline .pt-no:hover{transform:scale(1.25)}}
/* O ARO DA LOCALIDADE EM FOCO TEM MOVIMENTO (Alan, 02/10/2026: "coloca uma animação melhor quando aparece a seleção vermelha e quando remove a seleção vermelha do foco da cerca clicada"). As duas cores do aro são
   variáveis da bolinha (--pt-foco-fundo, o anel claro que a separa do cartão, e --pt-foco-cor, o vermelho); o app.js as lê para a ENTRADA (ptFocoAnimar: o aro cresce da borda da bolinha com um pequeno excesso, assenta, e uma onda
   fina sai dele e some) e a SAÍDA é a transição daqui: sem a classe `foco` o box-shadow volta ao normal em 280 ms, o aro encolhendo e esmaecendo */
.proto-timeline .pt-no{--pt-foco-fundo:#fff;--pt-foco-cor:var(--vermelho,#de0013);transition:transform var(--t-rapida),box-shadow 280ms cubic-bezier(.4,0,.2,1)}
.proto-timeline .pt-no.foco{box-shadow:0 0 0 2px var(--pt-foco-fundo),0 0 0 5px var(--pt-foco-cor)}
/* o "agora" tem um halo pulsante (animação de box-shadow) que cobria o aro: em foco, o aro vale e o pulso espera */
.pt-ponto.atual .pt-no.foco{animation:none}
.pt-ponto.atual .pt-info>b{color:var(--ink)}
.pt-verde{background:var(--ok)}
.pt-amarelo{background:#d99514}
.pt-vermelho{background:var(--brand)}
.pt-pendente{background:#c2c7cf}
.pt-cinza{background:#c2c7cf}
/* semantica pedida pela operacao: adiantado = VERDE; pontual = AZUL */
.pt-adiantado{background:var(--ok)}
.pt-trilho-adiantado{background:var(--ok)}
.pt-txt-adiantado{color:var(--ok)}
.pt-pontual{background:#3f78b6}
.pt-trilho-pontual{background:#3f78b6}
.pt-txt-pontual{color:#3f78b6}
.proto-subtitulo{margin:20px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* nome da cidade nunca invade o vizinho (pedido do usuário, 05/09/2026):
   coluna mais larga, caixa do nome presa à coluna e quebra dentro da palavra
   só quando nem assim cabe */
.pt-info{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:7px;gap:1px;padding:0 5px;width:100%;box-sizing:border-box}
.pt-info>b{font-size:11px;line-height:1.25;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em;display:-webkit-box;max-width:100%;overflow-wrap:anywhere}
/* O que os dois horarios do ponto significam, escrito (10/09/2026). Discreto de
   proposito: e uma etiqueta de contexto, nao um dado — quem le a coluna ja
   entende sem que a palavra dispute atencao com a hora. */
/* NOME DA CERCA SEMPRE VISÍVEL, EMBAIXO DELA (Alan, 10/09/2026). Sem a caixa
   branca e a seta do tooltip padrão do Leaflet: aqui é uma etiqueta discreta,
   que acompanha a cerca sem disputar com o traçado. */
.pt-cerca-rotulo{background:rgba(255,255,255,.92);border:1px solid rgba(27,31,39,.14);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.13);color:#3d4450;font-size:10.5px;font-weight:600;line-height:1.15;padding:2px 6px;white-space:nowrap}
.pt-cerca-rotulo::before{display:none}   /* a seta do tooltip do Leaflet */
/* O ALERTA DA CERCA NÃO AUTORIZADA NO MAPA DA VIAGEM (28/10/2026, Alan: "um balãozinho, um indicativo, um alerta bem em cima do trajeto, onde fica essa cerca"): um balão vermelho com o escudo de alerta, com a ponta no centro da cerca (a ponta é a âncora do
   marcador); o texto abre ao passar o mouse ou tocar. O vermelho é o do erro da casa, o mesmo do traçado */
.pt-alerta-cerca{background:none;border:0}
.pt-alerta-cerca-balao{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:#de0013;color:#fff;box-shadow:0 2px 6px rgba(10,14,20,.4)}
.pt-alerta-cerca-balao::after{content:"";position:absolute;left:50%;top:100%;margin:-1px 0 0 -6px;border:6px solid transparent;border-top:8px solid #de0013;border-bottom:0}
.pt-alerta-cerca-balao .icon{width:17px;height:17px}
.leaflet-tooltip.pt-tip-alerta-cerca .pt-tip-alerta-tit{display:block;margin-bottom:2px;color:var(--erro)}
.pt-tipo{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.72;line-height:1;margin:1px 0 2px}
.pt-horas{font-size:10.5px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
/* ícones no lugar de "prev"/"real" (pedido do usuário, 05/09/2026): relógio =
   previsto, check = realizado; cinza neutro, sem cor de estado */
.pt-horas .icon{width:13px;height:13px;stroke-width:2.2}
.pt-horas .icon{color:#9aa3ad}   /* cinza neutro (pedido do usuário, 05/09/2026) */
.pt-horas b{font-weight:500;color:var(--ink)}   /* sem negrito (pedido do usuário, 05/09/2026) */
/* O LUGAR DA HORA REALIZADA no ponto que o ônibus ainda não passou (Alan, 13/10/2026: "removeu o espaço do realizado... era pra ter mantido alinhado com a linha de baixo"): o "não passou" fica na MESMA linha do "+1 min" / "no horário" dos pontos vizinhos. A linha segue reservada, sem nada visível: o mesmo ícone (vazio) e o mesmo texto (em branco) da hora de verdade, então a altura é sempre a mesma, em qualquer fonte ou zoom */
.pt-horas.pt-h-reserva{visibility:hidden}
.pt-atraso{font-size:11px;font-weight:700;margin-top:4px}   /* um respiro acima da diferença (pedido do usuário, 05/09/2026) */
/* "não passou" é AUSÊNCIA de medição, não atraso: cinza discreto e sem negrito
   (pedido do usuário, 07/09/2026). Vermelho em negrito puxava o olho para o
   ponto que menos tem o que contar, e competia com o atraso de verdade. */
.pt-atraso-discreto{color:var(--muted);font-weight:400}
/* "a cumprir" é o que ainda não aconteceu: sem negrito, como o "não passou"
   (pedido do usuário, 07/09/2026) — o peso fica só para o atraso medido */
.pt-atraso.pt-txt-pendente{font-weight:400}
.pt-txt-verde{color:var(--ok)}
.pt-txt-amarelo{color:#a15c00}
.pt-txt-vermelho{color:var(--brand)}
.pt-txt-pendente{color:var(--muted)}
.proto-legenda{display:flex;gap:16px;align-items:center;font-size:11.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.proto-legenda .pt-no{width:11px;height:11px;border-width:2px;margin-right:4px;vertical-align:-1px}

/* ── Jornada do motorista ───────────────────────────────── */
.jor-form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.jor-form label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.jor-form input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font:inherit;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink)}
.jor-form .panel-btn{margin-top:0}
/* HISTÓRICO DE CERCAS numa janela sobre o Mapa da Frota (25/09/2026): o dia, Hoje/Ontem, os números e a tabela das passagens — os mesmos da tela Histórico */
.jor-tabela{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
.jor-tabela th{text-align:left;padding:10px 12px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--linha-tabela)}
.jor-tabela td{padding:8px 12px;border-bottom:1px solid var(--linha-tabela)}
@media (hover:hover){.jor-tabela tbody tr:hover td{background:color-mix(in srgb,var(--ring) 10%,var(--surface))}}
/* visao detalhada / historico: colunas de horario e diferenca CENTRALIZADAS
   (primeira e ultima seguem alinhadas a esquerda/como definidas) */
.tabela-central th:not(:first-child):not(:last-child),
.tabela-central td:not(:first-child):not(:last-child){text-align:center}

/* ── Painel de análises ─────────────────────────────────── */
.an-box{width:min(860px,100%)}
.an-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
/* fundo BRANCO explicito: na tela de analises os cards vivem sobre o cinza
   do canvas — sem superficie propria pareciam flutuar */
.an-chip{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
.an-chip b{font-size:18px;line-height:1.15;letter-spacing:-.01em}
.an-chip span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.an-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-soft)}
.an-card h3{margin:0 0 10px!important}
.an-dica{font-weight:400;text-transform:none;letter-spacing:0;color:var(--brand)}
.an-linha{display:flex;align-items:center;gap:8px;padding:2.5px 0;font-size:12.5px;border:0;background:none;width:100%}
.an-linha.clicavel{cursor:pointer;border-radius:6px}
.an-linha.clicavel:hover{background:var(--brand-suave)}
.an-rotulo{width:110px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.an-trilho{flex:1;height:12px;background:#f0f1f3;border-radius:6px;overflow:hidden}
.an-trilho i{display:block;height:100%;background:var(--brand);border-radius:6px;min-width:2px}
.an-linha b{width:44px;text-align:right;font-size:12px}
.an-colunas{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:14px}
.an-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;min-width:0}
.an-col i{display:block;width:70%;max-width:44px;background:var(--brand);border-radius:5px 5px 0 0}
.an-col b{font-size:11px}
.an-col span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.an-nota{font-size:11.5px;margin:12px 0 0}
/* cada frase numa linha própria (frasesHtml, e o HTML escrito à mão): o ponto final divide o assunto em vez de emendar tudo num parágrafo só (26/09/2026) */
.frase{display:block}
/* o sentido da linha, discreto, à direita do nome (26/09/2026) */
.pt-c-linha .pt-linha-sent,.esc-c-linha .pt-linha-sent{color:var(--muted);font-weight:500;font-size:11px}
/* os atalhos Ontem/Hoje/Amanhã (+ Limpar) do calendário de período (26/09/2026): o grupo da esquerda se estica
   e absorve a sobra da largura — sem vão vazio dentro do painel (Alan: "olha os gaps vazios na direita") */
.pd-atalhos{display:flex;flex:1 1 auto;gap:6px}
.pd-atalhos .pd-acao{flex:1 1 0;padding:0 8px}
.pd-rodape{flex-wrap:wrap;row-gap:6px}
.pd-acoes .pd-acao{flex:1 1 auto}
.frase + .frase{margin-top:3px}
/* sem palavra órfã (Alan, 26/09/2026: "você quebra o texto do nada: uma linha com 10 palavras e a de baixo com uma"): o balão equilibra as linhas e o texto corrido quebra bonito (onde o navegador souber) */
.balao-flutuante{text-wrap:balance}
.an-nota,.pt-sub-detalhe,.pt-sem-medicao p{text-wrap:pretty}
@media(max-width:700px){.an-grid{grid-template-columns:minmax(0,1fr)}}

/* ── Responsivo ─────────────────────────────────────────── */
/* atalhos e gaveta só existem no celular */
.snav-barra,.snav-fundo,.snav-mais-conta{display:none}
@media(max-width:900px){
  /* MENU EMBAIXO (Alan, 10/09/2026: "o menu do sistema tem que ser na parte
     inferior, nao inventa moda querendo colocar menu no topo que fica ruim").
     16/09/2026: a barra que rolava de lado com 15 itens só mostrava uns 7, sem
     indicar o resto. Agora são até 4 atalhos (os do perfil) e "Menu", que sobe
     uma gaveta com o menu inteiro — o mesmo desenho do menu lateral. */
  /* A BARRA DE BAIXO NÃO RESERVA A ÁREA INTEIRA DO INDICADOR DO iPHONE (Alan, 26/09/2026: "no meu iOS você deixou um espaço branco abaixo dos menus, um gap desnecessário; daria pra baixar mais os menus"): a barra ia até a borda
     e ainda somava os ~34 px do indicador de baixo, com os ícones no alto e um vão vazio embaixo. O indicador é uma linha fina, a uns 8 px da borda: reservar só a parte que passa de 18 px deixa os rótulos livres e sobe o
     ganho de espaço para o conteúdo. Sem `env()` (navegador antigo) o vão é zero. */
  :root{--snav-baixo:0px}
  @supports (padding-bottom:env(safe-area-inset-bottom)){:root{--snav-baixo:max(0px,calc(env(safe-area-inset-bottom) - 18px))}}
  .app{flex-direction:column}
  .app-main{order:1}
  .snav{width:100%;height:calc(60px + var(--snav-baixo));flex:none;flex-direction:row;align-items:stretch;order:2;position:sticky;bottom:0;z-index:60;
    padding:0 4px var(--snav-baixo);   /* as laterais seguras já estão na .app */
    background:var(--surface);background-image:var(--topo-fundo);border-right:0;border-top:1px solid var(--topo-borda);box-shadow:0 -8px 18px rgba(20,24,30,.06)}
  /* gaveta aberta acima do avatar e do tema (890), abaixo dos modais (900) */
  .app.menu-aberto .snav{z-index:895}
  .snav-marca,.snav-rodape{display:none}
  .snav-barra{display:flex;flex:1;min-width:0;align-items:stretch;gap:2px}
  .snav-barra .snav-item{flex:1 1 0;min-width:0;width:auto;margin:0;flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;
    font-size:10.5px;line-height:1.15;font-weight:600;text-align:center;min-height:0}
  .snav-barra .snav-item .icon{width:22px;height:22px}
  .snav-barra .snav-rotulo{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .snav-barra .snav-item.ativa::before{left:25%;right:25%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 var(--r-full) var(--r-full)}
  .snav-mais{position:relative}
  /* MiX instável (âmbar) ou fora (vermelho): o selo do rodapé não aparece aqui */
  .snav-mais[data-mix="warn"]::after,.snav-mais[data-mix="blocked"]::after{content:"";position:absolute;top:8px;left:calc(50% + 8px);
    width:8px;height:8px;border-radius:50%;background:#d99514;box-shadow:0 0 0 2px var(--surface)}
  .snav-mais[data-mix="blocked"]::after{background:var(--brand)}
  /* solicitações pendentes (o número mora na gaveta): a bolinha no botão Menu, do outro lado da da MiX. Elemento PRÓPRIO, não ::before — o
     ::before é a barra da tela ativa (Menu fica .ativa nas telas fora dos atalhos, justo Alocações/Solicitações) e o ::after é o aviso da MiX */
  .snav-mais.snav-tem-conta .snav-mais-conta{display:block;position:absolute;top:8px;right:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
  .app.menu-aberto .snav-mais{color:var(--sidebar-acento-texto)}
  .snav-corpo{display:none}
  .app.menu-aberto .snav-fundo{display:block;position:fixed;left:0;right:0;top:0;bottom:calc(60px + var(--snav-baixo));z-index:61;
    background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .app.menu-aberto .snav-corpo{display:block;position:fixed;left:0;right:0;bottom:calc(60px + var(--snav-baixo));z-index:62;
    max-height:min(72dvh,640px);overflow-y:auto;overscroll-behavior:contain;padding:12px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left));
    background:var(--sidebar);background-image:var(--sidebar-fundo);border-top:1px solid var(--sidebar-borda);border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:0 -18px 38px rgba(15,23,42,.18);animation:snavSobe 220ms cubic-bezier(.23,1,.32,1)}
  .app.menu-aberto .snav-corpo .snav-item{min-height:44px}
  :root{--topo-usuario-vao:96px}   /* 12 + 32 do avatar + 8 + 32 do tema + 12 */
  .topo-usuario{top:calc(12px + env(safe-area-inset-top));right:12px}
  .topo-avatar{width:36px;height:36px}
  .topo-tema{top:0}
  .cab{padding:6px var(--topo-usuario-vao) 6px 12px}
  .cab-titulo h1{font-size:16px;line-height:24px}
  .cab > .cab-titulo p{display:none}
  .tela-pagina,.lista-veiculos,.drawer{overscroll-behavior-y:contain}
}
@keyframes snavSobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  /* celular: mapa em cima (order), lista embaixo; alturas por flex para
     NUNCA transbordar por cima do header/KPIs */
  .corpo{flex-direction:column}
  .mapa-coluna{order:1;flex:1;min-height:0}
  .mapa-area{order:1;flex:1;min-height:0}
  .lateral{order:2;flex:none;width:100%;border-right:0;border-top:1px solid var(--line);max-height:34vh;max-height:34dvh}
  /* empresa/núcleo/setor/alocação + situação não cabem em 34vh junto com a lista
     (16/09/2026: a lista ficava com 0 px): recolhidos atrás do botão Filtros; aberto,
     a lateral cresce e o mapa encolhe enquanto a pessoa filtra */
  /* 16 px: com menos, o Safari do iPhone dá zoom na tela ao tocar no campo */
  .cs-campo .cs-busca,.lateral-selects .cs-campo .cs-busca,.busca-wrap input{font-size:16px}
  .lateral.filtros-abertos{max-height:72vh}
  .kpis-topo{flex-wrap:nowrap}
  .kpi-topo{padding:7px 12px;min-width:86px}
  .kpi-topo b{font-size:17px}
  .tela-pagina{padding:0 12px 20px}
  .tela-pagina[data-fim="cartao"]{padding-bottom:calc(20px - var(--pag-entre-cartoes))}
  .pagina-cab{margin:0 -12px 12px;padding:8px var(--topo-usuario-vao) 8px 12px}
  /* o que ainda não couber (selo + botão Atualizar das Análises) desce para
     uma segunda linha do cabeçalho em vez de entrar embaixo do avatar */
  .cab{flex-wrap:wrap;row-gap:6px}
  .pagina-cab h1{font-size:16px;line-height:24px}
  .map-status .sep{display:none}
  /* a barra de baixo do mapa cabe na tela do celular: o que não couber desce para a linha de baixo (cada item segue inteiro), em vez de sair da tela e cortar o "cadastrados" */
  .map-status{max-width:calc(100% - 20px);flex-wrap:wrap;column-gap:10px;row-gap:2px}
}


/* ── Tela Integrações (prova de funcionamento) ─────────────── */
.int-explica{margin:6px 0 12px;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.int-explica code{background:#f1f2f4;padding:1px 5px;border-radius:5px;font-size:11.5px}
.int-kpis{margin:0 0 14px;border:0;border-radius:0;overflow:visible}
/* As duas colunas com a MESMA altura (07/09/2026: o gráfico tinha 96 px fixos e
   sobrava um vazio embaixo dele, ao lado da tabela de 300 px). A coluna vira
   flex vertical e as barras crescem até o pé da coluna. */
.int-duas{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.int-duas>div{display:flex;flex-direction:column;min-height:0}
.int-sub{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.int-sub .muted{font-weight:500;text-transform:none;letter-spacing:0}
.int-hist{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:stretch;padding:6px 4px 0}
.int-hist-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:11px;color:var(--muted)}
.int-hist-item small{font-size:10.5px;color:var(--muted);opacity:.85}   /* a contagem, que antes só existia no balão */
.int-hist-item b{font-size:13px;color:var(--ink)}
/* ── O REGISTRO DE EXECUÇÕES DAS INTEGRAÇÕES (06/10/2026, Alan: "falta um card com tabela de logs... pra saber se está saudável, se está demorando muito") ──
   Um cartão nas três telas de Integrações: no alto a SAÚDE de cada tarefa (fichas), embaixo a tabela das execuções (a linha de uma sincronização abre e mostra os dias).
   Só tokens: a borda da ficha muda de tom com a saúde; o resto é o vocabulário da casa (pt-chips, chips, tabela-rol, btn-icone). */
.int-duas.int-uma{grid-template-columns:minmax(0,1fr)}
.il-cartao .cartao-cab{flex-wrap:wrap}
.il-atualizado{margin-left:auto;font-size:12px}
.il-filtros{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.il-filtros .pt-chips{margin:0}
.il-filtros-dir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.il-tarefa-wrap{min-width:230px}
.il-fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:0 0 14px}
.il-ficha{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.il-ficha header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.il-ficha header b{font-size:13px;color:var(--ink)}
.il-ficha.il-falhando,.il-ficha.il-parada{border-color:color-mix(in srgb,var(--erro) 50%,var(--line))}
.il-ficha.il-lenta,.il-ficha.il-atencao{border-color:color-mix(in srgb,var(--alerta) 50%,var(--line))}
.il-ficha-esperado{margin:0;font-size:11.5px}
.il-ficha-dados{margin:0;display:grid;gap:3px}
.il-ficha-dados div{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.il-ficha-dados dt{color:var(--muted);white-space:nowrap}
.il-ficha-dados dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.il-ruim{color:var(--erro);font-weight:600}
.il-ficha-motivo{margin:0;font-size:12px;color:var(--texto-2)}
.il-ficha-vazia{margin:0;font-size:12px}
.il-rol{max-height:520px;overflow:auto}
.il-tabela td,.il-tabela th{white-space:nowrap}
.il-quando b{display:block;font-variant-numeric:tabular-nums}
.il-quando .sub{display:block;font-size:11px;color:var(--muted)}
.il-periodo{font-variant-numeric:tabular-nums}
.il-abrir{width:36px;text-align:right}
.il-abrir-btn{width:28px;height:28px}
.il-abrir-btn .icon{transition:transform var(--t-rapida)}
.il-abrir-btn.aberto .icon{transform:rotate(180deg)}
.il-aberta>td{background:var(--surface-2)}
.il-detalhe>td{padding:0 0 10px;background:var(--surface-2);white-space:normal}
.il-det-rol{margin:6px 12px 0}
.il-det-nota{margin:6px 12px 0;font-size:12px}
.il-det-erro{font-size:11.5px}
.il-rodape{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.il-guarda{font-size:11.5px}
@media (max-width:760px){
  .il-tarefa-wrap{min-width:0;flex:1 1 160px}
  .il-fichas{grid-template-columns:minmax(0,1fr)}
  .il-atualizado{margin-left:0}
}
.int-barra{width:100%;flex:1;min-height:96px;display:flex;align-items:flex-end;background:#f4f5f7;border-radius:8px;overflow:hidden}
.int-barra i{display:block;width:100%;border-radius:8px 8px 0 0;transition:height var(--t-media)}
.int-escala{max-height:420px}
.int-linha-erro td{background:#fff7f7}
#intCanvas{position:absolute;inset:0}
.chip-err{background:var(--erro-bg);color:var(--erro)}
@media (max-width:900px){.int-duas{grid-template-columns:minmax(0,1fr)}}
.int-kpis .pt-kpi span{white-space:normal;line-height:1.25}
.int-marcador{background:none;border:0}
.int-marcador svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* GPS sem leitura (25/09/2026): a linha que repete a leitura do GPS não é uma posição — itálico e cinza, sem coordenada nem endereço; "há N min" em âmbar é a posição
   medida com a leitura antiga (carro parado). Legenda do mapa: o tracejado cinza é o vão que a MiX declarou (o mesmo do mapa da viagem) */
/* número âmbar dos KPIs de recuperação do offline (antes style="color:#b8860b");
   .pt-kpi b na frente porque .pt-kpi b já pinta o número com --ink */
.pt-kpi b.int-recuperando{color:#b8860b}

/* Integrações · card RIP: filtro de empresa ao lado dos botões de coleta */
.int-rip-acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.int-rip-empresa{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#6b7280);font-weight:600}
.int-select{font:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit;max-width:260px}

/* Menu lateral · item pai com filhos (Integrações → MiX / RIP) */
.snav-pai .snav-seta{display:inline-flex;flex:none;margin-left:auto;color:var(--muted);transition:transform 280ms cubic-bezier(.4,0,.2,1)}
.snav-pai .snav-seta .icon{width:14px;height:14px}
.snav-pai.aberta .snav-seta{color:var(--sidebar-acento-texto)}
/* RECOLHIDO DE SAÍDA (22/09/2026, como o Jornadas): a seta vira e a lista aparece só
   com o grupo expandido (.expandido, app.js snavExpandidos); a tela aberta expande o
   dela. No menu recolhido (só ícones) as filhas continuam à vista, como antes */
.snav-pai.expandido .snav-seta{transform:rotate(180deg)}
/* EXPANDIR E RECOLHER COM ANIMAÇÃO (24/09/2026, Alan: "coloca uma animação quando eu
   expando ou recolho o menu"). A lista abre e fecha por ALTURA — a linha do grid vai de
   0fr a 1fr, que dá para animar sem saber a altura — com um esmaecer junto; antes era um
   display:none que trocava de uma vez. O .snav-filhos-int é quem corta (overflow-y:clip:
   só na vertical, o marcador da tela ativa, que sai 12px para a esquerda, continua à vista);
   fechada, a lista fica visibility:hidden ao fim da animação, para o teclado não entrar
   nela. Sem gate de prefers-reduced-motion, como o resto do menu (o Windows desta
   máquina tem as animações desligadas e o pedido é justamente ver o movimento) */
.snav-filhos{display:grid;grid-template-rows:1fr;grid-template-columns:minmax(0,1fr);margin:4px 0 2px 28px;border-left:2px solid var(--sidebar-borda);opacity:1;visibility:visible;
  transition:grid-template-rows 280ms cubic-bezier(.4,0,.2,1),margin 280ms cubic-bezier(.4,0,.2,1),opacity 220ms ease,visibility 0s}
.snav-filhos-int{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0;padding-left:10px;overflow-x:visible;overflow-y:clip}
.snav-pai:not(.expandido) + .snav-filhos{grid-template-rows:0fr;margin-top:0;margin-bottom:0;opacity:0;visibility:hidden;
  transition:grid-template-rows 280ms cubic-bezier(.4,0,.2,1),margin 280ms cubic-bezier(.4,0,.2,1),opacity 160ms ease,visibility 0s linear 280ms}
/* (o menu recolhido, só ícones, com as filhas sempre à vista, fica no @media(min-width:901px) lá em cima: no
   celular o .snav-recolhido guardado de uma tela larga não pode mexer na gaveta) */
/* o anel de foco do teclado nas filhas: o invólucro corta na vertical e o anel padrão sai pela borda do
   primeiro e do último item — vai para dentro */
.snav-filho:focus-visible{outline-offset:-2px}
/* só a MONTAGEM do menu (o Agora nasce aberto, o grupo da tela do F5 também) não anima; depois de
   uma fração de segundo o app.js tira o .snav-parado e todo abrir/fechar anima */
.snav-parado .snav-filhos,.snav-parado .snav-pai .snav-seta{transition:none}
.snav-filho{min-height:0;gap:8px;padding:7px 12px;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--sidebar-texto) 65%,transparent)}
.snav-filho.ativa{background:var(--sidebar-acento);color:var(--sidebar-acento-texto)}
.snav-filho.ativa::before{left:-12px;width:2px;border-radius:0}
.snav-filho .icon{width:14px;height:14px}
/* (no celular a gaveta usa o mesmo desenho do menu lateral: pai e filhas) */
/* Integrações · RIP: execuções em cima, conteúdo exportado embaixo (largura toda) */
.int-pilha{display:grid;gap:16px}
.vg-tabela tr.int-sel td{background:#eef6ff}

/* Integrações · RIP: cabeçalho de seção com ação à direita; tabela de execuções alinhada */
.int-sub-flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.int-sub-flex .mini-acao{margin:0 0 0 auto}
.int-linha-erro{cursor:default}

/* Integrações · RIP: importar programado no módulo de Pontualidade */
.int-rip-importar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:12px}
.int-rip-importar .muted{max-width:720px;line-height:1.4}
.int-rip-resultado{display:grid;gap:6px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8f9fb;font-size:12.5px;line-height:1.45}

/* Pontualidade · lista de viagens com rolagem própria e cabeçalho fixo */
.pt-lista{max-height:min(62vh,640px);max-height:min(62dvh,640px);overflow:auto;margin-bottom:0;padding-bottom:0}
.pt-lista thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;box-shadow:0 1px 0 var(--linha-tabela)}
.pt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
/* card "Viagens do dia": o título sobe (23/09/2026, Alan: "dá pra diminuir esse
   gap") — do topo do card ao título eram 22px (padding 15 + cabeçalho de 32px
   com o título centrado); o cabeçalho aqui não tem botão, então não precisa dos 32 */
.cartao.pt-cartao-lista{padding-top:10px}
.pt-cartao-lista > .cartao-cab{min-height:24px}
.pt-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:var(--r-full);
  background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-soft);
  transition:background-color 200ms cubic-bezier(.4,0,.2,1),border-color 200ms cubic-bezier(.4,0,.2,1),box-shadow 200ms cubic-bezier(.4,0,.2,1)}
.pt-chip b{font-size:13px;font-weight:700;color:var(--ink)}
.pt-chip:hover{border-color:var(--ring)}
/* O SELECIONADO É VERMELHO, TEXTO BRANCO (Alan, 26/09/2026: "a cor quando está selecionado teria que ficar vermelho, a cor padrão do sistema, e o texto em branco, para dar bastante contraste"): o mesmo nas telas que usam o chip */
.pt-chip.ativo{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 40%,transparent)}
.pt-chip.ativo b{color:#fff}
.pt-chip.ativo:hover{border-color:var(--brand-escuro);background:var(--brand-escuro)}
/* UMA LINHA SÓ (Alan, 26/09/2026: "evitar ao máximo duas linhas, para otimizar o espaço; se for necessário, um carrossel de rolagem lateral"): o cartão da lista mede os chips mais justos e, quando ainda assim não cabem (muitas situações, período de vários dias, celular),
   rola de lado sem barra, com um esmaecido na borda que diz que há mais (ptChipsCarrossel marca data-mais-esq / data-mais-dir). Escopado: a Escala e o Toolbox têm a sua própria disposição */
.pt-cartao-lista .pt-chips{flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 -2px 8px;padding:2px 2px 4px}
.pt-cartao-lista .pt-chips::-webkit-scrollbar{display:none}
.pt-cartao-lista .pt-chip{flex:none;white-space:nowrap;padding:0 9px;gap:5px}
.pt-cartao-lista .pt-chips[data-mais-dir]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.pt-cartao-lista .pt-chips[data-mais-esq]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.pt-cartao-lista .pt-chips[data-mais-esq][data-mais-dir]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
@media (max-width:760px){.pt-cartao-lista .pt-chips{margin-inline:-16px;padding-inline:16px}}
/* Pontualidade · "Como o carro é vinculado" virou modal (23/09/2026, Alan:
   "ganhamos espaço" — ícone de info no cabeçalho, balão com a pergunta,
   clique abre um .diag-box com este mesmo conteúdo de sempre) */
.pt-ajuda-corpo{font-size:12.5px;line-height:1.5;color:var(--texto-2)}
.pt-ajuda-corpo ol{margin:0 0 8px 18px;padding:0}
.pt-ajuda-corpo li{margin:2px 0}
.pt-ajuda-legenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 16px;font-size:12px}
.pt-ajuda-legenda .chip{margin-right:4px}
/* trechos de um serviço do Totalbus WS Novo (7 colunas): mais largo que o padrão */
.diag-box.tb-ws-box{width:min(860px,100%)}
/* MODAL "COMO O CARRO É VINCULADO" — mais largo e com respiro (23/09/2026, Alan:
   "deixar ele mais largo para ficar mais visível como é feita a classificação, não
   deixar tudo muito grudado"). A classificação vira duas colunas: a situação à
   esquerda, o que ela quer dizer à direita, uma por linha. */
.diag-box.pt-como-box{width:min(880px,100%)}
.pt-como-box .diag-head{padding:20px 30px 16px}
.pt-como-box .diag-corpo{padding:20px 30px 28px}
.pt-como-box .pt-ajuda-corpo{font-size:14px;line-height:1.65}
.pt-como-box .pt-ajuda-corpo ol{margin:0 0 6px 20px}
.pt-como-box .pt-ajuda-corpo li{margin:0 0 14px;padding-left:4px}
.pt-como-box .pt-como-sub{margin:22px 0 14px;padding-top:20px;border-top:1px solid var(--line);font-size:11px}
.pt-como-box .pt-ajuda-legenda{display:flex;flex-direction:column;gap:12px;font-size:13.5px}
.pt-como-box .pt-legenda-item{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.pt-como-box .pt-legenda-rot{display:flex;flex-wrap:wrap;gap:6px}
.pt-como-box .pt-legenda-rot .chip{margin:0}
@media(max-width:700px){
  .pt-como-box .diag-head{padding:16px 18px 12px}
  .pt-como-box .diag-corpo{padding:14px 18px 22px}
  .pt-como-box .pt-legenda-item{grid-template-columns:1fr;gap:6px}
}
/* botão pequeno e discreto, ao lado do título da página */
.pt-info-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;border-radius:50%;color:var(--muted);cursor:pointer}
.pt-info-btn:hover{background:var(--surface-2);color:var(--brand)}
.pt-info-btn .icon{width:16px;height:16px}
/* O "i" COLADO AO TÍTULO DA PÁGINA (Alan, 21/10/2026, com o print do cabeçalho da Pontualidade: "esse i aqui deveria estar mais próximo do texto... tem gap grande"): o botão tem 24 px com o ícone de 16 px no meio (4 px de cada lado) e a linha do título
   põe 10 px entre os itens — 14 px de vão visível entre o texto e o ícone (medido). O botão volta 9 px: o vão visível fica em 5 px, o mesmo do "i" do título dos cartões; o círculo do hover (24 px) não encosta no texto e o selo que vem depois anda junto
   (a distância dele ao botão não muda) */
.cab-titulo-linha > .pt-info-btn{margin-left:-9px}
/* Pontualidade · por que este carro */
.pt-ident-linha{margin:4px 0;font-size:12.5px;line-height:1.5}
.pt-ident-comp{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:11.5px;color:var(--muted)}
.pt-ident-comp span{display:inline-flex;align-items:center;gap:6px}
.pt-ident-comp i{display:inline-block;width:46px;height:5px;border-radius:3px;background:#e8eaee;position:relative;overflow:hidden}
.pt-ident-comp i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--info,#2f80ed);border-radius:3px}
.pt-ident-comp b{color:var(--ink)}

/* ── Legenda só com bolinhas (pedido do usuário, 05/09/2026): o texto vai
   no balão padrão (data-balao) ao passar o mouse ───────────────────────── */
.proto-legenda-topo{gap:7px}
.pt-leg{display:inline-flex;padding:3px}
.proto-legenda .pt-leg .pt-no{margin-right:0;width:12px;height:12px}
@media (hover:hover){.pt-leg:hover .pt-no{transform:scale(1.2)}}

/* ── Parâmetros (ADMIN): faixas de atraso da legenda ───────── */
.prm-intro{font-size:12.5px;color:var(--muted);margin:2px 0 10px;line-height:1.5;max-width:900px}
.prm-intro b,.prm-intro i{color:var(--ink);font-style:normal}
.prm-preview{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:11.5px}
.prm-preview .proto-legenda{margin:0}
.prm-tabela input[type=text],.prm-tabela input[type=number],.prm-tabela select,.prm-pendente input[type=text]{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);font:inherit;font-size:12.5px;color:var(--ink)}
.prm-tabela input[type=text],.prm-pendente input[type=text]{width:170px}
.prm-tabela input[type=number]{width:84px}
.prm-tabela input[type=color],.prm-pendente input[type=color]{width:34px;height:26px;padding:0 2px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);cursor:pointer;vertical-align:middle}
.prm-ordem{white-space:nowrap}
.prm-ordem .pt-no{width:12px;height:12px;border-width:2px;margin-right:6px;vertical-align:-1px}
.prm-mover{border:0;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;padding:2px 5px;border-radius:5px}
.prm-mover:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.prm-mover:disabled{opacity:.3;cursor:default}
.prm-linha{margin:6px 0 10px}
.prm-pendente{display:flex;align-items:center;gap:8px;font-size:12px;padding:10px 0 4px;border-top:1px solid var(--line)}
.prm-pendente .pt-no{width:12px;height:12px;border-width:2px;flex:none}
.prm-pendente input[type=color]{flex:none}
.prm-erros{color:var(--erro);font-size:12px;margin-top:6px;display:flex;flex-direction:column;gap:2px}
.prm-acoes{display:flex;align-items:center;gap:8px;margin-top:10px}
.prm-acoes .panel-btn{margin-top:0}
.prm-tabela td.prm-intervalo{font-size:11.5px;white-space:nowrap}
.prm-rolagem{overflow-x:auto;max-width:100%}
/* coluna Sigla · cerca MiX da tabela de pontos */
.pt-sigla{white-space:nowrap;width:1%}
.pt-sigla b{font-weight:700;letter-spacing:.03em}
.pt-sem-cerca{color:var(--erro)}
.jor-tabela th.pt-num,.jor-tabela td.pt-num{text-align:right;font-variant-numeric:tabular-nums}
/* Localidade à esquerda e números à direita, por cima do centralizado da tabela-central */
.jor-tabela.tabela-central th.pt-esq,.jor-tabela.tabela-central td.pt-esq{text-align:left}
.jor-tabela.tabela-central th.pt-num,.jor-tabela.tabela-central td.pt-num{text-align:right}
/* Emb., Des. e Passag. da Visão detalhada: centralizados (Alan, 15/09/2026) */
.jor-tabela th.pt-num.pt-centro,.jor-tabela td.pt-num.pt-emb,.jor-tabela td.pt-num.pt-des,.jor-tabela td.pt-num.pt-bordo{text-align:center}
/* "Todos os dias" no calendário */
.dp-todos{display:block;width:100%;margin:0 0 6px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.dp-todos:hover{border-color:var(--line-forte)}
.dp-todos.sel{border-color:var(--brand);color:var(--brand)}

/* botões redondos da barra de filtros (pedido do usuário, 05/09/2026) */
.btn-redondo{width:36px;height:36px;border-radius:var(--r-lg)}
.btn-redondo .icon{width:16px;height:16px}
.btn-redondo:hover:not(:disabled){box-shadow:var(--shadow-soft)}

/* ── Documentação ── */
/* documentacao e TEXTO: linha longa demais cansa, entao ela mantem o limite
   de leitura que a .tela-pagina deixou de impor */
.doc-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start;max-width:1280px}
.doc-indice{position:sticky;top:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow-soft);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto}
.doc-busca{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font:inherit;font-size:12.5px;color:var(--ink);margin-bottom:8px}
.doc-grupo{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 6px 3px}
.doc-link{display:block;padding:4px 6px;border-radius:6px;font-size:12.5px;color:var(--ink);text-decoration:none}
.doc-link:hover{background:var(--surface-2)}
.doc-link.ativa{background:var(--erro-bg);color:var(--brand);font-weight:600}
.doc-secao{scroll-margin-top:12px}
.doc-secao-grupo{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.doc-titulo{margin:2px 0 8px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.doc-secao p,.doc-secao li{font-size:13px;line-height:1.55;color:var(--ink)}
.doc-secao p{margin:0 0 8px}
.doc-secao ul{margin:0 0 8px;padding-left:20px}
.doc-secao li{margin:0 0 4px}
.doc-secao a{color:var(--brand)}
.doc-vazio{padding:20px;text-align:center}
@media (max-width:860px){.doc-layout{grid-template-columns:minmax(0,1fr)}.doc-indice{position:static;max-height:none}}
.pt-num.pt-apagado{color:#b3b9c3;font-weight:400}   /* embarque/desembarque zero ou indisponível: sem destaque */
.doc-nav{display:flex;justify-content:space-between;gap:8px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.doc-nav .panel-btn{margin-top:0;font-size:12px}
.doc-indice .doc-vazio{padding:8px 6px;font-size:12px;text-align:left}
#intTbCorpo .sub{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
#intTbCorpo td{vertical-align:top}
.int-tb-filtros{margin:6px 0 10px}
.int-tb-filtros .campo input.doc-busca{padding:8px 10px;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0}
.int-tb-rotina,#intTbSincResultado:not(:empty){margin:8px 0 4px}
.int-tb-rotina-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.int-tb-rotina-linha .mini-acao{margin-top:0}
/* trecho que o ônibus ainda NÃO percorreu: existe, mas discreto (06/09/2026) */
.pt-trilho-futuro{background:#e3e6eb}
/* localidade sem cerca cadastrada: alerta discreto, não um texto grande */
.pt-alerta-cerca{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#b0870f;background:#fdf3e1;border-radius:99px;padding:1px 7px;margin-top:4px;cursor:default;white-space:nowrap}
.pt-alerta-cerca .icon{width:11px;height:11px;stroke-width:2.4}
/* Só o ícone (07/09/2026: "sem cerca usa apenas o símbolo de alerta"): a
   explicação vive no balão. Redondo, para o alvo do mouse não sumir. */
.pt-alerta-so-icone{padding:2px;border-radius:50%;gap:0}
.pt-alerta-so-icone .icon{width:13px;height:13px}
/* O ⚠ vira BOTÃO para quem pode pedir a cerca (Alan, 29/09/2026: "um atalho para solicitar a criação da cerca"): o mesmo ícone, clicável. Hover e foco discretos, como
   os do btn-icone (fundo um pouco mais forte e o ícone sobe 1 px), e SEM anel de foco (a regra da casa: :where(button):focus-visible). Só tokens de cor — o escuro vem deles;
   três classes para vencer o `html.dark .pt-alerta-cerca` de mais adiante. No hover e no foco o fundo escurece e o ÍCONE também (color:var(--alerta)): o #b0870f de repouso sobre o fundo
   mais forte caía para 2,25:1 (WCAG 1.4.11 pede 3:1) justamente no estado em que o foco de teclado só se vê pelo fundo; com o token fica em ~3,7:1 no claro e igual ao de hoje no escuro */
button.pt-alerta-cerca.pt-alerta-cerca-pedir{border:0;cursor:pointer;transition:background-color 180ms ease-out}
.pt-alerta-cerca-pedir .icon{transition:transform 180ms ease-out}
button.pt-alerta-cerca.pt-alerta-cerca-pedir:focus-visible{background:color-mix(in srgb,var(--alerta) 22%,var(--alerta-fundo));color:var(--alerta)}
@media (hover:hover){
  button.pt-alerta-cerca.pt-alerta-cerca-pedir:hover{background:color-mix(in srgb,var(--alerta) 22%,var(--alerta-fundo));color:var(--alerta)}
  .pt-alerta-cerca-pedir:hover .icon{transform:translateY(-1px)}
}
button.pt-alerta-cerca.pt-alerta-cerca-pedir[aria-busy="true"]{cursor:progress;opacity:.6}
/* No toque a ÁREA do ícone cresce por um ::after invisível — 17 px do ícone + 8 px de cada lado = 33 px —, sem engordar a linha do tempo nem a linha da tabela */
@media (pointer:coarse){
  .pt-alerta-cerca-pedir{position:relative}
  .pt-alerta-cerca-pedir::after{content:"";position:absolute;inset:-8px}
}
/* traço de "ainda não aconteceu" na coluna Situação (nome próprio: pt-apagado
   já era das colunas de embarque/desembarque) */
.pt-sit-vazia{color:var(--muted);cursor:default}
/* pinos de partida e chegada do mapa da viagem (06/09/2026) */
.int-pino svg{filter:drop-shadow(0 2px 3px rgba(10,14,20,.35))}
/* O PINO DE CHEGADA CAI QUANDO A LINHA DO TRAJETO CHEGA (27/10/2026): o mesmo mapa-pin-cai do pino que a pessoa solta com o botão direito, só no SVG (o ícone em si leva o translate do Leaflet). Sem o portão de prefers-reduced-motion, como o resto da casa */
.int-pino.pt-pino-cai svg{animation:mapa-pin-cai 260ms cubic-bezier(.23,1,.32,1) both}
/* etiqueta ao lado do pino de início e fim do Trajeto do veículo (25/09/2026): "Início" à esquerda do pino, "Fim" à direita — os dois se leem também quando o carro termina onde começou.
   Cores só pelos tokens (verde e vermelho da marca); no celular ficam só os símbolos dos pinos */
.int-pino-rotulo{position:absolute;top:4px;padding:2px 8px;border-radius:999px;background:var(--surface);border:1.5px solid currentColor;font-family:inherit;font-size:11px;font-weight:700;line-height:1.25;letter-spacing:.02em;white-space:nowrap;box-shadow:0 1px 3px rgba(10,14,20,.3)}
.int-pino-rotulo-partida{right:calc(100% - 1px);color:var(--ok)}
.int-pino-rotulo-chegada{left:calc(100% - 1px);color:var(--brand)}
/* início a leste do fim: as etiquetas trocam de lado e ficam para FORA (não se cruzam com os pinos perto um do outro); no tema escuro o vermelho da marca não passa de 3:1 sobre o cartão — o vermelho do erro, mais claro, passa */
.int-pino-rotulo-partida.int-pino-rotulo-inverso{right:auto;left:calc(100% - 1px)}
.int-pino-rotulo-chegada.int-pino-rotulo-inverso{left:auto;right:calc(100% - 1px)}
html.dark .int-pino-rotulo-chegada{color:var(--erro)}
@media (max-width:760px){.int-pino-rotulo{display:none}}

/* selo da passagem por travessia (07/09/2026): mesma família do ±N m, em azul
   para não se confundir com a folga (âmbar) */
.pt-travessia{color:#2f5fa8;border-color:#b9cdea;background:#eef3fb}

/* ══ PAINEL DA AGÊNCIA (telão) ═══════════════════════════════════════════════
   O MAPA é o palco (07/09/2026: "o mapa tem que ser a maior parte da tela, pra
   dar ênfase onde o carro está"). O cartão da viagem flutua sobre ele e a fila
   das próximas fica numa faixa lateral. Em tela cheia, só isso aparece. */
.pn-filtros{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 16px}
.pn-acoes{display:flex;align-items:center;gap:8px}
.pn-acoes .panel-btn{margin-top:0}
.pn-atualizado{margin-left:auto;font-size:12px;color:var(--muted);align-self:center}
/* OS ÍCONES AO LADO DO ÚLTIMO FILTRO (03/11/2026, Alan: «precisa melhorar esse bloco de filtro porque você não alocou os ícones ao lado do último filtro»): no Painel os três botões de ícone (limpar, pausar, tela cheia) começam logo depois do «Troca a cada» — a margem automática que a regra das outras telas dá ao grupo (`.cartao.filtros .pn-acoes`,
   que o manda para a ponta direita) ficava dividindo a sobra com a do «servidor respondeu» e deixava os botões no meio do nada; só o «servidor respondeu» fica na ponta direita */
.cartao.filtros.pn-filtros .pn-acoes{margin-left:0}

/* O TELÃO USA A TELA TODA (08/09/2026: "numa tela de resolução maior você não
   usa a largura toda"). As outras telas do sistema são documentos e ficam
   limitadas a 1280 px para o texto não virar uma linha comprida demais; esta é
   um painel de TV, onde cada pixel de mapa conta. Numa tela de 1920 isso
   devolve 640 px que ficavam brancos dos dois lados. */
.pn-tela{max-width:none}
.pn-palco{position:relative;display:grid;grid-template-columns:1fr 340px;grid-template-rows:auto 1fr;gap:0;
  height:calc(100vh - 210px);height:calc(100dvh - 210px);min-height:440px;margin-top:14px;
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--dark)}
.pn-mapa{position:relative;height:100%;background:#e9edf2}
/* numa tela larga a fila cresce junto: com 340 px fixos o nome da linha
   quebrava em três linhas enquanto sobrava mapa */
@media (min-width:1600px){.pn-palco{grid-template-columns:1fr 400px}}
@media (min-width:1900px){.pn-palco{grid-template-columns:1fr 460px}}

/* cartão da viagem, flutuando sobre o mapa */
/* cartão COMPACTO (07/09/2026: "o card tá muito grande"): o mapa é o assunto,
   o cartão é a legenda dele. Largura presa ao conteúdo, não à tela. */
.pn-cartao{position:absolute;left:18px;bottom:18px;width:max-content;max-width:min(640px,calc(100% - 360px));z-index:600;
  padding:13px 18px;border-radius:13px;color:#fff;background:rgba(27,31,39,.93);
  backdrop-filter:blur(6px);box-shadow:0 12px 34px rgba(8,12,18,.45);
  transition:background .5s ease,transform .38s cubic-bezier(.2,.7,.3,1),opacity .28s ease}
.pn-cartao.pn-ok{background:rgba(12,88,54,.93)}
.pn-cartao.pn-atraso{background:rgba(122,4,15,.93)}
.pn-cartao.pn-adiantado{background:rgba(23,68,105,.93)}
.pn-cartao.pn-neutro{background:rgba(38,46,58,.93)}
/* a troca de viagem desliza, não corta */
.pn-cartao.pn-saindo{opacity:0;transform:translateY(14px) scale(.985)}
@keyframes pnEntra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.pn-cartao.pn-entrando{animation:pnEntra .46s cubic-bezier(.2,.7,.3,1)}
/* os campos entram em cascata dentro do cartão que entra: o olho é levado de
   cima para baixo na ordem em que a ficha deve ser lida (11/09/2026) */
@keyframes pnCampoEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pn-cartao.pn-entrando .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo-val{animation:pnCampoEntra .4s ease both}
.pn-cartao.pn-entrando .pn-hcol:nth-of-type(1) .pn-campo-rot,.pn-cartao.pn-entrando .pn-hcol:nth-of-type(1) .pn-hval{animation:pnCampoEntra .4s ease both;animation-delay:.12s}
.pn-cartao.pn-entrando .pn-hcol:nth-of-type(2) .pn-campo-rot,.pn-cartao.pn-entrando .pn-hcol:nth-of-type(2) .pn-hval{animation:pnCampoEntra .4s ease both;animation-delay:.18s}
.pn-cartao.pn-entrando .pn-hcol:nth-of-type(3) .pn-campo-rot,.pn-cartao.pn-entrando .pn-hcol:nth-of-type(3) .pn-hval{animation:pnCampoEntra .4s ease both;animation-delay:.24s}
.pn-cartao.pn-entrando .pn-hcol:nth-of-type(4) .pn-campo-rot,.pn-cartao.pn-entrando .pn-hcol:nth-of-type(4) .pn-hval{animation:pnCampoEntra .4s ease both;animation-delay:.3s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(1) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(1) .pn-campo-val{animation-delay:.06s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(2) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(2) .pn-campo-val{animation-delay:.12s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(3) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(3) .pn-campo-val{animation-delay:.18s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(4) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(4) .pn-campo-val{animation-delay:.24s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(5) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(5) .pn-campo-val{animation-delay:.3s}
.pn-cartao.pn-entrando .pn-campo:nth-of-type(6) .pn-campo-rot,.pn-cartao.pn-entrando .pn-campo:nth-of-type(6) .pn-campo-val{animation-delay:.36s}
/* o topo do cartão (agência + contador) subiu para a faixa vermelha (11/09/2026) */
.pn-cartao-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;opacity:.78}
/* NUNCA TRUNCAR, FONTE SEMPRE A MESMA: cada metade do nome (origem, destino) é
   indivisível; o conjunto quebra na seta quando não couber. Sem ellipsis: no
   telão da agência, um destino cortado é pior do que uma segunda linha. */
/* "De ORIGEM para DESTINO": conectores leves, cidades pesadas; cada par
   conector+cidade é indivisível e a quebra só cai antes do "para" */
/* FICHA DE CAMPOS (11/09/2026): rótulo à esquerda, valor numa coluna só. A
   grade alinha todos os valores no mesmo x, então o olho desce a coluna em vez
   de procurar cada dado dentro de uma frase. `auto` na primeira coluna deixa a
   largura ser a do maior rótulo — nada de largura fixa que corta em português. */
.pn-cartao{display:flex;flex-direction:column;gap:7px}
/* faixa de cima: a linha ocupa o que precisa, o ônibus encosta à direita */
.pn-topo{display:flex;align-items:baseline;gap:26px;min-width:0}
.pn-campo{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline;min-width:0}
.pn-campo-linha{flex:1 1 auto;min-width:0}
/* com o "DE" em corpo de rótulo, "LINHA" e "DE" viram uma frase só: o vão de
   10 px entre rótulo e valor parecia um buraco (Alan, 14/09/2026: "tem muito
   espaço entre o LINHA e o DE") — fica o de um espaço de texto */
.pn-campo-linha{column-gap:.35em}
.pn-campo-onibus{flex:0 0 auto}
/* Rótulos à ESQUERDA (11/09/2026). Cheguei a alinhá-los à direita quando
   "Chegada programada" ainda dividia esta coluna e deixava LINHA e ÔNIBUS com
   um vão morto; com os horários em bloco próprio sobraram só rótulos curtos
   (Linha, Ônibus, Situação), a coluna encolheu e o alinhamento à esquerda —
   que é o natural de leitura — volta sem custo nenhum. */
.pn-campo-rot{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.7;white-space:nowrap;align-self:baseline;text-align:left}
.pn-campo-val{font-size:19px;font-weight:600;line-height:1.25;min-width:0}
.pn-linha-nome{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.15;
  display:block;white-space:nowrap;overflow:hidden;min-width:0}
/* a chegada PREVISTA é a resposta que se lê de longe: é o único número grande */
.pn-campo-destaque .pn-campo-val{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.pn-campo-forte{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pn-campo-nota{font-size:16px;font-weight:600;opacity:.85;white-space:nowrap}
.pn-campo-vazio{font-weight:400;opacity:.7}
/* os dois horários ocupam a linha inteira da ficha e se dividem em colunas: é
   uma comparação, não dois campos soltos */
/* três colunas: programada | prevista | tempo que falta (11/09/2026, pedido do
   Alan). `auto` em todas: cada uma ocupa o que o seu número precisa. */
/* TRÊS colunas, e `max-content` para o grid NUNCA comprimir abaixo do texto:
   com quatro, os rótulos ("CHEGADA PROGRAMADA", "CHEGADA PREVISTA") não cabiam
   na largura do cartão, e como eles são `nowrap` o texto vazava e encavalava um
   no outro (11/09/2026). A situação saiu daqui e foi para o rodapé, onde há
   linha inteira para ela. */
.pn-horas{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:0 30px;margin:1px 0 0}
/* a situação abre o rodapé, em negrito: é o que a cor do cartão já anuncia */
.pn-rodape-sit{font-weight:800;opacity:1}
.pn-rodape i{font-style:normal;opacity:.45;margin:0 .4em}
.pn-hcol{display:flex;flex-direction:column;gap:1px;min-width:0}
.pn-hcol .pn-campo-rot{align-self:flex-start}
.pn-hval{font-size:27px;line-height:1.1;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;opacity:.82}
/* o previsto é o que se lê de longe: maior, opaco, com a contagem ao lado */
.pn-hcol-forte .pn-hval{opacity:1}
.pn-hcol-forte{gap:0}
/* "Agora em" é contexto, não manchete: volta ao corpo discreto de antes
   (11/09/2026: "pode ser um texto menor e mais discreto, pra não ter tanta ênfase") */
/* ENTRADA DAS BOLINHAS (11/09/2026): nascem invisíveis e, quando o mapa para
   de voar, aparecem com uma pulsada e estabilizam. */
.pn-por-vir{opacity:0}
@keyframes pnPulsaEntra{
  0%{opacity:0;transform:scale(.2)}
  55%{opacity:1;transform:scale(1.35)}
  78%{transform:scale(.94)}
  100%{opacity:1;transform:scale(1)}
}
.pn-agencia-pino i,.pn-halo i{transform-origin:50% 50%}
.pn-agencia-pino:not(.pn-por-vir) i{animation:pnPulsaEntra .52s cubic-bezier(.3,1.2,.5,1) both}
.pn-halo:not(.pn-por-vir) i{animation:pnHalo 2.2s ease-out infinite,pnPulsaEntra .52s cubic-bezier(.3,1.2,.5,1) both}
/* O NOME DO PINO desliza: ele é posicionado por `left/top`, então mexer no
   transform aqui é seguro. */
@keyframes pnNomeEntra{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.pn-agencia-pino:not(.pn-por-vir) span{animation:pnNomeEntra .4s ease .18s both}
/* O PREFIXO DO ÔNIBUS só pode aparecer, NUNCA deslizar: quem o afasta da
   bolinha é um `transform: translate(...)`, e um keyframe que termina em
   `transform: none` apagava esse deslocamento — a pílula caía em cima da
   bolinha (11/09/2026: "você tem colocado o card do ônibus bem em cima da
   bolinha do ônibus"). Só opacidade aqui. */
@keyframes pnSoAparece{from{opacity:0}to{opacity:1}}
.pn-rotulo:not(.pn-por-vir) span{animation:pnSoAparece .4s ease .18s both}

/* seta do sentido da rota: chevron branco com contorno, assenta sobre a linha */
.pn-seta i{position:absolute;display:block;width:0;height:0;left:-5px;top:-6px;
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff;
  filter:drop-shadow(0 0 1.5px rgba(140,0,12,.95)) drop-shadow(0 0 1px rgba(140,0,12,.7));
  transform-origin:1px 6px}
.pn-tela.pn-cheio .pn-seta i,.pn-tela:fullscreen .pn-seta i{left:-6px;top:-8px;
  border-top-width:8px;border-bottom-width:8px;border-left-width:12px;transform-origin:1px 8px}
.pn-rodape{margin-top:2px;font-size:13.5px;opacity:.75;line-height:1.3}
.pn-rodape .pn-cid{white-space:nowrap;font-weight:600}
.pn-linha{margin:4px 0 10px;font-size:23px;line-height:1.18;font-weight:700;letter-spacing:-.01em}
.pn-par{white-space:nowrap}
.pn-con{font-weight:400;opacity:.7}
/* "DE" e "PARA" NO CORPO DO RÓTULO (Alan, 14/09/2026: "o De deixa no mesmo
   tamanho do texto LINHA, e o para deixe em PARA, do mesmo tamanho"): os
   conectores viram rótulo — pequenos, em caixa alta, apagados — e as cidades
   ficam sozinhas no corpo grande */
.pn-cartao .pn-con{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.pn-tela:fullscreen .pn-cartao .pn-con,.pn-tela.pn-cheio .pn-cartao .pn-con{font-size:17px}
/* a HORA DE CHEGADA AQUI é o único número grande do cartão: painel de rodoviária */
/* RÓTULO ACIMA DO NÚMERO (11/09/2026): na mesma linha, o comprimento variável
   do rótulo ("CHEGA AQUI ÀS" × "ERA PARA CHEGAR DIA 06/09 ÀS") empurrava a
   hora de lugar a cada giro. Empilhado, o número nasce sempre no mesmo pixel.
   O "faltam 4 min" mora ao lado da hora — é a mesma pergunta (quando). */
.pn-hora{display:block;margin-top:8px}
.pn-hora-rot{display:block;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;white-space:nowrap}
.pn-hora-linha{display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap}
.pn-hora b{font-size:46px;line-height:1.05;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pn-hora-falta{font-size:18px;font-weight:600;opacity:.92;white-space:nowrap}
/* o prefixo é o que se confere na LATERAL do carro: chip claro, contraste
   invertido — o único bloco claro do cartão, salta como uma placa */
.pn-onibus{margin:7px 0 2px}
.pn-chip{display:inline-block;font-style:normal;background:rgba(255,255,255,.94);color:#1b1f27;font-weight:800;border-radius:9px;padding:2px 12px;font-size:20px;letter-spacing:.01em}
.pn-sem-previsao{font-size:23px;font-weight:400;opacity:.7}
/* "faltam 2h45 · atrasado 16 min": a palavra que decide o humor de quem espera vai em negrito */
.pn-sit{margin-top:6px;font-size:18px;line-height:1.25}
.pn-sit i,.pn-onde i{font-style:normal;opacity:.5;margin:0 .35em}
.pn-onde{margin-top:8px;font-size:13.5px;opacity:.75}
.pn-onde .pn-cid{white-space:nowrap;font-weight:600}

/* fila das próximas, à direita */
.pn-fila{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
/* o corpo é o que se redesenha; a marca acima dele fica parada */
.pn-fila-corpo{display:flex;flex-direction:column;min-height:0;flex:1}
/* A FILA COMO PAINEL DE RODOVIÁRIA (11/09/2026). Antes era uma tabelinha de
   sistema: hora pequena, prefixo em cinza claro quase invisível e a situação
   como "+18 min" — sinal que a pessoa tinha de decifrar. Agora a hora é o
   número grande da linha, o nome vem em corpo de leitura, o prefixo ganha
   contraste e a situação está escrita por extenso, com cor. */
.pn-fila-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:13px 16px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pn-fila-cab span{font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto-2)}
.pn-fila-lista{flex:1;overflow-y:auto;scroll-behavior:smooth;display:flex;flex-direction:column}
.pn-fila-item{display:grid;grid-template-columns:60px 1fr;grid-template-areas:"hora linha" "hora meta";
  gap:3px 12px;padding:13px 16px;border-bottom:1px solid var(--line);flex:none;
  transition:background .35s ease,box-shadow .35s ease}
/* o ônibus da vez: barra grossa, fundo tingido e a hora na cor da marca */
.pn-fila-item.sel{background:var(--brand-suave);box-shadow:inset 4px 0 0 var(--brand)}
.pn-fila-item.sel .pn-fila-hora{color:var(--brand)}
.pn-fila-item.sel .pn-fila-linha{font-weight:800}
.pn-fila-hora{grid-area:hora;font-size:21px;font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;align-self:start}
/* chegada em outro dia (depois da meia-noite da agência): "amanhã" embaixo da hora */
.pn-fila-dia{display:block;font-size:11px;font-weight:700;letter-spacing:0;color:var(--muted);text-transform:none}
.pn-fila-linha{grid-area:linha;font-size:13px;line-height:1.28;font-weight:700;
  white-space:nowrap;overflow:hidden;min-width:0}
/* prefixo e situação dividem a segunda linha do item */
.pn-fila-carro{grid-area:meta;font-size:11.5px;color:var(--muted);white-space:nowrap;align-self:baseline}
.pn-fila-carro b{font-weight:700;color:var(--texto-2)}
.pn-fila-sit{grid-area:meta;justify-self:end;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
/* fecha a lista em vez de deixar o vazio no pé do telão */
.pn-fila-fim{padding:14px 16px;font-size:11.5px;color:var(--muted);opacity:.75;line-height:1.35}
.pn-fila-sit.ok{color:var(--ok)}
.pn-fila-sit.atraso{color:var(--brand)}
.pn-fila-sit.adiantado{color:#2f80ed}
.pn-vazio{margin-top:14px;padding:60px 20px;text-align:center;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft)}
.pn-vazio b{display:block;font-size:19px;margin-bottom:6px}
.pn-vazio span{color:var(--muted);font-size:13.5px}
/* telão no escuro: o vermelho da marca em letra de fila some no fundo escuro
   tingido; hora da vez e "atrasado" clareiam, "adiantado" idem */
html.dark .pn-palco .pn-fila-item.sel .pn-fila-hora,html.dark .pn-palco .pn-fila-sit.atraso{color:#ff7a88}
html.dark .pn-palco .pn-fila-sit.adiantado{color:#84b9ff}
/* mapa do telão escuro, com o mesmo filtro da base "Mapa" das outras telas */
html.dark .pn-mapa{background:#1b1c20}
html.dark .pn-mapa .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.5)}
html.dark .pn-mapa .leaflet-control-attribution{background:rgba(15,24,36,.88);color:var(--muted)}
html.dark .pn-mapa .leaflet-control-attribution a{color:#84b9ff}
/* as pílulas escuras (agência, bússola) ganham um aro claro para não sumirem no mapa escuro */
html.dark .pn-palco .pn-agencia-pino span,html.dark .pn-palco .pn-bussola{box-shadow:0 0 0 1px rgba(234,240,248,.28),0 3px 10px rgba(0,0,0,.5)}
/* marcador do ônibus em destaque */
/* LONGE DA BOLINHA (Alan, 11/09/2026: "você tem colocado o card do ônibus bem
   em cima da bolinha do ônibus, e isso não deveria acontecer"). A pílula é
   vermelha e a bolinha também: a 15 px do centro, com a bolinha tendo 10 px de
   raio mais a borda branca, as duas se fundiam num borrão só. 26 px deixam a
   bolinha inteira à vista, com respiro. */
.pn-rotulo span{display:inline-block;transform:translate(26px,-9px);white-space:nowrap;
  background:#de0013;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;
  box-shadow:0 3px 10px rgba(10,14,20,.4)}
@keyframes pnHalo{0%{box-shadow:0 0 0 0 rgba(222,0,19,.5)}70%{box-shadow:0 0 0 26px rgba(222,0,19,0)}100%{box-shadow:0 0 0 0 rgba(222,0,19,0)}}
.pn-halo i{display:block;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;animation:pnHalo 2.2s ease-out infinite}

/* TELA CHEIA: só o palco — sem menu, sem cabeçalho, sem filtros */
.pn-tela:fullscreen,.pn-tela.pn-cheio{background:var(--dark);padding:0;overflow:hidden}
.pn-tela.pn-cheio{position:fixed;inset:0;z-index:1200;margin:0}
.pn-tela:fullscreen .pagina-cab,.pn-tela:fullscreen .pn-filtros,.pn-tela.pn-cheio .pagina-cab,.pn-tela.pn-cheio .pn-filtros{display:none}
.pn-tela:fullscreen .pn-palco,.pn-tela.pn-cheio .pn-palco{height:100vh;height:100dvh;margin:0;border-radius:0;box-shadow:none;grid-template-columns:1fr 420px}
.pn-tela:fullscreen .pn-cartao,.pn-tela.pn-cheio .pn-cartao{left:28px;bottom:28px;max-width:min(880px,calc(100% - 470px));padding:18px 26px}
.pn-tela:fullscreen .pn-linha,.pn-tela.pn-cheio .pn-linha{font-size:34px;margin:5px 0 14px}
.pn-tela:fullscreen .pn-cartao,.pn-tela.pn-cheio .pn-cartao{gap:8px 15px}
.pn-tela:fullscreen .pn-campo-rot,.pn-tela.pn-cheio .pn-campo-rot{font-size:17px}
.pn-tela:fullscreen .pn-campo-val,.pn-tela.pn-cheio .pn-campo-val{font-size:27px}
.pn-tela:fullscreen .pn-linha-nome,.pn-tela.pn-cheio .pn-linha-nome{font-size:32px}
.pn-tela:fullscreen .pn-campo-forte,.pn-tela.pn-cheio .pn-campo-forte{font-size:58px}
.pn-tela:fullscreen .pn-hval,.pn-tela.pn-cheio .pn-hval{font-size:38px}
.pn-tela:fullscreen .pn-horas,.pn-tela.pn-cheio .pn-horas{gap:0 44px;margin:2px 0 0}
.pn-tela:fullscreen .pn-rodape-sit,.pn-tela.pn-cheio .pn-rodape-sit{font-size:22px}
.pn-tela:fullscreen .pn-topo,.pn-tela.pn-cheio .pn-topo{gap:40px}
.pn-tela:fullscreen .pn-rodape,.pn-tela.pn-cheio .pn-rodape{font-size:20px;margin-top:4px}
.pn-tela:fullscreen .pn-cartao,.pn-tela.pn-cheio .pn-cartao{gap:10px}
.pn-tela:fullscreen .pn-campo-nota,.pn-tela.pn-cheio .pn-campo-nota{font-size:23px}
.pn-tela:fullscreen .pn-hora-rot,.pn-tela.pn-cheio .pn-hora-rot{font-size:23px}
.pn-tela:fullscreen .pn-hora b,.pn-tela.pn-cheio .pn-hora b{font-size:68px}
.pn-tela:fullscreen .pn-hora-falta,.pn-tela.pn-cheio .pn-hora-falta{font-size:28px}
.pn-tela:fullscreen .pn-chip,.pn-tela.pn-cheio .pn-chip{font-size:30px;padding:3px 16px}
.pn-tela:fullscreen .pn-sem-previsao,.pn-tela.pn-cheio .pn-sem-previsao{font-size:34px}
.pn-tela:fullscreen .pn-sit,.pn-tela.pn-cheio .pn-sit{font-size:28px;margin-top:8px}
.pn-tela:fullscreen .pn-onde,.pn-tela.pn-cheio .pn-onde{font-size:20px;margin-top:12px}
.pn-tela:fullscreen .pn-fila-item,.pn-tela.pn-cheio .pn-fila-item{padding:17px 22px;grid-template-columns:78px 1fr}
.pn-tela:fullscreen .pn-fila-hora,.pn-tela.pn-cheio .pn-fila-hora{font-size:27px}
.pn-tela:fullscreen .pn-fila-linha,.pn-tela.pn-cheio .pn-fila-linha{font-size:16.5px}
.pn-tela:fullscreen .pn-fila-carro,.pn-tela.pn-cheio .pn-fila-carro,
.pn-tela:fullscreen .pn-fila-sit,.pn-tela.pn-cheio .pn-fila-sit{font-size:14px}
.pn-tela:fullscreen .pn-fila-cab,.pn-tela.pn-cheio .pn-fila-cab{font-size:14px;padding:16px 22px}
.pn-tela:fullscreen .pn-fila-fim,.pn-tela.pn-cheio .pn-fila-fim{font-size:14px;padding:18px 22px}
@media (max-width:1100px){.pn-palco{grid-template-columns:minmax(0,1fr);height:auto}.pn-mapa{height:52vh;height:52dvh;min-height:300px}
  .pn-cartao{position:static;width:auto;margin:0;border-radius:0}.pn-fila{border-left:0;border-top:1px solid var(--line);max-height:40vh;max-height:40dvh}}

/* LOGOTIPO DA EMPRESA no alto da fila (08/09/2026): na TV da agência o telão
   é a cara da Expresso Itamarati. Arquivo servido pelo próprio sistema
   (public/img), para não depender do site nem da política de conteúdo. */
/* O BLOCO NA COR DO LOGO (08/09/2026): o arquivo já tem fundo vermelho próprio
   (medido no JPG: rgb(240,49,39)), então pintar o bloco da mesma cor faz a
   moldura branca sumir e o logo virar parte do cabeçalho da fila. */
/* CABEÇALHO DE PONTA A PONTA (11/09/2026): primeira linha do grid do palco,
   logo à esquerda, nome da agência em corpo de longe, contador à direita. */
.pn-marca{grid-column:1/-1;display:flex;align-items:center;gap:30px;padding:8px 18px;background:#f03127;min-width:0}
.pn-marca img{display:block;height:22px;width:auto;flex:none}
/* O NOME VAI PARA A DIREITA, COM ETIQUETA (11/09/2026: "o nome da agência pode
   jogar pra direita da faixa vermelha, e aponta que é agência"). A faixa fica
   com o logo numa ponta e a identificação do telão na outra; a palavra
   "Agência" diz o que é aquele nome — sem ela, num telão visto de longe, era só
   um nome de cidade solto ao lado da marca. */
/* a troca do nome da agência entra com um leve deslize (11/09/2026) */
@keyframes pnTroca{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.pn-troca{animation:pnTroca .42s cubic-bezier(.2,.7,.3,1) both}
.pn-marca-ag{margin-left:auto;display:flex;align-items:baseline;gap:9px;min-width:0}
/* "Agência" com a inicial maiúscula (pedido de 11/09/2026); o NOME é que fica
   todo em caixa alta, porque é ele que se lê de longe. */
.pn-marca-ag i{font-style:normal;color:#fff;opacity:.85;font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pn-marca-agencia{color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pn-tela.pn-cheio .pn-marca,.pn-tela:fullscreen .pn-marca{padding:11px 26px;gap:44px}
.pn-tela.pn-cheio .pn-marca img,.pn-tela:fullscreen .pn-marca img{height:32px}
.pn-tela.pn-cheio .pn-marca-agencia,.pn-tela:fullscreen .pn-marca-agencia{font-size:30px}
.pn-tela.pn-cheio .pn-marca-ag i,.pn-tela:fullscreen .pn-marca-ag i{font-size:19px}
.pn-tela.pn-cheio .pn-marca-ag,.pn-tela:fullscreen .pn-marca-ag{gap:13px}

/* SELO DE FRESCOR: mora DENTRO do palco de propósito — a barra de filtros some
   no modo telão, e era lá que vivia o único carimbo de atualização. */
.pn-selo{position:absolute;bottom:18px;right:18px;z-index:640;display:inline-flex;align-items:center;gap:7px;
  background:rgba(27,31,39,.86);color:#fff;padding:5px 12px;border-radius:99px;pointer-events:none;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;box-shadow:0 3px 12px rgba(8,12,18,.35)}
.pn-selo:empty{display:none}
/* apertado: o selo cede letra e respiro — mas nunca sai do canto */
.pn-selo.pn-selo-mini{font-size:10px;padding:3px 9px;gap:5px}
.pn-selo.pn-selo-mini i{width:6px;height:6px}
.pn-tela.pn-cheio .pn-selo.pn-selo-mini,.pn-tela:fullscreen .pn-selo.pn-selo-mini{font-size:12.5px;padding:5px 12px}
.pn-selo i{display:block;width:7px;height:7px;flex:none;border-radius:50%;background:#2fbf71;
  animation:pnSeloPulso 2.4s ease-out infinite}
.pn-selo-velho{background:rgba(120,68,4,.92)}
.pn-selo-velho i{background:#f5b301;animation:none}
.pn-selo-mudo{background:rgba(150,6,20,.94)}
.pn-selo-mudo i{background:#fff;animation:none}
@keyframes pnSeloPulso{0%{box-shadow:0 0 0 0 rgba(47,191,113,.55)}70%{box-shadow:0 0 0 9px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.pn-tela.pn-cheio .pn-selo,.pn-tela:fullscreen .pn-selo{bottom:28px;right:28px;font-size:15px;padding:8px 17px;gap:9px}
.pn-tela.pn-cheio .pn-selo i,.pn-tela:fullscreen .pn-selo i{width:9px;height:9px}
/* O SELO DENTRO DO CARTÃO DA CHEGADA (14/09/2026): mesma linha do rodapé
   (situação · onde está), encostado no canto inferior direito. Sai do fluxo
   absoluto do mapa; o fundo fica translúcido sobre a cor do cartão, e as cores
   de alerta (posição velha, sem contato) continuam as mesmas. */
.pn-base{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0}
.pn-base .pn-rodape{min-width:0}
.pn-cartao .pn-selo{position:static;flex:none;margin-left:auto;background:rgba(8,12,18,.3);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
/* BEM DISCRETO (Alan, 14/09/2026: "o cardzinho da posição pode diminuir mais,
   pra ficar bem discreto"): letra de nota, respiro mínimo, sem borda, e a
   bolinha menor — continua legível de perto e não disputa com os horários */
.pn-cartao .pn-selo{font-size:9.5px;font-weight:500;letter-spacing:.01em;padding:2px 7px;gap:4px;border-color:transparent;background:rgba(8,12,18,.22);opacity:.9}
.pn-cartao .pn-selo i{width:5px;height:5px}
.pn-tela.pn-cheio .pn-cartao .pn-selo,.pn-tela:fullscreen .pn-cartao .pn-selo{font-size:12px;padding:3px 10px;gap:6px}
.pn-tela.pn-cheio .pn-cartao .pn-selo i,.pn-tela:fullscreen .pn-cartao .pn-selo i{width:6px;height:6px}
.pn-cartao .pn-selo.pn-selo-velho{background:rgba(120,68,4,.92)}
.pn-cartao .pn-selo.pn-selo-mudo{background:rgba(150,6,20,.94)}

/* PINO DA AGÊNCIA no mapa: o ponto de referência de quem está olhando o telão */
.pn-agencia-pino i{display:block;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:#1b1f27;border:3px solid #fff;box-shadow:0 2px 8px rgba(10,14,20,.45)}
.pn-agencia-pino span{position:absolute;left:14px;top:-9px;white-space:nowrap;background:#1b1f27;color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:99px;
  box-shadow:0 3px 10px rgba(10,14,20,.4)}
.pn-tela.pn-cheio .pn-agencia-pino span,.pn-tela:fullscreen .pn-agencia-pino span{font-size:13px;padding:4px 11px}
/* BÚSSOLA: quando a agência não cabe na tela junto com o ônibus (o zoom é fixo,
   nunca abre), ela aparece na borda apontando para casa, com a distância. */
.pn-bussola{position:absolute;z-index:540;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  background:#1b1f27;color:#fff;padding:5px 11px 5px 8px;border-radius:99px;pointer-events:none;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 4px 14px rgba(10,14,20,.45);animation:pn-bussola-entra .5s ease both}
.pn-bussola-ico{display:block;width:13px;height:13px;flex:none;transform-origin:50% 50%}
.pn-tela.pn-cheio .pn-bussola,.pn-tela:fullscreen .pn-bussola{font-size:14px;padding:7px 15px 7px 11px}
.pn-tela.pn-cheio .pn-bussola-ico,.pn-tela:fullscreen .pn-bussola-ico{width:17px;height:17px}
@keyframes pn-bussola-entra{from{opacity:0}to{opacity:1}}
.pn-tela.pn-cheio .pn-rotulo span,.pn-tela:fullscreen .pn-rotulo span{font-size:14px;padding:4px 11px}
.pn-rotulo-baixo span{transform:translate(-50%,24px)}
/* os km que faltam, dentro da pílula do prefixo: mesma cor, peso menor,
   separados por um filete — informação de apoio, não um segundo rótulo */
.pn-rotulo i{font-style:normal;font-weight:600;opacity:.8;margin-left:6px;padding-left:6px;
  border-left:1px solid rgba(255,255,255,.35)}
.pn-rotulo-esq span{transform:translate(calc(-100% - 26px),-9px)}
/* KM NA METADE DO CAMINHO (Alan, 14/09/2026: "colocar a distância no centro
   entre o destino e onde o ônibus está"): pílula escura com aro branco,
   centrada sobre o traçado. É posicionada por transform, então só aparece por
   opacidade (ver a regra do prefixo acima); some quando não cabe e os km
   voltam para a pílula do prefixo (pnAcomodarRotulo). */
/* AO LADO DA LINHA E CINZA, DISCRETO (Alan, 14/09/2026: "coloca ao lado, e usa
   um cinza pro card, pra ficar mais discreto, porque o foco é destino e onde o
   ônibus está"). O deslocamento para fora da faixa vem do JS (--km-dx/--km-dy,
   na perpendicular do trecho). */
.pn-km span{display:inline-block;transform:translate(calc(-50% + var(--km-dx,0px)),calc(-50% + var(--km-dy,0px)));white-space:nowrap;
  background:rgba(243,244,246,.94);color:#5b6472;border:1px solid #d3d8df;
  font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:99px;
  box-shadow:0 1px 4px rgba(10,14,20,.15);transition:opacity .35s ease}
.pn-km.pn-km-aguarda span,.pn-km.pn-km-oculto span{opacity:0}
.pn-tela.pn-cheio .pn-km span,.pn-tela:fullscreen .pn-km span{font-size:13.5px;padding:3px 11px}
html.dark .pn-km span{background:rgba(42,54,70,.94);color:#b8c4d2;border-color:#3a506a;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pn-rotulo-cima span{transform:translate(-50%,calc(-100% - 24px))}
/* tela estreita (celular): aí a metade sozinha pode não caber, e quebrar
   dentro dela é melhor do que vazar para fora do cartão */
@media (max-width:640px){.pn-par{white-space:normal}}

/* NÚMERO DO SERVIÇO (09/09/2026): é um código que a pessoa vai conferir em
   outro sistema, então precisa de fonte de largura fixa — em proporcional,
   7756510 e 7756610 se confundem — e de um clique para copiar. */
.pt-servico { white-space: nowrap; }
/* TEXTO NORMAL (10/09/2026: "pode ser um texto normal igual os outros campos"
   e "nao precisa ter a opcao de copiar ao clicar"). Sem caixa, sem cursor de
   clique, sem selecao automatica: e texto, e se comporta como texto. */
.pt-srv {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
/* na LISTA, MESMA FONTE das outras colunas (Alan, 14/09/2026: "coluna de
   serviço deixa com mesma fonte das outras colunas"). A fonte de largura fixa
   destoava do resto da tabela; os algarismos tabulares da própria Manrope
   mantêm os números alinhados um embaixo do outro, que era o motivo dela. */
#ptLista .pt-srv {
  font-variant-numeric: tabular-nums;
}
/* PISO DUPLO (01/10/2026): os dois serviços do mesmo ônibus na MESMA linha da lista — o principal em cima, o outro embaixo com um "+", mais discreto */
#ptLista .pt-srv-irmao { display: block; color: var(--muted); font-size: 12px; }
#ptLista .pt-srv-irmao::before { content: "+ "; }

/* PASSAGEIROS A BORDO (09/09/2026): e o numero que conta a lotacao, entao
   destaca-se de Emb./Des., que sao movimento. Zero fica apagado como os
   demais, mas aparece como 0 — no destino, zero e a resposta certa. */
.pt-bordo-cheio { font-weight: 700; color: var(--ink); }

/* Cabecalho de coluna com explicacao (09/09/2026: o balao padrao do sistema no
   lugar do tooltip nativo do navegador). SEM cursor especial: o ponteiro de
   ajuda foi recusado no mesmo dia ("deixe o mouse padrao normal"). A pista de
   que ha explicacao ali e o proprio realce no hover. */
th[data-balao]:hover { color: var(--ink, #1f2430); }

/* FICHA DA VIAGEM (10/09/2026): os dados de identificacao em campos rotulados,
   no lugar da linha corrida separada por pontos. Rotulo pequeno em cima, valor
   embaixo — o olho varre os rotulos e para no que procura. */
/* UMA LINHA SO (10/09/2026: "minha meta era esse bloco de info ser numa unica
   linha... qualquer coisa diminua o tamanho da fonte, mas faz caber"). Por isso
   nowrap na ficha E em cada valor: sem os dois, o campo Linha quebrava dentro
   de si mesmo e a ficha virava duas alturas. */
.pt-ficha { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin: 8px 0 2px; }
.pt-ficha-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pt-ficha-rot {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted, #6b7280); white-space: nowrap;
}
.pt-ficha-val {
  font-size: 12px; font-weight: 600; color: var(--ink, #1f2430); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Linha e motorista sao os textos longos: so eles encolhem, e nessa ordem —
   o resto (numeros curtos) nunca perde caractere. */
.pt-ficha-flex { flex: 1 1 auto; min-width: 60px; }
.pt-ficha-item .pt-ficha-sub { font-weight: 500; color: var(--muted, #6b7280); }
.pt-ficha .chip { align-self: flex-start; font-size: 10.5px; }
.pt-ficha-item:last-child { flex: 0 0 auto; }
/* telas estreitas: aí sim vale quebrar, senão não sobra nada legível */
@media (max-width: 900px) {
  .pt-ficha { flex-wrap: wrap; gap: 8px 14px; }
  .pt-ficha-val { white-space: normal; overflow: visible; }
}

/* (i) do "por que este carro" e as acoes, dentro do card do veiculo
   (10/09/2026): o cartao proprio saiu para compactar a tela. */
.pt-porque { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--muted, #6b7280); }
.pt-porque .icon { width: 14px; height: 14px; }
.pt-porque:hover { color: var(--brand, #de0013); }
/* balao com muito texto quebra linha e precisa de mais largura */
.balao-flutuante { white-space: pre-line; }
.balao-largo { max-width: 380px; }

/* VISAO DEDICADA DA VIAGEM (10/09/2026): barra de volta no topo do detalhe.
   Fica grudada no alto ao rolar — a tabela de pontos e longa, e sem isso a
   saida some da vista. */
/* o botao de voltar mora no canto superior direito do cabecalho (10/09/2026),
   e so aparece quando ha uma viagem aberta */
/* ALINHADO NA BARRA DE 56px (Alan, 14/09/2026: "alinhar verticalmente no espaço
   da linha do topo... e usar um texto mais explícito"): o margin-top de 14px do
   .panel-btn empurrava o botão para baixo do título; e "Viagens do dia" não
   dizia que o clique volta para a lista — agora é "Voltar para a lista", com seta. */
.pt-voltar-topo { display: none; margin: 0 0 0 auto; align-self: center; }
.pt-modo-viagem .pt-voltar-topo { display: inline-flex; }
/* cara de botão que leva de volta (Alan, 26/09/2026: "esse botão acho que dá pra melhorar"): a seta desliza no hover e o botão ganha um leve relevo */
.pt-voltar-topo .icon { transition: transform var(--t-rapida); }
.pt-voltar-topo:hover .icon { transform: translateX(-3px); }
.pt-voltar-topo:hover { box-shadow: 0 2px 10px rgba(15, 23, 42, .12); }
/* ao voltar, a linha de onde se saiu pisca uma vez para o olho reencontrar */
@keyframes ptVolta { from { background: var(--info-bg, #e7f0fb); } to { background: transparent; } }
.pt-linha-volta > td { animation: ptVolta 1.6s ease-out; }
/* DADO QUE MUDOU POR CAUSA DE UM FILTRO (Alan, 22/09/2026: "quando eu faço
   filtros os dados mudam bruscamente... não tem nenhuma transição"): o mesmo
   flash do "voltei aqui" acima, só mais curto e genérico — pisca só o que
   realmente mudou (uma linha, um número), nunca o bloco/tela inteira (isso
   continua proibido: ver irParaTela, "nunca anima em filtro/troca cirúrgica") */
@keyframes flashMudou { from { background: var(--info-bg, #e7f0fb); } to { background: transparent; } }
.flash-mudou { animation: flashMudou 1s ease-out; }
.flash-mudou > td { animation: flashMudou 1s ease-out; }
/* a MESMA animação com outro nome (04/11/2026): a lista de veículos do Mapa recomeça o piscar trocando entre flash-mudou e flash-mudou-b, sem forçar o layout da lista (fleetPiscarLinha) */
@keyframes flashMudouB { from { background: var(--info-bg, #e7f0fb); } to { background: transparent; } }
.flash-mudou-b { animation: flashMudouB 1s ease-out; }

/* no modo viagem a barra de filtros da lista sai de cena (10/09/2026) — e os
   números do dia também (23/09/2026, Alan: "quando abro uma viagem pra
   investigar não precisa ter esses KPIs"): a faixa da própria viagem fica */
.pt-modo-viagem > .cartao-consulta,
.pt-modo-viagem > #ptTopo { display: none; }

/* FAIXA DE KPIS DA VIAGEM (10/09/2026): os dados da viagem entraram aqui, entao
   os campos ficam mais apertados — fonte menor para caber tudo em uma faixa. */
/* A faixa base tem 6 colunas fixas; com os dados da viagem sao 9, e o grid
   antigo empurrava tres para uma segunda linha. Aqui as colunas sao declaradas:
   so a LINHA cresce, o resto ocupa o que precisa. Fonte menor para caber. */
/* FAIXA BAIXA, NUMA FILEIRA SÓ (Alan, 18/09/2026: "muito alto ainda... altura bem
   menor, pra ficar estreito e caber tudo"). As duas alturas de antes (Partida sobre
   Serviço, Pontos sobre Situação + Maior atraso) davam ~118 px. Agora cada cartão é
   rótulo + valor + no máximo uma linha de detalhe (.pt-kpi-linha2), todos na mesma
   fileira: os curtos ocupam só o que precisam e a sobra vai para Linha e Motorista,
   que quebram em até duas linhas. Sem o motorista (perfil de agência), a coluna sai. */
.pt-kpis-viagem {
  grid-template-columns: max-content max-content minmax(0,1.7fr) max-content minmax(0,1fr) max-content max-content;
  gap: 8px;
}
.pt-kpis-viagem.sem-motorista {
  grid-template-columns: max-content max-content minmax(0,1fr) max-content max-content max-content;
}
.pt-kpis-viagem .pt-kpi { padding: 6px 10px; gap: 0; align-items: stretch; }
.pt-kpis-viagem .pt-kpi b { font-size: 12px; line-height: 1.3; }
/* a hora ao lado da data, e a placa ao lado do prefixo */
.pt-kpis-viagem .pt-kpi-junto { display: inline; }
.pt-kpis-viagem .pt-kpi-placa { display: inline; margin-left: 6px; }
/* a linha de detalhe: menor e discreta; o que está em negrito nela é o número */
/* (.pt-kpi > span é o estilo do rótulo — caixa alta; aqui volta ao texto normal) */
.pt-kpi > .pt-kpi-linha2 { display: block; font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--muted, #6b7280); white-space: nowrap; overflow: visible; margin-top: 1px; }
.pt-kpis-viagem .pt-kpi-linha2 b { font-size: inherit; line-height: inherit; font-weight: 700; }
.pt-kpis-viagem .pt-kpi-linha2 .pt-srv { color: var(--ink); font-weight: 600; }
.pt-kpis-viagem .pt-score { margin-top: 3px; }
.pt-kpis-viagem .pt-score-barra { min-width: 40px; }
/* AS AÇÕES DO CARTÃO SÃO ÍCONES REDONDOS NO CANTO DE CIMA (Alan, 26/09/2026: "algum ícone pra clicar no canto superior direito do card... com o tooltip legal, e ter também uma opção pra ver no mapa; a gente
   ganharia espaço"). Antes eram fichas de texto em maiúsculas (25/09), e a linha de baixo do cartão só existia para elas. Só o ícone, com o nome no aria-label e o balão de título e explicação; só tokens de cor.
   20 px no mouse, sem crescer a linha do rótulo (a margem negativa); 30 px no toque, que precisa de alvo maior */
.pt-kpi-ico { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); transition: background-color 160ms ease, border-color 160ms ease; }
/* O DESENHO CENTRALIZADO NO CÍRCULO (Alan, 22/10/2026: "precisa centralizar o ícone dentro do círculo"): o círculo de 20 px tem 18 px de miolo (a borda de 1 px) e o desenho de 11 px sobrava 7 px — 3,5 de cada lado —, e o navegador alinha cada caixa ao pixel
   por conta própria: o desenho caía meio pixel para um lado, conforme a posição do cartão na tela. Com 12 px sobram 6 (3 de cada lado, um número inteiro) e o desenho fica no meio em qualquer posição; no toque, 16 px no botão de 28 e 14 px no de 24 */
.pt-kpi-ico .icon { width: 12px; height: 12px; }
.pt-kpi-ico:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.pt-kpi-ico:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@media (pointer: coarse) { .pt-kpi-ico { width: 28px; height: 28px; } .pt-kpi-ico .icon { width: 16px; height: 16px; } }
/* OS TRÊS PONTINHOS (Alan, 22/10/2026: "nesses cards, ao invés de usarmos esses ícones, eu acho que ficaria melhor colocar 3 pontinhos verticalmente, porque quando clicar nos 3 pontinhos abriria as opções"): o cartão que tem Trocar + Remover mostra UM botão só, o círculo de
   sempre com os três pontinhos dentro, e as ações moram no menu que ele abre (o mesmo menu do PIN do mapa: .mapa-menu-ctx). Os pontos de 14 px sobram 4 px no miolo do círculo de 20 — par, como os 12 px do ícone único, para o desenho ficar no meio em qualquer posição —; no toque,
   18 px no botão de 28 (sobram 8). Com o menu aberto o botão fica marcado como no hover. Vêm depois da regra do toque acima: a mesma especificidade, a de baixo vence */
.pt-kpi-mais .icon { width: 14px; height: 14px; }
.pt-kpi-ico[aria-expanded="true"] { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
@media (pointer: coarse) { .pt-kpi-mais .icon { width: 18px; height: 18px; } }
/* Os ícones de ação ficam no canto de cima do cartão, À DIREITA do rótulo VEÍCULO (Alan, 25/09/2026). O cartão vira uma grade de duas colunas — o rótulo à esquerda, os ícones à direita, na mesma linha — e o resto
   (prefixo, placa) ocupa a largura toda: nada flutua por cima do rótulo (26/09/2026: "ficou muito grande e tampou o texto VEÍCULO") e os ícones cabem ao lado dele até no cartão mais estreito */
.pt-kpis-viagem .kv-veiculo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; align-content: start; }
/* EMPILHADOS (Alan, 26/09/2026: "o ícone de trocar primeiro e o de ver no mapa logo abaixo, empilhados na vertical") e ALINHADOS COM O VALOR ("o ícone de trocar alinhado com o prefixo, o de mapa abaixo"): a coluna da direita começa na linha do
   prefixo e atravessa a da placa; o rótulo, sozinho na linha de cima, fica só com o "i" ao lado da palavra */
.pt-kpis-viagem .kv-veiculo > .pt-kpi-rot { grid-column: 1; grid-row: 1; }
.pt-kpis-viagem .kv-veiculo > b { grid-column: 1; grid-row: 2; }
.pt-kpis-viagem .kv-veiculo > .pt-kpi-linha2 { grid-column: 1; grid-row: 3; }
/* O BOTÃO FICA NO TOPO, À DIREITA, NOS DOIS CARTÕES (Alan, 01/10/2026: "o ícone de trocar motorista, trocar veículo, adicionar motorista ou adicionar veículo: todos devem ficar alocados no topo superior direito dentro do card,
   porque dessa forma padronizamos"; em 26/09 o do veículo descia para a linha da placa e o Trocar do motorista para a da matrícula): coluna 2, linha 1 (a do rótulo), sem esticar a linha (margem negativa). Trocar ou alocar: o mesmo lugar */
.pt-kpis-viagem .kv-veiculo > .pt-kpi-cab-acao, .pt-kpis-viagem .kv-motorista > .pt-kpi-cab-acao { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: -4px -2px -4px 0; }
.pt-kpis-viagem .pt-kpi-cab-acao { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -2px; }
/* UM BOTÃO SÓ POR CARTÃO, E ELE NÃO ESTICA A LINHA (Alan, 21/10/2026: "esse gap que ficou… não ficou bom"; 22/10/2026: "ao invés de usarmos esses ícones… 3 pontinhos"): o Trocar e o Remover empilhados na coluna da direita tinham 44 px contra os 15 px da linha do rótulo e abriam um vão entre VEÍCULO e o
   prefixo. Hoje o cartão com as duas ações tem só o botão dos três pontinhos (as ações moram no menu) e o cartão com uma ação só tem o botão dela — nunca dois. Com o mouse a ficha deixa de ser uma caixa (display: contents) e o botão vai para a linha do rótulo da grade, com a margem negativa que
   não cresce a linha. No toque a ficha é absoluta no canto (regra abaixo) e nunca esticou a grade */
@media (pointer: fine) {
  .pt-kpis-viagem :is(.kv-veiculo, .kv-motorista) > .pt-kpi-cab-acao { display: contents; }
  /* O BOTÃO NÃO FICA COLADO NA BORDA (Alan, 22/10/2026: "os botões de canto estão muito no canto do card... pelo menos na parte superior está muito colado no topo"): ele ficava a 3 px da borda de cima (e a 9 px da direita); agora a 8 px — a margem de cima vai de -4 para +1 e a de baixo
     de -4 para -9, para a CAIXA dele (1 + 20 - 9 = 12 px) seguir menor que a linha do rótulo (15 px) e o cartão não esticar */
  .pt-kpis-viagem :is(.kv-veiculo, .kv-motorista) > .pt-kpi-cab-acao > .pt-kpi-ico { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: 1px -2px -9px 0; }
}
/* o cartão do MOTORISTA leva a mesma ficha (Trocar/Alocar), no mesmo canto (Alan, 26/09/2026: "é importante ter também um botão pra trocar o motorista") */
.pt-kpis-viagem .kv-motorista { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; align-content: start; }
.pt-kpis-viagem .kv-motorista > .pt-kpi-rot { grid-column: 1; grid-row: 1; }
.pt-kpis-viagem .kv-motorista > b { grid-column: 1; grid-row: 2; }
.pt-kpis-viagem .kv-motorista > .pt-kpi-linha2 { grid-column: 1; grid-row: 3; }
/* NO TOQUE (celular), O BOTÃO NÃO ESTICA O CARTÃO (Alan, 27/09/2026: "os cards de veículo e motorista estão ficando com altura desproporcional... enquadrar igual os outros"): o botão de 28 px
   sai da grade e fica na borda direita, NO TOPO como no mouse (01/10/2026: era no meio; grid-area: auto — senão o "top" se mede pela célula da grade, não pelo cartão); o texto reserva a faixa dele pelo padding.
   Medido em 375 px: 115 → 75 px com nome em duas linhas, a mesma altura dos cartões vizinhos */
@media (pointer: coarse) {
  .pt-kpis-viagem .kv-veiculo, .pt-kpis-viagem .kv-motorista { position: relative; padding-right: 44px; column-gap: 0; }
  .pt-kpis-viagem .kv-veiculo > .pt-kpi-cab-acao, .pt-kpis-viagem .kv-motorista > .pt-kpi-cab-acao {
    position: absolute; grid-area: auto; top: 6px; right: 8px; margin: 0; }
}
/* rotulo em cima: pequeno, caixa alta, discreto — o valor e que se le */
.pt-kpi-rot {
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted, #6b7280); white-space: nowrap; margin-bottom: 2px;
}
/* UM ÍCONE ANTES DO RÓTULO (Alan, 26/09/2026: "um ícone antes do texto: (ícone) partida, (ícone) empresa..."): pequeno e no tom do próprio rótulo, para o olho achar o cartão sem ler */
.pt-kpi-rot { display: flex; align-items: center; gap: 4px; }
.pt-kpi-rot .icon { width: 11px; height: 11px; flex: none; }
/* o "i" do "por que este carro?" mora no rótulo, na frente da palavra VEÍCULO (Alan, 26/09/2026) */
.pt-kpi-rot .pt-porque { margin-left: 0; }
.pt-kpi-rot .pt-porque .icon { width: 12px; height: 12px; }
/* o NOME DA LINHA vai inteiro: quebra em duas linhas em vez de cortar com "..."
   (10/09/2026 — "exibir o nome da linha completo sem colocar ...") */
.pt-kpi-larga b { white-space: normal; overflow: visible; text-overflow: clip; }
.pt-kpi-larga { min-width: 0; }
/* a hora da partida vai na linha de baixo da data (10/09/2026): sao duas
   informacoes, e empilhadas cabem melhor na coluna estreita */
.pt-kpi-sub { display: block; font-weight: 500; color: var(--muted, #6b7280); }
/* a placa embaixo do prefixo, menor que a hora da partida: é conferência, não
   manchete (14/09/2026) */
.pt-kpi-placa { font-size: 10.5px; letter-spacing: .02em; }
/* aposto na MESMA tonalidade do horario da partida, mas em linha: o sentido
   vem DEPOIS do nome da linha (14/09/2026; antes vinha antes) em vez de ficar
   escondido num balao (10/09/2026) */
.pt-kpi-ap { font-weight: 500; color: var(--muted, #6b7280); }
.pt-sub-detalhe { margin: 4px 0 0; font-size: 12px; color: var(--muted, #6b7280); }
/* O CABEÇALHO DOS CARTÕES QUE RECOLHEM (Visão detalhada e Auditoria da viagem, 26/09/2026): as ações à direita — o Excel e o Recolher/Expandir — na mesma linha; o .panel-btn traz margem em cima e aqui não */
/* UM ÍCONE ANTES DO TÍTULO dos cartões da viagem (Alan, 26/09/2026: "nos cards Linha do tempo, Trajeto da viagem, Visão detalhada faltam ícones antes do texto"): pequeno e na cor da marca, como o da Trilha */
.cartao-titulo-ico { display: flex; align-items: center; gap: 8px; }
.cartao-titulo-ico .icon { width: 16px; height: 16px; flex: none; color: var(--brand); }
.pt-cab-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.pt-cab-acoes .panel-btn { margin: 0; padding: 0 12px; }
/* A VISÃO DETALHADA NÃO É UMA TRIPA (28/10/2026, Alan: "ajustasse a altura desse card para não ficar uma tripa esticada... e ter barra de rolagem interna na tabela"): no computador a tabela tem a altura da tela (menos o cabeçalho da página) e rola por dentro,
   com o cabeçalho colado no alto; no celular a página inteira rola, como sempre */
@media (min-width:761px) and (min-height:521px){
  #ptVisaoCard .tabela-rol{max-height:max(300px,calc(100vh - 300px));max-height:max(300px,calc(100dvh - 300px))}
  #ptVisaoCard #ptTabPontos thead th{position:sticky;top:0;z-index:2}
  #ptVisaoCard #ptTabPontos tfoot th,#ptVisaoCard #ptTabPontos tfoot td{position:sticky;bottom:0;z-index:2}
}
/* O TOTALIZADOR DA VISÃO DETALHADA (28/10/2026, Alan: "talvez seria interessante um totalizador nessa tabela, pra saber a quantidade total de passageiros"): a última linha tem UM total, embaixo da Passag. (a soma dos embarques; a Passag. em si é um saldo e não se soma) e é BAIXA
   ("diminuir um pouco a altura dela pra economizar um pouco de espaço": 5 px em cima e embaixo, eram 9); com a tabela rolando por dentro (bloco acima) ela fica presa no pé, como o cabeçalho no alto */
#ptTabPontos tfoot th,#ptTabPontos tfoot td{padding:5px 12px;border-top:1px solid var(--linha-tabela);border-bottom:0;background:var(--surface-2);font-weight:700;font-variant-numeric:tabular-nums}
#ptTabPontos tfoot td.pt-tot{text-align:center}
/* OS BOTÕES QUE RECOLHEM SÃO UMA SETA que gira meia volta quando o card abre (Alan, 26/09/2026); o do card do mapa, fechado, diz "Abrir o mapa" */
.pt-toggle.panel-btn { margin: 0; padding: 0 12px; font-size: 12px; }
.pt-toggle-ico .icon { transition: transform 260ms var(--ease-out-smooth, cubic-bezier(.23, 1, .32, 1)); }
.pt-toggle-ico[aria-expanded="true"] .icon { transform: rotate(180deg); }
@media (hover: hover) { .pt-toggle-ico:hover:not(:disabled) .icon { transform: none; } .pt-toggle-ico[aria-expanded="true"]:hover:not(:disabled) .icon { transform: rotate(180deg); } }
/* a linha do tempo da auditoria reaproveita a da Trilha (.aud-*); o que a viagem acrescenta: a frase de detalhe embaixo da descrição e o esqueleto de leitura */
.pt-aud-detalhe { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
.pt-aud-skel { display: grid; gap: 14px; padding: 8px 2px; }
#ptAudCorpo { padding-top: 6px; }
#ptAudCorpo .aud-item:last-child .aud-corpo { padding-bottom: 0; }

/* MODELO NOVO DO BLOCO DO TOPO DA VIAGEM (#ptKpisNovo; Alan, 25/09/2026): oito cartões, com o serviço ao lado da linha. A grade de colunas do tamanho do conteúdo só vale de 1400 px
   para cima (medido na revisão: abaixo disso, com o menu lateral aberto, ela espremia a Linha e o Motorista a 22-70 px); de 761 a 1399 px a grade é fluida (cartões de, no mínimo,
   150 px) e no celular seguem as regras de sempre. A hora, a placa e a matrícula são a linha de baixo (.pt-kpi-linha2); o prefixo completo do veículo nunca é cortado. */
@media (min-width: 761px) and (max-width: 1399px) {
  .pt-kpis.pt-kpis-novo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (min-width: 1400px) {
  .pt-kpis-novo { grid-template-columns: max-content max-content minmax(0,1.7fr) max-content max-content minmax(0,1fr) fit-content(230px) max-content; }
  .pt-kpis-novo.sem-motorista { grid-template-columns: max-content max-content minmax(0,1fr) max-content max-content fit-content(230px) max-content; }
}
.pt-kpis-novo .kv-veiculo > b { overflow: visible; text-overflow: clip; }
/* a identificação quebra em duas linhas quando a coluna é estreita, em vez de cortar */
.pt-kpis-novo .kv-ident > b { overflow: visible; white-space: normal; text-overflow: clip; }
/* a matrícula e o nome do motorista nunca saem do cartão: quebram em vez de vazar */
.pt-kpis-novo .kv-motorista .pt-kpi-linha2 { white-space: normal; }
/* a linha de baixo da Linha ("Convencional e Leito cama · 1.470 km", 01/10/2026) também quebra em vez de vazar por cima do cartão vizinho (de 761 a 1399 px o cartão não passa de uma coluna de 150 px) */
.pt-kpis-novo .kv-linha .pt-kpi-linha2 { white-space: normal; }
.pt-kpis-novo .kv-motorista > b { overflow-wrap: anywhere; }
/* o nome de quem alocou (embaixo da Identificação): primeiro e último nome; quando não cabe, corta com "…" e o card do mouse (data-balao) traz o nome inteiro. A coluna da Identificação
   cresce até 230 px (fit-content) e daí em diante corta; no celular o nome quebra em vez de cortar */
.pt-kpis-novo .pt-kpi > .pt-kpi-quem { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 760px) { .pt-kpis-novo .pt-kpi > .pt-kpi-quem { white-space: normal; overflow: visible; text-overflow: clip; } }

/* BARRA DO SCORE do vinculo (10/09/2026): 0 a 100, cor por faixa, com o traco
   no corte de 85 — abaixo dele o motor nao grava o vinculo. */
.pt-score { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pt-score-barra {
  position: relative; flex: 1 1 auto; min-width: 46px; height: 5px;
  border-radius: 99px; background: var(--cinza-bg, #eceef1); overflow: hidden;
}
/* a cor da faixa chega em --score (ptBarraScore), não mais em style= no <i> e no
   número: inline só cairia com !important, e o número precisa clarear no escuro */
.pt-score-barra i { display: block; height: 100%; border-radius: 99px; background: var(--score); }
.pt-score-num { font-size: 11px; font-weight: 700; line-height: 1; color: var(--score); }

/* MAPA EM CARREGAMENTO (10/09/2026): enquanto as posicoes e o historico do dia
   nao chegam, a area diz que esta trabalhando — antes ficava um retangulo
   branco, com cara de tela travada. */
.pt-mini-carregando { position: relative; background: var(--cinza-bg, #eceef1); }
.pt-mini-carregando::after {
  content: "Carregando o mapa e o trajeto do veiculo…";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted, #6b7280); text-align: center; padding: 0 16px;
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.55) 60px 120px);
  animation: ptMiniPulso 1.1s linear infinite;
}
@keyframes ptMiniPulso { from { background-position: 0 0; } to { background-position: 120px 0; } }

/* selo da ultima posicao, no cabecalho do card do mapa (10/09/2026) */
/* SELO NO CENTRO DO CARD (Alan, 10/09/2026: "centralizar essa informação de
   última posição bem no centro horizontalmente do card"). Empurrado por
   `margin-left:auto`, ele parava colado no botão "Recolher", que é o canto
   direito — nao o meio. Centro de verdade exige tirá-lo do fluxo: ancorado em
   50% do cabeçalho e recuado pela própria metade, ele fica no meio do card
   independentemente do tamanho do título e do botão. Em tela estreita volta
   para o fluxo, senão passaria por cima dos dois. */
.pt-mini-selo { font-size: 11.5px; color: var(--muted, #6b7280); white-space: nowrap; }
@media(min-width:900px){
  #ptMiniCab{position:relative}
  #ptMiniCab .pt-mini-selo{position:absolute;left:50%;transform:translateX(-50%);pointer-events:auto}
}
@media(max-width:899px){ .pt-mini-selo{margin-left:auto;margin-right:10px} }
/* No celular o cabeçalho do mapa vira coluna: em linha, o selo espremia o
   título "Trajeto da viagem" em três linhas de uma palavra cada (10/09/2026). */
@media(max-width:640px){
  #ptMiniCab{flex-wrap:wrap;row-gap:4px}
  #ptMiniCab .cartao-titulo{flex:1 0 auto;margin-bottom:0}
  #ptMiniCab .pt-mini-selo{order:3;flex:1 0 100%;margin:0;text-align:center;white-space:normal}
}
.pt-mini-selo-velho { color: var(--alerta, #8a5a00); font-weight: 600; }

/* O "i" DO TÍTULO DO CARTÃO "Trajeto da viagem" = O DO TÍTULO DA PÁGINA (Alan, 21/10/2026, à noite: "isso tudo daria pra colocar dentro de um tooltip informativo... o ícone de i de informativo ficaria a direita do texto trajeto da viagem"; 22/10/2026, com os dois "i" lado a lado:
   "o i de informativo não está com o mesmo tamanho... e o ícone que aparece o mouse... aparece uma interrogação. Deveria ser exatamente como o ícone da pontualidade"): leva a MESMA classe do botão da Pontualidade (.pt-info-btn: círculo de 24 px, ícone de 16 px, MÃO no mouse
   — nada de cursor de ajuda —, círculo cinza e vermelho ao passar e, no toque, a área de 36 px) e é um span (role="img"), não um botão: o motor dos balões ignora o toque em botão, e aqui o toque tem de abrir o balão (data-balao-linhas) com o texto que ficava embaixo do mapa.
   O título põe 8 px entre o texto e o "i" e tem 18 px de altura: −7 px à esquerda deixam os mesmos 5 px visíveis do título da página (8 − 7 + 4 de folga do ícone dentro do círculo) e −3 px em cima e embaixo guardam a altura do título */
.cartao-titulo .pt-mini-i{flex:none;margin:-3px 0 -3px -7px}
.cartao-titulo .pt-mini-i .icon{color:inherit}   /* o título pinta de vermelho todo ícone dele (.cartao-titulo-ico .icon): o "i" segue cinza e só fica vermelho ao passar o mouse, como o da página */
/* O AVISO PASSAGEIRO sobre o mapa (ptMiniFeedback): o resultado de um botão e as falhas, no canto de baixo à ESQUERDA, por cima da barra e do menu dela (806). Fica a 10 px do fundo, a MESMA distância que tem da lateral (Alan, 04/11/2026, vendo o aviso «Não foi possível buscar a posição agora…»: «ajusta pra ele aparecer mais pra baixo… pra ficar com a mesma
   distância embaixo… que tem do lado»). Antes ficava 30 px acima do fundo, por cima da linha do crédito do mapa (Leaflet | OpenStreetMap, embaixo à direita, ~19 px de altura e ~192 de largura): em tela larga (≥ 1100 px, onde o mapa tem ao menos ~786 px e sobram ~64 px entre os dois) o aviso (520 px no máximo, a partir dos 10 da lateral)
   termina bem antes do crédito e os 10 px valem; abaixo disso (menu ao lado com o mapa estreito, tablet, celular) ele continua 30 px acima — nunca em cima do crédito, em qualquer largura. Não pega o mouse: o mapa segue arrastável embaixo dele.
   Entra e sai esmaecendo, como as outras listas do mapa (display com allow-discrete + @starting-style) */
.pt-mini-aviso{position:absolute;left:10px;bottom:10px;z-index:807;max-width:min(520px,calc(100% - 20px));margin:0;padding:6px 10px;border:1px solid var(--line-forte);border-radius:8px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow);color:var(--ink);font-size:11.5px;line-height:1.4;text-wrap:pretty;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,display .18s allow-discrete}
.pt-mini-aviso[hidden]{display:none;opacity:0;transform:translateY(4px)}
@starting-style{.pt-mini-aviso:not([hidden]){opacity:0;transform:translateY(4px)}}
@media (max-width:1099px){.pt-mini-aviso{bottom:30px}}

/* ── CELULAR (10/09/2026: "esse sistema precisa ficar utilizavel numa versao
   mobile... que nao quebre nenhum campo, nao fique nenhum campo impossivel de
   visualizar") ─────────────────────────────────────────────────────────────
   A faixa da viagem tem 10 colunas fixas: em 375px elas viravam 30px cada, com
   os rotulos cortados em "PAR...", "SER..." e os valores se sobrepondo. No
   celular ela vira grade de duas colunas, e cada campo ganha o espaco de que
   precisa. */
@media (max-width: 760px) {
  /* no celular, a grade de duas colunas de antes: cada cartão no seu lugar da fila */
  .pt-kpis-viagem, .pt-kpis-viagem.sem-motorista { grid-template-columns: 1fr 1fr; grid-template-areas: none; }
  .pt-kpis-viagem .pt-kpi { grid-area: auto; }
  /* as bordas "de tabela" daqui saíram (16/09/2026): desde o tema SIGO cada KPI é
     uma caixa com a própria borda, e elas deixavam os ímpares sem a da esquerda */
  .pt-kpis-viagem .pt-kpi > b { font-size: 13px; }
  .pt-kpis-viagem .pt-kpi-rot { font-size: 9.5px; white-space: normal; }
  /* nenhum valor cortado: no celular o espaco vertical e barato */
  .pt-kpis-viagem .pt-kpi > b, .pt-kpis-viagem .pt-kpi-linha2 { white-space: normal; overflow: visible; text-overflow: clip; }
  /* O «+N» DO VEÍCULO NO CELULAR (04/11/2026): o cartão do veículo é o mais estreito (a coluna de uns 115,5 px, depois dos 44 px do botão dos três pontinhos) e o prefixo (94,1 px a 13 px de letra) mais a bolinha (6 px de margem + 21,9 px, medido) passava uns 6 px: ela caía sozinha numa 2ª linha.
     Margem de 4 px e 2 px de cada lado do «+N» (o texto, uns 12 px, cabe nos 17 px do mínimo: fica redonda) a mantêm na linha do prefixo (94,1 + 4 + 17 = 115,1 px, no iPhone de 375 px); com 3 algarismos (+10) ou menos espaço ela volta a descer, como o nome do motorista quebra */
  .pt-kpis-viagem .kv-veiculo .pt-mais-mot { margin-left: 4px; padding-left: 2px; padding-right: 2px; }
}
/* rotulo dos KPIs do dia: no celular quebra em vez de virar "VIAGENS PRE..." */
@media (max-width: 760px) {
  .pt-kpis .pt-kpi > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  .pt-kpis { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 430px) { .pt-kpis { grid-template-columns: 1fr 1fr; } }

/* ══ ESCALA DO DIA ═══════════════════════════════════════════════════════
   Refeita em 12/09/2026 no vocabulário do resto do sistema: a barra de consulta
   é a mesma da Pontualidade, os recortes são os mesmos chips, e a lista é a
   `vg-tabela` de sempre. A primeira versão tinha inventado uma tabela própria,
   com filtros e pílulas só dela, e destoava de todas as outras telas.
   Daqui para baixo fica apenas o que é PRÓPRIO desta tela: os dois campos de
   digitação dentro da linha, que nenhuma outra tem. */

/* a busca é o campo mais usado da barra: na tela estreita (a barra quebra linha, ≤1080px) nasce maior que os outros; na barra em colunas iguais (a da Pontualidade, 06/10/2026) ela é uma célula
   como as outras, no lugar da Linha (o .campo-linha do próprio HTML) */
.esc-campo-busca{flex:1 1 300px;min-width:220px}
.esc-campo-busca input{width:100%;height:36px;padding:0 12px;border:1px solid var(--campo-borda);border-radius:var(--r-lg);
  background:var(--campo-fundo);color:var(--campo-texto);font:inherit;font-size:13px;font-weight:500;text-transform:none;letter-spacing:-.01em}
.esc-campo-busca input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}

/* a lista é longa por natureza (700 viagens): rola dentro do cartão, com o
   cabeçalho preso, em vez de esticar a página */
.esc-rol{max-height:calc(100vh - 330px);max-height:max(260px,calc(100dvh - 330px));overflow-y:auto}
/* Desempenho gerencial (26/09/2026): mesmas caixas da casa; o link da linha herda a cor e só sublinha no hover */
.ds-rol{max-height:calc(100vh - 360px);max-height:max(260px,calc(100dvh - 360px));overflow-y:auto}
/* ONDE ESTÁ O PROBLEMA — A TELA REFEITA (28/09/2026, Alan: "tem que ser fácil pros gerentes e coordenadores, diretores olharem e entender se o problema é
   má programação... se o problema é o motorista... ou outro motivo"). A frase-resposta, os CINCO CARTÕES das causas (título acima do número, ordem fixa,
   clicáveis) e a base medida; embaixo, os CASOS PARA AGIR (vg-tabela) e a JANELA de cada caso. A barra, a legenda e os quatro rankings de antes saíram.
   Cada causa tem uma cor própria (--ds-cor): a faixa do cartão e a bolinha do chip */
.ds-diag .cartao-titulo .icon{color:var(--brand)}
.ds-diag-frase{margin:4px 0 12px;font-size:14px;line-height:1.5;text-wrap:pretty}
.ds-diag-como{font-size:12px;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.ds-causa-programacao{--ds-cor:#de0013}
.ds-causa-motorista{--ds-cor:#7c3aed}
.ds-causa-saida{--ds-cor:#e08a00}
.ds-causa-trecho{--ds-cor:#0e7490}
.ds-causa-semPadrao{--ds-cor:#94a3b8}
.pt-kpis.ds-causas{grid-template-columns:repeat(5,minmax(0,1fr))}
.pt-kpi.ds-causa-card{font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:inset 3px 0 0 var(--ds-cor),0 8px 24px rgba(15,23,42,.05);
  transition:border-color var(--t-rapida),background-color var(--t-rapida)}
.pt-kpi.ds-causa-card:hover{border-color:color-mix(in srgb,var(--ds-cor) 45%,var(--cartao-borda))}
.pt-kpi.ds-causa-card.ativo{border-color:var(--ds-cor);background:color-mix(in srgb,var(--ds-cor) 7%,var(--surface))}
.pt-kpi.ds-causa-card > small{font-size:11.5px;line-height:1.35;color:var(--muted);white-space:normal}
.ds-base{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.ds-base b{color:var(--ink);font-weight:700}
/* O RÓTULO OCULTO NASCE NO CANTO (Alan, 21/10/2026, "essas barras de rolagens estão péssimas"): sem left/top o absoluto ficava na posição de fluxo — no fim da linha do cabeçalho da tabela, 40 px à direita da caixa — e alargava a janela do caso: barra horizontal nativa no pé. Igual ao .alo-sr (06/10) */
.ds-sr{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* os casos: a lista, os chips (com o separador antes dos pontos que ninguém marca) e a coluna do caso que quebra linha */
#dsCasosCartao{scroll-margin-top:72px}
.ds-casos-resumo{font-size:12px;text-align:right}
.ds-chips-sep{align-self:center;width:1px;height:20px;background:var(--line);margin:0 2px}
.ds-casos-rol{max-height:calc(100vh - 300px);max-height:max(320px,calc(100dvh - 300px))}
.ds-rol thead th,.ds-casos-rol thead th{position:sticky;top:0;z-index:2}
.ds-casos td{white-space:normal;vertical-align:top}
.ds-casos .ds-c-pos{width:34px;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-casos .ds-c-caso{min-width:260px}
.ds-casos .ds-c-impacto,.ds-casos .ds-c-causa,.ds-casos .ds-c-conf{white-space:nowrap}
.ds-caso-nome{font-weight:600;color:var(--ink)}
.ds-caso-hora{font-weight:600;color:var(--muted);white-space:nowrap}
/* o fuso ao lado da hora do lugar (UTC−4, UTC−3), pequeno, como na Pontualidade — também no título da janela, fora da tabela */
.ds-hora-fuso{margin-left:4px;font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-caso-sub{display:block;margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted)}
.ds-chip-causa{background:color-mix(in srgb,var(--ds-cor) 13%,transparent);color:var(--texto-2)}
.ds-chip-causa::before{background:var(--ds-cor)}
.ds-acao .sub{white-space:normal}
.ds-casos-mais{display:none}
/* os recolhidos do fim (Gráficos; Linhas e motoristas): o padrão da Auditoria da viagem */
.ds-recolhivel-corpo{margin-top:10px}
.ds-tab-bloco + .ds-tab-bloco{margin-top:18px}
.ds-tab-tit{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink)}
.ds-tab-tit .muted{font-size:12px;font-weight:500}
/* A JANELA DE UM CASO: larga no computador (as viagens em tabela); o esqueleto mora dentro da caixa */
.diag-box.ds-caso-box{width:min(1240px,100%)}
/* O CORPO DA JANELA DO CASO ROLA SOZINHO (21/10/2026, Alan: "essas barras de rolagens estão péssimas nessa tela"): como as janelas de detalhe (cf-box, 06/10) — a caixa não rola mais; o cabeçalho fica fixo e só o corpo rola, com a barra PRÓPRIA (rolagem-rail, ligada pelo app.js em SELETOR_ROLAGEM) por dentro do card; a nativa corria pela caixa inteira, por cima do cabeçalho e dos cantos arredondados */
.diag-box.ds-caso-box{display:flex;flex-direction:column;overflow:hidden}
.diag-box.ds-caso-box > .diag-head{flex:none;position:static}
.diag-box.ds-caso-box > .ds-caso-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.diag-box.ds-caso-box > .ds-caso-corpo:focus{outline:none}   /* focável só para o teclado rolar (tabindex -1): o contorno do foco não desenha a caixa inteira */
.ds-caso-cab-txt{min-width:0}
.ds-caso-cab h2{font-size:17px;line-height:1.3}
.ds-caso-selos{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 3px}
.ds-caso-corpo{padding:10px 22px 18px}
.ds-caso-esq{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.ds-caso-leitura{margin:8px 0 6px;font-size:13.5px;line-height:1.55;color:var(--texto-2);text-wrap:pretty}
.ds-caso-leitura b{color:var(--ink)}
.ds-caso-acao{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:var(--r-sm);font-size:13px;line-height:1.45;
  background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:inset 3px 0 0 var(--brand);color:var(--texto-2)}
.ds-caso-acao .icon{flex:none;width:15px;height:15px;margin-top:2px;color:var(--brand)}
.ds-caso-conta{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.ds-caso-conta b{color:var(--ink)}
.ds-caso-viagens-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.ds-caso-viagens-cab h3{margin:0}
.ds-caso-viagens-cab .panel-btn{margin:0;height:32px;padding:0 12px;font-size:12px}
.ds-caso-viagens-cab .panel-btn .icon{width:14px;height:14px}
.ds-caso-rol{max-height:min(460px,52vh);max-height:min(460px,52dvh);margin-top:8px}
.ds-caso-rol-trechos{max-height:min(260px,34vh);max-height:min(260px,34dvh)}
.diag-corpo .ds-caso-tab{font-size:12.5px}
.diag-corpo .ds-caso-tab th,.diag-corpo .ds-caso-tab td{padding:7px 10px;border-bottom:1px solid var(--linha-tabela)}
.diag-corpo .ds-caso-tab td:last-child{text-align:center;word-break:normal}
.diag-corpo .ds-caso-tab td.num,.diag-corpo .ds-caso-tab th.num{text-align:right}
.ds-caso-tab tbody tr{cursor:default}
.ds-caso-tab tr.ds-fora-do-caso td{color:var(--muted)}
.ds-trechos-tab .ds-t-nome{white-space:normal;min-width:220px}
.ds-trechos-tab .ds-t-nome .chip{margin-left:6px}
.ds-viagens-tab .ds-v-onde{white-space:normal;min-width:170px}
.ds-v-link .ds-seta{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-full);font-size:15px;font-weight:700;color:var(--brand);text-decoration:none}
.ds-v-link .ds-seta:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.ds-pulou{display:flex;flex-direction:column;gap:1px}
.ds-pulou-com{color:var(--erro);font-weight:700}
.ds-funil{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--texto-2)}
.ds-funil b{color:var(--ink)}
.ds-caso-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.ds-caso-rodape-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ds-caso-rodape .panel-btn{margin:0;text-decoration:none}
/* gráficos (27/09/2026): o card das piores linhas ocupa a largura toda do grid */
.an-card-larga{grid-column:1/-1}
#dsGraficos .an-colunas{overflow-x:auto}
/* a pergunta da troca por trecho (27/09/2026), no lugar da lista do modal de alocação */
.pt-aloc-trecho{display:flex;flex-direction:column;gap:10px;min-height:0;padding:4px 2px}
.pt-aloc-trecho-dica{margin:0;font-size:12.5px;color:var(--muted)}
.pt-aloc-trecho-lista{overflow:auto;min-height:0;max-height:38vh;max-height:38dvh;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
/* A PERGUNTA VEM PRIMEIRO (28/09/2026): o painel é o passo 1, sozinho no corpo da caixa — ocupa a altura toda e a lista de localidades
   usa o que sobra (rolando sozinha), em vez de parar em 38% da tela com a caixa vazia embaixo */
.pt-aloc-corpo > .pt-aloc-trecho{flex:1 1 auto;padding-bottom:12px}
.pt-aloc-corpo > .pt-aloc-trecho .pt-aloc-trecho-lista{flex:0 1 auto;max-height:none;overscroll-behavior:contain;scrollbar-width:thin}
/* passo 2: o alcance escolhido no alto da lista ("Vale a partir de JATAI · 15:00") */
.pt-aloc-escopo{flex:none;display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 10px;padding:7px 12px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:inset 3px 0 0 var(--brand);font-size:12.5px;color:var(--texto-2)}
.pt-aloc-escopo .icon{flex:none;width:15px;height:15px;color:var(--brand)}
.pt-aloc-escopo-txt{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.pt-aloc-escopo-txt b{color:var(--ink);font-weight:600}
.pt-aloc-escopo-txt span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pt-aloc-op-trecho{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 12px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.pt-aloc-op-trecho:last-child{border-bottom:0}
.pt-aloc-op-trecho:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.pt-aloc-op-trecho.marcado{background:color-mix(in srgb,var(--brand) 9%,transparent);box-shadow:inset 3px 0 0 var(--brand)}
.pt-aloc-op-trecho span{font-size:11.5px;color:var(--muted);flex:none}
/* localidade até a última troca já registrada (troca por trecho, 27/09/2026): não escolhível — o balão diz por quê */
.pt-aloc-op-trecho[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
.pt-aloc-op-trecho[aria-disabled="true"]:hover{background:none}
.ds-link{color:inherit;text-decoration:none}
.ds-link:hover b{text-decoration:underline}
.ds-c-rec .chip{margin-left:6px}
.esc-grade thead th{position:sticky;top:0;z-index:2;background:var(--surface-2)}
.esc-grade tbody tr{cursor:default}
.esc-c-hora{width:76px}
.esc-c-hora b{font-size:13.5px;font-variant-numeric:tabular-nums}
.esc-c-linha{white-space:normal;min-width:190px}
.esc-c-linha b{display:block;line-height:1.25}
/* AS DUAS COLUNAS DE TRABALHO SÃO AS MAIORES DA TABELA: é nelas que a pessoa
   passa o dia, e o nome de um motorista tem 20 a 40 letras. Tudo o mais na
   linha existe só para reconhecer a viagem e cede espaço a elas. */
.esc-c-campo{width:22%;min-width:200px}
.esc-c-sit{width:120px;white-space:nowrap}

/* O CAMPO DENTRO DA LINHA. Precisa parecer campo — a primeira versão era
   transparente com texto cinza e passava por célula desabilitada, justamente
   nos dois lugares em que a tela existe para receber digitação. */
.esc-celula{position:relative;display:flex;align-items:center;gap:6px}
/* O CAMPO NÃO LEVA ETIQUETA: a PLACA do veículo (Alan, 07/10/2026: "a placa só deve aparecer na lista onde abre a lista suspensa… o que vale mais é o prefixo") e a MATRÍCULA do motorista (08/10/2026: "no campo do motorista depois
   de escolhido não vejo a necessidade de mostrar a matrícula") aparecem só nas sugestões (.esc-sug-placa); o campo mostra o prefixo / o nome e nada mais, e não guarda lugar para etiqueta. O nome que passa da largura termina em reticências. */
.esc-input-motorista{text-overflow:ellipsis}
.esc-input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--campo-borda);border-radius:var(--r-sm);background:var(--campo-fundo);
  color:var(--campo-texto);font:inherit;font-size:12.5px;transition:border-color var(--t-rapida),box-shadow var(--t-rapida)}
.esc-input::placeholder{color:var(--muted);opacity:.7}
.esc-input:hover:not(:disabled){border-color:var(--muted)}
.esc-input:focus{outline:none;border-color:color-mix(in srgb,var(--ring) 70%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.esc-input:disabled{background:transparent;border-color:transparent;cursor:not-allowed;opacity:.5}
/* o retorno fica NO CAMPO: quem escala em série não olha para o topo da tela
   nem espera um aviso passar */
.esc-input.esc-erro{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}

/* O × DE LIMPAR (Alan, 06/10/2026: "se eu apontar um veículo ou motorista errado e precisar limpar, deixar vazio"). O campo ganha um envoltório (.esc-entrada) para que o × se posicione em relação a ELE, e não à célula.
   O CAMPO NUNCA RESERVA LUGAR PARA BOTÃO (Alan, 07/10/2026: "não use o campo do veículo pra mostrar o botão de aplicar ou cancelar… o campo do veículo deve caber apenas o prefixo"). Com valor gravado e nada pendente
   (.esc-tem-limpar) aparece o × de limpar, DENTRO do campo, no pouso do mouse (no toque, sempre — não há mouse). O par ✓ ✗ que passou pelo campo e pela coluna Situação (06–08/10/2026) saiu: "não gostei desses botões…
   consegue deixar como era antes essa coluna? acho que era o texto 'a aplicar'" — a coluna é o selo "a aplicar"; aplicar um campo é o 2º Enter, e cancelar, o Esc. */
.esc-entrada{position:relative;flex:1;min-width:0;display:flex;align-items:center}
/* O × POR CIMA DO CAMPO (Alan, 07/10/2026: "o ícone de remover deve aparecer dentro do campo e só quando passa o mouse… meio que por cima da placa ou do nome do motorista"): bolinha com fundo (a mesma família do ✗),
   invisível e SEM pegar o clique até o pouso do mouse; não reserva lugar no campo — o nome e a matrícula ficam onde sempre ficaram. No toque (sem mouse) volta a ficar à vista e a reservar o lugar dele */
.esc-limpar{position:absolute;right:4px;top:50%;transform:translateY(-50%);z-index:1;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:9999px;background:var(--surface-2);color:var(--muted);
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t-rapida),color var(--t-rapida),background var(--t-rapida),border-color var(--t-rapida)}
.esc-limpar .icon{width:12px;height:12px;pointer-events:none}
.esc-celula:hover .esc-limpar,.esc-celula:focus-within .esc-limpar{opacity:1;pointer-events:auto}
/* O ESPAÇO DO ÍCONE NO CAMPO DO VEÍCULO (Alan, 08/10/2026: "no campo de veículo é importante deixar um espaço vazio dentro do campo, pra que o ícone não apareça por cima do prefixo"): REVISA a regra de 07/10 ("o campo nunca reserva
   lugar"), que valia para os ✓ ✗ de 61-98 px (o "gap muito grande"). Agora é UM ícone de 22 px + 4 de margem: o campo do veículo com × ou vassoura guarda 30 px à direita (medido no navegador dele: ~10 px de ar entre o fim do prefixo e o ícone; antes o ícone cobria 7-10 px do prefixo), SÓ quando há ícone
   (campo vazio segue com o padding de 10 px: o "prefixo ou placa" cabe). O motorista não muda: o nome é o que o campo existe para mostrar, e o × segue por cima dele */
.esc-celula.esc-tem-limpar .esc-input-carro{padding-right:30px}
/* O + DO REVEZAMENTO (Alan, 13/10/2026: escalar 2 motoristas ou mais): o mesmo molde do ×, UM passo à esquerda dele — por cima do campo, só no pouso do mouse, sem reservar lugar; no toque, sempre à vista */
.esc-revez-mais{position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:1;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:9999px;background:var(--surface-2);color:var(--muted);
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--t-rapida),color var(--t-rapida),background var(--t-rapida),border-color var(--t-rapida)}
.esc-revez-mais .icon{width:13px;height:13px;pointer-events:none}
.esc-celula:hover .esc-revez-mais,.esc-celula:focus-within .esc-revez-mais{opacity:1;pointer-events:auto}
.esc-revez-mais:hover,.esc-revez-mais:focus-visible{color:var(--info);background:color-mix(in srgb,var(--info) 14%,var(--surface-2));border-color:color-mix(in srgb,var(--info) 45%,transparent)}
/* O «+» QUE AINDA NÃO DÁ (04/11/2026): o mesmo botão, apagado e de borda tracejada — o balão diz o que falta (veículo, ou aplicar o que está pendente) e o clique escreve a frase na barra. Pousar nele não o acende */
.esc-revez-mais.esc-revez-bloqueado{border-style:dashed;color:var(--muted);cursor:not-allowed}
.esc-revez-mais.esc-revez-bloqueado:hover,.esc-revez-mais.esc-revez-bloqueado:focus-visible{color:var(--muted);background:var(--surface-2);border-color:var(--line)}
/* quem dirigiu ANTES (o atual está no campo): uma linha discreta por trecho, embaixo; sem revezamento não existe e não ocupa altura */
.esc-revez{display:flex;flex-direction:column;gap:1px;margin-top:3px;font-size:11px;line-height:1.3;color:var(--muted)}
.esc-revez-item b{font-weight:600;color:var(--texto-2)}
.esc-limpar:hover,.esc-limpar:focus-visible{color:var(--destructive);background:color-mix(in srgb,var(--brand) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
/* A VASSOURA do rascunho (08/10/2026): o mesmo botão do ×, no campo com mudança ainda não gravada; limpar rascunho não é perigoso (não apaga nada gravado), então o pouso pinta no âmbar do rascunho, não no vermelho de remover */
.esc-limpar-rascunho .icon{width:14px;height:14px}   /* a vassoura tem mais traço que o ×: 14 px (o × é de 12) para o cabo e as cerdas não virarem borrão */
.esc-limpar-rascunho:hover,.esc-limpar-rascunho:focus-visible{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 12%,var(--surface-2));border-color:color-mix(in srgb,var(--alerta) 45%,transparent)}
@media (pointer:coarse){
  .esc-limpar,.esc-revez-mais{opacity:.75;pointer-events:auto}
  .esc-celula.esc-tem-limpar .esc-input-carro,.esc-celula.esc-tem-limpar .esc-input-motorista{padding-right:30px}
}
/* A JANELA DE CONFIRMAÇÃO DO × (07/10/2026): curta, no molde das janelas do Jornadas (cabeçalho com ícone, rodapé com Cancelar e a ação) */
.esc-conf-box{width:min(440px,100%);display:flex;flex-direction:column;overflow:hidden}   /* (08/10/2026) só o corpo rola: os botões ficam SEMPRE à vista — no celular em pé com 2 blocos e deitado, "Tirar de lá e trazer para cá" ficava abaixo da dobra, dentro da rolagem da caixa (revisão adversarial) */
.esc-conf-corpo{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.esc-conf-corpo{padding:16px 22px 18px;display:grid;gap:12px;font-size:13.5px;color:var(--texto-2)}
.esc-conf-corpo p{margin:0;line-height:1.5}
.esc-conf-corpo p b{color:var(--ink);font-weight:600}
.esc-conf-atual{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.esc-conf-atual b{color:var(--ink);font-weight:600;font-size:14px}
.esc-conf-sec{color:var(--muted);font-size:12px}
/* A JANELA DO CONFLITO (Alan, 08/10/2026: o veículo e/ou o motorista já estão em outra viagem do mesmo horário): um bloco por coisa que se repete — o que é, onde está (linha, dia, horário, serviço) e o que FICA lá —,
   e a pergunta no fim. Só tokens; a lista das viagens quebra o nome longo da linha em vez de alargar a janela */
.esc-conf-bloco{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.esc-conf-bloco .esc-conf-atual{padding:0;border:0;border-radius:0;background:none}
.esc-conf-bloco p{margin:0}
.esc-conf-viagens{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.esc-conf-viagens li{display:grid;gap:1px}
.esc-conf-viagens b{color:var(--ink);font-weight:600;font-size:13px;overflow-wrap:anywhere}
.esc-conf-viagens span{color:var(--muted);font-size:12px}
.esc-conf-fica{font-size:12.5px;color:var(--muted)}
.esc-conf-fica b{color:var(--ink);font-weight:600}
.esc-conf-pergunta{font-size:14px}

.esc-pendente{font-size:11.5px;color:var(--muted)}
.esc-falta{color:var(--brand)}
.esc-linha-conflito{background:color-mix(in srgb,var(--brand) 5%,transparent)}
/* o .tabela-rol tem margem negativa embaixo (para a tabela encostar na borda do
   cartão); sem o espaço de volta, o botão subia por cima da última linha */
.esc-mais{padding:12px 0 0;text-align:center}

/* APLICAR (16/09/2026): o que se digita fica pendente até o botão. O campo
   mudado e a linha ganham a cor de aviso; a linha que está gravando esmaece. */
.esc-input.esc-mudado{border-color:color-mix(in srgb,var(--alerta) 70%,transparent);background:color-mix(in srgb,var(--alerta) 8%,var(--campo-fundo))}
.esc-linha-pendente > td:first-child{box-shadow:inset 3px 0 0 var(--alerta)}
.esc-linha-gravando{opacity:.55;transition:opacity var(--t-rapida)}
.esc-cab{flex-wrap:wrap;min-height:0}   /* O TOPO DO CARTÃO IGUAL AO DAS LATERAIS (Alan, 08/10/2026, com o print do vão em cima do título "Escala do dia": "ficou um gap… que daria pra subir e usar esse espaço"): sem a linha do "x de y" o cabeçalho é só o título, e os 32 px de altura mínima do .cartao-cab (feitos para a linha de botões/texto ao lado) sobravam 6 px em cima e 6 embaixo. Medido no 3020: o título passa de 22 px do topo do cartão para 16 (a lateral é 17) e o recorte logo abaixo segue a 10 px do título */
.esc-cab .cartao-titulo{margin-bottom:8px}
.esc-linha-acoes{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 16px;margin:2px 0 12px;min-height:32px}
/* os recortes não quebram linha entre si; ocupam a largura que precisam e a
   barra Aplicar desce quando não cabe ao lado (3ª revisão de 16/09/2026: com base
   de 320px a barra espremia os recortes e escondia o último, "Pendentes",
   justamente quando há pendência). Só numa tela estreita demais eles rolam */
.esc-linha-acoes .pt-chips{flex:1 1 auto;min-width:0;margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.esc-linha-acoes .pt-chips .pt-chip{flex:none}
.esc-linha-acoes + .tabela-rol,.esc-linha-acoes + .vazio{margin-top:0}
.esc-aplicar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto}
.esc-aplicar-txt{font-size:12px;color:var(--muted)}
.esc-aplicar .panel-btn{margin-top:0;height:32px;padding:0 14px;font-size:12px}   /* (os dois botões do alto são os do sistema: Descartar = cancela âmbar, Aplicar tudo = primário; o margin-top:14px do .panel-btn não vale aqui) */
.esc-aplicar .panel-btn .icon{width:14px;height:14px}
@media (hover:hover){.esc-aplicar-btn:hover:not(:disabled) .icon{animation:crVisto 620ms cubic-bezier(.34,1.4,.64,1) 1}}   /* o visto se desenha no pouso do mouse, como o de "Feito na MiX" */
.esc-chip-pendentes b{color:var(--alerta)}
/* período de vários dias: a data vai em cima da hora */
.esc-data{display:block;font-size:10.5px;line-height:1.2;color:var(--muted);font-variant-numeric:tabular-nums}

/* ESCALADO POR (16/09/2026): o avatar do Jornadas (círculo com borda, iniciais
   em negrito, fundo e texto no tom da pessoa). "?" cinza = acesso livre (sem
   login); ônibus = carro deduzido pelo sistema; pontilhado = ainda não aplicado. */
.esc-c-quem{width:92px;text-align:center}
/* QUEM FEZ O QUÊ, EMBAIXO DE CADA CAMPO — só no cartão do celular (Alan, 08/10/2026): na grade larga o avatar da coluna "Escalado por" já diz o mesmo */
.esc-quem-campo{display:none}
.esc-quem-pendente{color:var(--alerta)}
/* ESCALA DO DIA: OS FILTROS (Alan, 06/10/2026: "nesse bloco de filtro... muito mais parecido com o bloco de filtros que temos na pontualidade"). A barra usa EXATAMENTE as mesmas classes e as mesmas regras de colunas da
   Pontualidade (.pt-filtros-campos[data-campos], lá no começo deste arquivo): doze campos, seis por fileira, o Setor de atividade com a coluna mais larga, tudo numa fileira só quando cabe, quatro colunas entre 1081 e 1194 px
   com o menu aberto. O Buscar (.esc-campo-busca) é uma célula como as outras e, desde 05/11/2026, a ÚLTIMA da barra (Alan: «esse campo poderia ser o último da lista... pq é diferente dos demais»). Aqui só o que é DO BUSCAR no celular: em pé ele vem logo depois do Período e toma a linha toda (o Setor de atividade
   leva a linha toda quando sobra um campo sozinho); deitado, duas colunas. */
@media (max-width:760px) and (min-height:521px){
  #escConteudo .pt-filtros-campos > .campo-periodo{order:-2}
  #escConteudo .pt-filtros-campos > .esc-campo-busca{order:-1;grid-column:1 / -1}
  #escConteudo .pt-filtros-campos[data-impar] > .campo-atividade{grid-column:1 / -1}
}
@media (orientation:landscape) and (max-height:520px){
  #escConteudo .pt-filtros-campos > .campo-periodo{order:-2}
  #escConteudo .pt-filtros-campos > .esc-campo-busca{order:-1;grid-column:span 2}
}
/* GRADE: CABE SEM BARRA DE ROLAGEM HORIZONTAL. O nome da LINHA não trunca (quebra em duas linhas quando a coluna aperta): a regra white-space:normal do .esc-c-linha nunca valia, porque o .vg-tabela td (nowrap) tem mais
   especificidade — por isso a coluna tomava os 356 px do nome numa linha só e a tabela passava dos 1130 px da tela. O VEÍCULO ("Carro 6892 · EFF-6138") tem largura própria, que não encolhe; o MOTORISTA fica com o que sobra e é
   o único que pode cortar o nome (reticências no campo; o balão/inspeção tem o nome inteiro). O cabeçalho "Escalado por" quebra em duas linhas. Só fora do celular e do deitado (lá a grade vira cartões) */
@media (min-width:761px) and (min-height:521px){
  /* O CAMPO DO VEÍCULO NA MESMA ALTURA DO CAMPO DO MOTORISTA (Alan, 04/11/2026, apontando a viagem 87503, com duas linhas de «quem dirigiu antes» embaixo do motorista: «pra ficar alinhado… o ideal é que o campo de prefixo tivesse ficado na mesma altura do campo de motorista»): a célula do motorista fica mais alta que a do veículo quando há revezamento e
     o `.vg-tabela td` centra (vertical-align:middle): o campo do veículo descia para o meio da linha enquanto o do motorista ficava no alto. Na linha COM revezamento (`esc-linha-revez`) os dois campos ficam colados no alto, lado a lado; a linha comum não muda (os campos seguem centrados, como o texto das outras colunas) */
  .esc-grade tr.esc-linha-revez td.esc-c-campo{vertical-align:top}
  .esc-grade td.esc-c-linha{white-space:normal}
  .esc-grade th.esc-c-linha,.esc-grade td.esc-c-linha{min-width:190px}
  .esc-grade td.esc-c-linha b,.esc-grade td.esc-c-linha .sub{white-space:normal}
  .esc-grade th,.esc-grade td{padding-left:9px;padding-right:9px}   /* 12 → 9 px de respiro lateral: 42 px de uma linha de sete colunas */
  .esc-grade th.esc-c-veic,.esc-grade td.esc-c-veic{width:150px;min-width:150px}   /* (08/10/2026: 130 → 150 px = 112 → 132 de campo + 9 + 9: os 20 px a mais são o espaço vazio do ícone, 30 px à direita — ver .esc-tem-limpar .esc-input-carro). O CAMPO DO VEÍCULO TEM A LARGURA DO PREFIXO (Alan, 07/10/2026: "um tamanho que cabe o prefixo, nem menor nem maior, para não sobrar espaço"): 198 → 176 → 130 px. Prefixo "1044-0003036" = 84,7 px de texto (o pior caso, 12 zeros, 89,1; o texto "prefixo ou placa" do campo vazio, 91,3) + 10 + 10 de padding + 2 de borda = 112 px de campo + 9 + 9 de respiro da coluna = 130; não há mais ✓ ✗ dentro do campo (moram na coluna Situação), então nada mais é reservado nele */
  .esc-grade th.esc-c-mot,.esc-grade td.esc-c-mot{width:26%;min-width:150px}
  .esc-grade td.esc-c-veic .esc-input{width:0}   /* O VEÍCULO TAMBÉM É COMPRESSÍVEL (Alan, 07/10/2026: "prioridade é não quebrar a coluna da linha em 2 linhas… e o campo de veículo, olha o exagero de espaço"): o input tem ~150 px de largura de fábrica e, com o padding que o ✓ ✗ pedia (61 px), chegou a alargar a coluna de 176 para 242 assim que UMA linha tinha mudança pendente, tirando 66 px da Linha, que quebrava o nome. Com width:0 a coluna é quem manda; e sem ✓ ✗ no campo (agora na coluna Situação) o padding é sempre o de 10 px */
  .esc-grade td.esc-c-mot .esc-input{width:0}   /* compressível: a largura intrínseca do input (176 px) mantinha a coluna em ~200 px; o campo cresce (flex:1) até o que a coluna der */
  .esc-grade td.esc-c-mot .esc-celula{max-width:264px}   /* O CAMPO DO MOTORISTA NÃO CRESCE SEM FIM (Alan, 07/10/2026: "a largura está um pouco exagerada; dá para deixar um pouco menor, aí a gente consegue aumentar a coluna da linha"): era 330 px (nome + 10 + 74 da matrícula + 2 de borda); sem a matrícula no campo (08/10/2026) são 264 px = nome + 10 + 10 de padding + 2 de borda, e ainda cabe o nome do motorista de 99% da lista em maiúsculas (239 px; o maior da base, 322 px, termina em reticências) */
  .esc-grade th.esc-c-hora,.esc-grade td.esc-c-hora,.esc-grade th.esc-c-serv,.esc-grade td.esc-c-serv,.esc-grade th.esc-c-sit,.esc-grade td.esc-c-sit,.esc-grade th.esc-c-quem,.esc-grade td.esc-c-quem{width:1%}   /* encolhem ao conteúdo */
  /* PARTIDA E SERVIÇO DO TAMANHO DO QUE MOSTRAM (Alan, 05/10/2026: "a coluna de partida tem espaço livre... e a de serviço também"): a seta de ordenar do cabeçalho só ocupa lugar na coluna ordenada e os respiros laterais caem de 9 para 6 px */
  .esc-grade th.esc-c-hora,.esc-grade td.esc-c-hora,.esc-grade th.esc-c-serv,.esc-grade td.esc-c-serv{padding-left:6px;padding-right:6px;white-space:nowrap}
  .esc-grade th.esc-c-hora .th-ordenar:not([data-dir="asc"]):not([data-dir="desc"]) .th-seta,.esc-grade th.esc-c-serv .th-ordenar:not([data-dir="asc"]):not([data-dir="desc"]) .th-seta{width:0;overflow:hidden}
  .esc-grade th.esc-c-quem,.esc-grade th.esc-c-quem .th-ordenar{white-space:normal;text-align:left}
  .esc-grade td.esc-c-sit{white-space:normal;max-width:150px}   /* os selos ("troca no meio", "escalada", "fora do horário") empilham em vez de abrir a coluna a 265 px e trazer a barra horizontal de volta */
}
/* O NOME DA LINHA NÃO QUEBRA (Alan, 05/10/2026: "na tabela... evite quebrar o nome da linha em 2 linhas"). Medido nos dados reais (250 viagens, 05/10): o nome em uma linha mede de 285 px (mediana) a 332 px (99%); só
   "SAO PAULO (B.FUNDA) - SP X SAO JOSE DO RIO PRETO (SALA VIP) - SP" passa disso (408 px). Por isso o nome tinha teto de 340 px (o único que passa dele quebra, em vez de alargar a coluna de todo mundo) e a coluna
   nascia com 354 px (340 + 7 + 7 de respiro). EM 07/10/2026 o Alan pediu a Linha ainda mais larga ("é importante evitar ao máximo quebrar em 2 linhas a descrição da linha", "o campo do motorista está um pouco exagerado,
   dá para deixar menor"): com o campo do veículo só do tamanho do prefixo (176 → 130 px) e o do motorista limitado a 330 px, a sobra foi para a Linha — teto do nome de 410 px (cabe o maior conhecido, 407,9 px) e coluna de 424 px. O MOTORISTA deixa de ter 26% da tabela e passa a ficar com o que sobra, com piso de 210 px (era 250: em 07/10/2026 o Alan reafirmou que a prioridade é a LINHA não quebrar, então o motorista, que é quem pode cortar o nome com reticências, cede primeiro); os respiros laterais das colunas de veículo, linha, motorista,
   situação e "escalado por" caem de 9 para 7 px. Só vale onde a soma cabe sem rolagem lateral: menu aberto a partir de 1300 px de tela, menu recolhido (68 px em vez de 256) a partir de 1112 px; abaixo disso fica a regra
   de antes (a coluna aperta e o nome quebra em vez de a tabela rolar de lado). Medido: 1445 px → linha 354 e 1 nome quebrando em 250 (eram 128); 1580 px → motorista com 382 px, sem nome cortado */
@media (min-width:1300px) and (min-height:521px){
  .esc-grade td.esc-c-linha b{max-width:410px}   /* 340 → 410 px (07/10/2026): cabe até o maior nome conhecido (407,9 px) */
  .esc-grade th.esc-c-linha,.esc-grade td.esc-c-linha{width:424px}   /* 354 → 424 px: o nome mais comprido (410) + 7 + 7 de respiro */
  .esc-grade th.esc-c-mot,.esc-grade td.esc-c-mot{width:auto;min-width:210px}
  .esc-grade :is(th,td):is(.esc-c-linha,.esc-c-veic,.esc-c-mot,.esc-c-sit,.esc-c-quem){padding-left:7px;padding-right:7px}
  .esc-grade th.esc-c-veic,.esc-grade td.esc-c-veic{width:146px;min-width:146px}   /* com respiro de 7 px a coluna do veículo tem os mesmos 132 px de campo (150 − 18 = 146 − 14); eram 112 até 08/10/2026, antes do espaço do ícone */
}
@media (min-width:1112px) and (min-height:521px){
  .snav-recolhido .esc-grade td.esc-c-linha b{max-width:410px}
  .snav-recolhido .esc-grade th.esc-c-linha,.snav-recolhido .esc-grade td.esc-c-linha{width:424px}
  .snav-recolhido .esc-grade th.esc-c-mot,.snav-recolhido .esc-grade td.esc-c-mot{width:auto;min-width:210px}
  .snav-recolhido .esc-grade :is(th,td):is(.esc-c-linha,.esc-c-veic,.esc-c-mot,.esc-c-sit,.esc-c-quem){padding-left:7px;padding-right:7px}
  .snav-recolhido .esc-grade th.esc-c-veic,.snav-recolhido .esc-grade td.esc-c-veic{width:146px;min-width:146px}
}
.esc-avatar{--av:#64748b;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9999px;vertical-align:middle;
  border:1px solid color-mix(in srgb,var(--av) 30%,var(--surface));background:color-mix(in srgb,var(--av) 9%,var(--surface));color:var(--av);
  font-size:11px;font-weight:700;letter-spacing:0;line-height:1;cursor:default;user-select:none}
html.dark .esc-avatar{border-color:color-mix(in srgb,var(--av) 50%,var(--surface));background:color-mix(in srgb,var(--av) 24%,var(--surface));color:color-mix(in srgb,var(--av) 40%,#fff)}
.esc-avatar .icon{width:14px;height:14px}
.esc-avatar-remocao{opacity:.55}
.esc-avatar-pendente{border-style:dashed;border-color:var(--alerta)}
html.dark .esc-avatar-pendente{border-color:var(--alerta)}

/* LISTA DE SUGESTÕES (carro e motorista) no lugar do <datalist> do navegador:
   o mesmo painel das listas suspensas, preso à tela e alinhado ao campo */
.esc-sug{position:fixed;z-index:800;max-height:280px;overflow-y:auto;padding:4px;background:var(--surface);border:1px solid var(--line-forte);
  border-radius:var(--r-md);box-shadow:var(--shadow-pop)}
.esc-sug-op{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;padding:6px 10px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--ink);font:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer}
/* o prefixo nunca é cortado: o rótulo quebra linha se precisar */
.esc-sug-op b{min-width:0;font-weight:400;overflow-wrap:anywhere}
/* O NOME INTEIRO, EM UMA LINHA (Alan, 05/10/2026): a lista cresce até o conteúdo (escSugPosicionar), então o nome e a matrícula não quebram nem terminam em reticências */
.esc-sug-op{white-space:nowrap}
.esc-sug-op b{overflow-wrap:normal}
.esc-sug-op span{flex:none;font-size:11.5px;color:var(--muted)}
/* a placa do veículo: depois do prefixo, pequena e clara (o foco é o prefixo); a margem automática empurra a situação para a direita */
.esc-sug-op i.esc-sug-placa{flex:none;margin:0 auto 0 -4px;font-style:normal;font-size:11px;letter-spacing:.03em;color:inherit;opacity:.5}
.esc-sug-op:hover,.esc-sug-op.foco{background:var(--accent);color:var(--accent-texto)}
.esc-sug-op.sel b{font-weight:600}
.esc-sug-vazio{padding:8px 10px;font-size:12px;color:var(--muted)}

/* ══ CAMPO DE PERÍODO (16/09/2026) — o FiltroPeriodoCalendario do Jornadas ══
   Botão de 36px com o período escrito e o ícone de calendário à direita;
   aberto, o popover com dois meses (dias de 32px), início e fim no vermelho da
   marca sobre a faixa do intervalo, e o rodapé Limpar período · Fechar · Aplicar.
   No celular os meses empilham, com as setas no alto, como lá. */
/* ENCOLHE ATÉ 108px em vez de largura fixa (23/09/2026, Pontualidade com 8
   campos "estourava" o card) — o texto corta com "…" e o balão mostra o
   período inteiro (ptBalaoSeCortado já cobre). Basis mais estreito e o mesmo
   crescimento da Empresa (23/09/2026, ano com 2 dígitos: "otimizar a largura
   ... e padronizar a largura" dos campos vizinhos) */
.campo-grupo-linha-unica .campo-periodo{flex:1 1 104px}
.pd-wrap{position:relative;display:block;min-width:0}
.pd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:36px;padding:0 12px;border:1px solid var(--campo-borda);
  border-radius:var(--r-lg);background:var(--campo-fundo);color:var(--campo-texto);font:inherit;font-size:13px;font-weight:400;text-transform:none;
  letter-spacing:-.01em;text-align:left;cursor:pointer;transition:background-color var(--t-rapida),box-shadow var(--t-rapida)}
.pd-btn:hover{background:var(--surface)}
.pd-btn span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-icone{flex:none;width:16px;height:16px;opacity:.7}
.pd-wrap.aberto .pd-btn{box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.pd-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:700;width:max-content;padding:8px;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--line-forte) 78%,transparent);border-radius:var(--r-md);box-shadow:var(--shadow-pop);
  color:var(--ink);font-weight:400;text-transform:none;letter-spacing:0}
.pd-panel.pd-panel-dir{left:auto;right:0}
.pd-meses{position:relative;display:flex;gap:16px;padding:4px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface-2) 80%,transparent)}
.pd-mes{display:flex;flex-direction:column;gap:4px;width:224px}
.pd-mes-cab{display:flex;align-items:center;justify-content:center;height:32px;padding:0 32px;font-size:14px;font-weight:500}
.pd-nav{position:absolute;top:4px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;
  border-radius:var(--r-md);background:transparent;color:var(--ink);cursor:pointer}
.pd-nav:hover{background:var(--accent);color:var(--accent-texto)}
.pd-nav .icon{width:16px;height:16px}
.pd-nav-ant{left:4px}
.pd-nav-ant .icon{transform:rotate(90deg)}
.pd-nav-prox{right:4px}
.pd-nav-prox .icon{transform:rotate(-90deg)}
.pd-semana,.pd-grade{display:grid;grid-template-columns:repeat(7,32px)}
.pd-grade{row-gap:8px;margin-top:4px}
.pd-semana span{font-size:12.8px;color:var(--muted);text-align:center}
.pd-cel{display:block;width:32px;height:32px}
.pd-dia{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-md);background:transparent;
  color:var(--ink);font:inherit;font-size:14px;font-weight:400;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums}
.pd-dia:hover{background:var(--accent);color:var(--accent-texto)}
.pd-dia:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent)}
.pd-dia.hoje{background:var(--accent);color:var(--accent-texto)}
.pd-cel.fora .pd-dia{color:var(--muted)}
/* a faixa: início arredonda à esquerda, fim à direita, o meio é contínuo e
   arredonda só na virada da semana */
.pd-cel.ini,.pd-cel.fim,.pd-cel.meio{background:var(--accent)}
.pd-cel.ini{border-radius:var(--r-md) 0 0 var(--r-md)}
.pd-cel.fim{border-radius:0 var(--r-md) var(--r-md) 0}
.pd-cel.ini.fim{border-radius:var(--r-md)}
.pd-cel.meio:nth-child(7n+1){border-radius:var(--r-md) 0 0 var(--r-md)}
.pd-cel.meio:nth-child(7n){border-radius:0 var(--r-md) var(--r-md) 0}
.pd-cel.meio .pd-dia{border-radius:0;background:transparent;color:var(--accent-texto)}
.pd-cel.ini .pd-dia,.pd-cel.fim .pd-dia{background:var(--brand);color:#fff}
.pd-rodape{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 4px 4px}
.pd-acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.pd-panel .pd-acao{margin-top:0;height:32px;padding:0 12px;font-size:12px}
/* o aviso ("No máximo N dias") só ocupa espaço quando existe — vazio, some e não abre vão no meio do rodapé */
.pd-aviso{flex:1 1 100%;order:1;min-width:0;font-size:11.5px;color:var(--brand);text-align:center}
.pd-aviso:empty{display:none}
html.dark .pd-aviso{color:var(--destructive)}
@media (max-width:767px){
  .pd-meses{flex-direction:column}
  .campo-grupo-linha-unica .campo-periodo{flex:1 1 100%}
}

@media (max-width:1100px){
  .esc-rol{overflow-x:auto}
  .esc-grade{min-width:900px}
}

/* ══ ALOCAR VEÍCULO (modal da Pontualidade) ══════════════════════════════
   (14/09/2026) "essa tela tá bem zoada" — Alan, sobre o modal. As classes
   .pt-aloc-* não tinham UMA regra: cada carro era um botão nativo cinza, com a
   tag colada no texto, e a busca pegava o input genérico do .vg-box. Tudo aqui
   fica sob .pt-aloc-*, só com tokens (claro e escuro), e reaproveita a casca dos
   modais (.diag-overlay/.diag-box/.diag-head) SEM mexer nela: a Jornada do
   motorista, o Diagnóstico MiX e o "Carro errado nesta viagem" seguem iguais.
   A caixa tem ALTURA FIXA e só a lista rola: filtrar não faz o modal pular, e a
   busca, os recortes e o rodapé ficam sempre à vista. */
.diag-box.pt-aloc-box{display:flex;flex-direction:column;width:min(560px,100%);height:min(640px,90vh);height:min(640px,90dvh);max-height:none;overflow:hidden}
@supports (height:1dvh){.diag-box.pt-aloc-box{height:min(640px,90dvh)}}
.pt-aloc-cab{flex:none;align-items:center;gap:12px}
.pt-aloc-icone{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--brand-suave);color:var(--brand)}
.pt-aloc-icone .icon{width:18px;height:18px}
.pt-aloc-titulos{flex:1;min-width:0}
.pt-aloc-titulos p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diag-head .pt-aloc-viagem{margin-top:3px;font-size:13px;font-weight:600;color:var(--texto-2)}
.pt-aloc-cab .fechar-btn{flex:none;align-self:flex-start}
/* o corpo RECORTA: sem isso, com pouca altura a lista era pintada por cima do rodapé */
.pt-aloc-corpo{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 22px 0;overflow:hidden}
.pt-aloc-escolha{flex:1;min-height:0;display:flex;flex-direction:column}
.pt-aloc-contexto{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--muted)}
.pt-aloc-contexto > b{color:var(--ink);font-weight:600}
.pt-aloc-ref{flex:1 1 220px;min-width:0}
/* a busca é o campo do SIGO (36px, raio 16, tokens --campo-*), com a lupa dentro */
.pt-aloc-busca{position:relative;display:block;flex:none;margin:0 0 10px}
.pt-aloc-busca .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.pt-aloc-busca input{display:block;width:100%;height:36px;margin:0;padding:0 12px 0 36px;border:1px solid var(--campo-borda);border-radius:var(--r-lg);background:var(--campo-fundo);color:var(--campo-texto);
  font:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;transition:background-color var(--t-rapida),box-shadow var(--t-rapida)}
.pt-aloc-busca input::placeholder{color:var(--muted);opacity:.85}
.pt-aloc-busca input:hover{background-color:var(--surface)}
.pt-aloc-busca input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.pt-aloc-busca input:disabled{opacity:.6}
.pt-aloc-box .pt-chips{flex:none;margin:0 0 10px;gap:6px}
.pt-aloc-box .pt-chip{height:28px;padding:0 10px}
/* a lista é a caixa da tabela (borda, cantos, zebra, realce e barra da escolha
   da vg-tabela), com o título de cada seção preso no alto enquanto rola */
.pt-aloc-lista{flex:1 1 auto;min-height:72px;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--campo-borda);border-radius:var(--r-md);background-color:var(--surface);transition:opacity var(--t-rapida)}
/* A BARRA DE ROLAGEM COMEÇA DEPOIS DO TÍTULO DA SEÇÃO (Alan, 03/11/2026: «arruma essa tabela… a barra de rolagem não pode passar por cima do cabeçalho»): o título fica preso no alto (30 px + a linha de baixo = 31 px) e a barra só corre abaixo dele — a trilha
   começa 30 px mais embaixo e a faixa do título continua por trás da barra (o fundo da própria caixa, pintado nos mesmos 29 px + a linha de 1 px), para o cabeçalho parecer inteiro, de ponta a ponta. A barra é a fina de sempre (10 px com a folga, cinza do texto
   discreto); no Firefox, que não tem o pseudo-elemento, fica a barra fina padrão. Só com seção na lista (o esqueleto e o «nenhum veículo» não têm título nem barra) */
.pt-aloc-lista:has(> .pt-aloc-grupo){background-image:linear-gradient(var(--linha-tabela),var(--linha-tabela)),linear-gradient(var(--surface-2),var(--surface-2));background-repeat:no-repeat;background-size:100% 1px,100% 29px;background-position:0 29px,0 0}
@supports selector(::-webkit-scrollbar){
  .pt-aloc-lista::-webkit-scrollbar{width:10px}
  .pt-aloc-lista::-webkit-scrollbar-track{background:transparent}
  .pt-aloc-lista:has(> .pt-aloc-grupo)::-webkit-scrollbar-track{margin-top:30px}
  .pt-aloc-lista::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--muted) 35%,transparent);background-clip:padding-box}
  .pt-aloc-lista::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 55%,transparent);background-clip:padding-box}
}
@supports not selector(::-webkit-scrollbar){
  .pt-aloc-lista{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent}
}
.pt-aloc-lista.gravando,.pt-aloc-conflito.gravando{opacity:.6;pointer-events:none}
.pt-aloc-skel{padding:6px 12px}
.pt-aloc-sec{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:0 12px;background:var(--surface-2);
  border-bottom:1px solid var(--linha-tabela);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pt-aloc-sec span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-aloc-sec b{flex:none;font-size:11px;letter-spacing:0;color:var(--texto-2)}
.pt-aloc-op{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 10px;min-height:46px;padding:6px 12px;border-bottom:1px solid var(--linha-tabela);
  cursor:pointer;scroll-margin-top:31px;transition:background-color 160ms ease}
.pt-aloc-grupo > .pt-aloc-op:nth-child(odd){background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.pt-aloc-grupo > .pt-aloc-op:hover{background:color-mix(in srgb,var(--ring) 10%,var(--surface));box-shadow:inset 2px 0 0 color-mix(in srgb,var(--ring) 60%,transparent)}
/* o foco das setas (aria-activedescendant) é um CONTORNO, diferente do hover
   (com o mouse parado em outra linha as duas ficavam iguais) e com 3:1+; só
   aparece enquanto a busca tem o foco, que é quando as setas andam */
.pt-aloc-box:has(#ptAlocBusca:focus) .pt-aloc-grupo > .pt-aloc-op.foco,.pt-aloc-box:has(#ptMotBusca:focus) .pt-aloc-grupo > .pt-aloc-op.foco{outline:2px solid var(--muted);outline-offset:-2px}
/* 5% e não 7%: a 7% a placa e a sigla (--muted) caíam para 4,44:1 na linha escolhida */
.pt-aloc-grupo > .pt-aloc-op.sel{background:color-mix(in srgb,var(--brand) 5%,var(--surface));box-shadow:inset 3px 0 0 var(--brand)}
.pt-aloc-grupo:last-child > :last-child{border-bottom:0}
.pt-aloc-op.atual{cursor:default}
.pt-aloc-nome{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.pt-aloc-nome b{flex:none;font-size:13.5px;font-weight:600;color:var(--ink)}
.pt-aloc-nome span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--muted)}
.pt-aloc-op.semsinal .pt-aloc-nome b{color:var(--texto-2);font-weight:500}
.pt-aloc-km{justify-self:end;display:inline-flex;align-items:baseline;gap:4px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-aloc-km small{font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
/* --muted e não --faint: onde está · há quanto tempo · grupo é o que decide, e o
   --faint dava 2,5-2,8:1 no claro */
.pt-aloc-op .sub{min-width:0;font-size:11px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-aloc-sit{justify-self:end;display:flex;min-width:0}
.pt-aloc-sit .chip{font-size:10px;line-height:15px;padding:1px 7px}
/* o chip-neutral global (--muted sobre --cinza-bg) dá 4,41:1 no claro em 10 px */
.pt-aloc-box .chip-neutral{color:var(--texto-2)}
.pt-aloc-mais{padding:9px 12px;border-bottom:1px solid var(--linha-tabela);font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;scroll-margin-top:31px}
.pt-aloc-mais:hover,.pt-aloc-mais.foco{background:color-mix(in srgb,var(--brand) 6%,var(--surface));text-decoration:underline}
.pt-aloc-lista .vazio .mini-acao{margin-top:8px}
.pt-aloc-rodape-lista{flex:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;min-height:30px;padding:6px 2px;font-size:11px;color:var(--muted)}
.pt-aloc-erro{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--erro-bg);color:var(--erro);font-size:12px;font-weight:600}
.pt-aloc-erro .icon{width:15px;height:15px}
/* o 409 toma o lugar da lista (que só fica escondida) */
.pt-aloc-conflito{flex:0 1 auto;min-height:0;overflow-y:auto;margin:2px 0 14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--alerta) 35%,transparent);border-left:3px solid var(--alerta);
  border-radius:var(--r-md);background:var(--alerta-fundo);color:var(--ink);font-size:12.5px;line-height:1.5}
.pt-aloc-conflito-cab{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.4}
.pt-aloc-conflito-cab .icon{flex:none;width:18px;height:18px;margin-top:1px;color:var(--alerta)}
.pt-aloc-conflito-viagem{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.pt-aloc-conflito-viagem b{flex:1 1 100%;font-weight:600}
.pt-aloc-conflito-viagem > span:not(.chip){color:var(--muted)}
.pt-aloc-conflito p{margin:8px 0 0}
/* rodapé do Jornadas: o que foi escolhido à esquerda, Cancelar e a ação à direita */
/* fundo OPACO (a mesma cor de antes, agora sobre --surface) e acima do corpo */
.pt-aloc-acoes{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:8px;padding:12px 22px;border-top:1px solid var(--line);
  background-color:var(--surface);background-image:linear-gradient(color-mix(in srgb,var(--surface-2) 60%,transparent),color-mix(in srgb,var(--surface-2) 60%,transparent))}
.pt-aloc-acoes .panel-btn{margin-top:0}
/* A JANELA "VER MOTORISTAS" (Alan, 27/10/2026: "se for pra listar os motoristas… clicando nos 3 pontinhos e abrindo algum modal… senão vai só poluir a tela"): estreita, só leitura, um bloco por trecho — o número da ordem em que assumiram, o nome e, embaixo, "da saída até CIDADE" / "de CIDADE até CIDADE" /
   "de CIDADE até o destino" no tom da linha de baixo; só tokens de cor; o nome comprido quebra em vez de vazar */
.diag-box.pt-mots-box{width:min(520px,100%)}
/* O ÍCONE ANTES DO TÍTULO e O DE/ATÉ DE CADA UM (03/11/2026, Alan: «falta o ícone antes do texto… ele precisa ficar mais claro a localidade que os motoristas saíram e até onde eles foram»): o ícone é o do botão que abre a janela, no tamanho e na cor do Histórico de cercas (.ptc-tit);
   o DE e o ATÉ são duas linhas ligadas por um fio — o ponto vazado é onde a pessoa começou, o cheio é onde parou — com a localidade do Totalbus; o que ninguém sabe diz isso, em cinza */
.pt-mots-tit{display:flex;align-items:center;gap:6px}
.pt-mots-tit > .icon{width:20px;height:20px;flex:none;margin-right:3px;color:var(--brand)}
.pt-mots-trecho{margin:7px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:5px}
.pt-mots-trecho + .pt-mots-trecho{margin-top:10px}
.pt-mots-trecho > div{position:relative;display:flex;align-items:baseline;gap:8px;min-width:0}
.pt-mots-trecho > div::before{content:"";position:absolute;left:-18px;top:4px;width:10px;height:10px;box-sizing:border-box;border-radius:9999px;border:2px solid var(--brand);background:var(--surface)}
.pt-mots-trecho > div:last-child::before{background:var(--brand)}
.pt-mots-trecho > div:first-child::after{content:"";position:absolute;left:-14px;top:14px;width:2px;height:calc(100% - 5px);background:var(--line)}
.pt-mots-trecho dt{flex:none;width:26px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pt-mots-trecho dd{margin:0;min-width:0;font-size:12.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.pt-mots-trecho dd.pt-mots-vazio{color:var(--muted);font-style:italic}
.pt-mots-corpo{padding:6px 22px 20px}
.pt-mots-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pt-mots-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.pt-mots-item:first-child{border-top:0}
.pt-mots-ordem{flex:none;min-width:30px;height:22px;display:grid;place-items:center;border-radius:9999px;background:var(--brand-suave);color:var(--brand);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pt-mots-item > div{min-width:0;display:flex;flex-direction:column;gap:1px}
.pt-mots-item b{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.pt-mots-item > div > span{font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.pt-aloc-escolhido{flex:1;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-aloc-escolhido b{color:var(--ink);font-weight:600}
.pt-aloc-escolhido.aviso,.pt-aloc-escolhido.aviso b{color:var(--alerta)}
/* celular (375 px): a caixa ocupa a tela menos 12 px de cada lado e cobre o
   menu de baixo (overlay z 900, menu z 60); os recortes viram uma faixa que rola */
@media (max-width:640px){
  .diag-overlay.pt-aloc-ov{padding:12px}
  .diag-box.pt-aloc-box{height:min(720px,calc(100vh - 24px));height:min(720px,calc(100dvh - 24px))}
  @supports (height:1dvh){.diag-box.pt-aloc-box{height:min(720px,calc(100dvh - 24px))}}
  .diag-head.pt-aloc-cab{padding:12px 14px}
  .pt-aloc-cab h2{font-size:16px}
  .pt-aloc-icone{width:32px;height:32px}
  .pt-aloc-corpo{padding:10px 14px 0}
  .pt-aloc-busca input{font-size:16px}   /* abaixo de 16 px o Safari do iPhone dá zoom no campo */
  .pt-aloc-box .pt-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 8px;padding:2px 14px 3px}
  .pt-aloc-box .pt-chip{flex:none}
  .pt-aloc-op{min-height:50px}
  /* a 375 px a linha de baixo cortava justo o grupo (o que separa carro de linha
     de fretamento): quebra em até duas linhas */
  .pt-aloc-op .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pt-aloc-acoes{flex-wrap:wrap;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .pt-aloc-escolhido{display:none}
  .pt-aloc-escolhido.aviso{display:block;flex-basis:100%;white-space:normal}
  .pt-aloc-acoes .panel-btn{flex:1}
}
/* janela BAIXA (celular deitado passa de 640 px de largura e pegava as regras de
   desktop; retrato com as barras do Safari): o corpo inteiro rola e a lista ganha
   altura própria, em vez de encolher até sumir sob o rodapé */
@media (max-height:520px){
  .diag-overlay.pt-aloc-ov{padding:8px}
  .diag-box.pt-aloc-box{height:calc(100vh - 16px);height:calc(100dvh - 16px)}
  @supports (height:1dvh){.diag-box.pt-aloc-box{height:calc(100dvh - 16px)}}
  .diag-head.pt-aloc-cab{padding:10px 16px}
  .pt-aloc-titulos p:not(.pt-aloc-viagem){display:none}
  .pt-aloc-corpo{overflow-y:auto;overscroll-behavior:contain;padding-top:8px}
  .pt-aloc-escolha{flex:none}
  .pt-aloc-box .pt-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pt-aloc-box .pt-chip{flex:none}
  .pt-aloc-lista{flex:none;height:max(160px,calc(100vh - 190px));height:max(160px,calc(100dvh - 190px))}
  @supports (height:1dvh){.pt-aloc-lista{height:max(160px,calc(100dvh - 190px))}}
}

/* ══ TEMA ESCURO · CORES FIXAS ════════════════════════════════════════════
   (14/09/2026) Os tokens escuros estão no alto do arquivo; aqui fica só o que o
   token sozinho não resolve: cores literais pensadas para o fundo branco (#fff,
   #f2f4f6, #e3e6eb...) e preenchimentos que precisam continuar os mesmos. TUDO
   em html.dark: o tema claro não lê nenhuma linha desta seção. Ficam de fora de
   propósito o palco do telão (preso no alto), as cores semânticas (bolinhas de
   status, faixas de atraso, verde e vermelho das ações) e o branco sobre o
   vermelho da marca.
   ESPECIFICIDADE: html.dark .x soma (0,1,1) e passaria na frente de estados que
   hoje vencem pela ordem do arquivo (.sel, .ativa, .ligado, .marcado) — daí os
   :not() abaixo. Seletores em lista, não em :is(), para cada um manter o peso
   que tem. */

/* global: controles sem cor própria pegavam o texto do navegador */
html.dark select option{background-color:#152233;color:var(--ink)}
html.dark .veic-row,html.dark .an-linha,
html.dark .lateral-selects select{color:var(--ink)}

/* texto pequeno na cor da marca: #de0013 dá 3,1:1 no cartão escuro. O vermelho
   de TEXTO do escuro é o --destructive (#ff6b7c, 5,7:1). O token --brand fica
   #de0013 porque também é preenchimento (barra do item ativo, avatar, dia
   escolhido). No hover do .panel-btn a borda (brand 45%) e o fundo (brand 7%)
   ficam como no claro e só o RÓTULO troca: #de0013 dava 3,1:1 sobre esse fundo;
   o --destructive dá 5,7:1. (O Jornadas escuro nem pinta o hover do contorno: a
   regra body[data-theme='dark'] vence o :hover.) */
html.dark .ordem-select,html.dark .drawer-link,html.dark .mini-acao,html.dark .an-dica,html.dark .doc-secao a,html.dark .doc-link.ativa,html.dark .dp-todos.sel,html.dark .mapbar-menu button.sel,html.dark .esc-falta,html.dark .pt-porque:hover{color:var(--destructive)}
@media (hover:hover){html.dark .panel-btn:not(.btn-primario):not(.cr-acao):not([data-pc-det^="copiar"]):not(.pc-ferr-btn):not(.btn-uni):hover{color:var(--destructive)}}   /* (desde 06/10/2026, os de ação do pedido — .cr-acao: Feito na MiX, Recusar, Cancelar, Reforçar —, os de copiar do detalhe e os da barra de desenho do mapa — .pc-ferr-btn: Desfazer, Remover ponto, Recomeçar, Copiar a forma… —, que o modo noturno pintava de vermelho sobre o degradê; e, desde 06/10/2026, os de uma cor só do pedido de cerca — .btn-uni: o Cancelar da janela) */

/* topo, cartão do usuário e menu */
html.dark .topo-tema:hover{background:color-mix(in srgb,var(--accent) 50%,transparent)}
html.dark .topo-menu{border-color:rgba(171,196,224,.28);box-shadow:0 18px 36px rgba(5,10,18,.6),0 4px 10px rgba(5,10,18,.44)}
@media(max-width:900px){html.dark .snav{box-shadow:0 -10px 24px rgba(3,8,16,.28)}}

/* lista lateral do Mapa e das Cercas; avisos do topo do Mapa */
html.dark .veic-row:not(.ativa):hover{background:var(--accent)}
html.dark .veic-row.ativa{outline-color:rgba(222,0,19,.45)}
html.dark .veic-dot{box-shadow:0 0 0 1px rgba(234,240,248,.25)}   /* cerca cadastrada com cor escura não some na lista */
html.dark .aviso.atencao{border-bottom-color:rgba(255,181,71,.28)}
html.dark .aviso.config{background:rgba(129,140,248,.14);color:#b4bcff;border-bottom-color:rgba(129,140,248,.3)}

/* ── mapas ── A visão "Mapa" (OpenStreetMap) escurece por filtro SÓ no painel
   dos ladrilhos, e só quando é a visão ativa: montarSeletorCamadas mantém a
   classe .base-mapa no contêiner. Cercas, traçado, marcadores e balões moram em
   painéis irmãos do .leaflet-tile-pane e não passam pelo filtro; Híbrido,
   Satélite e Relevo não têm a classe; o mapa do telão (pnMapa) não passa pelo
   seletor e nunca a recebe. Trocar o tema é só CSS: nada a remedir no Leaflet. */
html.dark .leaflet-container.base-mapa .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.5)}
/* fundo enquanto os ladrilhos chegam: a terra do OSM depois do filtro (sem isso
   cada arrasto piscaria cinza-claro) */
html.dark :is(#mapaCanvas,#cercaCanvas,#ptMiniMapa,#intCanvas,#htMapa).base-mapa{background:#1b1c20}
/* zoom e atribuição: placas brancas sobre a base escura */
html.dark .leaflet-container:not(.pn-mapa) .leaflet-bar a{background-color:var(--surface);color:var(--ink);border-bottom-color:var(--line)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-bar a:hover,html.dark .leaflet-container:not(.pn-mapa) .leaflet-bar a:focus{background-color:var(--accent)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-bar a.leaflet-disabled{background-color:var(--surface-2);color:var(--faint)}
/* placa a .88: Relevo, Satélite e Híbrido continuam claros por baixo, e a .78 o
   link caía para 4,0:1 */
html.dark .leaflet-container:not(.pn-mapa) .leaflet-control-attribution{background:rgba(15,24,36,.88);color:var(--muted)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-control-attribution a{color:#67a8ff}
/* barra flutuante (Cercas, Ajustar, Camadas) e status: tinham fundo branco fixo
   com texto por token, e o rótulo sumia (1,4:1). O "ligado" inverte, como no
   claro. Ordem hover → ligado igual à do claro (mesmo peso). */
html.dark .mapbar-btn{background:rgba(23,36,52,.94);border-color:var(--line-forte);box-shadow:0 4px 12px rgba(3,8,16,.35)}
html.dark .mapbar-btn:hover{background:var(--accent);color:var(--ink)}
html.dark .mapbar-btn.ligado{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
html.dark .mapbar-menu button:not(.sel):hover{background:var(--accent);color:var(--accent-texto)}
html.dark .map-status{background:rgba(23,36,52,.92);border-color:rgba(171,196,224,.26);box-shadow:0 4px 12px rgba(3,8,16,.35)}
html.dark .balao-leg-ponto{box-shadow:0 0 0 1px rgba(234,240,248,.25)}
/* o que é escuro fixo some na base escurecida (1,02:1): seta de direção, disco
   dos agrupamentos, halo do "ao vivo" e haste da bandeira de chegada clareiam.
   Só na visão Mapa: em Relevo, que continua clara, o escuro segue certo. */
html.dark .leaflet-container.base-mapa .fm-marker-seta::before{border-bottom-color:#eaf0f8}
@keyframes fmPulsaClaro{
  0%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 3px rgba(234,240,248,.45)}
  70%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 15px rgba(234,240,248,0)}
  100%{box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 3px rgba(234,240,248,0)}
}
html.dark .leaflet-container.base-mapa .fm-marker.aovivo{animation-name:fmPulsaClaro}
html.dark .leaflet-container.base-mapa .marker-cluster-small,html.dark .leaflet-container.base-mapa .marker-cluster-medium,
html.dark .leaflet-container.base-mapa .marker-cluster-large{background:rgba(234,240,248,.22)}
html.dark .leaflet-container.base-mapa .marker-cluster-small div,html.dark .leaflet-container.base-mapa .marker-cluster-medium div,
html.dark .leaflet-container.base-mapa .marker-cluster-large div{background:#eaf0f8;color:#0f1824}
/* balões padrão do Leaflet (cercas, pontos, partida/chegada): são interface,
   seguem o tema nas quatro visões. O .fm-tip do veículo continua escuro, com um
   aro para descolar da base; o rótulo fixo das cercas muda SÓ cores (o JS mede
   a caixa dele para esconder rótulos que se encavalam). */
html.dark .leaflet-container:not(.pn-mapa) .leaflet-tooltip:not(.fm-tip):not(.pt-cerca-rotulo){background:var(--surface);border-color:var(--line-forte);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.45)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-tooltip-top:not(.fm-tip)::before{border-top-color:var(--surface)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-tooltip-bottom:not(.fm-tip)::before{border-bottom-color:var(--surface)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-tooltip-left:not(.fm-tip)::before{border-left-color:var(--surface)}
html.dark .leaflet-container:not(.pn-mapa) .leaflet-tooltip-right:not(.fm-tip)::before{border-right-color:var(--surface)}
html.dark .leaflet-tooltip.fm-tip{box-shadow:0 0 0 1px rgba(171,196,224,.28),0 4px 14px rgba(0,0,0,.5)}
html.dark .pt-cerca-rotulo{background:rgba(23,36,52,.92);border-color:rgba(171,196,224,.28);color:#d4deea;box-shadow:0 1px 3px rgba(0,0,0,.5)}
html.dark .pt-mini-carregando::after{background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.05) 60px 120px)}

/* ── tabelas ── casca do Jornadas escuro (.app-table-shell): aro a 20%. O realce
   de linha fica a 12% do ring (a 10% não aparece): os 18% do .criticas-row-hover
   derrubavam o texto colorido pequeno da linha sob o mouse — chips, situação em
   vermelho, --faint — para 3-4:1. A 12% ainda destaca 1,25:1 (o claro, 1,09:1). */
html.dark .tabela-rol{border-color:rgba(171,196,224,.2);background:color-mix(in srgb,var(--surface) 93%,#111d2c)}
@media (hover:hover){html.dark .vg-tabela tbody tr:not(.sel):hover td,html.dark .jor-tabela tbody tr:hover td{background:color-mix(in srgb,var(--ring) 12%,var(--surface))}}
html.dark .vg-prog i,html.dark .pt-ident-comp i{background:#2f435a}
/* zero de embarque/desembarque: #b3b9c3 ficaria MAIS claro que o texto normal */
html.dark .pt-num.pt-apagado{color:#5f7086}
html.dark .pt-travessia{color:#8fbaf5;border-color:rgba(103,168,255,.34);background:rgba(103,168,255,.12)}
html.dark .vg-tabela tr.int-sel td{background:rgba(103,168,255,.14)}
html.dark .int-linha-erro td{background:rgba(255,102,120,.1)}

/* ── campos ── */
html.dark .campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9f1fb' stroke-opacity='.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html.dark .dp-dia.fora:not(.sel):not(.hoje){color:#5f7086}
html.dark .dp-dia:disabled:not(.sel):not(.hoje){color:#3d5068}
html.dark .login-card input{background:var(--campo-fundo);color:var(--campo-texto)}
/* o fundo do login é um gradiente escuro fixo: o cartão #172434 sumia nele (1,05:1) */
html.dark .login-card{border:1px solid var(--cartao-borda);background-image:var(--cartao-fundo)}
html.dark .int-explica code{background:var(--accent);color:var(--accent-texto)}

/* ── cartões, chips e KPIs ── */
html.dark .pt-kpi{box-shadow:0 8px 24px rgba(2,8,18,.28)}
html.dark .pt-kpi b.int-recuperando{color:#ffb547}
html.dark .pt-score-num{color:color-mix(in srgb,var(--score) 60%,#fff)}
html.dark .proto-selo{border-color:rgba(255,181,71,.3)}
html.dark .pt-alerta-cerca{color:#ffb547;background:rgba(255,181,71,.16)}
html.dark .int-rip-resultado{background:var(--surface-2)}
html.dark .an-trilho,html.dark .int-barra{background:var(--accent)}   /* --surface-2 sumiria no cartão */

/* ── modais ── cabeçalho grudado era uma faixa branca no topo de todo modal;
   opaco de propósito, porque a lista rola por baixo dele */
html.dark .diag-overlay{background:rgba(3,8,16,.6)}
html.dark .diag-box{border-color:rgba(171,196,224,.28);box-shadow:0 16px 34px rgba(9,16,28,.44),inset 0 1px 0 rgba(255,255,255,.05)}
html.dark .diag-head{background:linear-gradient(180deg,#182535,#1c2c3f);border-bottom-color:rgba(171,196,224,.24)}
/* Alocar veículo (14/09/2026): ícone e "mostrar mais" são texto na cor da marca
   (#de0013 dá 3,1:1; o --destructive, 5,7:1); a lista usa o aro da casca das
   tabelas; o realce da linha fica a 12% do ring, como na vg-tabela escura */
html.dark .pt-aloc-icone,html.dark .pt-aloc-mais{color:var(--destructive)}
html.dark .pt-aloc-lista{border-color:rgba(171,196,224,.2);background-color:color-mix(in srgb,var(--surface) 93%,#111d2c)}
html.dark .pt-aloc-grupo > .pt-aloc-op:not(.sel):hover{background:color-mix(in srgb,var(--ring) 12%,var(--surface))}
/* a 5% da marca a linha escolhida tinha o fundo da comum (1,01:1): só a barra dizia qual era */
html.dark .pt-aloc-grupo > .pt-aloc-op.sel{background:color-mix(in srgb,var(--brand) 14%,var(--surface))}

/* ── linha do tempo da Pontualidade ── */
/* o balão do trecho fala a língua do balão padrão, que no escuro é claro */
html.dark .pt-balao{background:var(--tooltip-fundo);color:var(--tooltip-texto);box-shadow:0 10px 28px rgba(2,8,18,.48)}
html.dark .pt-balao::before{border-top-color:var(--tooltip-fundo)}
html.dark .pt-balao span{color:#46566a}
html.dark .pt-balao small{color:#56657a}
/* trilho sem cor (futuro, pendente): o percorrido vem em style= e não é tocado */
html.dark .pt-trilho:not([style]):not([class*="pt-trilho-"]),html.dark .pt-trilho-pendente,html.dark .pt-trilho-futuro{background:#2f435a}
/* o anel branco imitava um recorte no cartão branco; no escuro vira aro gritante */
html.dark .pt-no{border-color:var(--surface);box-shadow:0 0 0 2px rgba(234,240,248,.16)}
html.dark .proto-timeline .pt-no{--pt-foco-fundo:var(--surface);--pt-foco-cor:var(--brand)}
html.dark .pt-ponto.atual .pt-no.foco{animation:none}
/* halo do "agora": o cinza-escuro some no cartão escuro. Só o nome da animação
   muda; .pt-ponto.atual vence .pt-ponto-novo.atual pela ordem, como no claro */
@keyframes ptPulsaClaro{
  0%{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 0 4px rgba(234,240,248,.3)}
  70%{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 0 13px rgba(234,240,248,0)}
  100%{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 0 4px rgba(234,240,248,0)}
}
html.dark .pt-ponto.atual .pt-no{animation-name:ptPulsaClaro}
html.dark .pt-horas .icon{color:var(--faint)}
/* preenchimentos semânticos pintados com --ok: ficam no verde legado (#177a3d,
   app.js PT_CORES_LEGADAS), que é cor de dado e não de tema */
html.dark .pt-verde,html.dark .pt-trilho-verde,html.dark .pt-adiantado,html.dark .pt-trilho-adiantado{background:#177a3d}
/* texto das faixas fixas: o claro ESCURECE a cor para ler no branco; aqui a cor
   da faixa (#3f78b6, #d99514, #de0013) clareia 55% para ler no cartão escuro e na
   linha em hover (vermelho 5,3:1) — a mesma conta do ptCorTextoEscuro, que faz
   isso para as faixas da tela Parâmetros.
   :where() deixa o peso IGUAL ao do claro (0,1,0): lá, .pt-kpi b (0,1,1) vence a
   cor da faixa, e aqui tem de vencer também, senão o escuro pintaria o que o
   claro não pinta. */
:where(html.dark) .pt-txt-pontual{color:#a9c2de}
:where(html.dark) .pt-txt-amarelo{color:#eecf95}
:where(html.dark) .pt-txt-vermelho{color:#f08c95}

/* ── AUDITORIA: a Trilha (16/09/2026; os Conectados agora foram aposentados em 24/09/2026) ─────────
   A Trilha é a "Trilha de Auditoria" do Gestão de Jornadas (Auditoria.tsx):
   bolinha de 28 px com o ícone de 14 px e a cor do tipo (o colorMap de lá),
   conector de 1 px, descrição em 14 px/500 e a linha de baixo em 12 px (usuário
   · data e hora · selos de 9 px). Os selos seguem o Badge "outline" de lá. */
.campo .busca-wrap input{padding:0 12px 0 40px}
/* só na tela larga: abaixo de 1081 px vale a quebra de linha geral (como na Escala) */
@media(min-width:1081px){
  .campo-grupo-linha-unica .aud-campo-busca{flex:1.7 1 0;min-width:200px}
  .campo-grupo-linha-unica .aud-campo-acao{flex:1.3 1 0}
}
.aud-kpis{grid-template-columns:repeat(var(--n,4),1fr)}
@media(max-width:900px){.aud-kpis{grid-template-columns:repeat(2,1fr)}}
.aud-titulo{display:flex;align-items:center;gap:8px}
.aud-titulo .icon{width:16px;height:16px;color:var(--brand)}
.aud-rodape-cab{font-size:11px;font-variant-numeric:tabular-nums}
.aud-cartao .pt-chips{margin:6px 0 10px}
.aud-lista{list-style:none;margin:0;padding:4px 2px 0}
.aud-item{display:flex;gap:12px}
.aud-trilho{display:flex;flex-direction:column;align-items:center;flex:none}
.aud-bola{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;color:#fff}
.aud-bola .icon{width:14px;height:14px}
.aud-conector{flex:1;width:1px;margin:4px 0;background:var(--line)}
.aud-item:last-child .aud-conector{display:none}
.aud-corpo{flex:1;min-width:0;padding:2px 0 16px}
.aud-desc{margin:0;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);overflow-wrap:anywhere}
.aud-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px;font-size:12px;line-height:18px;color:var(--muted)}
.aud-meta-item{display:inline-flex;align-items:center;gap:4px;min-width:0}
.aud-meta-item .icon{width:13px;height:13px;flex:none}
/* O LINK DA ENTRADA (Alan, 01/10/2026: "se eu clicar no evento da auditoria, me leva pra página referente ao item"; 02/10/2026: "o único atalho pra abrir a tela é clicando no ícone... não faça que o clique na linha abra a tela"):
   a entrada de uma VIAGEM traz o botão redondo à direita, um link de verdade; a LINHA não é clicável (sem cursor de mão, sem acender o botão ao passar o mouse nela) */
/* (02/10/2026, Alan: "o ↗ não ficou bom, use um ícone mais sugestivo; a cor também não ficou legal"): o ícone de ABRIR EM OUTRA TELA (quadrado com seta; o relógio com seta e o olho não agradaram: "a setinha com ícone de abrir em outra tela acho que é melhor... e uma cor melhor pra quando passar o mouse... aquele
   estilo padrão de cor com degradê") num botão redondo NEUTRO — cinza no repouso, para não brigar com as bolinhas coloridas do trilho —, que acende no DEGRADÊ vermelho padrão dos botões de ação (--brand-degrade) ao passar o mouse
   na linha ou no botão; o botão sobe 1 px só quando é ELE que está sob o mouse (como o .btn-primario) */
.aud-ir{flex:none;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);color:var(--muted);text-decoration:none;transition:border-color var(--t-rapida),color var(--t-rapida),box-shadow var(--t-rapida),transform var(--t-rapida)}
.aud-ir .icon{width:17px;height:17px}
.aud-ir:hover,.aud-ir:focus-visible{border-color:color-mix(in srgb,var(--brand) 76%,transparent);background:var(--brand-degrade);color:var(--brand-texto);box-shadow:0 3px 9px color-mix(in srgb,var(--brand) 24%,transparent)}
.aud-ir:hover{transform:translateY(-1px)}
.aud-hora{font-variant-numeric:tabular-nums}
/* (a origem — IP e nome dado a ele — e o dispositivo saíram da linha em 25/09/2026: a Trilha não os mostra mais) */
.aud-selo{display:inline-flex;align-items:center;height:16px;padding:0 6px;border:1px solid var(--line);border-radius:14px;
  font-size:9px;font-weight:500;line-height:14px;color:var(--ink);white-space:nowrap}
.aud-selo-voce{border-color:color-mix(in srgb,var(--info) 45%,transparent);background:var(--info-bg);color:var(--info)}
.aud-selo-falha{border-color:color-mix(in srgb,var(--erro) 45%,transparent);background:var(--erro-bg);color:var(--erro)}
/* as cores dos tipos (colorMap do Jornadas) */
.aud-cor-laranja{background:oklch(0.7 0.17 50)}
.aud-cor-verde{background:oklch(0.6 0.17 155)}
.aud-cor-vermelho{background:oklch(0.6 0.22 25)}
.aud-cor-ardosia{background:oklch(0.62 0.03 260)}
.aud-cor-petroleo{background:oklch(0.45 0.12 175)}
.aud-cor-cinza{background:var(--muted);color:var(--surface)}
.aud-cor-padrao{background:var(--surface-2);color:var(--muted)}
/* o evento que chegou com a tela aberta entra deslizando (x -10 → 0, como lá) */
.aud-novo{animation:audEntra 320ms var(--ease-out-smooth) both}
@keyframes audEntra{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.aud-vazio{display:flex;flex-direction:column;align-items:center;gap:8px}
.aud-vazio b{margin:0}
.aud-vazio span{max-width:360px}
.aud-vazio-icone{width:32px;height:32px;color:var(--muted)}
.aud-vazio-icone.aud-vazio-erro{color:var(--destructive)}
.aud-tentar{padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--brand);text-decoration:underline;cursor:pointer}
html.dark .aud-tentar{color:var(--destructive)}

/* ── Celular (16/09/2026) ─────────────────────────────── */
/* toque: campos em 16px (o iPhone dá zoom ao focar campo menor) */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea{font-size:16px!important}
}
/* telão em tela pequena, sem tocar no modo TV */
@media (max-width:1100px){
  .pn-cartao{max-width:none}
  .pn-tela.pn-cheio .pn-palco,.pn-tela:fullscreen .pn-palco{grid-template-columns:minmax(0,1fr);height:auto;min-height:100%}
  .pn-tela.pn-cheio .pn-cartao,.pn-tela:fullscreen .pn-cartao{max-width:none}
  .pn-tela.pn-cheio,.pn-tela:fullscreen{overflow-y:auto}
}
@media (max-width:640px){
  .pn-topo{flex-wrap:wrap;gap:6px 16px}
  .pn-horas{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
  .pn-horas .pn-campo-rot{white-space:normal}
}
/* tela cheia do telão no celular: o botão de sair (não há Esc) */
.pn-sair-cheio{display:none}
@media (hover:none){.pn-tela.pn-cheio .pn-sair-cheio{display:inline-flex;position:fixed;top:calc(10px + env(safe-area-inset-top));right:10px;z-index:1201;margin:0}}
/* cabeçalhos de cartão que não cabem numa linha */
@media (max-width:760px){.cartao-cab{flex-wrap:wrap;row-gap:4px}}
/* indicadores do Mapa no celular: a faixa já rola de lado, então cada um fica do
   tamanho do rótulo ("FROTA TO…" cortado não dizia qual era) */
@media (max-width:760px){.kpis-topo .kpi-topo{flex:1 0 auto}}
/* balão nunca maior que a tela */
/* (13/10/2026) 420 px: a frase de uns 55 caracteres ("Score 86 de 100 — o vínculo só é gravado a partir de 85") cabe numa linha só; o texto maior quebra balanceado e a caixa encolhe até a linha mais larga (ajustarAoTexto, app.js) */
.balao-flutuante{max-width:min(420px,calc(100vw - 16px))}
.balao-largo{max-width:min(460px,calc(100vw - 16px))}
/* KPIs que tinham a grade escrita na própria tag */
@media (max-width:760px){.pt-kpis.pt-kpis-viagem{grid-template-columns:1fr 1fr}}
@media (min-width:761px) and (max-width:1100px){.pt-kpis.pt-kpis-viagem{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* tabelas soltas passam a rolar dentro da própria caixa */
.tabela-rol > .jor-tabela{margin-top:0}
.diag-corpo .panel-btn{white-space:normal;height:auto;min-height:36px;text-align:left}
/* alvos de toque */
@media (pointer:coarse){
  button,a,.cs-op,.pt-chip,.veic-row{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .panel-btn,.btn-icone,.btn-redondo{min-height:40px}
  .btn-icone,.btn-redondo{min-width:40px}
  .fechar-btn{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .mini-acao{min-height:32px}
  .cs-op{min-height:44px}
  .cs-acao{height:40px}
  .cs-fechar{min-width:40px;min-height:40px}
  .cs-panel{max-height:min(320px,50dvh)}
  .dp-panel{width:min(308px,calc(100vw - 24px))}
  .dp-dia{padding:10px 0;font-size:14px}
  .dp-nav,.pd-nav{width:40px;height:40px}
}

/* ── Telão sem login (16/09/2026) ─────────────────────── */
/* (o "Entrar" fica na barra de filtros do painel, que o modo telão esconde) */
.app-quiosque .app-main{position:relative}

/* ── Margens seguras nas laterais (viewport-fit=cover) ── */
/* no iPhone deitado o recorte da câmera fica sobre a página; no computador env() vale 0 */
.app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.diag-overlay{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.pn-tela.pn-cheio{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* ── Menu do usuário: conta de teste, agências e trocar senha ── */
.topo-menu-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 14px}
.topo-menu-teste{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-full);background:#fef3c6;color:#973c00}
html.dark .topo-menu-teste{background:rgba(123,51,6,.3);color:#ffd230}
.topo-menu-agencias{font-size:11px;color:var(--muted)}
/* Trocar senha à ESQUERDA e Sair à DIREITA na mesma linha (Alan, 26/09/2026): o Sair leva o margin-left:auto */
.topo-menu-senha{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:11px;font-weight:600}
.topo-menu-senha .icon{width:14px;height:14px}
.topo-menu-senha:hover{border-color:rgba(227,6,19,.45);color:var(--brand)}

/* ── Celular, 2ª leva (16/09/2026): o que dava para usar, mas atrapalhava ── */

/* BALÃO: largura do próprio texto (o JS centra pela largura de verdade; antes a
   largura encolhia perto da borda) e a seta segue o elemento quando ele desliza */
.balao-flutuante{width:max-content}
.balao-flutuante::before{left:clamp(10px,calc(50% + var(--balao-dx,0px)),calc(100% - 10px))}

/* CABEÇALHO DA PÁGINA: no celular fica o título (o texto de apoio tomava até três
   linhas da barra presa no alto). A Auditoria mantém o dela: diz de que IP a
   pessoa está acessando. */
@media (max-width:760px){.pagina-cab .cab-titulo > p:not(#audSub):not(#prmSub){display:none}.cab-titulo-linha{height:24px}}
/* NADA ALARGA A PÁGINA NO CELULAR (Alan, 28/09/2026: "não precisa deixar dar menos zoom em mobile"): o index.html trava o zoom mínimo em 1
   (minimum-scale=1; o zoom para ampliar continua) e o que passar da largura é cortado aqui — era a sobra de largura que deixava afastar */
html,body{overflow-x:clip}

/* MAPA DA FROTA: no celular o inspetor sobe de baixo, como uma folha, e a lista
   sai de cena enquanto ele está aberto (fleetRenderDrawer marca .gaveta-aberta);
   o carro é centralizado na faixa livre acima dele (fleetAreaCoberta) */
@media (max-width:760px){
  .drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:62%;border-left:0;border-top:1px solid var(--line);
    border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(105%);overscroll-behavior:contain;box-shadow:0 -12px 32px rgba(15,23,42,.18)}
  .drawer.aberta{transform:none}
  .corpo.gaveta-aberta .lateral{display:none}
  /* o cartão RECOLHIDO pelo botão de tela cheia (Alan, 06/10/2026): a folha desce e o mapa fica com a área toda; o veículo continua em foco */
  .corpo.gaveta-aberta.gaveta-recolhida .drawer.aberta{transform:translateY(105%);box-shadow:none}
}
@media (pointer:coarse){.drawer-atualizar{min-height:36px}}

/* MAPAS DENTRO DE PÁGINA: no toque andam com dois dedos (mapaArrastoNoToque); o
   aviso aparece quando um dedo tenta arrastar */
@media (max-width:640px){#ptMiniMapa{height:min(340px,48vh);height:min(340px,48dvh)}}
.mapa-dois-dedos{position:absolute;left:50%;top:50%;z-index:820;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 14px;
  border-radius:var(--r-full);background:rgba(15,20,30,.8);color:#fff;font-size:13px;font-weight:600;text-align:center;pointer-events:none;
  animation:mapaAviso .18s ease}
@keyframes mapaAviso{from{opacity:0}to{opacity:1}}

/* BARRA DO MAPA DA VIAGEM: no toque os botões ficam abertos (com texto) numa faixa
   que rola de lado, em vez de três ou quatro linhas por cima do mapa; a visão fica
   fora da faixa e o espaço do zoom (+/−) fica livre à esquerda */
.mapbar-trilho{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
@media (hover:none){
  .mapbar-recolhida{flex-wrap:nowrap;max-width:calc(100% - 60px)}
  .mapbar-recolhida .mapbar-trilho{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  .mapbar-recolhida .mapbar-btn{flex:none;min-height:36px}
}

/* LISTAS COM CAIXINHAS NO TOQUE: a caixinha maior alterna numa área de 44 px; o
   texto continua sendo o atalho "só esta" (csMontar) */
@media (pointer:coarse){
  .cs-op{padding:10px 12px}
  .cs-op-multi .cs-check{width:20px;height:20px}
  .cs-op-multi .cs-check::before{content:"";position:absolute;inset:-12px -12px -12px -14px}
  .cs-op-multi.marcado .cs-check::after{left:6.5px;top:2.5px;width:5px;height:10px}
}

/* DOCUMENTAÇÃO (≤860, índice em cima): o índice rola dentro de si, escolher um
   tópico leva ao texto (renderTelaDocumentacao) e anterior/próximo quebram linha */
@media (max-width:860px){
  .doc-indice{max-height:38vh;max-height:38dvh;overflow-y:auto;overscroll-behavior:contain}
  .doc-corpo{scroll-margin-top:88px}
  .doc-nav .panel-btn{flex:1 1 0;min-height:40px;height:auto;padding:8px 12px;white-space:normal;text-align:left;justify-content:flex-start}
  .doc-nav .panel-btn:last-child{text-align:right;justify-content:flex-end}
}

/* CALENDÁRIOS: o simples alinha à direita do campo quando não cabe (dpCaberNaTela);
   o de período ganha dias de 40 px no toque e, até 767 px, mostra um mês só */
.dp-panel.dp-panel-dir{left:auto;right:0}
@media (pointer:coarse){
  .pd-mes{width:min(280px,calc(100vw - 56px))}
  .pd-mes-cab{height:40px;padding:0 44px}
  .pd-semana,.pd-grade{grid-template-columns:repeat(7,1fr)}
  .pd-grade{row-gap:4px}
  .pd-cel{width:auto;height:40px}
  .pd-dia{width:100%;height:40px}
  .pd-panel .pd-acao{height:40px}
}
@media (max-width:767px){
  .pd-rodape{flex-wrap:wrap}
  .pd-acoes{margin-left:auto}
}

/* FILTROS RECOLHÍVEIS (filtrosRecolhiveis): o cabeçalho "Filtros" do Mapa na barra
   de consulta, só no celular; no computador a barra fica como sempre */
.filtros-cab{display:none}
@media (max-width:760px){
  .cartao-consulta.filtros-recolhiveis{flex-direction:column;align-items:stretch;gap:10px}
  .filtros-recolhiveis > .filtros-cab{display:flex}
  .filtros-recolhiveis > .campo-grupo{flex:none}
  .filtros-recolhiveis.filtros-tudo:not(.filtros-abertos) > .campo-grupo,
  .filtros-recolhiveis:not(.filtros-abertos) .filtro-extra{display:none}
}

/* A TROCA DE PÁGINA FAZ UM FADE CURTO NA ÁREA INTEIRA (Alan, 27/09/2026: "transições quando alternamos de uma
   página pra outra, pra não ficar uma troca brusca") — soma com a entrada por bloco do telaEntrada */
.tela-troca{animation:telaTroca .3s cubic-bezier(.23,1,.32,1)}
@keyframes telaTroca{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* PONTUALIDADE: no celular cada viagem é um CARTÃO (as células têm lugar fixo, ptCelulasLinha) e a lista rola com a página, sem a segunda
   barra de rolagem. CARTÃO NOVO (28/09/2026, Alan cobrou 2 vezes: "os cards das viagens na Pontualidade na versão mobile... meio vanguncado"):
   antes eram 11 moldes diferentes (hora, linha e prefixo mudavam de lugar de um cartão para o outro), a linha espremida em 86-144 px ocupava
   3 linhas ou mais e a hora tinha o mesmo peso de tudo. Agora a mesma planta em todos, por hierarquia:
     1. manchete: a hora (e a data/fuso, menores) com a situação à direita; embaixo a linha e o sentido em largura toda, no máximo 2 linhas;
     2. detalhe numa linha: serviço · empresa · km (o td da linha vira display:contents e o nome e o .sub vão para lugares próprios);
     3. veículo (bolinha do vínculo, prefixo que nunca corta, placa que cede) e motorista (nome que cede, matrícula que não);
     4. faixa de baixo: pontos (barra) e atraso, alinhado à direita (o ✓/✗ «carro certo?» que ficava aqui saiu em 29/10/2026).
   O cabeçalho some: a ordem vai pelo "Ordenar" de um botão só (.ordem-cel, ordemCelMontar). DEITADO (paisagem com pouca altura, também em 844 e
   932) a lista usa o mesmo cartão em DUAS COLUNAS: com a mesma altura de cartão cabem 4 na altura útil em vez de 1,5 — um cartão mais largo e
   baixo (tudo em 3 faixas) ficava com 2,7 por tela e as linhas longas iam para uma faixa só, cortadas. */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #ptLista.pt-lista{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  #ptLista .vg-tabela,#ptLista tbody{display:block}
  #ptLista thead{display:none}
  #ptLista tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"hora hora sit sit" "linha linha linha linha" "srv sub sub sub" "veic veic veic veic" "mot mot mot mot" "pontos pontos atraso cerc";
    gap:4px 10px;align-items:center;align-content:start;margin:0 0 8px;padding:10px 12px 8px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  #ptLista tbody td{display:block;min-width:0;padding:0;border:0;white-space:normal;background:none!important;box-shadow:none!important}
  /* 1. manchete */
  #ptLista .pt-c-hora{grid-area:hora;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
  #ptLista .pt-c-hora > b{font-size:16px;font-weight:700;line-height:22px;font-variant-numeric:tabular-nums}
  #ptLista .pt-hora-dia{font-size:11px;font-weight:600;color:var(--muted)}
  #ptLista .pt-hora-fuso{font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
  #ptLista .pt-c-sit{grid-area:sit;justify-self:end;text-align:right}
  #ptLista td.pt-c-linha{display:contents}
  #ptLista .pt-c-linha > b{grid-area:linha;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:600;line-height:18px}
  #ptLista .pt-c-linha .pt-linha-sent{font-size:12px}
  /* 2. detalhe: serviço · empresa · km, uma linha só */
  #ptLista .pt-servico{grid-area:srv;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  #ptLista .pt-srv-irmao{display:inline;font-size:inherit}   /* (piso duplo: no cartão do celular o detalhe é UMA linha, "7831016 + 7831017 · empresa · km") */
  #ptLista .pt-srv-irmao::before{content:" + "}
  #ptLista .pt-srv-orgao{display:none}   /* (o órgão embaixo do serviço é da tabela, 06/10/2026; no cartão o detalhe é uma linha só) */
  #ptLista .pt-c-linha > .sub{grid-area:sub;display:block;min-width:0;margin:0 0 0 -6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
  #ptLista .pt-c-linha > .sub::before{content:"· "}
  /* 3. veículo e motorista */
  #ptLista .pt-c-veic{grid-area:veic;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
  #ptLista .pt-c-veic .pt-bol{flex:none;align-self:center;margin-right:0}
  #ptLista .pt-c-veic .pt-veic-cod{flex:none;font-size:14px;white-space:nowrap}   /* o prefixo nunca é cortado */
  #ptLista .pt-c-veic .pt-veic-placa{display:block;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:var(--muted)}   /* quem cede é a placa */
  #ptLista td.pt-c-veic > span.muted:only-child{display:none}
  #ptLista td.pt-c-veic:has(> span.muted:only-child)::after{content:"sem veículo vinculado";font-size:12px;color:var(--muted)}
  #ptLista .pt-c-mot{grid-area:mot;display:flex;align-items:center;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap}
  /* sem motorista, o cartão não escreve um "—" órfão numa linha inteira (27/09/2026) */
  #ptLista td.pt-c-mot:has(> span.muted:only-child){display:none}
  #ptLista .pt-c-mot .pt-bol{flex:none}
  #ptLista .pt-mot-nome{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #ptLista .pt-c-mot .pt-mais-mot{flex:none}   /* o «+N» nunca é cortado: quem cede é o nome */
  #ptLista .pt-c-veic .pt-mais-mot{flex:none;align-self:center;margin-left:0}   /* o «+N» do veículo (04/11/2026): centrado na linha, como a bolinha do vínculo, e o espaço do prefixo vem do `gap` */
  /* a matrícula fica NA LINHA do nome no cartão ("NOME · 12345"), não numa 2ª linha solta — e é o nome que cede */
  #ptLista .pt-c-mot .sub{display:inline;font-size:inherit}
  #ptLista .pt-c-mot > .sub{flex:none;margin-left:4px;color:var(--muted)}
  #ptLista .pt-c-mot .sub::before{content:"· "}
  /* 4. faixa de baixo: pontos | atraso */
  #ptLista td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  #ptLista .pt-c-pontos{grid-area:pontos;display:flex;align-items:center;min-width:0}
  #ptLista td.pt-c-pontos::before{display:inline;margin:0 8px 0 0}
  #ptLista .pt-c-pontos .vg-prog{flex:1;min-width:0}
  #ptLista .pt-c-pontos .vg-prog i{flex:1 1 auto;width:auto;min-width:40px;max-width:120px}
  #ptLista .pt-c-atraso{grid-area:atraso;justify-self:end;text-align:right;white-space:nowrap}
  #ptLista .pt-c-atraso b{font-size:14px;font-weight:700}
  #ptLista td.pt-c-atraso:not(:has(b)){visibility:hidden}   /* sem atraso medido: nem o rótulo nem um "—" solto */
  #ptLista .pt-c-cerc{grid-area:cerc;justify-self:end;text-align:right;white-space:nowrap}
  #ptLista td.pt-c-cerc:empty{display:none}   /* sem alerta, nem o rótulo «Cercas» (29/10/2026) */
  #ptLista tbody tr:has(td.pt-c-cerc:empty) .pt-c-atraso{grid-column:3 / 5}   /* e a 4ª coluna fica sem ninguém: o atraso volta ao canto direito do cartão */
  #ptLista tbody tr.sel{border-color:color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:inset 3px 0 0 var(--brand)}
  #ptLista tbody tr.pt-linha-volta{animation:ptVoltaCartao 1.6s ease-out}
  /* (a Visão detalhada tentou colunas resumidas no celular em 27/09/2026 e o dono mandou voltar no mesmo dia:
     "a tabela de visão detalhada no mobile ficou ruim, pode voltar como tava antes" — ela fica completa, com as
     12 colunas e a rolagem lateral por toque) */
}
/* deitado: os cartões em duas colunas (ver acima); a linha da grade estica os dois cartões à mesma altura */
@media (orientation:landscape) and (max-height:520px){
  #ptLista tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #ptLista tbody tr{margin:0;grid-template-rows:repeat(5,auto) 1fr}
  /* o cartão mais baixo da dupla deixa a sobra no meio: a faixa de pontos/atraso/cercas fica no pé, alinhada com a do vizinho */
  #ptLista .pt-c-pontos,#ptLista .pt-c-atraso,#ptLista .pt-c-cerc{align-self:end}
}
/* FILTROS DA PONTUALIDADE NO CELULAR (28/09/2026): eram 10 campos empilhados (700 px abertos). Em pé, grade de 2 colunas — Período e Motorista
   na largura toda, os pares Empresa/Classe, Linha/Serviço, Origem/Destino e Horário/Veículo — e os botões (Limpar, Exportar) numa linha só, à
   direita. Deitado, 3 colunas (740) ou 4 (a partir de 820: 844 e 932), sem ninguém na largura toda */
@media (max-width:760px){
  .campo-grupo.pt-filtros-grupo{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px}
  .pt-filtros-grupo .pt-filtros-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:8px 10px;align-items:end}
  .pt-filtros-campos > .campo{flex:none;min-width:0;width:auto}
  .pt-filtros-campos > .campo-periodo,.pt-filtros-campos > .campo-motorista{grid-column:1/-1}
  .pt-filtros-grupo > .campo-acoes{display:flex;justify-content:flex-end;gap:8px;margin:0}
}
@media (orientation:landscape) and (max-height:520px){
  /* colunas CONTADAS, não auto-fill: dentro do cartão flexível a grade auto-fill media a própria altura como se tivesse 1 coluna (669 px de
     caixa para 227 de campos) */
  /* a grade é o próprio grupo (os campos "atravessam" .pt-filtros-campos): os botões Limpar/Exportar entram na última célula da última fileira */
  .campo-grupo.pt-filtros-grupo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:end}
  .pt-filtros-grupo .pt-filtros-campos{display:contents}
  .pt-filtros-campos > .campo{flex:none;min-width:0;width:auto}
  .pt-filtros-campos > .campo-periodo,.pt-filtros-campos > .campo-motorista{grid-column:auto}
  .pt-filtros-grupo > .campo-acoes{grid-column-end:-1;justify-self:end;display:flex;gap:8px;margin:0}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:820px){.campo-grupo.pt-filtros-grupo{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* a faixa de LOTAÇÃO da viagem no celular: o título que não cabe quebra em 2 linhas em vez de sair "CHEGARAM ATRASA…" (147 px de texto em 125) */
@media (max-width:900px),(orientation:landscape) and (max-height:520px){
  .pt-lot .pt-kpi-rot{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
}

/* no computador a data segue no negrito ("27/09 04:50") e o fuso vai logo depois, pequeno */
.vg-tabela .pt-hora-fuso{margin-left:4px;font-size:10px;font-weight:600;color:var(--muted)}

/* ORDENAR NUM BOTÃO SÓ (ordemCelMontar): só onde o cabeçalho da tabela some — em pé na Pontualidade e na Escala, e deitado na Pontualidade */
.ordem-cel{display:none}
@media (max-width:760px){.ordem-cel{display:flex}}
@media (orientation:landscape) and (max-height:520px){#ptOrdemCel{display:flex}}
.ordem-cel{align-items:center;gap:8px;min-height:36px;margin:0 0 8px}
.ordem-cel-rot{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ordem-cel-campo{flex:0 1 220px;min-width:0}
.ordem-cel-campo .cs-btn{width:100%;height:36px}
.ordem-cel-dir{flex:none;width:36px;height:36px}
.ordem-cel-dir .icon{transition:transform var(--t-rapida)}
.ordem-cel-dir[data-dir="asc"] .icon{transform:rotate(180deg)}

/* O ÔNIBUS NA VISÃO DETALHADA (28/09/2026): a <tr> da localidade onde a linha do tempo marca o ônibus (ptOnibusNaTabela) leva a classe pt-linha-onibus, a mesma dentro ou fora da
   cerca. É só MARCA: nenhuma regra de CSS e nenhuma leitura em JS a usam — a troca fina (ptTrocarFino) só a vê pela casca da <tr>, e por isso a linha antiga e a nova são trocadas quando o
   ônibus anda de ponto. A FAIXA VERMELHA da lateral (o box-shadow inset de 3 px na primeira célula) SAIU (Alan, 29/09/2026: "essa faixa vermelha da lateral que mostra onde está... acho que
   até pode remover... pq agr vamos usar a bolinha"): quem mostra onde o ônibus está é a bolinha que pulsa, logo abaixo, no claro, no escuro e no celular. As regras do selo .pt-onibus-rot
   logo abaixo são de ANTES (o selo saiu do app.js em 28/09, sem uso): ficam para uma limpeza à parte, fora desta frente */
.pt-onibus-rot{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px 1px 4px;border-radius:var(--r-full);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);color:var(--brand);font-size:10px;font-weight:700;line-height:14px;letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.pt-onibus-rot .icon{width:11px;height:11px}
/* o selo fica na célula da SIGLA, só com o ícone (o nome vai no balão), POSICIONADO por cima da sobra da coluna: não ocupa lugar no fluxo. Na
   Localidade, o texto abria uma 3ª linha quando o nome já quebrava em 2 (53 → 74 px) e, a cada ciclo em que o ônibus avançava, a linha antiga
   encolhia, a nova crescia e as do meio pulavam 21 px. Assim a altura das linhas é a mesma com e sem o destaque */
#ptTabPontos td.pt-sigla{position:relative}
#ptTabPontos .pt-sigla .pt-onibus-rot{position:absolute;top:50%;right:4px;transform:translateY(-50%);margin:0;padding:2px 3px}
.pt-onibus-dentro .pt-onibus-rot{background:var(--brand);border-color:var(--brand);color:#fff}
html.dark .pt-onibus-rot{color:var(--destructive);border-color:color-mix(in srgb,var(--destructive) 40%,transparent)}
html.dark .pt-onibus-dentro .pt-onibus-rot{background:var(--brand);border-color:var(--brand);color:#fff}
@keyframes ptVoltaCartao{from{background:var(--info-bg,#e7f0fb)}to{background:var(--surface)}}

/* A BOLINHA QUE PULSA NA LINHA DO ÔNIBUS (Alan, 29/09/2026: "talvez seria interessante ter uma animação na linha correspondente onde o ônibus está... uma bolinha colorida, de acordo com a cor da
   linha do tempo... pequenininha pulsando"; e, ao ver no ar: "coloca a direita do nome da localidade... e não a esquerda"). Uma só, na linha que a linha do tempo marca (a mesma regra do nó pulsante),
   com a classe de cor do NÓ desse ponto (pt-f1…, pt-verde…: as regras e o escuro que já existem — nenhuma cor nova aqui). Fica DEPOIS do texto do nome, na mesma célula, na linha de texto em que o nome
   termina (se o nome quebra em 2 ou 3 linhas, ela vai no fim da última). Ocupa ZERO no fluxo: é um inline-block de 8 px com margem esquerda de 7 px (o respiro do nome) e margem direita de -15 px
   (7 + 8), então a largura que ela soma à linha é 0 — o nome quebra exatamente onde quebrava, a coluna tem a mesma largura com ela em qualquer linha (a coluna não muda quando o ônibus anda) — e a
   margem de cima de -8 px zera a altura (o pé dela fica na linha de base do texto), então a linha tem a mesma altura com e sem ela. Como nunca entra na conta de largura, o nome (que aqui QUEBRA em
   linhas, não corta com reticências) nunca a empurra para uma linha nova nem a esconde: ela fica no vão do padding da célula (8 px, 12 no celular) e da célula seguinte, que é texto centralizado.
   O halo é o ::after com o MESMO fundo (background:inherit): a cor da própria bolinha nos dois temas, sem rgba; o pulso tem os 1,8 s do nó da linha do tempo. Sem gate: o Windows daqui vem com as
   animações desligadas e o pedido é ver o pulso. O halo cresce até 2,2× (raio 8,8 px) e chega a esse tamanho já transparente: com o respiro de 7 px ele para a ~2 px do fim da última letra */
.pt-onibus-bola{position:relative;display:inline-block;width:8px;height:8px;margin:-8px -15px 0 7px;vertical-align:baseline;border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);transition:background-color var(--t-media)}
.pt-onibus-bola::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;pointer-events:none;animation:ptBolaPulsa 1.8s ease-out infinite}
@keyframes ptBolaPulsa{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.2);opacity:0}
  100%{transform:scale(2.2);opacity:0}
}
/* no toque o alvo do balão é maior que os 8 px, só para cima, para baixo e para a direita (o lado livre, sobre o vão da coluna seguinte): à esquerda ele começa na borda da bolinha e nunca cobre o nome */
@media (pointer:coarse){.pt-onibus-bola::before{content:"";position:absolute;inset:-7px -7px -7px 0}}

/* ESCALA: no celular cada viagem é um cartão com os dois campos em largura toda;
   a ordenação vai pelo "Ordenar" de um botão só (28/09/2026: o cabeçalho virava
   uma faixa de 7 botões em 2-3 linhas) e o Aplicar fica preso acima da barra de baixo.
   Deitado também (3ª etapa, 28/09/2026): em 844 e 932 a tabela tinha 1.303 px numa caixa de 699 que rolava por dentro — cartões em duas
   colunas, como a Pontualidade (ver "ESCALA DO DIA" no bloco tela a tela) */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .esc-rol{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  .esc-grade{min-width:0}
  .esc-grade,.esc-grade tbody{display:block}
  .esc-grade thead{display:none}
  .esc-grade tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:center;margin:0 0 8px;padding:10px 12px;
    border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  .esc-grade tbody td{display:block;min-width:0;padding:0;border:0;white-space:normal;background:none!important;box-shadow:none!important}
  .esc-grade td.esc-c-hora{grid-column:1;grid-row:1;width:auto}
  /* O CARTÃO SEM O AVATAR (Alan, 08/10/2026: "olha o nome da linha… no mobile às vezes não precisa mostrar o avatar, e sim o nome de quem fez"): a Linha ocupa a largura toda ao lado da hora (com o avatar e o par ✓ ✗ ela ficava em 65 px, um nome de 8 linhas)
     e o nome de quem fez vai embaixo de cada campo (.esc-quem-campo): quem escalou o veículo e quem escalou o motorista podem ser duas pessoas */
  .esc-grade td.esc-c-linha{grid-column:2/-1;grid-row:1}
  .esc-grade td.esc-c-quem{display:none}
  .esc-quem-campo{display:block;margin:3px 2px 0;font-size:11.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .esc-quem-pendente{color:var(--alerta)}
  .esc-grade td.pt-servico{grid-column:1/3;grid-row:2}
  .esc-grade td.esc-c-sit{grid-column:3;grid-row:2;width:auto;justify-self:end;text-align:right}
  .esc-grade td.esc-c-campo{grid-column:1/-1;width:auto}
  .esc-grade td.esc-c-campo::before{content:attr(data-rotulo);display:block;margin:2px 0 3px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .esc-grade tbody tr.esc-linha-pendente{box-shadow:inset 3px 0 0 var(--alerta)}
  .esc-grade tbody tr.esc-linha-conflito{background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
  .esc-input{height:44px}
  /* o × do campo no toque: alvo de 32 px (era 22) e sempre à vista */
  .esc-limpar{width:32px;height:32px;right:6px;opacity:.75;pointer-events:auto}
  .esc-limpar .icon{width:15px;height:15px}
  .esc-revez-mais{width:32px;height:32px;right:44px;opacity:.75;pointer-events:auto}   /* (celular: dois alvos de 32 px lado a lado, o + à esquerda do ×) */
  .esc-revez-mais .icon{width:15px;height:15px}
  .esc-celula.esc-tem-mais .esc-input-motorista{padding-right:82px}
  .esc-celula.esc-tem-limpar .esc-input-carro,.esc-celula.esc-tem-limpar .esc-input-motorista{padding-right:42px}
  .esc-linha-acoes .pt-chips{flex-wrap:wrap;overflow:visible}
  /* z-index abaixo dos 60 da barra de baixo: a gaveta do menu (dentro dela) fica por cima */
  .esc-aplicar:not([hidden]){position:fixed;left:12px;right:12px;bottom:calc(68px + var(--snav-baixo));z-index:50;margin:0;
    padding:8px 10px;border:1px solid var(--line-forte);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-pop)}
  .esc-aplicar-txt{flex:1 1 100%}
  .esc-aplicar .panel-btn{height:40px}
  .esc-aplicar .panel-btn{flex:1}
  .tela-pagina:has(.esc-aplicar:not([hidden])){padding-bottom:96px}
}
/* motorista desligado (sem carro): o toque e o mouse chegam à caixa em volta, que
   tem o balão — campo desligado não recebe clique */
.esc-celula-off{cursor:not-allowed}
.esc-celula-off .esc-input{pointer-events:none}

/* ALVOS DE TOQUE que faltavam (a primeira leva está em "Celular", acima) */
@media (pointer:coarse){
  .pt-chip{height:36px}
  .th-ordenar{padding:8px 0;margin:-8px 0}
  .prm-mover{min-width:36px;min-height:36px;font-size:14px}
  .lateral-filtros-cab{min-height:40px}
  .cs-link .cs-btn{padding:8px 0;margin:-8px 0}
  .proto-timeline .pt-no{position:relative}
  .proto-timeline .pt-no::after{content:"";position:absolute;inset:-14px;border-radius:50%}
  .pt-porque{padding:8px;margin:-8px -8px -8px -3px}
}

.pt-ponto-fuso{font-weight:400;opacity:.7;font-size:.86em}   /* o fuso no card do ponto do trajeto: à direita da hora, sem competir com ela */
/* TELINHA "ABRINDO A VIAGEM" (Pontualidade, Alan, 24/09/2026): borra o CONTEÚDO da tela e fica centralizada nele — o pai é o .app-main
   (ao lado da barra lateral; o top vem do JS, abaixo do topo); a entrada só começa depois de 160 ms, então a abertura rápida nunca chega a
   mostrá-la. BLOQUEIA o que está embaixo (Alan, 01/10/2026: "tudo o que estiver por baixo do blur fica bloqueado... eu via os cards por cima do
   blur"): o mouse não passa — nem clique, nem rolagem, nem o balão de ajuda abrindo NÍTIDO por cima do borrão (o balão de ajuda é z 950). O cabeçalho da
   tela e o menu lateral ficam fora (o Voltar segue valendo) */
.pt-carregando-viagem{position:absolute;inset:0;z-index:880;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:progress;background:color-mix(in srgb,var(--canvas) 38%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:ptCargaFundo .18s ease-out .16s both}
.pt-carregando-card{display:flex;align-items:center;gap:12px;padding:14px 20px 14px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);animation:ptCargaEntra .18s ease-out .16s both}
.pt-carregando-roda{flex:none;width:22px;height:22px;box-sizing:border-box;border-radius:50%;border:3px solid color-mix(in srgb,var(--brand) 22%,transparent);border-top-color:var(--brand);animation:fmGira .8s linear infinite}
.pt-carregando-card b{display:block;font-size:13.5px;font-weight:600}
.pt-carregando-card .pt-carregando-sub{display:block;margin-top:1px;font-size:11.5px;color:var(--muted)}
@keyframes ptCargaFundo{from{opacity:0}to{opacity:1}}
@keyframes ptCargaEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* POR QUE ESTA VIAGEM NÃO MEDE (25/09/2026): o carro escalado não bate com o horário da viagem; o vínculo é mantido e a tela diz o motivo */
.pt-sem-medicao-vaga:empty{display:none}
.pt-sem-medicao{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:var(--erro-bg);border-color:color-mix(in srgb,var(--erro) 40%,var(--cartao-borda))}
.pt-sem-medicao>.icon{flex:none;width:20px;height:20px;color:var(--erro);margin-top:1px}
.pt-sem-medicao b{color:var(--erro)}
.pt-sem-medicao p{margin:4px 0 0;line-height:1.45;overflow-wrap:anywhere}
.pt-sem-medicao p.muted{font-size:12px}
/* A TROCA DE VEÍCULO SUGERIDA (04/11/2026): o vínculo foi mantido; o sistema viu outro veículo assumir a viagem e pergunta se a pessoa aplica a troca ou mantém */
.pt-troca-vaga:empty{display:none}
.pt-troca-sugerida{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:var(--alerta-fundo);border-color:color-mix(in srgb,var(--alerta) 45%,var(--cartao-borda))}
.pt-troca-sugerida>.icon{flex:none;width:20px;height:20px;color:var(--alerta);margin-top:1px}
.pt-troca-sugerida b{color:var(--alerta)}
.pt-troca-sugerida p{margin:4px 0 0;line-height:1.45;overflow-wrap:anywhere}
.pt-troca-sugerida p.muted{font-size:12px}
.pt-troca-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pt-troca-acoes .panel-btn{margin-top:0;height:32px;padding:0 12px;font-size:12.5px}
.pt-troca-aviso{margin:8px 0 0;font-size:12px;color:var(--erro)}
.pt-troca-aviso[hidden]{display:none}

/* ══ CELULAR EM PÉ E DEITADO · CORREÇÕES GLOBAIS (28/09/2026) ═══════════════════════════════════════════════════════════════════════════════
   Alan: "tem que funcionar bem o mobile, tanto em pé quanto deitado... pra enquadrar bem e eu poder usar o máximo possível do sistema". As
   vistorias em 375×812, 740×360 e 844×390 acharam os mesmos defeitos em várias telas; aqui ficam as correções que valem para todas de uma vez.
   O computador (1366×768 para cima) não entra em nenhuma regra daqui: são todas de largura ≤ 900, de toque ou de "deitado com pouca altura".
   Fica ANTES dos blocos das telas novas (Conferências, Correções, Alocações): as regras que precisam vencer as deles levam #telaConteudo. */

/* A ALTURA ÚTIL: a tela menos o cabeçalho e a barra do menu. Nenhuma área com rolagem própria pode passar dela (o dedo ficava preso dentro) */
:root{--cab-h:56px;--nav-h:0px;--h-util:calc(100dvh - var(--cab-h) - var(--nav-h))}
@media (max-width:900px){:root{--nav-h:calc(60px + var(--snav-baixo))}}
@media (max-width:760px){.lateral.filtros-abertos{max-height:72dvh}}

/* CALENDÁRIO DE UM DIA (.dp-panel) sem espaço embaixo abre para cima (dpCaberNaTela mede pela área útil) */
.dp-panel.dp-panel-cima{top:auto;bottom:calc(100% + 4px)}

/* O PREFIXO NUNCA É CORTADO: o 1º indicador do Histórico de cercas é o veículo ("4014-000…" com 140 px de texto em 113) */
/* OS NÚMEROS DA TELA HISTÓRICO DO VEÍCULO (28/09/2026), em cima dos filtros: o veículo (com o período embaixo) mais largo e os outros quatro iguais; o ícone antes do título,
   o título acima do número (.pt-kpis-dia). No celular em pé o veículo ocupa a linha dele e os outros quatro ficam 2 × 2 */
/* NADA CORTA (revisão de 28/09/2026): em 901-950 px com o menu aberto o cartão do veículo tinha 100-110 px e mostrava "4014-00071…", o "1.234 km" cortava em 901 e
   a linha de baixo ("12 leituras re…") cortava sem balão próprio. Agora cada coluna tem NO MÍNIMO o que o conteúdo pede (min-content: o número inteiro, o título e a
   linha de baixo quebrando por palavra) e só a sobra é dividida; o prefixo nunca corta (a trava do Histórico de cercas, acima). Quando a faixa fica estreita demais para
   os cinco numa linha (o contêiner abaixo de 700 px: 901-1006 px com o menu aberto), o veículo ganha a linha dele e os outros quatro ficam embaixo */
#htKpis{container-type:inline-size;container-name:htkpis}
.pt-kpis.ht-kpis-periodo{grid-template-columns:minmax(min-content,1.5fr) repeat(4,minmax(min-content,1fr))}
.pt-kpis.ht-kpis-periodo .ht-kpi-veiculo > b{overflow:visible;text-overflow:clip}
.pt-kpis.ht-kpis-periodo .pt-kpi-linha2{white-space:normal;overflow-wrap:break-word}
.pt-kpis.ht-kpis-periodo .pt-kpi > .pt-kpi-rot{white-space:normal;line-height:1.25}
/* "06:10 → 11:00" no cartão estreito quebra depois da seta (o app.js põe um espaço fixo antes dela), em vez de cortar uma hora */
.pt-kpis.ht-kpis-periodo .ht-kpi-faixa > b{white-space:normal}
@media (max-width:1100px){.pt-kpis.ht-kpis-periodo{grid-template-columns:minmax(min-content,1.3fr) repeat(4,minmax(min-content,1fr))}}
@container htkpis (max-width:699px){.pt-kpis.ht-kpis-periodo{grid-template-columns:repeat(4,minmax(min-content,1fr))}.pt-kpis.ht-kpis-periodo .ht-kpi-veiculo{grid-column:1/-1}}
@media (max-width:760px){.pt-kpis.ht-kpis-periodo{grid-template-columns:repeat(2,minmax(min-content,1fr))}.pt-kpis.ht-kpis-periodo .pt-kpi:first-child{grid-column:1/-1}}
/* os gráficos do Desempenho numa coluna até 900 px (o "Viagens atrasadas por dia" tem 30 colunas e rola dentro do próprio cartão) */
@media (max-width:900px){#dsGraficos .an-grid{grid-template-columns:minmax(0,1fr)}}

/* EM PÉ (até 760 px): o CALENDÁRIO DE PERÍODO vira uma folha presa embaixo, logo ACIMA da barra do menu, na largura da tela (ele media 544 px,
   começava em −198 e o rodapé ficava atrás da barra); um mês só (campoPeriodo), rolando por dentro se faltar altura */
@media (max-width:760px){
  .pd-panel,.pd-panel.pd-panel-dir{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:auto;bottom:calc(var(--nav-h) + 8px);
    width:auto;max-height:calc(100dvh - var(--nav-h) - 16px);overflow-y:auto;overscroll-behavior:contain;transform:none;z-index:885}
  .pd-panel .pd-meses{justify-content:center}
  .pd-panel .pd-mes{width:100%;max-width:360px}
  .pd-panel .pd-semana,.pd-panel .pd-grade{grid-template-columns:repeat(7,minmax(0,1fr))}
  .pd-panel .pd-cel{width:auto}
  .pd-panel .pd-dia{width:100%}
}

/* FONTE MÍNIMA DE 10 PX no celular (rótulos, selos e setas de 9 e 9,5 px) */
@media (max-width:900px),(pointer:coarse),(orientation:landscape) and (max-height:520px){
  .snav-beta,.mapbar-btn .dp-seta,.insp-stat span,.pt-balao small,.topo-beta,.pt-tipo,.doc-grupo,.doc-secao-grupo,.pt-ficha-rot,.pt-kpi-rot,.aud-selo,#telaConteudo .cf-voce,#telaConteudo .cr-novo,body .ac-mg-dica,body .ac-selo-voce,body .ac-selo-mais,body .ac-escopo,.pt-kpis-viagem .pt-kpi-rot,#ptLista td[data-rotulo]::before{font-size:10px}
}

/* ALVOS DE TOQUE DE PELO MENOS 36 PX. Dentro de tabela e de faixa de indicadores a ÁREA cresce por um ::after invisível, sem engordar a linha */
@media (pointer:coarse){
  .pt-info-btn,.pt-kpi-ico,.th-ordenar,a.ds-link,.drawer-link,.fm-rel-seta{position:relative}
  .pt-info-btn::after{content:"";position:absolute;inset:-6px}
  .topo-tema::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
  .pt-kpi-ico::after{content:"";position:absolute;inset:-4px}
  .th-ordenar::after{content:"";position:absolute;inset:-4px -2px}
  a.ds-link::after{content:"";position:absolute;inset:-10px -4px}
  .drawer-link{min-height:36px}
  .fm-rel-seta{height:36px}
  .fm-chip{min-height:36px}
  .veic-row,.an-linha.clicavel,.topo-menu-senha,.topo-menu-sair{min-height:36px}
  .doc-link{padding:9px 6px}
  button.chip{min-height:32px}
  input[type=color]{min-height:36px}
  label:has(> .ac-check){padding:6px}
  .pt-aloc-box .pt-chips .pt-chip{height:36px}
  .leaflet-touch .leaflet-bar a{width:36px;height:36px;line-height:36px}
}

/* ══ DEITADO (celular com pouca altura: 740×360, 844×390, 932×430) ════════════════════════════════════════════════════════════════════════
   Um ponto de corte só, SEM limite de largura (o Pro Max deitado também entra; antes ele caía no menu lateral largo do computador). A mesma
   expressão está no app.js (PAISAGEM_BAIXA). Decisão do Alan em 28/09/2026: deitado, a barra do menu vira um TRILHO VERTICAL à esquerda com os
   mesmos 5 itens (4 atalhos + Menu) — +60 px de altura em todas as telas; em pé continua a barra de baixo. */
@media (orientation:landscape) and (max-height:520px){
  /* 72 px: o rótulo mais longo ("Pontualidade", 63 px em 10 px) cabe inteiro, sem reticências */
  /* o vão do avatar conta a partir da borda da tela: 80 px (tema + avatar + folgas) + a margem do canto, a mesma do .topo-usuario (92 px sem entalhe) */
  :root{--trilho-w:72px;--cab-h:44px;--nav-h:0px;--snav-baixo:0px;--topo-usuario-vao:calc(80px + max(12px,env(safe-area-inset-right)))}
  /* O ENTALHE DE UM LADO SÓ (revisão de 28/09/2026): o iPhone deitado informa o entalhe nos dois lados (47/47, 59/59), mas o recorte fica só
     no alto do aparelho. marcarLadoDoEntalhe (app.js) põe data-entalhe no <html> pelo giro: o lado SEM recorte deixa de reservar espaço no
     conteúdo e no trilho (antes: 47-59 px vazios à direita de todas as telas com o entalhe à esquerda). O avatar e o tema seguem com o valor
     inteiro (o canto arredondado os cortaria). Sem data-entalhe vale o que o navegador informa. */
  :root{--entalhe-esq:env(safe-area-inset-left);--entalhe-dir:env(safe-area-inset-right)}
  html[data-entalhe="esq"]{--entalhe-dir:0px}
  html[data-entalhe="dir"]{--entalhe-esq:0px}
  /* o trilho absorve a margem do entalhe da esquerda (a .app deixava uma faixa vazia antes dele).
     SEM VÃO À DIREITA (28/09/2026): a .app também não reserva o entalhe da direita. Antes ele entrava DUAS vezes — no padding da .app e no
     max(12px, entalhe) de cada tela — e no iPhone deitado (entalhe de 47-59 px) sobrava uma faixa vazia de 94-118 px à direita de todas as
     telas. Agora cada tela desconta o entalhe uma vez só, no próprio padding (max(12px, entalhe)), e o avatar fica alinhado ao conteúdo. */
  .app{flex-direction:row;padding-left:0;padding-right:0}
  .app-main{order:1}
  .app .snav{order:0;position:sticky;top:0;bottom:auto;z-index:60;flex:none;display:flex;flex-direction:column;align-items:stretch;width:calc(var(--trilho-w) + var(--entalhe-esq));
    height:100dvh;padding:max(4px,env(safe-area-inset-top)) 0 max(4px,env(safe-area-inset-bottom)) var(--entalhe-esq);background:var(--surface);background-image:var(--topo-fundo);
    border-top:0;border-right:1px solid var(--topo-borda);box-shadow:8px 0 18px rgba(20,24,30,.06);transition:none}
  html.dark .app .snav{box-shadow:10px 0 24px rgba(3,8,16,.28)}
  .app.menu-aberto .snav{z-index:895}
  .app .snav-marca,.app .snav-rodape{display:none}
  .app .snav-barra{display:flex;flex:1;min-height:0;flex-direction:column;align-items:stretch;gap:2px;padding:0 3px}
  .app .snav-barra .snav-item{flex:1 1 0;max-height:64px;min-height:44px;width:auto;margin:0;flex-direction:column;justify-content:center;gap:3px;padding:4px 0;
    font-size:10px;line-height:1.15;font-weight:600;letter-spacing:-.01em;text-align:center}
  .app .snav-barra .snav-item .icon{width:22px;height:22px}
  .app .snav-barra .snav-rotulo{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app .snav-barra .snav-mais{margin-top:auto}
  .app .snav-barra .snav-item.ativa::before{left:0;right:auto;top:22%;bottom:22%;width:3px;height:auto;border-radius:0 var(--r-full) var(--r-full) 0}
  .app .snav-mais[data-mix="warn"]::after,.app .snav-mais[data-mix="blocked"]::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;
    background:#d99514;box-shadow:0 0 0 2px var(--surface)}
  .app .snav-mais[data-mix="blocked"]::after{background:var(--brand)}
  .app .snav-mais.snav-tem-conta .snav-mais-conta{display:block;position:absolute;top:6px;right:calc(50% + 8px);left:auto;bottom:auto;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
  .app.menu-aberto .snav-mais{color:var(--sidebar-acento-texto);background:var(--sidebar-acento)}
  /* a GAVETA abre colada ao trilho, na altura toda, rolando por dentro (só o grupo da tela atual vem aberto: snavArrumarGaveta) */
  .app .snav-corpo{display:none}
  .app.menu-aberto .snav-fundo{display:block;position:fixed;top:0;bottom:0;right:0;left:calc(var(--trilho-w) + var(--entalhe-esq));z-index:61;
    background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .app.menu-aberto .snav-corpo{display:block;position:fixed;top:0;bottom:0;left:calc(var(--trilho-w) + var(--entalhe-esq));right:auto;z-index:62;width:min(340px,calc(100vw - var(--trilho-w) - 48px));
    max-height:none;overflow-y:auto;overscroll-behavior:contain;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
    background:var(--sidebar);background-image:var(--sidebar-fundo);border-top:0;border-right:1px solid var(--sidebar-borda);border-radius:0 var(--r-xl) var(--r-xl) 0;
    box-shadow:18px 0 38px rgba(15,23,42,.18);animation:snavLado 220ms cubic-bezier(.23,1,.32,1)}
  .app.menu-aberto .snav-corpo .snav-item{min-height:44px}

  /* CABEÇALHO COMPACTO (~44 px): só o título; a frase de apoio sai; o avatar e o tema ficam no canto com o lugar reservado (padding-right) */
  .topo-usuario{top:calc(4px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
  .topo-avatar{width:36px;height:36px}
  .topo-tema{top:2px}
  .cab{min-height:var(--cab-h);padding:4px var(--topo-usuario-vao) 4px 16px;flex-wrap:nowrap}
  .cab-titulo h1{font-size:16px;line-height:24px}
  .cab > .cab-titulo p{display:none}
  .tela-pagina{padding:0 max(12px,var(--entalhe-dir)) 16px 12px}
  .tela-pagina[data-fim="cartao"]{padding-bottom:calc(16px - var(--pag-entre-cartoes))}
  .pagina-cab{min-height:var(--cab-h);margin:0 calc(-1 * max(12px,var(--entalhe-dir))) 10px -12px;padding:4px var(--topo-usuario-vao) 4px 12px;row-gap:4px}
  .pagina-cab h1{font-size:16px;line-height:24px}
  .pagina-cab .cab-titulo > p:not(#audSub):not(#prmSub){display:none}
  .pagina-cab:has(> .cab-titulo){padding-top:4px;padding-bottom:4px}
  .cab-titulo-linha{height:24px}
  /* Alocações, Ajustes e Correções: o cabeçalho também gruda (o avatar cobria a busca ao rolar), numa linha, com os botões de 32 px */
  #telaConteudo .cf-pagina .pagina-cab,#telaConteudo .cr-pagina .pagina-cab{position:sticky;top:0}
  #telaConteudo .cf-pagina .pagina-cab{flex-wrap:nowrap}
  #telaConteudo .cr-cab-acoes .panel-btn{height:32px;min-height:32px}

  /* FILTROS RECOLHIDOS atrás do cabeçalho "Filtros" também deitado (filtrosRecolhiveis): em 844 eles vinham abertos com 271 px. Abertos, em grade */
  .cartao-consulta.filtros-recolhiveis{flex-direction:column;align-items:stretch;gap:10px}
  .filtros-recolhiveis > .filtros-cab{display:flex}
  .filtros-recolhiveis > .campo-grupo{flex:none}
  .filtros-recolhiveis.filtros-tudo:not(.filtros-abertos) > .campo-grupo,.filtros-recolhiveis:not(.filtros-abertos) .filtro-extra{display:none}
  .filtros-recolhiveis .campo-grupo .campo{flex:1 1 180px;min-width:0}
  .filtros-recolhiveis .campo-grupo .campo-periodo{flex:1 1 200px}

  /* INDICADORES NUMA LINHA SÓ, título acima do número (a faixa ia de 136-160 px para uns 64) */
  #telaConteudo .pt-kpis:not(.pt-kpis-viagem){grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  #telaConteudo .pt-kpis:not(.pt-kpis-viagem) .pt-kpi{padding:7px 10px;grid-column:auto}
  #telaConteudo .pt-kpis-dia .pt-kpi b{font-size:18px}
  #telaConteudo .pt-kpis .pt-kpi > span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
  #telaConteudo .pt-kpis.ht-kpis-periodo{grid-template-columns:minmax(min-content,1.4fr) repeat(4,minmax(min-content,1fr))}
  #telaConteudo .pt-kpis.pt-kpis-viagem,#telaConteudo .pt-kpis.pt-kpis-viagem.sem-motorista{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:none}
  #telaConteudo .pt-kpis.pt-kpis-viagem .pt-kpi{grid-area:auto}
  body .ac-kpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .kpis-topo .kpi-topo{flex:1 0 auto}

  /* ÁREAS COM ROLAGEM PRÓPRIA NUNCA MAIORES QUE A ALTURA ÚTIL */
  .esc-rol,.ds-rol,.pt-lista{max-height:max(180px,calc(var(--h-util) - 16px))}
  .int-escala{max-height:calc(var(--h-util) - 16px)}
  .doc-indice{max-height:calc(var(--h-util) - 16px)}
  #ptMiniMapa,#htMapa{height:calc(var(--h-util) - 16px)}
  .ht-rol-tela{max-height:max(180px,calc(var(--h-util) - 16px))}

  /* MAPA DA FROTA E CERCAS LADO A LADO também até 760 px (a lateral de 34vh dava 122 px e a lista ficava com 8): lista à esquerda, rolando */
  .corpo{flex-direction:row}
  .lateral,.lateral.filtros-abertos{order:0;flex:none;width:clamp(240px,36vw,300px);max-height:none;border-top:0;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
  .mapa-coluna,.mapa-area{order:1;flex:1;min-width:0;min-height:0}
  #fmLista,#cercaLista{flex:1 1 0;min-height:120px}
  /* o inspetor do veículo vira uma faixa à direita (fleetAreaCoberta desconta a largura dela); aberto, a lista sai de cena e o mapa ganha a largura */
  .drawer{top:0;bottom:0;left:auto;right:0;width:var(--fm-gaveta-w);max-height:none;border-top:0;border-left:1px solid var(--line);border-radius:0;transform:translateX(105%);box-shadow:var(--shadow)}
  .drawer.aberta{transform:none}
  .corpo.gaveta-aberta .lateral{display:none}
  .corpo.gaveta-aberta.gaveta-recolhida .drawer.aberta{transform:translateX(105%);box-shadow:none}   /* (deitado a faixa sai pela direita) */
  /* ENTALHE DA DIREITA NO MAPA E NAS CERCAS (28/09/2026): a .app não reserva mais o entalhe, então o MAPA vai até a borda da tela (sem faixa
     vazia); só o que se lê ou toca desconta o entalhe: os indicadores, os botões do mapa, os controles do Leaflet e o inspetor (--entalhe-dir:
     zero quando o recorte está à esquerda) */
  .kpis-topo{padding-right:var(--entalhe-dir)}
  .mapa-area .mapbar{right:max(10px,var(--entalhe-dir))}
  .mapa-area .leaflet-right{right:var(--entalhe-dir)}
  /* a faixa de status (embaixo, à esquerda) passava da borda no 932 (496 px numa área de 501): quebra em duas linhas antes do entalhe */
  .mapa-area .map-status{max-width:calc(100% - 20px - var(--entalhe-dir));flex-wrap:wrap;column-gap:10px;row-gap:2px}
  /* a faixa do inspetor soma o entalhe (o conteúdo fica fora dele: padding); a largura fica na variável que a barra do mapa, a atribuição e o status também leem */
  .mapa-area{--fm-gaveta-w:calc(min(360px,48vw) + var(--entalhe-dir))}
  .drawer{padding-right:var(--entalhe-dir)}

  /* CALENDÁRIOS: folha fixa no meio da tela, acima de tudo da página; o de período põe os atalhos e o Aplicar numa coluna à direita dos meses */
  .pd-panel,.pd-panel.pd-panel-dir,.dp-panel,.dp-panel.dp-panel-dir,.dp-panel.dp-panel-cima{position:fixed;top:max(8px,env(safe-area-inset-top));bottom:auto;
    left:calc(50% + var(--trilho-w) / 2);right:auto;transform:translateX(-50%);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;z-index:892}
  .pd-panel,.pd-panel.pd-panel-dir{display:grid;grid-template-columns:auto 132px;column-gap:12px;align-items:start;width:max-content;max-width:calc(100vw - var(--trilho-w) - 16px)}
  .pd-panel .pd-meses{flex-direction:row}
  .pd-panel .pd-mes{width:224px;max-width:none}
  .pd-panel .pd-mes-cab{height:32px;padding:0 36px}
  .pd-panel .pd-semana,.pd-panel .pd-grade{grid-template-columns:repeat(7,32px)}
  .pd-panel .pd-grade{row-gap:2px}
  .pd-panel .pd-cel,.pd-panel .pd-dia{width:32px;height:32px}
  .pd-panel .pd-nav{width:32px;height:32px}
  .pd-panel .pd-rodape{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:4px 0 0}
  .pd-panel .pd-atalhos{flex-direction:column;flex:none;gap:6px}
  .pd-panel .pd-acoes{flex-direction:column-reverse;align-items:stretch;margin:0;gap:6px}
  .pd-panel .pd-acao{height:34px;min-height:34px;flex:none}
  .pd-panel .pd-aviso{order:0;text-align:left}

  /* LISTAS SUSPENSAS (csMontar) viram uma folha na altura toda, do lado oposto ao campo (csLigarAbertura), com opções de 36 px */
  .cs-panel,.cs-panel.cs-panel-dir,.cs-panel.cs-panel-cima{position:fixed;top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));left:auto;
    width:min(420px,calc(50vw - 16px));min-width:0;max-width:none;max-height:none;z-index:892}
  .cs-panel.cs-folha-esq{left:calc(var(--trilho-w) + var(--entalhe-esq) + 8px);right:auto}
  .cs-op{min-height:36px;padding:7px 12px}
  .cs-rodape{padding:4px 8px}
  .cs-acao{height:32px}
  /* dentro de janela a lista segue colada ao campo (a do destino da correção fica no fluxo, pela regra dela mais abaixo) */
  .diag-box .cs-panel{position:absolute;top:calc(100% + 4px);bottom:auto;left:0;right:auto;width:max-content;max-width:min(420px,calc(100vw - 48px));max-height:240px}

  /* JANELAS USAM A TELA: alocar veículo/motorista em duas colunas (busca, recortes e contagem à esquerda; a lista à direita, rolando sozinha) */
  .diag-overlay.pt-aloc-ov{padding:8px}
  .diag-box.pt-aloc-box{width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px)}
  .diag-head.pt-aloc-cab{padding:8px 16px}
  .pt-aloc-corpo{display:grid;grid-template-columns:minmax(240px,38%) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);column-gap:16px;align-content:start;
    overflow-y:auto;padding:10px 16px 0}
  .pt-aloc-escolha{display:contents}
  .pt-aloc-corpo > *,.pt-aloc-escolha > *{grid-column:1}
  .pt-aloc-lista{grid-column:2;grid-row:1/-1;height:auto;min-height:0;margin-bottom:10px}
  .pt-aloc-conflito,.pt-aloc-trecho{grid-column:1/-1}
  /* o passo 1 (a pergunta) no mesmo molde: título, alcance e dica à esquerda; as localidades à direita, na altura da caixa */
  .pt-aloc-corpo > .pt-aloc-trecho{display:grid;grid-template-columns:minmax(240px,38%) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:10px;align-content:start;padding-bottom:10px}
  .pt-aloc-corpo > .pt-aloc-trecho > *{grid-column:1}
  .pt-aloc-corpo > .pt-aloc-trecho .pt-aloc-trecho-lista{grid-column:2;grid-row:1/-1;max-height:calc(100dvh - 140px)}
  /* as duas respostas cabem inteiras na coluna (a faixa que rola das listas cortava "a partir de uma localidade") */
  .pt-aloc-corpo > .pt-aloc-trecho .pt-chips{flex-wrap:wrap;overflow:visible;margin-bottom:0}
  .pt-aloc-box .pt-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
  .pt-aloc-acoes{padding:8px 16px}
  /* Usuários/Perfis (janela grande): sem a frase de apoio, cabeçalho e rodapé baixos — o corpo sobe de 183 para uns 240 px */
  body .ac-modal-fundo{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
  .ac-modal-fundo .ac-modal.ac-modal-grande{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .ac-modal-fundo .ac-mg-cab .ac-modal-desc{display:none}
  .ac-modal-fundo .ac-mg-cab{padding:10px 44px 10px 16px}
  .ac-modal-fundo .ac-mg-corpo{padding:12px 16px;gap:12px}
  .ac-modal-fundo .ac-mg-rodape{padding:8px 16px}
  .diag-box{max-height:calc(100dvh - 16px)}
  .diag-overlay{padding-top:8px;padding-bottom:8px}
}
@keyframes snavLado{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* ══ CELULAR EM PÉ E DEITADO · TELA A TELA (28/09/2026, 3ª etapa) ════════════════════════════════════════════════════════════════════════════
   O que sobrou das vistorias depois das correções globais (acima) e da Pontualidade: cada tela no seu bloco. Também fica ANTES das telas novas
   (os testes de tokens leem do marcador das Conferências até o fim); o que precisa vencer as regras delas leva #telaConteudo. */

/* ── ALOCAÇÕES DA FROTA ── em pé e deitado a tabela (8 colunas, 1.271 px de largura e 11.700 de altura dentro de 317) vira CARTÕES, como na
   Pontualidade e na Escala: o veículo (prefixo que nunca corta) e o estado na manchete, a alocação em largura toda, e os campos em pares com o
   título em cima (data-rotulo). NENHUMA coluna some (antes, até 600 px, Estado, Último motorista e Onde sumiam). A ordem vai pelo "Ordenar" de
   um botão só. Deitado, os cartões em duas colunas. O cabeçalho encolhe: a conferência da MiX em letra pequena e o Atualizar só com o ícone (o
   balão e o aria-label dizem o nome). Vale também para Solicitações › Pendentes e › Concluídas (28/09/2026: a mesma .alo-pagina). */
@media (max-width:760px){
  /* o cabeçalho volta a grudar (estático, o avatar e o tema — que ficam presos no canto — passavam por cima do "Ordenar" e dos cartões ao rolar) */
  #telaConteudo .alo-pagina .pagina-cab{position:sticky;top:0;row-gap:2px}
  #telaConteudo .alo-pagina .cr-cab-acoes{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;margin:0}
  #telaConteudo .alo-pagina .cr-conferida{grid-column:1;font-size:11px;line-height:15px}
  #telaConteudo .alo-pagina .cr-conferida-txt{gap:4px}
  #telaConteudo .alo-pagina .cr-cab-acoes .alo-atualizar{grid-column:2;grid-row:1/span 2;width:36px;height:36px;padding:0;justify-content:center}
  #telaConteudo .alo-atualizar-txt{display:none}
}
@media (orientation:landscape) and (max-height:520px){
  /* numa linha só, sem quebrar: a conferência encolhe com reticências (o balão lê inteiro) e o Atualizar vira ícone */
  #telaConteudo .alo-pagina .pagina-cab{flex-wrap:nowrap}
  #telaConteudo .alo-pagina .cr-cab-acoes{flex:1 1 auto;min-width:0;flex-wrap:nowrap}
  #telaConteudo .alo-pagina .cr-conferida{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
  #telaConteudo .alo-pagina .cr-conferida-txt{display:inline;white-space:nowrap}
  #telaConteudo .alo-pagina .cr-conferida-txt .icon{vertical-align:-2px;margin-right:4px}
  #telaConteudo .alo-pagina .cr-cab-acoes .alo-atualizar{flex:none;width:32px;height:32px;padding:0;justify-content:center}
  #telaConteudo .alo-atualizar-txt{display:none}
  #aloOrdemCel{display:flex}
  /* pedidos (filtros recolhidos): Período e Buscar dividem a linha por igual */
  #telaConteudo .cr-filtros.filtros-recolhiveis:not(.filtros-abertos) .campo-periodo{flex:1 1 0;min-width:0}
}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  /* filtros recolhidos: o Limpar na linha da busca (ficava sozinho numa linha de 44 px) */
  #telaConteudo .cr-filtros.filtros-recolhiveis:not(.filtros-abertos) .cr-campo-busca{flex:1 1 0}
  #telaConteudo .alo-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  #telaConteudo .alo-chips .pt-chip,#telaConteudo .alo-chips .cr-chips-sep{flex:none}
  /* a lista: cartões que rolam com a página */
  #telaConteudo .alo-rol{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  #telaConteudo .alo-tabela,#telaConteudo .alo-tabela tbody{display:block;min-width:0;width:auto}
  #telaConteudo .alo-tabela thead{display:none}
  #telaConteudo .alo-tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:start;align-content:start;margin:0 0 8px;
    padding:10px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  #telaConteudo .alo-tabela tbody td{display:block;min-width:0;width:auto;padding:0;border:0;white-space:normal;background:none!important;box-shadow:none!important}
  #telaConteudo .alo-tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  #telaConteudo .alo-tabela .cr-aloc,#telaConteudo .alo-tabela .alo-nome,#telaConteudo .alo-tabela .alo-onde,#telaConteudo .alo-tabela .alo-pedido{max-width:none}
  #telaConteudo .alo-tabela .alo-selo{white-space:normal}
  /* veículos: manchete (prefixo | estado), alocação, a última posição (com o endereço) em largura toda, e o pedido (só quando há um aberto) | ação
     (a coluna "Motorista no carro agora" saiu — Alan, 28/09/2026) */
  #telaConteudo .alo-tabela-vei tbody tr{grid-template-areas:"veic estado" "aloc aloc" "pos pos" "ped acao"}
  #telaConteudo .alo-tabela td.alo-c-pedido:has(> span.muted:only-child){display:none}
  #telaConteudo .alo-tabela-vei .alo-c-veiculo{grid-area:veic;align-self:center}
  #telaConteudo .alo-tabela-vei .alo-c-veiculo .cf-prefixo{font-size:16px}
  #telaConteudo .alo-tabela-vei .alo-c-veiculo .cf-placa{font-size:12px}
  #telaConteudo .alo-tabela-vei .alo-c-estado{grid-area:estado;justify-self:end;align-self:center}
  #telaConteudo .alo-tabela-vei .alo-c-aloc{grid-area:aloc}
  #telaConteudo .alo-tabela-vei .alo-c-posicao{grid-area:pos}
  #telaConteudo .alo-tabela-vei .alo-c-pedido{grid-area:ped}
  #telaConteudo .alo-tabela .alo-c-acao{grid-area:acao;justify-self:end;align-self:end}
  /* motoristas (3 colunas): o nome e a alocação em largura toda, RH | ação, e o pedido só quando há um aberto (a coluna "Identificado agora" saiu —
     Alan, 28/09/2026) */
  #telaConteudo .alo-tabela-mot tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"nome nome nome" "aloc aloc aloc" "rh rh acao" "ped ped ped"}
  #telaConteudo .alo-tabela-mot .alo-c-motorista-nome{grid-area:nome}
  #telaConteudo .alo-tabela-mot .alo-c-motorista-nome .alo-nome{font-size:14px}
  #telaConteudo .alo-tabela-mot .alo-c-aloc{grid-area:aloc}
  #telaConteudo .alo-tabela-mot .alo-c-rh{grid-area:rh;align-self:end}
  #telaConteudo .alo-tabela-mot .alo-c-pedido{grid-area:ped}
  #telaConteudo .alo-tabela .alo-onde{white-space:normal;overflow-wrap:anywhere}
  #telaConteudo .alo-tabela .panel-btn.alo-pedir{height:36px}
  #telaConteudo .alo-tabela tbody tr:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
}
@media (orientation:landscape) and (max-height:520px){
  #telaConteudo .alo-tabela tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #telaConteudo .alo-tabela tbody tr{margin:0}
}

/* ── FILTROS RECOLHÍVEIS ── o grupo de campos media a própria altura como se os campos quebrassem em 2 linhas (o Chrome calcula a altura do
   grupo que quebra, dentro do cartão em coluna, antes de saber a largura): na Escala deitada sobravam 63 px vazios entre "Filtros" e os campos
   (118 px para 55 de campos). Com a largura dita, a altura sai certa */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .filtros-recolhiveis > .campo-grupo{width:100%}
}

/* ── ESCALA DO DIA ── deitado, os cartões (bloco da Escala acima) ficavam numa caixa de 300 px que rolava por dentro da página (740), e em 844
   e 932 era a tabela de 1.303 px numa caixa de 699: agora são cartões que rolam com a página, em duas colunas, como a Pontualidade, e a ordem
   vai pelo "Ordenar". Em pé, o 5º indicador ("Escaladas à mão") não fica sozinho em meia largura. A barra
   do Aplicar, deitado, fica rente ao pé da tela e ao lado do trilho do menu (ela contava com a barra de baixo, que deitado não existe) */
@media (orientation:landscape) and (max-height:520px){
  .esc-rol{max-height:none;overflow:visible}
  #escOrdemCel{display:flex}
  .esc-grade tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .esc-grade tbody tr{margin:0;align-content:start;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto}
  /* Carro e Motorista lado a lado (o cartão cai de 227 para uns 165 px) */
  .esc-grade td.esc-c-linha{grid-column:2/-1}
  .esc-grade td.esc-c-sit{grid-column:4}
  .esc-grade td.pt-servico{grid-column:1/4}
  .esc-grade td.esc-c-campo{grid-column:1/3;grid-row:3}
  .esc-grade td.esc-c-campo + td.esc-c-campo{grid-column:3/-1}
  .esc-aplicar:not([hidden]){left:calc(var(--trilho-w) + var(--entalhe-esq) + 12px);right:max(12px,var(--entalhe-dir));bottom:8px}
  .tela-pagina:has(.esc-aplicar:not([hidden])){padding-bottom:64px}
}
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #escConteudo .pt-kpis-dia .pt-kpi:last-child:nth-child(odd){grid-column:1/-1}
}

/* ── PAINEL DA AGÊNCIA ── deitado o palco ficava numa coluna só (regra até 1.100 px): mapa de 300 px, o cartão em y≈560 e a fila em y≈700 —
   três telas de rolagem. Agora cabe na altura útil: a marca da agência em cima, o MAPA à esquerda (58%) e o cartão da viagem com a fila à
   direita, cada um rolando por dentro. Em TELA CHEIA o mesmo desenho na tela inteira, com as letras do modo TV (58-68 px, pensadas para a
   televisão da agência) trazidas ao tamanho do celular: o "ÔNIBUS 7415" e o "TEMPO RESTANTE" saíam cortados (o topo pedia 785 px) e o nome
   da agência ficava embaixo do botão "Sair da tela cheia" (agora com o lugar dele reservado). */
@media (orientation:landscape) and (max-height:520px){
  /* a linha do cartão cresce até o que ele precisa; a fila fica com o resto (no mínimo 96 px) */
  .pn-palco,.pn-tela.pn-cheio .pn-palco,.pn-tela:fullscreen .pn-palco{grid-template-columns:minmax(0,58fr) minmax(0,42fr);grid-template-rows:auto minmax(0,max-content) minmax(96px,1fr);
    height:calc(var(--h-util) - 16px);min-height:0;margin-top:10px}
  .pn-tela.pn-cheio .pn-palco,.pn-tela:fullscreen .pn-palco{height:100vh;height:100dvh;margin:0}
  .pn-tela.pn-cheio,.pn-tela:fullscreen{overflow:hidden}
  .pn-palco > .pn-marca{grid-column:1/-1;grid-row:1;min-width:0}
  .pn-palco > .pn-mapa{grid-column:1;grid-row:2/-1;height:auto;min-height:0}
  .pn-palco > .pn-cartao,.pn-tela.pn-cheio .pn-palco > .pn-cartao,.pn-tela:fullscreen .pn-palco > .pn-cartao{grid-column:2;grid-row:2;position:static;width:auto;max-width:none;
    min-height:0;margin:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 14px}
  .pn-palco > .pn-fila{grid-column:2;grid-row:3;max-height:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line);border-top:1px solid var(--line)}
  /* no cartão estreito (42%) a linha quebra entre as cidades (cada par inteiro) e os horários ficam 2 por linha (pediam 451 px em 242) */
  .pn-topo{flex-wrap:wrap;gap:4px 16px;min-width:0}
  .pn-campo-onibus{flex:none}
  .pn-palco .pn-linha-nome,.pn-palco .pn-par{white-space:normal}
  .pn-palco .pn-horas{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
  .pn-horas .pn-campo-rot{white-space:normal}
  /* tela cheia no celular deitado: as letras do modo TV no tamanho de fora da tela cheia */
  .pn-tela.pn-cheio .pn-linha,.pn-tela:fullscreen .pn-linha{font-size:18px;margin:2px 0 8px}
  .pn-tela.pn-cheio .pn-linha-nome,.pn-tela:fullscreen .pn-linha-nome{font-size:18px}
  .pn-tela.pn-cheio .pn-campo-rot,.pn-tela:fullscreen .pn-campo-rot,.pn-tela.pn-cheio .pn-hora-rot,.pn-tela:fullscreen .pn-hora-rot{font-size:11px}
  .pn-tela.pn-cheio .pn-campo-val,.pn-tela:fullscreen .pn-campo-val{font-size:17px}
  .pn-tela.pn-cheio .pn-campo-forte,.pn-tela:fullscreen .pn-campo-forte,.pn-tela.pn-cheio .pn-hval,.pn-tela:fullscreen .pn-hval{font-size:clamp(20px,5vh,26px)}
  .pn-tela.pn-cheio .pn-hora b,.pn-tela:fullscreen .pn-hora b{font-size:clamp(22px,6vh,30px)}
  .pn-tela.pn-cheio .pn-hora-falta,.pn-tela:fullscreen .pn-hora-falta,.pn-tela.pn-cheio .pn-campo-nota,.pn-tela:fullscreen .pn-campo-nota{font-size:13px}
  .pn-tela.pn-cheio .pn-chip,.pn-tela:fullscreen .pn-chip{font-size:14px;padding:2px 10px}
  .pn-tela.pn-cheio .pn-sem-previsao,.pn-tela:fullscreen .pn-sem-previsao{font-size:18px}
  .pn-tela.pn-cheio .pn-sit,.pn-tela:fullscreen .pn-sit{font-size:14px;margin-top:4px}
  .pn-tela.pn-cheio .pn-onde,.pn-tela:fullscreen .pn-onde,.pn-tela.pn-cheio .pn-rodape,.pn-tela:fullscreen .pn-rodape,.pn-tela.pn-cheio .pn-rodape-sit,.pn-tela:fullscreen .pn-rodape-sit{font-size:13px;margin-top:4px}
  .pn-tela.pn-cheio .pn-topo,.pn-tela:fullscreen .pn-topo{gap:4px 16px}
  .pn-tela.pn-cheio .pn-horas,.pn-tela:fullscreen .pn-horas{gap:4px 14px}
  .pn-tela.pn-cheio .pn-cartao,.pn-tela:fullscreen .pn-cartao{gap:6px 12px}
  .pn-tela.pn-cheio .pn-fila-item,.pn-tela:fullscreen .pn-fila-item{padding:8px 12px;grid-template-columns:58px 1fr}
  .pn-tela.pn-cheio .pn-fila-hora,.pn-tela:fullscreen .pn-fila-hora{font-size:18px}
  .pn-tela.pn-cheio .pn-fila-linha,.pn-tela:fullscreen .pn-fila-linha{font-size:13px}
  .pn-tela.pn-cheio .pn-fila-carro,.pn-tela:fullscreen .pn-fila-carro,.pn-tela.pn-cheio .pn-fila-sit,.pn-tela:fullscreen .pn-fila-sit,
  .pn-tela.pn-cheio .pn-fila-cab,.pn-tela:fullscreen .pn-fila-cab,.pn-tela.pn-cheio .pn-fila-fim,.pn-tela:fullscreen .pn-fila-fim{font-size:11.5px}
  .pn-tela.pn-cheio .pn-fila-cab,.pn-tela:fullscreen .pn-fila-cab{padding:8px 12px}
}
@media (orientation:landscape) and (max-height:520px) and (hover:none){
  .pn-tela.pn-cheio .pn-marca{padding-right:180px}
}
/* deitado, O CARTÃO CABE: em 740 ele mostrava 160 de 346 px (os horários cortados em y 248, o "Passou da hora" e a cidade escondidos, rolando por
   dentro sem sinal no toque) — justamente a resposta do painel. Rótulos em cima, a linha em 16 px com até 2 linhas e o ônibus ao lado, os três
   horários numa linha (programada | prevista | restante) e o rodapé em letra de leitura: uns 180 px. A fila fica com o resto (no mínimo 72 px),
   com cabeçalho e itens mais baixos. Os filtros numa linha só (eram 148 px, 188 de rolagem até o palco) */
@media (orientation:landscape) and (max-height:520px){
  .pn-palco,.pn-tela.pn-cheio .pn-palco,.pn-tela:fullscreen .pn-palco{grid-template-rows:auto minmax(0,max-content) minmax(72px,1fr)}
  .pn-palco > .pn-cartao,.pn-tela.pn-cheio .pn-palco > .pn-cartao,.pn-tela:fullscreen .pn-palco > .pn-cartao{gap:6px;padding:10px 12px}
  .pn-palco .pn-topo,.pn-tela.pn-cheio .pn-palco .pn-topo,.pn-tela:fullscreen .pn-palco .pn-topo{flex-wrap:nowrap;align-items:flex-start;gap:0 12px}
  .pn-palco .pn-campo{grid-template-columns:minmax(0,1fr);row-gap:1px}
  .pn-palco .pn-campo-rot,.pn-tela.pn-cheio .pn-palco .pn-campo-rot,.pn-tela:fullscreen .pn-palco .pn-campo-rot{font-size:10px;line-height:13px;letter-spacing:.06em}
  .pn-palco .pn-campo-val,.pn-tela.pn-cheio .pn-palco .pn-campo-val,.pn-tela:fullscreen .pn-palco .pn-campo-val{font-size:16px;line-height:1.2}
  .pn-palco .pn-linha-nome,.pn-tela.pn-cheio .pn-palco .pn-linha-nome,.pn-tela:fullscreen .pn-palco .pn-linha-nome{font-size:16px;line-height:1.15;
    white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pn-palco .pn-horas,.pn-tela.pn-cheio .pn-palco .pn-horas,.pn-tela:fullscreen .pn-palco .pn-horas{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px}
  .pn-palco .pn-hval,.pn-tela.pn-cheio .pn-palco .pn-hval,.pn-tela:fullscreen .pn-palco .pn-hval,
  .pn-tela.pn-cheio .pn-palco .pn-campo-forte,.pn-tela:fullscreen .pn-palco .pn-campo-forte{font-size:clamp(18px,5vh,22px);line-height:1.1}
  .pn-palco .pn-base{flex-wrap:wrap;row-gap:2px}
  .pn-palco .pn-base .pn-rodape,.pn-tela.pn-cheio .pn-palco .pn-rodape,.pn-tela:fullscreen .pn-palco .pn-rodape{flex:1 1 100%;margin-top:0;font-size:12px;line-height:1.3}
  .pn-palco .pn-rodape-sit,.pn-tela.pn-cheio .pn-palco .pn-rodape-sit,.pn-tela:fullscreen .pn-palco .pn-rodape-sit{font-size:12px;margin-top:0}
  .pn-palco .pn-fila-cab,.pn-tela.pn-cheio .pn-palco .pn-fila-cab,.pn-tela:fullscreen .pn-palco .pn-fila-cab{padding:6px 12px}
  .pn-palco .pn-fila-item,.pn-tela.pn-cheio .pn-palco .pn-fila-item,.pn-tela:fullscreen .pn-palco .pn-fila-item{padding:6px 12px;gap:1px 10px;grid-template-columns:52px 1fr}
  .pn-palco .pn-fila-hora,.pn-tela.pn-cheio .pn-palco .pn-fila-hora,.pn-tela:fullscreen .pn-palco .pn-fila-hora{font-size:18px}
  /* filtros numa linha: Estado | Agência | Troca a cada | os botões, com a hora da resposta embaixo deles (o campo traz min-width no style) */
  #telaConteudo .pn-filtros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) auto;gap:0 10px;align-items:end;padding:8px 12px}
  #telaConteudo .pn-filtros > .campo{width:auto;min-width:0!important}
  #telaConteudo .pn-filtros > .pn-acoes{grid-column:4;grid-row:1;align-self:start}
  #telaConteudo .pn-filtros > .pn-atualizado{grid-column:4;grid-row:1;align-self:end;justify-self:end;margin:0;font-size:10.5px;line-height:13px}
}
/* a grade dos filtros (em pé e deitado) leva #telaConteudo e vencia o "display:none" da tela cheia: os filtros apareciam por cima do palco */
#telaConteudo .pn-tela.pn-cheio .pn-filtros,#telaConteudo .pn-tela:fullscreen .pn-filtros{display:none}
/* em pé: "Agência" e o nome numa linha própria, na largura toda, embaixo do logotipo ("ALTA F…" mostrava 87 de 210 px); nome longo quebra */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  .pn-palco > .pn-marca{flex-wrap:wrap;row-gap:4px}
  .pn-palco > .pn-marca .pn-marca-ag{flex:1 1 100%;margin-left:0}
  #pnMarcaAgencia{overflow:visible;white-space:normal;text-overflow:clip;font-size:clamp(15px,4.6vw,19px);line-height:1.2}
  /* os filtros em grade: Estado | Troca a cada, a Agência na largura toda, os botões e a hora da resposta embaixo (297 → ~220 px) */
  #telaConteudo .pn-filtros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;align-items:end}
  #telaConteudo .pn-filtros > .campo{width:auto;min-width:0}
  #telaConteudo .pn-filtros > .campo:nth-child(1){grid-column:1;grid-row:1}
  #telaConteudo .pn-filtros > .campo:nth-child(2){grid-column:1/-1;grid-row:2}
  #telaConteudo .pn-filtros > .campo:nth-child(3){grid-column:2;grid-row:1}
  #telaConteudo .pn-filtros > .pn-acoes{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
  #telaConteudo .pn-filtros > .pn-atualizado{grid-column:1/-1;justify-self:end;margin:-4px 0 0}
}
/* os horários do cartão alinham pelo número: "CHEGADA PROGRAMADA" em 2 linhas deixava o 23:25 18 px abaixo do 23:32 do lado */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .pn-horas .pn-hcol{justify-content:space-between}
}

/* ── DESEMPENHO ── (28/09/2026, a tela refeita) os gráficos, recolhidos no fim, seguem com o rótulo largo; os filtros em grade (em pé 2 colunas,
   deitado 3); os cinco cartões das causas em 2 colunas em pé (o último, ímpar, na linha toda) e numa linha só deitado (o auto-fit do bloco
   deitado das correções globais); os CASOS viram cartões (3 à vista em pé, 6 deitado em 2 colunas, e o "ver mais"); a JANELA de um caso ocupa a
   tela e as viagens viram cartões */
@media (max-width:900px),(orientation:landscape) and (max-height:520px){
  /* gráficos por linha numa coluna só: o rótulo de 110 px cortava "CUIABA (MT) X P…" quatro vezes seguidas (textos de 226-369 px) e a linha é
     clicável (no toque o balão não abre). Rótulo mais largo e o nome quebrando em até 2 linhas */
  #dsGraficos .an-rotulo{width:auto;flex:0 0 clamp(110px,40%,260px);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-height:1.25;overflow-wrap:anywhere}
}
/* em pé nem 40% basta (115 px: as 10 linhas cortavam): o nome vai numa linha própria, na largura toda (até 2 linhas), e a barra embaixo */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #dsGraficos .an-linha{flex-wrap:wrap;row-gap:3px;padding:4px 0}
  #dsGraficos .an-rotulo{flex:1 1 100%}
}
/* deitado, os cinco filtros em 3 colunas e o Limpar numa coluna própria à direita (eram 5 linhas, 271 px: o Período sozinho numa) */
@media (orientation:landscape) and (max-height:520px){
  #dsConteudo .cartao-consulta > .campo-grupo{display:grid;grid-template-columns:minmax(200px,1.2fr) repeat(2,minmax(0,1fr)) auto;gap:8px 10px;align-items:end}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo{min-width:0}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-acoes{grid-column:4;grid-row:1/3;align-self:end;margin:0}
}
/* em pé, 2 colunas (eram seis campos um embaixo do outro: 397 px, metade da tela antes do conteúdo): Período e Buscar na largura toda, Empresa |
   Classe, e a Linha com o Limpar na ponta da última linha (o Sentido saiu em 28/09/2026) */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #dsConteudo .cartao-consulta > .campo-grupo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:8px 10px;align-items:end}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo{min-width:0;width:auto}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-periodo,#dsConteudo .cartao-consulta > .campo-grupo > .campo:has(#dsBusca){grid-column:1/-1}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-empresa{grid-column:1}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-classe{grid-column:2}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-linha-f{grid-column:1/3}
  #dsConteudo .cartao-consulta > .campo-grupo > .campo-acoes{grid-column:3;grid-row:4;align-self:end;margin:0}
  /* os cinco cartões das causas: 2 colunas, o último (ímpar) na linha toda */
  #dsConteudo .pt-kpis.ds-causas{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dsConteudo .ds-causas .pt-kpi:last-child:nth-child(odd){grid-column:1/-1}
  /* os casos: 3 à vista e o "ver mais" */
  #dsCasos:not(.ds-tudo) .ds-casos tbody tr:nth-child(n+4){display:none}
}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  /* os casos: cartões que rolam com a página — o número e o caso em cima (o nome da linha e o horário nunca cortam: quebram), os campos em pares
     com o título em cima (data-rotulo) e a ação na largura toda */
  #dsCasos{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  #dsCasos .ds-casos,#dsCasos .ds-casos tbody{display:block;width:auto;min-width:0}
  #dsCasos .ds-casos thead{display:none}
  #dsCasos .ds-casos tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pos caso caso" ". causa atrasou" ". impacto conf" ". acao acao";
    gap:8px 10px;align-items:start;margin:0 0 8px;padding:10px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  #dsCasos .ds-casos tbody td{display:block;min-width:0;width:auto;padding:0;border:0;white-space:normal;text-align:left;background:none!important;box-shadow:none!important}
  #dsCasos .ds-casos td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  #dsCasos .ds-c-pos{grid-area:pos;padding-top:1px}
  #dsCasos .ds-c-caso{grid-area:caso}
  #dsCasos .ds-c-causa{grid-area:causa}
  #dsCasos .ds-c-atrasou{grid-area:atrasou}
  #dsCasos .ds-c-impacto{grid-area:impacto}
  #dsCasos .ds-c-conf{grid-area:conf}
  #dsCasos .ds-c-acao{grid-area:acao}
  .ds-casos-mais:not([hidden]){display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;margin:0;padding:0 12px;border:1px dashed var(--line);
    border-radius:var(--r-md);background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--brand);cursor:pointer}
  html.dark .ds-casos-mais{color:var(--destructive)}
  .ds-casos-resumo{display:none}
  /* a janela na tela toda; as tabelas dela em cartões (o dia e o ↗ em cima, os campos em pares). O ENTALHE (revisão de 28/09/2026): sem o padding
     do fundo, a margem segura das laterais (viewport-fit=cover) vai para o cabeçalho e o corpo — deitado, o × e o começo do título ficavam sob o
     recorte da câmera — e a barra de início ganha o espaço dela embaixo */
  .diag-overlay.ds-caso-ov{padding:0}
  .diag-box.ds-caso-box{width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0}
  .ds-caso-box .ds-caso-cab{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}
  .ds-caso-corpo{padding:8px max(14px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  /* o "Ordenar" de um botão só (o cabeçalho das tabelas some): a lista dos casos e as viagens da janela, em pé e deitado */
  #dsOrdemCel,#dsCasoOrdemCel{display:flex}
  #dsOrdemCel[hidden],#dsCasoOrdemCel[hidden]{display:none}
  #dsCasoOrdemCel{margin:8px 0 0}
  .ds-caso-rol,.ds-caso-rol-trechos{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  .ds-caso-tab,.ds-caso-tab tbody{display:block;width:auto;min-width:0}
  .ds-caso-tab thead{display:none}
  .ds-caso-tab tbody tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0 0 8px;padding:10px 12px;
    border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  .diag-corpo .ds-caso-tab tbody td{display:block;min-width:0;padding:0;border:0;white-space:normal;text-align:left;background:none!important;box-shadow:none!important}
  .ds-caso-tab td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .diag-corpo .ds-caso-tab tbody td:first-child{grid-column:1/-1;padding-right:36px}
  .diag-corpo .ds-caso-tab tbody td.ds-v-link{position:absolute;top:6px;right:8px;padding:0}
  .ds-caso-tab td:first-child[data-rotulo]::before{display:none}
}
/* deitado, os casos em cartões de 2 colunas, 6 à vista (depois do bloco acima: a mesma força, vale a ordem) */
@media (orientation:landscape) and (max-height:520px){
  #dsCasos .ds-casos tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #dsCasos .ds-casos tbody tr{margin:0}
  #dsCasos:not(.ds-tudo) .ds-casos tbody tr:nth-child(n+7){display:none}
}
/* TABELAS LARGAS NO CELULAR (Linhas e Motoristas do Desempenho; Histórico de cercas): só a 1ª coluna aparecia (LINHA com 453 px numa caixa de
   317). A 1ª coluna fica PRESA à esquerda e quebra linha (até 180 px), o cabeçalho fica preso em cima; o resto rola de lado por baixo dela.
   Nenhuma coluna some. */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .ds-rol thead th,.ht-rol thead th{position:sticky;top:0;z-index:2}
  .ds-rol tbody td:first-child,.ds-rol thead th:first-child,.ht-rol tbody td:first-child,.ht-rol thead th:first-child{position:sticky;left:0;z-index:1}
  .ds-rol thead th:first-child,.ht-rol thead th:first-child{z-index:3}
  .ds-rol tbody td:first-child,.ht-rol tbody td:first-child{background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
  /* a zebra (.vg-tabela, 45% de transparência) deixava ver o que rola por baixo da coluna presa: nela, a mesma cor por cima de um fundo opaco */
  .ds-rol tbody tr:nth-child(even) td:first-child,.ht-rol tbody tr:nth-child(even) td:first-child{
    background:linear-gradient(color-mix(in srgb,var(--surface-2) 45%,transparent),color-mix(in srgb,var(--surface-2) 45%,transparent)),var(--surface)}
  /* no escuro a caixa da tabela é um tom abaixo do --surface (html.dark .tabela-rol): a coluna presa usa o mesmo */
  html.dark .ds-rol tbody td:first-child,html.dark .ht-rol tbody td:first-child{background:color-mix(in srgb,var(--surface) 93%,#111d2c)}
  html.dark .ds-rol tbody tr:nth-child(even) td:first-child,html.dark .ht-rol tbody tr:nth-child(even) td:first-child{
    background:linear-gradient(color-mix(in srgb,var(--surface-2) 45%,transparent),color-mix(in srgb,var(--surface-2) 45%,transparent)),color-mix(in srgb,var(--surface) 93%,#111d2c)}
  .ds-rol tbody td:first-child{min-width:150px;max-width:180px;white-space:normal}
  .ds-rol tbody td:first-child b,.ds-rol tbody td:first-child .sub{white-space:normal}
  .ht-rol tbody td:first-child{min-width:120px;max-width:150px;white-space:normal}
}

/* ── O CONSULTAR DO HISTÓRICO NO CELULAR (o cartão de consulta da tela API MiX saiu em 15/10/2026 junto com o traçado) ── o Histórico do veículo (refeito em 28/09/2026) tem a grade dele, logo abaixo */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #telaConteudo #htBuscar{order:10;flex:1 1 100%}
}
/* ── HISTÓRICO DO VEÍCULO NO CELULAR (28/09/2026) ── EM PÉ (375): o Veículo na largura toda, De | Até lado a lado (sem o ícone do calendário, o "28/09/2026 · 14:32"
   cabe inteiro nos 160 px de cada um), o Consultar esticado com o Limpar na ponta; o mapa com metade da tela (um dedo rola a página, dois movem o mapa; a tela cheia
   libera). DEITADO (740/844 × 360/390): os filtros numa linha só — o Veículo cede largura, os botões ficam sem ícone — e o mapa na altura útil */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #telaConteudo .campo-grupo.ht-niveis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #telaConteudo .campo-grupo.ht-filtros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:end}
  #telaConteudo .ht-filtros > .campo{min-width:0;width:auto}
  #telaConteudo .ht-filtros > .ht-campo-veiculo,#telaConteudo .ht-filtros > .ht-acoes{grid-column:1/-1}
  #telaConteudo .ht-filtros > .ht-acoes{gap:8px}
  #telaConteudo .ht-acoes #htLimpar{order:11;flex:none}
  #telaConteudo .ht-filtros .fm-traj-btn > .icon{display:none}
  #htMapa{height:52vh;height:52dvh;min-height:260px}
}
@media (orientation:landscape) and (max-height:520px){
  #telaConteudo .campo-grupo.ht-niveis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  #telaConteudo .campo-grupo.ht-filtros{flex-wrap:nowrap;gap:8px}
  #telaConteudo .ht-filtros > .ht-campo-veiculo{flex:1 1 0;min-width:110px}
  #telaConteudo .ht-filtros > .ht-campo-periodo{flex:0 0 134px;min-width:0}
  #telaConteudo .ht-filtros > .ht-acoes{flex:none}
  #telaConteudo .ht-filtros .fm-traj-btn > .icon,#telaConteudo .ht-acoes #htBuscar > .icon,#telaConteudo .ht-filtros .fm-traj-btn .dp-seta{display:none}
  #telaConteudo .ht-filtros .fm-traj-btn{padding:0 8px;font-size:12px}
}
/* CARTÃO DE CONSULTA (hoje o "Serviços do dia" da API Totalbus): o título do cartão e os campos dividiam a linha — em 844 os campos ficavam com 13 px (e a página
   rolava de lado antes da 1ª etapa). Até 900 px e deitado, o título ocupa a linha dele e os campos a de baixo */
@media (max-width:900px),(orientation:landscape) and (max-height:520px){
  #telaConteudo .cartao-consulta:has(> .cartao-cab + .campo-grupo) > .cartao-cab,
  #telaConteudo .cartao-consulta:has(> .cartao-cab + .campo-grupo) > .campo-grupo{flex:1 1 100%;min-width:0}
  #telaConteudo .campo-grupo:has(> #htBuscar){align-items:flex-end}
}

/* ── ANÁLISES DA FROTA ── os quatro filtros tinham largura fixa escrita no campo (230/170/170/250 px): em pé um embaixo do outro (328 px), deitado
   com espaço sobrando. Agora grade — 2 colunas em pé, 4 deitado — e o Limpar na ponta. Os números da faixa (.an-chip) ficam com o TÍTULO EM CIMA
   (regra da casa) e em grade, sem blocos de largura irregular */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #telaConteudo .cartao-consulta:has(#anEmpresaWrap) > .campo-grupo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:end}
  #telaConteudo .cartao-consulta:has(#anEmpresaWrap) > .campo-grupo > .campo{min-width:0!important;width:auto}
  #telaConteudo .cartao-consulta:has(#anEmpresaWrap) > .campo-grupo > .campo-acoes{grid-column:1/-1;justify-self:end;margin:0}
  #telaConteudo .an-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #telaConteudo .an-chip{min-width:0}
  #telaConteudo .an-chip > span{order:-1}
  #telaConteudo .an-chip:last-child:nth-child(odd){grid-column:1/-1}
}
@media (orientation:landscape) and (max-height:520px){
  #telaConteudo .cartao-consulta:has(#anEmpresaWrap) > .campo-grupo{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  #telaConteudo .cartao-consulta:has(#anEmpresaWrap) > .campo-grupo > .campo-acoes{grid-column:auto}
  #telaConteudo .an-chips{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  /* o último ímpar na largura toda é coisa do em pé (2 colunas): deitado deixava a 5ª coluna vazia e o "Odômetro médio" sozinho numa 2ª linha */
  #telaConteudo .an-chip:last-child:nth-child(odd){grid-column:auto}
}

/* ── ALOCAÇÕES, AJUSTES E CORREÇÕES, EM PÉ ── o cabeçalho tinha 200 px e não grudava: ao rolar, o avatar e o tema (presos no canto) ficavam por cima da
   busca e do limpar. Agora gruda, com o título e os botões numa linha. SÓ EM PÉ: deitado (740×360) vale o cabeçalho numa linha da 1ª etapa, com o vão do avatar reservado
   (a classe cf-pagina é das Conferências do vínculo, removidas em 29/10/2026, e segue nas telas que nasceram no molde delas) */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #telaConteudo .cf-pagina .pagina-cab{position:sticky;top:0;row-gap:6px}
}

/* ── CERCAS A CADASTRAR ── os filtros tinham largura fixa escrita no campo (260/130/190/220: 335 px em pé, espaço sobrando deitado) — grade de 2
   colunas em pé e 4 deitado; os indicadores com o TÍTULO EM CIMA (regra da casa); a tabela (1.419 × 4.638 px) rola dentro de uma caixa do
   tamanho da altura útil, com o cabeçalho e a LOCALIDADE presos (a mesma regra do Desempenho, acima) */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #scConteudo .cartao.filtros:has(> .campo #scBusca){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:end}
  #scConteudo .cartao.filtros:has(> .campo #scBusca) > .campo{min-width:0!important;width:auto}
  #scConteudo .cartao.filtros:has(> .campo #scBusca) > .campo:has(#scBusca){grid-column:1/-1}
  #scConteudo .cartao.filtros:has(> .campo #scBusca) > :not(.campo){justify-self:end;margin:0}
  /* o campo encolhe, mas o input tinha o min-width:150px de todo .campo input: deitado passava 44 px por baixo do Estado */
  #scConteudo #scBusca{min-width:0;width:100%}
  #scConteudo .pt-kpis .pt-kpi{display:flex;flex-direction:column}
  #scConteudo .pt-kpis .pt-kpi > span{order:-1}
  #scConteudo .tabela-rol{max-height:calc(var(--h-util) - 24px)}
  #scConteudo .tabela-rol thead th{position:sticky;top:0;z-index:2}
  #scConteudo .tabela-rol tbody td:first-child,#scConteudo .tabela-rol thead th:first-child{position:sticky;left:0;z-index:1}
  #scConteudo .tabela-rol thead th:first-child{z-index:3}
  #scConteudo .tabela-rol tbody td:first-child{min-width:120px;max-width:160px;white-space:normal;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
  #scConteudo .tabela-rol tbody tr:nth-child(even) td:first-child{background:linear-gradient(color-mix(in srgb,var(--surface-2) 45%,transparent),color-mix(in srgb,var(--surface-2) 45%,transparent)),var(--surface)}
  html.dark #scConteudo .tabela-rol tbody td:first-child{background:color-mix(in srgb,var(--surface) 93%,#111d2c)}
  html.dark #scConteudo .tabela-rol tbody tr:nth-child(even) td:first-child{background:linear-gradient(color-mix(in srgb,var(--surface-2) 45%,transparent),color-mix(in srgb,var(--surface-2) 45%,transparent)),color-mix(in srgb,var(--surface) 93%,#111d2c)}
}
@media (orientation:landscape) and (max-height:520px){
  #scConteudo .cartao.filtros:has(> .campo #scBusca){grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  #scConteudo .cartao.filtros:has(> .campo #scBusca) > .campo:has(#scBusca){grid-column:auto}
}

/* ── ACESSOS (cópia fiel do Jornadas: aqui SÓ larguras e espaços) ── no celular a tabela de Usuários tem 1.100 px e as colunas em % dela: Perfil
   com 110 px cortava "Administrador" (84 px numa caixa de 58) e Status com 77 cortava "Ativo" (41 em 31). Até 760 px (e deitado) as colunas vão
   em px, com o espaço que as etiquetas pedem; a tabela continua rolando de lado na própria caixa */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  body .vg-tabela.ac-usu-tab{min-width:1240px}
  body .ac-usu-tab col:nth-child(1){width:190px}
  body .ac-usu-tab col:nth-child(2){width:200px}
  body .ac-usu-tab col:nth-child(3){width:106px}
  body .ac-usu-tab col:nth-child(4){width:136px}
  body .ac-usu-tab col:nth-child(5){width:130px}
  body .ac-usu-tab col:nth-child(6){width:92px}
  body .ac-usu-tab col:nth-child(7){width:64px}
  body .ac-usu-tab col:nth-child(8){width:150px}
  body .ac-usu-tab .ac-chip{max-width:none}
  /* Perfis: o nome do módulo dividia a linha com "4/4 opções ativas" e saía "Cons…" (46 px): a contagem desce quando não cabe */
  body .ac-pf-linha-nome{flex-wrap:wrap;row-gap:0}
  body .ac-pf-grupo-nome{overflow:visible;text-overflow:clip}
  body .ac-pf-tab{min-width:540px}
  body .ac-pf-tab th.ac-pf-th-modulo{width:180px}
  body .ac-pf-tab th.ac-pf-th-acesso{width:64px}
  body .ac-pf-tab th.ac-pf-th-acoes{width:auto}
}
/* Usuários deitado: os quatro filtros e as ações um por linha davam 320 px (740) — a tabela começava fora da tela. Em grade: Buscar | Perfil |
   Status e Agência | ações (2 linhas) até 800 px; dali para cima os quatro e as ações numa linha */
@media (orientation:landscape) and (max-height:520px){
  body .ac-filtros-grade{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:end}
  body .ac-filtros-grade > *{min-width:0}
  body .ac-filtros-grade > .ac-filtro-acoes{grid-column:2/-1;justify-content:flex-end;flex-wrap:nowrap}
  body .ac-usu-filtros{padding-top:10px}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:800px){
  body .ac-filtros-grade{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto}
  body .ac-filtros-grade > .ac-filtro-acoes{grid-column:auto}
}

/* ── INTEGRAÇÕES TOTALBUS (API e WS Novo) ── conferido pelo código, não na prévia: abrir estas telas consulta o Totalbus (proibido nesta rodada).
   A tabela "Configuração (sem segredos)" (chave e valor) passava de 470 px numa caixa de 317: agora ocupa a largura, a chave com 36% e o valor
   quebrando em qualquer ponto (o host é uma URL sem espaço). O "Testar outros métodos" da API tinha Caminho, Método e Corpo espremidos em 46 px
   (o cartão é uma .cartao-consulta, em linha): em coluna, cada campo na largura toda. O rótulo "Ambiente" fica acima dos botões */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #tbWsConteudo > table{width:100%;table-layout:fixed;border-collapse:collapse}
  #tbWsConteudo > table td{padding:4px 0;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
  #tbWsConteudo > table td:first-child{width:36%;padding-right:10px;color:var(--muted)}
}

/* ── PARÂMETROS ── o Tipo da faixa virou a lista da casa (era o único <select> nativo). A caixa da tabela rola de lado e cortaria a lista aberta
   na última faixa: enquanto uma lista está aberta, a caixa ganha o espaço dela embaixo */
.prm-tipo{display:block;min-width:130px}
.prm-rolagem:has(.cs-wrap.aberto){padding-bottom:200px}

/* ── DOCUMENTAÇÃO, DEITADO ── o índice ficava em cima do texto ocupando a tela inteira (300 px): vai para uma coluna de 220 px à esquerda, preso
   e rolando por dentro, e o texto ao lado (como no computador) */
@media (orientation:landscape) and (max-height:520px){
  .doc-layout{grid-template-columns:220px minmax(0,1fr)}
  .doc-indice{position:sticky;top:calc(var(--cab-h) + 8px);max-height:calc(var(--h-util) - 16px);overflow-y:auto;overscroll-behavior:contain}
}

/* ── CERCAS, EM PÉ ── o mapa e a lista disputavam a mesma altura: a lista ficava com 137 px e, com os filtros abertos, o mapa caía a 62. Aqui a
   PÁGINA rola (#telaConteudo), como a lista da Pontualidade: o mapa com 40% da tela em cima e a lista inteira embaixo; o cabeçalho gruda.
   (O Mapa da Frota rolava assim também até 28/09/2026 e VOLTOU à lista com rolagem própria: bloco "MAPA DA FROTA, EM PÉ" logo abaixo.)
   A faixa de indicadores vira uma grade 3 + 2 (antes rolava de lado: "DESATUALIZADOS" saía cortado e "INATIVOS" ficava escondido). */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #telaConteudo:has(> .corpo:not(.gaveta-aberta) #cercaLista){overflow-y:auto;overscroll-behavior-y:contain}
  #telaConteudo:has(> .corpo:not(.gaveta-aberta) #cercaLista) > .cab{position:sticky;top:0}
  #telaConteudo > .corpo:not(.gaveta-aberta):has(#cercaLista){flex:none;min-height:auto}
  .corpo:not(.gaveta-aberta):has(#cercaLista) .mapa-coluna{flex:none;min-height:0}
  .corpo:not(.gaveta-aberta):has(#cercaLista) .mapa-area{flex:none;height:40vh;height:40dvh;min-height:220px}
  .corpo:not(.gaveta-aberta) .lateral:has(#cercaLista),.corpo:not(.gaveta-aberta) .lateral.filtros-abertos:has(#cercaLista){max-height:none;overflow:visible}
  .corpo:not(.gaveta-aberta) .lateral #cercaLista{flex:none;min-height:0;overflow:visible}
  /* ── MAPA DA FROTA, EM PÉ: O MAPA SEMPRE NA TELA (Alan, 28/09/2026: "você me deixa rolar a tela toda para baixo para ver todos os carros... se
     quiser subir vai ser ruim. A forma que estava antes estava melhor... a parte do MAPA SEMPRE ESTAVA NA TELA"). Medido em 375×812: a lista
     tinha 57.920 px e a PÁGINA rolava; agora a página não rola e a altura útil é dividida — indicadores + mapa com 48% do corpo (com o
     cabeçalho, 52% da tela acima da barra de baixo: mapa de 241 px) e a lateral (filtros, busca, Ordenar) com 52%, a LISTA rolando por dentro
     dela (overscroll contido: o fim da lista não arrasta a página) com 5 linhas e meia à vista — o desenho antigo (34vh) mostrava 3; as folgas
     do bloco dos filtros e do "Ordenar" encolhem. Filtros abertos: a lateral cresce (66%) enquanto a
     pessoa filtra e o mapa segue à vista (mínimo 120 px). Inspetor aberto e mapa cheio: a lateral sai e a coluna do mapa toma tudo. Busca com
     o teclado aberto (fleetBuscaTeclado marca .fm-digitando): a coluna do mapa sai enquanto se digita e o resultado aparece acima do teclado. */
  #telaConteudo:has(> .corpo #fmLista){overflow-y:hidden;overscroll-behavior:none}
  #telaConteudo > .corpo:has(#fmLista){flex:1;min-height:0}
  .corpo:has(#fmLista) .mapa-coluna{flex:58 1 0;min-height:0}
  .corpo:has(#fmLista) .mapa-area{flex:1;height:auto;min-height:120px}
  .corpo:has(#fmLista) .lateral,.corpo:has(#fmLista) .lateral.filtros-abertos{flex:42 1 0;min-height:0;max-height:none;overflow:hidden}
  .corpo:has(#fmLista) .lateral.filtros-abertos{flex-grow:66}
  .corpo:has(.lateral.filtros-abertos #fmLista) .mapa-coluna{flex-grow:34}
  .corpo .lateral #fmLista{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
  /* LINHAS MAIS BAIXAS E MAIS MAPA (Alan, 28/09/2026: "na versão mobile essa lista tá muito alta, fazendo com que sobre muito pouco espaço visível no mapa... deixar
     as linhas mais baixas, mais próximas umas das outras, e ter mais visibilidade do mapa"): a linha de uma linha fica com 34 px e a de duas (com o motorista) com
     ~36 (eram 44 e 56), e o mapa com 58% do corpo (era 48): em 375×812 continuam ~6 linhas à vista e o mapa ganha uns 55 px */
  .corpo .lateral #fmLista .veic-row{min-height:34px;padding:3px 9px}
  .corpo .lateral #fmLista .veic-l1 b,.corpo .lateral #fmLista .veic-l2{line-height:1.2}
  .corpo .lateral #fmLista .veic-meta span{line-height:1.1}
  .corpo .lateral:has(#fmLista) .lateral-filtros{padding:8px 12px 6px}
  .corpo .lateral:has(#fmLista) .lista-cab{padding:4px 14px 2px}
  /* DIGITANDO NA BUSCA, EM PÉ: O MAPA NÃO SOME MAIS (Alan, 05/10/2026, no celular dele: "quando eu clico no campo de pesquisa... a lista de veículos toma a tela toda e eu não vejo nem um
     pedaço do mapa... precisa arrumar"). Antes (28/09) a coluna do mapa saía inteira para o resultado caber acima do teclado; agora ela fica como uma FAIXA de mapa em cima (30% da área
     livre, a lista com os outros 70%) — o resultado da busca aparece nos marcadores enquanto se digita —, sem os indicadores e sem a barra de botões (que não se usam digitando). O
     JS remede o mapa ao entrar e ao sair (fleetBuscaTeclado). */
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) .mapa-coluna{flex:36 1 0;min-height:0}
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) .lateral{flex:64 1 0}
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) .mapa-area{min-height:90px}
  /* (06/10/2026) acima do teclado do iPhone sobram ~340 px: sai também o TÍTULO da tela (o avatar e o tema ficam por cima do canto do mapa, como deitado) e os botões de zoom, que cobriam metade da faixa do
     mapa — o mapa fica com ~36% (≈120 px) e a lista com ~4 linhas e meia */
  #telaConteudo:has(> .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio) #fmLista) > .cab{display:none}
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) .leaflet-control-zoom{display:none}
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) :is(.kpis-topo,.mapbar,.map-status,.lista-cab){display:none}
  /* NA ALTURA REAL DO CELULAR (revisão de 28/09/2026): como a página não rola, as barras do navegador nunca recolhem — o iPhone de 812 px
     mostra ~635. Ali a lista tinha 3 linhas e o mapa uns 60 px limpos (com os filtros abertos, nenhuma linha). O custo fixo encolhe, só aqui:
     o botão Filtros vira um ícone (com o número de filtros) à esquerda da busca, na mesma linha (a situação escolhida segue na lista aberta);
     os indicadores ficam mais baixos (título em cima, número embaixo); a faixa de status do mapa cabe numa linha — o "cadastrados" sai dela em
     pé (é Frota ativa + Inativos, os dois à vista em cima; "todos" continua na Situação dos filtros). */
  .corpo .lateral:has(#fmLista) .lateral-filtros{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:0;align-items:center}   /* (a folga de 8 px entre a linha do botão e o bloco aberto é a margem do bloco, que anima junto com a altura: row-gap fixo a deixaria com o bloco fechado) */
  .corpo .lateral:has(#fmLista) #fmFiltrosBtn{grid-row:1;grid-column:1;width:auto;min-height:40px;gap:5px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface)}
  .corpo .lateral:has(#fmLista) #fmFiltrosBtn .lateral-filtros-titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .corpo .lateral:has(#fmLista) #fmFiltrosBtn .lateral-filtros-resumo{display:none}
  .corpo .lateral:has(#fmLista) #fmFiltrosBtn .dp-seta{margin-left:0}
  .corpo .lateral:has(#fmLista) .lateral-busca-linha{grid-row:1;grid-column:2;min-width:0}
  .corpo .lateral:has(#fmLista) .lateral-filtros-extra{grid-row:2;grid-column:1/-1;margin-top:0}
  .corpo .lateral.filtros-abertos:has(#fmLista) .lateral-filtros-extra{margin-top:8px}
  .corpo:has(#fmLista) .kpis-topo .kpi-topo{padding:4px 12px}
  .corpo:has(#fmLista) .kpis-topo .kpi-topo b{font-size:15px}
  .corpo:not(.gaveta-aberta):has(#fmLista) .map-status{padding:5px 10px;font-size:11px}
  .corpo:not(.gaveta-aberta):has(#fmLista) .map-status .cab-vivo{font-size:11px}
  .kpis-topo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible}
  .kpis-topo .kpi-topo{min-width:0;grid-column:span 2;border-top:1px solid var(--line)}
  .kpis-topo .kpi-topo:nth-child(-n+3){border-top:0}
  .kpis-topo .kpi-topo:nth-child(4){grid-column:span 3;border-left:0}
  .kpis-topo .kpi-topo:nth-child(5){grid-column:span 3}
  .kpis-topo .kpi-topo span{order:-1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
}
/* A PÁGINA PRESA À ÁREA VISÍVEL ENQUANTO SE DIGITA NA BUSCA DO MAPA (Alan, 06/10/2026, no iPhone: "ainda tem o bug que quando clico no campo de pesquisa... a lista cobre a tela toda pra poder digitar"): com o
   teclado aberto o iPhone (e o Chrome do Android) encolhe só a ÁREA VISÍVEL e panoramiza a página para mostrar o campo — o layout seguia com a altura da tela inteira e o mapa, no alto, ficava fora da área visível.
   fleetAreaVisivel (app.js) marca o html com .fm-vv e passa a altura e o topo da área visível em --fm-vv-h e --fm-vv-t: a .app vira uma caixa FIXA dessa altura, naquele topo, e o mapa-faixa, a busca e a lista
   dividem só o que está acima do teclado. Em pé a barra de baixo sai (o teclado a cobriria e ela custa 60 px dos ~340 que sobram). Só existe com a busca em foco e o teclado aberto; no computador nunca liga. */
html.fm-vv .app{position:fixed;left:0;right:0;top:var(--fm-vv-t,0px);height:var(--fm-vv-h,100dvh)}
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  html.fm-vv .snav{display:none}
}
/* MAPA DA FROTA, DEITADO, DIGITANDO NA BUSCA (revisão de 28/09/2026): o teclado deitado toma uns 180-210 px dos 360-430 e as linhas (a partir
   de y=165-183) ficavam todas por baixo dele. Com .fm-digitando (fleetBuscaTeclado: foco na busca E teclado aberto) saem o título da tela, o
   botão Filtros (e a lista dele, se aberta) e o "Ordenar": a busca sobe ao topo da lateral e o resultado aparece acima do teclado. Na coluna do
   mapa saem os indicadores e a barra de botões (senão ficariam por baixo do avatar, que não tem mais o cabeçalho para reservar o canto); o mapa
   fica à vista e é remedido ao entrar e ao sair. Fechou o teclado ou saiu do campo, tudo volta. */
@media (orientation:landscape) and (max-height:520px){
  #telaConteudo:has(> .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio) #fmLista) > .cab{display:none}
  .corpo.fm-digitando:not(.gaveta-aberta):not(.mapa-cheio):has(#fmLista) :is(.lateral-filtros-cab,.lateral-filtros-extra,.lista-cab,.kpis-topo,.mapbar){display:none}
}
/* ── CABEÇALHO PRESO NO CELULAR (Alan, 28/09/2026: "Quando eu puxo a tela para baixo, o menu que tem o título da página vem para baixo, mas
   deveria ficar ancorado junto com o modo noturno/claro e o avatar do login"). Rolando, o título (.pagina-cab) já grudava no alto do contêiner
   que rola (.tela-pagina; nas Cercas em pé, o #telaConteudo) — medido em 375×812 e 740×360 em todas as telas: fica em y=0 com 400 px rolados.
   O que descia era o PUXAR: no alto da lista (e no fim) o iPhone estica o CONTEÚDO do contêiner que rola (o elástico; no Android 12+, o
   esticão) e o cabeçalho, que é conteúdo dele, ia junto, enquanto o avatar e o tema (.topo-usuario) moram FORA dele, na .app-main — pareciam
   duas faixas. `contain` só impedia o gesto de passar para a página; `none` tira também o elástico do próprio contêiner, e o título fica parado
   com o avatar. A página (html/body) também perde o elástico vertical: onde nada rola (Mapa, telas curtas) o puxar arrastava a janela inteira
   e o topo tremia (o horizontal fica como está: o gesto de voltar do navegador segue). Em pé (barra de baixo) e deitado (trilho), inclusive o
   Pro Max deitado (932 px, fora do max-width:900px). No computador nada muda. As listas internas (#fmLista, gavetas) seguem com `contain`:
   o elástico delas não mexe no cabeçalho. */
@media (max-width:900px),(orientation:landscape) and (max-height:520px){
  html,body{overscroll-behavior-y:none}
  .tela-pagina{overscroll-behavior-y:none}
  #telaConteudo:has(> .corpo:not(.gaveta-aberta) #cercaLista){overscroll-behavior-y:none}
}
/* DEITADO, A FAIXA DE INDICADORES CABE: com a lista ao lado, a faixa tem só a largura do mapa (402 px em 740, 472 em 844) e pedia 490-534 —
   "Inativos" ficava fora e "Desatualizados" cortado, sem sinal de rolagem no toque. Os cinco numa linha, encolhendo até a palavra mais longa
   (os títulos de duas palavras quebram), título em cima e o número embaixo, alinhados pela base */
@media (orientation:landscape) and (max-height:520px){
  .kpis-topo{overflow:visible}
  .kpis-topo .kpi-topo{flex:1 1 auto;min-width:min-content;padding:6px 8px;justify-content:space-between}
  .kpis-topo .kpi-topo span{order:-1;white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:.02em;line-height:1.2}
  .kpis-topo .kpi-topo b{font-size:16px}
}
/* MAPA CHEIO NO CELULAR (Alan, 28/09/2026: "um botão ou ícone para recolher a parte de filtros e a lista de veículos para ter mais espaço para o
   mapa"). O ícone mora na barra do mapa (canto de cima, à direita), alvo de 36 px, e só existe no celular — em pé e deitado; no computador nada
   muda. Com .mapa-cheio no .corpo (fleetAlternarMapaCheio) a lateral sai de cena: em pé a página deixa de rolar e o mapa desce até o fim da
   tela (como com o inspetor aberto); deitado ele toma a largura da lista. Os indicadores do topo ficam: são filtros de um toque. */
.fm-cheio-btn{display:none}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .mapbar .fm-cheio-btn{display:flex;flex:none;width:36px;height:36px;padding:0;justify-content:center}
  .mapbar .fm-cheio-btn .icon{width:18px;height:18px}
  .mapbar .fm-cheio-btn[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
  .corpo.mapa-cheio .lateral{display:none}
}
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  #telaConteudo:has(> .corpo.mapa-cheio .lista-veiculos){overflow-y:hidden}
  #telaConteudo > .corpo.mapa-cheio:has(.lista-veiculos){flex:1;min-height:0}
  .corpo.mapa-cheio:has(.lista-veiculos) .mapa-coluna{flex:1;min-height:0}
  .corpo.mapa-cheio:has(#fmLista) .mapa-area{flex:1;height:auto;min-height:0}
}
/* DEITADO, COM O INSPETOR ABERTO (a faixa da direita, bloco "DEITADO" acima): a barra do mapa (Cercas, Ajustar, Mapa) e a de status ficavam
   por baixo dele — as duas passam a caber na faixa livre à esquerda (no computador também: o deslocamento, pela variável --fm-gaveta-w, está no bloco
   "MAPA DA FROTA: OS CONTROLES ACOMPANHAM O INSPETOR", antes das Conferências); e o cabeçalho do inspetor (125 px de 316) fica em duas linhas: o prefixo,
   a placa e o modelo (esses cedem) e os botões numa; a situação na outra */
@media (orientation:landscape) and (max-height:520px){
  /* na faixa livre (~310 px) os botões com nome encostavam no zoom (+/−): só os ícones — o balão e o texto (tamanho 0, lido pelo leitor) seguem */
  .corpo.gaveta-aberta .mapbar .mapbar-btn{font-size:0;gap:0;width:36px;height:36px;padding:0;justify-content:center}
  .corpo.gaveta-aberta .mapbar .mapbar-btn .dp-seta{display:none}
  .drawer .drawer-head{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:4px;padding:8px 12px 8px 16px}
  .drawer .drawer-head h2{grid-column:1;grid-row:1;white-space:nowrap}
  .drawer .drawer-head > p{grid-column:2;grid-row:1;margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .drawer .drawer-head .drawer-head-acoes{grid-column:3;grid-row:1}
  .drawer .drawer-head .drawer-situ{grid-column:1/-1}
  /* o Atualizar só com o ícone (o balão diz o que faz) */
  .drawer .drawer-head .drawer-atualizar{width:36px;padding:0;justify-content:center}
  .drawer .drawer-head .drawer-atualizar > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* a linha do veículo no toque: uma altura só (44) com a idade em 1 ou 2 linhas — antes 31, 39 ou 49 px conforme "há 3 h 15 min" quebrava (a
   quebra entre as unidades fica: é ela que abre espaço para o prefixo, que nunca corta) */
@media (pointer:coarse){
  #fmLista .veic-row{min-height:44px}
}

/* O ATUALIZAR COM COR (Alan, 29/09/2026: "seria interessante colocar cores nesses botões..."; o Trajeto do veículo e o Histórico de cercas, que dividiam esta regra com ele, saíram do inspetor em 28/10/2026). Atualizar = verde
   (dado novo, como o "exportar verde" do Jornadas). O ATUALIZAR É A EXCEÇÃO dos vizinhos (Alan, 29/09/2026: "deixe esse botão com a cor padrão dele na cor que é quando passamos o mouse... e quando passar o mouse você ajusta
   o tom pra perceber a animação do botão"): PARADO ele já tem o verde que era o do hover (degradê, texto branco; 0,03 a 0,06 mais escuro, para o texto de 11,5 px
   passar de 4,5:1 no lado mais claro), e no hover o degradê fecha 0,08 (mais escuro), a sombra cresce e ele sobe 1 px — o tom muda o bastante para a animação aparecer. */
#fmAtualizarAgora{color:#fff;background:linear-gradient(92deg,oklch(0.47 0.17 155),oklch(0.54 0.17 155));border-color:oklch(0.49 0.17 155);box-shadow:0 2px 6px oklch(0.5 0.17 155 / 22%);
  transition:background var(--t-rapida),border-color var(--t-rapida),box-shadow var(--t-rapida),transform var(--t-rapida),opacity var(--t-rapida)}
@media (hover:hover){
  #fmAtualizarAgora:hover:not(:disabled){color:#fff;transform:translateY(-1px)}
  #fmAtualizarAgora:hover:not(:disabled){background:linear-gradient(92deg,oklch(0.39 0.15 155),oklch(0.46 0.16 155));border-color:oklch(0.41 0.15 155);box-shadow:0 5px 13px oklch(0.45 0.16 155 / 38%)}
}
/* A LOTAÇÃO COM A COR DELA, COMO OS VIZINHOS (Alan, 28/09/2026: "usa uma cor legal nesse botão, pra ficar parecido com os botões vizinhos"): o download é verde no
   hover; a lotação (passageiros) é violeta — degradê, ícone branco e sobe 1 px; aberta, fica violeta parada (apertado = hover) */
@media (hover:hover){
  #ptLotacaoBtn:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.47 0.17 300),oklch(0.57 0.17 300));border-color:oklch(0.52 0.17 300);box-shadow:0 4px 11px oklch(0.52 0.17 300 / 22%)}
}
#ptLotacaoBtn.ativo{color:#fff;background:linear-gradient(92deg,oklch(0.47 0.17 300),oklch(0.57 0.17 300));border-color:oklch(0.52 0.17 300);box-shadow:0 4px 11px oklch(0.52 0.17 300 / 22%)}
/* O HISTÓRICO DE CERCAS COM A COR DELA NO HOVER, COMO OS VIZINHOS (Alan, 03/11/2026: «falta uma cor desse botão quando a gente passa o mouse, para ficar igual aos botões vizinhos»): o download é verde e a lotação violeta; as cercas são azuis —
   degradê, ícone branco, sombra colorida (a bolinha vermelha dos alertas não muda); as cores literais moram aqui, junto das outras cores de ação, porque o bloco do fim do arquivo só usa tokens (test/pedidos-cerca-tela) */
@media (hover:hover){
  #ptCercBtn:hover:not(:disabled){color:#fff;background:linear-gradient(92deg,oklch(0.47 0.15 235),oklch(0.57 0.15 235));border-color:oklch(0.52 0.15 235);box-shadow:0 4px 11px oklch(0.52 0.15 235 / 22%)}
}

/* VOLTAR PARA A LISTA COM CARA DE AÇÃO (Alan, 28/09/2026: "precisa melhorar esse botão também"), no padrão dos botões do inspetor: no repouso discreto, com a seta
   na cor da marca; no hover ganha a SUA cor em degradê — ardósia, a cor de "navegar" (o vermelho fica para o que grava) —, texto branco, sobe 1 px e a seta desliza
   para a esquerda. Só com mouse de verdade (no toque o :hover ficaria preso). Sem gate de movimento reduzido: o Windows daqui tem as animações desligadas */
#ptVoltarLista.pt-voltar-topo{transition:background-color var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida),box-shadow var(--t-rapida),transform var(--t-rapida)}
#ptVoltarLista.pt-voltar-topo .icon{color:var(--brand);transition:transform var(--t-rapida),color var(--t-rapida)}
@media (hover:hover){
  /* VERMELHO no hover (Alan, 28/09/2026: "acho que pode ser vermelho"): o degradê do botão primário */
  #ptVoltarLista.pt-voltar-topo:hover{color:var(--brand-texto);background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));border-color:color-mix(in srgb,var(--brand) 76%,transparent);box-shadow:0 4px 11px color-mix(in srgb,var(--brand) 24%,transparent);transform:translateY(-1px)}
  #ptVoltarLista.pt-voltar-topo:hover .icon{color:var(--brand-texto);transform:translateX(-3px)}
}

/* ABRIR O MAPA COM COR DE AÇÃO (Alan, 28/09/2026: "coloca uma cor legal nesse botão de abrir o mapa, no padrão de botões que temos utilizado" e, depois, "deixe ele
   azul antes de clicar"): AZUL, a cor de abrir/desenhar (a do "Trajeto do veículo") — JÁ PARADO enquanto o mapa está fechado (aria-expanded="false"), com texto branco;
   no hover clareia um pouco, sobe 1 px e o globo junto (o gesto do botão primário). Aberto, o botão volta ao contorno de sempre.
   VERMELHO DO SISTEMA (Alan, 01/10/2026: "muda a cor pro tom de vermelho padrão do sistema; se eu não gostar te peço pra desfazer"): o mesmo degradê do botão primário
   (--brand), no lugar do azul (oklch 258: texto branco, degradê 0.5→0.6, borda 0.56, sombra 18% / 28% no hover). Desfazer = voltar esses quatro valores */
#ptMapaToggle{transition:background-color var(--t-rapida),border-color var(--t-rapida),color var(--t-rapida),box-shadow var(--t-rapida),transform var(--t-rapida),filter var(--t-rapida)}
#ptMapaToggle .icon{transition:transform var(--t-rapida)}
#ptMapaToggle[aria-expanded="false"]{color:var(--brand-texto);background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));border-color:color-mix(in srgb,var(--brand) 76%,transparent);box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 18%,transparent)}
@media (hover:hover){
  #ptMapaToggle[aria-expanded="false"]:hover:not(:disabled){color:var(--brand-texto);background:linear-gradient(92deg,color-mix(in srgb,var(--brand) 86%,#7c0008),color-mix(in srgb,var(--brand) 94%,#ff6872));border-color:color-mix(in srgb,var(--brand) 76%,transparent);box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 28%,transparent);filter:brightness(1.08);transform:translateY(-1px)}
  #ptMapaToggle[aria-expanded="false"]:hover:not(:disabled) .icon{transform:translateY(-1px)}
}
/* A ANIMAÇÃO DO "ABRIR O MAPA" (Alan, 02/10/2026: "o botão tá legal... mas acho que falta uma animação nele" e "tem um ícone do planeta Terra... se adicionasse uma animação como se ele girasse, será que ficaria legal?"):
   SÓ MOVIMENTO — a cor, o degradê e a forma aprovados não mudam. (1) A TERRA GIRA: os continentes do ícone (i-globo, no sprite) deslizam pela esfera e voltam à mesma pose — UMA volta por vez, que o app.js
   dispara ao passar o mouse e deixa terminar (a classe pt-gira); o deslocamento é a propriedade --ptTerra, registrada para poder ser animada (passa pelo <use> do ícone por herança). (2) Um BRILHO atravessa o
   botão uma vez no hover. (3) Ao apertar, o botão afunda. (4) Ao abrir/fechar, a largura vai da pílula ao círculo (ptMapaToggleMorfar, no app.js). Sem relógio e sem laço: tudo é resposta a um gesto */
@property --ptTerra{syntax:'<length>';inherits:true;initial-value:0px}
@keyframes ptTerraGira{from{--ptTerra:0px}to{--ptTerra:24px}}
@keyframes ptMapaBrilho{0%{transform:translateX(-140%) skewX(-20deg);opacity:0}18%{opacity:1}100%{transform:translateX(340%) skewX(-20deg);opacity:0}}
#ptMapaToggle[aria-expanded="false"].pt-gira .icon{animation:ptTerraGira 1150ms cubic-bezier(.45,.05,.55,.95) 1}
#ptMapaToggle[aria-expanded="false"]{position:relative;overflow:hidden}
#ptMapaToggle[aria-expanded="false"]::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;opacity:0;transform:translateX(-140%) skewX(-20deg);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent)}
@media (hover:hover){
  #ptMapaToggle[aria-expanded="false"]:hover:not(:disabled)::after{animation:ptMapaBrilho 780ms cubic-bezier(.23,1,.32,1) 1 both}
}
#ptMapaToggle[aria-expanded="false"]:active:not(:disabled){transform:translateY(0) scale(.97);filter:brightness(.97);box-shadow:0 1px 4px color-mix(in srgb,var(--brand) 22%,transparent)}
/* ── CONSUMO DO SISTEMA (29/09/2026) ──────────────────────────────────────────────────────────────────────────────────
   Configurações › Consumo (Alan: "a parte de consumo, igual temos no Gestão de Jornadas"): o vocabulário das telas novas (cartao, pt-kpi, vg-tabela, chip) e só o que a
   tela tem de próprio — a barrinha de cada tabela, o "i" da descrição, o inventário e a faixa de "medindo". SÓ tokens de cor (claro e escuro pelo html.dark), largura toda. */
.cns-acoes{flex:none;display:inline-flex;align-items:center;gap:8px}
.cns-acoes .panel-btn{margin-top:0}
.cns-btn-rot{white-space:nowrap}
#cnsChip:empty{display:none}
.cns-estado{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;font-size:12.5px;color:var(--texto-2)}
.cns-estado:empty{display:none}
.cns-quando{line-height:1.5}
.cns-medindo{display:flex;flex-direction:column;gap:6px;color:var(--info)}
.cns-trilho{display:block;height:4px;border-radius:var(--r-full);background:var(--info-bg);overflow:hidden}
.cns-trilho i{display:block;width:34%;height:100%;border-radius:var(--r-full);background:var(--info);animation:cnsVaiVem 1.3s ease-in-out infinite}
@keyframes cnsVaiVem{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.cns-aviso{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);line-height:1.45}
.cns-aviso > .icon{flex:none;width:16px;height:16px;margin-top:2px}
.cns-aviso b{display:block;font-weight:700;color:var(--ink)}
.cns-aviso ul{margin:4px 0 4px;padding-left:18px}
.cns-aviso li{margin:1px 0}
.cns-aviso .muted{display:block}
.cns-aviso-warn{background:var(--alerta-fundo);border-color:var(--alerta);color:var(--alerta)}
.cns-aviso-erro{background:var(--erro-bg);border-color:var(--erro);color:var(--erro)}
.cns-aviso-info{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.cns-aviso-warn b,.cns-aviso-erro b,.cns-aviso-info b{color:inherit}
/* a faixa dos quatro indicadores: uma coluna por indicador (o título vem em cima do número, como em toda faixa da casa) */
.cns-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.cns-kpis .pt-kpi > .pt-kpi-linha2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* os títulos daqui são mais longos que os da Pontualidade ("Espaço livre no disco", "Espaço reaproveitável"): quebram em duas linhas em vez de cortar com reticências (como a faixa do Histórico) */
.cns-kpis .pt-kpi > .pt-kpi-rot{white-space:normal;line-height:1.25}
@media(max-width:900px){.cns-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cns-pagina .cartao{margin-bottom:var(--pag-entre-cartoes)}
.cns-pagina .cartao.pt-kpis{margin-bottom:var(--pag-entre-cartoes)}
.cns-pagina .cartao-cab{min-height:0}
.cns-pagina .cartao-ident{margin:0 0 8px}
/* as tabelas: a linha não é clicável, e o nome leva o "i" e o selo do estado ao lado */
.cns-tabela td,.cns-tabela th{white-space:nowrap}
.cns-tabela tbody tr{cursor:default}
/* a célula do nome (e do banco, na lista completa) quebra a linha quando falta largura: a tabela não rola de lado com o menu aberto */
.cns-tabela td.cns-c-nome,.cns-tabela td.cns-c-larga{white-space:normal}
.cns-nome{display:inline;min-width:0}
.cns-nome > * + *{margin-left:6px}
.cns-nome .chip{vertical-align:middle}
.cns-nome b{font-weight:600;color:var(--ink)}
/* o "i" é um span com role="img" (como o .pt-porque), não um botão: no toque o balão abre nele */
.cns-info{flex:none;display:inline-grid;vertical-align:middle;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--r-full);background:none;color:var(--faint);cursor:help;transition:background-color var(--t-rapida),color var(--t-rapida)}
.cns-info .icon{width:13px;height:13px}
@media(hover:hover){.cns-info:hover{background:var(--accent);color:var(--ink)}}
@media(pointer:coarse){.cns-info{width:28px;height:28px}.cns-info .icon{width:15px;height:15px}}
.cns-c-pct{min-width:150px}
.cns-pct{display:flex;align-items:center;gap:10px}
.cns-pct-txt{flex:none;min-width:48px;text-align:right;font-variant-numeric:tabular-nums;color:var(--texto-2)}
/* a barrinha de participação (a do Progress do Jornadas): trilho no tom do sistema, preenchimento na cor da marca */
.cns-barra{display:block;height:6px;border-radius:var(--r-full);background:var(--accent);overflow:hidden}
.cns-barra i{display:block;height:100%;min-width:2px;border-radius:var(--r-full);background:var(--brand);transition:width var(--t-media)}
.cns-barra-mini{flex:1 1 auto;min-width:64px}
/* Maiores tabelas (esquerda) e Inventário (direita): lado a lado só onde cabe */
.cns-duas{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.cns-duas > .cartao{margin-bottom:0}
@media(min-width:1100px){.cns-duas{grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);align-items:start}}
.cns-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 20px}
@media(min-width:720px){.cns-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cns-tab{min-width:0;display:flex;flex-direction:column;gap:6px}
.cns-tab-l1{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px}
.cns-tab-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.cns-tab-tam{margin-left:auto;flex:none;padding-left:8px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cns-tab-l2{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.cns-tab-l2 .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cns-tab-pct{flex:none;font-variant-numeric:tabular-nums}
.cns-ver-todas{margin-top:14px;font-size:12.5px}
.cns-rol{max-height:min(70vh,640px)}
.cns-rol thead th{position:sticky;top:0;z-index:2}
.cns-inv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cns-inv-item{min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--cartao-borda);border-radius:var(--r-md);background:var(--surface-2)}
.cns-inv-rot{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cns-inv-item b{font-size:17px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.cns-inv-item small{font-size:10.5px;color:var(--muted)}
/* A LISTA DE TODAS AS TABELAS (05/10/2026, Alan: "falta listar as tabelas... pra ver e entender quais tabelas pesam mais"): o filtro por banco (os chips da casa), a seta que abre a linha
   e o miolo que se abre — a descrição, dados × índices, a média por linha e cada índice com o tamanho e a barrinha. Tabela ainda não medida fica em tom de apoio. SÓ tokens de cor. */
.cns-filtros{margin:2px 0 10px}
.cns-exp{flex:none;display:inline-grid;vertical-align:middle;place-items:center;width:24px;height:24px;margin:0 4px 0 -6px;padding:0;border:0;border-radius:var(--r-full);background:transparent;color:var(--muted);cursor:pointer;transition:background var(--t-rapida),color var(--t-rapida)}
.cns-exp .icon{width:15px;height:15px;transform:rotate(-90deg);transition:transform var(--t-media)}
.cns-exp[aria-expanded="true"] .icon{transform:rotate(0deg)}
@media(hover:hover){.cns-exp:hover{background:var(--accent);color:var(--ink)}}
@media(pointer:coarse){.cns-exp{width:32px;height:32px}}
.cns-linha.aberta > td{background:var(--surface-2)}
.cns-pendente .cns-nome b{color:var(--texto-2)}
.cns-detalhe > td{padding:0;white-space:normal;background:var(--surface-2)}
.cns-det{display:flex;flex-direction:column;gap:10px;padding:8px 16px 14px 34px}
.cns-det-desc{margin:0;font-size:12.5px;line-height:1.5;color:var(--texto-2)}
.cns-det-nota{margin:0;font-size:12px}
.cns-det-nums{display:flex;flex-wrap:wrap;gap:8px 32px}
.cns-det-nums > span{display:flex;flex-direction:column;gap:1px;min-width:120px}
.cns-det-nums small{font-size:10.5px;color:var(--muted)}
.cns-det-nums b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cns-ix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cns-ix li{display:grid;grid-template-columns:minmax(0,1.4fr) 84px 52px minmax(80px,1fr);gap:10px;align-items:center}
.cns-ix-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--texto-2)}
.cns-ix li b{text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cns-ix-pct{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cns-sobe{color:var(--alerta)}
.cns-desce{color:var(--ok)}
/* o botão Atualizar gira o ícone enquanto o servidor mede */
.cns-girando .icon{animation:fmGira 1s linear infinite}
/* celular: tudo na largura, sem rolagem lateral da página (as tabelas rolam por dentro da caixa delas); o cabeçalho segue a regra da casa */
@media(max-width:760px){
  .cns-inv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cns-c-pct{min-width:120px}
  /* os chips de banco numa linha só que rola de lado (como os da Auditoria), em vez de quebrar em cinco linhas */
  .cns-filtros{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .cns-filtros .pt-chip{flex:none;white-space:nowrap}
}
@media(max-width:380px){.cns-inv{grid-template-columns:minmax(0,1fr)}}
/* CELULAR EM PÉ E DEITADO (revisão de 29/09/2026): as duas tabelas (Bancos de dados e Todas as tabelas) viram CARTÕES, como a Pontualidade e os Ajustes — sem rolagem de lado, que
   escondia o tamanho, o -wal e a % (o que a tela existe para mostrar). O nome (com o "i") em largura toda, e cada número com o título dele em cima (data-rotulo), dois por linha;
   o banco (na lista completa) ocupa a linha toda; nos bancos a % com a barra fica ao lado do reaproveitável. O cabeçalho da tabela some: a ordem é a de partida (a maior primeiro) */
@media(max-width:760px),(orientation:landscape) and (max-height:520px){
  .cns-pagina .tabela-rol,.cns-pagina .cns-rol{max-height:none;overflow:visible;margin-top:8px;border:0;border-radius:0;background:none}
  .cns-pagina .cns-tabela,.cns-pagina .cns-tabela tbody{display:block;min-width:0;width:auto}
  .cns-pagina .cns-tabela thead{display:none}
  .cns-pagina .cns-tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:start;margin:0 0 8px;padding:10px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  .cns-pagina .cns-tabela tbody tr td{display:block;min-width:0;width:auto;padding:0;border:0;white-space:normal;background:transparent;box-shadow:none;text-align:left}
  .cns-pagina .cns-tabela tbody tr td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cns-pagina .cns-tabela tbody tr td.cns-c-nome,.cns-pagina .cns-tabela tbody tr td.cns-c-larga{grid-column:1/-1}
  .cns-pagina .cns-tabela .sub{white-space:normal;overflow-wrap:anywhere}
  .cns-pagina .cns-c-pct{min-width:0}
  /* a lista de todas as tabelas: o miolo aberto é um bloco só, logo abaixo do cartão da tabela, e a lista de índices cabe na largura */
  .cns-pagina .cns-analise tbody tr.cns-detalhe{display:block;margin:-6px 0 8px;padding:0;border-top:0;border-radius:0 0 var(--r-md) var(--r-md);background:var(--surface-2)}
  .cns-pagina .cns-analise tbody tr.cns-detalhe > td{padding:0}
  .cns-pagina .cns-analise .cns-det{padding:6px 12px 12px}
  .cns-pagina .cns-analise .cns-ix li{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px}
  .cns-pagina .cns-analise .cns-ix li .cns-barra{grid-column:1/-1}
  .cns-pagina .cns-analise .cns-det-nums > span{min-width:0;flex:1 1 30%}
}
/* celular em pé: o título "Consumo do sistema" não cabe ao lado do botão com o rótulo (o avatar e o tema ocupam o canto) — fica só o ícone; o nome acessível segue no aria-label */
@media(max-width:480px){.cns-btn-rot{display:none}.cns-acoes .panel-btn{padding:0 10px}}

/* ── CERCAS › NOVA CERCA (29/09/2026) ─────────────────────────────────────────────────────────────────────────────────
   Alan: "acho que deveria ter uma menu filho dentro de cercas... pra poder solicitar a criação de nova cerca...". A PÁGINA do pedido de cerca nova
   (/cercas/nova). O miolo — o mapa de desenho com a barra de ferramentas e a ajuda, o formulário e o rodapé do Enviar — é o da JANELA do pedido: as classes
   pc-pedido-* e pc-mapa-* do bloco PEDIDOS DE CERCA (no fim deste arquivo, com as regras do celular). Por isso cada regra daqui que precisa vencer uma dele
   leva .pc-nova-caixa na frente (2 classes contra 1: vale sem depender da ordem). Aqui só o que é da página: a caixa, as colunas e as alturas. SÓ tokens
   de cor (o escuro sai dos mesmos nomes).
   COMPUTADOR: a página é uma coluna — o cabeçalho de 56 px e a caixa —, e a caixa toma a altura que sobra (no mínimo 420 px, revisão de 29/09/2026: com 520 a
   página precisava de 56 + 16 + 520 + 24 = 616 px e rolava entre 521 e 615 px de altura — um notebook 1366×768 a 125% tem 524 —, e o Enviar ficava abaixo da
   dobra, com a roda do mouse presa no formulário; com 420 são 516 px, menos que os 521 da primeira altura fora do modo deitado, e a página nunca rola por causa
   do piso). O corpo dela é a grade do miolo: o mapa com 3fr e o formulário com 2fr (60% / 40%, o formulário com no mínimo 320 px), e o formulário
   rola por dentro. EM PÉ (375×812, a barra do menu embaixo): a página rola inteira — o mapa em cima (46% da altura, do bloco da janela) e o formulário
   embaixo — e a barra do Enviar fica presa ao pé da área que rola (sticky, acima da barra do menu). DEITADO (740×360 e 844×390): mapa e formulário lado a
   lado (1,3fr / 1fr, como a janela), a barra de ferramentas numa linha e a ajuda numa linha (regras da janela). As contas: cabeçalho 44 + respiro 6 + pé 8
   (844×390 no iPhone: o pé é o indicador, 21) = a caixa tem 302 px (740×360) e 319 (844×390); menos a borda de 2 e o rodapé de 53 (botão de 40 + 6 + 6 + 1)
   = corpo de 247 e 264; o mapa = corpo − 12 (respiro) − 32 (barra) − 17 (ajuda) − 12 (dois vãos) = 174 e 191 px (o mínimo é 160). */
.pc-nova-pagina{display:flex;flex-direction:column}
.pc-nova-pagina > .pagina-cab{flex:none}
.pc-nova-caixa{flex:1 1 0;display:flex;flex-direction:column;min-height:420px;overflow:hidden;background:var(--surface);background-image:var(--cartao-fundo);
  border:1px solid var(--cartao-borda);border-radius:var(--r-lg);box-shadow:var(--sombra-cartao)}
.pc-nova-caixa .pc-pedido-corpo{grid-template-columns:minmax(0,3fr) minmax(320px,2fr)}
.pc-nova-caixa .pc-pedido-mapa-col{padding:14px 14px 12px 16px}
.pc-nova-caixa .pc-pedido-form{padding:14px 18px 16px 16px}
/* o "Pedido enviado": a mensagem e os três caminhos (Ver o pedido, Solicitar outra, Ver nos ajustes pendentes); enviado, o rodapé do Enviar sai */
.pc-nova-enviado{margin:0}
.pc-nova-acoes{display:flex;flex-wrap:wrap;gap:8px}
.pc-nova-acoes .panel-btn{margin-top:0}
.pc-nova-caixa[data-modo="enviado"] .pc-pedido-acoes{display:none}
/* a carga que falhou (o servidor fora do ar, sem rede): só a mensagem com o "Tentar novamente" — sem o quadro cinza vazio do mapa (nem o seletor de camada
   sem mapa) e sem o rodapé do Enviar. A mensagem toma a caixa toda (uma coluna) */
.pc-nova-caixa[data-modo="erro"] .pc-pedido-mapa-col,.pc-nova-caixa[data-modo="erro"] .pc-pedido-acoes{display:none}
.pc-nova-caixa[data-modo="erro"] .pc-pedido-corpo{grid-template-columns:minmax(0,1fr)}
.pc-nova-caixa[data-modo="erro"] .pc-pedido-form{border-left:0}
/* o motivo do envio que falhou, repetido no rodapé (que fica sempre à vista): em destaque */
.pc-nova-caixa .cr-pedido-nota[data-erro]{color:var(--erro);font-weight:600}
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  /* o vão de baixo da área que rola sai do padding (20 px do .tela-pagina) para um espaçador no fim: o sticky do rodapé encosta na barra do menu, sem uma
     faixa de 20 px por onde o texto do formulário passava por baixo dele (revisão de 29/09/2026) */
  .pc-nova-pagina{display:block;padding-bottom:0}
  .pc-nova-pagina::after{content:"";display:block;height:20px}
  .pc-nova-caixa{display:block;min-height:0;overflow:visible;border-radius:var(--r-md)}
  .pc-nova-caixa .pc-pedido-corpo{display:block;overflow:visible}
  .pc-nova-caixa .pc-pedido-mapa-col{padding:10px 12px 8px}
  .pc-nova-caixa .pc-pedido-form{padding:12px}
  .pc-nova-caixa .pc-pedido-acoes{position:sticky;bottom:0;z-index:5;padding:10px 12px;background:var(--surface);border-radius:0 0 var(--r-md) var(--r-md)}
  /* a lista de setores aberta (em fluxo, dentro do formulário) não fica atrás do rodapé preso: enquanto ela está aberta o rodapé volta ao seu lugar, no fim */
  .pc-nova-caixa:has(.cs-wrap.aberto) .pc-pedido-acoes{position:static}
  /* o erro do envio, trazido à vista (scrollIntoView) acima do rodapé preso (~76 px com a nota em duas linhas) */
  .pc-nova-caixa #pcPedErro{scroll-margin-bottom:88px}
}
@media (orientation:landscape) and (max-height:520px){
  .pc-nova-pagina{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .pc-nova-pagina > .pagina-cab{margin-bottom:6px}
  .pc-nova-caixa{min-height:240px}
  .pc-nova-caixa .pc-pedido-corpo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .pc-nova-caixa .pc-pedido-mapa-col{padding:6px 10px 6px 12px}
  .pc-nova-caixa .pc-pedido-form{padding:12px}
  .pc-nova-caixa .pc-pedido-acoes{padding-bottom:6px}
}

/* ── AJUSTES › A APROVAÇÃO PELO COORDENADOR (Alan, 29/09/2026) ────────────────────────────────────────────────────────────────
   "É interessante que ele possa selecionar vários e aprovar de uma vez, ou individualmente". Na MESMA lista de Ajustes › Pendentes: a etapa do pedido (aguardando
   aprovação em azul, rejeitado em vermelho), a caixinha na 1ª coluna e os três botões de ícone na coluna Situação (Aprovar, Rejeitar, Cancelar), o "Ajustar e
   reenviar" de quem pediu e a barra do lote — a MESMA barra e as MESMAS caixinhas das Alocações (.alo-selbar, .alo-sel: nada copiado). SÓ tokens de cor. */
/* duas classes: o .cr-situ genérico (cinza) vem MAIS TARDE no arquivo e, com uma classe só, vencia estas cores (medido: os dois selos saíam cinza) — como o .cr-situ.cr-situ-atendida */
.cr-situ.cr-situ-aprovacao{background:var(--info-bg);color:var(--info)}
.cr-situ.cr-situ-ajustar{background:var(--erro-bg);color:var(--erro)}
/* os três botões de ícone na linha: 36 px e com respiro entre eles (eram 30 px colados: o Rejeitar ao lado do Aprovar era um clique errado longe de ser desfeito) */
.ap-decisao{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.ap-dec.btn-icone{width:36px;height:36px;border-radius:var(--r-md)}
.ap-dec .icon{width:15px;height:15px}
.ap-dec-aprovar{color:var(--ok)}
.ap-dec-cancelar{color:var(--erro)}
.ap-dec:focus-visible,.ap-reenviar:focus-visible{outline:none}
.ap-reenviar{margin-top:0;height:36px;padding:0 10px;font-size:12px}
.ap-reenviar .icon{width:14px;height:14px}
.aj-tabela .aj-c-sel{width:1%;padding-right:2px}
.aj-tabela td.aj-c-sel{vertical-align:top}
/* a linha escolhida, como nas Alocações: fundo leve e a faixa da marca na 1ª célula */
#telaConteudo .aj-tabela tbody tr:has(.alo-sel:checked) td{background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
#telaConteudo .aj-tabela tbody tr:has(.alo-sel:checked) td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
/* com SETE números (entra o "Em aprovação") a janela média não tem 90 px por número: o respiro dos lados e o espaçamento do rótulo encolhem um pouco, para nenhum título ser cortado
   (medido em 1024 px com o menu aberto: "Motoristas" e "Em aprovação" saíam cortados; com seis números nada cortava) */
@media (min-width:901px) and (max-width:1400px){
  #ajKpis:has(> .pt-kpi:nth-child(7)) .pt-kpi{padding-left:8px;padding-right:8px}
  #ajKpis:has(> .pt-kpi:nth-child(7)) .pt-kpi > .pt-kpi-rot{letter-spacing:.03em}
}
/* a decisão em andamento: nada se decide duas vezes */
.ap-ocupado{opacity:.65;pointer-events:none}
.ap-selbar .panel-btn .icon{width:15px;height:15px}
/* a janelinha do motivo (a caixa é a da janela do pedido: cr-pedido-box) e a nota do pedido no detalhe */
.ap-jan-lista{margin-top:0}
/* (revisão de 29/09/2026) a caixa não rola INTEIRA: só o corpo rola, e o cabeçalho e o rodapé (Voltar / Confirmar) ficam à vista — deitado (844×390) com vários pedidos o "Confirmar" caía abaixo da
   dobra e o motivo aparecia pela metade. Em tela baixa a lista dos pedidos também encolhe */
.diag-box.ap-box{overflow:hidden}
.ap-box .diag-head,.ap-box .cr-pedido-acoes{flex:none}
.ap-box .cr-pedido-corpo{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-height:520px){.ap-jan-lista{max-height:76px}}
.ap-jan-fora{margin:0;font-size:12px;color:var(--alerta)}
.ap-nota{margin:8px 0}
.ap-nota .icon{color:var(--info)}
.ap-nota.ap-nota-ok .icon{color:var(--ok)}
/* SEM APROVADOR, PARADO E DESFAZER O APROVAR (Alan, 30/09/2026). As duas marcas da linha que aguarda (vermelho suave = sem aprovador: o Administrador decide; âmbar = parado há mais de 24 h),
   o botão "Desfazer · N s" na linha do pedido que o usuário aprovou (com o aviso do servidor embaixo quando ele recusa) e o realce do número de Ajustes no menu (a bolinha vira âmbar).
   SÓ tokens de cor (claro e escuro); os números do botão são tabulares e a largura dele não pula a cada segundo */
.ap-marcas{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ap-selo{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:var(--r-full);font-size:10.5px;font-weight:600;white-space:nowrap}
.ap-selo .icon{width:11px;height:11px}
.ap-selo-sem{background:var(--erro-bg);color:var(--erro)}
.ap-selo-parado{background:var(--alerta-fundo);color:var(--alerta)}
.ap-desfazer{margin-top:0;height:36px;padding:0 10px;font-size:12px;font-variant-numeric:tabular-nums}
.ap-desfazer .icon{width:14px;height:14px}
.ap-desfazer:focus-visible{outline:none}
.ap-desf-seg{display:inline-block;min-width:2ch;text-align:right}
.ap-desf-aviso{margin-top:4px;max-width:240px;white-space:normal;line-height:1.35;color:var(--alerta)}
.ap-desf-aviso .icon{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.snav-conta.atencao{background:var(--alerta);color:var(--surface)}
.app .snav-mais.snav-tem-atencao .snav-mais-conta{background:var(--alerta)}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .ap-marcas{justify-content:flex-end}
  .ap-desfazer{height:40px}
  .ap-desf-aviso{max-width:none}
}
/* NO CELULAR (em pé e deitado): a caixinha vai para o canto do cartão (40 px de alvo) e a manchete cede a largura dela; os botões de ícone com 40 px e
   alinhados à direita, como a situação; a barra do lote com os botões só com o texto (em 375 px três botões e o "Limpar seleção" não cabem com o ícone) */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #telaConteudo .aj-tabela tbody tr:has(> td.aj-c-sel > label){position:relative}
  #telaConteudo .aj-tabela tbody td.aj-c-sel{position:absolute;top:6px;right:6px;z-index:1;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
  #telaConteudo .aj-tabela tbody td.aj-c-sel:not(:has(> label)){display:none}
  #telaConteudo .aj-tabela tbody tr:has(> td.aj-c-sel > label) .aj-c-alvo{padding-right:44px}
  #telaConteudo .aj-tabela .aj-c-sel .alo-sel-caixa{width:40px;height:40px;margin:0}
  #telaConteudo .aj-tabela .aj-c-sel .alo-sel{width:20px;height:20px}
  .ap-dec.btn-icone{width:40px;height:40px}
  .ap-decisao{justify-content:flex-end}
  .ap-reenviar{height:40px}
  .ap-selbar .panel-btn .icon{display:none}
  .ap-selbar .panel-btn{padding:0 8px}
  /* o cartão escolhido leva o fundo e a borda da marca; as células não (a da caixinha, absoluta, não leva a faixa da 1ª célula) */
  #telaConteudo .aj-tabela tbody tr:has(.alo-sel:checked) td{background:transparent}
  #telaConteudo .aj-tabela tbody tr:has(.alo-sel:checked) td:first-child{box-shadow:none}
  #telaConteudo .aj-tabela tbody tr:has(.alo-sel:checked){background:color-mix(in srgb,var(--brand) 6%,var(--surface));border-color:color-mix(in srgb,var(--brand) 45%,var(--campo-borda))}
}
/* EM PÉ a barra fica FIXA acima da barra de baixo, como o "Aplicar" da Escala (revisão de 29/09/2026): presa (sticky) ela não sai do bloco da lista — com a lista no topo e a tela curta ficava por
   baixo do menu (medido em 375×667, 390×700 e 360×640: a barra terminava 23 a 50 px abaixo do topo do menu). O fim da lista ganha o respiro dela para nenhuma linha ficar coberta */
@media (max-width:900px) and (orientation:portrait){
  .alo-selbar.ap-selbar{position:fixed;left:12px;right:12px;bottom:calc(68px + var(--snav-baixo));margin:0;z-index:50}
  #ajCorpo:has(> .ap-selbar:not([hidden])){padding-bottom:132px}
}
/* EM PÉ a barra tem o total e o "Limpar seleção" na 1ª linha e os três botões, do mesmo tamanho, na 2ª (em 375 px os quatro controles numa linha só se encostavam) */
@media (max-width:760px) and (orientation:portrait){
  .ap-selbar .alo-selbar-txt{flex:1 1 calc(100% - 120px);min-width:0}
  .ap-selbar .btn-fantasma{order:1}
  .alo-selbar.ap-selbar .panel-btn{order:2;flex:1 1 28%}
}

/* ── PONTUALIDADE · EMBARQUES E DESEMBARQUES POR LOCALIDADE DA LINHA (Alan, 30/09/2026) ──────────────────────────────────────────────────────────────
   O cartão logo abaixo do "Viagens do dia" ("um card que ia dar o extrato, localidade por localidade, de embarques e desembarques"). Vocabulário da casa: .cartao, .cartao-cab, .vg-tabela na .tabela-rol (rolagem própria),
   .panel-btn e .btn-icone no cabeçalho, o realce âmbar do ao vivo. Largura toda (nenhum max-width). SÓ tokens (claro e escuro pelo html.dark); o zero e o indisponível usam o .pt-apagado de sempre. */
.pt-emb-cab{align-items:flex-start;gap:12px;margin-bottom:8px}
.pt-emb-tit{min-width:0;flex:1 1 auto}
.pt-emb-tit .cartao-titulo{margin-bottom:0}
.pt-emb-tit .pt-sub-detalhe{margin-top:2px;overflow-wrap:anywhere}
.pt-emb-cab .pt-cab-acoes .panel-btn{height:36px;padding:0 12px;font-size:12.5px}
/* RECOLHIDO POR PADRÃO (Alan, 01/10/2026): só o cabeçalho — o título, o subtítulo (as linhas e o período) e o chevron; Atualizar e Excel só existem com o corpo à vista. O cabeçalho não deixa a margem de baixo que
   separava dele a tabela */
.pt-emb-cartao[data-aberto="0"] .pt-cab-acoes > :not(.pt-toggle-ico){display:none}
.pt-emb-cartao[data-aberto="0"] .pt-emb-cab{margin-bottom:0}
/* (celular em pé, medido na revisão de 01/10/2026: o título comprido + o chevron não cabem numa linha e o chevron caía sozinho numa 2ª fileira — cartão de 118 px contra 70; recolhido o cabeçalho NÃO quebra e o título cede) */
.pt-emb-cartao[data-aberto="0"] .pt-emb-cab{flex-wrap:nowrap}
.pt-emb-girando .icon{animation:fmGira 1s linear infinite}
/* a frase do cartão: por que não há números, o que está acontecendo, o erro */
.pt-emb-msg{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;line-height:1.45;color:var(--texto-2)}
.pt-emb-msg[data-tom="info"]{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.pt-emb-msg[data-tom="erro"]{background:var(--erro-bg);border-color:var(--erro);color:var(--erro)}
.pt-emb-msg[data-tom="alerta"]{background:var(--alerta-fundo);border-color:var(--alerta);color:var(--alerta)}
/* o que foi somado: "N viagens lidas de M no período; K sem leitura" (o "sem leitura" leva o balão), a barrinha do andamento e de quando são os números */
.pt-emb-resumo{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;font-size:12.5px;line-height:1.4;color:var(--texto-2)}
.pt-emb-resumo b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pt-emb-sem{border-bottom:1px dotted var(--faint);cursor:help}
.pt-emb-pisos{border-bottom:1px dotted var(--faint);cursor:help}   /* o número de viagens que explica o piso duplo (240 na lista × 251 aqui): o balão diz a conta */
.pt-emb-prog{flex:0 1 160px;min-width:80px;height:4px;border-radius:var(--r-full);background:var(--info-bg);overflow:hidden}
.pt-emb-prog > i{display:block;width:0;height:100%;border-radius:var(--r-full);background:var(--info);transition:width 260ms var(--ease-out-smooth)}
.pt-emb-quando{font-size:11.5px;color:var(--muted);cursor:help}
/* de onde vêm os números (banco permanente): "4 lidas agora no Totalbus · 3 do banco · 2 congeladas"; cada parte leva o balão dela, a das desatualizadas em âmbar, e o "Reler as congeladas" vai à direita */
.pt-emb-origem{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:-4px 0 10px;font-size:12.5px;line-height:1.4;color:var(--texto-2)}
.pt-emb-rot{color:var(--muted)}
.pt-emb-origem-txt{min-width:0;overflow-wrap:anywhere}
.pt-emb-seg{border-bottom:1px dotted var(--faint);cursor:help}
.pt-emb-seg[data-tom="frio"]{color:var(--muted)}
.pt-emb-seg[data-tom="alerta"]{color:var(--alerta);border-bottom-color:var(--alerta)}
.panel-btn.pt-emb-reler{margin:0 0 0 auto;height:28px;padding:0 10px;font-size:12px;white-space:nowrap}
.panel-btn.pt-emb-reler .icon{width:13px;height:13px}
/* o limite por pedido, dito na tela (nunca corta calado) */
.pt-emb-aviso{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;padding:8px 12px;border:1px solid var(--alerta);border-radius:var(--r-md);background:var(--alerta-fundo);font-size:12.5px;line-height:1.45;color:var(--alerta)}
.pt-emb-aviso > .icon{flex:none;width:16px;height:16px;margin-top:2px}
/* os números de antes, esmaecidos, até a 1ª resposta do pedido novo (filtro trocado): a tabela não some nem pula */
.pt-emb-rol,.pt-emb-resumo,.pt-emb-origem{transition:opacity 160ms ease}
.pt-emb-cartao[data-velho] .pt-emb-rol,.pt-emb-cartao[data-velho] .pt-emb-resumo,.pt-emb-cartao[data-velho] .pt-emb-origem{opacity:.5}
/* a tabela: Localidade (sigla + nome) e os dois números; o cabeçalho e o total ficam presos na rolagem (como a lista do dia) */
.pt-emb-rol{margin-top:0;max-height:min(62vh,640px);max-height:min(62dvh,640px)}
.pt-emb-rol thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);box-shadow:0 1px 0 var(--linha-tabela)}
.pt-emb-rol tfoot td{position:sticky;bottom:0;z-index:1;background:var(--surface-2);box-shadow:0 -1px 0 var(--linha-tabela);border-bottom:0;font-weight:700;color:var(--ink)}
.pt-emb-tab tbody tr{cursor:default}
.pt-emb-tab td.pt-emb-local{white-space:normal;text-align:left}
.vg-tabela td b.pt-emb-sigla{display:inline-block;min-width:34px;margin-right:8px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.pt-emb-tab th.pt-emb-n,.pt-emb-tab td.pt-emb-n{width:110px;text-align:center;font-variant-numeric:tabular-nums}
.vg-tabela tfoot td b{font-weight:700}
.pt-emb-tab tfoot td.pt-emb-n{font-size:13px}
.pt-emb-nota{margin-top:10px}
/* celular em pé e deitado: a página rola (nada de caixa rolando dentro da página, como a lista do dia); as três colunas cabem sem rolagem lateral */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .pt-emb-rol{max-height:none;overflow:visible}
  .pt-emb-rol thead th,.pt-emb-rol tfoot td{position:static;box-shadow:none}
  .pt-emb-tab th.pt-emb-n,.pt-emb-tab td.pt-emb-n{width:64px}
  .pt-emb-tab th,.pt-emb-tab td{padding-left:10px;padding-right:10px}
  .pt-emb-cab{flex-wrap:wrap}
  .pt-emb-cab .pt-cab-acoes{margin-left:auto}
}
@media (max-width:380px){
  .vg-tabela td b.pt-emb-sigla{min-width:0;margin-right:6px}
  .pt-emb-tab th.pt-emb-n,.pt-emb-tab td.pt-emb-n{width:56px}
}

/* A LINHA DE BAIXO DO PISO DUPLO (30/09/2026, revisão): "Itamarati · Convencional e Leito cama · 1.470 km" é mais comprida que a de uma classe só (246 px; o cartão do celular dá 239 em 375 px e 224 em 360) e
   quebrava no meio de "1.470 km" (Escala) ou cortava o km com reticências (lista da Pontualidade). Cada pedaço (classe e km) é uma PEÇA inteira (ptSubLinhaHtml marca com .pt-sub-peca só o piso duplo): a linha só
   quebra ENTRE as peças, e a peça que sozinha não cabe corta com reticências. A margem faz o papel do espaço que a peça perde no começo; o alinhamento é pelo topo porque a peça corta (overflow) e o
   inline-block cortado apoia o texto na borda de baixo. No cartão do celular a lista corta a linha numa linha só (nowrap): o piso duplo desce para uma 2ª linha em vez de perder o km */
.sub > .pt-sub-peca{display:inline-block;max-width:100%;margin-left:.28em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #ptLista .pt-c-linha > .sub:has(> .pt-sub-peca){overflow:visible;text-overflow:clip;white-space:normal}
}

/* ── OS BOTÕES DE FERRAMENTA DO PEDIDO DE CERCA: UMA COR SÓ E O ÍCONE EM MOVIMENTO (Alan, 06/10/2026: "tem que colocar animação nos ícones... pra padronizar esses botões também... e vamos usar uma cor só neles... pra
   não deixar carnavalesco demais... e no modo escuro o texto fica avermelhado no hover") ── Valia a regra de 01/10 (uma cor por ação: verde, petróleo, azul, vermelho, âmbar, violeta, rosa): saiu. Agora a barra de
   desenho do mapa (.pc-ferr-btn), o Copiar WKT / Copiar coordenadas do detalhe (.pc-copiar) e o Cancelar da janela do pedido (.btn-uni) têm a MESMA receita dos botões do pedido (.cr-acao): parados, como todo botão do
   sistema; no hover (só com mouse de verdade) o degradê AZUL — um só para todos —, o texto BRANCO (no claro e no escuro: o vermelho do .panel-btn:hover do modo noturno não os alcança), subida de 1 px, o brilho que
   atravessa o botão (o do "Abrir o mapa") e o ÍCONE se movendo conforme o que ele diz: o lápis rabisca, o visto se desenha, o desfazer dá a volta para trás, a lixeira balança, o recomeçar gira, o copiar pula, o X gira e
   estala, o enviar voa. Ao apertar, o botão afunda. SÓ movimento em resposta ao gesto: nenhum relógio, nenhum laço (a exceção é o círculo girando do "Enviando…", que é espera de verdade). Os primários (btn-primario)
   seguem vermelhos da marca, com o ícone em movimento também; o desabilitado não muda. */
.pc-ferr-btn,.pc-copiar .panel-btn,.btn-uni{--uni-g1:oklch(0.5 0.15 258);--uni-g2:oklch(0.6 0.15 258)}
/* A TRANSIÇÃO NÃO APAGA O BOTÃO (Alan, 07/10/2026: "os botões estão legais… o problema é que na transição eles acabam ficando sem cor/opacidade… um efeito não legal"): antes o hover trocava o `background` (fundo branco → degradê) e a transição
   fazia o degradê aparecer de uma vez, com o texto ainda escuro, e o fundo branco virar transparente em 150 ms — sobre o mapa o botão ficava "vazado" (e na saída, o inverso: o degradê sumia e ficava texto branco sobre o mapa). Agora o fundo de repouso NUNCA muda (no hover
   a regra do .panel-btn que o tingia de rosa também é anulada) e o degradê é uma camada atrás do texto (::before) que aparece e some só por opacidade; o TEXTO troca de cor de uma vez, no ponto em que o fundo e a letra se equilibram (72 ms depois de entrar e 38 ms depois de sair, medidos na curva de 150 ms: o contraste mínimo vai de 2,3 a ~3,5 em vez de desbotar pelo cinza): em nenhum quadro o botão fica transparente nem apagado */
.pc-ferr-btn:not(.btn-primario),.pc-copiar .panel-btn,.btn-uni{position:relative;overflow:hidden;isolation:isolate;transition:border-color var(--t-rapida),color 0s linear 38ms,box-shadow var(--t-rapida),transform var(--t-rapida),filter var(--t-rapida)}
.pc-ferr-btn:not(.btn-primario)::before,.pc-copiar .panel-btn::before,.btn-uni::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(92deg,var(--uni-g1),var(--uni-g2));transition:opacity var(--t-rapida)}
.pc-ferr-btn .icon,.pc-copiar .panel-btn .icon,.btn-uni .icon,.pc-enviar-btn .icon{flex:none;transform-origin:center}
.pc-ferr-btn:not(.btn-primario)::after,.pc-copiar .panel-btn::after,.btn-uni::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;opacity:0;transform:translateX(-140%) skewX(-20deg);background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent)}
@keyframes pcLapis{0%{transform:rotate(0)}22%{transform:rotate(-16deg) translate(-1px,1px)}52%{transform:rotate(11deg)}78%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes pcLixo{0%{transform:rotate(0)}20%{transform:rotate(-14deg) translateY(-1px)}46%{transform:rotate(12deg)}72%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes pcCopia{0%{transform:translate(0,0) scale(1)}42%{transform:translate(2px,-2px) scale(1.16)}100%{transform:translate(0,0) scale(1)}}
@keyframes pcGira{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes pcVoa{0%{transform:translate(0,0);opacity:1}44%{transform:translate(7px,-7px);opacity:0}45%{transform:translate(-7px,7px);opacity:0}100%{transform:translate(0,0);opacity:1}}
.icon-gira{animation:pcGira 800ms linear infinite}
@media (hover:hover){
  .pc-ferr-btn:not(.btn-primario):hover:not(:disabled),.pc-copiar .panel-btn:hover:not(:disabled),.btn-uni:hover:not(:disabled){color:#fff;transform:translateY(-1px);border-color:var(--uni-g2);background-color:var(--btn-contorno-fundo);box-shadow:0 4px 11px color-mix(in srgb,var(--uni-g2) 28%,transparent);transition-delay:0s,72ms,0s,0s,0s}
  html.dark .pc-ferr-btn[data-pc-des]:not(.btn-primario):hover:not(:disabled),html.dark .pc-copiar .panel-btn:hover:not(:disabled),html.dark .btn-uni:hover:not(:disabled){color:#fff}
  .pc-ferr-btn:not(.btn-primario):hover:not(:disabled)::before,.pc-copiar .panel-btn:hover:not(:disabled)::before,.btn-uni:hover:not(:disabled)::before{opacity:1}
  .pc-ferr-btn:not(.btn-primario):hover:not(:disabled)::after,.pc-copiar .panel-btn:hover:not(:disabled)::after,.btn-uni:hover:not(:disabled)::after{animation:ptMapaBrilho 780ms cubic-bezier(.23,1,.32,1) 1 both}
  .pc-ferr-btn[data-pc-des="desenhar"]:hover:not(:disabled) .icon{animation:pcLapis 640ms cubic-bezier(.45,.05,.55,.95) 1}
  .pc-ferr-btn[data-pc-des="concluir"]:hover:not(:disabled) .icon{animation:crVisto 620ms cubic-bezier(.34,1.4,.64,1) 1}
  .pc-ferr-btn[data-pc-des="desfazer"]:hover:not(:disabled) .icon{animation:crDesfaz 700ms cubic-bezier(.45,.05,.55,.95) 1}
  .pc-ferr-btn[data-pc-des="remover"]:hover:not(:disabled) .icon{animation:pcLixo 560ms cubic-bezier(.45,.05,.55,.95) 1}
  .pc-ferr-btn[data-pc-des="recomecar"]:hover:not(:disabled) .icon{animation:pcGira 640ms cubic-bezier(.45,.05,.55,.95) 1}
  .pc-ferr-btn[data-pc-des="copiar"]:hover:not(:disabled) .icon,.pc-copiar .panel-btn:hover:not(:disabled) .icon{animation:pcCopia 520ms cubic-bezier(.34,1.4,.64,1) 1}
  .pc-ferr-btn[data-pc-des="limpar"]:hover:not(:disabled) .icon,.btn-uni:hover:not(:disabled) .icon{animation:crX 560ms cubic-bezier(.3,.9,.4,1) 1}
  .pc-enviar-btn:hover:not(:disabled) .icon{animation:pcVoa 620ms cubic-bezier(.45,.05,.55,.95) 1}
}
.pc-ferr-btn:not(.btn-primario):active:not(:disabled),.pc-copiar .panel-btn:active:not(:disabled),.btn-uni:active:not(:disabled){transform:translateY(0) scale(.97);filter:brightness(.97)}
/* ── MAPA DA FROTA: OS CONTROLES ACOMPANHAM O INSPETOR; A LINHA ESCOLHIDA É NEUTRA (29/09/2026) ────────────────────────────────────────────────────────
   (1) Alan: "quando eu pesquiso um veículo e clico nele, você abre um menu lateral direito, porém esse menu lateral direito cobre o tipo do mapa, ou botão de
   cercas, o botão de ajustar, e isso atrapalha um pouco... você teria que ajustar para que os botões... se adaptar assim pra não ficar pra trás desse menu".
   O inspetor (.drawer) é uma folha SOBREPOSTA ao mapa: o mapa NÃO muda de tamanho (nada de invalidateSize, e o centro do carro — fleetCentralizarVisivel — é o
   de sempre); quem morava no canto direito é que anda, na mesma curva do painel (--t-media): a barra do mapa (tipo do mapa, Cercas, Ajustar), a atribuição do
   Leaflet (canto de baixo) e a faixa de status (embaixo, à esquerda). O estado é a classe .gaveta-aberta do .corpo, ligada e desligada num lugar só
   (fleetRenderDrawer, em app.js, que já a ligava: clique no veículo ou na lista, ×, Voltar do celular, foco vindo da Pontualidade, trocar de tela); a largura é a
   --fm-gaveta-w do próprio painel (o mesmo valor, no computador e deitado, com o entalhe). SÓ quando o painel é lateral: em pé no celular ele é uma folha de baixo,
   que não cobre o canto de cima, e nada anda (por isso a media query é a negação da folha). O menu do tipo do mapa é ancorado na borda direita do botão e abre para
   a esquerda — o único lado que cabe ao lado do painel. Os botões nunca encolhem (flex:none): sem largura, a barra quebra em linhas em vez de amassar.
   A faixa de status SOBE acima da atribuição do Leaflet (que aparecia por baixo do painel e agora volta à vista ao lado dele: a licença do OSM exige) e perde o
   texto "só o X no mapa · feche o painel para ver a frota" (o painel aberto já diz qual é o carro) e os separadores (que ficariam soltos numa quebra de linha).
   MAPA ESTREITO (revisão de 29/09: 960 px com o menu lateral aberto dá um mapa de 408 px, dos quais o painel toma 344): quem decide é a largura da ÁREA DO MAPA
   (container query na .mapa-area, não a da janela: o menu lateral aberto ou recolhido muda uns 190 px), só no computador (deitado no celular a área nunca é
   estreita). Os limites somam os 344 px do painel ao que cada peça pede; se a largura do painel mudar, revisar os três:
     · até 719 px (344 + 64 de folga do zoom + ~290 dos três botões com nome): só os ícones, 36 px cada (o nome segue para o leitor de tela; o balão diz o que faz);
       o menu do tipo do mapa perde o mínimo de 132 px (o conteúdo pede uns 85) para caber na faixa livre, em vez de sair pela esquerda do mapa;
     · até 527 px (344 + 10 + a linha mais larga da faixa de status, "Atualizado hh:mm:ss", ~155 + folga): a faixa de status sai;
     · até 459 px (344 + ~115 de faixa livre: zoom, botão e as margens pedem ~100): sobra pouco mapa ao lado do painel e a barra sai — fechar o painel a devolve.
       Antes ela ficava por trás dele; agora não fica amassada em cima do zoom */
@media (min-width:761px),(orientation:landscape) and (max-height:520px){
  .mapa-area .mapbar,.mapa-area .leaflet-right{transition:right var(--t-media)}
  .mapa-area .map-status{transition:bottom var(--t-media)}
  .corpo.gaveta-aberta .mapa-area .mapbar{right:calc(var(--fm-gaveta-w) + 10px);max-width:calc(100% - var(--fm-gaveta-w) - 64px);flex-wrap:wrap;justify-content:flex-end}
  .corpo.gaveta-aberta .mapa-area .mapbar > *{flex:none}
  .corpo.gaveta-aberta .mapa-area .leaflet-right{right:var(--fm-gaveta-w)}
  .corpo.gaveta-aberta .mapa-area .map-status{max-width:calc(100% - var(--fm-gaveta-w) - 20px);flex-wrap:wrap;column-gap:10px;row-gap:2px;bottom:38px}
  .corpo.gaveta-aberta .mapa-area .map-status .sep,.corpo.gaveta-aberta .mapa-area #fmBarraVeic{display:none}
}
@media (min-width:761px) and (min-height:521px){
  .mapa-area:has(> #fmDrawer){container-type:inline-size;container-name:fmarea}
  @container fmarea (max-width:719px){
    .corpo.gaveta-aberta .mapbar .mapbar-btn{font-size:0;gap:0;width:36px;height:36px;padding:0;justify-content:center}
    .corpo.gaveta-aberta .mapbar .mapbar-btn .dp-seta{display:none}
    .corpo.gaveta-aberta .mapbar-menu{min-width:0}
  }
  @container fmarea (max-width:527px){
    .corpo.gaveta-aberta .mapa-area .map-status{display:none}
  }
  @container fmarea (max-width:459px){
    .corpo.gaveta-aberta .mapa-area .mapbar{display:none}
  }
}
/* (2) Alan: "quando tem um veículo selecionado na lista, você colore a linha de vermelho e eu não gosto desse estilo. Gostaria que você usasse um outro estilo
   pra mostrar a seleção do item". Sai o fundo rosa e o contorno vermelho: a linha escolhida ganha o fundo do item ativo do menu lateral (--sidebar-acento, cinza
   translúcido, nos dois temas) e uma barra de 3 px à esquerda na cor do texto (--ink: escura no claro, clara no escuro). O prefixo já é o negrito da linha (700):
   ficar mais grosso só na escolhida a alargaria e empurraria a placa. O hover (fundo mais leve, sem barra) segue distinguível da escolhida; e sem anel de foco.
   SÓ o #fmLista: a lista das Cercas divide a classe .veic-row.ativa e segue como estava até o Alan pedir. Sem cor nova: só tokens, que existem nos dois temas.
   O texto discreto da linha escolhida (placa 11 px e idade 10,5 px, em --faint) sobe um degrau para --muted: no escuro o --faint sobre este fundo dá 3,5:1 (o
   fundo rosa antigo dava 4,9) e o --muted dá 4,9; no claro passa de 2,4:1 para 4,3 */
/* A BARRA É A BORDA ESQUERDA DO PRÓPRIO ITEM (Alan, 01/10/2026, depois da pílula: "esse marcador de seleção preto ainda não me agrada... parece que ele não faz parte do item
   que ele está"). A tira reta (29/09: "não casou com as bordas") e a pílula solta a 3 px da borda (29/09 à noite) eram PEÇAS À PARTE, desenhadas por cima da linha. Agora é uma
   sombra interna de 3 px: nasce na borda da linha, acompanha o raio dos cantos (9 px) e afina até sumir na curva — como a borda esquerda de um cartão arredondado. Sem elemento
   novo, sem posição absoluta (não entra na altura nem corta o texto) e sem anel: é só a borda esquerda.
   NO VERMELHO DA MARCA (Alan, 01/10/2026, depois de ver a borda do item: "o item de seleção deu uma melhorada... mas ideal é que fosse vermelho na cor padrão do logo"): a borda é --brand (o vermelho do logo, o mesmo
   nos dois temas: o vermelho oficial não muda no escuro); o fundo segue o neutro do item ativo do menu — o "vermelho" que ele rejeitou em 29/09 era o FUNDO rosa com contorno, não a barra */
#fmLista .veic-row.ativa{background:var(--sidebar-acento);outline:none;box-shadow:inset 3px 0 0 var(--brand)}
#fmLista .veic-row.ativa .veic-l1 i,#fmLista .veic-row.ativa .veic-meta span{color:var(--muted)}
#fmLista .veic-row:focus,#fmLista .veic-row:focus-visible{outline:none}
/* A LISTA DE CERCAS NO MESMO ESTILO DE SELEÇÃO (Alan, 06/10/2026: "lá na parte de cercas... temos um menu parecido com esse... você precisa ajustar pra seleção do menu de cercas ser no estilo desse"): o fundo neutro do item
   ativo do menu e a barra de 3 px da marca à esquerda, no lugar do fundo rosa com contorno vermelho; as mesmas regras do #fmLista (cada uma na sua lista: o teste da lista da frota segue casando a dele) */
#cercaLista .veic-row.ativa{background:var(--sidebar-acento);outline:none;box-shadow:inset 3px 0 0 var(--brand)}
#cercaLista .veic-row.ativa .veic-l1 i,#cercaLista .veic-row.ativa .veic-meta span{color:var(--muted)}
#cercaLista .veic-row:focus,#cercaLista .veic-row:focus-visible{outline:none}

/* ── CONFERÊNCIAS DO VÍNCULO (25/09/2026) ─────────────────────────────────────────────────────────────────────────────
   (29/10/2026) A tela Conferências do vínculo saiu do sistema (ninguém a usava). Ficam aqui as regras cf-* que as telas de Alocações, Ajustes, Correções de alocação e Pedidos de cerca
   ainda usam (aviso, faixa de KPIs, janela de detalhe, linha do tempo), e ESTE MARCADOR, que muitos testes usam como a fronteira do CSS que só aceita tokens de cor.
   SÓ tokens de cor (var(--…)): o escuro sai dos mesmos nomes (html.dark troca os valores). A faixa de KPIs é a .pt-kpis-dia (título em cima, número embaixo). */
.cf-aviso{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-md);background:var(--surface);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.cf-aviso-ok{border-left-color:var(--ok)}
.cf-aviso-erro{border-left-color:var(--erro);background:var(--erro-bg)}
/* buscando de novo (Atualizar, outro período): o que está na tela esmaece, sem pular de lugar; só depois de 160 ms, então uma resposta rápida nunca pisca */
.cf-carregando{opacity:.55;pointer-events:none;transition:opacity 140ms ease 160ms}
.cf-kpis .pt-kpi b.cf-n-ok{color:var(--ok)}
.cf-kpis .pt-kpi b.cf-n-erro{color:var(--erro)}
.cf-kpis .pt-kpi b.cf-n-aviso{color:var(--alerta)}
.cf-titulo{display:flex;align-items:center;gap:8px}
.cf-titulo .icon{width:16px;height:16px;color:var(--brand)}
.cf-contagem{font-size:12px;font-variant-numeric:tabular-nums}
/* o "i" da nota longa de uma lista (06/10/2026): fica ao lado da contagem, no canto do cabeçalho do cartão; a janela é a mesma de "Como o veículo é vinculado à viagem" (diag-box), mais estreita, com um parágrafo por assunto */
.cf-cab-dir{display:inline-flex;align-items:center;gap:6px;min-width:0}
.diag-box.nota-info-box{width:min(640px,100%)}
.nota-info-corpo p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--texto-2)}
.nota-info-corpo p:last-child{margin-bottom:2px}
.nota-info-corpo b{color:var(--ink)}
.cf-truncado{display:flex;gap:8px;align-items:flex-start;margin:8px 0 12px;padding:10px 12px;border-radius:var(--r-md);background:var(--alerta-fundo);color:var(--alerta);font-size:12.5px;line-height:1.4}
.cf-truncado .icon{flex:none;width:16px;height:16px;margin-top:1px}
.cf-vazio{display:flex;flex-direction:column;align-items:center;gap:8px}
.cf-vazio b{margin:0}
.cf-vazio span{max-width:460px}
.cf-vazio-icone{width:32px;height:32px;color:var(--muted)}
.cf-vazio-icone.cf-vazio-erro{color:var(--destructive)}
.cf-tentar{padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--brand);text-decoration:underline;cursor:pointer}
html.dark .cf-tentar{color:var(--destructive)}
.cf-mais{padding:12px 0 0;text-align:center}
.cf-nota{margin-top:14px}
/* a observação de uma célula corta com reticências (o .vg-tabela já é nowrap), com o balão lendo o texto inteiro */
.cf-obs{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* o carro: o PREFIXO nunca é cortado (flex:none); a placa é quem cede */
.cf-carro{display:flex;align-items:baseline;gap:6px;min-width:0}
.cf-prefixo{flex:none;font-weight:700}
.cf-placa{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.cf-voce{display:inline-flex;align-items:center;height:16px;padding:0 6px;border:1px solid color-mix(in srgb,var(--info) 45%,transparent);border-radius:14px;background:var(--info-bg);color:var(--info);font-size:9px;font-weight:500;line-height:14px;vertical-align:middle}
/* a janela do detalhe (usa a .diag-overlay/.diag-box do sistema) */
.diag-box.cf-box{width:min(980px,100%)}
/* O CORPO DA JANELA DE DETALHE ROLA SOZINHO (06/10/2026, Alan: "essa barra de rolagem não tá legal... parece que tá pra fora do card"): a caixa não rola mais — o cabeçalho fica fixo e só o corpo rola, com a barra PRÓPRIA (rolagem-rail, ligada pelo
   app.js em SELETOR_ROLAGEM), por dentro do card; a nativa colava na borda direita, por cima do cabeçalho e dos cantos arredondados */
.diag-box.cf-box{display:flex;flex-direction:column;overflow:hidden}
.diag-box.cf-box > .diag-head{flex:none;position:static}
.diag-box.cf-box > .cf-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.cf-cab{padding:16px 22px 12px}
.cf-cab-txt{min-width:0}
.cf-cab-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px}
.cf-corpo{padding:4px 22px 22px}
.cf-secao{padding:2px 0 6px}
.cf-secao + .cf-secao{margin-top:6px;border-top:1px solid var(--line)}
.cf-secao > h3{margin:14px 0 4px}
.cf-secao-nota{margin:0 0 8px;font-size:12px;line-height:1.4}
/* a linha do tempo de um detalhe */
.cf-tempo{list-style:none;margin:8px 0 0;padding:0}
.cf-ev{position:relative;display:flex;gap:12px;padding-bottom:12px}
.cf-ev:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:1px;background:var(--line)}
.cf-bola{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--muted);color:var(--surface)}
.cf-bola .icon{width:14px;height:14px}
.cf-bola-ok{background:var(--ok)}
.cf-bola-erro{background:var(--erro)}
.cf-bola-aviso{background:var(--alerta)}
.cf-bola-info{background:var(--info)}
.cf-ev-corpo{flex:1;min-width:0}
.cf-ev-txt{margin:2px 0 0;font-size:13.5px;line-height:20px;color:var(--ink);overflow-wrap:anywhere}
.cf-ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-top:2px;font-size:12px;line-height:18px;color:var(--muted)}
.cf-ev-obs{margin:4px 0 0;font-size:12.5px;color:var(--texto-2);overflow-wrap:anywhere}
@media(max-width:760px){
  .cf-pagina .pagina-cab{position:static}
  .diag-box.cf-box{max-height:92vh;max-height:92dvh}
  .cf-cab{padding:12px 14px 10px}
  .cf-corpo{padding:2px 14px 18px}
  .cf-obs{max-width:200px}
}

/* INDICADORES DE LOTAÇÃO NO TOPO DA VISÃO DETALHADA (Alan, 27/09/2026: "saber se a viagem foi boa ou ruim"). Quatro mini-KPIs no vocabulário
   da Pontualidade (.pt-kpi, título acima do número): passageiros, ocupação média (com o selo), pico a bordo e chegaram atrasados. Vaga fixa:
   os quatro existem desde o primeiro desenho. No celular quebram em 2×2, sem rolagem de lado.
   NA LINHA DO TÍTULO (Alan, 28/09/2026: "esse bloco de cards ficaria interessante no rumo do 'Visão detalhada', senão joga a tabela pra baixo"):
   o cabeçalho do card vira uma grade título | cartões | botões, e os cartões ficam compactos. Quando o CARD é estreito (consulta de contêiner,
   não da janela: o menu lateral aberto ou recolhido muda a largura útil) os cartões descem para uma linha própria, logo abaixo do título, na
   largura toda — 4 lado a lado se couberem (deitado), 2×2 no celular em pé. A linha de baixo quebra em vez de cortar com "…". */
#ptVisaoCard{container-type:inline-size;container-name:ptvisao}
.pt-visao-cab{display:grid;grid-template-columns:minmax(170px,250px) minmax(0,1fr) auto;grid-template-areas:"tit lot acoes";align-items:center;column-gap:12px;row-gap:8px;margin-bottom:10px}
.pt-visao-cab > .pt-visao-tit{grid-area:tit;min-width:0}
.pt-visao-cab > .pt-lot{grid-area:lot}
.pt-visao-cab > .pt-cab-acoes{grid-area:acoes;align-self:center}
/* LARGURA PELO CONTEÚDO (Alan, 28/09/2026: "pelo menos uns 2 daria para diminuir a largura: o de passageiros e o de ocupação média"): os dois primeiros
   ficam do tamanho do que mostram (até 150/170 px, depois quebram) e o Pico e o Chegaram atrasados — que têm a frase longa embaixo — dividem o resto */
.pt-lot{display:grid;grid-template-columns:fit-content(150px) fit-content(170px) minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0;min-width:0}
.pt-lot .pt-kpi{padding:5px 10px;gap:0;box-shadow:none}
/* o título nunca sai cortado ("CHEGARAM ATRASA…"): quebra em 2 linhas se precisar; a linha de baixo vai até 2 linhas e o resto fica no balão */
.pt-lot .pt-kpi > .pt-kpi-rot{font-size:9.5px;letter-spacing:.07em;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
.pt-lot .pt-kpi b{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.pt-lot .pt-kpi > .pt-kpi-linha2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;line-height:1.25}
@container ptvisao (max-width:900px){
  .pt-visao-cab{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tit acoes" "lot lot"}
}
@container ptvisao (max-width:520px){
  .pt-lot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pt-lot .lot-vazio b{color:var(--muted)}
.lot-selo{display:inline-block;padding:1px 8px;border-radius:var(--r-full);font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1.5;text-transform:uppercase}
.lot-selo-boa{background:var(--ok-bg);color:var(--ok)}
.lot-selo-regular{background:var(--alerta-fundo);color:var(--alerta)}
.lot-selo-fraca{background:var(--erro-bg);color:var(--erro)}
/* acima da capacidade: o cartão do pico em vermelho, com o ícone de alerta ao lado do % */
.pt-lot .lot-alerta{border-color:color-mix(in srgb,var(--erro) 55%,var(--cartao-borda))}
.pt-lot .lot-alerta b{color:var(--erro)}
.pt-lot .lot-ico-alerta{width:15px;height:15px;color:var(--erro)}
@media(max-width:600px){.pt-lot{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-lot .pt-kpi b{font-size:16px}}
/* deitado no celular: a largura sobra e a altura falta — os 4 cartões numa fileira só, abaixo do título (a consulta do contêiner decide) */
@media (orientation:landscape) and (max-height:520px){.pt-lot{grid-template-columns:repeat(4,minmax(0,1fr))}.pt-lot .pt-kpi{padding:4px 8px}.pt-lot .pt-kpi b{font-size:15px}}
/* o balão com título dos indicadores: uma frase por linha (as quebras do texto valem) e um pouco mais largo */
.balao-flutuante.balao-tit.balao-linhas{max-width:min(420px,calc(100vw - 16px))}
.balao-flutuante.balao-tit.balao-linhas .balao-tit-texto{white-space:pre-line}
/* Parâmetros › selo da lotação: a prévia ("como fica") e o erro de validação */
.prm-lot-previa{margin:8px 0 0;font-size:12.5px}
.prm-lot-previa.prm-lot-erro{color:var(--erro)}
/* ── OS PARÂMETROS TÉCNICOS DO SISTEMA (06/10/2026, Alan: "se eu precisar ajustar algo, eu mesmo ajustaria direto na tela de Parâmetros... quero autonomia") ──
   Um cartão por grupo e subgrupo (MiX, Totalbus, DadosFlex, Pontualidade e trajeto); cada parâmetro é uma linha: o que é, quais telas afeta, o padrão e o campo. Só tokens. */
.prs-topo .cartao-titulo-ico{display:flex;align-items:center;gap:8px}
.prs-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.prs-busca{flex:1 1 280px;max-width:420px}
.prs-chips{margin:0}
.prs-sub{margin-top:14px}
.prs-sub .cartao-cab{align-items:center;gap:10px}
.prs-sub .cartao-cab .btn-icone{margin-left:auto}
.prs-sub .cartao-cab .muted{font-size:12px}
.prs-grupo{color:var(--brand)}
.prs-recolher{width:30px;height:30px}
.prs-recolher .icon{transition:transform var(--t-rapida);transform:rotate(-90deg)}
.prs-recolher.aberto .icon{transform:rotate(0)}
.prs-lista{display:flex;flex-direction:column}
.prs-lista[hidden]{display:none}
.prs-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start;padding:12px 2px;border-top:1px solid var(--line)}
.prs-linha:first-child{border-top:0}
.prs-linha.alterada{background:linear-gradient(90deg,color-mix(in srgb,var(--info) 7%,transparent),transparent 55%)}
.prs-rotulo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.prs-rotulo b{font-size:13.5px;color:var(--ink)}
.prs-cuidado{display:inline-flex;color:var(--alerta);cursor:help}
.prs-cuidado .icon{width:16px;height:16px}
.prs-desc{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--texto-2);max-width:820px}
.prs-meta{margin:4px 0 0;font-size:11.5px;line-height:1.5}
.prs-campo{display:flex;align-items:center;gap:6px;justify-content:flex-end;min-height:34px}
.prs-entrada{display:flex;align-items:center;gap:6px}
.prs-in{width:120px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font:inherit;font-size:13px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.prs-in[type=text]{width:84px;text-align:center}
.prs-in:disabled{opacity:.6}
.prs-linha.suja .prs-in{border-color:var(--info)}
.prs-un{font-size:12px;color:var(--muted);white-space:nowrap;min-width:34px}
.prs-liga{display:flex;gap:6px}
.prs-salvar:not(:disabled){border-color:var(--ok);color:var(--ok)}
.prs-msg{grid-column:1 / -1;margin:0;min-height:0;font-size:12px;color:var(--muted)}
.prs-msg:empty{display:none}
.prs-msg[data-tom="erro"]{color:var(--erro)}
.prs-msg[data-tom="ok"]{color:var(--ok)}
.prs-fixos .prs-lista{gap:0}
.prs-fixo{padding:8px 2px;border-top:1px solid var(--line);font-size:12.5px}
.prs-fixo:first-child{border-top:0}
.prs-fixo-valor{margin:2px 0;color:var(--ink);font-variant-numeric:tabular-nums}
.prs-fixo p{margin:0;font-size:11.5px}
@media (max-width:760px){
  .prs-linha{grid-template-columns:minmax(0,1fr)}
  .prs-campo{justify-content:flex-start;flex-wrap:wrap}
  .prs-busca{max-width:none;flex-basis:100%}
  .prs-sub .cartao-cab .muted{display:none}
  .prs-sub .cartao-titulo{flex:1 1 0;min-width:0}
}

/* ── CORREÇÕES DE ALOCAÇÃO (27/09/2026) ─────────────────────────────────────────────────────────────────────────────────────
   A tela no molde das Conferências do vínculo (reaproveita cf-*: faixa, esmaecido, linha do tempo, janela), a LARGURA TODA, só tokens de cor.
   A janela "Solicitar correção de alocação" abre por cima do Mapa e da Pontualidade. */
.cr-cab-acoes{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px}
.cr-cab-acoes .panel-btn{margin-top:0;height:34px}
.cr-conferida{font-size:12px;color:var(--muted)}
.cr-conferida-txt{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.cr-conferida-txt .icon{width:14px;height:14px;color:var(--muted)}
.cr-filtros .campo-grupo{gap:8px}
.cr-filtros .campo{flex:1 1 150px;min-width:130px}
.cr-filtros .cr-campo-busca{flex:2 1 240px}
.cr-filtros .campo-acoes{margin-left:auto;align-self:flex-end}
@media(max-width:760px){.cr-filtros .campo{flex:1 1 100%}}
.cr-chips{align-items:center}
.cr-chips-sep{width:1px;height:20px;background:var(--line)}
.cr-tabela td{vertical-align:top}
.cr-aloc{display:flex;flex-direction:column;min-width:0;max-width:260px}
.cr-aloc b,.cr-aloc .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-situ{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--cinza-bg);color:var(--cinza)}
.cr-situ-aberta{background:var(--alerta-fundo);color:var(--alerta)}
.cr-situ-resolvida{background:var(--ok-bg);color:var(--ok)}
.cr-situ-superada{background:var(--info-bg);color:var(--info)}
.cr-situ-recusada{background:var(--erro-bg);color:var(--erro)}
.cr-feito{color:var(--info)}
.cr-novo{display:inline-flex;align-items:center;height:16px;margin-left:6px;padding:0 6px;border-radius:var(--r-full);background:var(--brand);color:var(--brand-texto);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.cr-item.cr-novidade td{background:var(--brand-suave)}
.cr-teste{color:var(--alerta);font-weight:600}
.cr-selo-aviso{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:var(--r-full);background:var(--alerta-fundo);color:var(--alerta);font-size:10.5px;font-weight:600}
/* o detalhe */
.diag-box.cr-box{width:min(820px,100%)}
.cr-de-para{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:8px 0}
.cr-de-para > div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.cr-de-para b{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.cr-seta{width:18px;height:18px;color:var(--muted)}
@media(max-width:600px){.cr-de-para{grid-template-columns:minmax(0,1fr)}.cr-seta{transform:rotate(90deg);justify-self:center}}
.cr-rot{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cr-motivo{margin:6px 0;font-size:13.5px;color:var(--texto-2);overflow-wrap:anywhere}
.cr-final{display:flex;align-items:flex-start;gap:6px;margin:6px 0;padding:8px 10px;border-radius:var(--r-md);background:var(--alerta-fundo);color:var(--alerta);font-size:12.5px}
.cr-final .icon{flex:none;width:15px;height:15px;margin-top:1px}
.cr-historico{margin:6px 0 0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--texto-2)}
.cr-acoes{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.cr-acoes .panel-btn,.cr-form-botoes .panel-btn,.cr-pedido-acoes .panel-btn{margin-top:0}
.cr-form{margin:4px 0 10px}
.cr-form-botoes{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.cr-erro{margin:6px 0}
/* a janela do pedido */
.diag-box.cr-pedido-box{width:min(560px,100%);display:flex;flex-direction:column}
.cr-pedido-cab{display:flex;align-items:flex-start;gap:12px}
.cr-pedido-titulos{flex:1;min-width:0}
.cr-pedido-titulos p{margin:2px 0 0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cr-pedido-corpo{display:flex;flex-direction:column;gap:12px}
.cr-campo-ped{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.cr-campo-ped textarea{width:100%;min-height:64px;padding:8px 10px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--campo-fundo);color:var(--campo-texto);font:inherit;font-size:13px;font-weight:400;resize:vertical}
.cr-campo-ped textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.cr-caminho{font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.cr-destino{width:100%}
/* A LISTA DE DESTINO ABRE DENTRO DA JANELA (revisão de 27/09/2026): solta (absoluta), ela era mais larga e mais alta que a janela, que corta
   (overflow-y:auto) — no celular ganhava rolagem lateral e as últimas opções ficavam escondidas. Aqui ela entra no fluxo, na largura do
   campo, empurra o motivo para baixo e rola sozinha; a janela rola se faltar altura. O campo "Buscar…" cobre só o botão */
.cr-destino > .cs-panel{position:static;width:auto;min-width:0;max-width:none;max-height:240px;margin-top:4px;box-shadow:none}
.cr-destino > .cs-campo{bottom:auto;height:36px}
.cr-nota{margin:0;font-size:12px;color:var(--muted)}
.cr-ja-aberta,.cr-enviado{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-md);background:var(--surface-2);font-size:13px}
.cr-ja-aberta{border-left-color:var(--alerta)}
.cr-enviado{border-left-color:var(--ok)}
.cr-ja-aberta .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--alerta)}
.cr-enviado .icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ok)}
.cr-ja-aberta p,.cr-enviado p{margin:4px 0 0;color:var(--texto-2);overflow-wrap:anywhere}
.cr-link{align-self:flex-start;padding:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--brand);text-decoration:underline;cursor:pointer}
.cr-pedido-acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.cr-pedido-nota{margin-right:auto;font-size:12px;color:var(--muted)}

/* ── ALOCAÇÕES DA FROTA (27/09/2026) ────────────────────────────────────────────────────────────────────────────────────────
   Veículos, motoristas e os pedidos de ajuste numa tela só (o pedido SÓ nasce aqui). O molde é o das Correções/Conferências (cr-*, cf-*),
   a LARGURA TODA, só tokens de cor. No celular (375 px) as colunas secundárias somem e a tabela rola por dentro (a página nunca de lado). */
/* no computador a caixa da tabela não tinha limite de altura (10.021 px): a barra lateral própria (.rolagem-rail) ficava embaixo das 200 linhas
   e as colunas da direita (Último motorista, Pedido, "Solicitar ajuste") só se alcançavam rolando a página até o fim. Agora a caixa tem a altura
   da tela, a barra fica à vista e o cabeçalho gruda — o mesmo padrão de #scConteudo .tabela-rol. Os cartões do celular anulam (max-height:none) */
@media (min-width:761px) and (min-height:521px){
  #telaConteudo .alo-rol{max-height:max(260px,calc(100vh - 330px));max-height:max(260px,calc(100dvh - 330px));overflow:auto}
  #telaConteudo .alo-tabela thead th{position:sticky;top:0;z-index:2}
}
/* a faixa de KPIs: UMA coluna por KPI (--n = quantos; 4 ou 5 conforme a tela e quem olha), nunca um sozinho na 2ª linha nem coluna vazia; as cores
   (cf-n-*) vêm do .cf-kpis. No celular, 2 por linha */
.alo-kpis{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.alo-tabela td{vertical-align:top}
.alo-tabela td .sub{display:block}
.alo-tabela .cf-carro{white-space:nowrap}
/* O NEGRITO É O PREFIXO (Alan, 28/09/2026: "e eu acho que negrito teria que ser o prefixo..."). Na tabela, o .vg-tabela td b (600) vencia o
   .cf-prefixo (700) e o prefixo saía com o mesmo peso da alocação, do "há 3 anos..." e do motorista — nada se destacava. Agora o prefixo é o
   único negrito da linha dos Veículos; os outros <b> ficam médios (500), sem mudar tamanho nem cor. */
.vg-tabela td b.cf-prefixo{font-weight:700}
.alo-tabela-vei td.alo-c-aloc b,.alo-tabela-vei td.alo-c-posicao > b{font-weight:500}
.alo-item{cursor:pointer}
.alo-nome{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alo-onde{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--texto-2)}
.alo-estado,.alo-rh{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--cinza-bg);color:var(--cinza)}
.alo-estado-ok,.alo-rh-ok{background:var(--ok-bg);color:var(--ok)}
.alo-estado-aviso,.alo-rh-aviso{background:var(--alerta-fundo);color:var(--alerta)}
.alo-rh-erro{background:var(--erro-bg);color:var(--erro)}
.alo-selo{display:inline-block;margin-top:3px;padding:1px 6px;border-radius:var(--r-full);font-size:10.5px;font-weight:600;white-space:nowrap}
.alo-selo-erro{background:var(--erro-bg);color:var(--erro)}
.alo-selo-aviso{background:var(--alerta-fundo);color:var(--alerta)}
.alo-selo-info{background:var(--cinza-bg);color:var(--cinza)}
/* o detalhe (.linha da janela): o que vem da tabela quebra por palavra (nunca no meio dela) e os selos, estados e RH mantêm a cor (o .linha span
   pintaria tudo de cinza) */
.alo-box .linha b{word-break:normal;overflow-wrap:anywhere}
.alo-box .linha .alo-selo{margin-top:0;white-space:normal}
.alo-box .linha .alo-estado,.alo-box .linha .alo-rh,.alo-box .linha .alo-selo-info{color:var(--cinza)}
.alo-box .linha .alo-selo-erro,.alo-box .linha .alo-rh-erro{color:var(--erro)}
.alo-box .linha .alo-selo-aviso,.alo-box .linha .alo-estado-aviso,.alo-box .linha .alo-rh-aviso{color:var(--alerta)}
.alo-box .linha .alo-estado-ok,.alo-box .linha .alo-rh-ok{color:var(--ok)}
.alo-pedido{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.alo-c-acao{width:1%;white-space:nowrap}
.panel-btn.alo-pedir{margin-top:0;height:30px;padding:0 10px;font-size:12px;white-space:nowrap}
.panel-btn.alo-pedir .icon{width:13px;height:13px}
/* O RÓTULO OCULTO NASCE NO CANTO, NUNCA NO FIM DA TABELA (Alan, 06/10/2026, o "gap monstro" à direita de Cercas a cadastrar): sem left/top o absoluto fica na posição de fluxo — no fim da linha do cabeçalho, ~160 px à direita do cartão, FORA do
   .tabela-rol (que não é posicionado) — e alarga o scroll da seção (overflow:auto): uma barra de rolagem horizontal da página e um vão vazio quando se rola. Com left/top ele fica no canto da caixa posicionada mais próxima */
.alo-sr{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a tabela: o "há N · hora" da identificação e o endereço da última posição, cada um na sua linha */
.alo-tabela .alo-ident-quando{white-space:nowrap}
.alo-tabela .alo-onde{margin-top:2px}
/* o detalhe: os pedidos da entidade */
.alo-det-pedidos{display:flex;flex-direction:column;gap:6px}
.alo-det-pedido{all:unset;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;cursor:pointer}
.alo-det-pedido:hover{border-color:var(--brand)}
.alo-det-pedido:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.alo-det-pedido-txt{min-width:0;overflow-wrap:anywhere;color:var(--texto-2)}
@media(max-width:900px){.alo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.alo-kpis .pt-kpi:last-child:nth-child(odd){grid-column:span 2}}
@media(max-width:600px){
  .alo-c-estado{display:none}
  .alo-nome,.alo-onde,.alo-pedido{max-width:150px}
}

/* SEM ANEL DE FOCO NOS ITENS CLICÁVEIS (Alan, 28/09/2026: "alguma tecla que eu aperto você seleciona alguns itens do sistema com essa borda laranja, e eu não
   gostaria que isso acontecesse"). O laranja era o anel PADRÃO do Chrome no Windows, na cor de destaque do sistema: o item clicado por último fica com o foco,
   e a primeira tecla apertada depois faz o navegador desenhar o anel nele. Botões, links, itens de menu e o que tem tabindex não desenham anel nenhum (nem o
   padrão nem os próprios, por isso o !important); os CAMPOS de texto/seleção ficam de fora e mantêm o realce de quando se digita. */
:where(a, button, summary, [role="button"], [role="tab"], [role="option"], [tabindex]:not(input):not(textarea):not(select)):focus-visible { outline: none !important; }

/* CALENDÁRIO SIMÉTRICO (Alan, 28/09/2026: "os botões que tem abaixo dos calendários tenham a mesma largura que o espaço reservado pros calendários... para não ficar
   aquele gap bem vazio à direita do calendário da direita... e algum divisor entre os 2 calendários"). A fileira de botões pedia 518 px e os dois meses 472: a caixa
   dos meses esticava até a largura dos botões e sobravam ~54 px vazios à direita do 2º mês. Agora quem manda na largura são os MESES — o rodapé não entra na
   conta (width 0 + min-width 100%) e os 7 botões se repartem nela (medido: meses 305-769, botões 304-770, uma fileira, nenhum texto cortado); um fio divide os
   meses. Só no computador: o celular (em pé e deitado) tem o calendário próprio */
@media (min-width: 768px) and (min-height: 521px) {
  .pd-rodape { width: 0; min-width: 100%; box-sizing: border-box; }
  .pd-rodape .pd-atalhos, .pd-rodape .pd-acoes { flex: 1 1 auto; margin-left: 0; }
  .pd-rodape .pd-acao { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
  .pd-mes + .pd-mes { position: relative; }
  .pd-mes + .pd-mes::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
}

/* motorista fora do cadastro no inspetor: "Não identificado" discreto, para não parecer um nome (Alan, 28/09/2026) */
.insp-nome.insp-nao-identificado{color:var(--muted);font-weight:500}

/* bloco Motorista do inspetor em linhas (28/09/2026): o nome à direita quebra em vez de vazar; "Não identificado" discreto */
.fm-nome{align-items:flex-start;gap:12px}
.fm-nome b{text-align:right;min-width:0;overflow-wrap:anywhere}
.linha b.insp-nao-identificado{color:var(--muted);font-weight:500}

/* o fuso EMBAIXO do horário e menor na tabela do computador (Alan, 28/09/2026); no cartão do celular ele segue ao lado da hora, na manchete */
.vg-tabela .pt-c-hora .pt-hora-fuso{display:block;margin:1px 0 0;font-size:9px;line-height:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}

/* SIGLA COLADA NA LOCALIDADE (Alan, 28/09/2026: "entre a sigla e a descrição da localidade parece que tem um gap que daria para diminuir para ganharmos espaço
   lateral na tabela"). A coluna Sigla tinha 76 px para uma sigla de 22-35 px: quem mandava era o cabeçalho (SIGLA + a seta de ordenar + 12 px de cada lado). Menos
   respiro dos dois lados da divisa, e o espaço que sobra vai para a Localidade (que quebrava em 2-3 linhas). Sem nth-child: a tabela continua completa.
   Do lado da Sigla são 4 px (29/09/2026 foram 8 px, só para a bolinha da linha do ônibus caber à ESQUERDA do nome; ela passou para a direita do nome e o vão voltou a 4) */
#ptTabPontos th:first-child,#ptTabPontos td.pt-sigla{padding-right:4px}
#ptTabPontos th:first-child .th-ordenar{gap:2px}
/* a seta de ordenar é invisível até a coluna ser ordenada, mas reservava 14 px e alargava a Sigla: sem ordenar por Sigla, ela não ocupa lugar (o vão caiu de 36 para ~22 px) */
#ptTabPontos th:first-child .th-ordenar:not([data-dir="asc"]):not([data-dir="desc"]){gap:0}
#ptTabPontos th:first-child .th-ordenar:not([data-dir="asc"]):not([data-dir="desc"]) .th-seta{width:0;overflow:hidden}
#ptTabPontos th.pt-esq,#ptTabPontos td.pt-esq{padding-left:6px}
/* e no computador cada coluna respira 8 px em vez de 12 (12 colunas: ~100 px de volta; a tabela de 1.131 px numa caixa de 1.019 rolava de lado) */
@media (min-width:761px){#ptTabPontos th,#ptTabPontos td{padding-left:8px;padding-right:8px}}

/* o fuso do balão do carro: linha própria embaixo da "Última posição", menor e sem ênfase (28/09/2026) */
.fm-tip .tip-fuso{font-size:9.5px;opacity:.8;margin-top:0}

/* balão BRANCO das posições com os tamanhos do balão do ônibus (.fm-tip): 12,5 px no prefixo, 10,5 px nas linhas, 9,5 px no fuso (Alan, 28/09/2026) */
.leaflet-tooltip.pos-tip{font-size:12px;line-height:1.35;white-space:normal;width:max-content;max-width:min(320px,78vw)}   /* (13/10/2026) o endereço longo quebra em vez de alargar a caixa e deixar as linhas curtas coladas à esquerda */
.pos-tip b{font-size:12.5px;letter-spacing:.01em}
.pos-tip .tip-pos{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;text-wrap:pretty}
.pos-tip .tip-fuso{font-size:9.5px;opacity:.8;margin-top:0}
/* O BALÃO DO PONTO EM «RÓTULO: VALOR» (28/10/2026, 15ª rodada, Alan: "pra ficar bem estruturado esse tooltip"): Motorista, Data e Endereço — o valor na cor do texto e o rótulo, discreto; o fuso segue a linha pequena e apagada de sempre (.tip-fuso) */
.pos-tip .tip-campo{color:var(--ink)}
.pos-tip .tip-campo .tip-rot{color:var(--muted)}

/* TÍTULOS CENTRALIZADOS DE VERDADE (Alan, 28/09/2026: "nessa tabela quase todas as colunas parecem não estar centralizadas dentro da própria coluna"). Os VALORES
   estavam no centro; os TÍTULOS ficavam 9 px à esquerda, porque a seta de ordenar — invisível até a coluna ser ordenada — ocupava 14 px + o vão à direita do
   texto. Nas tabelas centralizadas a seta sai do fluxo: fica colada à direita do título, sem ocupar lugar, e o título fica no centro com ou sem ordenação */
.tabela-central .th-ordenar{position:relative;gap:0}
.tabela-central .th-ordenar .th-seta{position:absolute;left:100%;top:50%;margin:-7px 0 0 2px}
/* a ÚLTIMA coluna põe a seta à ESQUERDA do título: à direita ela saía da tabela, criava 5 px de sobra e a barra de rolagem lateral (Alan, 28/09/2026: "um gap na direita do cabeçalho") */
.tabela-central th:last-child .th-ordenar .th-seta{left:auto;right:100%;margin:-7px 2px 0 0}

/* A LOTAÇÃO ATRÁS DE UM ÍCONE (Alan, 28/09/2026): o cabeçalho da Visão detalhada volta a ser título | botões; os 4 indicadores abrem num painel sob o ícone
   (à esquerda do download), em 2×2. Só tokens de cor */
.pt-visao-cab{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tit acoes"}
.pt-lot-ancora{display:inline-flex}
/* A LOTAÇÃO NO MEIO DA TELA (Alan, 13/10/2026: "será que seria melhor esse modal abrir no meio da tela?"): o painel de verdade (#ptLotacaoPop > #ptLotacao) fica ESCONDIDO no cartão — é ele que a costura atualiza —
   e o ícone abre uma janela .diag-overlay com uma cópia dele, em 2×2 (1 coluna no celular em pé). Janela da casa: fundo escurecido, × no canto, Esc e clique no fundo fecham. Só tokens de cor */
.pt-lot-pop{display:none}
/* A CAIXA MAIOR, O ÍCONE NO TÍTULO e as LETRAS COMO ERAM (Alan, 13/10/2026: "deixa maior... coloca ícone antes de Lotação da viagem"; e depois, ao ver as letras grandes: "ficou muito grande as fontes... era só pra deixar um pouco maior o modal, pra evitar
   de quebrar textos em 2 linhas"): só a CAIXA cresce (de 560 para 800 px, para o "64 entre NOVA SANTA HELENA - MT e TERRA NOVA DO NORTE - MT" do pico a bordo caber numa linha); a tipografia e os cartões são os de sempre
   (.pt-lot .pt-kpi, a mesma do cabeçalho da Visão detalhada); o título leva o ícone dos usuários, o mesmo do botão */
.diag-box.pt-lot-box{width:min(800px,100%)}
.pt-lot-box .diag-head h2.pt-lot-tit{display:flex;align-items:center;gap:9px}
.pt-lot-tit .icon{width:20px;height:20px;flex:none;color:var(--brand)}
.pt-lot-corpo{padding:14px 20px 20px}
.pt-lot-box .pt-lot{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:480px){
  .pt-lot-corpo{padding:12px 14px 16px}
  .pt-lot-box .pt-lot{grid-template-columns:minmax(0,1fr)}
}

/* O ATALHO DO GOOGLE MAPS À DIREITA (Alan, 28/09/2026: "ficaria melhor se alocasse ele à direita, para ficar abaixo dos valores das coordenadas"): alinhado à
   coluna dos valores do bloco Localização do inspetor */
.drawer-secao > .drawer-link{display:flex;width:fit-content;margin-left:auto}

/* O BLOCO VEÍCULO do inspetor do Mapa (Alan, 28/09/2026): placa, modelo, situação, idade, velocidade e odômetro em linhas como os blocos vizinhos; a situação no selo de
   sempre; o modelo longo quebra por palavra (nunca no meio dela); a recusa do guichê no Atualizar ("muita gente consultando") em âmbar, como aviso */
.fm-veiculo .linha{align-items:baseline}
.fm-veiculo .linha b{word-break:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.fm-veiculo .linha b.chip{flex:none;font-weight:700}
.drawer-aovivo-pausa{color:var(--alerta)}

/* A BARRA DE BAIXO DAS TABELAS NUMA FAIXA PRÓPRIA (Alan, 28/09/2026: "a barra de rolagem inferior tem atrapalhado a visão da tabela"): com rolagem lateral a caixa
   ganha 12 px embaixo e a barra (ligarRolagemPropria) corre ali, fora das linhas */
.tabela-rol.rolagem-com-x{margin-bottom:12px}
/* (revisão 28/09/2026) a caixa das tabelas de Acessos zera a margem da .tabela-rol (acesso.css, que carrega depois e empatava): aqui a faixa vence */
.ac-tabela-caixa > .tabela-rol.rolagem-com-x{margin-bottom:12px}
/* O VOLTAR DA VIAGEM PERTO DO TEMA (Alan, 28/09/2026: "esse botão pode jogar mais próximo do botão de tema da página, mais pra direita"): o cabeçalho guarda 116 px
   para o canto do avatar, com 16 de respiro, e a barra nativa da página (--barra-pagina) ainda o afastava 15 px; o Voltar avança sobre o respiro e a barra e fica a
   8 px do tema — a mesma distância entre o tema e o avatar. Só no computador: no celular o canto tem outra conta */
@media (min-width:901px) and (min-height:521px){
  .pagina-cab .pt-voltar-topo{margin-right:calc(-8px - var(--barra-pagina, 0px))}
}

/* FILTROS NUMA LINHA SÓ (Alan, 28/09/2026, Alocações: "os filtros você sempre tem que tentar deixar numa única linha... quebrou em 2 linhas só por conta do ícone de
   limpar filtro"): no computador largo os campos dividem a largura (a busca um pouco maior) e o limpar fica na mesma linha. QUEBRA SÓ QUANDO NÃO CABE
   (revisão 28/09/2026): cada lista tem um piso de 112 px (cabe "Todas (123)" sem cortar) e a busca de 160 — com a base 0, o piso decide a quebra, seja com
   o menu aberto ou recolhido, com ou sem o Período (Solicitações > Concluídas); abaixo de 1081 px, como as outras telas */
@media (min-width:1081px){
  .cr-filtros > .campo-grupo > .campo{flex:1 1 0;min-width:112px}
  .cr-filtros > .campo-grupo > .cr-campo-busca{flex:1.5 1 0;min-width:160px}
  .cr-filtros > .campo-grupo > .campo-periodo{flex:0 0 200px}
  .cr-filtros > .campo-grupo > .campo-acoes{flex:none}
}

/* ── ALOCAÇÕES: O PREFIXO COMPLETO COM A PLACA EMBAIXO E A SELEÇÃO EM MASSA (Alan, 28/09/2026) ─────────────────────────────────────────────────
   "pra ganhar espaço na largura da tabela coloca a placa abaixo do prefixo, e use o prefixo completo"; "ter a possibilidade de selecionar vários de uma
   vez, através de checkbox na tabela, pra poder abrir uma solicitação em massa". A caixinha na 1ª coluna (28 px de alvo no computador, 40 no toque), a
   linha escolhida com um fundo leve, e a barra da seleção presa ao pé da tela enquanto a lista passa (acima da barra de baixo do celular) */
.alo-tabela .alo-carro{flex-direction:column;align-items:flex-start;gap:1px}
.alo-tabela .alo-c-sel{width:1%;padding-right:2px;vertical-align:middle}
/* na linha, a caixinha no alto como o prefixo (as linhas com a última posição em 3-4 linhas a deixavam em zigue-zague) */
.alo-tabela td.alo-c-sel{vertical-align:top}
.alo-sel-caixa{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -4px;border-radius:var(--r-md);cursor:pointer}
.alo-sel,.alo-sel-todos{width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.alo-sel:disabled,.alo-sel-todos:disabled{cursor:default;pointer-events:none;opacity:.45}
/* sem o anel de foco padrão (o laranja do Windows) ao apertar tecla depois do clique */
.alo-sel:focus-visible,.alo-sel-todos:focus-visible{outline:none}
/* a escolha vence o hover nos dois temas (o do escuro tem html.dark) e leva a faixa da marca, como a linha escolhida das outras tabelas */
#telaConteudo .alo-tabela tbody tr:has(.alo-sel:checked) td{background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
#telaConteudo .alo-tabela tbody tr:has(.alo-sel:checked) td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
/* acima dos trilhos da rolagem própria (6) e do cabeçalho preso da tabela; abaixo do cabeçalho da página (30) */
.alo-selbar{position:sticky;bottom:12px;z-index:7;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:12px;padding:8px 10px 8px 14px;
  border:1px solid var(--line-forte);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-pop)}
.alo-selbar[hidden]{display:none}
.alo-selbar-txt{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
.alo-selbar .panel-btn{margin-top:0;height:34px}
.cr-lote-lista{margin:4px 0 0;padding:0;list-style:none;max-height:168px;overflow:auto;border:1px solid var(--campo-borda);border-radius:var(--r-md)}
/* a lista mora num .cr-campo-ped (cinza e seminegrito): o texto volta ao normal e o prefixo ou nome em destaque */
.cr-lote-lista li{padding:5px 10px;font-size:12.5px;font-weight:400;color:var(--texto-2);border-bottom:1px solid var(--linha-tabela)}
.cr-lote-lista li b{font-weight:700;color:var(--ink)}
.cr-lote-lista li:last-child{border-bottom:0}
.cr-lote-fora{margin:0;font-size:12px;color:var(--alerta)}
.cr-lote-fora-tit,.cr-enviado .cr-lote-fora-tit{margin:10px 0 0;font-size:12.5px;font-weight:600}
/* "Todos" do celular, na linha do "Ordenar" (o cabeçalho da tabela some nos cartões) */
.alo-sel-cel{display:inline-flex;align-items:center;gap:8px;flex:none;height:36px;margin-left:auto;padding:0 2px 0 6px;font-size:12px;font-weight:600;color:var(--texto-2);cursor:pointer;white-space:nowrap}
.alo-sel-cel .alo-sel-todos{width:20px;height:20px}
/* no toque (celular em pé e deitado): os dois botões com 40 px; em pé o texto numa linha e os dois botões lado a lado na outra (o pedido quebra em
   2 linhas se não couber, nunca uma 3ª fileira); deitado, tudo numa linha só */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  .alo-selbar .btn-fantasma{flex:none;height:40px}
  .alo-selbar .panel-btn{height:auto;min-height:40px}
}
@media (max-width:760px) and (orientation:portrait){
  .alo-selbar-txt{flex-basis:100%}
  .alo-selbar .panel-btn{flex:1 1 0;min-width:0;white-space:normal;line-height:1.15}
}
/* (no celular a área que rola já termina acima da barra de baixo: os mesmos 12 px servem — medido em 375×812) */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #telaConteudo .alo-tabela-vei tbody tr:has(> td.alo-c-sel){grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sel veic estado" "aloc aloc aloc" "pos pos pos" "ped ped acao"}
  #telaConteudo .alo-tabela-mot tbody tr:has(> td.alo-c-sel){grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"sel nome nome nome" "aloc aloc aloc aloc" "rh rh rh acao" "ped ped ped ped"}
  #telaConteudo .alo-tabela td.alo-c-sel{grid-area:sel;align-self:center}
  #telaConteudo .alo-tabela .alo-sel-caixa{width:40px;height:40px;margin:-8px}
  #telaConteudo .alo-tabela .alo-sel{width:20px;height:20px}
  /* com a caixinha as colunas encolhem: o prefixo completo a 15 px cabe em 360 e em 740×360 (medido: 108,6 px), o estado cede com reticências
     (o balão diz "Na MiX: …") e o "Solicitar ajuste" perde o ícone para caber na coluna da ação */
  #telaConteudo .alo-tabela-vei tbody tr:has(> td.alo-c-sel) .alo-c-veiculo .cf-prefixo{font-size:15px}
  #telaConteudo .alo-tabela-vei .alo-c-estado{max-width:100%}
  #telaConteudo .alo-tabela-vei .alo-estado{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:20px}
  #telaConteudo .alo-tabela tbody tr:has(> td.alo-c-sel) .alo-pedir .icon{display:none}
  /* o cartão escolhido: fundo e borda da marca (o fundo das células é zerado nos cartões) */
  #telaConteudo .alo-tabela tbody tr:has(.alo-sel:checked){background:color-mix(in srgb,var(--brand) 6%,var(--surface));border-color:color-mix(in srgb,var(--brand) 45%,var(--campo-borda))}
}

/* ── INTEGRAÇÕES › DADOSFLEX (Alan, 28/09/2026: "coloca o DadosFlex nas integrações também") ── a busca dos nomes na largura de um campo, e as
   tabelas das leituras e dos nomes no vocabulário das outras (vg-tabela, rolagem própria) */
.df-busca{max-width:420px;margin:0 0 10px}
.df-tabela td,.df-tabela th{white-space:nowrap}
.df-kpis .pt-kpi small{font-weight:500}
/* o "Atualizar agora" no cabeçalho de 56 px: sem a margem de cima do .panel-btn */
#dfAcoes{flex:none}
#dfAcoes .panel-btn{margin-top:0}

/* ── LISTAS E PERÍODO ABREM E FECHAM COM TRANSIÇÃO (28/09/2026) ────────────────────────────────────────────────────────────────────────────
   Alan: "em todas as listas suspensas do sistema... em filtro de período que abre a telinha... coloque animação na hora de abrir... hoje a lista só
   pisca aberta, e pisca fechada". SÓ CSS: o JS segue trocando o `hidden` na hora (quem pergunta "está aberta?" já tem a resposta certa), e o navegador
   segura o display pelo tempo da saída (transition-behavior allow-discrete: a transição vence o [hidden]{display:none!important}); a entrada parte
   do @starting-style. Só opacidade e 4 px de deslize, SEM escala: o csMontar e o dpCaberNaTela medem o painel logo depois de abrir (direita, pé,
   altura livre) e a escala mentiria a medida. Fechando, o painel já não recebe clique. Sem gate de prefers-reduced-motion (o Windows daqui vem com
   as animações desligadas, e o pedido é ver a transição). Onde o calendário leva translateX inline (dpCaberNaTela), fica só a opacidade. */
:is(.cs-panel,.dp-panel,.pd-panel,.mapbar-menu){
  transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1),display 160ms allow-discrete}
:is(.cs-panel,.dp-panel,.pd-panel,.mapbar-menu)[hidden]{opacity:0;transform:translateY(-4px);pointer-events:none;transition-duration:120ms}
@starting-style{
  :is(.cs-panel,.dp-panel,.pd-panel,.mapbar-menu):not([hidden]){opacity:0;transform:translateY(-4px)}
}
/* O PIN DO BOTÃO DIREITO NO MAPA E O MENU DELE (Alan, 21–22/10/2026): o botão direito solta um PIN; arrastá-lo o ajusta; o menu — "Abrir no Google Maps" e "Remover marcador" — abre AO LADO dele. O menu é fixo na janela (z acima das telas cheias do mapa, 940), com o desenho
   do menu de visões (.mapbar-menu) e a mesma entrada/saída das listas (opacidade e 4 px de deslize, SÓ CSS: o JS troca o [hidden] na hora); no toque o alvo é de 44 px. O PIN é uma gota escura de contorno branco (lê-se no mapa, no satélite e no relevo) que CAI 12 px com um fade de 220 ms
   ao ser solto — quem só volta ao lugar numa remontagem da mesma viagem nasce quieto (.mapa-pin-quieto) —, com a mão de arrastar e `touch-action:none` (o dedo arrasta o PIN, não rola a página; é o que a alça da cerca já faz) e o foco de teclado visível. */
.mapa-menu-ctx{position:fixed;z-index:1100;min-width:200px;padding:4px;background:var(--surface);border:1px solid var(--line-forte);border-radius:10px;box-shadow:var(--shadow);
  transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1),display 160ms allow-discrete}
.mapa-menu-ctx[hidden]{opacity:0;transform:translateY(-4px);pointer-events:none;transition-duration:120ms}
@starting-style{.mapa-menu-ctx:not([hidden]){opacity:0;transform:translateY(-4px)}}
.mapa-menu-item{display:flex;align-items:center;gap:9px;box-sizing:border-box;width:100%;min-height:34px;padding:0 11px;border-radius:7px;color:var(--ink);font:inherit;font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.mapa-menu-item:hover,.mapa-menu-item:focus-visible{background:var(--accent);color:var(--accent-texto);outline:none}
.mapa-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}
.mapa-menu-item .icon{width:15px;height:15px;flex:none;color:var(--muted)}
.mapa-menu-item:hover .icon,.mapa-menu-item:focus-visible .icon{color:inherit}
@media (pointer:coarse){.mapa-menu-item{min-height:44px;font-size:14px}}
button.mapa-menu-item{appearance:none;margin:0;border:0;background:none;text-align:left}
/* O MENU DOS TRÊS PONTINHOS DOS CARTÕES É MAIS ENXUTO QUE O DO PIN (Alan, 22/10/2026: "tem muito espaço vazio no card, dá pra diminuir um pouco"): sem os 200 px mínimos do menu do PIN — a largura é a do texto mais comprido —, 3 px de margem em volta (eram 4), 10 px de folga dos lados e a linha de 30 px com o mouse
   (era 34) e de 40 no toque (era 44). No celular o JS dá ao menu a largura do cartão (min-width em linha, que vence o 0 daqui) e a folga dos lados cai para 8 px e o vão do ícone para 7 — "Remover motorista", o texto mais comprido, ocupa 122 px e com 10/8 o menu
   passava 1,7 px do cartão de 171,5 px de um celular de 375 px; com 8/7 ele fica exatamente na largura do cartão (o mesmo 760 px do "celular" do JS, PT_MQ_CELULAR). O menu do PIN não muda */
.mapa-menu-ctx.menu-do-cartao{min-width:0;padding:3px}
.menu-do-cartao .mapa-menu-item{min-height:30px;padding:0 10px;gap:8px}
@media (pointer:coarse){.menu-do-cartao .mapa-menu-item{min-height:40px}}
@media (max-width:760px){.menu-do-cartao .mapa-menu-item{padding:0 8px;gap:7px}}
.mapa-pin.leaflet-interactive{cursor:grab;touch-action:none}
.leaflet-dragging .mapa-pin.leaflet-interactive{cursor:grabbing}
.mapa-pin:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:8px}
.mapa-pin-svg{display:block;overflow:visible;filter:drop-shadow(0 2px 2px color-mix(in srgb,var(--pin-mapa) 45%,transparent));animation:mapa-pin-cai 220ms cubic-bezier(.23,1,.32,1) both}
.mapa-pin-quieto .mapa-pin-svg{animation:none}
@keyframes mapa-pin-cai{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mapa-pin-svg path{fill:var(--pin-mapa);stroke:var(--pin-mapa-contorno);stroke-width:1.1;stroke-linejoin:round}
.mapa-pin-svg circle{fill:var(--pin-mapa-contorno)}
/* a que abre para cima sai e volta pelo lado do campo */
:is(.cs-panel-cima,.dp-panel-cima)[hidden]{transform:translateY(4px)}

/* ── A CAIXA DA TROCA NA ALTURA DO PASSO (28/09/2026) ──────────────────────────────────────────────────────────────────────────────────────
   Alan, com o print do "Trocar veículo" (640 px, quase tudo vazio): "essa tela vejo muito grande... poderia ser menor já que tem essa confirmação
   antes... e aí dependendo da escolha, numa animação o modal se expandiria ou recolheria". Na pergunta com "a viagem toda" a caixa tem a altura do
   conteúdo; "a partir de uma localidade" e a lista do passo 2 voltam à altura cheia (as regras de sempre, acima). A animação é do ptCaixaNoPasso.
   Vale no computador, no celular em pé e deitado (a especificidade maior vence as alturas das @media do .pt-aloc-box). O teto é a tela menos 16 px
   (deitado, 740×360, a pergunta já ocupa 338 px): se faltar, rola só o corpo e o rodapé com os botões fica à vista. */
.diag-box.pt-aloc-box.pt-aloc-compacta{height:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
.pt-aloc-box.pt-aloc-compacta .pt-aloc-corpo{flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain}
/* ── PEDIDOS DE CERCA (28/09/2026) ─────────────────────────────────────────────────────────────────────────────────────────
   Alan: "ter a opção das pessoas reportarem que uma cerca está errada... e desenharia a cerca direto no mapa". O vocabulário é o das Solicitações
   (cr-*, cf-*, alo-*): aqui só o que é da cerca — o desenho sobre o mapa, a janela do pedido (mapa + formulário; no celular ocupa a tela), o cartão
   da cerca escolhida em Cercas › Cadastradas, a lista (cartões no celular) e o detalhe com as três formas. SÓ tokens de cor: as formas no mapa são
   SVG com classe, e a cor delas vem daqui (o escuro sai dos mesmos nomes). Nada de anel de foco nos botões (a regra global cuida); os campos de texto
   mantêm o realce de quando se digita. */
/* Cercas › Cadastradas: o cartão da cerca escolhida sobre o mapa (o "Solicitar nova cerca" do alto da lateral saiu em 29/09/2026: o pedido é o item "Nova" do menu) */
.pc-cerca-card{position:absolute;right:10px;bottom:28px;z-index:801;display:flex;flex-direction:column;gap:6px;width:min(340px,calc(100% - 20px));padding:10px 12px;
  border:1px solid var(--cartao-borda);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-pop);font-size:12.5px;color:var(--texto-2)}
.pc-cc-cab{display:flex;align-items:flex-start;gap:8px}
.pc-cc-nome{flex:1;min-width:0;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-cc-fechar{flex:none;width:24px;height:24px;margin:-4px -6px 0 0;padding:0;border:0;border-radius:var(--r-full);background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.pc-cc-fechar:hover{background:var(--accent);color:var(--ink)}
.pc-cc-info{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-cc-nota{font-size:12px;line-height:1.4}
.pc-cc-aberta{display:flex;align-items:flex-start;gap:6px;margin:0;color:var(--alerta);line-height:1.4}
.pc-cc-aberta .icon{flex:none;width:14px;height:14px;margin-top:2px}
.pc-cc-aberta b{color:var(--ink)}
.pc-cc-botoes{display:flex;flex-wrap:wrap;gap:6px}
.pc-cc-botoes .panel-btn{margin-top:0;height:32px;padding:0 10px;font-size:12.5px}
.pc-cc-botoes .panel-btn .icon{width:14px;height:14px}
/* A PRIMEIRA ESCOLHA do "Reportar cerca errada" (06/10/2026): o que está errado — três botões lado a lado (um escolhido, no vermelho da marca); os campos só aparecem depois */
.pc-alvo-opcoes{display:flex;flex-wrap:wrap;gap:6px}
.pc-alvo-op{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--campo-fundo);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;text-align:center;cursor:pointer;transition:background 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.pc-alvo-op:focus,.pc-alvo-op:focus-visible{outline:none}
@media (hover:hover){.pc-alvo-op:not(.sel):hover{border-color:var(--brand)}}
.pc-alvo-op.sel{border-color:var(--brand);background:var(--brand);color:var(--brand-texto)}
/* A JANELINHA DA PERGUNTA antes do pedido (06/10/2026): "O que está errado nesta cerca?" — três botões empilhados: o título curto (Nome, Forma ou posição, Ambos) e, embaixo, a explicação sem o que ia entre parênteses; no mouse (e no foco do teclado) a borda vai ao vermelho da marca, o texto não muda de cor */
.diag-box.pc-esc-box{width:min(400px,100%)}
.pc-esc-corpo{gap:8px;padding-top:14px}
.pc-esc-op{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--campo-fundo);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color 150ms ease-out,background 150ms ease-out}
.pc-esc-op b{font-size:13.5px;font-weight:700}
.pc-esc-op span{font-size:12px;font-weight:400;line-height:1.35;color:var(--muted)}
.pc-esc-op:focus{outline:none}
.pc-esc-op:focus-visible{border-color:var(--brand)}
@media (hover:hover){.pc-esc-op:hover{border-color:var(--brand)}}
/* Cercas › A cadastrar: o botão de cada linha */
.panel-btn.pc-sc-pedir .icon{width:13px;height:13px}
/* a LOCALIDADE como atalho para criar a cerca (06/10/2026): continua parecendo o nome — negrito, a mesma cor —, com o ícone da cerca ao lado (cinza, sobe de cor no mouse) e o sublinhado no mouse; sem caixa nem anel */
.pc-sc-local{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pc-sc-local:focus,.pc-sc-local:focus-visible{outline:none}
.pc-sc-local .icon{flex:none;width:13px;height:13px;color:var(--muted);opacity:.75;transition:color 150ms ease-out,opacity 150ms ease-out}
@media (hover:hover){.pc-sc-local:hover b{text-decoration:underline;text-underline-offset:3px}.pc-sc-local:hover .icon{color:var(--brand);opacity:1}}
.pc-sc-local:focus-visible b{text-decoration:underline;text-underline-offset:3px}

/* o DESENHO sobre o mapa: a forma (VERDE VIVO — Alan, 01/10/2026: "o azul não está muito visível... talvez um verde bem chamativo"), a linha elástica, as alças e as outras formas das janelas.
   O contorno escuro fino (drop-shadow) separa o verde do satélite claro, do asfalto e da terra; a cerca atual segue vermelha e as vizinhas cinza */
.pc-mapa.leaflet-container{background:var(--surface-2)}
path.pc-desenho,path.pc-desenho-trilha,path.pc-elastico{stroke:var(--desenho)}
path.pc-desenho{fill:var(--desenho)}
path.pc-desenho-trilha,path.pc-elastico{fill:none}
path.pc-forma-atual{stroke:var(--brand);fill:var(--brand)}
path.pc-forma-foto{stroke:var(--muted);fill:var(--muted)}
path.pc-forma-desenho{stroke:var(--desenho);fill:var(--desenho)}
path.pc-desenho,path.pc-desenho-trilha,path.pc-elastico,path.pc-forma-desenho{filter:drop-shadow(0 0 1.5px var(--desenho-contorno))}
path.pc-vizinha{stroke:var(--faint);fill:var(--faint)}
.leaflet-container.pc-desenhando,.leaflet-container.pc-desenhando .leaflet-interactive{cursor:crosshair}
.pc-alca{display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:grab;touch-action:none}
.pc-alca > i{display:block;width:12px;height:12px;border:2px solid var(--desenho);border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--desenho-contorno),var(--shadow-pop);transition:transform var(--t-rapida)}
.pc-alca-primeira > i{border-color:var(--brand)}
.pc-alca-sel > i{background:var(--desenho);transform:scale(1.3)}
.pc-alca-meio > i{width:9px;height:9px;border-width:1.5px;opacity:.75}
.pc-alca:hover > i{transform:scale(1.2)}
.pc-arrastando .pc-alca-meio{visibility:hidden}
@media (pointer:coarse){.pc-alca > i{width:16px;height:16px}.pc-alca-meio > i{width:12px;height:12px}}

/* a JANELA DO PEDIDO: o mapa (com a barra de ferramentas e a ajuda embaixo) à esquerda, o formulário à direita; o rodapé com o Enviar */
.diag-overlay.pc-ov{padding:16px}
.diag-box.pc-pedido-box{display:flex;flex-direction:column;width:min(1240px,100%);height:min(88vh,860px);height:min(88dvh,860px);max-height:none;overflow:hidden}
.pc-pedido-cab{display:flex;align-items:flex-start;gap:12px}
.pc-pedido-corpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.pc-pedido-mapa-col{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:12px 12px 10px 18px}
.pc-mapa-caixa{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;isolation:isolate}
.pc-mapa{position:absolute;inset:0}
.pc-ferr{display:flex;flex-wrap:wrap;gap:6px}
.pc-ferr .panel-btn{margin-top:0;height:32px;padding:0 10px;font-size:12.5px}
.pc-ferr .panel-btn .icon{width:14px;height:14px}
.pc-desenho-status{margin:0;min-height:18px;font-size:12.5px;line-height:1.45;color:var(--texto-2)}
.pc-ok{font-weight:600;color:var(--ok)}
.pc-erro{font-weight:600;color:var(--erro)}
.pc-aviso{color:var(--alerta)}
.pc-pedido-form{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 18px 16px 14px;border-left:1px solid var(--line)}
.pc-campo-ped{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;font-weight:600;color:var(--muted)}
.pc-campo-ped input,.pc-campo-ped textarea{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--campo-fundo);color:var(--campo-texto);font:inherit;font-size:13px;font-weight:400}
.pc-campo-ped textarea{min-height:72px;resize:vertical}
.pc-campo-ped input:focus-visible,.pc-campo-ped textarea:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.pc-campo-ped .cs-wrap{width:100%}
.pc-rot-linha{display:flex;align-items:baseline;gap:4px}
.pc-obrig{font-style:normal;color:var(--brand)}
.pc-contador{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums}
.pc-dica{font-size:11.5px;font-weight:400;line-height:1.4;color:var(--muted)}
.pc-forma-resumo{font-size:13px;color:var(--ink)}
.pc-enviado-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.pc-pedido-acoes{flex:none}
/* a sigla TRAVADA (vem do Totalbus): o campo se vê e se copia, mas não se edita — tom de fundo e contorno tracejado, sem cursor de texto */
.pc-campo-ped input.pc-travado{background:var(--surface-2);color:var(--texto-2);border-style:dashed;cursor:default;font-weight:600;letter-spacing:.04em}
/* os rótulos soltos do formulário seguem o padrão dos campos (a 1ª letra maiúscula), e não a caixa alta dos cabeçalhos (Alan, 01/10/2026: "você escreveu tudo em maiúsculo, mas deveria seguir o padrão dos demais") */
.pc-pedido-form .cr-rot{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
/* A LISTA DO SETOR FLUTUA (Alan, 06/10/2026: "essa lista suspensa quando abre está empurrando tudo o que tem abaixo pra baixo... lista suspensa não deveria funcionar assim"): a regra do destino da correção (.cr-destino, mais acima) põe a lista NO FLUXO
   porque lá a janela é estreita e a lista, solta, era cortada; aqui ela abre SOBRE o que vem embaixo, colada ao campo como as listas do resto do sistema — o csLigarAbertura já a vira para cima e limita a altura pela área da janela */
.pc-pedido-form .cr-destino{position:relative}
.pc-pedido-form .cr-destino > .cs-panel{position:absolute;top:calc(100% + 4px);left:0;width:max-content;min-width:100%;max-width:min(420px,calc(100vw - 48px));max-height:240px;margin-top:0;box-shadow:var(--shadow-pop)}
.pc-pedido-form .cr-destino > .cs-panel.cs-panel-cima{top:auto;bottom:calc(100% + 4px)}
/* A JANELA SEM RODAPÉ (Alan, 01/10/2026, no desenho dele: "aloque os botões ali, onde marquei de vermelho [o pé da coluna do formulário], porque se você fizesse isso ganharíamos um espaço na altura do modal"): no computador o
   "o que falta", o Cancelar e o Enviar pedido descem para o pé da coluna da direita e o mapa ocupa a altura toda, até a borda de baixo. É uma grade na própria caixa (o corpo vira display:contents: o mapa, o formulário e os botões
   viram itens dela) — o markup não muda, e o celular e o deitado seguem com o rodapé de sempre (abaixo) */
@media (min-width:761px) and (min-height:521px){
  .diag-box.pc-pedido-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:auto minmax(0,1fr) auto}
  .diag-box.pc-pedido-box > .pc-pedido-cab{grid-column:1 / -1}
  .diag-box.pc-pedido-box > .pc-pedido-corpo{display:contents}
  .diag-box.pc-pedido-box .pc-pedido-mapa-col{grid-column:1;grid-row:2 / 4}
  .diag-box.pc-pedido-box .pc-pedido-form{grid-column:2;grid-row:2}
  .diag-box.pc-pedido-box > .pc-pedido-acoes{grid-column:2;grid-row:3;padding:12px 18px 16px 14px;border-left:1px solid var(--line)}
  .diag-box.pc-pedido-box > .pc-pedido-acoes .cr-pedido-nota{flex:1 1 100%;margin-right:0}
}

/* AJUSTES › PENDENTES E CONCLUÍDOS (29/09/2026, Alan: "deixe só pendente e concluído... tenho como filtrar se o ajuste é pro veículo, motorista... ou de cerca"):
   a lista única dos quatro tipos. No computador a caixa da tabela tem a altura da tela e o cabeçalho gruda; a coluna Tipo é o chip (veículo e motorista
   em cinza, cerca existente em âmbar, cerca nova em azul); o nome do veículo e do motorista nunca é cortado no computador (o da cerca só passando de 280 px, e o
   balão diz o resto) */
.aj-filtros .campo-acoes{align-self:flex-end}
.aj-filtros .campo[hidden]{display:none}
.aj-tabela td{vertical-align:top}
.aj-item{cursor:pointer}
.aj-tipo{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--cinza-bg);color:var(--cinza)}
.aj-tipo .icon{width:12px;height:12px}
.aj-tipo-cerca_errada{background:var(--alerta-fundo);color:var(--alerta)}
.aj-tipo-cerca_nova{background:var(--info-bg);color:var(--info)}
.aj-alvo{display:block;white-space:nowrap}
.aj-sub-corte{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A SITUAÇÃO EM ÍCONE e o QUEM PEDIU EM AVATAR (06/10/2026, Alan): na tabela só o desenho curto — o texto vai para o balão; nos cartões do celular (sem balão) o texto volta (bloco de cartões, mais abaixo) */
.aj-situ{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;cursor:default}
.aj-situ-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:var(--r-full);background:var(--cinza-bg);color:var(--cinza)}
.aj-situ-ico .icon{width:14px;height:14px}
.aj-situ-aberta .aj-situ-ico{background:var(--alerta-fundo);color:var(--alerta)}
.aj-situ-resolvida .aj-situ-ico,.aj-situ-atendida .aj-situ-ico{background:var(--ok-bg);color:var(--ok)}
.aj-situ-superada .aj-situ-ico,.aj-situ-aprovacao .aj-situ-ico{background:var(--info-bg);color:var(--info)}
.aj-situ-recusada .aj-situ-ico,.aj-situ-ajustar .aj-situ-ico{background:var(--erro-bg);color:var(--erro)}
.aj-situ-txt,.aj-situ-det,.aj-quem-nome{display:none}
.aj-c-situ .cr-novo{margin-left:6px;vertical-align:middle}
/* STATUS NO CENTRO DA COLUNA (Alan, 07/10/2026: "essa coluna de situação não está centralizada… poderia trocar o nome pra STATUS"): o título e o ícone no meio (a seta de ordenar sai do fluxo, à direita do título),
   o "novo" EMBAIXO do ícone (ao lado ele o empurraria do centro) e as marcas e os botões de decidir centralizados. Nos cartões do celular tudo volta ao fluxo (bloco dos cartões, mais abaixo) */
.aj-tabela th.aj-th-situ,.aj-tabela td.aj-c-situ{text-align:center}
.aj-tabela th.aj-th-situ .th-ordenar{position:relative;gap:0}
.aj-tabela th.aj-th-situ .th-ordenar .th-seta{position:absolute;left:100%;top:50%;margin:-7px 0 0 2px}
.aj-tabela td.aj-c-situ > .cr-novo{display:flex;width:fit-content;margin:3px auto 0}
.aj-tabela td.aj-c-situ .ap-marcas,.aj-tabela td.aj-c-situ .ap-decisao{justify-content:center}
.aj-quem{display:inline-flex;align-items:center;gap:6px}
.aj-avatar{flex:none}
/* QUEM PEDIU NO CENTRO DA COLUNA (Alan, 07/10/2026: "esse círculo vermelho ao redor do avatar não tá legal" e "o avatar não tá centralizado na coluna"): o anel do "você" saiu (o balão e os cartões do
   celular já dizem "você"); o título e o avatar ficam no meio, com ou sem ordenação (a seta de ordenar sai do fluxo, como nas tabelas centralizadas) e o "+N" dos reforços fica colado à direita do
   avatar SEM empurrá-lo para a esquerda. Nos cartões do celular tudo volta ao fluxo normal (bloco dos cartões, mais abaixo) */
.aj-tabela th.aj-th-quem,.aj-tabela td.aj-c-quem{text-align:center}
.aj-tabela th.aj-th-quem .th-ordenar{position:relative;gap:0}
.aj-tabela th.aj-th-quem .th-ordenar .th-seta{position:absolute;right:100%;top:50%;margin:-7px 2px 0 0}
.aj-tabela .aj-quem{position:relative}
.aj-tabela .aj-quem .aj-reforcos{position:absolute;left:100%;top:50%;margin:-9px 0 0 4px}
.aj-reforcos{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-full);background:var(--cinza-bg);color:var(--texto-2);font-size:10.5px;font-weight:700}
/* uma das duas fontes não respondeu: o aviso vem em cima da lista, com o "tentar de novo" ao lado */
.aj-falha{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.aj-falha .icon{flex:none;width:15px;height:15px;color:var(--erro)}
.aj-falha .cf-tentar{margin-left:auto}
.pc-cerca-nome{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* OS TETOS DA TABELA (revisão de 29/09/2026): a tabela de 10 colunas media 1.802 px numa caixa de 1.577 (1920 px, menu aberto) — a coluna Situação e o resto
   ficavam atrás da rolagem lateral, e a base cabia. Agora são 8 colunas ("Aberta há" e os reforços moram de baixo do Pedido em e do Quem pediu; a Situação vem
   logo depois do que se pede ajustar) e os textos longos têm teto menor (o balão lê o resto): motivo 200, cada alocação 210, nome da cerca 240 px */
#telaConteudo .aj-tabela .cf-obs{max-width:200px}
#telaConteudo .aj-tabela .cr-aloc{max-width:210px}
#telaConteudo .aj-tabela .pc-cerca-nome{max-width:240px}
.pc-cerca-sub{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin-top:3px;font-size:11.5px;color:var(--muted)}
.pc-sigla{font-weight:700;letter-spacing:.03em;color:var(--texto-2)}
.pc-tag-desenho{display:inline-flex;align-items:center;gap:3px;color:var(--info)}
.pc-tag-desenho .icon{width:12px;height:12px}
.cr-situ.cr-situ-atendida{background:var(--ok-bg);color:var(--ok)}
@media (min-width:761px) and (min-height:521px){
  #telaConteudo .aj-rol{max-height:max(260px,calc(100vh - 340px));max-height:max(260px,calc(100dvh - 340px));overflow:auto}
  #telaConteudo .aj-tabela thead th{position:sticky;top:0;z-index:2}
}
/* FILTROS NUMA LINHA SÓ (regra da casa): com o Tipo a barra tem até 8 campos nos Concluídos (Período, Buscar, Tipo, Empresa, Núcleo, Setor, Alocação, Quem pediu).
   A CONTA (revisão de 29/09/2026), em 1366 px com o menu aberto E a barra de rolagem da página (15 px): 1366 − 256 do menu − 36 das margens da página − 15 da barra
   − 2 da borda do cartão − 32 do respiro = 1.025 px de largura útil (a conta anterior esquecia a barra e contava o botão Limpar com 40 — ele mede 36).
   Pisos: Período 184 (cabe "01/09/26 até 28/09/26") + Buscar 120 + as seis listas (Tipo 88, Empresa 96, Núcleo 104, Setor 96, Alocação 116, Quem pediu 108 —
   cada uma do tamanho do que mostra: "Todas (123)" precisa de 116) + Limpar 36 + 8 vãos de 6 = 996 px, com 29 px de folga; nas Pendentes (sem o Período)
   806 px. Com o Tipo só nas cercas ou numa conta que só vê as cercas, três campos saem (sobra folga). Abaixo de ~1337 px com o menu aberto a barra quebra
   como as outras telas (o menu recolhido devolve 190 px) */
@media (min-width:1081px){
  .aj-filtros > .campo-grupo{gap:6px}
  .aj-filtros > .campo-grupo > .campo{flex:1 1 0;min-width:96px}
  .aj-filtros > .campo-grupo > .aj-f-tipo{min-width:88px}
  .aj-filtros > .campo-grupo > .aj-f-empresa,.aj-filtros > .campo-grupo > .aj-f-setor{min-width:96px}
  .aj-filtros > .campo-grupo > .aj-f-nucleo{min-width:104px}
  .aj-filtros > .campo-grupo > .aj-f-alocacao{min-width:116px}
  .aj-filtros > .campo-grupo > .aj-f-quem{min-width:108px}
  .aj-filtros > .campo-grupo > .cr-campo-busca{flex:1.5 1 0;min-width:120px}
  .aj-filtros > .campo-grupo > .campo-periodo{flex:0 0 184px}
  .aj-filtros > .campo-grupo > .campo-acoes{flex:none}
}
/* os títulos dos números não são cortados com reticências nas janelas médias: quebram em duas linhas (o balão continua dizendo a dica) */
@media (min-width:901px) and (max-width:1400px){
  #ajKpis .pt-kpi > .pt-kpi-rot{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
}

/* o DETALHE: o mapa das três formas (a de agora na MiX, a foto da hora do pedido e o desenho), a legenda e o copiar; ao lado, o pedido */
/* O MAPA MAIOR (Alan, 05/10/2026: "pra aproveitar o modal... a área do mapa poderia ser maior"): a janela passa de 1180 para 1440 px, o mapa ganha 60% da largura (era 50%) e a altura acompanha a tela
   (clamp 380–640 px); em telas largas o mapa fica à vista (sticky) enquanto a coluna do pedido rola */
.diag-box.pc-det-box{width:min(1440px,100%)}
.pc-det-grade{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px 22px;align-items:start}
.pc-det-mapa-col{display:flex;flex-direction:column;gap:8px;padding-top:14px}
.pc-det-info{min-width:0}
@media (min-width:981px){.pc-det-mapa-col{position:sticky;top:6px}}
.pc-det-mapa-caixa{flex:none;height:clamp(380px,64vh,640px);height:clamp(380px,64dvh,640px)}
.pc-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--texto-2)}
.pc-legenda li{display:inline-flex;align-items:center;gap:6px}
.pc-leg{display:inline-block;width:22px;height:0;border-top:3px solid var(--brand)}
.pc-leg-foto{border-top:2px dashed var(--muted)}
.pc-leg-desenho{border-top:3px dashed var(--desenho)}
.pc-copiar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pc-copiar .panel-btn{margin-top:0;height:32px;padding:0 10px;font-size:12.5px}
.pc-copiar .panel-btn .icon{width:14px;height:14px}
.pc-copiado{font-size:12px;color:var(--ok)}
/* OS BOTÕES DE COPIAR SOBRE O MAPA DO DETALHE (Alan, 06/10/2026): no canto de baixo à esquerda do mapa, pílulas de fundo cheio (leem sobre a foto de satélite) e o aviso "WKT copiado." ao lado, que só existe
   com texto; na tela estreita (até 560 px) ficam só o ícone, e o balão diz qual é qual */
.pc-copiar-mapa{position:absolute;left:10px;bottom:10px;z-index:805;max-width:calc(100% - 160px)}
.pc-copiar-mapa .panel-btn{background:var(--surface);box-shadow:var(--shadow-soft)}
.pc-copiar-mapa .panel-btn:hover:not(:disabled){background-color:var(--surface)}
.pc-copiar-mapa .pc-copiado{padding:4px 9px;border-radius:9999px;background:var(--surface);box-shadow:var(--shadow-soft)}
.pc-copiar-mapa .pc-copiado:empty{display:none}
@media (max-width:560px){.pc-copiar-mapa .panel-btn > span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pc-copiar-mapa .panel-btn{width:34px;padding:0;justify-content:center;gap:0}}
/* os ícones do Cancelar e do Enviar do rodapé do pedido (06/10/2026: "falta ícones nesses botões"): o tamanho dos outros botões do pedido; o movimento está no bloco dos botões de ferramenta */
.pc-cancelar-btn .icon,.pc-enviar-btn .icon{width:15px;height:15px}
.pc-sem-forma,.pc-sem-obs{margin:6px 0;font-size:12.5px}
/* o motivo da ação recusada pelo servidor (409), no alto da coluna do pedido depois da recarga */
.pc-det-aviso{display:flex;align-items:flex-start;gap:6px;margin:14px 0 0}
.pc-det-aviso .icon{flex:none;width:15px;height:15px;margin-top:1px;color:var(--erro)}
.pc-pedido-sec{margin-top:14px}   /* (sem o título da seção, que trazia os 14 px de cima: a ficha começa perto da altura do mapa — 14 px + os 2 px de respiro da seção) */
/* o ícone antes do título da janela do pedido (06/10/2026) */
#pcDetTit{display:flex;align-items:center;gap:8px}
.pc-det-tit-ico{flex:none;width:20px;height:20px;color:var(--brand)}
.pc-fechou{margin:8px 0}
/* O PEDIDO NUMA FICHA SÓ (Alan, 07/10/2026: "esse bloco ainda não me agrada… não está legal e estruturado"; em 05/10: "não tem destaque pro que eu solicitei"; e "não precisa escrever 'o pedido…'": sem título): um cartão com três grupos, todos na MESMA grade de duas colunas
   — o rótulo à esquerda (largura fixa, igual nos três) e o valor à direita —, separados por uma linha fina: o que foi pedido (o destaque: o nome certo ANTES → DEPOIS, a forma, a observação), a cerca (o contexto) e quem pediu, quando e quem reforçou. Só tokens: claro e escuro sozinhos */
.pc-ficha{margin:0 0 10px;border:1px solid var(--line-forte);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.pc-ficha-grupo{display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 14px;align-items:baseline;margin:0;padding:10px 12px;font-size:13px}
.pc-ficha-grupo + .pc-ficha-grupo{border-top:1px solid var(--line)}
.pc-ficha-grupo > div{display:contents}
.pc-ficha-grupo dt{margin:0;font-size:12px;font-weight:600;color:var(--muted)}
.pc-ficha-grupo dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:anywhere;line-height:1.4}
.pc-ficha-pedido{font-size:13.5px}
.pc-ficha-tipo dd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-ficha-id{font-size:10.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-ficha-apoio{font-size:12.5px}
.pc-ficha-apoio dd{color:var(--texto-2)}
@media (max-width:480px){.pc-ficha-grupo{grid-template-columns:96px minmax(0,1fr);gap:6px 10px}}
.pc-antes{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.pc-seta{margin:0 8px;font-weight:700;color:var(--brand)}
.pc-depois{font-size:14.5px;font-weight:700;color:var(--ink)}
.pc-forma-sim{font-weight:700;color:var(--ok)}
.pc-forma-nao{font-weight:600;color:var(--ink)}
.pc-obs{font-style:italic;color:var(--texto-2)}

@media (max-width:980px){
  .pc-det-grade{grid-template-columns:minmax(0,1fr)}
  .pc-det-mapa-caixa{height:300px}
}

/* NO CELULAR (em pé e deitado) a janela do pedido ocupa a tela: em pé, o mapa em cima (46% da altura) e o formulário embaixo, rolando juntos (um dedo
   rola ou desenha; dois dedos movem o mapa); deitado, mapa e formulário lado a lado. A lista vira cartões com o título de cada campo, como as
   Alocações; o "Ordenar" de um botão faz o papel do cabeçalho. O cartão da cerca em Cercas › Cadastradas fica na largura do mapa */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  /* O ENTALHE (revisão de 28/09/2026): a janela ocupa a tela, mas o "padding:0" apagava o respiro do recorte da câmera — no iPhone deitado os
     campos e o Enviar ficavam sob o entalhe. Cada lado desconta o seu, pelo padrão da casa (data-entalhe, marcarLadoDoEntalhe): o lado sem
     recorte não reserva nada; em pé, o de cima (o app instalado) */
  .diag-overlay.pc-ov{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  html[data-entalhe="esq"] .diag-overlay.pc-ov{padding-right:0}
  html[data-entalhe="dir"] .diag-overlay.pc-ov{padding-left:0}
  .diag-box.pc-pedido-box{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  .pc-pedido-corpo{display:block;overflow-y:auto;overscroll-behavior:contain}
  .pc-pedido-mapa-col{padding:10px 12px 8px}
  .pc-pedido-mapa-col .pc-mapa-caixa{flex:none;height:46vh;height:46dvh;min-height:220px}
  .pc-det-mapa-caixa{height:min(300px,46dvh)}
  .pc-pedido-form{overflow:visible;padding:12px;border-left:0;border-top:1px solid var(--line)}
  .pc-pedido-acoes{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .pc-ferr .panel-btn{height:36px}
  .pc-cerca-card{left:10px;right:10px;bottom:44px;width:auto;padding:8px 10px}
  .pc-cerca-card .pc-cc-info{display:none}
}
/* AJUSTES NO CELULAR (em pé e deitado): a tabela de 8 colunas vira CARTÕES, com o título de cada campo em cima (data-rotulo) e o "Ordenar" de um botão só no
   lugar do cabeçalho. A manchete é o que se pede ajustar (o veículo, o motorista ou a cerca) e, embaixo dela, o TIPO à esquerda e a situação à direita — o
   chip de tipo é o que separa os quatro no meio da mesma lista; depois "Pedido para" em largura toda (a coluna "Está em" saiu em 07/10/2026), o motivo (ou a observação) em largura toda, e quem
   pediu (com os reforços, quando há) e quando (com a idade, se está aberto). Nada é cortado com reticências: no toque não há balão para ler o resto */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  #telaConteudo .aj-rol{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
  #telaConteudo .aj-tabela,#telaConteudo .aj-tabela tbody{display:block;min-width:0;width:auto}
  #telaConteudo .aj-tabela thead{display:none}
  #telaConteudo .aj-tabela tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"alvo alvo" "tipo situ" "para para" "motivo motivo" "quem quando";
    gap:8px 12px;align-items:start;margin:0 0 8px;padding:10px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
  #telaConteudo .aj-tabela tbody td{display:block;min-width:0;width:auto;padding:0;border:0;white-space:normal;background:transparent;box-shadow:none}
  #telaConteudo .aj-tabela tbody tr.cr-novidade{background:var(--brand-suave)}
  #telaConteudo .aj-tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  #telaConteudo .aj-tabela td.aj-c-alvo::before,#telaConteudo .aj-tabela td.aj-c-tipo::before,#telaConteudo .aj-tabela td.aj-c-situ::before{content:none}
  #telaConteudo .aj-tabela .aj-c-alvo{grid-area:alvo}
  #telaConteudo .aj-tabela .aj-c-alvo .aj-alvo,#telaConteudo .aj-tabela .aj-c-alvo .pc-cerca-nome{max-width:none;font-size:14px;white-space:normal;overflow-wrap:anywhere}
  #telaConteudo .aj-tabela .aj-c-tipo{grid-area:tipo}
  #telaConteudo .aj-tabela .aj-c-situ{grid-area:situ;justify-self:end;text-align:right}
  #telaConteudo .aj-tabela .aj-c-situ .sub{display:block}
  #telaConteudo .aj-tabela .aj-c-situ > .cr-novo{display:inline-flex;width:auto;margin:0 0 0 6px}
  #telaConteudo .aj-tabela .aj-c-situ .ap-marcas,#telaConteudo .aj-tabela .aj-c-situ .ap-decisao{justify-content:flex-end}
  #telaConteudo .aj-tabela .aj-c-para{grid-area:para}
  #telaConteudo .aj-tabela .aj-c-motivo{grid-area:motivo}
  #telaConteudo .aj-tabela .aj-c-quem{grid-area:quem;text-align:left}
  #telaConteudo .aj-tabela .aj-quem .aj-reforcos{position:static;margin:0}
  #telaConteudo .aj-tabela .aj-c-quando{grid-area:quando}
  #telaConteudo .aj-tabela td.aj-c-para:has(> span.muted:only-child){display:none}
  #telaConteudo .aj-tabela .cr-aloc{max-width:none}
  #telaConteudo .aj-tabela .cr-aloc b,#telaConteudo .aj-tabela .cr-aloc .sub,#telaConteudo .aj-tabela .cf-obs,#telaConteudo .aj-tabela .aj-sub-corte{max-width:none;white-space:normal;overflow-wrap:anywhere}
  /* (06/10/2026) o texto que a tabela guarda no balão volta nos cartões, onde não há passar do mouse: o rótulo da situação ao lado do ícone, os detalhes embaixo, o nome ao lado do avatar */
  #telaConteudo .aj-tabela .aj-situ-txt{display:inline;font-size:11.5px;font-weight:600}
  #telaConteudo .aj-tabela .aj-situ-det{display:block}
  #telaConteudo .aj-tabela .aj-quem-nome{display:inline-flex;flex-direction:column}
}
/* O MAPA DE DESENHO USÁVEL DEITADO (revisão de 28/09/2026): em 740×360 o mapa ficava com 45 a 95 px — a barra quebrava em 2 linhas de 40 px (o
   mínimo do toque vencia o height:30px), a ajuda ocupava 2 a 4 linhas e a nota do rodapé empurrava o Enviar para a 2ª linha. Agora: a barra
   numa linha só (os botões secundários só com o ícone; o nome fica para o leitor de tela e o balão explica; o principal mantém o texto), a
   ajuda em uma linha com reticências (o balão tem o texto inteiro), a nota do rodapé some (os obrigatórios têm *; o Enviar a cita em
   aria-describedby) e o mapa tem no mínimo 160 px — se faltar altura, a coluna do mapa rola.
   As contas em 740×360: cabeçalho 57 + rodapé 53 = 110; corpo 250; coluna: 12 de respiro + 32 da barra + 17 da ajuda + 2 vãos de 6 = 73;
   mapa = 177 px. Em 844×390 (iPhone, 21 px do indicador embaixo): corpo 259, mapa 186 px */
@media (orientation:landscape) and (max-height:520px){
  .pc-pedido-corpo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);overflow:hidden}
  .pc-pedido-mapa-col{min-height:0;padding:6px 10px 6px 12px;gap:6px;overflow-y:auto;overscroll-behavior:contain}
  .pc-pedido-mapa-col .pc-mapa-caixa{flex:1 0 160px;height:auto;min-height:160px}
  .pc-det-mapa-caixa{height:220px}
  .pc-ferr{flex:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain}
  .pc-ferr .panel-btn{flex:none;height:32px;min-height:32px;padding:0 8px;font-size:11.5px}
  .pc-ferr .pc-ferr-btn:not(.btn-primario){position:relative;width:34px;padding:0;gap:0}
  .pc-ferr .pc-ferr-btn:not(.btn-primario) > span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pc-desenho-status{flex:none;min-height:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-pedido-form{overflow-y:auto;border-top:0;border-left:1px solid var(--line)}
  .pc-pedido-cab{padding-top:8px;padding-bottom:8px}
  .pc-pedido-cab h2{font-size:16px}
  .pc-pedido-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-pedido-acoes{flex-wrap:nowrap;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .pc-pedido-acoes .cr-pedido-nota{display:none}
  .pc-cerca-card{left:auto;right:10px;width:min(300px,calc(100% - 20px))}
  #ajOrdemCel{display:flex}
  #telaConteudo .aj-tabela tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #telaConteudo .aj-tabela tbody tr{margin:0}
}
/* EM PÉ, O CARTÃO DA CERCA ESCOLHIDA SAI DE CIMA DO MAPA (revisão de 28/09/2026): no mapa de 40% da tela (~325 px em 375×812) o enquadramento
   põe a cerca no meio, e o cartão (44 px acima do pé, 80 a 120 px de altura) cobria de 1/4 à metade dela. Em pé a PÁGINA rola (bloco "CERCAS,
   EM PÉ"): com o cartão à vista, a área do mapa vira uma grade de duas linhas — o mapa na 1ª, com a mesma altura de sempre (nada remede o
   Leaflet), e o cartão na 2ª, logo abaixo, na largura do mapa; os botões do mapa e a faixa de status continuam presos à 1ª (grid-row nos
   absolutos). Deitado o cartão segue à direita, sobre o mapa.
   REVISÃO 2 (28/09/2026): as DUAS linhas da grade no filho absoluto ("1/2"). Num absoluto, a linha final "auto" é a borda da grade inteira, não
   "span 1": com "grid-row:1" o mapa descia até o pé do cartão (325 → 417 px, o Leaflet remedido), e o status "N cercas no mapa" e a atribuição
   ficavam atrás dele */
@media (max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:521px){
  .corpo:not(.gaveta-aberta):has(#cercaLista) .mapa-area:has(> .pc-cerca-card:not([hidden])){display:grid;grid-template-rows:max(220px,40vh) auto;grid-template-rows:max(220px,40dvh) auto;height:auto;min-height:0}
  .corpo:not(.gaveta-aberta):has(#cercaLista) .mapa-area:has(> .pc-cerca-card:not([hidden])) > :is(#cercaCanvas,.mapbar,.map-status){grid-row:1/2;grid-column:1/2}
  .corpo:not(.gaveta-aberta):has(#cercaLista) .mapa-area > .pc-cerca-card{position:static;grid-row:2;grid-column:1;width:auto;margin:8px 0 0;box-shadow:none}
}
/* a LINHA DO TEMPO RECOLHIDA do pedido de cerca (06/10/2026): o título é o botão; recolhida, só o último passo */
.pc-tempo-h{margin:14px 0 4px}
.pc-tempo-btn{display:flex;align-items:center;gap:8px;width:100%;padding:6px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer}
.pc-tempo-btn .icon{flex:none;width:14px;height:14px;transition:transform 150ms ease-out}
.pc-tempo-btn[aria-expanded="false"] .icon{transform:rotate(-90deg)}
.pc-tempo-btn:focus{outline:none}
.pc-tempo-btn:focus-visible .icon{color:var(--brand)}
@media (hover:hover){.pc-tempo-btn:hover .icon{color:var(--brand)}}
.pc-tempo-n{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.pc-tempo-ultimo{margin:0 0 6px;font-size:12px;line-height:1.4}
.pc-tempo-ultimo[hidden],#pcTempoCorpo[hidden]{display:none}
.pc-tempo-sec{padding:2px 0 6px}
/* ── AUTORIZAÇÃO DE CERCAS (Alan, 27/10/2026; refeita em 29/10/2026) ─────────────────────────────────────────────────────────────────────────────────
   A tela é a lista das REGRAS (cada uma, uma linha × uma cerca, com o período): no alto os filtros (busca, Empresa, Setor de atividade); embaixo o cartão «Regras», com os chips da situação e a tabela, que rola POR DENTRO (.tabela-rol: a barra fina própria, a borda e o canto arredondado das tabelas) com o cabeçalho colado.
   A TELA USA A ALTURA TODA (Alan, 27/10: "ajuste essa tela pra usar a tela toda"): no computador a página não rola e o cartão das regras ocupa o que sobra; com menos de 440 px para ele (celular deitado, janela baixa) a página volta a rolar. No celular a lista vira cartões (a regra da casa para as tabelas: ver .clr-tab)
   e o botão «Novo registro» segue no cabeçalho do cartão das regras. O fim da página leva o respiro da casa (a margem de baixo dos cartões fica: o data-fim da página a desconta).
   AS TRANSIÇÕES (3ª rodada, Alan: "falta animações na hora de filtrar e selecionar os itens... a tela simplesmente muda de uma vez"): o chip ativo troca de cor por transição; o que é REFEITO (a lista que filtra, o número que conta, o pulso dos números pequenos) anima pelo app.js (Web Animations: o FLIP das linhas, a contagem do número e o pulso).
   Sem o portão de movimento reduzido: a casa quer ver o movimento (o Windows daqui vem com as animações desligadas). */
.cl-conteudo{display:flex;flex-direction:column}
.cl-filtros .campo{flex:1 1 200px;max-width:320px}
.cl-filtros .campo.cl-campo-busca{flex:2 1 280px;max-width:520px}
.cl-filtros .cs-wrap{display:block}
.cl-card-regras{display:flex;flex-direction:column;min-width:0;min-height:0}
/* o botão «Novo registro» vai na ponta do cabeçalho do cartão (o botão do cabeçalho da PÁGINA saiu: Alan, 29/10/2026, "botões no cabeçalho não é legal"); o número fica junto do título (a margem automática dele vai toda para a direita) */
.cl-card-regras > .cartao-cab > .lista-contagem{margin:0 auto 0 0}
.cl-card-regras .cartao-cab .panel-btn{margin-top:0}   /* (o .panel-btn tem margin-top:14px, que desceria o botão do centro do cabeçalho) */
.cl-card-regras .cartao-cab .panel-btn .icon{width:14px;height:14px}
/* a animação da casa dos botões de ícone (Alan, 29/10/2026: "esse botão seria interessante que tivesse a animação daquele padrão do gancho dos botões"): o ícone «se desenha» no pouso do mouse (crVisto: os dois riscos do + se traçam e o ícone dá o pulo); o Registrar e o Encerrar, que levam o visto, também; só com mouse */
@media (hover:hover){.cl-card-regras #clNovoRegistroBtn:hover:not(:disabled) .icon,#clrRegistrar:hover:not(:disabled) .icon,.clr-enc-box [data-clr-enc="encerrar"]:hover:not(:disabled) .icon{animation:crVisto 620ms cubic-bezier(.34,1.4,.64,1) 1}}
@media (min-width:761px){
  .tela-pagina.cl-tela{display:flex;flex-direction:column}
  .cl-tela > .pagina-cab{flex:none}
  .cl-tela > .cl-conteudo{flex:1 0 440px;min-height:0}
  .cl-tela .cl-card-regras{flex:1 1 auto;min-height:0}
}
.cl-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 10px}
.cl-barra .cl-chips{margin:0}
.cl-chips{margin:2px 0 8px}
.cl-chips .pt-chip{transition:background-color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1)}
.cl-n,.cl-chips .pt-chip b{display:inline-block;font-variant-numeric:tabular-nums}   /* (inline-block: o pulso é um transform, que não pega em caixa inline) */
.cl-aviso{margin:8px 0 0;padding:6px 10px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok);font-size:12px}
.cl-aviso.erro{background:var(--erro-bg);color:var(--erro)}
.cl-aviso[hidden]{display:none}
/* A PERGUNTA DO «ENCERRAR» ainda leva a classe cl-conf-box (a de três botões da marcação antiga saiu): a caixa é mais larga que a das outras perguntas; até 640 px os botões quebram em linhas, regra da casa */
.esc-conf-box.cl-conf-box{width:min(520px,100%)}
@media (min-width:641px){.cl-conf-box .pt-aloc-acoes .panel-btn{flex:none}}
/* ── O REGISTRO DAS CERCAS NÃO AUTORIZADAS COM VIGÊNCIA (Alan, 28/10/2026, 16ª rodada: "vc ainda não implantou aquela questão de criar… onde eu escolheria a linha… a cerca… e a vigência da regra?") ──────────────────────────────────
   O botão «Novo registro» no cabeçalho do cartão das regras (não no da página) e as janelas (o próprio Novo registro e a pergunta do Encerrar) no molde da do Histórico de cercas: a caixa tem a altura da tela, o corpo não rola (rolam as listas, cada uma por dentro, com a barra fina da casa) e o calendário do dia abre POR FORA da caixa — por isso a
   caixa não corta (overflow visível; o cabeçalho arredonda o próprio canto). Em janela baixa (até 600 px) ou no celular o corpo rola e o calendário vira a folha fixa da casa. Só tokens da casa, nos dois temas. */
.clr-overlay{padding:16px}
.diag-box.clr-box{width:min(1040px,100%);height:min(calc(100vh - 32px),780px);height:min(calc(100dvh - 32px),780px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:visible}
.clr-box .diag-head{position:static;flex:none;align-items:center;border-radius:var(--r-lg) var(--r-lg) 0 0}
.clr-box .diag-head h2{display:flex;align-items:center;gap:6px}
.clr-tit > .icon{width:20px;height:20px;flex:none;margin-right:3px;color:var(--brand)}
.clr-corpo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:12px;padding:12px 18px 14px}
.clr-listas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1 1 auto;min-height:0}
.clr-sec{display:flex;flex-direction:column;min-width:0;min-height:0}
.clr-sec-tit{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.clr-sec-tit .icon{width:14px;height:14px;flex:none;color:var(--brand)}
/* O CABEÇALHO DE CADA LISTA (04/11/2026, Alan: «a parte do topo teria que melhorar… no lugar do limpar ter o botão com o ícone de limpar… com um campo de busca que não muda de largura quando clico nele»): o título e, à direita, quantas foram escolhidas; embaixo a busca — que ocupa SEMPRE o que sobra da linha (uma grade: o número
   escolhido mora no título, não nesta linha, então nada a estica nem a encolhe) — e os dois botões só de ícone, do tamanho do campo (36 px) */
.clr-barra{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:8px;margin:0 0 8px}
.clr-busca{min-width:0}
/* A LISTA E A CONTAGEM NUMA CAIXA SÓ (Alan, 04/11/2026: «no rodapé da tabela… mais discreto»; 5ª leva: «era pra ficar internamente no rodapé das tabelas»): a borda é da caixa; a lista rola por dentro e a contagem, miúda e apagada, é a última faixa DENTRO dela */
.clr-caixa{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:130px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.clr-caixa > .clr-lista{flex:1 1 auto;min-height:0;margin:0;border:0;border-radius:0;background:transparent}
.clr-lista-rodape{flex:none;display:flex;align-items:center;min-height:26px;padding:4px 12px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.clr-cont{font-size:11px;color:var(--muted);opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
/* AS CERCAS SÓ DEPOIS DA LINHA (5ª leva: «só liberasse pra escolher a cerca… dps de escolher uma linha/horário»): a lista travada fica apagada e o aviso aparece por cima, no meio dela */
.clr-travada .clr-caixa > .clr-lista{opacity:.35;filter:grayscale(.4)}
.clr-trava-aviso{position:absolute;inset:0 0 27px;display:flex;align-items:center;justify-content:center;margin:0;padding:12px;text-align:center;font-size:12.5px;font-weight:600;color:var(--texto-2);pointer-events:none}
.clr-trava-aviso[hidden]{display:none}
.clr-trava-aviso > span{padding:7px 14px;border:1px solid var(--campo-borda);border-radius:var(--r-full);background:var(--surface);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 16%,transparent)}   /* uma etiqueta sobre a lista apagada: o aviso não se mistura com o texto das cercas */
/* a linha da lista (linha ou cerca): a caixa, o nome e, embaixo, as empresas ou o tipo; marcada, a linha ganha o fundo e a barra — a cerca, o vermelho de «não autorizada» da lista das marcas */
.clr-item{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"caixa nome" "caixa sub";column-gap:10px;row-gap:1px;align-items:center;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:pointer;box-shadow:inset 0 0 0 var(--brand);transition:background-color .2s ease,box-shadow .26s ease}
.clr-item > input{grid-area:caixa}
.clr-item-nome{grid-area:nome;font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.clr-item-sub{grid-area:sub;font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
.clr-item-sub:empty{display:none}
.clr-item:hover{background:var(--surface-2)}
.clr-item.sel{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
#clrListaCercas .clr-item.sel{background:var(--erro-bg);box-shadow:inset 3px 0 0 var(--brand)}   /* a barra da esquerda é do MESMO vermelho da linha escolhida (Alan, 04/11/2026: «pq o tom de vermelho na lateral esquerda… não é o mesmo… de item selecionado da parte de linhas?»): o da marca, não o de «erro» */
/* A ÁRVORE DAS LINHAS (04/11/2026, Alan: «algo que expandisse as linhas… e desse pra ver os horários que tem dentro da linha e poder marcar um horário só… ou clicando no checkbox pai… selecionaria todos»): cada linha é um nó — a setinha, a caixinha-pai (meio-marcada quando só alguns horários estão marcados) com o nome e as empresas e o resumo dos horários —
   e, aberto, a grade dos horários DELA por sentido, cada um uma caixinha com a hora. O realce de marcada é o da lista de antes; meio-marcada, a barra fica mais leve. A setinha gira de lado (fechada) para baixo (aberta) */
.clr-no{border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.clr-no-linha{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:4px;padding:0 12px 0 6px;box-shadow:inset 0 0 0 var(--brand);transition:background-color .2s ease,box-shadow .26s ease}
.clr-no-linha:hover{background:var(--surface-2)}
.clr-no.sel > .clr-no-linha{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
.clr-no.parcial > .clr-no-linha{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}
.clr-no-rot{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"caixa nome" "caixa sub";column-gap:10px;row-gap:1px;align-items:center;min-width:0;padding:8px 0;cursor:pointer}
.clr-no-rot > input{grid-area:caixa}
.clr-seta{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--muted);cursor:pointer}
.clr-seta-vazia{cursor:default}
.clr-seta .icon{width:14px;height:14px;transform:rotate(-90deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.clr-no.aberto .clr-seta .icon{transform:none}
.clr-seta:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
@media (hover:hover){.clr-seta:not(.clr-seta-vazia):hover{background:color-mix(in srgb,var(--line) 55%,transparent);color:var(--ink)}}
.clr-no-resumo{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.clr-no.parcial .clr-no-resumo{color:var(--brand);font-weight:600}
.clr-filhos{display:flex;flex-direction:column;gap:10px;padding:4px 12px 12px 40px;background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.clr-filhos[hidden]{display:none}
.clr-hor-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.clr-hor-item{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.clr-hor-item.sel{border-color:color-mix(in srgb,var(--brand) 55%,var(--campo-borda));background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.clr-hor-item.fora{border-style:dashed}
@media (hover:hover){.clr-hor-item:hover{border-color:var(--line-forte)}.clr-hor-item.sel:hover{border-color:var(--brand)}}
/* O PERÍODO: o começo e o fim, cada um com dois jeitos (sem data / com data) como chips e, no «com data», o dia no calendário da casa e a hora em HH:MM (horário de Brasília) */
.clr-periodo{flex:none;padding:10px 12px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
.clr-periodo .clr-sec-tit{margin-bottom:10px}
/* OS HORÁRIOS NA JANELA DE EDITAR (04/11/2026, Alan: «a possibilidade de editar um registro»): uma caixa como a do período, com o nó da linha (sempre aberto, sem a setinha e sem o nome: a janela já diz a linha) — as caixinhas já vêm como o registro as guarda. Se a lista é comprida, rola por dentro (a janela não cresce);
   no celular a janela toda já rola e a caixa só segue o corpo */
.clr-horarios{flex:none;max-height:min(30dvh,240px);padding:10px 12px 12px;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
.clr-horarios[hidden]{display:none}
.clr-horarios .clr-sec-tit{flex:none;margin-bottom:8px}
.clr-hor-lista{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.clr-hor-lista .clr-no{border-bottom:0}
.clr-no.fixo > .clr-no-linha{grid-template-columns:minmax(0,1fr) auto;padding-left:6px;background:transparent;box-shadow:none}
.clr-no.fixo > .clr-filhos{padding-left:36px;background:transparent}
.clr-hor-sem{font-size:11.5px;line-height:1.35;margin:0}
.clr-hor-sentido{display:flex;flex-direction:column;gap:6px;min-width:0}
.clr-hor-rot{font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
/* a janela de EDITAR é só a caixa por fora igual à do «Novo registro»: mais estreita e da altura do que tem dentro */
.diag-box.clr-box.clr-ed-box{width:min(620px,100%);height:auto}
.clr-ed-box .clr-corpo{flex:0 1 auto}
/* só para o leitor de tela (o «para» entre a origem e o destino do sentido: a seta é desenho). Nasce no canto (left:0;top:0), como o .alo-sr e o .ds-sr: sem isso ele fica na posição de fluxo, fora da área rolável, e alarga a janela com uma barra horizontal */
.clr-sr{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.clr-campos{display:flex;flex-direction:column;gap:10px}   /* Começa e Termina UM EMBAIXO DO OUTRO (Alan, 29/10/2026) */
.clr-campo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.clr-campo-rot{flex:none;width:56px;font-size:12px;font-weight:700;color:var(--ink)}
.clr-chips{margin:0;flex:none;min-width:200px}   /* a mesma largura nas duas linhas: o dia e a hora de uma caem embaixo dos da outra */
.clr-dh{display:inline-flex;align-items:center;gap:8px;flex:none}
/* O DIA E A HORA NA ALTURA DOS BOTÕES «A partir de» / «Desde sempre» (Alan, 04/11/2026: «esses campos de data e hora devem ter a mesma altura dos itens… pra ficar simétrico»): os três com 30 px (o chip já tem 30; o botão do dia e o campo da hora tinham 36) */
.clr-campo .dp-input,.clr-campo .clr-hora{height:30px}
.clr-hora{box-sizing:border-box;width:72px;height:36px;margin:0;padding:0 10px;border:1px solid var(--campo-borda);border-radius:var(--r-lg);background:var(--campo-fundo);color:var(--btn-contorno-texto);font:inherit;font-size:13px;font-weight:500;text-align:center;font-variant-numeric:tabular-nums;transition:border-color var(--t-rapida),background-color var(--t-rapida),box-shadow var(--t-rapida)}
.clr-hora:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--ring) 25%,transparent)}
.clr-hora.invalida{border-color:var(--erro);background:var(--erro-bg)}
.clr-frase{margin:8px 0 0;min-height:17px;font-size:12px;line-height:1.45;color:var(--muted)}
.clr-aviso{flex:none;margin:0}
.clr-rodape{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;padding:12px 22px;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.clr-resumo{flex:1 1 240px;font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.clr-rodape .panel-btn{margin-top:0;height:34px;padding:0 14px;font-size:12.5px}
.clr-rodape .panel-btn .icon{width:14px;height:14px}
/* A LISTA DAS REGRAS (o corpo da tela): a tabela rola por dentro com o cabeçalho colado; o que acabou de ser registrado vem com o fundo de «ok» */
.clr-tabela{flex:1 1 auto;min-height:0;margin:0}
.clr-tabela thead th{position:sticky;top:0;z-index:2;padding-top:6px;padding-bottom:6px}
.clr-tab td{vertical-align:top}
/* O REGISTRO É O GRUPO (Alan, 04/11/2026: «o agrupamento deveria ser por linha e horário… falta uma coluna de horário na tabela… todas as cercas… num único registro»): a linha, o horário e as cercas do grupo — as primeiras à vista, uma embaixo da outra, e o «+N» que abre o resto no lugar */
.clr-tab td.clr-c-linha,.clr-tab td.clr-c-cercas{min-width:170px;overflow-wrap:anywhere}
.clr-tab td.clr-c-hor{min-width:96px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.clr-tab td.clr-c-ini,.clr-tab td.clr-c-fim{white-space:nowrap;font-variant-numeric:tabular-nums}
/* a coluna Cercas mostra SÓ A QUANTIDADE (5ª leva: «mostrar só a qtd de cercas… e se a pessoa quiser ver todas… abre o registro pra ver»): o número é um botão discreto que abre a janela do registro */
.clr-qtd{margin:0;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent);cursor:pointer;transition:color var(--t-rapida)}
.clr-qtd:hover{color:var(--brand);text-decoration-style:solid}
.clr-qtd:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:3px}
.clr-tab tr.encerrado .clr-qtd{color:inherit}
/* A JANELA DE VER O REGISTRO: os dados do registro no alto e a lista de todas as cercas, que rola por dentro */
.diag-box.esc-conf-box.clr-enc-box.clr-ver-box{width:min(600px,100%)}   /* um pouco mais larga que a das perguntas: os nomes das cercas são compridos */
.clr-ver-cercas{margin:0;padding:0;list-style:none;max-height:min(46dvh,360px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--campo-borda);border-radius:var(--r-md);background:var(--surface)}
.clr-ver-cercas li{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.clr-ver-cercas li:last-child{border-bottom:0}
.clr-ver-cercas li .muted{font-size:11.5px}
.clr-tab .clr-extra[hidden]{display:none}
.clr-mais{margin:0;padding:0 2px;border:0;border-radius:4px;background:none;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums;cursor:pointer;transition:color var(--t-rapida)}
.clr-mais:hover{color:var(--ink);text-decoration:underline}
.clr-mais:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.clr-c-quem{white-space:nowrap}
.clr-c-quem span{display:block;line-height:1.35}
.clr-c-quem .muted{font-size:11.5px}
.clr-tab tr.encerrado td{color:var(--muted)}
.clr-tab tr.encerrado td b{color:inherit;font-weight:600}
.clr-tab tr.clr-novo td{background:var(--ok-bg)}
.clr-tab td.clr-c-acao{width:1%;text-align:right;vertical-align:middle;white-space:nowrap}   /* o botão da linha é só o ícone: no meio da altura da linha; os dois (Encerrar e Excluir) ficam lado a lado */
.clr-tab .clr-acao{width:30px;height:30px}
.clr-tab .clr-acao + .clr-acao{margin-left:6px}
.clr-tab .clr-acao .icon{width:15px;height:15px}
@media (min-width:761px) and (max-width:1150px){
  .clr-tab td.clr-c-ini,.clr-tab td.clr-c-fim,.clr-c-quem{white-space:normal}
  .clr-tab td.clr-c-linha,.clr-tab td.clr-c-cercas{min-width:120px}
  .clr-tab td.clr-c-hor{min-width:80px}
}
/* A PERGUNTA DO ENCERRAR (por cima da lista): a caixa não corta, para o calendário do «Em outra data» abrir por fora dela */
.diag-box.esc-conf-box.clr-enc-box{width:min(520px,100%);overflow:visible}
.clr-enc-box .diag-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
.clr-enc-box .esc-conf-corpo{overflow:visible}
.clr-enc-box .pt-aloc-acoes{border-radius:0 0 var(--r-lg) var(--r-lg)}
/* O QUE A PERGUNTA CITA (Alan, 29/10/2026: «escrevendo tipo "Cerca:" / "Linha:"; no plural, a palavra no plural»): o rótulo apagado e o nome inteiro (quebra em vez de ser cortado com reticências), os nomes alinhados numa coluna só */
.clr-enc-dados{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 8px;margin:4px 0 0;font-size:13px;line-height:1.4}
.clr-enc-dados dt{font-weight:500;color:var(--muted)}
.clr-enc-dados dd{margin:0;font-weight:600;color:var(--texto-2);overflow-wrap:anywhere}
.clr-enc-dados dd span{display:block}
.clr-enc-dados dd .pill{display:inline-flex;width:max-content}   /* o selo da situação (na janela de ver o registro) fica do tamanho do texto: a regra de cima o esticaria na largura toda */
/* o dia e a hora do «Em outra data» ficam NA MESMA LINHA dos botões, à direita deles (Alan, 29/10/2026: «ganhamos espaço na altura»): aqui os botões têm a largura do que escrevem, não os 200 px que alinham as duas linhas do «Novo registro»; sem lugar (celular estreito), o campo cai para baixo */
.clr-enc-box .clr-chips{min-width:0}
@media (max-width:760px),(max-height:600px){
  .diag-box.clr-box{overflow:hidden}
  .clr-corpo{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .clr-listas{flex:none}
  .clr-caixa{flex:none}
  .clr-lista{flex:none;height:220px}
  /* o calendário vira a folha fixa da casa (a mesma do celular deitado): a caixa que rola cortaria o que abre por fora */
  .clr-box .dp-panel,.clr-box .dp-panel.dp-panel-dir,.clr-box .dp-panel.dp-panel-cima,.clr-enc-box .dp-panel,.clr-enc-box .dp-panel.dp-panel-dir,.clr-enc-box .dp-panel.dp-panel-cima{position:fixed;top:max(8px,env(safe-area-inset-top));bottom:auto;left:0;right:0;margin-inline:auto;
    transform:none;width:min(308px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;z-index:892}
}
@media (max-width:760px){
  .clr-overlay{padding:8px}
  .diag-box.clr-box{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
  .clr-box .diag-head{padding:12px 14px 10px}
  .clr-corpo{padding:10px 12px 12px}
  .clr-listas{grid-template-columns:minmax(0,1fr)}
  .clr-lista{height:min(220px,32dvh)}
  .clr-horarios{max-height:none}
  .clr-hor-lista{overflow:visible}
  .clr-campo-rot{width:100%}
  .clr-rodape{padding:10px 12px}
  .clr-rodape .panel-btn{flex:1 1 0;height:40px}
  .clr-resumo{flex:1 1 100%}
  .clr-tabela{min-height:160px}
  .cl-tela .cl-tabela{min-height:0;max-height:none}
  /* A LISTA VIRA CARTÕES no celular (a regra da casa para as tabelas, 28/09/2026): sem cabeçalho, cada registro numa grade — a linha e a situação, a cerca, o começo, o fim, quem registrou e o botão; o rótulo de «Começa» e «Termina» vem do atributo da célula */
  .clr-tab thead{display:none}
  .clr-tab,.clr-tab tbody{display:block}
  .clr-tab tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"linha sit" "hor hor" "cerca cerca" "ini ini" "fim fim" "quem acao";column-gap:10px;row-gap:3px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--linha-tabela)}
  .clr-tab td,.clr-tab tr.clr-novo td{display:block;padding:0;border:0;background:transparent}
  .clr-tab td.clr-c-linha,.clr-tab td.clr-c-hor,.clr-tab td.clr-c-cercas{min-width:0}
  .clr-tab tr.clr-novo{background:var(--ok-bg)}
  .clr-tab td.clr-c-linha{grid-area:linha;font-weight:600}
  .clr-tab td.clr-c-hor{grid-area:hor}
  .clr-tab td.clr-c-cercas{grid-area:cerca}
  .clr-tab td.clr-c-ini{grid-area:ini}
  .clr-tab td.clr-c-fim{grid-area:fim}
  .clr-tab td.clr-c-sit{grid-area:sit;justify-self:end}
  .clr-tab td.clr-c-quem{grid-area:quem;margin-top:4px}
  .clr-tab td.clr-c-acao{grid-area:acao;align-self:end;justify-self:end}
  .clr-tab td.clr-c-acao{width:auto}   /* o 1% do computador faria o ícone transbordar a célula do cartão */
  .clr-tab td[data-rotulo]::before{content:attr(data-rotulo) ": ";color:var(--muted)}
}
/* ── O HISTÓRICO DE CERCAS DA VIAGEM (Alan, 27/10/2026) ─────────────────────────────────────────────────────────────────────
   A janela das cercas: o cartão «cercas» (a contagem, com o vermelho das não autorizadas), a tabela das passagens e, na cerca que não era autorizada na linha, a linha de fundo de erro suave com a pílula "Não autorizada". As cores são as do
   erro da casa (--erro, --erro-bg), nos dois temas. */
/* O BOTÃO DAS CERCAS e a BOLINHA (28/10/2026, Alan: "um ícone de notificação no botão mostrando a qtd de cercas não autorizadas... se não tiver nenhuma, não seria necessário"): o mesmo vermelho do contador do menu */
.pt-cerc-btn{position:relative}
.pt-notif{position:absolute;top:-6px;right:-6px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:17px;min-width:17px;padding:0 4px;border-radius:9px;background:var(--brand);color:var(--brand-texto);font-size:10px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface);pointer-events:none}
/* A JANELA DO HISTÓRICO DE CERCAS (28/10/2026, Alan: "um modal que caiba na tela... barra de rolagem vertical na tabela... os dados da viagem... ajudaria a tirar print e gerar evidência"): a caixa tem a altura da tela, os dados da viagem ficam no alto e só a tabela rola (o cabeçalho gruda) */
.ptc-overlay{padding:16px}
.diag-box.ptc-box{width:min(1040px,100%);height:min(calc(100vh - 32px),860px);height:min(calc(100dvh - 32px),860px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden}
.ptc-box .diag-head{position:static;flex:none;align-items:center}
.ptc-box .diag-head h2{display:flex;align-items:center;gap:6px}
/* O ÍCONE ANTES DO TÍTULO (12ª rodada, Alan: "falta também ícone antes do título do modal Histórico de cercas"): o mesmo desenho do botão que abre a janela, no tamanho e na cor do da Lotação da viagem (.pt-lot-tit) */
.ptc-tit > .icon{width:20px;height:20px;flex:none;margin-right:3px;color:var(--brand)}
.ptc-corpo{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:10px;padding:12px 18px 16px}
/* OS DADOS DA VIAGEM SÃO CARTÕES, OS MESMOS DA TELA DA VIAGEM (12ª rodada, Alan: "esse bloco não tá legal… mais organizado… e um card com padrão de cards do sistema"): a classe do cartão (.pt-kpi) e as regras do bloco da viagem (.pt-kpis-viagem, .pt-kpis-novo) valem aqui; a grade é daqui — 12 colunas, em duas fileiras cheias: partida, empresa, linha (4), serviço e veículo;
   motorista, histórico e cercas (4 cada). 14ª rodada (Alan: "esse pode remover" nos cartões Pontos medidos, Alocação e Situação; e o «25 cercas» do cabeçalho "poderia virar um KPI"): esses três saíram e o cartão das cercas entrou. Em janela mais estreita 6 colunas (as fileiras se refazem sem buraco: grid-auto-flow dense) e, no celular, 2.
   Só leitura: no toque o cartão do motorista e o do veículo não guardam a faixa do botão (44 px à direita) que a tela da viagem reserva */
.ptc-dados.pt-kpis.pt-kpis-viagem{flex:none;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:8px}
.ptc-dados:empty{display:none}
.ptc-dados .pt-kpi{grid-column:span 2}
.ptc-dados .kv-linha{grid-column:span 4}
.ptc-dados .kv-motorista,.ptc-dados .ptc-periodo{grid-column:span 4}
/* O CARTÃO DAS CERCAS E O ATALHO DAS REGRAS DA LINHA, JUNTOS (Alan, 03/11/2026: «esse botão de ver as regras desta linha poderia estar lá em cima, se diminuísse o KPI de cercas», «dá pra diminuir mais esse card… não preciso desse texto que vem abaixo do número»; depois de ver o botão azul:
   «precisa ser um botão mais discreto, ou até mesmo se for um texto igual estava antes, que talvez ficaria melhor»): os dois dividem num grupo as 4 colunas que o cartão tinha sozinho na segunda fileira (motorista 4 + histórico 4 + grupo 4) — o cartão só do tamanho do rótulo e do número e, ao lado,
   o atalho em TEXTO (a mini-ação da casa, na cor da marca, com o escudo), centrado na altura do cartão. Sem o atalho (sem permissão ou sem a linha), o cartão das cercas fica sozinho, com os 4 de antes */
.ptc-dados .ptc-cercas-grupo{grid-column:span 4;display:flex;align-items:stretch;gap:14px;min-width:0}
.ptc-dados .ptc-cercas-grupo > .ptc-cercas{flex:none}
.ptc-dados .ptc-cercas.ptc-cercas-so{grid-column:span 4}
.ptc-dados .ptc-regras{align-self:center;margin:0;font-size:12.5px;line-height:1.3;white-space:normal}
.ptc-dados .ptc-regras .icon{width:15px;height:15px;flex:none}
@media (hover:hover){.ptc-dados .ptc-regras:hover span{text-decoration:underline;text-underline-offset:3px}}
.ptc-dados .ptc-regras:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:4px}
.ptc-dados .kv-veiculo,.ptc-dados .kv-motorista{padding-right:10px}
/* «N NÃO AUTORIZADAS» NO CARTÃO DAS CERCAS (14ª rodada): o vermelho de erro da casa, com o escudo de alerta antes — o mesmo vermelho da pílula «Não autorizada» da tabela; o resto da linha de baixo é o do cartão (10,5 px, discreta) */
.ptc-dados .pt-kpi > .pt-kpi-linha2.ptc-cercas-nao{display:flex;align-items:center;gap:4px;color:var(--erro);font-weight:700;cursor:default}
.ptc-cercas-nao .icon{width:12px;height:12px;flex:none}
.ptc-lista{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ptc-lista .tabela-rol{flex:1 1 auto;min-height:0;margin-top:8px}
.ptc-lista .tabela-rol thead th{position:sticky;top:0;z-index:2}
.ptc-lista > .vazio{margin:auto}
@media (max-width:999px){
  .ptc-dados.pt-kpis.pt-kpis-viagem{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ptc-dados .kv-linha,.ptc-dados .kv-veiculo,.ptc-dados .kv-motorista,.ptc-dados .ptc-cercas-grupo,.ptc-dados .ptc-cercas.ptc-cercas-so{grid-column:span 3}
  .ptc-dados .ptc-periodo{grid-column:span 6}
}
@media (max-width:760px){
  .ptc-overlay{padding:8px}
  .diag-box.ptc-box{max-height:calc(100dvh - 16px);height:calc(100dvh - 16px)}
  .ptc-corpo{padding:10px 12px 12px}
  .ptc-dados.pt-kpis.pt-kpis-viagem{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptc-dados .pt-kpi{grid-column:span 1}
  .ptc-dados .kv-linha,.ptc-dados .kv-motorista,.ptc-dados .ptc-periodo,.ptc-dados .ptc-cercas-grupo,.ptc-dados .ptc-cercas.ptc-cercas-so{grid-column:1 / -1}
}
.jor-tabela tbody tr.pt-cerc-alerta td{background:var(--erro-bg)}
.pt-cerc-nao{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--r-full);background:var(--erro-bg);color:var(--erro);font-size:11px;font-weight:700;white-space:nowrap;cursor:default}
.pt-cerc-nao .icon{width:12px;height:12px;flex:none}
.pt-cerc-alerta .pt-cerc-nao{background:color-mix(in srgb,var(--erro) 14%,transparent)}
/* A COLUNA «CERCAS» DA LISTA DE VIAGENS (29/10/2026): o mesmo pill do alerta da viagem — o escudo e o número de passagens —, centrado na coluna e só na viagem com alerta (a célula sem alerta fica vazia) */
.vg-tabela th.pt-th-cerc,.vg-tabela td.pt-c-cerc{text-align:center}
.pt-cerc-lista{font-variant-numeric:tabular-nums}
.pt-cerc-chips{margin:10px 0 0}

/* O BLOCO «VIAGEM EM ANDAMENTO» do inspetor do Mapa da Frota (Alan, 27/10/2026: "se um veículo estiver associado a uma linha do Totalbus, mostrar qual é a linha que ele está fazendo"): a linha que o veículo faz agora, no molde dos blocos
   vizinhos (título pequeno, linhas rótulo/valor, o atalho à direita como o do Google Maps). O nome da linha é longo ("SAO JOSE DO RIO PRETO - SP X ...") e quebra em vez de vazar; o número do serviço não quebra no meio. Só tokens da casa */
.fm-viagem .insp-nome{font-size:13px;line-height:1.35;margin-bottom:4px;overflow-wrap:anywhere}
.fm-viagem .linha{align-items:baseline}
.fm-viagem .linha b{word-break:normal;overflow-wrap:anywhere}