/* mapa-brasil.css — MAPA BRASIL engGenai (v1.0 · 03/10/2026)
   Tudo escopado em .mb. A cor da marca entra por --mb-marca / --mb-marca-2 / --mb-pino (o app hospedeiro sobrescreve).
   Tema claro (padrão, leitura de carta) e escuro (data-tema="escuro"). */

.mb {
  --mb-marca: #1767A0;
  --mb-marca-2: #42A0ED;
  --mb-pino: #1B2A55;
  --mb-aberta: #E39B2D;
  --mb-execucao: #18A57B;
  --mb-mar: #DCE7F2;
  --mb-mar-luz: #EEF4FA;
  --mb-grade: rgba(23, 103, 160, .07);
  --mb-vizinho: #E9EEF3;
  --mb-vizinho-borda: #C9D5E1;
  --mb-uf: #FBFDFF;
  --mb-uf-borda: #9DB3C9;
  --mb-uf-hover: #EAF3FC;
  --mb-mun-borda: rgba(80, 115, 150, .33);
  --mb-q1: #E2EFFB; --mb-q2: #BFDCF5; --mb-q3: #8EC1EC; --mb-q4: #4F9BDB; --mb-q5: #1F6FB0;
  --mb-sombra-terra: rgba(16, 52, 92, .16);
  --mb-texto: #11233B;
  --mb-texto-2: #485B73;
  --mb-texto-3: #7C8DA3;
  --mb-sup: #FFFFFF;
  --mb-sup-2: #F4F7FB;
  --mb-fio: #E1E8F0;
  --mb-vidro: rgba(255, 255, 255, .86);
  --mb-sombra: 0 18px 44px -12px rgba(15, 40, 80, .28), 0 2px 6px rgba(15, 40, 80, .08);
  --mb-raio: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
  color: var(--mb-texto);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.mb[data-tema="escuro"] {
  --mb-pino: #9FD3FF;
  --mb-mar: #07111F;
  --mb-mar-luz: #0E2036;
  --mb-grade: rgba(120, 180, 255, .06);
  --mb-vizinho: #0F1C2E;
  --mb-vizinho-borda: #1E3048;
  --mb-uf: #13263F;
  --mb-uf-borda: #36597F;
  --mb-uf-hover: #1B3556;
  --mb-mun-borda: rgba(140, 180, 225, .22);
  --mb-q1: #173452; --mb-q2: #1C4672; --mb-q3: #215C96; --mb-q4: #2F7CC2; --mb-q5: #52A6EE;
  --mb-sombra-terra: rgba(0, 0, 0, .45);
  --mb-texto: #EAF2FB;
  --mb-texto-2: #A9BCD3;
  --mb-texto-3: #7489A3;
  --mb-sup: #0F1D31;
  --mb-sup-2: #15263E;
  --mb-fio: #233854;
  --mb-vidro: rgba(13, 26, 44, .86);
  --mb-sombra: 0 18px 44px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
}
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb button { font: inherit; }
.mb :where(button) { color: inherit; }
.mb [hidden] { display: none !important; }
.mb svg { overflow: visible; }

/* ------------------------------------------------------------------ cabeçalho */
.mb-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 2px 16px; flex-wrap: wrap; }
.mb-cabeca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mb-marca { height: 52px; padding: 8px 14px; border-radius: 12px; background: var(--mb-sup); box-shadow: var(--mb-sombra); display: grid; place-items: center; }
.mb-marca img { max-height: 36px; max-width: 160px; display: block; }
.mb-eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--mb-marca); }
.mb-h1 { margin: 0; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.mb-h1 em { font-style: normal; background: linear-gradient(100deg, var(--mb-marca), var(--mb-marca-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mb-numeros { display: flex; gap: 6px; margin: 0; }
.mb-numeros > div { min-width: 92px; padding: 10px 16px 9px; border-radius: 14px; background: var(--mb-sup); border: 1px solid var(--mb-fio); }
.mb-numeros dd { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mb-numeros dt { order: 2; font-size: 11.5px; color: var(--mb-texto-3); margin-top: 4px; }
.mb-numeros > div { display: flex; flex-direction: column-reverse; }
.mb-numeros .valor dd { color: var(--mb-marca); }

/* ------------------------------------------------------------------ palco */
.mb-palco {
  position: relative; flex: 1; min-height: 460px; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--mb-fio); background: var(--mb-mar); isolation: isolate;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.mb.arrastando .mb-palco { cursor: grabbing; }
.mb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mb-grade-l { fill: none; stroke: var(--mb-grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mb-viz { fill: var(--mb-vizinho); stroke: var(--mb-vizinho-borda); stroke-width: .8; vector-effect: non-scaling-stroke; }
.mb-sombra { fill: var(--mb-sombra-terra); filter: blur(7px); transform: translate(.12px, .22px); }
.mb.movendo .mb-sombra { filter: none; opacity: .55; }
.mb-uf {
  fill: var(--mb-uf); stroke: var(--mb-uf-borda); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  cursor: pointer; transition: fill .45s ease, opacity .5s ease, fill-opacity .5s ease;
}
.mb-uf[data-q="1"] { fill: var(--mb-q1); } .mb-uf[data-q="2"] { fill: var(--mb-q2); } .mb-uf[data-q="3"] { fill: var(--mb-q3); }
.mb-uf[data-q="4"] { fill: var(--mb-q4); } .mb-uf[data-q="5"] { fill: var(--mb-q5); }
.mb[data-nivel="br"] .mb-uf:hover { fill: var(--mb-uf-hover); stroke: var(--mb-marca); stroke-width: 1.6; }
.mb[data-nivel="br"] .mb-uf[data-q]:not([data-q="0"]):hover { filter: brightness(1.06); }
.mb-uf.apagada { fill: var(--mb-uf); fill-opacity: .55; stroke-opacity: .7; }
/* estados e municípios recebem foco (tabindex=-1) ao clicar: sem isso o Chrome desenha o anel de foco preto e branco
   em volta da caixa do estado, que fica enorme com o zoom (aparecia ao arrastar). Teclado ganha destaque no traço. */
.mb-uf:focus, .mb-mun:focus { outline: none; }
.mb-uf:focus-visible, .mb-mun:focus-visible { outline: none; stroke: var(--mb-marca); stroke-width: 2.2; }
.mb-uf.apagada:hover { fill: var(--mb-uf-hover); fill-opacity: .9; }
.mb-uf.foco { fill: var(--mb-uf); }
.mb.intro .mb-uf { animation: mbUf .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 32ms); transform-box: fill-box; transform-origin: center; }
@keyframes mbUf { from { opacity: 0; transform: scale(.9); } }

.mb-mun {
  fill: var(--mb-uf); stroke: var(--mb-mun-borda); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  cursor: pointer; transition: fill .4s ease;
}
.mb-mun[data-q="1"] { fill: var(--mb-q1); } .mb-mun[data-q="2"] { fill: var(--mb-q2); } .mb-mun[data-q="3"] { fill: var(--mb-q3); }
.mb-mun[data-q="4"] { fill: var(--mb-q4); } .mb-mun[data-q="5"] { fill: var(--mb-q5); }
.mb-mun:hover { fill: var(--mb-uf-hover); stroke: var(--mb-marca); stroke-width: 1.4; stroke-opacity: 1; }
.mb-mun[data-q]:not([data-q="0"]):hover { filter: brightness(1.08); fill: inherit; }
.mb-mun.sel { stroke: var(--mb-marca); stroke-width: 2.2; }
.mb.perto .mb-mun[data-q]:not([data-q="0"]) { fill-opacity: .32; }
.mb.perto .mb-mun { stroke-width: 1.1; }
.mb-muns { transition: opacity .4s ease; }
.mb-muns.entra { animation: mbAparece .6s ease both; }
.mb-muns.some { opacity: 0; }
@keyframes mbAparece { from { opacity: 0; } }
.mb-uf-linha { fill: none; stroke: var(--mb-marca); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; opacity: .85; }

/* rótulos (em pixels de tela) */
.mb-rotulos text { pointer-events: none; paint-order: stroke; stroke-linejoin: round; }
.mb-rot-uf { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-anchor: middle; dominant-baseline: middle; fill: var(--mb-texto-3); stroke: var(--mb-uf); stroke-width: 3px; opacity: .85; }
.mb-rot-uf.tem { fill: var(--mb-texto); stroke: rgba(255, 255, 255, .7); }
.mb[data-tema="escuro"] .mb-rot-uf.tem { stroke: rgba(0, 0, 0, .55); }
.mb-rot-uf.fora { opacity: .45; }
.mb-rot-mun { font-size: 11.5px; font-weight: 700; fill: var(--mb-texto); stroke: var(--mb-uf); stroke-width: 3.2px; }
.mb.movendo .mb-rotulos { opacity: .0; transition: opacity .12s; }
.mb .mb-rotulos { transition: opacity .3s .05s; }

/* ------------------------------------------------------------------ pinos e grupos (HTML sobre o SVG) */
.mb-pinos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mb-pino, .mb-grupo { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; padding: 0; background: none; cursor: pointer; will-change: transform; }
.mb-pino { width: 30px; height: 40px; margin: -38px 0 0 -15px; }
.mb-pino svg { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; transition: transform .18s cubic-bezier(.3, 1.5, .6, 1); filter: drop-shadow(0 3px 3px rgba(10, 30, 60, .35)); }
.mb-pino .c { fill: var(--mb-pino); stroke: #fff; stroke-width: 1.6; }
.mb-pino .o { fill: #fff; }
.mb-pino.s-aberta .c { fill: #fff; stroke: var(--mb-aberta); stroke-width: 2.6; }
.mb-pino.s-aberta .o { fill: var(--mb-aberta); }
.mb-pino.s-execucao .c { fill: var(--mb-execucao); }
.mb-pino.aprox .o { r: 4; }
.mb-pino:hover svg, .mb-pino:focus-visible svg, .mb-pino.realce svg { transform: scale(1.22) translateY(-2px); }
.mb-pino.sel { z-index: 3; }
.mb-pino.sel svg { transform: scale(1.38) translateY(-3px); }
.mb-pino.sel .c { fill: var(--mb-marca); }
.mb-pino.sel::before, .mb-grupo.sel::before, .mb-pino.realce::before {
  content: ''; position: absolute; left: 50%; bottom: -1px; width: 34px; height: 12px; margin-left: -17px; border-radius: 50%;
  border: 2px solid var(--mb-marca-2); animation: mbPulso 1.6s ease-out infinite; z-index: -1; pointer-events: none;
}
.mb-grupo.sel::before { bottom: auto; top: 50%; width: calc(var(--d) + 10px); height: calc(var(--d) + 10px); margin: calc(var(--d) / -2 - 5px) 0 0 calc(var(--d) / -2 - 5px); }
@keyframes mbPulso { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
.mb-pino:focus-visible { outline: none; }
/* fechada nos últimos 45 dias: um halo que respira (sem competir com a seleção) */
.mb-pino.novo:not(.sel)::before, .mb-grupo.novo:not(.sel)::before {
  content: ''; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 9px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(66, 160, 237, .55), transparent); animation: mbRespira 2.4s ease-in-out infinite; z-index: -1; pointer-events: none;
}
.mb-grupo.novo:not(.sel)::before { bottom: auto; top: 50%; width: calc(var(--d) + 18px); height: calc(var(--d) + 18px); margin: calc(var(--d) / -2 - 9px) 0 0 calc(var(--d) / -2 - 9px); }
@keyframes mbRespira { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.mb-pino.fora, .mb-grupo.fora { opacity: .38; filter: saturate(.4); transform-origin: center; }
.mb-pino.fora:hover, .mb-grupo.fora:hover { opacity: 1; filter: none; }

/* O botão do grupo é só o ALVO de clique: tamanho fixo, posição pelo transform inline, nada nele muda no hover.
   O disco visível é o filho .mb-g-disco, e só ele cresce. (Bug de 21/10/2026: o hover usava a propriedade 'scale'
   no próprio botão; 'scale' se compõe POR FORA do transform translate(x, y), então escalava a POSIÇÃO junto e o
   número pulava ~12% da distância até o canto do mapa, saía de baixo do mouse, perdia o hover e voltava, em laço.) */
.mb-grupo {
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.mb-g-disco {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 55%),
    conic-gradient(var(--mb-aberta) 0 calc(var(--ab) * 360deg), var(--mb-pino) 0);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 6px 14px -2px rgba(10, 30, 60, .45);
  transition: transform .2s cubic-bezier(.3, 1.5, .6, 1);
}
.mb-grupo b { display: grid; place-items: center; width: calc(var(--d) - 8px); height: calc(var(--d) - 8px); border-radius: 50%; background: var(--mb-pino); }
.mb[data-tema="escuro"] .mb-grupo { color: #06121F; }
.mb[data-tema="escuro"] .mb-g-disco { box-shadow: 0 0 0 3px rgba(6, 18, 31, .9), 0 6px 14px -2px rgba(0, 0, 0, .6); }
.mb-grupo:hover .mb-g-disco, .mb-grupo:focus-visible .mb-g-disco, .mb-grupo.realce .mb-g-disco { transform: scale(1.12); }
.mb-grupo:focus-visible { outline: none; }
/* o que cresce no hover não recebe o mouse: a área de clique é sempre a caixa fixa do botão */
.mb-g-disco, .mb-pino svg { pointer-events: none; }
.mb-grupo::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(66, 160, 237, .28), transparent 70%); z-index: -1; pointer-events: none; }

/* nascimento (intro) e surgimento (linha do tempo). 'backwards' e não 'both': terminada a animação, o hover volta a valer. */
.mb-pino.nasce svg { animation: mbCai .7s cubic-bezier(.25, 1.55, .5, 1) backwards; animation-delay: calc(450ms + var(--d0)); }
.mb-grupo.nasce { animation: mbAparece .45s ease backwards; animation-delay: calc(450ms + var(--d0)); }
.mb-grupo.nasce .mb-g-disco { animation: mbBrota .6s cubic-bezier(.25, 1.55, .5, 1) backwards; animation-delay: calc(450ms + var(--d0)); }
@keyframes mbCai { from { opacity: 0; transform: translateY(-34px) scale(.6); } 60% { opacity: 1; } }
@keyframes mbBrota { from { transform: scale(.2); } }
.mb-pino.surge::after, .mb-grupo.surge::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  border: 2px solid var(--mb-marca-2); animation: mbOnda 1.1s ease-out both; pointer-events: none;
}
.mb-grupo.surge::after { top: 50%; background: none; inset: auto; z-index: 0; }
@keyframes mbOnda { from { opacity: 1; transform: scale(.15); } to { opacity: 0; transform: scale(1.4); } }

/* ------------------------------------------------------------------ barra (trilha + filtros), controles, legenda */
.mb-barra { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; flex-wrap: wrap; }
.mb-barra > * { pointer-events: auto; }
.mb-trilha, .mb-seg, .mb-sel select {
  background: var(--mb-vidro); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--mb-fio); border-radius: 999px; box-shadow: 0 4px 14px -6px rgba(15, 40, 80, .25);
}
.mb-trilha { display: flex; align-items: center; padding: 4px; gap: 2px; }
.mb-trilha button { border: 0; background: none; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mb-marca); cursor: pointer; white-space: nowrap; }
.mb-trilha button.atual { color: var(--mb-texto); background: var(--mb-sup-2); }
.mb-trilha button:not(.atual):hover { background: var(--mb-sup-2); }
.mb-trilha i { font-style: normal; color: var(--mb-texto-3); font-size: 13px; }
.mb-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mb-seg { display: flex; padding: 4px; gap: 2px; }
.mb-seg button { border: 0; background: none; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mb-texto-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mb-seg button[aria-pressed="true"] { background: var(--mb-marca); color: #fff; box-shadow: 0 4px 10px -3px rgba(23, 103, 160, .55); }
.mb-seg button[aria-pressed="true"] .pt { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.mb-sel select { appearance: none; -webkit-appearance: none; padding: 9px 30px 9px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--mb-texto); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mb-pino); flex: none; }
.pt.s-aberta { background: #fff; box-shadow: inset 0 0 0 2.4px var(--mb-aberta); }
.pt.s-execucao { background: var(--mb-execucao); }

.mb-ctrl { position: absolute; z-index: 4; right: calc(var(--mb-painel-w, 360px) + 30px); bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.mb-ctrl button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--mb-fio); background: var(--mb-vidro); backdrop-filter: blur(10px); font-size: 19px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(15, 40, 80, .25); display: grid; place-items: center; }
.mb-ctrl button:hover { color: var(--mb-marca); border-color: var(--mb-marca-2); }
.mb-ctrl .br { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.mb-legenda { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 14px; font-size: 11.5px; color: var(--mb-texto-2);
  background: var(--mb-vidro); backdrop-filter: blur(10px); border: 1px solid var(--mb-fio); border-radius: 12px; pointer-events: none; max-width: calc(100% - var(--mb-painel-w, 360px) - 110px); }
.mb-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mb-leg-pino { display: inline-block; width: 12px; height: 16px; }
.mb-leg-pino svg { width: 100%; height: 100%; display: block; }
.mb-leg-pino .c { fill: var(--mb-pino); stroke: #fff; stroke-width: 2; } .mb-leg-pino .o { fill: #fff; }
.mb-leg-pino.s-aberta .c { fill: #fff; stroke: var(--mb-aberta); stroke-width: 3; } .mb-leg-pino.s-aberta .o { fill: var(--mb-aberta); }
.mb-leg-pino.s-execucao .c { fill: var(--mb-execucao); }
.mb-leg-grupo { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mb-pino); color: #fff; font-size: 9.5px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.mb-leg-novo { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, var(--mb-marca-2), rgba(66, 160, 237, .15)); animation: mbRespira 2.4s ease-in-out infinite; }
.mb-leg-escala i { width: 12px; height: 10px; display: inline-block; border-radius: 2px; margin-right: -4px; }
.mb-leg-escala i:last-of-type { margin-right: 2px; }
.mb-leg-escala i[data-q="1"] { background: var(--mb-q1); } .mb-leg-escala i[data-q="2"] { background: var(--mb-q2); } .mb-leg-escala i[data-q="3"] { background: var(--mb-q3); }
.mb-leg-escala i[data-q="4"] { background: var(--mb-q4); } .mb-leg-escala i[data-q="5"] { background: var(--mb-q5); }

/* ------------------------------------------------------------------ dica (hover) */
.mb-tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; padding: 9px 12px; border-radius: 12px; background: var(--mb-texto); color: var(--mb-sup); font-size: 12.5px; box-shadow: var(--mb-sombra); display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.mb[data-tema="escuro"] .mb-tip { background: #EAF2FB; color: #0B1626; }
.mb-tip b { font-size: 13.5px; }
.mb-tip small { opacity: .7; font-size: 11px; margin-top: 2px; }

/* ------------------------------------------------------------------ painel lateral */
.mb-painel {
  position: absolute; z-index: 5; top: 12px; right: 12px; bottom: 12px; width: var(--mb-painel-w, 360px);
  display: flex; flex-direction: column; border-radius: var(--mb-raio); overflow: hidden; cursor: default;
  background: var(--mb-vidro); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--mb-fio); box-shadow: var(--mb-sombra); user-select: text; -webkit-user-select: text; touch-action: pan-y;
}
.mb-alca { display: none; }
.mb-busca { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; padding: 0 12px; border-radius: 12px; background: var(--mb-sup); border: 1px solid var(--mb-fio); }
.mb-busca svg { width: 17px; height: 17px; fill: none; stroke: var(--mb-texto-3); stroke-width: 2; flex: none; }
.mb-busca input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; font: inherit; font-size: 13.5px; color: var(--mb-texto); outline: none; }
.mb-busca:focus-within { border-color: var(--mb-marca-2); box-shadow: 0 0 0 3px rgba(66, 160, 237, .18); }
.mb-painel-corpo { flex: 1; overflow-y: auto; padding: 6px 16px 18px; overscroll-behavior: contain; scrollbar-width: thin; }
.mb-p-cab { padding: 10px 2px 6px; }
.mb-p-eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--mb-marca); }
.mb-p-h { margin: 4px 0 2px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.mb-p-sub { margin: 0; color: var(--mb-texto-2); font-size: 13px; }
.mb-p-sec { margin: 18px 2px 8px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--mb-texto-3); }
.mb-p-nota { margin: 14px 2px 0; font-size: 12px; color: var(--mb-texto-3); }
.mb-bt-tempo {
  margin-top: 14px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(115deg, var(--mb-pino), var(--mb-marca) 60%, var(--mb-marca-2)); box-shadow: 0 10px 22px -10px rgba(23, 103, 160, .8);
  transition: transform .2s, box-shadow .2s;
}
.mb-bt-tempo:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(23, 103, 160, .9); }
.mb-bt-tempo svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); fill: #fff; flex: none; }
.mb-bt-tempo span { display: flex; flex-direction: column; }
.mb-bt-tempo b { font-size: 14px; }
.mb .mb-bt-tempo small { color: rgba(255, 255, 255, .82); font-size: 12px; }
.mb .mb-bt-tempo b { color: #fff; }
.mb-exportar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--mb-texto-3); }
.mb-exportar span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; margin-right: 2px; }
.mb-exportar span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mb-exportar a { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--mb-fio); background: var(--mb-sup); color: var(--mb-marca); font-weight: 700; text-decoration: none; }
.mb-exportar a:hover { border-color: var(--mb-marca-2); }
.mb-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-rank button { position: relative; width: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 8px 12px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; }
.mb-rank button:hover { background: var(--mb-sup-2); }
.mb-rank .r-nome { font-weight: 650; font-size: 13.5px; }
.mb-rank .r-n { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.mb-rank .r-n small { font-weight: 600; color: var(--mb-texto-3); font-size: 11.5px; margin-left: 4px; }
.mb-rank i { position: absolute; left: 8px; right: 8px; bottom: 5px; height: 4px; border-radius: 4px; background: var(--mb-sup-2); overflow: hidden; }
.mb-rank i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); border-radius: 4px; background: linear-gradient(90deg, var(--mb-marca), var(--mb-marca-2)); animation: mbBarra .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mbBarra { from { transform: scaleX(0); } }
.mb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-li { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; cursor: pointer; outline: none; }
.mb-li:hover, .mb-li:focus-visible { background: var(--mb-sup-2); }
.mb-li.sel { background: color-mix(in srgb, var(--mb-marca-2) 16%, transparent); box-shadow: inset 3px 0 0 var(--mb-marca); }
.mb-li-av, .mb-c-logo span {
  --h: 210; flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 62% 46%), hsl(calc(var(--h) + 28) 55% 32%));
}
.mb-li-av img, .mb-c-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.mb-li-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-li-txt b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-li-txt small { font-size: 12px; color: var(--mb-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-li-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mb-li-dir small { font-size: 11px; color: var(--mb-texto-3); white-space: nowrap; }
.mb-mais { margin: 8px 0 0; width: 100%; padding: 10px; border-radius: 10px; border: 1px dashed var(--mb-fio); background: none; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--mb-marca); }

/* ------------------------------------------------------------------ cartão da obra */
.mb-cartao {
  position: absolute; z-index: 7; left: 0; top: 0; width: 340px; max-width: calc(100% - 24px);
  padding: 16px 16px 14px; border-radius: 18px; background: var(--mb-sup); border: 1px solid var(--mb-fio); box-shadow: var(--mb-sombra);
  cursor: default; user-select: text; -webkit-user-select: text; touch-action: pan-y;
}
.mb-cartao.larga { width: 380px; }
.mb-cartao::after { content: ''; position: absolute; left: var(--seta, 50%); width: 16px; height: 16px; margin-left: -8px; background: var(--mb-sup); border: 1px solid var(--mb-fio); transform: rotate(45deg); }
.mb-cartao[data-lado="cima"]::after { bottom: -8.5px; border-top: 0; border-left: 0; }
.mb-cartao[data-lado="baixo"]::after { top: -8.5px; border-bottom: 0; border-right: 0; }
.mb-cartao[data-lado="direita"]::after { left: -8.5px; margin: -8px 0 0; top: var(--setaY, 50%); border-top: 0; border-right: 0; }
.mb-cartao[data-lado="esquerda"]::after { left: auto; right: -8.5px; margin: -8px 0 0; top: var(--setaY, 50%); border-bottom: 0; border-left: 0; }
.mb-cartao[data-lado="direita"].abre { transform-origin: 0 var(--setaY, 50%); }
.mb-cartao[data-lado="esquerda"].abre { transform-origin: 100% var(--setaY, 50%); }
.mb-cartao.abre { animation: mbAbre .42s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: var(--seta, 50%) 100%; }
.mb-cartao.abre > * { animation: mbSobe .5s cubic-bezier(.2, .8, .2, 1) both; }
.mb-cartao.abre > *:nth-child(2) { animation-delay: .05s; } .mb-cartao.abre > *:nth-child(3) { animation-delay: .09s; }
.mb-cartao.abre > *:nth-child(4) { animation-delay: .13s; } .mb-cartao.abre > *:nth-child(5) { animation-delay: .17s; } .mb-cartao.abre > *:nth-child(n+6) { animation-delay: .21s; }
@keyframes mbAbre { from { opacity: 0; scale: .7; } }
@keyframes mbSobe { from { opacity: 0; translate: 0 8px; } }
.mb-c-cab { display: flex; align-items: center; gap: 12px; }
.mb-c-logo span, .mb-c-logo img { width: 46px; height: 46px; border-radius: 13px; font-size: 15px; display: grid; place-items: center; }
.mb-c-logo img { border: 1px solid var(--mb-fio); padding: 4px; }
.mb-c-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mb-c-cliente { margin: 0; font-weight: 750; font-size: 14.5px; line-height: 1.2; }
.mb-sit { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--mb-sup-2); color: var(--mb-texto-2); }
.mb-sit.s-fechada { background: color-mix(in srgb, var(--mb-pino) 12%, transparent); color: var(--mb-pino); }
.mb[data-tema="escuro"] .mb-sit.s-fechada { color: #CFE8FF; }
.mb-sit.s-aberta { background: color-mix(in srgb, var(--mb-aberta) 16%, transparent); color: #A86A0C; }
.mb-sit.s-execucao { background: color-mix(in srgb, var(--mb-execucao) 16%, transparent); color: #0E7A5A; }
.mb-c-x { border: 0; background: var(--mb-sup-2); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex: none; align-self: flex-start; }
.mb-c-x svg { width: 16px; height: 16px; stroke: var(--mb-texto-2); stroke-width: 2.2; fill: none; }
.mb-c-x:hover { background: var(--mb-fio); }
.mb-c-titulo { margin: 14px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }
.mb-c-onde { margin: 0; display: flex; gap: 8px; font-size: 13px; color: var(--mb-texto-2); line-height: 1.45; }
.mb-c-onde svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: var(--mb-marca); stroke-width: 2; }
.mb-c-onde b { color: var(--mb-texto); font-weight: 700; }
.mb-c-onde small { display: block; font-size: 11.5px; color: var(--mb-texto-3); }
.mb-c-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mb-c-tags span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; padding: 4px 9px; border-radius: 8px; color: var(--mb-marca); background: color-mix(in srgb, var(--mb-marca-2) 14%, transparent); }
.mb-c-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--mb-fio); }
.mb-c-dados div { min-width: 0; }
.mb-c-dados dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-texto-3); font-weight: 750; }
.mb-c-dados dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mb-c-acoes { display: flex; gap: 8px; margin-top: 16px; }
.mb-bt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--mb-fio); background: var(--mb-sup); font-size: 13px; font-weight: 700; text-decoration: none; color: var(--mb-texto); cursor: pointer; white-space: nowrap; }
.mb-bt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mb-bt:hover { border-color: var(--mb-marca-2); color: var(--mb-marca); }
.mb-bt.pri { background: var(--mb-marca); border-color: var(--mb-marca); color: #fff; box-shadow: 0 8px 18px -8px rgba(23, 103, 160, .8); }
.mb-bt.pri:hover { filter: brightness(1.08); color: #fff; }
.mb-c-lista { margin-top: 10px; max-height: 330px; overflow-y: auto; }

/* ------------------------------------------------------------------ linha do tempo */
.mb-tempo { position: absolute; z-index: 6; left: 50%; top: 66px; transform: translateX(calc(-50% - var(--mb-painel-w, 360px) / 2 - 10px)); text-align: center; pointer-events: none;
  padding: 14px 28px 16px; border-radius: 20px; background: var(--mb-vidro); backdrop-filter: blur(14px); border: 1px solid var(--mb-fio); box-shadow: var(--mb-sombra); min-width: 280px; animation: mbAparece .4s ease both; }
.mb-tempo-mes { font-size: 15px; color: var(--mb-texto-2); font-weight: 600; text-transform: capitalize; }
.mb-tempo-mes b { display: block; font-size: 34px; letter-spacing: -.03em; color: var(--mb-texto); font-weight: 800; line-height: 1.05; }
.mb-tempo-n { margin-top: 6px; font-size: 12.5px; color: var(--mb-texto-3); font-variant-numeric: tabular-nums; }
.mb-tempo-barra { margin-top: 10px; height: 4px; border-radius: 4px; background: var(--mb-sup-2); overflow: hidden; }
.mb-tempo-barra i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--mb-marca), var(--mb-marca-2)); }
.mb.tocando .mb-legenda, .mb.tocando .mb-filtros { opacity: .35; }
/* modo ano a ano (op.tempo.passo = 'ano'): tocar/pausar, ano, contadores e a faixa de anos, no alto à esquerda (o sul de MG, onde estão os pinos, fica livre) */
.mb-tempo.ctl { top: 64px; bottom: auto; left: 14px; transform: none; pointer-events: auto; text-align: left; min-width: 0;
  width: min(430px, calc(100% - var(--mb-painel-w, 360px) - 120px)); padding: 10px 14px 9px; border-radius: 16px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.mb-tempo.ctl[hidden] { display: none; }
.mb.com-tempo .mb-legenda { display: none; }
.mb-tempo-play { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--mb-marca); color: #fff; box-shadow: 0 6px 14px -6px rgba(23, 103, 160, .8); }
.mb-tempo-play:hover { filter: brightness(1.1); }
.mb-tempo-play:focus-visible { outline: 2px solid var(--mb-marca-2); outline-offset: 2px; }
.mb-tempo-play svg { width: 18px; height: 18px; fill: currentColor; }
.mb-tempo-play svg.traco { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mb-tempo-ano { min-width: 0; }
.mb-tempo-ano b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--mb-texto); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tempo-ano b.longo { font-size: 17px; letter-spacing: -.01em; }
.mb-tempo-ano small { display: block; font-size: 11.5px; color: var(--mb-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tempo.ctl .mb-tempo-n { margin: 0; display: flex; gap: 14px; text-align: right; font-size: 11.5px; color: var(--mb-texto-3); }
.mb-tempo.ctl .mb-tempo-n span { display: flex; flex-direction: column; line-height: 1.15; }
.mb-tempo.ctl .mb-tempo-n b { font-size: 19px; font-weight: 800; color: var(--mb-texto); font-variant-numeric: tabular-nums; }
.mb-tempo-faixa { grid-column: 1 / -1; width: 100%; margin: 8px 0 0; accent-color: var(--mb-marca); cursor: pointer; height: 18px; }
.mb-tempo-pontas { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mb-texto-3); }

/* ------------------------------------------------------------------ carregando */
.mb-carregando { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--mb-texto-2); font-weight: 600; font-size: 14px; background: var(--mb-mar); }
.mb-carregando span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--mb-fio); border-top-color: var(--mb-marca); animation: mbGira .8s linear infinite; }
.mb-carregando small { font-weight: 500; color: var(--mb-texto-3); }
@keyframes mbGira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ celular */
@media (max-width: 860px) {
  .mb-topo { padding-bottom: 10px; }
  .mb-cabeca { gap: 10px; }
  .mb-marca { height: 40px; padding: 6px 10px; }
  .mb-marca img { max-height: 26px; max-width: 110px; }
  .mb-numeros { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .mb-numeros > div { min-width: 0; padding: 7px 9px 6px; border-radius: 12px; }
  .mb-numeros dd { font-size: 18px; white-space: nowrap; }
  .mb-numeros .valor dd { font-size: 15px; line-height: 1.2; }
  .mb-numeros dt { font-size: 10.5px; margin-top: 2px; }
  .mb-palco { border-radius: 16px; min-height: 560px; }
  .mb-painel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 132px; border-radius: 18px 18px 0 0; transition: height .35s cubic-bezier(.2, .8, .2, 1); }
  .mb-painel.aberto { height: 62%; }
  .mb-alca { display: block; border: 0; background: none; height: 18px; flex: none; cursor: pointer; position: relative; }
  .mb-alca::after { content: ''; position: absolute; left: 50%; top: 7px; width: 42px; height: 5px; margin-left: -21px; border-radius: 4px; background: var(--mb-fio); }
  .mb-busca { margin-top: 2px; }
  .mb-ctrl { right: 10px; bottom: 146px; }
  .mb-ctrl button { width: 38px; height: 38px; }
  .mb-legenda { display: none; }
  .mb-barra { top: 8px; left: 0; right: 0; padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mb-barra::-webkit-scrollbar { display: none; }
  .mb-filtros { flex-wrap: nowrap; }
  .mb-trilha, .mb-seg, .mb-sel, .mb-filtros { flex: none; }
  .mb-seg button { white-space: nowrap; }
  .mb-trilha button, .mb-seg button { padding: 6px 10px; font-size: 12.5px; }
  .mb-cartao { left: 8px !important; right: 8px; bottom: 8px; top: auto; width: auto !important; max-width: none; transform: none !important; max-height: 72%; overflow-y: auto; border-radius: 18px; }
  .mb-cartao::after { display: none; }
  .mb-tempo { transform: translateX(-50%); top: 58px; min-width: 240px; padding: 10px 18px 12px; }
  .mb-tempo-mes b { font-size: 26px; }
  .mb-tempo.ctl { top: 50px; bottom: auto; left: 8px; right: 8px; width: auto; transform: none; padding: 8px 12px 7px; gap: 2px 10px; }
  .mb-tempo-play { width: 36px; height: 36px; }
  .mb-tempo-ano b { font-size: 22px; }
  .mb-tempo.ctl .mb-tempo-n { gap: 10px; }
  .mb-tempo.ctl .mb-tempo-n b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
}