/* Acompanhamento: mapa, cartoes de maloteiros, graficos. Cores vem dos tokens (claro/escuro). */

/* ---------- layout ---------- */
.acomp__grid { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .acomp__grid { grid-template-columns: minmax(0, 1fr) 410px; align-items: start; } }
.acomp__tools { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.acomp__stamp { color: var(--texto-3); font-size: var(--t-13); }
.acomp__side { display: grid; gap: var(--e-4); align-content: start; }
.acomp__charthead { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.acomp__map { overflow: hidden; }
.acomp__aviso { display: flex; gap: var(--e-2); align-items: flex-start; margin: var(--e-3) var(--e-4) var(--e-4); padding: var(--e-3); border-radius: var(--raio); background: var(--alerta-bg); color: var(--alerta); font-size: var(--t-13); }
.acomp__aviso a { color: inherit; text-decoration: underline; }
.stat__label { display: flex; align-items: center; gap: var(--e-2); }
.is-err { color: var(--erro); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--texto-3); }
.live-dot.is-on { background: var(--sucesso); animation: ponto 1.8s ease-in-out infinite; }
@keyframes ponto { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sucesso) 22%, transparent); } }

/* ---------- controle segmentado ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--raio-pilula); background: var(--hover); }
.seg__btn { min-height: 32px; padding: 0 var(--e-3); border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--texto-2); font: inherit; font-size: var(--t-13); cursor: pointer; }
.seg__btn:hover { color: var(--tinta); }
.seg__btn[aria-checked="true"] { background: var(--painel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / 0.14); }
.seg__btn:focus-visible { box-shadow: var(--foco); outline: none; }
.circle--sm { width: 36px; height: 36px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); }

/* ---------- mapa ---------- */
.mapa__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
.mapa__toggle[aria-pressed="false"] { opacity: 0.6; }
.mapa__stage { position: relative; height: clamp(420px, 66vh, 780px); background: var(--mapa-fundo); overflow: hidden; touch-action: none; cursor: grab; }
.mapa.is-dragging .mapa__stage { cursor: grabbing; }
.mapa__svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.mapa__svg:focus-visible { outline: 2px solid var(--tinta); outline-offset: -3px; }
.mapa__estado { fill: var(--mapa-uf); stroke: var(--mapa-uf-borda); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mapa__estado.is-ativo { fill: var(--mapa-uf-ativo); }
.mapa__municipio { fill: none; stroke: var(--mapa-mun-borda); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.mapa__municipio.is-ativo { fill: var(--mapa-mun-ativo); stroke: var(--c1); stroke-width: 0.9; }

.bolha { cursor: pointer; outline: none; }
.bolha__c { fill: var(--c1); fill-opacity: 0.8; stroke: var(--painel); transition: fill-opacity var(--mov-rapido); }
.bolha__halo { fill: var(--c1); fill-opacity: 0.16; transition: fill-opacity var(--mov-rapido); }
.bolha__alerta { fill: none; stroke: var(--alerta); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0; }
.bolha--alerta .bolha__alerta { opacity: 1; }
.mapa[data-metric="receber"] .bolha__c, .mapa[data-metric="receber"] .bolha__halo { fill: var(--c2); }
.mapa[data-metric="vencido"] .bolha__c, .mapa[data-metric="vencido"] .bolha__halo { fill: var(--erro); }
.mapa[data-metric="vencido"] .bolha__alerta, .mapa[data-metric="receber"] .bolha__alerta { stroke: var(--erro); }
.bolha:hover .bolha__c, .bolha.is-sel .bolha__c { fill-opacity: 1; }
.bolha:hover .bolha__halo, .bolha.is-sel .bolha__halo { fill-opacity: 0.3; }
.bolha.is-sel .bolha__c { stroke: var(--tinta); }
.bolha:focus-visible .bolha__halo { fill-opacity: 0.35; stroke: var(--tinta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bolha--vazia { opacity: 0.55; }
.rotulo { fill: var(--tinta); font-family: var(--fonte-ui); font-weight: 600; paint-order: stroke; stroke: var(--mapa-fundo); stroke-linejoin: round; pointer-events: none; }
.rotulo.is-sel { fill: var(--c1); }

.mal { --mc: var(--c1); cursor: pointer; outline: none; }
.mal--c1 { --mc: var(--c1); } .mal--c2 { --mc: var(--c2); } .mal--c3 { --mc: var(--c3); } .mal--c4 { --mc: var(--c4); } .mal--c5 { --mc: var(--c5); } .mal--c6 { --mc: var(--c6); }
.mal__dot { fill: var(--painel); stroke: var(--mc); }
.mal__txt { fill: var(--tinta); font-family: var(--fonte-ui); font-weight: 700; pointer-events: none; }
.mal__halo { fill: var(--mc); fill-opacity: 0.18; }
.mal__pulso { fill: var(--mc); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mal.is-live .mal__pulso { animation: pulso 2.2s ease-out infinite; }
@keyframes pulso { 0% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
.mal--transito .mal__halo { fill: var(--consig); fill-opacity: 0.32; }
.mal--semsinal .mal__dot, .mal--ultima .mal__dot { stroke-dasharray: 3 2; }
.mal--semsinal, .mal--ultima, .mal--semdados, .mal.is-inativo { opacity: 0.8; }
.mal:hover .mal__halo, .mal.is-sel .mal__halo, .mal:focus-visible .mal__halo { fill-opacity: 0.4; }
.mal.is-sel .mal__dot { stroke-width: 3; }

.rota { --mc: var(--c1); fill: none; stroke: var(--mc); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.rota--trilha { stroke-dasharray: none; stroke-width: 2.6; opacity: 0.85; }
.rota--c1 { --mc: var(--c1); } .rota--c2 { --mc: var(--c2); } .rota--c3 { --mc: var(--c3); } .rota--c4 { --mc: var(--c4); } .rota--c5 { --mc: var(--c5); } .rota--c6 { --mc: var(--c6); }
.rota__parada { fill: var(--painel); stroke: var(--mc); stroke-width: 2; opacity: 0.8; vector-effect: non-scaling-stroke; }
.rota.is-ativa { opacity: 1; stroke-width: 3.2; }
.rota.is-apagada, .rota__parada.is-apagada { opacity: 0.1; }
.mapa[data-rotas="false"]:not(.has-sel-mal) .mapa__rotas { display: none; }

.mapa__legend { position: absolute; left: var(--e-3); bottom: var(--e-3); display: grid; gap: 6px; padding: var(--e-2) var(--e-3); background: color-mix(in srgb, var(--painel) 92%, transparent); border: 1px solid var(--linha); border-radius: var(--raio); font-size: 12px; color: var(--texto-2); pointer-events: none; }
.mapa__legend-row { display: flex; align-items: center; gap: var(--e-2); }
.lg { display: inline-block; flex: none; }
.lg--bolha { width: 14px; height: 14px; border-radius: 50%; background: var(--c1); opacity: 0.8; }
.lg--receber { background: var(--c2); }
.lg--vencido { background: var(--erro); }
.lg--alerta { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--alerta); }
.lg--mal { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c1); background: var(--painel); }
.mapa__zoom { position: absolute; right: var(--e-3); top: var(--e-3); display: grid; gap: var(--e-2); }
.mapa__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--e-2); text-align: center; color: var(--texto-2); pointer-events: none; }
.mapa__empty[hidden] { display: none; }
.mapa__empty .icon { width: 32px; height: 32px; }

/* ---------- maloteiros ---------- */
.avatar { --mc: var(--c1); display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--mc); background: color-mix(in srgb, var(--mc) 16%, var(--painel)); color: var(--tinta); font-weight: 700; font-size: var(--t-14); position: relative; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--t-12); }
.avatar--c1 { --mc: var(--c1); } .avatar--c2 { --mc: var(--c2); } .avatar--c3 { --mc: var(--c3); } .avatar--c4 { --mc: var(--c4); } .avatar--c5 { --mc: var(--c5); } .avatar--c6 { --mc: var(--c6); }
.avatar.is-live::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--sucesso); border: 2px solid var(--painel); }
.malcards { display: grid; gap: var(--e-2); padding: var(--e-3); max-height: 520px; overflow: auto; }
.malcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3); width: 100%; padding: var(--e-3); text-align: left; font: inherit; color: inherit; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.malcard:hover { border-color: var(--linha-forte); }
.malcard.is-sel { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.malcard:focus-visible { box-shadow: var(--foco); outline: none; }
.malcard.is-inativo { opacity: 0.65; }
.malcard__main { display: grid; gap: 2px; min-width: 0; }
.malcard__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
.malcard__text { font-size: var(--t-13); color: var(--texto-2); }
.malcard__meta { font-size: 12px; color: var(--texto-3); }
.malcard__stats { display: flex; flex-wrap: wrap; gap: 2px var(--e-3); margin-top: var(--e-1); font-size: 12px; color: var(--texto-3); }
.malcard__stats b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------- painel lateral ---------- */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li + li { border-top: 1px solid var(--linha); }
.rank__row { display: flex; justify-content: space-between; gap: var(--e-3); width: 100%; padding: var(--e-3) var(--e-4); text-align: left; font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
.rank__row:hover { background: var(--hover); }
.rank__row:focus-visible { box-shadow: var(--foco); outline: none; }
.rank__name, .rank__vals { display: grid; gap: 2px; align-content: start; }
.rank__vals { text-align: right; justify-items: end; font-variant-numeric: tabular-nums; }
.rank small, .mini small, .loja small, .chip small, .timeline small { color: var(--texto-3); font-size: 12px; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); padding: var(--e-4); }
.mini { display: grid; gap: 2px; padding: var(--e-3); background: var(--hover); border-radius: var(--raio); }
.mini span { font-size: var(--t-13); color: var(--texto-2); }
.mini b { font-family: var(--fonte-titulo); font-size: var(--t-18); font-variant-numeric: tabular-nums; }
.sec { padding: 0 var(--e-4) var(--e-4); }
.sec h3 { margin: 0 0 var(--e-2); font-size: var(--t-14); color: var(--texto-2); }
.chips, .lojas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.chip { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio); }
.chip > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.loja { display: grid; gap: 2px; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--raio); }
.loja__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
.loja__sub { font-size: 12px; color: var(--texto-3); }
.loja__vals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-2); }
.loja__vals span { display: grid; gap: 1px; }
.loja__vals b { font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: var(--e-3); padding-bottom: var(--e-3); }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -2px; width: 2px; background: var(--linha); }
.timeline li:last-child::before { display: none; }
.timeline__dot { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 3px solid var(--c1); background: var(--painel); }
.timeline li > span:last-child { display: grid; }

