/* bdgeo-gis — tema visual compartilhado (ARQ-317/321, pedido do usuário 2026-10-09: "aparência
   moderna e gamificada... podemos dar uma estética inicial melhor para nossa página?" e, depois de
   ver a v1 ("está com cara de qualquer site feito com IA"), referência concreta: tela de opções de
   mapa do Cities: Skylines 2 — painel escuro translúcido, borda ciano que acende no foco, campos
   escuros com contorno fino, botão de ação principal em verde cheio, linhas de dado com ícone+valor
   separadas por traço fino, títulos em caixa alta com letter-spacing).

   Pivô de v1 (clara, cartão branco sobre degradê azul) pra v2 (ESCURA, painel de vidro sobre fundo
   quase preto, acento ciano) — não é só trocar cor, é a diferença entre "site institucional" e
   "painel de controle". A paleta cívica azul (`--ac`) persiste como cor de marca/link, mas o PESO
   visual agora é do acento ciano + fundo escuro, igual à referência.

   Revisão (mesmo dia, pedido do usuário depois de ver a v2 em produção): "O tema ainda não é escuro
   o suficiente, alguns textos não estão contrastando bem. no tema do jogo sempre é utilizado uma
   paisagem de fundo com os menus semitransparentes atrás." Confirmado olhando OUTRA referência
   (captura de jogo real, painel "PROGRESSION" sobre o render 3D da cidade): o painel em si é quase
   opaco (escuro de verdade), a paisagem aparece nas BORDAS/fora do painel, nunca compete com o
   texto por dentro — daí os dois ajustes desta revisão: (1) fundo/painel bem mais escuros e texto
   secundário mais claro, (2) `--imagem-fundo` (silhueta de skyline gerada localmente, ver
   `static/img/fundo-cidade-generica.svg`) atrás dos cartões de login/cadastro/home, com um vinheta
   escura por cima garantindo que o texto do cartão nunca perca contraste pra imagem por baixo.
   `--imagem-fundo` é uma CSS custom property de propósito — uma organização específica poderá no
   futuro sobrescrever só essa variável com a skyline real da própria cidade ("personalizar por
   cidade"), sem tocar em nenhuma outra regra.

   Carregado por login/cadastro/home E por `mapa.html` (ARQ-321 estendeu o tema pro chrome do mapa —
   aside, árvore de camadas, painéis flutuantes, roda de ação da feição — mantendo toda a estrutura/
   classes/ids originais intactos, só os valores de cor mudaram, pra não arriscar nenhuma das ~900
   linhas de JS testadas por Playwright/Django ali). `mapa.html` não usa `--imagem-fundo`: o mapa
   real (OpenLayers) já É a paisagem de fundo dele, uma imagem decorativa ali seria redundante. */

:root {
  color-scheme: dark;

  /* Texto e fundo base — bem mais escuro que a v1 (achado direto do usuário: "ainda não é escuro o
     suficiente"), mas nunca preto puro (a referência também usa um azul-ardósia quase preto, não
     #000, pra não achatar a profundidade dos painéis). `--mut` clareado pra garantir contraste de
     texto secundário (rótulo, descrição) mesmo sobre o painel mais escuro. */
  --fg: #f3f7fc;
  --mut: #a9bad2;
  --bd: #30465f;
  --bg: #0c1420;
  --fundo-app: #05090f;
  --fundo-painel: rgba(7, 12, 20, .94);
  --fundo-painel-solido: #0a0f1a;
  --fundo-campo: #050810;

  /* Imagem de fundo decorativa (paisagem atrás dos painéis semitransparentes, igual ao jogo) —
     ver comentário acima sobre personalização por cidade. Caminho relativo a este arquivo
     (`static/css/tema.css` → `static/img/...`), nunca uma URL externa (mesmo princípio de "sem CDN
     em runtime" do resto do projeto — ver AGENTS.md). */
  --imagem-fundo: url("../img/fundo-cidade-generica.svg");

  /* Acento ciano — equivalente à borda que acende no foco/hover da referência. Cor de marca (azul
     cívico) persiste separada, usada em menos lugares agora (links de texto, selo "bg"). */
  --ac: #2563eb;
  --ac-escuro: #1d4ed8;
  --acento: #30d8ec;
  --acento-dim: rgba(48, 216, 236, .35);
  --acento-glow: 0 0 0 3px rgba(48, 216, 236, .22);
  --sobre-acento: #04131a;           /* texto/ícone sobre fundo da cor de acento (botão ativo) */

  --ok: #22c55e;
  --ok-escuro: #16a34a;
  --al: #f2b94d;
  --er: #f0536b;

  --raio: 12px;
  --raio-grande: 18px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  --sombra-hover: 0 16px 40px rgba(0, 0, 0, .55);
  --sombra-forte: 0 24px 70px rgba(0, 0, 0, .65);
  --sombra-leve: 0 2px 8px rgba(0, 0, 0, .45);
  --sombra-texto: 0 1px 3px rgba(0, 0, 0, .6);

  /* Cor-de-emblema por tema/secretaria (ARQ-316, ainda não implementado) — mantidas vívidas mesmo
     sobre fundo escuro, cada uma testada visualmente por contraste contra `--fundo-painel`. */
  --tema-zoneamento: #4f8cff;
  --tema-ambiental: #2dd4a7;
  --tema-mobilidade: #ff9a4d;
  --tema-infraestrutura: #9aa9c2;
  --tema-habitacao: #b088ff;
  --tema-patrimonio: #e0a33c;
  --tema-seguranca: #ff5d6c;
  --tema-fiscal: #30d8ec;
  --tema-documental: #d183f0;
  --tema-padrao: var(--acento);
}

