/* Web Path AR — estilos compartilhados
 *
 * Mobile-first: as regras base descrevem a tela pequena.
 * Media queries só ADICIONAM, nunca desfazem.
 */

:root {
  /* Fundo mantido preto por decisão do cliente (2026-09-18) — o manual de
     marca define azul-marinho (#141B4D/#151F6D) como "Background", mas o
     preto já estava calibrado com o campo de estrelas e o shader de céu do
     globo (ver .globo-area e aplicarAtmosfera em globo.js) e foi mantido
     deliberadamente fora do manual. */
  --fundo: #05070d;
  --superficie: #0c1018;
  --texto: #e8eaf0;
  --secundario: #9aa3b8;
  --borda: #1c2233;

  /* Identidade visual — Manual de Marca Ideia Space, maio/2024. */
  --destaque: #00c1d5; /* ciano da marca — links, foco, informação */
  --acao: #e31c79;     /* magenta da marca — reservado a chamada de ação
                           (botão de AR). NÃO usar como cor de texto: contra
                           os fundos deste tema dá 4,3-4,5:1, abaixo do 4,5:1
                           que WCAG AA exige pra texto normal. Funciona como
                           borda/preenchimento (exige só 3:1) com texto claro
                           por cima, ou como preenchimento sólido com texto
                           ESCURO (--fundo) por cima — ver .botao-ar. */

  /* Azul do marcador "base de lançamento" no globo (ver adicionarLocais em
     globo.js). Antes de o manual de marca existir, esta cor E --destaque
     eram o mesmo valor por coincidência; separá-los agora evita que uma
     mudança de marca desalinhe .local-tipo do marcador que ele representa
     no mapa. globo.js usa o mesmo hex como literal — os dois precisam ser
     alterados juntos se um dia mudar. */
  --marcador-base: #7fb2ff;

  --largura-texto: 40rem;
  --espaco: 1.25rem;
}

* {
  box-sizing: border-box;
}

html {
  /* Rolagem suave ao pular para âncoras, mas respeitando quem
     pediu menos movimento nas preferências do sistema. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  /* Impede o iOS de aumentar a fonte ao girar o aparelho. */
  -webkit-text-size-adjust: 100%;
}

/* ---------- Tipografia ---------- */

h1,
h2 {
  line-height: 1.2;
  /* text-wrap: balance evita uma última linha com uma palavra só.
     Onde não houver suporte, o título simplesmente quebra normal. */
  text-wrap: balance;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--destaque);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 3px;
}

/* ---------- Estrutura ---------- */

.pagina {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 1.5rem var(--espaco) 4rem;
}

/* Expansão de uma sigla, logo abaixo do título. Existe porque "ACRIMSAT" e
   "Active Cavity Irradiance Monitor Satellite" são dois dados diferentes,
   não duas versões do mesmo. */
