/*
 * Mapas do 2º turno (Contrato 5) — estilo próprio, sem tocar css/style.css.
 * Cores da Decisão 11: Lula vermelho, Flávio amarelo, 3 tons pela margem (<5 p.p., 5–15, >15),
 * cinza = sem dados ou empate. Rótulos sempre em texto escuro sobre o cartão; a cor só aparece
 * no preenchimento das formas e nas amostras da legenda (amarelo nunca como texto).
 * As variáveis do site (--cartao, --tinta, …) são usadas com fallback, para a página de teste
 * funcionar também fora do layout do site.
 */
.mapa2t {
  /* tons do Lula (vermelho) e do Flávio (amarelo), do mais fraco ao mais forte */
  --m2t-l1: #f2b8b5;  --m2t-l2: #d95a51;  --m2t-l3: #b3261e;
  --m2t-f1: #fbe89e;  --m2t-f2: #f5c445;  --m2t-f3: #e6a817;
  --m2t-g: #cdd5de;
  --m2t-borda: #f7f9fb;
  display: grid;
  gap: 10px;
}

.mapa2t__abas { display: inline-flex; gap: 6px; width: fit-content; }
.mapa2t__abas [role="tab"] {
  padding: 7px 16px;
  border: 1px solid var(--borda, #dde3ea);
  border-radius: 999px;
  background: var(--cartao, #fff);
  color: var(--tinta-2, #5a6b7d);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mapa2t__abas [role="tab"]:hover { color: var(--tinta, #1b2634); }
.mapa2t__abas [role="tab"]:focus-visible { outline: 2px solid var(--foco, #1b74c9); outline-offset: 2px; }
.mapa2t__abas [role="tab"][aria-selected="true"] {
  background: var(--tinta, #1b2634);
  border-color: var(--tinta, #1b2634);
  color: var(--cartao, #fff);
}

.mapa2t__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: start;
}

.mapa2t__area {
  position: relative;
  min-width: 0;
  padding: 10px;
  border-radius: var(--r-controle, 8px);
  background: var(--cartao-2, #eef1f5);
}
.mapa2t__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 700px);
  margin: 0 auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.mapa2t__area--zoom .mapa2t__svg { touch-action: none; cursor: grab; }
.mapa2t__area--zoom .mapa2t__svg:active { cursor: grabbing; }

.mapa2t__formas path {
  stroke: var(--m2t-borda);
  stroke-width: .6px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .5s;
}
.mapa2t__contornos path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa2t__destaque { stroke: var(--tinta, #1b2634); stroke-width: 1.6px; }
.mapa2t__passa { stroke: var(--tinta-2, #5a6b7d); stroke-width: 1.5px; }
.mapa2t__sel { stroke: var(--tinta, #1b2634); stroke-width: 2.4px; }
.mapa2t__marca { pointer-events: none; }
.mapa2t__marca circle { fill: var(--tinta, #1b2634); stroke: var(--cartao, #fff); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* --k compensa o zoom: o rótulo fica do mesmo tamanho na tela. Texto escuro sobre o mapa (Decisão 11). */
.mapa2t__marca text {
  font-family: var(--fonte, system-ui, sans-serif);
  font-size: calc(13px * var(--k, 1));
  font-weight: 700;
  fill: #161f2b;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: calc(3px * var(--k, 1));
  stroke-linejoin: round;
  transform: translateY(calc(-7px * var(--k, 1)));
}

/* Preenchimentos: classes g (cinza), l1..l3 (Lula) e f1..f3 (Flávio). */
.mapa2t .g  { fill: var(--m2t-g); }
.mapa2t .l1 { fill: var(--m2t-l1); }
.mapa2t .l2 { fill: var(--m2t-l2); }
.mapa2t .l3 { fill: var(--m2t-l3); }
.mapa2t .f1 { fill: var(--m2t-f1); }
.mapa2t .f2 { fill: var(--m2t-f2); }
.mapa2t .f3 { fill: var(--m2t-f3); }

.mapa2t__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--borda, #dde3ea);
  border-radius: var(--r-controle, 8px);
  background: var(--cartao, #fff);
  box-shadow: 0 1px 2px rgba(13, 23, 38, .12);
}
.mapa2t__zoom button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--tinta-2, #5a6b7d); cursor: pointer; }
.mapa2t__zoom button + button { border-top: 1px solid var(--borda, #dde3ea); }
.mapa2t__zoom button:hover { background: var(--cartao-2, #eef1f5); color: var(--tinta, #1b2634); }
.mapa2t__zoom .icone { width: 18px; height: 18px; fill: currentColor; }

.mapa2t__ajuda { display: none; position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 80px); margin: 0; font-size: 11px; color: var(--tinta-3, #8b99aa); pointer-events: none; }
@media (hover: hover) and (min-width: 760px) { .mapa2t:not(.mapa2t--tv) .mapa2t__ajuda { display: block; } }

.mapa2t__dica {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: var(--r-controle, 8px);
  background: #1b2634;
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}
.mapa2t__dica b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.mapa2t__dica span { display: block; opacity: .85; }

.mapa2t__lado { display: grid; gap: 12px; align-content: start; }
.mapa2t__busca { display: grid; gap: 4px; }
.mapa2t__busca label { font-size: 12px; font-weight: 600; color: var(--tinta-2, #5a6b7d); }
.mapa2t__busca input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borda, #dde3ea);
  border-radius: var(--r-controle, 8px);
  background: var(--cartao, #fff);
  color: var(--tinta, #1b2634);
  font: inherit;
  font-size: 14px;
}
.mapa2t__busca input:focus-visible { outline: 2px solid var(--foco, #1b74c9); outline-offset: 1px; }

.mapa2t__resumo { display: grid; gap: 4px; }
.mapa2t__resumo p { margin: 0; }
.mapa2t__frase { font-size: 15px; color: var(--tinta, #1b2634); }
.mapa2t__frase b { font-size: 18px; }
.mapa2t__espera { font-size: 15px; font-weight: 650; color: var(--tinta, #1b2634); }
.mapa2t__nota { font-size: 13px; color: var(--tinta-2, #5a6b7d); }
.mapa2t__selo { margin-bottom: 4px; }

.mapa2t__legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mapa2t__legenda button {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--r-controle, 8px);
  background: transparent;
  color: var(--tinta-2, #5a6b7d);
  font-size: 13px;
  text-align: left;
}
.mapa2t__legenda button:hover, .mapa2t__legenda button:focus-visible { background: var(--cartao-2, #eef1f5); color: var(--tinta, #1b2634); }
.mapa2t__legenda button:focus-visible { outline: 2px solid var(--foco, #1b74c9); outline-offset: -2px; }
.mapa2t__amostra { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(13, 23, 38, .08); }
.mapa2t__amostra.g  { background: var(--m2t-g); }
.mapa2t__amostra.l1 { background: var(--m2t-l1); }
.mapa2t__amostra.l2 { background: var(--m2t-l2); }
.mapa2t__amostra.l3 { background: var(--m2t-l3); }
.mapa2t__amostra.f1 { background: var(--m2t-f1); }
.mapa2t__amostra.f2 { background: var(--m2t-f2); }
.mapa2t__amostra.f3 { background: var(--m2t-f3); }
.mapa2t__conta { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-3, #8b99aa); }

.mapa2t__anuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Modo tv: sem abas, sem busca, sem zoom; tudo maior para a câmera. */
.mapa2t--tv .mapa2t__abas,
.mapa2t--tv .mapa2t__busca,
.mapa2t--tv .mapa2t__zoom,
.mapa2t--tv .mapa2t__ajuda { display: none; }
.mapa2t--tv .mapa2t__corpo { grid-template-columns: minmax(0, 1fr) 320px; }
.mapa2t--tv .mapa2t__svg { max-height: 80vh; }
.mapa2t--tv .mapa2t__frase { font-size: 20px; }
.mapa2t--tv .mapa2t__frase b { font-size: 26px; }
.mapa2t--tv .mapa2t__legenda button { font-size: 16px; padding: 8px 10px; }
.mapa2t--tv .mapa2t__amostra { width: 18px; height: 18px; }
.mapa2t--tv .mapa2t__formas path { stroke-width: 1px; }
.mapa2t--tv .mapa2t__dica { font-size: 15px; }
.mapa2t--tv .mapa2t__dica b { font-size: 18px; }

/* Largura estreita (celular): painel abaixo do mapa. */
@container (max-width: 640px) {
  .mapa2t__corpo { grid-template-columns: 1fr; }
}

/* Tema escuro do site: mesmos gatilhos do css/style.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .mapa2t {
    --m2t-l1: #8a3530;  --m2t-l2: #c35048;  --m2t-l3: #e5736b;
    --m2t-f1: #7d6420;  --m2t-f2: #b6912f;  --m2t-f3: #f0c04a;
    --m2t-g: #39434f;
    --m2t-borda: #10161d;
  }
}
:root[data-tema="escuro"] .mapa2t {
  --m2t-l1: #8a3530;  --m2t-l2: #c35048;  --m2t-l3: #e5736b;
  --m2t-f1: #7d6420;  --m2t-f2: #b6912f;  --m2t-f3: #f0c04a;
  --m2t-g: #39434f;
  --m2t-borda: #10161d;
}