/*
 * Tema escuro "vidro" (decisão do responsável, 2026-10-11). Vale só com data-tema="escuro" no <html>, e o servidor
 * só põe esse valor nas telas que oferecem o botão (dashboard). Sem o atributo, este arquivo não muda nada.
 *
 * Cor só por var(--...): paleta padrão do app (tokens.css), sem tom novo. Fundo marinho; brilhos e bordas em azul
 * médio, azul claro e branco com opacidade. Cartão translúcido (color-mix) com fallback sólido; blur quando suportado.
 * Hover: o cartão sobe 4 px, só quando o usuário aceita movimento. tests/test_tema_escuro.py confere tudo isto.
 */

/* Base da página e do menu */
:root[data-tema="escuro"] body {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
}
:root[data-tema="escuro"] .area-dados { background: transparent; color: var(--cor-branco); }
:root[data-tema="escuro"] .texto-apoio { color: var(--cor-branco); }
:root[data-tema="escuro"] h1 { color: var(--cor-azul-claro); }
:root[data-tema="escuro"] h2 { color: var(--cor-azul-claro); }
:root[data-tema="escuro"] a { color: var(--cor-azul-claro); }
/* Painel flutuante do menu retraído (ver sgg.css): vidro marinho com borda translúcida, como o menu. */
:root[data-tema="escuro"] .menu-flutuante {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
  border: 1px solid color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
  box-shadow: var(--vidro-sombra);
}
:root[data-tema="escuro"] .menu-lateral {
  background: var(--vidro-fundo);
  border: 1px solid color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
}

/* Faixa do cabeçalho: o fundo da página (marinho), opaco, para o conteúdo não aparecer por cima da barra fixa.
 * A barra: azul principal sólido também no tema escuro (ajuste de 2026-10-12). Translúcido deixava o conteúdo
 * aparecer através dela. */
:root[data-tema="escuro"] .cabecalho-fixo { background: var(--vidro-fundo); }
:root[data-tema="escuro"] .cabecalho {
  background: var(--cor-azul-principal);
  border-bottom: 1px solid color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
}
:root[data-tema="escuro"] .cabecalho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
:root[data-tema="escuro"] .cabecalho-tema { margin: 0; }

/* Cartões de vidro: indicadores e seções do painel. Fallback sólido (marinho) e borda; o translúcido vem depois. */
:root[data-tema="escuro"] .cartao-painel,
:root[data-tema="escuro"] .indicador {
  position: relative;
  overflow: hidden;
  background: var(--vidro-fundo);
  background: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-cartao), transparent);
  border: 1px solid color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
  border-radius: var(--vidro-raio);
  box-shadow: var(--vidro-sombra);
  color: var(--cor-branco);
}

/* Blur do vidro: só onde o navegador suporta (sem ele, o cartão segue translúcido e legível). */
@supports (backdrop-filter: blur(1px)) {
  :root[data-tema="escuro"] .cartao-painel,
  :root[data-tema="escuro"] .indicador {
    backdrop-filter: blur(14px);
  }
}
@supports (-webkit-backdrop-filter: blur(1px)) {
  :root[data-tema="escuro"] .cartao-painel,
  :root[data-tema="escuro"] .indicador {
    -webkit-backdrop-filter: blur(14px);
  }
}

/* Brilho em degradê no canto superior: azul claro suave no canto e uma linha azul médio para azul claro no topo.
 * O brilho fica no canto, longe do texto da maior parte dos cartões; o contraste do pior caso é conferido no teste. */
:root[data-tema="escuro"] .cartao-painel::before,
:root[data-tema="escuro"] .indicador::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    color-mix(in srgb, var(--cor-azul-claro) var(--vidro-alfa-brilho), transparent),
    transparent 55%
  );
  pointer-events: none;
}
:root[data-tema="escuro"] .cartao-painel::after,
:root[data-tema="escuro"] .indicador::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cor-azul-medio), var(--cor-azul-claro));
  pointer-events: none;
}
:root[data-tema="escuro"] .cartao-painel > *,
:root[data-tema="escuro"] .indicador > * { position: relative; }

/* Títulos dentro do cartão ficam brancos: o brilho do canto não pode baixar o contraste do título. */
:root[data-tema="escuro"] .cartao-painel h2 { color: var(--cor-branco); }