/* ---------- graficos ---------- */
.charts { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (min-width: 1100px) { .chart-card--wide { grid-column: span 2; } }
.chart-card { min-width: 0; }
.chart { margin: 0; display: grid; gap: var(--e-2); }
.chart__title { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-16); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: 12px; color: var(--texto-2); }
.chart__key { display: inline-flex; align-items: center; gap: 6px; }
.chart__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; fill: none; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__svg--list { max-height: 340px; }
.chart__grid { stroke: var(--linha); stroke-width: 1; }
.chart__tick { fill: var(--texto-3); font-size: 11px; font-family: var(--fonte-ui); }
.chart__label { fill: var(--texto-2); font-size: 12px; font-family: var(--fonte-ui); }
.chart__value { fill: var(--tinta); font-size: 12px; font-weight: 600; font-family: var(--fonte-ui); }
.chart__center { fill: var(--tinta); font-size: 19px; font-weight: 700; font-family: var(--fonte-titulo); }
.chart__c1 { fill: var(--c1); } .chart__c2 { fill: var(--c2); } .chart__c3 { fill: var(--c3); } .chart__c4 { fill: var(--c4); } .chart__c5 { fill: var(--c5); } .chart__c6 { fill: var(--c6); }
.chart__swatch.chart__c1 { background: var(--c1); } .chart__swatch.chart__c2 { background: var(--c2); } .chart__swatch.chart__c3 { background: var(--c3); }
.chart__swatch.chart__c4 { background: var(--c4); } .chart__swatch.chart__c5 { background: var(--c5); } .chart__swatch.chart__c6 { background: var(--c6); }
.chart__tone--ok { fill: var(--sucesso); } .chart__tone--warn { fill: var(--alerta); } .chart__tone--err { fill: var(--erro); }
.chart__line.chart__c4 { fill: none; stroke: var(--c4); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot.chart__c4 { fill: var(--c4); stroke: var(--painel); stroke-width: 1.5; }
.chart__hit { fill: transparent; }
.chart__col:hover .chart__hit { fill: color-mix(in srgb, var(--tinta) 6%, transparent); }
.chart__row:hover .chart__bar, .chart__col:hover .chart__bar { filter: brightness(1.1); }
.chart__bar { transition: filter var(--mov-rapido); }
.chart__donut { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); justify-items: center; }
.chart__donut .chart__svg { max-width: 170px; }
.chart__donut .chart__list { width: 100%; }
.chart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-13); }
.chart__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-2); }
.chart__list b { font-variant-numeric: tabular-nums; }
.chart-tip { position: fixed; left: var(--x, 0); top: var(--y, 0); z-index: 90; max-width: min(360px, 90vw); padding: 8px 10px; background: var(--marca-900); color: #f1f4f2; border: 1px solid var(--linha-forte); border-radius: 8px; font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: var(--sombra-menu); }
.chart-tip[hidden] { display: none; }

@media (max-width: 640px) {
  .mapa__stage { height: 58vh; }
  .mapa__legend { display: none; }
  .minis, .loja__vals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mal.is-live .mal__pulso, .live-dot.is-on { animation: none; }
  .mal.is-live .mal__pulso { opacity: 0.25; }
}
@media print { .mapa__zoom, .acomp__tools { display: none; } .mapa__stage { height: 420px; } }

/* tabela equivalente do grafico (so leitor de tela): tabelas ignoram width/height pequenos, entao vira bloco e fica contida no figure */
.chart { position: relative; }
table.sr-only { display: block; }