/* Tema claro "escritório" (ARQ-499, pedido do usuário 2026-10-29: "precisamos de modo escuro e modo normal de escritório").
   Só troca os TOKENS — toda regra de cor das telas usa var(--…), então nenhuma regra precisa de versão clara própria.
   Vale com a escolha "claro" do perfil (<html data-tema="claro">, posto pelo servidor) ou, sem escolha, com o sistema operacional em
   modo claro. Os dois blocos abaixo têm de ficar IGUAIS (CSS não deixa um seletor valer dentro e fora de @media ao mesmo tempo).
   O acento ciano escurece para teal (#0e7490): ciano claro sobre branco não passa de contraste 2:1. Mapa base e camadas não mudam. */
:root[data-tema="claro"] {
  color-scheme: light;
  --fg: #17202c;
  --mut: #556275;
  --bd: #cfd7e1;
  --bg: #f3f5f8;
  --fundo-app: #e9edf2;
  --fundo-painel: rgba(255, 255, 255, .97);
  --fundo-painel-solido: #ffffff;
  --fundo-campo: #f6f8fb;
  --imagem-fundo: none;
  --ac: #1d4ed8;
  --ac-escuro: #1e40af;
  --acento: #0e7490;
  --acento-dim: rgba(14, 116, 144, .35);
  --acento-glow: 0 0 0 3px rgba(14, 116, 144, .18);
  --sobre-acento: #ffffff;
  --ok: #15803d;
  --ok-escuro: #166534;
  --al: #b45309;
  --er: #c81e3a;
  --sombra: 0 4px 14px rgba(15, 23, 42, .10);
  --sombra-hover: 0 8px 22px rgba(15, 23, 42, .14);
  --sombra-forte: 0 18px 50px rgba(15, 23, 42, .22);
  --sombra-leve: 0 1px 4px rgba(15, 23, 42, .14);
  --sombra-texto: none;
  --tema-fiscal: #0e7490;
  --tema-ambiental: #0f9d78;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    color-scheme: light;
    --fg: #17202c;
    --mut: #556275;
    --bd: #cfd7e1;
    --bg: #f3f5f8;
    --fundo-app: #e9edf2;
    --fundo-painel: rgba(255, 255, 255, .97);
    --fundo-painel-solido: #ffffff;
    --fundo-campo: #f6f8fb;
    --imagem-fundo: none;
    --ac: #1d4ed8;
    --ac-escuro: #1e40af;
    --acento: #0e7490;
    --acento-dim: rgba(14, 116, 144, .35);
    --acento-glow: 0 0 0 3px rgba(14, 116, 144, .18);
    --sobre-acento: #ffffff;
    --ok: #15803d;
    --ok-escuro: #166534;
    --al: #b45309;
    --er: #c81e3a;
    --sombra: 0 4px 14px rgba(15, 23, 42, .10);
    --sombra-hover: 0 8px 22px rgba(15, 23, 42, .14);
    --sombra-forte: 0 18px 50px rgba(15, 23, 42, .22);
    --sombra-leve: 0 1px 4px rgba(15, 23, 42, .14);
    --sombra-texto: none;
    --tema-fiscal: #0e7490;
    --tema-ambiental: #0f9d78;
  }
}

/* Qualquer campo de texto/área de texto herda a cor de placeholder certa — sem isto, o cinza padrão
   do navegador pro placeholder às vezes nem respeita `color-scheme: dark` direito (inconsistente
   entre navegadores), outro ponto de baixo contraste citado pelo usuário. */
::placeholder { color: var(--mut); opacity: .75; }

/* Paisagem de fundo (silhueta de skyline, ver `--imagem-fundo` acima) + vinheta escura por cima —
   a vinheta é o que garante que o cartão/painel central nunca perca contraste pra imagem por baixo,
   mesmo que a imagem seja trocada por uma foto real de cidade mais clara/ruidosa no futuro. A grade
   fina continua por cima de tudo, textura de planta urbana. */
