/* tc-tema-botao.css - tema claro/escuro ImaginaTech (portado de css-previews/ambiente-claro/_base em 28/10/2026, batelada 0 F-FUNDACAO).
   Botao de tema do PC: grupo sol|lua .tema-pcgrp (V2, so > 820 px) + variantes .tema-bt/.tema-seg/.tema-chave.
   Cor so por token (var(--papel) de tc-tokens.css); nunca escrever hex/rgba aqui (scripts/tema/teste-sem-cor-fixa.js).
   ORDEM dos <link> num painel: identity -> components -> demais /shared -> tc-tokens -> tc-base -> tc-painel -> tc-compat -> [tc-entrada] -> tc-tema-botao -> tc-tema-cel -> CSS LOCAL por ultimo. ?v= igual em todas as paginas. */
.tema-bt,.tema-seg button,.tema-pcgrp button,.tema-chave{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tema-bt .sr,.tema-seg .sr,.tema-pcgrp .sr,.tema-chave .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tema-bt svg,.tema-seg svg,.tema-pcgrp svg,.tema-trilha svg{display:block;width:20px;height:20px;flex:none}
.tema-bt:focus-visible,.tema-seg button:focus-visible,.tema-pcgrp button:focus-visible,.tema-chave:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
/* V1: botao redondo 44px, mostra a lua no claro e o sol no escuro (o icone e o tema para onde vai) */
.tema-bt{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-pill);background:var(--sup-2);color:var(--txt);transition:background var(--dur-1),color var(--dur-1)}
.tema-bt:hover{background:var(--acc-soft);color:var(--acc-ink)}
.tema-bt .ico-sol,html[data-tema="escuro"] .tema-bt .ico-lua{display:none}
html[data-tema="escuro"] .tema-bt .ico-sol{display:block}
/* V2: dois botoes (sol | lua) em um trilho; o do tema ativo fica elevado */
.tema-seg,.tema-pcgrp{display:inline-flex;flex:none;gap:0;padding:0;border-radius:var(--r-pill);background:var(--sup-2)}
.tema-seg button,.tema-pcgrp button{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);background:transparent;color:var(--txt-3);transition:background var(--dur-1),color var(--dur-1)}
.tema-seg button:hover,.tema-pcgrp button:hover{color:var(--txt)}
.tema-seg button[aria-pressed="true"],.tema-pcgrp button[aria-pressed="true"]{background:var(--sup-1);color:var(--acc-ink);box-shadow:var(--sombra-1)}
.tema-v2-mini{display:none}
/* V2 ESCOLHIDA PELO DONO (28/10): so no COMPUTADOR (> 820). No celular o grupo some e a barra de cima fica EXATAMENTE como era (nenhuma regra :has() olha para ele). As alternativas de celular estao em _escolha/seletor-tema-celular/ */
@media (max-width:820px){.tema-pcgrp{display:none}}
/* V3: chave deslizante 64x36 (sol de um lado, lua do outro, pino que desliza); no celular vira so o pino redondo de 44px */
.tema-chave{display:inline-flex;flex:none;align-items:center;min-height:44px;padding:0;background:transparent;border-radius:var(--r-pill)}
.tema-trilha{position:relative;display:flex;align-items:center;justify-content:space-between;width:64px;height:36px;padding:0 9px;border-radius:var(--r-pill);background:var(--sup-3);color:var(--txt-3);transition:background var(--dur-2) var(--ease-padrao)}
.tema-trilha svg{position:relative;z-index:0;width:16px;height:16px}
.tema-pino{position:absolute;z-index:1;top:4px;left:4px;width:28px;height:28px;border-radius:var(--r-pill);background:var(--sup-1);box-shadow:var(--sombra-1);transition:transform var(--dur-2) var(--ease-padrao)}
html[data-tema="escuro"] .tema-pino{transform:translateX(28px)}
html[data-tema="escuro"] .tema-trilha{background:var(--acc-soft)}
@media (max-width:820px){
  .tema-chave .tema-trilha{width:44px;height:44px;padding:0;justify-content:center;background:var(--sup-2)}
  .tema-chave .tema-pino{display:none}
  .tema-chave .ico-sol,html[data-tema="escuro"] .tema-chave .ico-lua{display:none}
  html[data-tema="escuro"] .tema-chave .ico-sol{display:block}
  .tema-chave svg{width:20px;height:20px;color:var(--txt)}
}
@media (prefers-reduced-motion:reduce){.tema-pino,.tema-trilha,.tema-bt{transition:none}}
/* V2 em tela <= 480: os dois botoes (88 px) nao cabem na barra; troca por UM botao de alternar (.tema-v2-mini, V1) por CSS - nenhum botao some ao ser clicado, entao o foco nunca se perde */
@media (max-width:480px){
  .tema-seg{display:none}
  .tema-v2-mini{display:inline-grid}
}
/* telas muito pequenas (<= 360): com o botao de tema na barra, o resto encolhe para caber (regra da casa: esconder texto, manter icone) */
@media (max-width:360px){
  .nav:has(.tema-bt,.tema-seg,.tema-chave) .nav-blog{min-width:44px;padding:0;font-size:0;gap:0}
  .nav:has(.tema-bt,.tema-seg,.tema-chave) .nav-blog i,.nav:has(.tema-bt,.tema-seg,.tema-chave) .nav-blog .ico{font-size:1.1rem}
  .nav:has(.tema-bt,.tema-seg,.tema-chave) .nav-actions{gap:var(--sp-1)}
  .barra-cel:has(.tema-bt,.tema-seg,.tema-chave){padding-left:var(--sp-3);gap:var(--sp-1)}
  .barra-cel:has(.tema-bt,.tema-seg,.tema-chave) .barra-marca .logo{font-size:1rem}
  .barra-cel:has(.tema-bt,.tema-seg,.tema-chave) .barra-bt{min-width:48px;padding:0 2px}
  .barra-cel:has(.tema-bt,.tema-seg,.tema-chave) .conta{padding:0}
}
/* painel em PC estreito (821-1180, corte oficial): com o grupo sol|lua na barra (+88 px) as abas ficam mais justas para tudo caber sem encolher os botoes; so nessa faixa, e so quando o grupo existe */
@media (min-width:821px) and (max-width:1180px){
  .barra-cel:has(.tema-pcgrp) .barra-links a{padding:0 8px}
}