.fm-dialog{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#f3f6fa;color:#20324b;font:14px system-ui,sans-serif}.fm-dialog::backdrop{background:#14223699}.fm-header{height:88px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:16px 26px;background:#fff;border-top:5px solid #e34332;border-bottom:1px solid #dce3eb}.fm-header small{letter-spacing:2px;font-size:10px;color:#718096}.fm-header h1{margin:3px 0;font-size:24px}.fm-header h1 span{font-size:12px;background:#e7eef8;border-radius:5px;padding:4px 8px;vertical-align:middle}.fm-body{height:calc(100% - 88px);display:flex}.fm-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;padding:22px;box-sizing:border-box;background:white;border-right:1px solid #dce3eb;overflow:auto}.fm-sidebar h2{font-size:18px;margin:0}.fm-sidebar p{font-size:12px;color:#738196;line-height:1.5}.fm-sidebar label{display:block;font-weight:600;font-size:12px;margin:7px 0}.fm-sidebar input,.fm-sidebar select{display:block;width:100%;box-sizing:border-box;padding:10px;margin-top:6px;border:1px solid #d8e1eb;border-radius:7px;background:#f9fbfd;color:#20324b}.fm-contagem{padding:16px 0;font-size:12px;font-weight:600}.fm-lista{overflow:auto;min-height:90px}.fm-veiculo{display:block;text-align:left;width:100%;background:white;border:0;border-bottom:1px solid #e5ebf1;padding:15px 5px;color:#20324b;cursor:pointer}.fm-veiculo:hover,.fm-veiculo:focus-visible{background:#eaf2fa}.fm-veiculo strong,.fm-veiculo span{display:block;margin-bottom:6px}.fm-veiculo strong{font-size:15px}.fm-veiculo small{font-size:10px;color:#748399}.fm-veiculo strong small{float:right}.fm-veiculo span{font-size:12px}.fm-canvas{flex:1;min-width:0;position:relative}.fm-map{height:100%;width:100%;background:#e6edf2}.fm-enquadrar{position:absolute;right:18px;top:18px;z-index:500;background:white!important;color:#20324b!important;box-shadow:0 2px 8px #20324b20}.fm-legenda{position:absolute;bottom:28px;left:16px;z-index:500;padding:12px 16px;background:#fffffff0;border-radius:10px;box-shadow:0 3px 18px #20324b20;font-size:11px;line-height:1.8;max-width:300px}.fm-erro:not(:empty){position:absolute;top:70px;left:15px;right:15px;z-index:500;background:#fff1d1;padding:12px;border-radius:8px}.fm-detalhe{width:400px;max-width:40vw;overflow:auto;background:white;padding:22px;box-sizing:border-box;border-left:1px solid #dce3eb}.fm-detalhe[hidden]{display:none}.fm-detalhe .pr-detalhe{display:block}.fm-marker-visual{width:100%;height:100%;filter:drop-shadow(0 2px 2px #20324b66)}@media(max-width:900px){.fm-sidebar{width:250px;padding:14px}.fm-detalhe{position:absolute;right:0;top:88px;bottom:0;z-index:600;width:380px;max-width:90vw;box-shadow:-4px 0 20px #20324b22}}@media(max-width:600px){.fm-body{flex-direction:column}.fm-sidebar{width:100%;height:40%;flex-shrink:0}.fm-canvas{min-height:250px}.fm-header{padding:10px}.fm-header h1{font-size:18px}.fm-header .btn{font-size:11px}.fm-legenda{font-size:9px;bottom:24px;max-width:220px}}

.fm-alerta svg{animation:fm-piscar 1.4s ease-in-out infinite}@keyframes fm-piscar{0%,100%{opacity:1}50%{opacity:.25}}
.fm-multi{margin:8px 0;border:1px solid #d8e1eb;border-radius:8px;background:#f9fbfd;flex-shrink:0}
.fm-multi summary{cursor:pointer;padding:12px;font-size:12px;list-style:none;display:flex;align-items:center;gap:8px}
.fm-multi summary::after{content:'⌄';margin-left:auto}.fm-multi[open] summary::after{content:'⌃'}
.fm-multi summary strong{font-size:11px;color:#526880;font-weight:500}
.fm-multi-opcoes{padding:0 10px 10px;max-height:210px;overflow:auto;border-top:1px solid #e1e7ee}
.fm-sidebar .fm-multi-opcoes label{display:flex;align-items:center;gap:10px;padding:8px 4px;margin:0;cursor:pointer;font-weight:400}
.fm-sidebar .fm-multi-opcoes input{width:16px;height:16px;margin:0;accent-color:#2563eb;flex-shrink:0}
.fm-multi-opcoes button{border:0;background:transparent;color:#2563eb;padding:10px 4px;cursor:pointer;font:inherit;font-size:11px}
.fm-multi-opcoes label:has(input:checked){background:#e8f0ff;border-radius:5px}
.fm-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.fm-header{flex-shrink:0}
.fm-controles-mapa{position:absolute;top:14px;right:14px;z-index:500;display:flex;align-items:center;gap:8px}
.fm-controles-mapa .fm-enquadrar{position:static}
.fm-velocidade{padding:8px 12px;border-radius:10px;background:#fffffff5;box-shadow:0 2px 8px #20324b20;color:#20324b}
.fm-velocidade>span{display:block;font-size:10px;line-height:1.4}
.fm-velocidade strong{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.fm-velocidade strong small{font-size:11px;font-weight:500}
@media(max-width:600px){.fm-controles-mapa{top:10px;right:8px;gap:5px}.fm-velocidade{padding:6px 8px}.fm-velocidade strong{font-size:18px}.fm-controles-mapa .fm-enquadrar{padding:8px;font-size:11px}}
.fm-body{height:auto;flex:1;min-height:0;position:relative}
.fm-kpis{flex-shrink:0;padding:12px 26px 16px;background:#fff;border-bottom:1px solid #dce3eb}
.fm-kpis-caption{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:11px;font-weight:600;color:#526880}
.fm-kpis-caption span{font-weight:400;color:#7b899b}
.fm-kpis-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.fm-kpi{position:relative;overflow:hidden;border:1px solid #e3e9f1;border-top:3px solid var(--kpi-cor);border-radius:10px;padding:12px 14px;background:linear-gradient(135deg,#fff,#f6f8fc);box-shadow:0 2px 5px #20324b05}
.fm-kpi-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#526880;white-space:nowrap}
.fm-kpi-label i{width:6px;height:6px;border-radius:50%;background:var(--kpi-cor);flex-shrink:0}
.fm-kpi strong{display:block;margin-top:7px;font-size:30px;line-height:1.1;font-weight:750;letter-spacing:-1px;color:var(--kpi-cor);font-variant-numeric:tabular-nums}
.fm-kpi-risco{background:#fffbeb}.fm-kpi-atraso{background:#fff5f5}
@media(max-width:1100px){.fm-kpis{padding:10px 16px 12px}.fm-kpis-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.fm-kpi{padding:9px 12px}.fm-kpi strong{font-size:24px}.fm-detalhe{top:0}}
@media(max-width:600px){.fm-kpis{padding:10px}.fm-kpis-caption span{display:none}.fm-kpis-grid{display:flex;overflow-x:auto;padding-bottom:5px;scroll-snap-type:x proximity}.fm-kpi{flex:0 0 112px;scroll-snap-align:start}.fm-body .fm-canvas{min-height:0}.fm-body .fm-sidebar{min-height:145px}.fm-detalhe{top:0}}
.fm-header{height:48px;padding:4px 24px;border-top-width:3px}
.fm-header h1{margin:0;font-size:11px;font-weight:500;letter-spacing:1.7px;color:#718096;line-height:1.3}
.fm-header h1 span{font-size:11px;padding:3px 7px}
.fm-header .btn{padding:7px 14px}
.fm-kpis{padding:8px 24px 10px}
.fm-kpis-caption{margin-bottom:6px;font-size:10px}
.fm-kpis-grid{gap:8px}
.fm-kpi{border-radius:8px;padding:8px 12px}
.fm-kpi-label{font-size:10px;gap:5px}
.fm-kpi strong{margin-top:4px;font-size:24px;line-height:1}
.fm-sidebar{padding-top:18px}
@media(max-width:1100px){.fm-header{height:48px;padding:4px 16px}.fm-kpis{padding:7px 16px 9px}.fm-kpi{padding:7px 10px}.fm-kpi strong{font-size:22px}}
@media(max-width:600px){.fm-header{height:auto;min-height:48px;padding:4px 10px;gap:8px}.fm-header h1{font-size:9px;letter-spacing:1px}.fm-kpis{padding:7px 10px}.fm-kpi{flex-basis:104px}.fm-kpi strong{font-size:21px}}
.topbar:has(.pr-toolbar){display:flex;flex-direction:column;align-items:stretch;gap:18px}
.topbar:has(.pr-toolbar)>.actions{display:block;width:100%}
.topbar:has(.pr-toolbar)>.title p{max-width:100%;margin-bottom:0}
.pr-toolbar{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:14px 18px;display:grid;gap:12px}
.pr-toolbar-main,.pr-toolbar-secondary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pr-toolbar-secondary{border-top:1px solid var(--border);padding-top:12px}
.pr-toolbar-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pr-toolbar-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);min-width:68px}
.pr-toolbar .btn{font-size:12px;padding:9px 13px;min-height:38px;white-space:nowrap}
.pr-toolbar .pr-voz-info{font-size:10px;max-width:340px;white-space:normal}
@media(max-width:700px){.pr-toolbar{padding:12px}.pr-toolbar-main,.pr-toolbar-secondary{align-items:stretch;gap:12px}.pr-toolbar-group{width:100%;gap:8px}.pr-toolbar-label{width:100%}.topbar .pr-toolbar .btn{flex:0 1 auto;min-width:0}.pr-toolbar .pr-voz-info{max-width:100%;align-items:flex-start}}

/* ── Relógio do ciclo + área de atenção ─────────────────────────────────────── */
.fm-header-dir{display:flex;align-items:center;gap:14px}
.fm-relogio{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;font-size:11px;color:#738196;white-space:nowrap}
.fm-relogio strong{font-size:12px;font-weight:700;color:#20324b;font-variant-numeric:tabular-nums}
.fm-relogio-agora strong{color:#0891b2}
/* O círculo não pisca junto com o pino: a área é referência de leitura, e piscar duas coisas
   sobrepostas cansa a vista sem dizer nada a mais. */
.fm-area{pointer-events:none}
.fm-area-tip{font-size:11px;line-height:1.6;width:270px;white-space:normal;overflow-wrap:break-word}
.fm-area-tip strong{display:block;font-size:13px}
.fm-area-tip span{display:block}
.fm-area-motivo{font-weight:700}
.fm-area-ocorrencia{margin-top:5px;padding-top:5px;border-top:1px solid #d8e1eb}
.fm-area-ocorrencia b{color:#0e7490}
.fm-area-ocorrencia i{color:#748399;font-style:normal;font-size:10px}
@media(max-width:600px){.fm-relogio{font-size:10px}.fm-relogio strong{font-size:11px}}
.fm-area-sem-occ{color:#8a97a8;font-style:italic}

/* ── Halo: o selo em volta do pino ──────────────────────────────────────────
   Tamanho FIXO em pixels, dentro do próprio ícone do marcador. Em km reais (L.circle) ele crescia
   ao afastar o zoom e sumia ao aproximar — o destaque mudava de tamanho justamente quando a pessoa
   mexia no mapa para enxergar melhor. Selo tem tamanho de selo: o olho aprende uma vez. */
.fm-pino{position:relative;width:100%;height:100%}
.fm-halo-svg{position:absolute;inset:0;overflow:visible}
/* O caminhão fica centrado por cima do halo, no mesmo ponto que o Leaflet ancora. */
.fm-pino .fm-truck-svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ── Radar: risco/atraso ainda SEM ocorrência registrada ─────────────────────
   Círculo parado = "tem problema aqui". Círculo varrendo = "tem problema aqui e ninguém disse por
   quê" — é a fila do Monitoramento aparecendo no mapa. Para de girar quando a ocorrência entra.

   A animação vive no ícone do marcador (não numa camada à parte): camada separada era destruída e
   recriada a cada ciclo de 7s do fmAtualizar, e isso fazia o radar PARAR e PISCAR. */
.fm-radar-gira{animation:fm-varredura 3.4s linear infinite}
@keyframes fm-varredura{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* O halo inteiro pulsa de leve, para o estado se ler mesmo com o feixe do outro lado do giro. */
.fm-halo-svg:has(.fm-radar-gira) circle{animation:fm-radar-borda 3.4s ease-in-out infinite}
@keyframes fm-radar-borda{0%,100%{stroke-opacity:.9}50%{stroke-opacity:.45}}
/* O radar IGNORA prefers-reduced-motion de propósito (decisão do dono, 11/09/2026) — mesmo padrão
   do NexusLOS Rotas. As máquinas da operação vêm com animação do Windows desligada, e respeitar a
   media query fazia o radar não existir justamente para quem vai usá-lo: o giro É o sinal, parado
   ele não diz nada que o círculo já não diga. */
.fm-area-varrendo{font-weight:700;opacity:.8}

.fm-transito-info{border-top:1px solid #dce3eb;margin-top:8px;padding-top:8px}.fm-transito-info[hidden]{display:none}.fm-transito-cores{display:flex;flex-wrap:wrap;gap:8px}.fm-transito-cores span:before{content:"";display:inline-block;width:14px;height:4px;background:var(--cor);margin-right:4px;vertical-align:middle}.fm-transito-botao{background:white!important;color:#20324b!important}.fm-transito-botao[aria-pressed="true"]{background:#dbeafe!important;border-color:#2563eb}.fm-controles-mapa{flex-wrap:wrap;max-width:calc(100% - 65px);justify-content:flex-end}

/* Realce apenas do transito: preserva o fundo, as rotas e os marcadores. */
.fm-transito-tiles{filter:saturate(1.5) contrast(1.15) brightness(1.08) drop-shadow(0 0 1px rgba(30,41,59,.65))}
.fm-transito-cores span:before{height:6px;filter:saturate(1.5) contrast(1.15) brightness(1.08);box-shadow:0 0 1px #1e293b}

.fm-mobile-bar { display: none; }
@media (max-width: 768px) {
  .fm-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; }
  .fm-header { min-height: 52px; height: auto; padding: 8px 12px; gap: 8px; }
  .fm-header h1 { font-size: 10px; letter-spacing: .6px; }
  .fm-header-dir { gap: 8px; min-width: 0; }
  .fm-header .btn { min-height: 40px; padding: 6px 10px; font-size: 12px; }
  .fm-relogio { display: none; }
  .fm-kpis { padding: 6px 10px; }
  .fm-kpis-caption { margin-bottom: 4px; }
  .fm-kpis-caption span { display: none; }
  .fm-kpis-grid { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .fm-kpi { flex: 0 0 100px; padding: 6px 8px; scroll-snap-align: start; }
  .fm-kpi strong { font-size: 22px; }
  .fm-mobile-bar { display: flex; gap: 8px; padding: 6px 10px; background: #fff; border-bottom: 1px solid #dce3eb; flex-shrink: 0; }
  .fm-mobile-bar button { min-height: 42px; padding: 8px 14px; border: 1px solid #d8e1eb; border-radius: 999px; background: #f3f6fa; color: #20324b; font: 600 13px system-ui, sans-serif; }
  .fm-mobile-bar button[aria-expanded="true"] { background: #e0f2fe; border-color: #38bdf8; }
  .fm-body { flex-direction: column; min-height: 0; overflow: hidden; }
  .fm-body .fm-sidebar { display: none; }
  .fm-filtros-abertos .fm-body .fm-sidebar { display: flex; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; z-index: 650; padding: 12px 16px; border: 0; overscroll-behavior: contain; }
  .fm-sidebar h2 { font-size: 16px; }
  .fm-sidebar input, .fm-sidebar select { min-height: 44px; font-size: 16px; }
  .fm-sidebar .fm-lista { flex-shrink: 0; overflow: visible; }
  .fm-body .fm-canvas { flex: 1; width: 100%; min-height: 0; }
  .fm-controles-mapa { top: 10px; right: 10px; gap: 6px; max-width: calc(100% - 60px); }
  .fm-controles-mapa .btn { min-height: 42px; padding: 8px 10px; font-size: 12px; }
  .fm-velocidade { display: none; }
  .fm-legenda { display: none; }
  .fm-legenda-aberta .fm-legenda { display: block; left: 10px; right: 10px; bottom: 24px; max-width: none; max-height: 45%; overflow-y: auto; font-size: 12px; line-height: 1.6; padding: 12px; }
  .fm-detalhe { position: absolute; inset: auto 0 0; width: 100%; max-width: 100%; max-height: 65%; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; z-index: 700; box-shadow: 0 -5px 24px #20324b33; overscroll-behavior: contain; }
  .fm-detalhe .btn { min-height: 44px; }
  .fm-map .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
}