/* ── CLARO E ESCURO (14/10/2026) ──
   "Claro" e o desenho de sempre: o azul do site com as folhas creme por
   cima. "Escuro" e tudo no azul: as folhas viram cartoes azuis, com o texto
   claro e o bronze no dourado do site. O Eduardo viu as duas versoes no
   modelo da area do cliente (12/10/2026) e, ao comparar com um desenho
   suavizado, preferiu "o original [...] com o botao de escuro e claro".

   A pagina abre no claro; a escolha fica guardada no navegador (chave
   "tema"). O atributo data-tema no <html> e posto por um script curto no
   <head> (base.njk e index.html), antes de a pagina aparecer, para nao
   piscar o claro ao abrir no escuro. O clique e tratado em /js/tema.js.

   A troca e quase toda de variaveis: as folhas ja sao desenhadas com elas
   (styles.css, "O DESENHO NOVO: A BASE COMUM", e cidades.css, .or.ar). O
   que vem depois sao as cores que estavam escritas direto no CSS das
   folhas. As artes do Instagram e a pagina do LinkedIn nao usam o base.njk
   e ficam fora. */

/* ════ O BOTAO ════
   Um circulo com fio dourado, do tamanho da lupa. A lua aparece no claro (o
   clique leva ao escuro) e o sol no escuro; a troca gira e esmaece o
   desenho. */
