/* GERADO por ferramentas/gerar-temas.js — não editar à mão. Base comum de todos os temas (nunca do Clássico). */
html[data-tema] body{background:var(--tema-fundo);background-attachment:fixed}
/* fonte com especificidade ZERO (:where): a fonte que o DONO escolheu pelo agente (estiloDoSite, carregado depois) vence o tema */
:where(html[data-tema]) body{font-family:var(--tema-fonte)}
:where(html[data-tema]) :is(h1,h2,h3){font-family:var(--tema-fonte-tit);font-weight:var(--tema-peso-tit)}
html[data-tema] .card{border-radius:var(--raio);-webkit-backdrop-filter:var(--tema-blur);backdrop-filter:var(--tema-blur)}
html[data-tema] .btn{border-radius:var(--tema-raio-btn);transition:transform .25s cubic-bezier(.34,1.4,.64,1),background .18s,border-color .18s,box-shadow .2s}
html[data-tema] .btn:hover{transform:translateY(-1px)}
html[data-tema] .btn:active{transform:scale(.97)}
html[data-tema] input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-tema] select,html[data-tema] textarea{background:var(--tema-campo);border-radius:var(--tema-raio-s)}
html[data-tema] .barra-equipe{background:color-mix(in srgb,var(--surface) 88%,transparent)}
html[data-tema] .barra-equipe a{border-radius:var(--tema-raio-s);transition:background .18s,color .18s}
/* TEMA CLARO EM MARCA ESCURA (auditoria 28/10, TECH SOUND): o molde usa o tom CLARO da marca (--vermelho-claro) e o âmbar
   de aviso como cor de TEXTO — pensados para fundo escuro. Sobre fundo claro caíam para 2:1. No modo claro dos temas o
   texto passa para o tom ESCURO da própria marca (a cor continua sendo a do cliente) e o âmbar fica mais firme. */
html[data-tema][data-modo="claro"]{--vermelho-claro:var(--vermelho-esc);--aviso:#7f4a00}
/* e o espelho (UP Café em tema escuro): o "tom claro" de uma marca clara é escuro e sumia no fundo escuro — vira a cor da marca clareada */
html[data-tema][data-modo="escuro"]{--vermelho-claro:color-mix(in oklab,var(--vermelho),#fff 38%);--aviso:#E3A008}
/* "Sair" e o nome de quem entrou: na cor do texto (a cor da marca clareada não passava 4,5:1 sobre o painel escuro do Argila) */
html[data-tema] .barra-equipe .quem a{color:var(--texto)}
html[data-tema] .nav{background:color-mix(in srgb,var(--preto) 82%,transparent)}
html[data-tema] ::selection{background:rgba(var(--marca-rgb),.28)}
/* o conteúdo de cada página ENTRA focando (desfocado → nítido). NÃO usamos a View Transition entre
   documentos (@view-transition): no teste de 28/10 ela congelou a pintura da tela (o print nem saía) —
   numa loja de verdade isso é tela travada. Esta animação é só CSS no <main>: não segura nada. */
html[data-tema] main{animation:tema-entra .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes tema-entra{from{opacity:0;filter:blur(6px);transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){html[data-tema] main{animation:none}html[data-tema] .btn{transition:none}}
/* celular estreito: sem o filtro de desfoque (pesa em aparelho fraco) */
@media (max-width:820px){html[data-tema] main{animation-name:tema-entra-leve}}
@keyframes tema-entra-leve{from{opacity:0;transform:translateY(6px)}}
/* quadro de prévia da tela de Temas (?tema_ver=): só a tela, sem botão flutuante */
html.k-quadro :is(.cp-liga,#chat-bolha,#chat-caixa){display:none!important}
/* aviso da PRÉVIA (só no aparelho de quem está experimentando) */
.tema-previa-faixa{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:9999;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:9px 10px 9px 16px;border-radius:999px;background:#111;color:#fff;font:600 13px system-ui,sans-serif;box-shadow:0 14px 40px rgba(0,0,0,.45);max-width:calc(100vw - 24px)}
.tema-previa-faixa a,.tema-previa-faixa button{border:0;border-radius:999px;padding:6px 12px;font:700 12.5px system-ui,sans-serif;cursor:pointer;background:#fff;color:#111;text-decoration:none}
/* celular: a pílula quebrava em 3 linhas e virava uma bolha no meio da tela, por cima da campainha (Richard, 28/10).
   Lá ela vira uma faixa fina colada no TOPO, numa linha só, e empurra a página para baixo em vez de cobrir. */
@media (max-width:760px){
  .tema-previa-faixa{top:0;bottom:auto;left:0;right:0;translate:none;max-width:none;border-radius:0;flex-wrap:nowrap;justify-content:space-between;
    gap:6px;padding:6px 8px 6px 12px;font-size:12px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  .tema-previa-faixa span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .tema-previa-faixa a,.tema-previa-faixa button{padding:5px 10px;font-size:12px;white-space:nowrap}
  html:has(.tema-previa-faixa) body{padding-top:38px}
}