/* GCL — tema escuro.
   ===================================================================
   Pedido do João em 14/09/2026: *"trazer um ar mais corporativo e inovador,
   sair do óbvio"*, com uma referência de dashboard escuro (fundo quase preto,
   cartões flutuando, números gigantes, um acento neon).

   **O que veio da referência:** a LINGUAGEM — superfícies em camadas, cantos
   generosos, o número como protagonista da tela, o acento usado com avareza
   para uma coisa só brilhar por vez.

   **O que NÃO veio: a paleta.** A referência é verde-limão com roxo. O GCL
   tem marca — âmbar #E59436 sobre grafite (ver `gcl-marca/DESIGN.md`) — e
   trocar a cor de um produto porque um dribbble estava bonito é como trocar
   a logo: some a única coisa que faz o app ser reconhecível. A boa notícia é
   que o âmbar JÁ é o que o verde-limão é ali: uma cor quente e viva sobre
   escuro. Ele não precisou de substituto, precisou de espaço.

   ⚠️ **Isto é um tema, não um app novo.** Nenhuma tela foi reescrita: tudo
   aqui é redefinição de token e ajuste de forma. Se um componente novo nascer
   usando os tokens, ele já nasce funcionando nos dois temas — e se alguém
   cravar um hex no meio de uma tela, ele vai aparecer quebrado aqui. É de
   propósito: o tema escuro virou o detector de cor fora do sistema.

   Como ligar: `<html data-tema="escuro">`. Quem decide é `public/js/tema.js`.
   =================================================================== */

:root[data-tema="escuro"] {
  /* ---- as camadas. Três profundidades e nada além disso: o breu do fundo,
     a superfície do cartão e a elevação do que está por cima dela. Dashboard
     escuro erra quando inventa sete cinzas e a tela vira sopa. */
  --fundo: #14161C;          /* o breu — mais frio e mais fundo que o grafite */
  --papel-2: #1B1E26;
  --papel-3: #222631;
  --branco: #1B1E26;         /* "branco" aqui é a SUPERFÍCIE do cartão */
  --linha: #262B36;
  --linha-forte: #333A49;

  /* ---- tinta. Branco puro em texto corrido sobre preto vibra e cansa;
     o topo da escala é o creme da marca, que já é levemente quente. */
  --tinta: #F3EFEA;
  --tinta-2: #B9C0CE;
  --tinta-3: #8A93A5;

  /* ---- a brasa continua sendo a brasa. Sobre escuro ela pede o 400/300,
     que têm luminância para brilhar sem estourar. */
  --marca: var(--brasa-400);
  --marca-solida: var(--brasa-500);
  --marca-forte: var(--brasa-300);
  --marca-viva: var(--brasa-300);
  --marca-fraca: rgba(229, 148, 54, .12);   /* o "fundo de destaque" vira véu */
  --sobre-marca: #1A1206;                    /* grafite quente sobre o âmbar */

  /* ---- funcionais, recalibrados para o fundo escuro. Os tons claros deixam
     de ser "quase branco" e viram véu da própria cor: em tela escura, fundo
     claro de aviso é um holofote na cara. */
  --cumprido: #7B93BD;
  --cumprido-claro: rgba(123, 147, 189, .14);
  --vermelho: #FF6B6B;
  --vermelho-claro: rgba(255, 107, 107, .13);
  --amarelo: var(--brasa-300);
  --amarelo-claro: rgba(229, 148, 54, .13);

  /* ---- a lateral deixa de ser "a parte escura" e passa a ser a MAIS escura:
     no claro ela contrastava com o papel; aqui ela ancora. */
  --nucleo: #0F1116;
  --nucleo-2: #0B0D11;
  --fuligem: #1F232D;
  --escuro-linha: rgba(243, 239, 234, .08);

  /* ⚠️ Os nomes ANTIGOS (compatibilidade no gcl.css) precisam vir junto, e
     esquecê-los custou caro na primeira versão: `--marinho` aponta para
     `--nucleo`, que aqui é quase preto — e ele pinta o LINK, a aba ativa e o
     destaque. Resultado: aba preta sobre fundo preto e link invisível no meio
     do texto. Um token de compatibilidade é exatamente o que ninguém lembra de
     conferir; ficam aqui, nomeados, para o próximo não descobrir do mesmo
     jeito. */
  --marinho: var(--brasa-400);      /* link, aba ativa, destaque */
  --marinho-claro: var(--fuligem);
  --ciano: var(--brasa-400);
  --ciano-claro: rgba(229, 148, 54, .13);
  --laranja: var(--brasa-300);      /* brasa COMO LETRA — sobre escuro é o 300 */
  --laranja-claro: rgba(229, 148, 54, .13);

  /* ---- forma. Aqui sim a referência entra: canto generoso e cartão que
     FLUTUA em vez de ser delimitado por borda. No claro o raio é pequeno de
     propósito ("a tela é ficha de trabalho"); no escuro a borda quase some e
     é a curva que separa uma superfície da outra. */
  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .28);
  --sombra-alta: 0 24px 60px rgba(0, 0, 0, .55);
  --sombra-marca: 0 2px 14px rgba(229, 148, 54, .30);
  --sombra-marca-alta: 0 6px 22px rgba(229, 148, 54, .40);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