/* Indicadores: rótulo e valor em branco (o rótulo azul claro não entra no cartão, ver teste de contraste). */
:root[data-tema="escuro"] .indicador-rotulo { color: var(--cor-branco); }
:root[data-tema="escuro"] .indicador-valor,
:root[data-tema="escuro"] .indicador-nota { color: var(--cor-branco); }

/* Tabelas no cartão: fundo do próprio cartão, divisórias translúcidas. */
:root[data-tema="escuro"] table { background: transparent; color: var(--cor-branco); }
:root[data-tema="escuro"] th,
:root[data-tema="escuro"] td {
  border-bottom-color: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
}
:root[data-tema="escuro"] th[scope="row"] { background: transparent; color: var(--cor-branco); }

/* Gráfico: área em degradê azul claro que some para baixo; linha e pontos em azul claro; rótulos em branco. */
:root[data-tema="escuro"] .grafico-degrade-topo { stop-color: var(--cor-azul-claro); stop-opacity: 0.4; }
:root[data-tema="escuro"] .grafico-degrade-base { stop-color: var(--cor-azul-claro); stop-opacity: 0; }
:root[data-tema="escuro"] .grafico-linha { stroke: var(--cor-azul-claro); }
:root[data-tema="escuro"] .grafico-ponto { fill: var(--vidro-fundo); stroke: var(--cor-azul-claro); }
:root[data-tema="escuro"] .grafico-ponto-atual { fill: var(--cor-azul-claro); stroke: var(--cor-branco); }
:root[data-tema="escuro"] .grafico-base {
  stroke: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
}
:root[data-tema="escuro"] .grafico-valor,
:root[data-tema="escuro"] .grafico-mes { fill: var(--cor-branco); }
:root[data-tema="escuro"] .legenda { color: var(--cor-branco); }
:root[data-tema="escuro"] .legenda-amostra-linha,
:root[data-tema="escuro"] .legenda-amostra-atual { background: var(--cor-azul-claro); border-color: var(--cor-azul-claro); }

/* Foco visível no escuro: contorno branco (contraste com o marinho muito acima de 3:1). */
:root[data-tema="escuro"] :focus-visible { outline-color: var(--cor-branco); }

/* Hover: o cartão sobe 4 px com transição curta. Só com movimento permitido; sem isso, nada se move. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-tema="escuro"] .cartao-painel,
  :root[data-tema="escuro"] .indicador {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  :root[data-tema="escuro"] .cartao-painel:hover,
  :root[data-tema="escuro"] .indicador:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--cor-azul-claro) 45%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="escuro"] .cartao-painel,
  :root[data-tema="escuro"] .indicador {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------------------------------------------------------------------------------
 * Tema escuro nas telas além do dashboard (pedido do responsável, 2026-10-11). O tema vale em todas as telas: o
 * fundo, os cartões, os campos, os botões, as mensagens e as tabelas usam só as cores da paleta (sem tom novo).
 * Cartões de vidro usam --vidro-raio (cantos de 16 a 24 px). Tela de entrar: painel marinho, cartão de vidro.
 * ---------------------------------------------------------------------------------------------------------------- */

/* Tela de entrar: painel do formulário e cartão de vidro (o marcado com .cartao, fora do dashboard) */
:root[data-tema="escuro"] .entrar-formulario { background: var(--vidro-fundo); color: var(--cor-branco); }
:root[data-tema="escuro"] .cartao {
  position: relative;
  overflow: hidden;
  background: var(--vidro-fundo);
  background: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-cartao), transparent);
  border: 1px solid color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
  border-radius: var(--vidro-raio);
  box-shadow: var(--vidro-sombra);
  color: var(--cor-branco);
  padding: 1.25rem;
}
:root[data-tema="escuro"] .cartao-subtitulo,
:root[data-tema="escuro"] .ajuda-acesso,
:root[data-tema="escuro"] .selo-seguro,
:root[data-tema="escuro"] .rodape-entrar,
:root[data-tema="escuro"] .produzido-por { color: var(--cor-branco); }
:root[data-tema="escuro"] .ajuda-acesso { border-top-color: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent); }
:root[data-tema="escuro"] .selo-seguro .icone { color: var(--cor-azul-claro); }
:root[data-tema="escuro"] .botao-senha { color: var(--cor-azul-claro); }
:root[data-tema="escuro"] .produzido-por a { color: var(--cor-azul-claro); }

