/* =====================================================================
   RADAR LEAD  |  estilos (visual Marinho A2M)
   Claro é o padrão; o escuro vale com <html data-tema="escuro">.
   Topo e login ficam no azul-marinho da A2M nos dois temas.
   ===================================================================== */

:root {
  --fundo: #f2f5f9;
  --fundo-2: #ffffff;
  --painel: rgba(255, 255, 255, 0.97);
  --painel-solido: #ffffff;
  --campo: #f5f8fb;
  --chip: #f5f8fb;
  --chip-ativo: #e3ebf5;
  --chip-ativo-borda: #9fb6d3;
  --linha: #dce3ec;
  --linha-forte: #c8d3e0;
  --texto: #0e1a26;
  --suave: #5b6b80;
  --acento: #b7861f;
  --acento-hover: #a07419;
  --acento-texto: #ffffff;
  --foco: rgba(183, 134, 31, 0.28);
  --verde: #04a36b;
  --azul: #0b63e5;
  --vermelho: #d23c3c;
  --amarelo: #c98a0c;
  --link: #0b63e5;
  --hover: rgba(14, 26, 38, 0.05);
  --sombra: 0 10px 30px rgba(14, 26, 38, 0.12);
  --sombra-forte: 0 18px 50px rgba(14, 26, 38, 0.22);
  --mapa-fundo: #e7edf4;
  --esqueleto-a: #e9eef4;
  --esqueleto-b: #f5f8fb;
  --perigo-fundo: #fdecec;
  --perigo-borda: #e5a3a3;
  --perigo-texto: #9b2525;
  --banner-fundo: #fff7e6;
  --banner-borda: #e3b04b;
  --banner-texto: #6b4a06;
  --icone-ctrl: none;

  /* fixos nos dois temas */
  --marinho: #0e1a26;
  --topo-texto: #eaf0f7;
  --topo-suave: #9db0c6;
  --topo-linha: rgba(234, 240, 247, 0.16);
  --radar: #34d399;
  --ouro: #e3b04b;

  --raio: 12px;
  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Jost", "Futura", "Century Gothic", var(--fonte);
  --topo: 56px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --fundo: #0b1622;
  --fundo-2: #102033;
  --painel: rgba(16, 32, 51, 0.96);
  --painel-solido: #102033;
  --campo: #0d1b2a;
  --chip: #152a42;
  --chip-ativo: #1d3653;
  --chip-ativo-borda: #3b6b9a;
  --linha: #213a57;
  --linha-forte: #2c4a6d;
  --texto: #eaf0f7;
  --suave: #8fa3bc;
  --acento: #e3b04b;
  --acento-hover: #edc06a;
  --acento-texto: #2a1d00;
  --foco: rgba(227, 176, 75, 0.28);
  --verde: #34d399;
  --azul: #22d3ee;
  --vermelho: #f87171;
  --amarelo: #fbbf24;
  --link: #5bc8f5;
  --hover: rgba(255, 255, 255, 0.05);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-forte: 0 18px 50px rgba(0, 0, 0, 0.55);
  --mapa-fundo: #08121d;
  --esqueleto-a: #13243a;
  --esqueleto-b: #1a3150;
  --perigo-fundo: #3a1010;
  --perigo-borda: #b91c1c;
  --perigo-texto: #fecaca;
  --banner-fundo: #3b2a06;
  --banner-borda: #e3b04b;
  --banner-texto: #fde68a;
  --icone-ctrl: invert(0.88);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 500; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
.ic { flex: none; }
.so-escuro { display: none; }
:root[data-tema="escuro"] .so-escuro { display: inline-block; }
:root[data-tema="escuro"] .so-claro { display: none; }

/* ---------- Radar (logo e base no mapa) ---------- */
.radar-logo {
  --t: 40px;
  width: var(--t); height: var(--t);
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0 30%, transparent 31%),
              repeating-radial-gradient(circle, transparent 0 calc(var(--t) / 6 - 1px), rgba(52, 211, 153, 0.35) calc(var(--t) / 6 - 1px) calc(var(--t) / 6));
  border: 1.5px solid rgba(52, 211, 153, 0.7);
  overflow: hidden;
  flex: none;
}
.radar-logo.pequeno { --t: 28px; }
.radar-logo.grande { --t: 96px; }
.radar-logo .varredura {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(52, 211, 153, 0.75), rgba(52, 211, 153, 0) 70deg, transparent 360deg);
  animation: girar 2.6s linear infinite;
}
.radar-logo .anel {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: var(--radar); box-shadow: 0 0 10px var(--radar);
}
@keyframes girar { to { transform: rotate(360deg); } }

