/* Infinity Ventiladores – encaixe dos efeitos SpecularButton e BorderGlow (public/css/fx/) no site
   Carregada por views/partials/head.ejs depois de site.css, future.css, specular-button.css e border-glow.css
   (o painel /admin tem <head> próprio e não carrega nada disto). Os componentes ficam intactos; aqui só a
   tipografia, as alturas, a paleta da marca e a convivência com os cartões que já tinham efeitos de hover.

   Uso no site:
   - .specular-button: ação principal de cada tela (uma, no máximo duas por vista). --gold para a ação comercial
     (revendedor/lojista/pedido) e --brand para as demais. Nunca junto com .btn/.btn-primary (overflow: hidden e
     ::after do .btn-primary cortam o brilho).
   - [data-border-glow]: cartões do painel do lojista e botões secundários .btn que ficam ao lado de um
     SpecularButton; [data-border-glow-lazy]: cartões de produto (.pcard), montados pelo site.js na primeira
     interação. Sem valor = aproveita fundo, borda e raio do próprio elemento; a paleta vem daqui. */

/* ------------------------------------------------ SpecularButton: tipografia e alturas do site */
/* gap = o do rótulo que o JS cria (.specular-button__label): antes da montagem (e sem JS) o ícone já fica afastado
   do texto, e o botão não cresce 8 px depois da primeira pintura */
.specular-button { font-family: var(--f-head); font-weight: 700; letter-spacing: .01em; gap: .5em; }
/* o rótulo criado pelo JS é um <span>: regras do site para span dentro de um contêiner (ex.: .doc-card span, cinza
   e 13,5 px, no catálogo) não mudam a cor nem o tamanho do texto do botão */
.specular-button > .specular-button__label { color: inherit; font-size: inherit; }
/* --md com a mesma altura dos campos (.input) e a mesma caixa do .btn (48 px, 15 px); --sm e --lg têm 44 e 52 px no mínimo */
.specular-button--md { min-height: 48px; font-size: 15px; }
/* celular: menos respiro lateral, para rótulos longos ("Enviar cadastro para análise") caberem em uma linha */
@media (max-width: 720px) { .specular-button--md { padding-inline: 20px; } }
/* pares da home (.fh-ctas, topo e cartão B2B): o --lg com a caixa do .fh-btn-lg ao lado (54 px e 15,5 px; 50 px e
   15 px até 1024 px), como quando os dois eram .fh-btn-lg */
.fh-ctas .specular-button--lg { min-height: 54px; padding: 0 26px; font-size: 15.5px; }
@media (max-width: 1024px) { .fh-ctas .specular-button--lg { min-height: 50px; padding: 0 18px; font-size: 15px; } }

/* vidro navy: em superfície clara (formulários, cartões, mensagens) fica sólido – a 72% sobre o branco ele vira
   cinza-ardósia – e com sombra curta, como a do .btn-primary (a do componente, feita para o escuro, vira uma mancha
   cinza sob o botão no branco); sobre o escuro (cabeçalho, gaveta, topo e seções da home) volta o vidro original,
   com o blur e a sombra do componente */
.specular-button--brand { --sb-tint-opacity: 1; --sb-shadow: inset 0 1px 0 rgba(127, 227, 242, .08), 0 10px 22px -12px rgba(11, 29, 47, .5); }
.specular-button--gold { --sb-tint-opacity: 1; --sb-shadow: inset 0 1px 0 rgba(231, 211, 164, .1), 0 10px 22px -12px rgba(11, 29, 47, .5); }
:is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--brand { --sb-tint-opacity: .72; --sb-shadow: inset 0 1px 0 rgba(127, 227, 242, .08), 0 10px 28px -6px rgba(5, 11, 20, .55); }
:is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--gold { --sb-tint-opacity: .8; --sb-shadow: inset 0 1px 0 rgba(231, 211, 164, .1), 0 10px 28px -6px rgba(5, 11, 20, .55); }
/* sobre o escuro a ação principal ganha um véu no alto e um traço de base mais visível (ciano no --brand, dourado no
   --gold): sem o ponteiro por perto (celular, teclado, repouso), a borda dela fica pelo menos tão nítida quanto a do
   botão secundário ao lado */