/* Campos: fundo marinho, texto branco e contorno azul claro (3:1 sobre o cartão). Ícone do campo em cinza da paleta */
:root[data-tema="escuro"] .formulario input,
:root[data-tema="escuro"] .formulario select {
  color: var(--cor-branco);
  background: var(--vidro-fundo);
  border-color: var(--cor-azul-claro);
}
:root[data-tema="escuro"] .formulario .campo { background: var(--vidro-fundo); }
:root[data-tema="escuro"] .formulario .campo .rotulo-campo { color: var(--cor-branco); }
:root[data-tema="escuro"] .formulario .campo::before { background-color: var(--cor-cinza); }
:root[data-tema="escuro"] .formulario .campo:focus-within::before { background-color: var(--cor-azul-claro); }
:root[data-tema="escuro"] .formulario .campo input[aria-invalid="true"] {
  border-color: var(--cor-branco);
  box-shadow: inset 0 0 0 1px var(--cor-branco);
}
:root[data-tema="escuro"] .formulario .aviso-caps {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
  border-left-color: var(--cor-azul-claro);
}

/* Botões: primário com contorno azul claro (a borda aparece sobre o marinho); secundário sem fundo, texto branco */
:root[data-tema="escuro"] .botao-primario { border-color: var(--cor-azul-claro); }
:root[data-tema="escuro"] .botao-secundario {
  background: transparent;
  color: var(--cor-branco);
  border-color: var(--cor-azul-claro);
}
:root[data-tema="escuro"] .barra-tema .botao-tema {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
  border-color: var(--cor-azul-claro);
}

/* Mensagens: fundo de vidro escuro, texto branco e marca azul claro à esquerda (mesma linguagem do claro) */
:root[data-tema="escuro"] .erro {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
  border-left-color: var(--cor-azul-claro);
}
:root[data-tema="escuro"] .errorlist { color: var(--cor-branco); }

/* Botão de tema no cabeçalho: contorno branco sobre o cabeçalho translúcido (igual ao claro, declarado aqui para o tema) */
:root[data-tema="escuro"] .cabecalho .botao-tema {
  background: transparent;
  color: var(--cor-branco);
  border-color: var(--cor-branco);
}

/* Contêiner das tabelas: contorno translúcido, como os cartões */
:root[data-tema="escuro"] .tabela-conteiner {
  border-color: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
}

/* Controle segmentado (filtro de situação): fundo marinho com contorno azul claro; o atual segue azul médio com texto
 * branco (regra do claro). Os demais: texto branco sobre marinho (AA). */
:root[data-tema="escuro"] .segmentado {
  background: var(--vidro-fundo);
  border-color: var(--cor-azul-claro);
}
:root[data-tema="escuro"] .segmentado a { color: var(--cor-branco); }

/* Seta da lista de seleção no tema escuro: a versão branca do mesmo desenho (campo marinho). */
:root[data-tema="escuro"] .formulario select {
  background-image: url("../img/icones/chevron-claro.svg");
}

/* Seletor do app no tema escuro (pedido de 2026-10-11): o botão segue o campo escuro (fundo marinho, texto branco,
 * contorno azul claro); a lista é o vidro escuro com o contorno translúcido dos cartões; a seta é branca. Só tokens. */
:root[data-tema="escuro"] .seletor-botao {
  background: var(--vidro-fundo);
  color: var(--cor-branco);
  border-color: var(--cor-azul-claro);
}
:root[data-tema="escuro"] .seletor-botao[aria-invalid="true"] {
  border-color: var(--cor-branco);
  box-shadow: inset 0 0 0 1px var(--cor-branco);
}
:root[data-tema="escuro"] .seletor-seta { border-color: var(--cor-branco); }
:root[data-tema="escuro"] .seletor-lista {
  color: var(--cor-branco);
  background: var(--vidro-fundo);
  border-color: color-mix(in srgb, var(--cor-branco) var(--vidro-alfa-borda), transparent);
  box-shadow: var(--vidro-sombra);
}

/* Rodapé com a versão no tema escuro: texto branco sobre o fundo marinho (AA). */
:root[data-tema="escuro"] .rodape-versao { color: var(--cor-branco); }