.radar-base { width: 86px; height: 86px; position: relative; pointer-events: none; }
.radar-base .nucleo {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px;
  border-radius: 50%; background: var(--verde); border: 2px solid #fff; box-shadow: 0 0 14px var(--verde);
}
.radar-base .anel {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--verde);
  animation: pulso 2.4s ease-out infinite; opacity: 0;
}
.radar-base .anel.a2 { animation-delay: 1.2s; }
.radar-base .varredura {
  position: absolute; inset: 8px; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--verde) 55%, transparent), transparent 80deg, transparent 360deg);
  animation: girar 3s linear infinite;
}
@keyframes pulso { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .radar-logo .varredura, .radar-base .varredura, .radar-base .anel { animation: none; }
}

/* ---------- Telas cheias (carregando, login): marinho nos dois temas ---------- */
.tela-cheia {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 115%, #173350 0%, var(--marinho) 62%);
}
.tela-login {
  padding: 16px;
  --painel: rgba(16, 32, 51, 0.94); --linha: #213a57; --linha-forte: #2c4a6d; --texto: #eaf0f7; --suave: #8fa3bc;
  --campo: #0d1b2a; --acento: #e3b04b; --acento-hover: #edc06a; --acento-texto: #2a1d00; --foco: rgba(227, 176, 75, 0.28);
  --vermelho: #f87171;
  color: var(--texto); color-scheme: dark;
}
.estrelas {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 35%, #fff4 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 82%, #fff6 50%, transparent 51%);
  background-size: 380px 380px, 460px 460px, 520px 520px, 300px 300px, 610px 610px, 420px 420px;
  opacity: 0.6;
}
.cartao-login {
  position: relative; width: min(400px, 100%);
  background: var(--painel); border: 1px solid var(--linha); border-radius: 18px;
  padding: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); display: grid; gap: 14px;
  backdrop-filter: blur(10px);
}
.marca-login { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.marca-login h1 { font-size: 27px; font-weight: 400; }
.marca-login h1 b { color: var(--radar); font-weight: 500; }
.marca-login p { margin: 2px 0 0; color: var(--suave); }
.login-erro { color: var(--vermelho); min-height: 1.2em; margin: 0; }
.login-rodape { color: var(--suave); font-size: 12.5px; margin: 0; text-align: center; }
.assinatura { position: absolute; bottom: calc(18px + var(--seguro-baixo)); margin: 0; display: flex; align-items: center; gap: 8px; color: #8fa3bc; font-size: 12px; }
.assinatura img { height: 17px; width: auto; opacity: 0.85; }

/* ---------- Formulários ---------- */
.campo {
  width: 100%; background: var(--campo); border: 1px solid var(--linha-forte); border-radius: 9px;
  padding: 9px 11px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; min-height: 38px;
}
.campo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--foco); }
textarea.campo { resize: vertical; min-height: 60px; }
select.campo { cursor: pointer; }
.mini-campo { width: auto; min-width: 90px; padding: 5px 8px; min-height: 32px; }
.rotulo { display: grid; gap: 6px; color: var(--suave); font-size: 12.5px; font-weight: 600; }
.rotulo.atrasado { color: var(--vermelho); }
.check { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--acento); }
.form { display: grid; gap: 14px; }
.linha-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--linha-forte); background: var(--painel-solido); border-radius: 9px;
  padding: 8px 14px; cursor: pointer; font-weight: 600; min-height: 38px;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { background: var(--hover); border-color: var(--suave); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.btn.primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.btn.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.largo { width: 100%; padding: 11px; }
.btn-texto { background: none; border-color: transparent; color: var(--suave); padding-inline: 6px; }
.btn-texto:hover { background: var(--hover); color: var(--texto); border-color: transparent; }
.mini-btn { min-height: 28px; padding: 4px 9px; font-size: 12.5px; }
.btn-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: none; border: 0; color: var(--suave); cursor: pointer; flex: none;
}
.btn-icone:hover { background: var(--hover); color: var(--texto); }
.btn-icone.mini-btn { width: 24px; height: 24px; min-height: 0; padding: 0; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Topo (marinho nos dois temas) ---------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.topo {
  height: var(--topo); flex: none; display: flex; align-items: center; gap: 22px;
  padding: 0 16px; background: var(--marinho); color: var(--topo-texto); z-index: 30;
}
.marca { display: flex; align-items: center; gap: 10px; font: 400 19px var(--titulo); white-space: nowrap; letter-spacing: 0.01em; }
.marca b { color: var(--radar); font-weight: 500; }
.abas { display: flex; gap: 2px; align-self: stretch; }
.abas button {
  border: 0; background: none; padding: 0 14px; cursor: pointer; color: var(--topo-suave); font-weight: 600;
  box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s, box-shadow 0.15s;
}
.abas button.ativa { color: var(--topo-texto); box-shadow: inset 0 -2px 0 var(--ouro); }
.abas button:hover:not(.ativa) { color: var(--topo-texto); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.campo-topo {
  width: auto; max-width: 260px; min-height: 34px; padding: 5px 10px; color-scheme: dark;
  background: rgba(234, 240, 247, 0.06); border-color: var(--topo-linha); color: var(--topo-texto); font-weight: 600;
}
.nome-conta { color: var(--topo-texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--ouro); color: #2a1d00; font-weight: 700; cursor: pointer; flex: none; font-size: 13px;
}
.menu-usuario {
  position: fixed; top: calc(var(--topo) + 4px); right: 12px; z-index: 60; min-width: 250px;
  background: var(--painel-solido); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte);
  padding: 6px; display: grid;
}
.menu-cab { padding: 10px 10px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; display: grid; gap: 2px; }
.menu-cab small { color: var(--suave); }
.menu-usuario button {
  display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.menu-usuario button:hover { background: var(--hover); }

main { flex: 1; position: relative; min-height: 0; }
.aba { position: absolute; inset: 0; }
.pagina { overflow-y: auto; padding: 24px clamp(16px, 4vw, 40px) 40px; }

/* ---------- Mapa ---------- */
#mapa { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #f7f9fc 0%, var(--mapa-fundo) 70%); }
:root[data-tema="escuro"] #mapa {
  background-color: var(--mapa-fundo);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 35%, #fff4 50%, transparent 51%),
    radial-gradient(ellipse at 50% 50%, #0d2236 0%, var(--mapa-fundo) 70%);
  background-size: 380px 380px, 460px 460px, 520px 520px, 300px 300px, 610px 610px, 100% 100%;
}
.maplibregl-ctrl-group { background: var(--painel-solido) !important; border: 1px solid var(--linha); box-shadow: var(--sombra) !important; border-radius: 10px !important; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--linha) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: var(--icone-ctrl); }
.maplibregl-ctrl-scale { background: var(--painel); color: var(--suave); border-color: var(--suave); }
.maplibregl-ctrl-attrib { background: var(--painel) !important; color: var(--suave); }
.maplibregl-ctrl-attrib a { color: var(--suave); }
.maplibregl-ctrl-attrib-button { filter: var(--icone-ctrl); }
.maplibregl-ctrl-bottom-right { bottom: 8px; right: 6px; }
.etiqueta .maplibregl-popup-content {
  background: var(--painel-solido); color: var(--texto); border: 1px solid var(--linha);
  border-radius: 10px; padding: 8px 11px; font-size: 12.5px; box-shadow: var(--sombra);
}
.etiqueta .maplibregl-popup-tip { display: none; }

.painel-filtros {
  position: absolute; top: 12px; left: 12px; bottom: 12px; width: 300px; z-index: 10;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(10px); box-shadow: var(--sombra);
}
.filtros-topo { display: flex; align-items: center; justify-content: space-between; }
.filtros-topo h3 { font-size: 17px; }
.painel-filtros > .grupo > .rotulo, .painel-filtros details.grupo summary.rotulo, .painel-filtros > .rotulo {
  font: 500 11.5px var(--titulo); text-transform: uppercase; letter-spacing: 0.08em;
}
.grupo { display: grid; gap: 8px; }
details.grupo summary { cursor: pointer; list-style: none; display: block; }
details.grupo summary::-webkit-details-marker { display: none; }
details.grupo summary::after { content: " +"; color: var(--suave); }
details.grupo[open] summary::after { content: " −"; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha);
  background: none; color: var(--suave); border-radius: 999px; padding: 4px 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; min-height: 28px; transition: 0.12s;
}
.chip:hover { color: var(--texto); border-color: var(--linha-forte); }
.chip.ativo { background: var(--chip-ativo); color: var(--texto); border-color: var(--chip-ativo-borda); }
.chip:not(.ativo) .bolinha { opacity: 0.35; }
.grade-uf { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
.grade-uf .chip { justify-content: center; padding: 4px 0; border-radius: 7px; }
.bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bolinha.anel { box-shadow: 0 0 0 1.5px var(--painel-solido), 0 0 0 2.5px var(--linha-forte); }
.bolinha.radar { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 30%, transparent), 0 0 8px var(--verde); }
.busca { display: flex; align-items: center; gap: 8px; background: var(--campo); border: 1px solid var(--linha-forte); border-radius: 9px; padding-left: 10px; color: var(--suave); }
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--foco); }
.busca .campo { border: 0; background: none; box-shadow: none; padding-left: 0; }
.resultados-busca { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 10px; padding: 4px; margin-top: -6px; }
.resultado {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px; border-radius: 8px; cursor: pointer;
}
.resultado:hover { background: var(--hover); }
.resultado span { display: grid; min-width: 0; }
.resultado b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.resultado small { color: var(--suave); font-size: 11.5px; }
.assinatura-a2m { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 11.5px; }
.assinatura-a2m img { height: 15px; width: auto; }