.nome-completo {
  margin: -0.25rem 0 1rem;
  color: var(--secundario);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* Classificação da localidade, logo abaixo do título — "Base de lançamento"
   ou "Local de atividade". Ocupa a mesma posição que .nome-completo ocupa na
   página de satélite, e é lida do campo `tipo` do GeoJSON.

   As cores repetem as da camada "locais-ponto" do globo (ver globo.js): o
   mesmo azul para base de lançamento, o mesmo âmbar para atividade. Quem
   clicou num ponto azul chega numa página com etiqueta azul. */
.local-tipo {
  display: inline-block;
  margin: -0.25rem 0 1rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--marcador-base);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.resumo {
  color: var(--secundario);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

/* ---------- Marca ----------
   Símbolo extraído do Manual de Marca (assets/models/manual/), página 16,
   já com fundo transparente — pensado para ficar sobre --fundo, não para
   ser um selo próprio. É por isso que este arquivo, ao contrário do
   favicon e do apple-touch-icon, não tem fundo sólido embutido. */
.marca {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 1rem;
}

/* Agrupa o símbolo com o link de voltar, nas páginas de satélite e
   localidade. Nessas páginas .voltar já tinha margin-bottom próprio; aqui
   ele é zerado porque quem dá o espaçamento agora é o container flex. */
.cabecalho-pagina {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.cabecalho-pagina .marca,
.cabecalho-pagina .voltar {
  margin-bottom: 0;
}

.voltar {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--secundario);
  text-decoration: none;
}

.voltar:hover,
.voltar:focus-visible {
  color: var(--destaque);
}

/* ---------- Visualizador 3D ---------- */

.visor {
  /* Reserva o espaço ANTES de o modelo carregar.
     Sem isso, o conteúdo abaixo salta quando o visor aparece. */
  aspect-ratio: 4 / 3;
  /* Contexto de posicionamento da barra de progresso. */
  position: relative;
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  overflow: hidden;
}

model-viewer {
  width: 100%;
  height: 100%;
  /* O botão de AR é posicionado em relação a este elemento. O model-viewer
     já se declara relative internamente; explicitar aqui evita depender de
     um detalhe interno da biblioteca. */
  position: relative;
  --poster-color: transparent;
}

/* Botão de AR — vive dentro do <model-viewer>, no slot "ar-button".
   O componente o esconde sozinho onde AR não é suportado, então nenhuma
   detecção de plataforma é necessária aqui. */
.botao-ar {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  /* 44px é o alvo de toque mínimo recomendado para não errar o dedo. */
  min-height: 44px;
  padding: 0.65rem 1.25rem;

  /* Borda em --acao (magenta): é o único uso seguro dessa cor como texto
     não é (ver nota em --acao no :root). Aqui é traço fino sobre fundo
     escuro, então conta como componente não-textual (3:1), não como texto. */
  border: 1px solid var(--acao);
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.92);
  color: var(--texto);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  /* Impede o duplo-toque de dar zoom em vez de acionar o botão. */
  touch-action: manipulation;
}

.botao-ar:hover,
.botao-ar:focus-visible {
  /* Preenchimento sólido no hover/foco: texto precisa ficar ESCURO aqui,
     não claro — magenta com texto claro dá 3,7:1 e fura WCAG AA; magenta
     com texto --fundo dá 4,5:1 e passa. Contraintuitivo, então documentado. */
  background: var(--acao);
  border-color: var(--acao);
  color: var(--fundo);
}

/* Barra de progresso do download do modelo. Fica sobre o visor e some
   quando o carregamento termina. <progress> nativo tem aparência própria
   em cada navegador, então os estilos abaixo cobrem os dois motores. */
.progresso {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(60%, 16rem);
  height: 0.35rem;
  appearance: none;
  border: none;
  border-radius: 999px;
  background: var(--borda);
  overflow: hidden;
}

.progresso::-webkit-progress-bar {
  background: var(--borda);
}

.progresso::-webkit-progress-value {
  background: var(--destaque);
  transition: width 0.2s linear;
}

.progresso::-moz-progress-bar {
  background: var(--destaque);
}

.visor-legenda {
  margin: 0.5rem 0 2rem;
  font-size: 0.85rem;
  color: var(--secundario);
}

/* ---------- Ficha técnica ---------- */

.ficha {
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--borda);
}

.ficha div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borda);
}

.ficha dt {
  color: var(--secundario);
  font-size: 0.9rem;
}

.ficha dd {
  margin: 0;
  text-align: right;
}

/* ---------- Estados ---------- */

/* Um único elemento serve os três tipos de aviso. A cor da borda esquerda
   é o que diferencia — não a cor do texto, que precisa continuar legível. */
.estado {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--secundario);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  color: var(--secundario);
  font-size: 0.95rem;
}

.estado--erro {
  border-left-color: #ff8a7a;
}

.estado--aviso {
  border-left-color: #ffc46b;
}

.estado--info {
  border-left-color: var(--destaque);
}

/* [hidden] sozinho já esconderia, mas qualquer display futuro em .estado
   passaria por cima dele. Explicitar aqui torna o estado inicial confiável. */
.estado[hidden] {
  display: none;
}

/* ---------- Telas maiores ---------- */