:is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--brand {
  --sb-base: #62b3dc;
  background-image: linear-gradient(180deg, rgba(36, 182, 205, .2), rgba(36, 182, 205, .04) 75%);
}
:is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--gold {
  --sb-base: #a8874a;
  background-image: linear-gradient(180deg, rgba(201, 166, 94, .28), rgba(201, 166, 94, .06) 75%);
}
@media (hover: hover) {
  :is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--brand:hover {
    background-image: linear-gradient(var(--sb-hover), var(--sb-hover)), linear-gradient(180deg, rgba(36, 182, 205, .26), rgba(36, 182, 205, .06) 75%);
  }
  :is(.header, .drawer-panel, .fh-hero, .fh-sec) .specular-button--gold:hover {
    background-image: linear-gradient(var(--sb-hover), var(--sb-hover)), linear-gradient(180deg, rgba(201, 166, 94, .34), rgba(201, 166, 94, .08) 75%);
  }
}

/* cabeçalho (≥ 1280 px, onde aparece): a mesma caixa do antigo .btn-sm (40 px de altura, 12 px de respiro), na
   mesma linha e altura de "Área do lojista", para o menu continuar cabendo */
.header-actions .specular-button--sm { min-height: 40px; padding: 0 12px; }

/* ------------------------------------------------ BorderGlow: paleta da marca */
/* sem variante (data-border-glow sem valor), o efeito usa o fundo do próprio elemento; as cores vêm daqui:
   escuro = azul/ciano/dourado com brilho ciano; claro = azuis do logotipo, brilho ciano mais leve e curto (sem
   mesclagem aditiva, o azul escuro a 100% virava uma mancha borrada fora da borda) e preenchimento discreto
   (a .16 o texto secundário, --muted, caía para 4,3:1 perto da borda; a .08 fica acima de 4,5:1) */
.border-glow-card { --mesh-color-1: #1b8cc8; --mesh-color-2: #24b6cd; --mesh-color-3: #c9a65e; --glow-hsl: 195deg 80% 70%; }
.border-glow-card.border-glow-card--light {
  --mesh-color-1: #1569ab; --mesh-color-2: #1b8cc8; --mesh-color-3: #24b6cd;
  --glow-hsl: 195deg 75% 55%; --glow-intensity: .55; --glow-padding: 24px; --fill-opacity: .08;
}
/* .btn-outline com o efeito: o brilho que segue o cursor substitui o anel de 3 px do hover de future.css (um só
   sistema de hover; a borda ciano do hover continua) */
.btn-outline.border-glow-card:hover { box-shadow: none; }
/* a sombra em 6 camadas do original não entra: os cartões e botões do site mantêm a sombra (ou a falta dela)
   que já tinham em repouso e no hover (especificidade zero, como os padrões do componente) */
:where(.border-glow-card), :where(.border-glow-card.border-glow-card--light) { box-shadow: none; }

/* cartões que já tinham hover próprio (future.css): a borda em gradiente (::after) dá lugar ao brilho que
   segue o cursor; os cantos HUD (::before) continuam. Com ::before/::after do site, o efeito usa <span>. */
.pcard.border-glow-card--spans::after, .dash-card.border-glow-card--spans::after { display: none; }
/* cartão de produto: sem recorte, para o halo externo aparecer; a área da foto acompanha os cantos.
   O .pcard é montado sob demanda (site.js) e sem wrapper; o seletor fica sem ">" para valer nos dois casos. */
.pcard.border-glow-card { overflow: visible; }
:where(.pcard.border-glow-card) .pcard-media { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }