/* Visão do Campo — fotos: reamostragem suave na lateral e o visualizador em tela
   cheia. Carrega depois de estilo.css (a ordem em index.html), por isso pode
   sobrescrever regras de `.palco img` / `.quadro img` sem duplicá-las. */

/* ------------------------------------------------------- lateral (sidebar) */
/* A FOTO SAI COMO O SERVIDOR MANDOU: cada pixel dela um quadrado
   (`image-rendering: pixelated`, em estilo.css), sem suavização no navegador —
   decisão do dono em 2026-09-21. São 65 px de 10 m quando vem do satélite, ou
   260 px de 2,5 m quando a reconstrução do servidor já alcançou a data; nenhuma
   regra daqui depende de qual das duas é. */

/* o botão que app.js passou a embrulhar em volta da <img>: preenche o quadro
   inteiro, sem alterar o tamanho do quadro nem a posição de .marca-ponto e
   .rotulo-data (que continuam irmãos dele, posicionados pelo mesmo .palco/
   .quadro de sempre). */
.foto-abre {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: transparent;
  cursor: zoom-in; display: block;
}
/* offset negativo: o anel de foco padrão (2px para fora) some sob o
   overflow:hidden do quadro — para dentro ele fica visível de verdade */
.foto-abre:focus-visible { outline: 2px solid var(--verde); outline-offset: -3px; }

/* ------------------------------------------------------- o visualizador */
.fotos-fundo {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(14,17,15,0.98);
  display: flex; flex-direction: column;
  font-family: var(--ui); color: #F3F5F2;
}
.fotos-fundo:focus { outline: none; }

.fotos-topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 10px calc(10px + env(safe-area-inset-left, 0px));
  pointer-events: none; /* respiro entre os botões deixa passar o clique de fechar */
}
.fotos-topo-grupo { display: flex; gap: 8px; }

.fotos-btn, .fotos-fechar {
  border: 1px solid var(--vidro-linha); background: var(--vidro); color: var(--vidro-tinta);
  border-radius: var(--r-s); font: 500 12px var(--ui); cursor: pointer;
  min-height: 36px; padding: 0 12px;
  pointer-events: auto; /* .fotos-topo é `pointer-events:none` para deixar passar o clique de fechar no fundo */
}
.fotos-btn:hover, .fotos-fechar:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); }
.fotos-btn[aria-pressed="true"] { background: rgba(233,235,230,0.92); color: #0E110F; font-weight: 600; }
.fotos-fechar {
  width: 36px; min-width: 36px; padding: 0; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fotos-btn:focus-visible, .fotos-fechar:focus-visible,
.fotos-seta:focus-visible, .fotos-ponto:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.fotos-viewport {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.fotos-trilho {
  display: flex; width: 100%; height: 100%;
  transition: transform 0.18s ease;
  touch-action: pan-y; /* o deslize horizontal é nosso; o vertical continua do navegador */
}
.fotos-trilho.fotos-trilho-arrastando { transition: none; }
@media (prefers-reduced-motion: reduce) { .fotos-trilho { transition: none; } }

.fotos-item {
  flex: 0 0 100%; height: 100%;
  position: relative; /* a marca do ponto clicado se posiciona contra o quadro */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; /* com zoom o canvas cresce: sem o recorte ele invade a foto vizinha do carrossel */
}

/* A MARCA DO PONTO CLICADO NO MAPA, em tela cheia. Mesmo desenho da lateral
   (`.marca-ponto`, estilo.css) para quem olha reconhecer que é a mesma coisa.
   `z-index` pelo mesmo motivo da tarja de data: o canvas ganha `transform` no
   zoom, cria uma camada própria e, por vir antes no DOM, cobriria a marca.
   `left`/`top` vêm do JS em px (`posicionarMarcas`), não em %: a posição
   depende do zoom e do arrasto, que o CSS não conhece. */
.fotos-marca {
  /* largura e altura vêm do JS (`posicionarMarcas`), em px calculados do chão
     que o pixel cobre — aqui não há medida fixa de propósito. `translate`
     centra sem depender do tamanho. */
  position: absolute; z-index: 2; box-sizing: border-box;
  transform: translate(-50%, -50%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(14,17,15,0.85), inset 0 0 0 1px rgba(14,17,15,0.4);
  pointer-events: none;
}

/* O CONTORNO DA ÁREA em tela cheia — o mesmo desenho da lateral. Posicionado e
   dimensionado pelo JS (`posicionarMarcas`) contra o canvas, como a marca: é a
   imagem que ele acompanha, e ela muda de tamanho com o zoom. */
.fotos-contorno { position: absolute; z-index: 1; pointer-events: none; }
.fotos-contorno polygon { fill: none; stroke: #FFFFFF; stroke-width: 1.5px; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(14,17,15,0.9)); }

.fotos-canvas {
  display: block; background: #0A0C0A; border-radius: var(--r-s);
  transform-origin: 0 0; /* o zoom escala a partir do canto, é o que a matemática em fotos.js assume */
  transition: none; /* sem isto o zoom por roda/arrasto/pinça fica um passo atrás do gesto */
}
/* só durante o zoom por duplo clique/toque — roda, arrasto e pinça continuam sem transição */
.fotos-canvas.fotos-canvas-anim { transition: transform 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .fotos-canvas.fotos-canvas-anim { transition: none; } }
/* só durante o gesto (pointerdown até soltar) — o navegador otimiza sabendo que o transform vai mudar */
.fotos-canvas.fotos-canvas-gesto { will-change: transform; }

.fotos-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: var(--r-s);
  border: 1px solid var(--vidro-linha); background: var(--vidro); color: var(--vidro-tinta);
  font: 400 20px var(--ui); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fotos-seta:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); }
/* na ponta da lista a seta fica, apagada: o carrossel para ali, não dá a volta */
.fotos-seta[disabled] { opacity: 0.25; cursor: default; }
.fotos-seta[disabled]:hover { background: transparent; }
.fotos-seta-esq { left: calc(10px + env(safe-area-inset-left, 0px)); }
.fotos-seta-dir { right: calc(10px + env(safe-area-inset-right, 0px)); }

/* -------------------------------------------------------- lado a lado */
.fotos-duo {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 16px;
  touch-action: pan-y; /* como .fotos-trilho: o JS troca para `none` enquanto há zoom */
}
.fotos-duo-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  /* O QUADRO RECORTA. Sem isto, no lado a lado com zoom o canvas ampliado de uma foto cobria a outra
     e as duas viravam uma imagem só — a comparação, que é o motivo do modo, sumia. O quadro tem o
     tamanho da foto a 1× (ele abraça o canvas), e é contra ele que o zoom prende a posição. */
  overflow: hidden; border-radius: var(--r-s);
}
.fotos-rotulo-item {
  /* z-index: o canvas leva `transform` durante o zoom, que cria uma camada própria — e, por vir
     depois no DOM, ela cobriria esta tarja: o lado a lado ficaria sem a data de cada foto */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  text-align: center; font: 600 12px var(--mono); color: #F6F4EE;
  background: rgba(21,26,22,0.78); padding: 4px 8px; border-radius: var(--r-s);
}

/* -------------------------------------------------------- rodapé */
.fotos-rodape {
  flex: 0 0 auto; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.fotos-legenda { min-width: 0; }
.fotos-rotulo { display: block; font: 600 14px var(--ui); }
.fotos-nota { display: block; margin-top: 2px; font-size: 12px; color: #C9D0C7; }
.fotos-resolucao { display: block; margin-top: 4px; font: 500 12px var(--mono); color: #9BA39A; letter-spacing: 0.01em; }

.fotos-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fotos-contador { font: 500 12px var(--mono); color: #C9D0C7; }

.fotos-zoom-controles { display: flex; align-items: center; gap: 6px; }
.fotos-zoom-btn {
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-s);
  border: 1px solid var(--vidro-linha); background: var(--vidro); color: var(--vidro-tinta);
  font: 500 16px var(--ui); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fotos-zoom-btn:hover { color: #FFFFFF; background: rgba(255,255,255,0.1); }
.fotos-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.fotos-zoom-btn[aria-pressed="true"] { background: rgba(233,235,230,0.92); color: #0E110F; font-weight: 600; }
.fotos-zoom-fator { min-width: 40px; text-align: center; font: 500 12px var(--mono); color: #C9D0C7; }

.fotos-pontos { display: flex; align-items: center; gap: 6px; }
.fotos-ponto {
  width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fotos-ponto::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.fotos-ponto:hover::before { background: rgba(255,255,255,0.6); }
.fotos-ponto.ativo::before { background: #FFFFFF; }

/* -------------------------------------------------------- celular */
@media (max-width: 900px) {
  .fotos-btn, .fotos-fechar, .fotos-seta, .fotos-ponto, .fotos-zoom-btn { min-height: 44px; min-width: 44px; }
  .fotos-ponto { width: 44px; }
  /* lista comprida: a 44 px cada, sem encolher, os pontos além do corte caem fora da tela, e o
     fundo é fixo — não há rolagem que os alcance. Ficam o contador "n / N", as setas e o deslize.
     O corte (MAX_PONTOS_NO_CELULAR) mora em fotos.js. */
  .fotos-pontos-muitos { display: none; }
  .fotos-btn { padding: 0 14px; }
  .fotos-rodape { flex-direction: column; align-items: stretch; gap: 10px; }
  .fotos-controles { justify-content: space-between; }
}