/* =====================================================================
   TEMA CONSTRUA — a camada de marca do portal, num arquivo só.
   [CONSTRUA 2026-08-24] Cópia do tema da base ("v2 clean", 15/08) com a
   abertura adaptada ao logotipo da ConstruA. Cores vêm de config (marca_cor
   #12336b / marca_acento #c1352a), lidas pelo portal_base.php.

   Como funciona: cada tela do portal ainda carrega o <style> herdado da
   Piatã. Este arquivo entra DEPOIS dele, no <head>, e sobrepõe o que é
   marca — tarja, cor, logotipo, superfície. Nenhuma tela precisa ser
   reescrita para mudar de cara, e cliente novo troca ESTE arquivo.

   Ordem importa: o <link> tem de vir depois do <style> da tela.

   Logotipo oficial: Projetos_JP/ConstruA/Logo/Logo ConstruA2.png (azul
   #12336b e vermelho #ed3237; o acento do portal é o tijolo #c1352a do site).

   A leitura visual: a tarja é BRANCA e quem carrega a marca é o logotipo.
   Azul só onde decide alguma coisa — ícone, número, ação. Ver
   DESIGN_SYSTEM.md §1 e §4.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS — SAÍRAM DAQUI EM 16/08/2026

   Este arquivo tinha um bloco `:root` com 19 tokens (marca, superfície,
   texto, sombra, altura de tarja). Como ele é o ÚLTIMO do <head>, vencia
   tudo — inclusive o `--brand` que `estoque` e `parceiros` liam de
   `cfg('marca_cor')`. Resultado: a config existia e não valia nada, e a
   tarja compacta do celular (52/56px, declarada em @media no <style> de
   três telas) era sobreposta pelos 64px daqui em qualquer largura.

   Agora os valores nascem em `portal_base.php`, de `config`, ANTES do
   <style> da tela. Este arquivo voltou ao que a regra sempre disse que
   ele era: a camada de APARÊNCIA — as sobreposições !important que dão
   a cara da marca ao CSS herdado da Piatã.

   Cliente novo troca o REGISTRO `config.marca_cor`, não este arquivo.
   O que ainda justifica um tema por cliente é o que não cabe num token:
   logotipo, tarja clara vs. escura, tratamento de superfície.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2. TARJA — topo e rodapé claros, logotipo colorido
   --------------------------------------------------------------- */
header{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}
.hdr-logo{filter:none !important}
.hdr-logo img{height:34px !important}