:root[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }

/* A borda de 1px que desenha o cartão no claro vira quase invisível aqui —
   o que separa as superfícies é a diferença de luz, não o traço. */
:root[data-tema="escuro"] .cartao,
:root[data-tema="escuro"] .numero,
:root[data-tema="escuro"] .tarefa,
:root[data-tema="escuro"] .tela {
  background: var(--branco);
  border-color: var(--linha);
}

/* Campos: no escuro, input com fundo igual ao cartão some. Ele afunda. */
:root[data-tema="escuro"] input,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] textarea {
  background: var(--fundo);
  border-color: var(--linha-forte);
  color: var(--tinta);
}
:root[data-tema="escuro"] input::placeholder,
:root[data-tema="escuro"] textarea::placeholder { color: var(--tinta-3); }

/* O botão claro é "o outro botão": no escuro ele é um contorno, não um bloco
   branco — que numa tela escura gritaria mais que o botão principal. */
:root[data-tema="escuro"] .botao.claro {
  background: transparent; border-color: var(--linha-forte); color: var(--tinta-2);
}
:root[data-tema="escuro"] .botao.claro:hover {
  background: var(--marca-fraca); border-color: var(--marca); color: var(--marca);
}

/* Tabela: a listra zebrada do claro fica pesada; aqui basta um véu. */
:root[data-tema="escuro"] .tabela tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
:root[data-tema="escuro"] .tabela thead th { background: var(--papel-3); color: var(--tinta-2); }

/* ------------------------------------------------- o número protagonista

   É o gesto mais forte da referência: o dado ocupa a tela, e o rótulo vira
   legenda. Um painel de operação existe para ser lido de longe — de pé, no
   corredor da loja, com o celular na mão. */

:root[data-tema="escuro"] .numero {
  padding: 1.15rem 1.2rem;
  background: linear-gradient(160deg, var(--papel-3) 0%, var(--branco) 62%);
}
:root[data-tema="escuro"] .numero .rotulo {
  font-size: .68rem; letter-spacing: .1em; color: var(--tinta-3);
}
:root[data-tema="escuro"] .numero .valor {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.045em;
  /* Dígito de largura fixa: sem isto a coluna de números dança a cada
     atualização, e num painel que recarrega sozinho isso é visível. */
  font-variant-numeric: tabular-nums;
}
/* O acento pinta o que EXIGE alguém — nunca o que está em ordem. É a mesma
   regra do tema claro, e é o que faz uma tela cheia de números ter um único
   ponto brilhante. */
:root[data-tema="escuro"] .numero.alerta .valor { color: var(--marca); }
:root[data-tema="escuro"] .numero.ruim .valor { color: var(--vermelho); }
:root[data-tema="escuro"] .numero.bom .valor { color: var(--cumprido); }

/* ------------------------------------------------------------- a lateral */

:root[data-tema="escuro"] .lateral { background: var(--nucleo); }
:root[data-tema="escuro"] .menu a.ativo {
  background: var(--marca-fraca);
  color: var(--marca);
  /* O traço de luz na borda: marca o item ativo sem encher de cor. */
  box-shadow: inset 2px 0 0 var(--marca);
}
:root[data-tema="escuro"] .menu a:hover { background: rgba(255, 255, 255, .05); }

/* ------------------------------------------------------- avisos e faixas */

