/* =====================================================================
   TEMA ALPACK — a camada de marca do portal, num arquivo só.
   [ALPACK 2026-08-15] Aprovado pelo JP como "v2 clean".

   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.

   Cores oficiais, contadas pixel a pixel nos arquivos originais da marca
   (Projetos_JP/Alpack/arquivos/Logo/Logo_PRINCIPAL.png): azul #011C72
   (43,8% dos pixels) e laranja #FD8204 (2,6%). Os valores antigos
   (#001C71 / #FF8300) vinham de uma exportação do site e ficam para trás.

   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 — DOIS PESOS, ESCOLHIDOS POR PESSOA (30/08/2026)

   ⚠️ Este bloco tinha 25 sobreposições `!important` que clareavam a tarja
   da home à força — era como a decisão de 15/08 ("a tarja é branca e quem
   carrega a marca é o logotipo") foi aplicada sobre o CSS herdado da Piatã,
   que vinha com gradiente escuro.

   O JP pediu em 30/08 que a tarja passasse a ter dois pesos, escolhidos no
   avatar: LEVE (o padrão de todo mundo — clara, logotipo colorido) e PESADA
   (colorida, logotipo branco). Com `!important` aqui, a pesada nunca valeria:
   a escolha da pessoa perderia para a folha de estilo.

   Por isso as regras foram para onde é a casa delas — o `index.php` (que já
   desenha o próprio cabeçalho) e o `padrao_pagina.css` (das telas internas),
   nos dois pesos e sem `!important`. Este arquivo volta a ser só marca.
   --------------------------------------------------------------- */
.hdr-logo img{height:34px}
.hdr-user .av{background:var(--brand)}
html:not([data-tratamento="pesado"]) .sino-badge{box-shadow:0 0 0 2px var(--surface)}

/* ---------------------------------------------------------------
   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.
   --------------------------------------------------------------- */
/* [ALPACK 2026-08-30] Tudo aqui vale só na tarja LEVE. Na pesada a tela volta a ter
   fundo colorido, e clarear o título à força deixaria texto azul sobre azul. */
html:not([data-tratamento="pesado"]) header::before,
html:not([data-tratamento="pesado"]) header::after{content:none !important}
html:not([data-tratamento="pesado"]) .header-title{color:var(--brand-ico) !important;text-shadow:none !important}
html:not([data-tratamento="pesado"]) .header-title .material-icons{filter:none !important;color:var(--accent) !important}
html:not([data-tratamento="pesado"]) .header-title::before{background:linear-gradient(90deg,transparent,var(--border)) !important}
html:not([data-tratamento="pesado"]) .header-title::after{background:linear-gradient(-90deg,transparent,var(--border)) !important}

/* ações do topo (o "Home" de Configurações) */
html:not([data-tratamento="pesado"]) .header-actions a{
  background:var(--surface-2) !important;color:var(--brand-ico) !important;
  border:1px solid var(--border) !important;
}
html:not([data-tratamento="pesado"]) .header-actions a:hover{background:var(--border) !important}

/* [ALPACK 2026-08-31] AS DUAS REGRAS DE RODAPÉ SAÍRAM DAQUI.
   Elas nasceram para as telas internas herdadas da Piatã, que tinham rodapé azul com
   logotipo forçado a branco. Hoje esse rodapé é o `.pg-rodape` do padrao_pagina.css, que
   já define a própria cor e troca o logotipo colorido pelo branco conforme o FUNDO — as
   regras viraram redundantes ali.
   E `footer span` atingia o único footer que NÃO é o padrão: o da HOME, que tem gradiente
   da marca cravado em qualquer tarja. Na tarja leve (o padrão de todo mundo) ela pintava
   de cinza escuro TODOS os spans daquele rodapé — o "Olá, fulano", o nome e, dentro dos
   botões, os `span.material-icons`. Ícone escuro sobre tarja escura = ícone que some.
   Relato do JP em 31/08: "na index o rodapé, no tema que escolhi, os ícones não aparecem".
   Regra de tela mora na tela; o tema fica com a marca. */

/* ---------------------------------------------------------------
   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-ico-rgb),.07) !important;color:var(--brand-ico) !important}
.rail-ico:hover{background:var(--surface-2) !important}
.nav-link:hover{background:var(--surface-2) !important}
.nav-link:hover .nav-ico{background:rgba(var(--brand-ico-rgb),.10) !important}
.acao-btn:hover{background:var(--surface-2) !important;border-color:var(--border-2) !important}
.ponto{background:var(--surface) !important}
.ponto-hora{color:var(--brand-ico) !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-ico-rgb),.12) !important}

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

   A caixa fechada abre, a peça sai, o rasgo fica — e a câmera recua para o
   LOGOTIPO INTEIRO (pedido do JP, 15/08). Caminhos vetorizados do logotipo
   oficial: arquivos/20260815_layout-index/vetorizar_logo_completo.py

   ⚠️ A cena NÃO toca em nada da página. A versão anterior escalonava a
   entrada dos blocos da home e foi isso que derrubou o portal da Piatã no
   mesmo dia (menu e imagens pararam de abrir): o portal mede carrossel e
   menu no load, e medir elemento em movimento dá conta errada.

   ⚠️ Toda propriedade animada aparece no keyframe 0%: declarada só no 100%,
   ela interpola desde o começo (a caixa nascia lavada).
   --------------------------------------------------------------- */
