/* tc-tema-cel.css - tema claro/escuro ImaginaTech (portado de css-previews/ambiente-claro/_base em 28/10/2026, batelada 0 F-FUNDACAO).
   Botao de tema do celular (<= 820 px): M1 = bolha/5a aba do trilho (.tema-cel-m1); M2 faixa; M3 flutuante.
   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-cel{display:none}
.tema-cel .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:820px){
  .tema-cel button,button.tema-cel{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tema-cel svg{display:block;width:20px;height:20px;flex:none}
  .tema-cel :focus-visible,button.tema-cel:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px}
  .tema-cel .ico-sol,html[data-tema="escuro"] .tema-cel .ico-lua{display:none}
  html[data-tema="escuro"] .tema-cel .ico-sol{display:block}
  /* M1: bolha acima do WhatsApp (site/home) - 50 px, mesma familia das bolhas; no painel vira a 5a aba do trilho */
  .dock .dk-bolhas .tema-cel-m1{display:grid;place-items:center;width:50px;height:50px;min-width:0;min-height:0;padding:0;border-radius:50%;background:var(--sup-1);color:var(--txt)}
  .dock .dk-bolhas .tema-cel-m1 .tema-cel-rot{display:none}
  .trilho nav .tema-cel-m1{display:flex;font:700 var(--fs-xs)/1 var(--disp);background:transparent;color:var(--txt-3);border-radius:var(--r-xl);box-shadow:none}
  .trilho nav .tema-cel-m1:hover{background:var(--sup-2);color:var(--txt)}
  /* M2: faixa com texto no fim da pagina */
  .tema-cel-m2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);max-width:var(--max,1180px);margin:var(--sp-6) auto 0;padding:var(--sp-3) var(--sp-4);background:var(--sup-1);border-radius:var(--r-xl);box-shadow:var(--sombra-1);color:var(--txt)}
  .tema-cel-m2 .tema-cel-tit{font:700 var(--fs-denso,.9375rem)/1.2 var(--disp,inherit)}
  .tema-cel-m2 .tema-cel-grp{display:inline-flex;background:var(--sup-2);border-radius:var(--r-pill)}
  .tema-cel-m2 .tema-cel-grp button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-pill);background:transparent;color:var(--txt-3);font-weight:700;font-size:var(--fs-denso,.9375rem)}
  .tema-cel-m2 .tema-cel-grp button[aria-pressed="true"]{background:var(--sup-1);color:var(--acc-ink);box-shadow:var(--sombra-1)}
  body.painel .tema-cel-m2{margin:var(--sp-4) var(--sp-3) calc(96px + env(safe-area-inset-bottom,0px))}
  @media (max-width:360px){.tema-cel-m2 .tema-cel-grp button{padding:0 var(--sp-3)}}
  /* M3: botao flutuante redondo de 44 px, canto direito, acima da bolha do WhatsApp / do trilho */
  .tema-cel-m3{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:calc(var(--z-nav,100) + 5);display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:var(--sup-1);color:var(--txt);box-shadow:var(--sombra-2)}
  body.painel .tema-cel-m3{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}