#buscaGlobal{
  height:40px !important;border-radius:10px !important;
  background:#f2f4f8 !important;border:1px solid var(--border) !important;color:var(--text) !important;
}
#buscaGlobal::placeholder{color:var(--text-3) !important}
#buscaGlobal:focus{background:#fff !important;border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.10) !important}
.hdr-search > .material-icons{color:var(--text-3) !important}
.hdr-kbd{background:#fff !important;border:1px solid var(--border) !important;color:var(--text-3) !important}

.hdr-btn,.sino-btn,.hdr-menu-btn{
  width:40px !important;height:40px !important;border-radius:10px !important;
  background:#fff !important;border:1px solid var(--border) !important;color:var(--brand) !important;
}
.hdr-btn:hover,.sino-btn:hover{background:#f2f4f8 !important}
.hdr-user{background:#f6f8fb !important;border:1px solid var(--border) !important;color:var(--brand) !important}
.hdr-user .av{background:var(--brand) !important}
.sino-badge{box-shadow:0 0 0 2px #fff !important}

footer{
  background:var(--surface) !important;color:var(--text-2) !important;
  border-top:1px solid var(--border) !important;box-shadow:none !important;
}
.footer-user{color:var(--brand) !important}
.footer-btn{background:#f2f4f8 !important;border:1px solid var(--border) !important;color:var(--brand) !important}
.footer-btn:hover{background:#e9edf4 !important;transform:none !important}

/* ---------------------------------------------------------------
   2b. TARJA DAS TELAS INTERNAS
   Estoque, Busca, Editor, Não autorizado e Configurações herdaram da
   Piatã um topo com gradiente, linha de "scan" animada, brilho radial e
   título branco com sombra. Sobre tarja clara nada disso funciona: o
   efeito sai, o título vira azul da marca e os tracinhos ficam cinza.
   --------------------------------------------------------------- */
header::before,header::after{content:none !important}
.header-title{color:var(--brand) !important;text-shadow:none !important}
.header-title .material-icons{filter:none !important;color:var(--accent) !important}
.header-title::before{background:linear-gradient(90deg,transparent,var(--border)) !important}
.header-title::after{background:linear-gradient(-90deg,transparent,var(--border)) !important}

/* ações do topo (o "Home" de Configurações) */
.header-actions a{
  background:#f2f4f8 !important;color:var(--brand) !important;
  border:1px solid var(--border) !important;
}
.header-actions a:hover{background:#e9edf4 !important}

/* rodapé dessas telas: o logotipo era pintado de branco à força
   (filter:brightness(0) invert(1)) para caber na tarja azul */
footer img{filter:none !important;opacity:1 !important}
footer span{color:var(--text-2) !important}

/* ---------------------------------------------------------------
   3. SUPERFÍCIE — uma linha só, sombra quase nula
   --------------------------------------------------------------- */
.card,.rail-icos,.rail-painel{
  border-color:var(--border) !important;
  box-shadow:var(--sh) !important;
}
.rail-ico.on{background:rgba(var(--brand-rgb),.07) !important;color:var(--brand) !important}
.rail-ico:hover{background:#f3f5f9 !important}
.nav-link:hover{background:#f3f5f9 !important}
.nav-link:hover .nav-ico{background:rgba(var(--brand-rgb),.10) !important}
.acao-btn:hover{background:#f3f5f9 !important;border-color:#dfe4ec !important}
.ponto{background:var(--surface) !important}
.ponto-hora{color:var(--brand) !important}
.comp-publicar{background:var(--brand) !important;box-shadow:none !important}
.comp-publicar:hover{background:var(--brand-light) !important}
.composer-input:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12) !important}

/* ---------------------------------------------------------------
   4. ABERTURA — só pinta onde o bloco .ab existe (a home)

   [CONSTRUA 2026-08-24] A casa se constrói: 13 tijolos assentados um a um
   (fiada de baixo primeiro), o telhado desce, a colher encaixa, a câmera
   recua e o nome desliza de trás da casa; no fim o PNG oficial entra por
   cima (pixel a pixel no arquivo). Geometria: casa_paths.json, gerado por
   arquivos/20260824b_abertura_casa/vetorizar_casa.py; este CSS sai do
   cena_casa.py da mesma pasta — mexer nos tempos lá e regenerar.

   ⚠️ A cena NÃO toca em nada da página (regra da base).
   ⚠️ Toda propriedade animada aparece no keyframe 0%: declarada só no
   100%, ela interpola desde o começo.
   ⚠️ Cor de marca aqui é a do LOGOTIPO (medida no PNG), não o token do
   portal: a cena termina no arquivo oficial e tem de bater com ele.
   --------------------------------------------------------------- */
:root{ --ab-pano:#ffffff }

.ab{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:var(--ab-pano);pointer-events:none;
  animation:abPano .34s ease 2.45s both;
}
@keyframes abPano{ from{opacity:1} to{ opacity:0;visibility:hidden } }
html.ab-pular .ab{display:none}

.ab-sim{
  width:min(520px,86vw);height:auto;overflow:visible;
  animation:abEntra .30s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes abEntra{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }

/* a câmera abre fechada na casa e recua para revelar o logotipo inteiro */
.ab-camera{
  transform-box:view-box;transform-origin:0 0;
  animation:abCam .60s cubic-bezier(.3,.75,.25,1) 1.55s both;
}
@keyframes abCam{
  from{transform:translate(-1608.2px,-151.8px) scale(2.30)}
  to  {transform:translate(0px,0px) scale(1)}
}

/* cores da casa: as do PNG oficial */
.ab-tijolo{fill:#ed3237}
.ab-teto{fill:#2e549b}
.ab-parede{fill:#3e4095;stroke:#3e4095;stroke-width:1}   /* stroke: cobre a costura de meio pixel com o telhado */
.ab-janela{fill:var(--ab-pano)}
.ab-lamina{fill:var(--ab-pano);stroke:#2e549b;stroke-width:2.4;stroke-linejoin:round}

/* tijolo: cai uns pixels e assenta, um de cada vez (--d vem do HTML, na ordem de assentar) */
.ab-tijolo{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:abTijolo .26s cubic-bezier(.2,.9,.3,1.25) var(--d) both,
            abSurge .01s steps(1,end) var(--d) both;
}
@keyframes abTijolo{
  from{transform:translateY(-12px) scale(.55)}
  to  {transform:none}
}
/* aparecer é de uma vez, nunca fade: tijolo a meia opacidade sobre o pano vira rosa */
@keyframes abSurge{ from{opacity:0} to{opacity:1} }

/* telhado (com a parede e a janela): desce e assenta */
.ab-telhado{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:abTelhado .45s cubic-bezier(.2,.9,.3,1.12) 1.02s both,
            abSurge .01s steps(1,end) 1.02s both;
}
@keyframes abTelhado{
  from{transform:translateY(-40px)}
  to  {transform:none}
}

/* a colher entra pelo canto de baixo, girando pelo cabo, e encaixa */
.ab-lamina{
  transform-box:fill-box;transform-origin:20% 100%;
  animation:abColher .42s cubic-bezier(.25,.85,.3,1.1) 1.30s both,
            abSurge .01s steps(1,end) 1.30s both;
}
@keyframes abColher{
  from{transform:translate(-34px,38px) rotate(-24deg)}
  to  {transform:none}
}

/* o nome entra depois, deslizando de trás da casa */
.ab-texto{
  transform-box:view-box;transform-origin:0 0;
  animation:abNome .46s cubic-bezier(.2,.8,.3,1) 1.65s both;
}
@keyframes abNome{
  from{opacity:0;transform:translateX(150px)}
  to  {opacity:1;transform:translateX(0)}
}

/* o arquivo oficial fecha a cena por cima: o último quadro É o logotipo */
.ab-final{animation:abFinal .25s ease 2.12s both}
@keyframes abFinal{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion:reduce){ .ab{display:none} }