/* 🔷 A ABERTURA É IDENTIDADE DA MARCA, NÃO COR DE TEMA (30/08/2026).
   A caixa lia `var(--brand)`: quando o portal ganhou aparência por pessoa e o padrão
   passou a ser o grafite, a animação abriu metade cinza e metade laranja — a marca
   desmontada na primeira tela que a pessoa vê (achado do JP). O símbolo da Alpack tem
   duas cores, e são estas, em qualquer tema e em qualquer modo.

   [ALPACK 2026-09-24] O PANO TAMBÉM DEIXOU DE SEGUIR O MODO. Ele lia `var(--bg)`, para não
   piscar branco à noite. Só que a caixa é `#011C72` e a peça `#FD8204` em qualquer modo, e
   sobre o grafite do escuro o azul quase sumia — a abertura virava um borrão laranja. Pedido
   do Ricardo: fundo claro sempre, para destacar o logotipo. O clarão de 1,7 s à noite é o
   preço, e foi escolhido de olho aberto. */
:root{ --ab-pano:#ffffff; --ab-caixa:#011C72; --ab-peca-cor:#FD8204 }

.ab{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:var(--ab-pano);pointer-events:none;
  animation:abPano .34s ease 1.66s 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 .40s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes abEntra{ from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none} }

/* a câmera fecha no símbolo e recua para revelar o logotipo inteiro */
.ab-camera{
  transform-box:view-box;transform-origin:0 0;
  animation:abCam .58s cubic-bezier(.3,.75,.25,1) .92s both;
}
@keyframes abCam{
  from{transform:translate(481.7px,-492.4px) scale(2.35)}
  to  {transform:translate(0px,0px) scale(1)}
}

.ab-caixa{fill:var(--ab-caixa)}     /* o trapézio cheio: a caixa fechada */
.ab-rasgo{fill:var(--ab-pano)}      /* o rasgo mostra o fundo, não uma cor própria */
.ab-peca {fill:var(--ab-peca-cor)}

/* origem das animações: o ponto onde a peça ainda encosta na caixa */
.ab-peca,.ab-rasgo{transform-box:view-box;transform-origin:0 0}

.ab-peca{animation:abPuxa .55s cubic-bezier(.34,.7,.24,1) .26s both,
                   abSurge .01s steps(1,end) .38s both}
@keyframes abSurge{ from{opacity:0} to{opacity:1} }
@keyframes abPuxa{
  /* dentro da caixa: encolhida e deslocada, para caber inteira atrás do azul */
  from{transform:translate(471.0px,139.0px) translate(-560px,190px) scale(.42) rotate(-18deg) translate(-471.0px,-139.0px)}
  to  {transform:translate(471.0px,139.0px) rotate(0deg) translate(-471.0px,-139.0px)}
}
.ab-rasgo{animation:abRasga .55s cubic-bezier(.34,.7,.24,1) .26s both}
@keyframes abRasga{
  from{transform:translate(471.0px,139.0px) scale(0) translate(-471.0px,-139.0px)}
  to  {transform:translate(471.0px,139.0px) scale(1) translate(-471.0px,-139.0px)}
}

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

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

/* =====================================================================
   MODO ESCURO — a leva das telas que já estão no padrão (30/08/2026)

   [ALPACK 2026-08-30] O `tema_app.php` troca os tokens (--bg, --surface,
   --text…), e isso basta onde a tela usa token. Só que o CSS herdado da Piatã
   tem 83 cores claras cravadas no `produtos.php` — cartão branco, console
   branco, aba branca. No escuro elas ficavam como estavam: moldura preta com
   miolo branco, que foi o que o JP viu ("no leve escuro também não dá pra ver").

   Este bloco cobre o ESQUELETO das telas que já passaram pelo padrão de página:
   cartão de item, console de busca, abas, barra de ações e modais. Ele vive
   aqui, e não no tema_app.php, por uma razão de ordem: este arquivo é o ÚLTIMO
   do <head>, e é o único ponto de onde se vence um `background:#fff` escrito
   dentro do <style> da tela.

   Tela que ainda não migrou continua clara no escuro — não quebra, só não
   migrou. A regra para migrar é a de sempre: trocar o hex por var(--surface).
   ===================================================================== */
html[data-modo="escuro"]{
  color-scheme:dark;
}
html[data-modo="escuro"] body{background:var(--bg);color:var(--text)}

/* cartão de item, console, abas e caixas em geral */
html[data-modo="escuro"] .item-row,
html[data-modo="escuro"] .item-extra,
html[data-modo="escuro"] .console,
html[data-modo="escuro"] .pg-console,
html[data-modo="escuro"] .tabs,
html[data-modo="escuro"] .tab-btn,
html[data-modo="escuro"] .card,
html[data-modo="escuro"] .painel,
html[data-modo="escuro"] .modal-content,
html[data-modo="escuro"] .modal-caixa,
html[data-modo="escuro"] .modal-bx{
  background:var(--surface);color:var(--text);border-color:var(--border)}

html[data-modo="escuro"] .item-row:hover{background:var(--surface-2)}
html[data-modo="escuro"] .item-thumb{background:var(--surface-2)}

/* campos: fundo mais escuro que a superfície, para o texto branco ter contraste */
html[data-modo="escuro"] input[type="text"],
html[data-modo="escuro"] input[type="search"],
html[data-modo="escuro"] input[type="number"],
html[data-modo="escuro"] input[type="date"],
html[data-modo="escuro"] textarea,
html[data-modo="escuro"] select{
  background:var(--surface-2);color:var(--text);border-color:var(--border)}
html[data-modo="escuro"] ::placeholder{color:var(--text-3)}

/* chips e selos pastel: o fundo claro vira uma lâmina translúcida da própria cor */
html[data-modo="escuro"] .item-chip{background:var(--surface-2);border-color:var(--border);color:var(--text-2)}
html[data-modo="escuro"] .item-chip .material-icons{opacity:.9}
html[data-modo="escuro"] .item-id{background:var(--surface-2);color:var(--text)}