/* Implantação do Quinta do Lago: mapa vetorial com legenda que acende uma categoria por vez (26 de Outubro de 2026).
   Desenho: /mapa/implantacao.svg, gerado por /mapa/gerar_mapa.py a partir do projeto urbanístico de 25 de Fevereiro
   de 2026. Usa os tokens de estilo.css (--petroleo, --lago, --ipe, --nevoa, --branco, --fio, --calha, --fonte-texto).
   Cores só do manual e tons delas com branco; o tom de cada área está ao lado da variável.
   Texto: 14 px 500 petróleo sobre o branco (WCAG 13,26; APCA Lc 98,9) e 12 px 600 branco sobre o petróleo (Lc 102).
   Nada abaixo de 12 px; alvos de toque de 44 px ou mais. */

.mapa {
  /* repouso */
  --mapa-lago: #C7EAED;          /* água #2AB0BE a 26% */
  --mapa-margem: var(--lago, #036773);
  --mapa-preservacao: #6CA6AD;   /* lago a 58% */
  --mapa-preservacao-fio: #35858F;
  --mapa-verdes: #B3D1D4;        /* lago a 30% */
  --mapa-verdes-fio: #8BB9BE;
  --mapa-ruas: var(--branco, #FEFEFE);
  --mapa-ruas-fio: #B7C5C9;      /* petróleo a 28% */
  --mapa-comum: #FCCE8D;         /* ipê a 55% */
  --mapa-comum-fio: #FAAA3B;
  --mapa-chacaras: #E9F0F1;      /* névoa a 38% */
  --mapa-chacaras-fio: #A3B5BA;  /* petróleo a 36% */
  /* aceso: as ruas e as chácaras, claras no repouso, ganham corpo quando são a categoria da vez */
  --mapa-ruas-aceso: #C2CED1;    /* petróleo a 24% */
  --mapa-chacaras-aceso: #D4E2E4;  /* névoa a 75% */
  --mapa-chacaras-aceso-fio: #718D94; /* petróleo a 56% */
  /* apagado: o cinza da mesma luminância a 24% sobre o branco */
  --mapa-tempo: 180ms;

  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha, 24px);
  align-items: start; color: var(--petroleo, #023441);
}
.mapa-area { grid-column: 1 / span 9; position: relative; }
.mapa-legenda { grid-column: 10 / span 3; padding-top: 8px; }

/* ---------- janela, palco e desenho ---------- */
/* A janela tem a proporção do desenho; ampliado, o palco cresce e a janela rola (arrastar no mouse, dedo no toque). */
.mapa-janela {
  position: relative; overflow: hidden; aspect-ratio: var(--mapa-proporcao, 2471.3 / 1690); background: var(--branco, #FEFEFE);
  outline-offset: 4px; scrollbar-width: thin; scrollbar-color: rgba(2, 52, 65, .35) transparent;
}
.mapa[data-zoom] .mapa-janela { overflow: auto; -webkit-overflow-scrolling: touch; cursor: grab; outline: 1px solid var(--fio, rgba(2, 52, 65, .22)); outline-offset: -1px; }
.mapa[data-zoom].arrastando .mapa-janela { cursor: grabbing; }
.mapa-palco { position: relative; width: 100%; aspect-ratio: var(--mapa-proporcao, 2471.3 / 1690); }
.mapa-palco > svg { display: block; width: 100%; height: 100%; overflow: visible; }

.mapa-svg path { vector-effect: non-scaling-stroke; }
.mapa-svg [data-cat] {
  fill: var(--f); stroke: var(--s); stroke-width: .75px;
  transition: fill var(--mapa-tempo) ease, stroke var(--mapa-tempo) ease;
}
.mapa-svg [data-cat="lago"]        { --f: var(--mapa-lago); --s: none; --fd: #F8F8F8; --sd: #D7D7D7; }
.mapa-svg [data-cat="preservacao"] { --f: var(--mapa-preservacao); --s: var(--mapa-preservacao-fio); --fd: #E6E6E6; --sd: #DEDEDE; }
.mapa-svg [data-cat="verdes"]      { --f: var(--mapa-verdes); --s: var(--mapa-verdes-fio); --fd: #F2F2F2; --sd: #E8E8E8; }
.mapa-svg [data-cat="ruas"]        { --f: var(--mapa-ruas); --s: var(--mapa-ruas-fio); --fd: #FEFEFE; --sd: #EBEBEB; }
.mapa-svg [data-cat="comum"]       { --f: var(--mapa-comum); --s: var(--mapa-comum-fio); --fd: #F4F4F4; --sd: #EAEAEA; }
.mapa-svg [data-cat="chacaras"]    { --f: var(--mapa-chacaras); --s: var(--mapa-chacaras-fio); --fd: #FAFAFA; --sd: #E6E6E6; }
.mapa-svg [data-cat="entradas"]    { display: none; }   /* no site as entradas são botões por cima do desenho */
.mapa-svg .agua { stroke: none; }
.mapa-svg [data-parte="margem"] { fill: none; --s: var(--mapa-margem); stroke-width: 1.25px; pointer-events: none; }

/* uma categoria acesa: ela fica com a cor cheia; o resto vai para o cinza claro */
.mapa[data-ativo] .mapa-svg [data-cat]:not(.ativo) { fill: var(--fd); stroke: var(--sd); }
.mapa[data-ativo] .mapa-svg [data-parte="margem"]:not(.ativo) { fill: none; }
.mapa[data-ativo="ruas"] .mapa-svg [data-cat="ruas"] { --f: var(--mapa-ruas-aceso); --s: var(--mapa-ruas-aceso); }   /* sem fio: a borda é a própria cor */
.mapa[data-ativo="chacaras"] .mapa-svg [data-cat="chacaras"] { --f: var(--mapa-chacaras-aceso); --s: var(--mapa-chacaras-aceso-fio); }
/* contorno do lote sob o mouse ou o dedo, sem texto */
.mapa-svg .lote-destaque { fill: none; stroke: var(--petroleo, #023441); stroke-width: 2px; pointer-events: none; }

/* ---------- entradas ---------- */
.mapa-entrada {
  position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0;
  background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.mapa-entrada span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--petroleo, #023441); color: var(--branco, #FEFEFE);
  font-family: var(--fonte-texto); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 0 0 2px var(--ipe, #FAA631), 0 0 0 4px var(--branco, #FEFEFE);
  transition: background-color var(--mapa-tempo) ease, color var(--mapa-tempo) ease, box-shadow var(--mapa-tempo) ease, transform var(--mapa-tempo) ease;
}
.mapa-entrada:hover span, .mapa-entrada.ativo span { transform: scale(1.12); }
/* apagada: o número continua petróleo sobre o claro (Lc 89 a 12 px 600) */
.mapa[data-ativo]:not([data-ativo="entradas"]) .mapa-entrada span { background: #E3E9EA; color: var(--petroleo, #023441); box-shadow: 0 0 0 2px #D5DCDD, 0 0 0 4px var(--branco, #FEFEFE); }
.mapa-entrada:focus-visible { outline: 2px solid var(--petroleo, #023441); outline-offset: -2px; border-radius: 50%; }

/* ---------- rótulo que nomeia a categoria ---------- */
.mapa-rotulo {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 2px;
  background: var(--branco, #FEFEFE); color: var(--petroleo, #023441);
  font-family: var(--fonte-texto); font-size: 14px; line-height: 20px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(2, 52, 65, .16), 0 6px 18px rgba(2, 52, 65, .12);
  opacity: 0; visibility: hidden; transition: opacity var(--mapa-tempo) ease, visibility 0s linear var(--mapa-tempo);
}
.mapa-rotulo.visivel { opacity: 1; visibility: visible; transition: opacity var(--mapa-tempo) ease, visibility 0s; }
.mapa-rotulo::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--petroleo)); box-shadow: inset 0 0 0 1px rgba(2, 52, 65, .25); }
.mapa-rotulo[data-cat="chacaras"]    { --c: var(--mapa-chacaras-aceso); }
.mapa-rotulo[data-cat="ruas"]        { --c: var(--mapa-ruas-aceso); }
.mapa-rotulo[data-cat="verdes"]      { --c: var(--mapa-verdes); }
.mapa-rotulo[data-cat="comum"]       { --c: var(--mapa-comum); }
.mapa-rotulo[data-cat="preservacao"] { --c: var(--mapa-preservacao); }
.mapa-rotulo[data-cat="lago"]        { --c: var(--mapa-lago); }
.mapa-rotulo[data-cat="entradas"]    { --c: var(--petroleo, #023441); }

/* ---------- norte ---------- */
.mapa-norte { position: absolute; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 2px; pointer-events: none; font-family: var(--fonte-texto); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--petroleo, #023441); }
.mapa-norte svg { width: 32px; height: 32px; display: block; }

/* ---------- zoom ---------- */
.mapa-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.mapa-zoom button {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--petroleo, #023441); border-radius: 2px;
  background: var(--branco, #FEFEFE); color: var(--petroleo, #023441); cursor: pointer;
  font-family: var(--fonte-texto); font-size: 18px; line-height: 1; font-weight: 500;
}
.mapa-zoom button:disabled { border-color: var(--fio, rgba(2, 52, 65, .22)); cursor: default; }   /* só o contorno apaga; o sinal mantém o contraste */
.mapa-grande { margin-top: 4px; }
.mapa-zoom .mapa-dica { flex: 1 1 220px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--petroleo, #023441); }

/* ---------- legenda ---------- */
.mapa-legenda ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fio, rgba(2, 52, 65, .22)); }
.mapa-legenda li { border-bottom: 1px solid var(--fio, rgba(2, 52, 65, .22)); }
.mapa-legenda button {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; width: 100%; min-height: 48px;
  padding: 11px 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--petroleo, #023441);
  font-family: var(--fonte-texto); font-size: 14px; line-height: 22px; font-weight: 500; -webkit-tap-highlight-color: transparent;
}
.mapa-legenda button:focus-visible { outline: 2px solid var(--petroleo, #023441); outline-offset: 2px; }
.mapa-amostra {
  display: block; width: 28px; height: 18px; border-radius: 1px; background: var(--c);
  box-shadow: inset 0 0 0 1px var(--cf, rgba(2, 52, 65, .3));
  transition: box-shadow var(--mapa-tempo) ease, transform var(--mapa-tempo) ease;
}
.mapa-legenda .aceso .mapa-amostra, .mapa-legenda button:hover .mapa-amostra { box-shadow: inset 0 0 0 1px var(--cf, rgba(2, 52, 65, .3)), 0 0 0 2px var(--branco, #FEFEFE), 0 0 0 3px var(--petroleo, #023441); }
.mapa-legenda button[aria-pressed="true"] .mapa-nome::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--petroleo, #023441); vertical-align: middle; }
.mapa-legenda .mapa-dica { margin-top: 16px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--petroleo, #023441); text-wrap: pretty; }
.mapa-dica .no-toque { display: none; }
@media (hover: none) { .mapa-dica .no-mouse { display: none; } .mapa-dica .no-toque { display: inline; } }

/* amostras: a cor de repouso e o fio de cada área */
[data-mapa-cat="chacaras"]    { --c: var(--mapa-chacaras); --cf: var(--mapa-chacaras-fio); }
[data-mapa-cat="ruas"]        { --c: var(--mapa-ruas); --cf: var(--mapa-ruas-fio); }
[data-mapa-cat="verdes"]      { --c: var(--mapa-verdes); --cf: var(--mapa-verdes-fio); }
[data-mapa-cat="comum"]       { --c: var(--mapa-comum); --cf: var(--mapa-comum-fio); }
[data-mapa-cat="preservacao"] { --c: var(--mapa-preservacao); --cf: var(--mapa-preservacao-fio); }
[data-mapa-cat="lago"]        { --c: var(--mapa-lago); --cf: var(--mapa-margem); }
[data-mapa-cat="entradas"]    { --c: var(--petroleo, #023441); --cf: var(--petroleo, #023441); }
[data-mapa-cat="entradas"] .mapa-amostra { width: 18px; height: 18px; margin-left: 5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ipe, #FAA631); }
.mapa-legenda [data-mapa-cat="entradas"].aceso .mapa-amostra, .mapa-legenda [data-mapa-cat="entradas"]:hover .mapa-amostra { box-shadow: 0 0 0 2px var(--ipe, #FAA631), 0 0 0 4px var(--branco, #FEFEFE), 0 0 0 5px var(--petroleo, #023441); }

/* ---------- tamanhos ---------- */
@media (max-width: 1100px) {
  .mapa-area, .mapa-legenda { grid-column: 1 / -1; }
  .mapa-legenda { margin-top: 32px; padding-top: 0; }
  .mapa-legenda ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--calha, 24px); border-top: 0; }
  .mapa-legenda li:nth-child(-n + 3) { border-top: 1px solid var(--fio, rgba(2, 52, 65, .22)); }
}
@media (max-width: 767px) {
  .mapa { grid-template-columns: minmax(0, 1fr); }
  .mapa-area, .mapa-legenda { grid-column: 1 / -1; }
  .mapa-legenda { margin-top: 28px; }
  .mapa-legenda ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .mapa-legenda li:nth-child(-n + 3) { border-top: 0; }
  .mapa-legenda li:nth-child(-n + 2) { border-top: 1px solid var(--fio, rgba(2, 52, 65, .22)); }
  .mapa-legenda button { gap: 10px; grid-template-columns: 24px 1fr; }
  .mapa-amostra { width: 24px; height: 16px; }
  [data-mapa-cat="entradas"] .mapa-amostra { width: 16px; height: 16px; margin-left: 4px; }
  .mapa-norte svg { width: 28px; height: 28px; }
  .mapa-entrada span { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--ipe, #FAA631), 0 0 0 3px var(--branco, #FEFEFE); }
}
@media (hover: none) { .mapa-legenda button:hover .mapa-amostra { box-shadow: inset 0 0 0 1px var(--cf, rgba(2, 52, 65, .3)); } }

@media (prefers-reduced-motion: reduce) {
  .mapa, .mapa * { transition: none !important; scroll-behavior: auto !important; }
}