/**
 * Visão Brasil — estilo do painel.
 *
 * O componente do mapa traz o próprio CSS e não é redeclarado aqui: o que este
 * arquivo faz é (1) desenhar a moldura do painel e (2) tematizar o componente
 * pelos tokens `--mapa-*`, definidos no `body` para que a legenda — que no
 * futuro vive fora do elemento hospedeiro — herde os mesmos valores.
 *
 * Duas regras do componente que não podem ser contrariadas daqui: nada de
 * `transition` nas áreas (com centenas de municípios o realce arrasta atrás do
 * mouse) e nada de aumentar a especificidade das classes `status-N`.
 */

:root {
  --tinta: #1c2733;
  --tinta-fraca: #5b6b7c;
  --papel: #f4f6f9;
  --papel-alto: #ffffff;
  --linha: #dde4ec;
  --acento: #1b4f8a;
  --erro: #9b2c2c;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(28, 39, 51, 0.06), 0 6px 18px rgba(28, 39, 51, 0.06);
}

body {
  /* tokens lidos pelo componente */
  --mapa-fundo: transparent;
  --mapa-area: #dde5ee;
  --mapa-realce: #b6cde3;
  --mapa-traco: #ffffff;
  --mapa-traco-largura: 0.5;
  --mapa-foco: #7fb3e8;
  --mapa-altura-max: 46rem;

  /*
   * Seleção: amarelo cheio. O componente desenha a seleção numa camada acima
   * das áreas, com um véu por cima do preenchimento — em 100% o município
   * escolhido fica inteiramente amarelo, que é a leitura de "marcada para
   * reserva". O custo, declarado: a faixa de lojas some enquanto ela estiver
   * selecionada. A cor do dado volta assim que a seleção sai.
   */
  --mapa-selecionado: #f5c518;
  --mapa-selecao-veu: 100%;

  /*
   * Escala sequencial de volume de lojas — não são as cores de situação de
   * reserva do mapa.md, que só entram quando houver reserva. A ordem clara →
   * escura carrega a leitura; o componente ainda acrescenta padrão de traço a
   * partir de status-2, o que mantém as faixas distinguíveis em escala de
   * cinza.
   *
   * Começa em `status-2` porque as três primeiras faixas foram fundidas numa
   * só: `status-0` e `status-1` deixaram de ter uso.
   */
  --mapa-status-2: #8fbadf;
  --mapa-status-3: #629dcf;
  --mapa-status-4: #3a7cb5;
  --mapa-status-5: #1f5c91;

  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- cabeçalho ---------- */

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: var(--papel-alto);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-titulo strong {
  letter-spacing: 0.08em;
  margin-right: 0.6rem;
}

.cabecalho-titulo span { color: var(--tinta-fraca); }

.cabecalho-passo {
  margin: 0;
  font-size: 0.9rem;
  color: var(--tinta-fraca);
}


/* ---------- layout ---------- */

.conteudo {
  padding: 1.25rem;
  max-width: 1400px;
  margin-inline: auto;
}

.com-barra .conteudo { padding-bottom: 5.5rem; }

@media (max-width: 900px) {
  body { --mapa-altura-max: 32rem; }
}

/*
 * Fundo preto sob o mapa.
 *
 * Serve ao desenho: a escala de lojas é uma sequência de azuis claros, e sobre
 * branco as duas primeiras faixas quase desaparecem. Sobre preto cada uma delas
 * se destaca, e a divisa branca entre municípios passa a ler como traço, não
 * como falha de pintura.
 */
.painel-mapa {
  padding: 1rem 1rem 1.25rem;
  background: #000000;
  border: 1px solid #22303e;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  color: #e8eef5;
}

/*
 * O mapa nacional é a única coisa na tela e não pode ser um fantasma: aqui a
 * área é a informação, não o fundo. Tom cheio, divisa branca marcada e realce
 * de hover que se distingue de longe.
 */
.mapa.mapa-brasil {
  --mapa-area: #a9c0d6;
  --mapa-realce: #5b87b0;
  --mapa-traco-largura: 0.9;
}

/*
 * Na visão da UF, ausência de dado é desenhada pelo componente como tracejado
 * na cor de área, sem preenchimento — e com a área clara do mapa nacional o
 * estado inteiro ficava fantasma. Escurecer o token só neste contexto resolve
 * pelo contrato do componente, sem tocar nas regras dele: `.mapa-uf` é classe
 * que o próprio componente aplica ao hospedeiro.
 */
.mapa.mapa-uf {
  --mapa-area: #8ea6bd;
  --mapa-traco-largura: 0.7;
}

/*
 * Rede de segurança: cidade sem dado nenhum.
 *
 * Não acontece mais no caminho normal — o servidor devolve todas as cidades da
 * UF, com zero inclusive, e zero cai na primeira faixa. Sobra para quando a
 * consulta de dados falha: sem isto o componente desenharia `fill: transparent`
 * e o estado inteiro viraria um buraco preto, que parece defeito de pintura em
 * vez de falha de carregamento.
 *
 * A especificidade é 0,2,0 — igual à do `:hover` do componente, que vem depois
 * nesta página e por isso continua vencendo. As classes de status seguem dentro
 * de `:where()` e não somam: é o realce que precisa ganhar, sempre.
 */
.mapa-uf .mapa-municipio:where(.is-sem-dados),
.mapa-legenda .mapa-municipio:where(.is-sem-dados) {
  fill: #dfecf8;
}

/*
 * O status do componente ("Mapa do Brasil com 27 unidades federativas…") sai da
 * tela mas continua existindo: é ele que anuncia carregamento, troca de vista e
 * erro para quem usa leitor de tela. Escondê-lo com `display: none` calaria o
 * anúncio; este recorte tira da vista sem tirar da árvore de acessibilidade.
 */
.mapa-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.titulo {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.acoes {
  display: flex;
  gap: 0.5rem;
  min-height: 2.25rem;
  margin-bottom: 0.25rem;
}

/*
 * A moldura do zoom.
 *
 * `overflow: hidden` recorta o mapa ampliado na caixa do painel, senão ele
 * cobre o resto da página. `touch-action: none` entrega os dois dedos ao
 * JavaScript: sem isso o navegador trata a pinça como zoom da página inteira e
 * o gesto nunca chega ao mapa.
 */
.mapa-palco {
  overflow: hidden;
  touch-action: none;
}

.botao {
  font: inherit;
  padding: 0.45rem 0.9rem;
  color: #dbe6f0;
  background: transparent;
  border: 1px solid #33475a;
  border-radius: var(--raio);
  cursor: pointer;
}

.botao:hover { border-color: #7fb3e8; color: #ffffff; }

.botao:focus-visible {
  outline: 2px solid #7fb3e8;
  outline-offset: 2px;
}

/* a legenda vive dentro da moldura preta e herda a cor de lá; só o tamanho
   precisa de ajuste para não competir com o mapa */
.mapa-legenda { color: #c8d6e4; }

.aviso-linha {
  margin: 0 0 0.75rem;
  color: #ff9f9f;
  font-size: 0.9rem;
}

.aviso-linha[hidden] { display: none; }

/* ---------- balão do ponteiro ---------- */

/*
 * Fixo e ancorado no canto: a posição vem de `transform`, que não provoca
 * recálculo de layout a cada movimento do mouse. `pointer-events: none` impede
 * que o balão roube o `pointerover` da área que ele está descrevendo — o que
 * faria o mapa piscar sob o cursor.
 */
.balao {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  max-width: 16rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  color: var(--tinta);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  white-space: nowrap;
}

.balao[hidden] { display: none; }

/*
 * `hidden` é atributo, e o `display: none` que ele traz vem da folha do
 * navegador — que perde para o `display: flex` declarado pelo componente em
 * `.mapa-legenda`. Sem esta linha a legenda aparece no mapa nacional, onde não
 * há status nenhum para legendar.
 */
.mapa-legenda[hidden] { display: none; }

/* ---------- avisos ---------- */

.aviso {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--erro);
  border-radius: var(--raio);
}

.aviso.is-erro { color: var(--erro); }

.aviso code {
  font-size: 0.9em;
  color: var(--tinta);
}

/* ---------- barra de seleção ---------- */

/*
 * Fixa no rodapé da janela, não dentro do painel: a seleção sobrevive à
 * rolagem e ao zoom do mapa, e precisa continuar visível junto com eles.
 */
.barra-selecao {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: #0f1720;
  border-top: 1px solid #22303e;
  color: #e8eef5;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
}

.barra-selecao[hidden] { display: none; }

.barra-resumo {
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
}

/* o marcador amarelo é o mesmo da seleção no mapa: a barra fala do que está
   pintado lá, e a cor faz essa ligação sem precisar de texto */
.barra-resumo strong {
  display: inline-block;
  margin-right: 0.6rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--mapa-selecionado);
  font-weight: 600;
  white-space: nowrap;
}

/* nomes demais não podem empurrar o botão para fora da barra */
.barra-lista {
  color: #9fb3c6;
  overflow-wrap: anywhere;
}

.botao-claro {
  flex-shrink: 0;
  color: #0f1720;
  background: #e8eef5;
  border-color: #e8eef5;
}

.botao-claro:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0f1720;
}

.barra-acoes {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

/* ---------- formulário de candidatura ---------- */

.janela {
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.janela::backdrop { background: rgba(8, 14, 20, 0.6); }

.formulario {
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem;
}

.formulario h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* as cidades escolhidas são o assunto do formulário, não um detalhe dele */
.formulario-cidades {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  background: var(--papel);
  border-left: 3px solid var(--mapa-selecionado);
  border-radius: 6px;
}

.formulario label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--tinta-fraca);
}

.formulario-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

@media (max-width: 480px) {
  .formulario-duplo { grid-template-columns: 1fr; }
}

.formulario input,
.formulario textarea {
  font: inherit;
  color: var(--tinta);
  padding: 0.5rem 0.6rem;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 6px;
}

.formulario input:focus-visible,
.formulario textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.formulario textarea { resize: vertical; }

.formulario-erro {
  margin: 0;
  color: var(--erro);
  font-size: 0.85rem;
}

.formulario-erro[hidden] { display: none; }

.formulario-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* dentro da janela clara os botões precisam da paleta clara */
.formulario .botao { color: var(--acento); border-color: var(--linha); }
.formulario .botao:hover { border-color: var(--acento); color: var(--acento); }
.formulario .botao-claro { color: var(--papel-alto); background: var(--acento); border-color: var(--acento); }
.formulario .botao-claro:hover { background: #14406f; border-color: #14406f; color: var(--papel-alto); }
.formulario .botao[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- confirmação ---------- */

.confirmacao {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  padding: 0.9rem 1.25rem;
  background: #10331f;
  border-top: 1px solid #1e5c38;
  color: #d8f3e2;
  font-size: 0.9rem;
}

.confirmacao[hidden] { display: none; }

/* entrada para a tela do administrador; sem ela a reserva fica inalcançável */
.link-admin {
  margin-left: 1rem;
  color: var(--acento);
  text-decoration: none;
}

.link-admin:hover { text-decoration: underline; }