:root[data-tema="escuro"] .aviso-caixa.cinza { background: var(--papel-3); }
:root[data-tema="escuro"] .aviso-caixa.laranja { background: var(--amarelo-claro); }
:root[data-tema="escuro"] .aviso-caixa.vermelho { background: var(--vermelho-claro); }
:root[data-tema="escuro"] .aviso-caixa.ciano { background: var(--cumprido-claro); }

/* ⚠️ Dois lugares onde o claro usa `color:#fff` sobre um fundo que aqui MUDA
   de luminância — e branco sobre cor clara é texto que some. Achados olhando
   a tela, não lendo o CSS:

   · o aviso flutuante usa `--tinta` como FUNDO, e no escuro a tinta é o creme
     claro: seria branco sobre creme;
   · o dia da semana selecionado usa `--marinho`, que aqui virou âmbar — e o
     próprio CSS já avisa que branco sobre âmbar dá 2,4:1. */
:root[data-tema="escuro"] .aviso { background: var(--papel-3); color: var(--tinta); border: 1px solid var(--linha-forte); }
:root[data-tema="escuro"] .dias label:has(input:checked) { color: var(--sobre-marca); }

/* ------------------------------------------------- a trilha do "Meu dia"

   Dois elementos que se apagaram no escuro, e os dois pelo mesmo motivo: no
   claro eles se destacavam por serem ESCUROS sobre papel.

   · o balão "COMECE POR AQUI" usa `--nucleo` (quase preto), e no escuro ele
     desapareceu contra o fundo — justo o elemento cuja única função é dizer
     por onde começar;
   · a barra do dia usa `--linha` como trilho, que aqui é escuro demais para
     mostrar que existe uma barra a ser preenchida. Barra de progresso vazia
     precisa parecer vazia, e não ausente. */
:root[data-tema="escuro"] .passo .balao {
  background: var(--marca-solida); color: var(--sobre-marca);
}
:root[data-tema="escuro"] .passo .balao::after { border-top-color: var(--marca-solida); }
:root[data-tema="escuro"] .faixa-progresso { background: var(--papel-3); }

/* A foto da evidência sobre fundo escuro precisa de moldura — sem ela, a
   borda branca de uma foto de vitrine se confunde com a superfície. */
:root[data-tema="escuro"] .evidencia img,
:root[data-tema="escuro"] .evidencia video {
  background: var(--nucleo-2);
  border: 1px solid var(--linha);
}

/* ---------------------------------------------- a escolha de aparência

   Vale nos DOIS temas — por isso não está sob `[data-tema]`. É a lista do
   menu da conta, onde a escolha aparece escrita por extenso; o ícone da
   lateral é só o atalho de quem já sabe que ela existe. */

.escolha-tema { display: grid; gap: .3rem; }
.escolha-tema .botao.g {
  justify-content: space-between; align-items: center; gap: .6rem;
  padding-top: .55rem; padding-bottom: .55rem;
}
.escolha-tema .botao.g small { display: block; font-size: .72rem; font-weight: 500; }
/* A escolhida se marca pela BORDA e pelo ícone, não por fundo cheio: com
   fundo, as três viram um bloco só de cor e some qual está ativa. */
.escolha-tema .botao.escolhida {
  border-color: var(--marca); color: var(--marca);
}
.escolha-tema .botao.escolhida small { color: var(--marca); opacity: .85; }

/* ------------------------------------------------------------ o botão de tema */

.botao-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--escuro-linha); border-radius: 999px;
  background: transparent; color: var(--escuro-texto-2);
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.botao-tema:hover { color: var(--marca-viva); border-color: var(--marca-viva); background: rgba(255, 255, 255, .06); }
.botao-tema svg { width: 15px; height: 15px; }

/* ⚠️ Impressão SEMPRE clara. Relatório impresso em tema escuro gasta o
   cartucho inteiro e sai ilegível — e a tela de Relatórios tem botão de
   imprimir. Aqui o tema é desfeito na marra. */
@media print {
  :root[data-tema="escuro"] {
    --fundo: #fff; --branco: #fff; --papel-2: #F3EFEA; --papel-3: #EAE5DE;
    --tinta: #272C38; --tinta-2: #565D6D; --tinta-3: #666E7E;
    --linha: #E1DBD3; --linha-forte: #CBC3B9;
  }
  :root[data-tema="escuro"] body { background: #fff; color: #272C38; }
  .botao-tema { display: none; }
}