@media (min-width: 48rem) {
  h1 {
    font-size: 2.25rem;
  }

  .pagina {
    padding-top: 3rem;
  }

  .visor {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Globo (home) ---------- */

.pagina-globo {
  /* O globo ocupa a tela inteira; a página em si não rola. */
  overflow: hidden;
}

.globo-area {
  /* 100dvh e não 100vh: no celular, a barra de endereço aparece e some, e
     100vh ignora isso — o globo ficaria com um pedaço cortado embaixo. */
  width: 100%;
  height: 100dvh;

  /* Campo de estrelas — atrás do <canvas> do MapLibre, não sobre ele.
   *
   * Isto só existe porque uma verificação anterior estava incompleta: o
   * <canvas> não tem fundo opaco (nem no seu próprio CSS nem no contexto
   * WebGL, criado com alpha:true), e a região de "vazio" ao redor da esfera
   * só é pintada pelo shader de céu do MapLibre quando "atmosphere-blend"
   * é maior que zero (ver aplicarAtmosfera em globo.js). Com esse valor
   * ajustado, o vazio fica parcialmente transparente de verdade — e o que
   * está aqui atrás aparece exatamente ali, nunca sobre a esfera opaca
   * (terreno e água são uma passagem de desenho separada, sempre sólida).
   *
   * A tentativa anterior (uma camada por cima com mix-blend-mode) pintava
   * a tela inteira, inclusive por cima do globo — daí ele parecer
   * "transparente". Atrás do canvas, a própria geometria do MapLibre é
   * quem decide onde aparece, sem eu precisar calcular nada. */
  background-color: var(--fundo);
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 32% 68%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent),
    radial-gradient(1px 1px at 74% 46%, #fff, transparent),
    radial-gradient(1px 1px at 90% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 8% 88%, #fff, transparent),
    radial-gradient(1px 1px at 45% 92%, #fff, transparent),
    radial-gradient(1px 1px at 20% 45%, #fff, transparent),
    radial-gradient(1px 1px at 82% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 65% 60%, #fff, transparent);
  background-size:
    220px 220px, 260px 260px, 300px 300px, 240px 240px, 280px 280px,
    320px 320px, 250px 250px, 270px 270px, 230px 230px, 310px 310px;
  background-repeat: repeat;
}

.cabecalho-globo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1rem var(--espaco);
  /* Gradiente em vez de faixa sólida: o texto ganha contraste sem cortar
     o globo com uma borda dura. */
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.85), transparent);
  pointer-events: none;
}

.cabecalho-globo-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cabecalho-globo .marca {
  margin-bottom: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.cabecalho-globo h1 {
  font-size: 1.25rem;
  margin: 0;
}

.cabecalho-globo p {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--secundario);
}

/* O estado de erro do globo flutua sobre a área, centralizado. */
.pagina-globo .estado {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 28rem);
  background: var(--superficie);
  z-index: 2;
}

/* ---------- Popup do MapLibre ----------
   O MapLibre traz CSS próprio; estas regras só trocam as cores para o
   tema do projeto, sem redesenhar o componente. */

.maplibregl-popup-content {
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
}

.maplibregl-popup-close-button {
  color: var(--secundario);
  font-size: 1.25rem;
  /* Alvo de toque aceitável: o padrão do MapLibre é pequeno demais. */
  width: 2rem;
  height: 2rem;
}

.maplibregl-popup-tip {
  border-top-color: var(--superficie);
  border-bottom-color: var(--superficie);
}

.popup-local h2 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  color: var(--secundario);
}

.popup-local p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--secundario);
}

/* O link que fecha o ciclo globo -> localidade. Bloco, e não texto corrido,
   porque num celular ele é um alvo de toque: precisa de área própria e de
   uma altura confortável, não de um trecho sublinhado no meio do parágrafo. */
.popup-link {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.4rem 0;
  color: var(--destaque);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.popup-link::after {
  content: " 92";
}

.popup-link:hover,
.popup-link:focus-visible {
  text-decoration: underline;
}