.hud-fundo-grade {
  background-color: var(--fundo-app);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 .5H48M.5 0V48' stroke='%2330d8ec' stroke-opacity='.06'/></svg>"),
    radial-gradient(ellipse 520px 600px at 50% 50%, rgba(2,4,8,.78), rgba(2,4,8,.30) 58%, transparent 85%),
    var(--imagem-fundo);
  background-position: center, center, center bottom;
  background-size: 48px 48px, auto, cover;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* no tema claro a vinheta escura some (não há paisagem escura para apagar) e a grade fica azul-acinzentada bem leve */
:root[data-tema="claro"] .hud-fundo-grade, :root[data-tema="claro"] .hud-header { background-image: none; }
:root[data-tema="claro"] .hud-fundo-grade { background-color: var(--fundo-app); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .hud-fundo-grade, :root:not([data-tema]) .hud-header { background-image: none; }
  :root:not([data-tema]) .hud-fundo-grade { background-color: var(--fundo-app); }
}

.hud-header {
  color: var(--fg);
  padding: 14px 24px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background-color: var(--fundo-painel-solido);
  border-bottom: 1px solid var(--bd);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 .5H48M.5 0V48' stroke='%2330d8ec' stroke-opacity='.06'/></svg>");
  background-size: 48px 48px;
}

.hud-header .selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento); font-weight: 700; font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--acento-dim);
}
.hud-header strong { font-size: 16px; letter-spacing: .02em; text-transform: uppercase; }
.hud-header .usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mut); }
.hud-header form { margin: 0; }
.hud-header button {
  background: color-mix(in srgb, var(--fg) 4%, transparent); color: var(--fg); border: 1px solid var(--bd);
  border-radius: 7px; padding: 5px 12px; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.hud-header button:hover { border-color: var(--acento); color: var(--acento); }
.hud-header .botao-conta { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; }

/* Título de painel no estilo "MAP OPTIONS" da referência: caixa alta, letter-spacing largo, botão
   de voltar quadrado com contorno — usado pelo cabeçalho de propriedades/diálogos no mapa. */
.titulo-painel {
  display: flex; align-items: center; gap: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; font-size: 13px; color: var(--fg);
}

/* Emblema circular de papel/nível — mesmo vocabulário do aro da roda de ação da feição (círculo +
   borda que acende), aplicado a "qual o seu nível de acesso aqui". */
.chip-papel {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--acento) 10%, transparent); color: var(--acento);
  border: 1px solid var(--acento-dim);
}
.chip-papel::before { content: "●"; font-size: 9px; }
.chip-papel.admin { background: rgba(242,185,77,.12); color: var(--al); border-color: rgba(242,185,77,.35); }
.chip-papel.admin::before { content: "★"; font-size: 10px; }

/* Cartão "ladrilho de departamento" — painel escuro translúcido com faixa de cor-de-tema à
   esquerda (como distrito num city builder) e aro ciano que acende no hover, eco direto da roda de
   ação da feição sem copiar o círculo (aqui é retângulo de navegação). */
.ladrilho {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--bd); border-radius: var(--raio); padding: 16px 18px 16px 22px;
  text-decoration: none; color: var(--fg); background: var(--fundo-painel);
  box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ladrilho::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--tema-cor, var(--tema-padrao));
  box-shadow: 0 0 12px var(--tema-cor, var(--tema-padrao));
}
.ladrilho:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); border-color: var(--tema-cor, var(--acento)); }
.ladrilho .emblema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 10px;
  background: color-mix(in srgb, var(--tema-cor, var(--tema-padrao)) 18%, var(--fundo-campo));
  color: var(--tema-cor, var(--tema-padrao));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tema-cor, var(--tema-padrao)) 45%, transparent);
}
.ladrilho .emblema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ladrilho .titulo { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.ladrilho .descricao { color: var(--mut); font-size: 12.5px; }

.grade-ladrilhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

/* Linha de dado estilo "data sheet" (painel direito da referência: rótulo à esquerda, valor+ícone à
   direita, traço fino entre linhas) — disponível pra qualquer aba de informações/propriedades. */
.linha-dado { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
.linha-dado:last-child { border-bottom: 0; }
.linha-dado .rotulo { color: var(--mut); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.linha-dado .valor { color: var(--fg); font-weight: 600; }

/* Botão de ação principal — retângulo cheio, bem mais presença que o resto do painel (igual ao
   "START GAME" verde da referência: a única coisa saturada na tela). */
.btn-acao-principal {
  display: block; width: 100%; text-align: center; background: var(--ok); color: #06240f;
  border: 0; border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn-acao-principal:hover { background: #3ee377; }
.btn-acao-principal:active { transform: translateY(1px); }

@media print {
  /* Qualquer elemento que use var(--fg)/var(--mut)/var(--bd)/var(--bg) na tela escura vira legível em
     papel automaticamente — sem isto, texto quase-branco (--fg da tela) ficaria invisível sobre o
     fundo branco que o print force (achado ao reverter pra tema escuro: regra de impressão de cada
     template só trocava o FUNDO, nunca o texto, porque até então --fg já era escuro). */
  :root { --fg: #1b1f23; --mut: #5b6570; --bd: #d7dce1; --bg: #f6f8fa; }
  .hud-header, .hud-fundo-grade { background-image: none; background: #fff; color: #1b1f23; border-color: #ddd; }
  .hud-header .selo { background: #f6f8fa; color: #0b5cad; border: 1px solid #ddd; box-shadow: none; }
  .hud-header .usuario { color: #5b6570; }
  .hud-header button { display: none; }
  .ladrilho { background: #fff; color: #1b1f23; box-shadow: none; border-color: #ddd; }
  .ladrilho:hover { transform: none; box-shadow: none; }
}