/* ============================================================================
   TEMA DIA / NOITE / AUTOMÁTICO — site público da Trèsol
   Mesmo padrão dos painéis Trèsol (tresol-paineis/packages/ui/src/estilos.css):
   chave "tresol-tema" no navegador; Automático = claro das 6h às 18h.
   A versão Dia é o site como sempre foi. Este arquivo só define a versão Noite
   (quando <html data-theme="dark">) e o visual do seletor.
   ========================================================================== */

/* ---- Versão Noite: troca as cores de superfície e texto ------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;                 /* campos de formulário e barras de rolagem escuros */
  --branco: #111a33;                  /* superfície (cards, cabeçalho, corpo) */
  --fundo: #0a1022;                   /* fundo das seções cinzas */
  --fundo-2: #16203d;                 /* fundo de fotos enquanto carregam, divisórias */
  --borda: #25325c;
  --texto: #c9d3ea;
  --texto-suave: #95a3c7;
  --titulo: #eef2fb;
  --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  --sombra-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
}

/* Links de texto corrido (sem classe) em azul claro; botões e links com classe
   própria mantêm as cores originais */
:root[data-theme="dark"] a:not([class]) { color: #8fb4f5; }
:root[data-theme="dark"] a:not([class]):hover { color: #eef2fb; }
/* Barra superior, rodapé e trilha já são escuros nas duas versões: mantêm o branco */
:root[data-theme="dark"] .topbar a,
:root[data-theme="dark"] .migalha a { color: #fff; }
:root[data-theme="dark"] .rodape a { color: #e3e9f7; }

/* Cabeçalho fixo: era branco translúcido */
:root[data-theme="dark"] .cabecalho { background: rgba(17, 26, 51, 0.97); }

/* Textos que usavam o azul-marinho como "cor escura" sobre fundo claro */
:root[data-theme="dark"] .menu a:not(.btn),
:root[data-theme="dark"] .menu-botao,
:root[data-theme="dark"] .projeto__local,
:root[data-theme="dark"] .projeto__dados dd,
:root[data-theme="dark"] .filtros button,
:root[data-theme="dark"] .campo label,
:root[data-theme="dark"] .campo input,
:root[data-theme="dark"] .campo select,
:root[data-theme="dark"] .campo textarea,
:root[data-theme="dark"] .formulario h3,
:root[data-theme="dark"] .escuro .formulario h3,
:root[data-theme="dark"] .autor strong,
:root[data-theme="dark"] .etapas__cta p,
:root[data-theme="dark"] .cta-meio p,
:root[data-theme="dark"] .solucao__cta,
:root[data-theme="dark"] .barra-acao__item,
:root[data-theme="dark"] .artigo h2,
:root[data-theme="dark"] .artigo h3 {
  color: var(--titulo);
}
:root[data-theme="dark"] .menu a:not(.btn):hover,
:root[data-theme="dark"] .menu a[aria-current="page"] { color: #8fb4f5; }

/* Botão de contorno azul-marinho (menu do celular) */
:root[data-theme="dark"] .btn--contorno-navy { border-color: #8fb4f5; color: #eef2fb; }
:root[data-theme="dark"] .btn--contorno-navy:hover { background: #8fb4f5; color: #0a1022; }
:root[data-theme="dark"] .menu .menu__extra .btn { border-color: #8fb4f5; }

/* Linhas das etapas e ícones que eram azul-marinho sobre branco */
:root[data-theme="dark"] .etapas,
:root[data-theme="dark"] .etapa { border-color: #3b4d85; }
:root[data-theme="dark"] .solucao__icone,
:root[data-theme="dark"] .autor__inicial { background: var(--navy-700); }
:root[data-theme="dark"] .solucao__cta:hover { background: #1c2e10; color: #eef2fb; }

/* Caixas amarelas claras dos artigos */
:root[data-theme="dark"] .atualizacao { background: #36230e; border-color: #6b4a14; color: #f2d9a6; }
:root[data-theme="dark"] .atualizacao strong:first-child { color: var(--amarelo); }
:root[data-theme="dark"] .artigo tr.agora td { background: #3a2f0a; color: #fff; }

/* ---- Seletor Dia / Noite / Automático (mesmo desenho dos painéis) -------- */
.tema {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #3253a0;
  box-shadow: 0 4px 14px rgba(13, 19, 36, 0.28);
  vertical-align: middle;
}
.tema button {
  display: grid;
  place-items: center;
  height: 26px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.tema button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tema button[aria-pressed="true"] { background: #f7c013; color: #16213f; }
.tema button:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.tema svg { width: 15px; height: 15px; }

/* Na barra superior, alinhado aos outros links; a frase da esquerda encurta com
   reticências em vez de quebrar linha quando falta espaço */
.topbar .tema { margin-left: 4px; }
.topbar .container { gap: 16px; }
.topbar__links { flex: none; align-items: center; }
.topbar a { white-space: nowrap; }
.topbar__oculto-mobile { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* No menu do celular: linha "Tema" com o seletor */
.tema-linha {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px !important;
  padding-top: 12px;
  border-top: 1px solid var(--fundo-2);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--texto);
}