.nav-tema{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin-right:4px;border:1px solid rgba(255,207,121,.28);border-radius:50%;background:rgba(255,255,255,.04);color:var(--gold);cursor:pointer;transition:border-color .25s,background .25s}
.nav-tema:hover,.nav-tema:focus-visible{border-color:rgba(255,207,121,.65);background:rgba(255,207,121,.08);outline:none}
.nav-tema svg{position:absolute;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.nav-tema-sol{opacity:0;transform:rotate(-90deg) scale(.5)}
.nav-tema-lua{opacity:1;transform:none}
html[data-tema="escuro"] .nav-tema-lua{opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-tema="escuro"] .nav-tema-sol{opacity:1;transform:none}
/* No celular, so o desenho, como a lupa ao lado: o circulo apertava a logo. */
@media(max-width:900px){
  .nav-tema{width:42px;height:42px;margin-right:0;border-color:transparent;background:none}
  .nav-tema svg{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){.nav-tema svg{transition:none}}

/* ════ ESCURO: AS VARIAVEIS ════
   Duas vezes: na raiz (pagina inicial, areas, blog, noticias, privacidade)
   e no .or.ar (Orientacoes, cidades, frentes, busca, Seu Caso), que redefine
   as mesmas variaveis no proprio <main>. */
html[data-tema="escuro"]{
  color-scheme:dark;
  --creme-folha:#14233f;
  --ios-cartao:#1b2b4c;
  --ios-linha:rgba(255,255,255,.1);
  --ios-texto:#f3eee4;
  --ios-cinza:#aeb7c7;
  --texto-folha:#c5ccd8;
  --tinta:#f3eee4;
  --bronze:#ebb46e;
  --bronze-fio:rgba(235,180,110,.45);
  --sombra-folha:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,207,121,.22),0 40px 80px -40px rgba(0,0,0,.8);
}
html[data-tema="escuro"] .or.ar{
  --creme:#14233f;
  --faixa-clara:linear-gradient(180deg,#14233f 0%,#0f1a31 100%);
  --creme-cartao:#1b2b4c;
  --tinta:#f3eee4;
  --tinta-suave:#c5ccd8;
  --bronze:#ebb46e;
  --bronze-fio:rgba(235,180,110,.45);
  --linha-clara:rgba(255,255,255,.13);
  --fio-prazo:#c9a067;
  --fontes:#a3acbd;
  --ios-cartao:#1b2b4c;
  --ios-linha:rgba(255,255,255,.1);
  --ios-texto:#f3eee4;
  --ios-cinza:#aeb7c7;
  --texto-folha:#c5ccd8;
  --creme-folha:#14233f;
}

/* ════ ESCURO: O QUE ESTAVA ESCRITO DIRETO ════ */

/* A folha das Orientacoes e das paginas por cidade pinta o fundo com a cor
   escrita (#f4eee3), e nao com a variavel. */
html[data-tema="escuro"] .or.ar.ar--ios .ar-faixa--clara > .or-wrap{
  background:var(--faixa-clara);
  box-shadow:var(--sombra-folha);
}
html[data-tema="escuro"] .or.ar .cd-local{background:var(--faixa-clara);box-shadow:var(--sombra-folha)}
html[data-tema="escuro"] .or.ar .cd-local-tipo{color:var(--bronze)}
html[data-tema="escuro"] .or.ar .cd-local-nome{color:var(--tinta)}

/* O que acendia em branco ao passar o mouse acende no azul do cartao. */
html[data-tema="escuro"] .inicio .value-item:hover,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .or-sit:hover,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .or-item:hover,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .as-cartao:hover,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .bu-res:hover,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .etiquetas-assunto .etiqueta:hover,
html[data-tema="escuro"] .post-desenho .etiquetas-assunto .etiqueta:hover,
html[data-tema="escuro"] .pp .pp-card:hover,
html[data-tema="escuro"] .inicio .contact .insta-escritorio:hover,
html[data-tema="escuro"] .inicio .contact .insta-escritorio:focus-visible{background:#243865}

/* As setas das listas, em cinza claro. */
html[data-tema="escuro"] .inicio .sc-sit a::after,
html[data-tema="escuro"] .ad .ad-leituras .prob a::after,
html[data-tema="escuro"] .or.ar .ar-faixa--clara .bu-grupo summary::after{color:#8f9ab0}

/* Os campos brancos (busca do inicio, formulario de contato, busca do site,
   modelos de carta) ficam no azul mais fundo. */
html[data-tema="escuro"] .inicio .sc-caixa{background:#0f1a31;border-color:rgba(255,255,255,.14);box-shadow:none}
html[data-tema="escuro"] .inicio .sc-campo::placeholder,
html[data-tema="escuro"] .inicio .form-input::placeholder{color:#8f9ab0}
html[data-tema="escuro"] .inicio .form-input,
html[data-tema="escuro"] .inicio .form-select,
html[data-tema="escuro"] .inicio .form-input:focus,
html[data-tema="escuro"] .inicio .form-select:focus{background-color:#0f1a31}
html[data-tema="escuro"] .inicio .form-select option{background:#0f1a31;color:var(--ios-texto)}

/* A nota de atencao: o pessego fica translucido, e o negrito, que era
   marrom, vai para o dourado. */
html[data-tema="escuro"] .or.ar .ar-faixa--clara .or-nota{background:rgba(235,158,110,.12)}
html[data-tema="escuro"] .or.ar .ar-faixa--clara .or-nota strong,
html[data-tema="escuro"] .pp .pp-note strong{color:#ffcf79}
html[data-tema="escuro"] .pp .pp-note{background:rgba(235,158,110,.12)}
html[data-tema="escuro"] .or.ar .ar-faixa--clara .md-campo{color:#ffcf79;background:rgba(235,158,110,.14)}

/* As etiquetas em capsula ("Fora da cidade", "Frente principal") e os
   links dos prazos, que tinham o marrom escrito direto. */
html[data-tema="escuro"] .or.ar.ar--ios .ar-faixa--clara .cd-rota-fora,
html[data-tema="escuro"] .or.ar .ar-lista .ar-item-texto b span.ar-etiqueta{color:#ffcf79;background:rgba(235,158,110,.14)}
html[data-tema="escuro"] .or.ar.ar--ios .ar-faixa--clara .or-body .ar-prazo a,
html[data-tema="escuro"] .or.ar .ar-lista--clara a.ar-item:hover b{color:var(--bronze)}
html[data-tema="escuro"] .or.ar .ar-lista--clara a.ar-item::after{color:#8f9ab0}

/* Os modelos de carta: o papel branco vira um cartao azul, com os campos a
   preencher em dourado. */
html[data-tema="escuro"] .or.ar .ar-faixa--clara .md-folha{background:#172744;box-shadow:0 0 0 1px rgba(255,255,255,.08)}