/* Faixa de indicadores no topo do mapa */
.mapa-kpis {
  position: absolute; top: 12px; left: 324px; right: 64px; z-index: 9; display: flex;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra);
  backdrop-filter: blur(10px); transition: right 0.25s ease;
}
.aba:has(.ficha.aberta) .mapa-kpis { right: 434px; }
.kpi-cel { flex: 1; min-width: 0; padding: 8px 16px; border-right: 1px solid var(--linha); display: grid; }
.kpi-cel:last-child { border-right: 0; }
.kpi-cel b { font: 500 21px/1.15 var(--titulo); font-variant-numeric: tabular-nums; }
.kpi-cel > span { color: var(--suave); font-size: 11.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-cel.verde b { color: var(--verde); }
.kpi-cel.atraso.alerta b { color: var(--vermelho); }
.ponto-carga { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none; font-style: normal; }
.carregando .ponto-carga { animation: piscar 0.8s ease-in-out infinite alternate; background: var(--amarelo); }
@keyframes piscar { to { opacity: 0.2; } }

.mapa-ferramentas {
  position: absolute; top: 12px; right: 12px; z-index: 9; display: grid; gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; box-shadow: var(--sombra);
}
.ferramenta { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: var(--painel-solido); color: var(--suave); cursor: pointer; }
.ferramenta:hover { color: var(--texto); background: var(--chip); }
.ferramenta.ativo { color: var(--acento); }

.legenda {
  position: absolute; left: 324px; bottom: 34px; z-index: 9; background: var(--painel); border: 1px solid var(--linha);
  border-radius: 10px; font-size: 12px; box-shadow: var(--sombra); overflow: hidden;
}
.legenda-titulo { border: 0; background: none; padding: 7px 12px; cursor: pointer; color: var(--suave); font-weight: 700; width: 100%; text-align: left; }
.legenda-corpo { display: none; padding: 0 12px 10px; gap: 5px; }
.legenda.aberta .legenda-corpo { display: grid; }
.legenda-corpo div { display: flex; align-items: center; gap: 8px; }

.banner-clique {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 12px; background: var(--banner-fundo); border: 1px solid var(--banner-borda); color: var(--banner-texto);
  border-radius: 10px; padding: 8px 8px 8px 14px; box-shadow: var(--sombra); max-width: calc(100% - 24px);
}

.fab {
  position: absolute; left: 12px; bottom: 16px; z-index: 9; display: none; align-items: center; gap: 8px;
  background: var(--marinho); color: var(--topo-texto); border: 0; border-radius: 999px; padding: 10px 16px;
  font-weight: 700; cursor: pointer; box-shadow: var(--sombra-forte);
}

/* ---------- Ficha ---------- */
.ficha {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 410px; z-index: 15;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-forte); display: flex; flex-direction: column; backdrop-filter: blur(10px);
  transform: translateX(calc(100% + 24px)); transition: transform 0.25s ease; visibility: hidden;
}
.ficha.aberta { transform: none; visibility: visible; }
.ficha-topo { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 16px 12px 12px 18px; border-bottom: 1px solid var(--linha); }
.ficha-topo h2 { font-size: 19px; line-height: 1.25; }
.ficha-topo .sub { margin: 4px 0 0; color: var(--suave); font-size: 12.5px; }
.ficha-topo .voltar { margin: 0 0 6px -6px; }
.ficha-corpo { overflow-y: auto; padding: 14px 18px 24px; display: grid; gap: 4px; align-content: start; }
.ficha-secao { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.ficha-secao:last-child { border-bottom: 0; }
.ficha-secao h3 { font: 500 12px var(--titulo); color: var(--suave); text-transform: uppercase; letter-spacing: 0.08em; }
.ficha-secao h4 { font-size: 14px; margin-bottom: 2px; }
.qualificacao { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--campo); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  --c: var(--azul);
  display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.badge.alvo { --c: var(--azul); }
.badge.neutro { --c: var(--suave); }
.badge.perigo { --c: var(--vermelho); }
.badge.aviso { --c: var(--amarelo); }
.mini { --c: var(--suave); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); white-space: nowrap; }
.mini.neutro { --c: var(--suave); }
.linha-dado { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.linha-dado span { color: var(--suave); }
.linha-dado b { font-weight: 600; text-align: right; }
.endereco { margin: 0; }
.link-acao { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; padding: 4px 0; }
.link-acao:hover { color: var(--acento); }
.link-acao.zap { color: var(--verde); }
.contato-linha { display: flex; gap: 16px; flex-wrap: wrap; }
.cnaes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12.5px; }
.cnaes li { padding: 6px 8px; border-radius: 8px; background: var(--campo); }
.cnaes li.no-perfil { box-shadow: inset 3px 0 0 var(--azul); }
details summary { cursor: pointer; color: var(--suave); font-size: 12.5px; margin-bottom: 6px; }
.nota { margin: 0; color: var(--suave); font-size: 12.5px; padding: 9px 11px; border-radius: 9px; background: var(--campo); border: 1px dashed var(--linha-forte); }
.nova-interacao { display: grid; gap: 8px; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linha-forte); display: grid; gap: 12px; }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); border: 2px solid var(--painel-solido); }
.linha-tempo p { margin: 3px 0 0; white-space: pre-wrap; }
.interacao-topo { display: flex; gap: 8px; justify-content: space-between; font-size: 12.5px; }
.interacao-topo span { color: var(--suave); }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--campo); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.foto:hover .foto-del, .foto:focus-within .foto-del { opacity: 1; }
@media (hover: none) { .foto-del { opacity: 1; } }
.unidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.esqueleto { height: 70px; border-radius: 10px; background: linear-gradient(90deg, var(--esqueleto-a) 0%, var(--esqueleto-b) 50%, var(--esqueleto-a) 100%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
.esqueleto.curto { height: 140px; margin-top: 10px; }
@keyframes brilho { to { background-position: -200% 0; } }
.vazio { color: var(--suave); text-align: center; padding: 18px 8px; margin: 0; }
.vazio.erro { color: var(--vermelho); }

/* ---------- Páginas (carteira, painel, admin) ---------- */
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pagina-topo h1 { font-size: 28px; }
.sub { color: var(--suave); margin: 4px 0 0; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.barra-filtros .campo { width: auto; min-width: 180px; flex: 1 1 180px; max-width: 320px; }
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo-2); }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; color: var(--suave); font: 500 11.5px var(--titulo); text-transform: uppercase; letter-spacing: 0.07em; padding: 10px 12px; background: var(--campo); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr[tabindex] { cursor: pointer; }
.tabela tbody tr[tabindex]:hover { background: var(--hover); }
.tabela td small { display: block; color: var(--suave); font-size: 11.5px; }
.tabela tr.atrasado td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.tabela tr.inativo { opacity: 0.5; }
.tabela tr.destaque-linha { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.tabela .acao { text-align: right; color: var(--suave); white-space: nowrap; }
.tabela.compacta td, .tabela.compacta th { padding: 8px 10px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 4px; min-height: 84px; box-shadow: var(--sombra); }
.kpi.esqueleto { border: 0; box-shadow: none; }
.kpi span { color: var(--suave); font-size: 12.5px; font-weight: 600; }
.kpi b { font: 500 30px var(--titulo); font-variant-numeric: tabular-nums; }
.kpi.pequeno { min-height: 0; padding: 10px 12px; box-shadow: none; }
.kpi.pequeno b { font-size: 21px; }
.kpi.verde b { color: var(--verde); }
.kpi.azul b { color: var(--azul); }
.kpi.vermelho b { color: var(--vermelho); }
.kpi.amarelo b { color: var(--amarelo); }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.cartao { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; box-shadow: var(--sombra); }
.cartao.largo { grid-column: 1 / -1; }
.cartao h3 { font-size: 17px; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.barras { display: grid; gap: 8px; }
.barra-linha { display: grid; grid-template-columns: 96px 1fr 50px; gap: 10px; align-items: center; font-size: 13px; }
.barra-linha b { text-align: right; }
.barra { height: 10px; border-radius: 999px; background: var(--campo); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); min-width: 2px; }
.mini-barra { display: inline-block; width: 70px; height: 7px; vertical-align: middle; }
.sub-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--linha); }
.sub-aba { border: 0; background: none; padding: 9px 12px; cursor: pointer; color: var(--suave); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-aba.ativa { color: var(--texto); border-bottom-color: var(--acento); }
.admin-conteudo { display: grid; gap: 14px; }

/* ---------- Plataforma (A2M) e pedidos ---------- */
.logo-mini { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; background: var(--fundo-2); border: 1px solid var(--linha); flex: none; padding: 3px; }
.logo-mini.vazio { display: grid; place-items: center; font: 600 13px var(--titulo); color: var(--suave); background: var(--campo); padding: 0; }
.cliente-cel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cliente-cel span { display: grid; min-width: 0; }
.cliente-cab { display: flex; align-items: center; gap: 14px; }
.cliente-cab .logo-mini { width: 56px; height: 56px; }
.cliente-cab .badges { margin-top: 6px; }
.acima { color: var(--vermelho); font-weight: 700; }
.form-titulo { font: 500 12px var(--titulo); color: var(--suave); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.bloco { border: 1px solid var(--linha); border-radius: 10px; background: var(--campo); }
.bloco > summary { padding: 10px 12px; margin: 0; font-weight: 700; color: var(--texto); font-size: 13.5px; }
.bloco-corpo { padding: 0 12px 12px; display: grid; gap: 10px; }
.bloco .tabela-wrap { background: var(--fundo-2); }
.lista-limitada { max-height: 320px; overflow-y: auto; }
.logo-previa { height: 110px; border: 1px dashed var(--linha-forte); border-radius: 10px; display: grid; place-items: center; background: var(--campo); color: var(--suave); padding: 12px; }
.logo-previa img { max-height: 86px; max-width: 100%; object-fit: contain; }
.acesso-linha { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; }
.acesso-linha .linha-form { justify-content: space-between; align-items: center; }
.pedido-texto { margin: 0; white-space: pre-wrap; }
.lista-pedidos { display: grid; gap: 2px; }
.pedido-item { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.pedido-item:last-child { border-bottom: 0; }
.logo-cliente { height: 30px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px 6px; }

/* ---------- Modal e toast ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(7, 14, 22, 0.55); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity 0.2s; }
.modal-fundo.visivel { opacity: 1; }
.modal { width: min(480px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--painel-solido); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra-forte); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 10px 20px; }
.modal-topo h2 { font-size: 20px; }
.modal-corpo { padding: 4px 20px 16px; overflow-y: auto; }
.modal-corpo p { margin: 0 0 8px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--linha); }
#toasts { position: fixed; bottom: calc(18px + var(--seguro-baixo)); left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.toast { background: var(--painel-solido); border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 10px; padding: 11px 14px; box-shadow: var(--sombra-forte); opacity: 0; transform: translateY(8px); transition: 0.25s; pointer-events: auto; }
.toast.visivel { opacity: 1; transform: none; }
.toast-ok { border-left-color: var(--verde); }
.toast-erro { border-left-color: var(--vermelho); }
.toast-aviso { border-left-color: var(--amarelo); }

.abas-mobile { display: none; }
.so-mobile { display: none; }

/* ---------- Celular e tablet ---------- */
@media (max-width: 1100px) {
  .kpi-cel.atraso { display: none; }
}
@media (max-width: 980px) {
  .legenda { left: 12px; bottom: 34px; }
  .painel-filtros { width: 280px; }
  .mapa-kpis { left: 304px; }
  .ficha { width: 380px; }
  .aba:has(.ficha.aberta) .mapa-kpis { right: 64px; }
}
@media (max-width: 760px) {
  :root { --topo: 52px; }
  .topo { gap: 10px; padding: 0 10px; }
  .abas { display: none; }
  .marca span { display: none; }
  .campo-topo { max-width: 52vw; }
  .nome-conta { max-width: 52vw; }
  main { padding-bottom: calc(60px + var(--seguro-baixo)); }
  .aba { bottom: calc(60px + var(--seguro-baixo)); }
  .abas-mobile {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(60px + var(--seguro-baixo)); padding-bottom: var(--seguro-baixo); background: var(--marinho); border-top: 1px solid var(--topo-linha);
  }
  .abas-mobile button { border: 0; background: none; color: var(--topo-suave); display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 700; cursor: pointer; }
  .abas-mobile button.ativa { color: var(--ouro); }
  .so-mobile { display: inline-grid; }
  .fab { display: inline-flex; }
  .painel-filtros {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82%; border-radius: 18px 18px 0 0;
    transform: translateY(105%); transition: transform 0.25s ease, visibility 0.25s; z-index: 25; visibility: hidden;
  }
  .painel-filtros.aberto { transform: none; visibility: visible; }
  #toasts { bottom: calc(72px + var(--seguro-baixo)); }
  .mapa-kpis { left: 10px; right: 58px; top: 10px; }
  .aba:has(.ficha.aberta) .mapa-kpis { right: 58px; }
  .kpi-cel { padding: 6px 10px; }
  .kpi-cel b { font-size: 17px; }
  .kpi-cel:nth-child(n + 3) { display: none; }
  .legenda { display: none; }
  .ficha { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 88%; border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .ficha.aberta { transform: none; }
  .ficha-topo::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--linha-forte); }
  .grade-2 { grid-template-columns: 1fr; }
  .pagina { padding: 18px 14px 30px; }
  .pagina-topo h1 { font-size: 23px; }
  .grade-cartoes { grid-template-columns: 1fr; }
  .barra-filtros .campo { max-width: none; }
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; }
  .tabela-cartoes tr { padding: 10px 12px; border-bottom: 1px solid var(--linha); }
  .tabela-cartoes td { border: 0; padding: 2px 0; }
  .tabela-cartoes td[data-rotulo]:not(:first-child)::before { content: attr(data-rotulo) ": "; color: var(--suave); font-size: 12px; }
  .tabela-cartoes td.acao { display: none; }
  .modal-fundo { place-items: end center; padding: 0; }
  .modal { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; }
  .banner-clique { top: 64px; }
}