/* O modo noturno do site: a mesma paleta do sistema (src/app/globals.css).
   O atributo data-tema vai no <html>, antes de pintar a página (script no <head>
   de cada página), e a escolha fica no navegador. O padrão é o claro. */
:root {
  --fundo-app: #F7F9F8;
  --borda-cartao: #E8EEEB;
  --fundo-botao: var(--marca);
  --fundo-botao-forte: var(--marca-forte);
  --sobre-botao: var(--branco);
  --fundo-contador: #A52018;
  --topo-fundo: rgba(255, 255, 255, .92);
  --grade: rgba(24, 33, 29, .07);
  --barra-1: #225945;
  --barra-2: #2A745E;
  --barra-3: #39A58A;
}
html[data-tema="escuro"] {
  color-scheme: dark;
  --folha-1: #2A745E; --folha-2: #39A58A; --folha-3: #5CCBAE;
  --fundo: #0B0F0D;
  --fundo-alt: #141C18;
  --cartao: #141C18;
  --tinta: #F1F5F3;
  --tinta-2: #C5D0CA;
  --tinta-3: #A3B1AA;
  --linha: #26322C;
  --linha-forte: #33423A;
  --marca: #00FF94;
  --destaque: #00FF94;
  --marca-forte: #4DFFB4;
  --marca-suave: #0E3B29;
  --atrasado: #FF9C8F;  --atrasado-fundo: #3D1B18;
  --proximo: #EEBC66;   --proximo-fundo: #33270F;
  --em-dia: #00FF94;    --em-dia-fundo: #0E3B29;
  --fundo-app: #0B0F0D;
  --borda-cartao: #26322C;
  --fundo-botao: #00FF94;
  --fundo-botao-forte: #4DFFB4;
  --sobre-botao: #06140D;
  --marca-clara: #00FF94;
  --topo-fundo: rgba(11, 15, 13, .92);
  --grade: rgba(255, 255, 255, .05);
  --barra-1: #00A860;
  --barra-2: #00D67C;
  --barra-3: #00FF94;
}
/* As folhas de papel continuam papel: são a página do dossiê, branca no PDF. */
html[data-tema="escuro"] .papel {
  color-scheme: light;
  --fundo: #FFFFFF; --fundo-alt: #F3F7F5; --cartao: #FFFFFF;
  --tinta: #233029; --tinta-2: #3A4842; --tinta-3: #5F6D66;
  --linha: #DCE5E0; --linha-forte: #C9D6CF;
  --marca: #225945; --destaque: #2A745E; --marca-suave: #E2F0EA;
  --folha-1: #225945; --folha-2: #2A745E; --folha-3: #39A58A;
  --em-dia: #225945; --em-dia-fundo: #E2F0EA;
}
html[data-tema="escuro"] .rodape { border-top: 1px solid var(--linha); }
html[data-tema="escuro"] .chamada { background: var(--cartao); }

.botao-tema {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-left: auto; padding: 0;
  border: 1px solid var(--borda-cartao); border-radius: 12px;
  background: var(--cartao); color: var(--tinta-2); cursor: pointer;
}
.botao-tema:hover { color: var(--destaque); }
.botao-tema svg { width: 20px; height: 20px; }
.topo .botao-tema ~ .entrar { margin-left: 0; }
.so-tema-escuro { display: none; }
html[data-tema="escuro"] .so-tema-claro { display: none; }
html[data-tema="escuro"] .so-tema-escuro { display: block; }