/* ══════════════════════════════════════════════════════════════════════════
   hp.css — O SISTEMA DE DESENHO HELLO PITAYA
   ══════════════════════════════════════════════════════════════════════════

   FONTE ÚNICA. Este arquivo é o mesmo, byte por byte, em três repositórios:

       hub-hello-pitaya/src/styles/hp.css      ← o original, edite AQUI
       hellopitaya-builder/hp.css              ← cópia
       hellopitaya-partners/hp.css             ← cópia

   Quem sincroniza é `node scripts/sincronizar-design.mjs` (no hub). Quem
   percebe que alguém editou a cópia é `scripts/conferir-design.mjs`, que
   compara a assinatura e derruba o build.

   POR QUE ELE EXISTE
   O hub tinha 30 tamanhos de fonte diferentes espalhados pelas telas: 13px,
   13.5px, 12.5px, 11.5px, 15px, 17px, 19px... Nenhum deles foi escolhido; cada
   tela decidiu o seu na hora. O resultado é um produto que parece montado por
   cinco pessoas, e uma pessoa gastando o dia corrigindo detalhe de tamanho e
   espaçamento a cada tela nova.

   A cura não é ter mais cuidado. É não ter a opção de errar: existe uma escala,
   ela tem poucos degraus, e o que sai dela não passa no build.

   A RÉGUA DE 01/09/2026 — o vocabulário do admin do Shopify
   O sistema ganhou uma referência externa, escolhida pela Luiza: o painel de
   administração do Shopify. Não a marca nem a cor — a RÉGUA. O que foi copiado:

     1. Quase tudo tem 13px. Rótulo de campo, corpo, item de menu, célula de
        tabela, texto de botão: o mesmo tamanho. Só o título de página sobe a
        20px e o de cartão a 14px. Quem faz hierarquia é PESO e COR, não
        tamanho — foi o que já vinha sendo tentado aqui, agora levado ao fim.
     2. As peças são baixas: botão 28px, campo 32px, item de menu 32px,
        etiqueta 20px. O ar fica ENTRE as peças, não dentro delas.
     3. Praticamente um raio só: 8px em botão, campo, busca e etiqueta; 12px
        no cartão. É a repetição do mesmo canto que dá sensação de encaixe.
     4. O preto não é preto: #303030 no texto e no botão, #616161 no apoio,
        #E3E3E3 na borda. Preto puro sobre branco puro vibra; cinza assenta.
     5. O botão tem relevo — sombras internas de meio pixel que lhe dão borda
        escura em cima e brilho embaixo. É o que faz parecer peça física.
     6. Cartão é BRANCO com borda clara, nunca a caixa cinza de antes.

   O que NÃO foi copiado, de propósito:
     · A seta dupla do `select` — a regra da casa pede uma seta só (a nativa de
       duas setinhas destoa entre navegadores). Ver a memória do projeto.
     · A fonte. O Shopify usa Inter; aqui é Lexend, que é a fonte da marca —
       está no login, nos e-mails e nos PDFs. O vocabulário funciona igual.
     · As telas de autenticação, que têm regra própria (login, 2FA, cadastro):
       são iguais nos quatro apps e não seguem a régua densa do painel — no
       próprio Shopify a tela de entrada também não segue a do admin.

   COMO USAR
   Em CSS:      font-size: var(--fs-base);
   No Tailwind: class="text-base"   (a escala está travada no tailwind.config)
   Nunca:       font-size: 13.5px   ·   class="text-[13.5px]"

   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. OS TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── FAMÍLIA ───────────────────────────────────────────────────────────
     A interface de trabalho usa INTER, a mesma do admin do Shopify (decisão
     da Luiza em 01/09/2026). Inter foi desenhada para texto miúdo de tela:
     em 13px ela mantém as letras abertas e os números estreitos, que é o que
     deixa uma tabela densa legível.

     LEXEND CONTINUA SENDO A FONTE DA MARCA e não sai de onde ela aparece
     para o cliente por fora do painel: telas de entrada (login, 2FA), e-mails,
     PDFs, contratos e sites. Trocar lá deixaria o e-mail falando uma língua e
     o painel outra. Use `var(--fonte-marca)` nesses lugares. */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --fonte-marca: 'Lexend', system-ui, sans-serif;
  --fonte-num: 'Inter', ui-monospace, monospace;

  /* ── TIPOGRAFIA ────────────────────────────────────────────────────────
     13 degraus. Os seis primeiros cobrem 95% da interface; o resto é para
     número grande e abertura de página. Não há meio pixel: `13.5px` era o
     sintoma, não uma necessidade.

     Depois da régua nova, a interface de trabalho usa MENOS degraus ainda:
     13px em quase tudo, 14px em título de cartão, 20px em título de página.
     Os degraus grandes ficaram para número em destaque e página de abertura. */
  --fs-micro: 9px;   /* selo dentro de miniatura. Último recurso.        */
  --fs-2xs:  10px;   /* legado: rótulo em caixa alta. Ver --fs-base.     */
  --fs-xs:   11px;   /* texto de apoio muito curto, meta, legenda        */
  --fs-sm:   12px;   /* etiqueta de estado, botão miúdo, tabela densa    */
  --fs-base: 13px;   /* O CORPO. Rótulo, campo, menu, tabela, botão.     */
  --fs-md:   14px;   /* título de cartão, ênfase                        */
  --fs-lg:   16px;   /* título de seção                                  */
  --fs-xl:   18px;   /* título grande de seção                           */
  --fs-2xl:  20px;   /* título de página                                 */
  --fs-3xl:  24px;   /* número em destaque                               */
  --fs-4xl:  30px;   /* display                                          */
  --fs-5xl:  36px;   /* display grande                                   */
  --fs-6xl:  48px;   /* abertura                                         */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-bold:   700;

  --lh-justa:  1.2;   /* número, título grande      */
  --lh-titulo: 1.3;   /* título                     */
  --lh-corpo:  1.5;   /* leitura                    */
  --lh-solta:  1.65;  /* parágrafo longo            */

  --tracking-label: .04em;  /* legado do rótulo em caixa alta            */
  --tracking-titulo: -.01em; /* título de página e de topo: um respiro   */

  /* ── ESPAÇO ────────────────────────────────────────────────────────────
     Escala de 4 em 4. O Tailwind já usa a mesma (p-1=4px … p-6=24px), então
     classe e variável dizem a mesma coisa. É também a escala do Shopify. */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── RAIO ──────────────────────────────────────────────────────────────
     Seis degraus (eram oito, com 11, 14, 18, 22 e 28 no meio). A régua nova
     tem essencialmente DOIS cantos: 8px no que se opera (botão, campo,
     busca, etiqueta, item de menu) e 12px no que contém (cartão, folha).
     O resto existe para gaveta, modal e moldura. */
  --r-xs:     4px;   /* marca miúda, barra de progresso        */
  --r-sm:     8px;   /* O CANTO. Botão, etiqueta, item de menu */
  --r-campo:  8px;   /* campo: o mesmo canto, com nome próprio */
  --r-md:    12px;   /* cartão, folha de conteúdo              */
  --r-lg:    16px;   /* modal, gaveta                          */
  --r-xl:    20px;   /* moldura grande, arte                   */
  --r-2xl:   20px;   /* legado: mesma coisa que --r-xl         */
  --r-full: 999px;   /* avatar, pastilha de escolha            */

  /* ── SUPERFÍCIE: cinza e branco ────────────────────────────────────────
     A hierarquia é de TOM, não de sombra. A página é cinza, a folha de
     conteúdo é branca e assenta sobre ela.

     MUDOU EM 01/09/2026: a peça dentro da folha era uma caixa CINZA
     (#F0F0F0) de canto 22px. Agora é BRANCA com borda clara — é assim que o
     Shopify mostra "Business details" e cada linha dentro dele. O cinza saiu
     do conteúdo e ficou onde ele funciona: atrás de tudo. */
  --fundo:       #F1F1F1;  /* a página e a coluna esquerda   */
  --barra:       #F1F1F1;  /* a coluna esquerda: mesmo cinza */
  --folha:       #FFFFFF;  /* o cartão grande de conteúdo    */
  --card:        #FFFFFF;  /* peça dentro da folha           */
  --card-fundo:  #FAFAFA;  /* peça que precisa recuar um tom */
  --linha:       #E3E3E3;  /* TODA borda começa aqui         */
  --linha-forte: #B5B5B5;  /* divisa que precisa aparecer    */
  --linha-sutil: #EBEBEB;  /* borda de peça sobre branco     */
  --campo-borda: #CDCDCD;  /* a moldura do campo             */

  /* ── TEXTO ─────────────────────────────────────────────────────────────
     Quatro níveis, agora em cinza sólido em vez de preto transparente. O
     preto puro (#303030) vibrava sobre branco puro; #303030 assenta. O 4 é
     limite de contraste: só marca d'água e placeholder, nunca informação. */
  --txt:  #303030;
  --txt2: #616161;
  --txt3: #8A8A8A;
  --txt4: #B5B5B5;

  /* ── SEMÂNTICA ─────────────────────────────────────────────────────────
     Cor que significa estado. Não é acento e não decora. O par fraco/forte
     é o do Shopify: fundo lavado, texto escuro o bastante para ler. */
  --ok:   #10B981;
  --err:  #E51C00;
  --warn: #FFC96B;
  --info: #3B82F6;
  --ok-fraco:   #CDFEE1;
  --err-fraco:  #FEE9E8;
  --warn-fraco: #FFD6A4;
  --info-fraco: #EBF9FC;
  --ok-txt:   #0C5132;
  --err-txt:  #8E0B21;
  --warn-txt: #5E4200;
  --info-txt: #00527C;

  /* ── ACENTO ────────────────────────────────────────────────────────────
     O ÚNICO token que cada app pode redefinir por conta própria. Tudo o mais
     é igual nos três — é isso que faz um ecossistema em vez de três produtos
     parecidos. */
  --acento:       #303030;
  --acento-forte: #1A1A1A;  /* o hover do primário */
  --acento-texto: #FFFFFF;

  /* ── ELEVAÇÃO ──────────────────────────────────────────────────────────
     A sombra de cartão virou uma linha de 1px embaixo, não uma nuvem: é o
     que o Shopify usa, e é o que deixa a tela plana sem ficar chapada. */
  --sombra-0: none;
  --sombra-1: 0 1px 0 rgba(0,0,0,.05);
  --sombra-2: 0 4px 12px rgba(0,0,0,.08);
  --sombra-3: 0 14px 36px rgba(0,0,0,.14);

  /* ── RELEVO ────────────────────────────────────────────────────────────
     O detalhe que faz o botão do Shopify parecer uma peça e não um retângulo
     pintado: borda escura em cima, fio de luz embaixo, tudo em meio pixel.
     Não é decoração — é o que separa "clicável" de "colorido". */
  --relevo-1: 0 -1px 0 1px rgba(0,0,0,.25) inset,
              0 0 0 1px rgba(255,255,255,.08) inset,
              0 .5px 0 1.5px rgba(255,255,255,.22) inset,
              0 1px 0 rgba(0,0,0,.06);
  --relevo-2: 0 -1px 0 0 #b5b5b5 inset,
              0 0 0 1px rgba(0,0,0,.1) inset,
              0 .5px 0 1.5px #fff inset,
              0 1px 0 0 rgba(0,0,0,.05);

  --tr: .15s ease;
  --foco: 0 0 0 2px rgba(48,48,48,.2);
  --campo-dentro: inset 0 1px 2px rgba(0,0,0,.05);

  /* ── MEDIDAS DA CASCA ──────────────────────────────────────────────────
     A coluna esquerda tem a mesma largura nos três apps. É o que faz alternar
     entre eles não parecer trocar de produto. */
  /* Fluida: acompanha a tela em vez de fixar um número. É a medida que o hub
     já usava; agora ela é o token, e os três apps leem daqui. */
  --barra-larga:   clamp(212px, 17vw, 248px);
  --barra-estreita: 68px;
  --topbar-alta:   56px;
  --folha-margem:  12px;

  /* ── A MARCA (04/09/2026) ──────────────────────────────────────────────
     O logotipo tinha três tamanhos e três posições: 44px no hub, 45 no builder,
     45 no partners, com 14, 30 e 40px de respiro acima. Os apps são um
     ecossistema — a marca não pode mudar de tamanho quando a pessoa troca de
     um para o outro. Agora a régua é esta, e os três leem daqui:
       · altura da arte: 45px, sempre (a LARGURA varia com o lockup de cada app,
         e é a altura que dá o peso visual igual);
       · centralizada na coluna, nunca encostada à esquerda;
       · 30px de respiro acima e 8px até o primeiro item do menu.
     A faixa do topo continua com --topbar-alta nos três: 30 + 45 não cabem nela,
     então a marca TRANSBORDA para dentro do menu (mesmo fundo, emenda invisível)
     e o menu recua o mesmo tanto. Crescer a faixa não serve — ela é a mesma da
     topbar da direita, e as ações do canto desceriam junto. */
  --marca-alta:    45px;
  --marca-topo:    30px;
  --marca-gap:      8px;
  /* O quanto a marca passa da faixa: 30 + 45 - 56 = 19px. */
  --marca-vaza:    calc(var(--marca-topo) + var(--marca-alta) - var(--topbar-alta));

  /* ── ALTURAS ───────────────────────────────────────────────────────────
     Cada peça tem UMA altura, e ela vem daqui. Antes cada tela escolhia a
     sua e nada alinhava numa barra de ações. */
  --h-btn:      28px;  /* botão                                  */
  --h-btn-g:    32px;  /* botão da ação primária de um cabeçalho */
  --h-btn-min:  24px;  /* botão dentro de linha de tabela        */
  --h-campo:    32px;  /* campo de formulário                    */
  --h-campo-min:28px;  /* filtro de tabela, busca de topo        */
  --h-item:     32px;  /* item do menu lateral                   */
  --h-badge:    20px;  /* etiqueta de estado                     */
}

/* O Android inverte por conta própria qualquer página que não se declare — o
   Chrome com tema escuro e o Samsung Internet escurecem a marca do cliente no
   celular de uma pessoa e não na de outra. `only` é obrigatório: `light`
   sozinho é só uma dica e continua sendo escurecido.

   A regra sai por fora do :root para não brigar com o hub, que TEM tema escuro
   de verdade e declara os dois lados. Builder e partners são claros e param
   aqui. */
/* A família herda daqui. Especificidade baixa de propósito: uma tela que
   precise de outra fonte (documento, arte) continua podendo declarar a sua. */
:root { font-family: var(--fonte); }
body { font-family: var(--fonte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:root:not([data-theme="dark"]) { color-scheme: only light; }
:root[data-theme="dark"] { color-scheme: only dark; }

/* ─────────────────────────────────────────────────────────────────────────
   2. A CASCA — coluna esquerda, topo, folha de conteúdo
   ─────────────────────────────────────────────────────────────────────────
   O desenho que o hub usa hoje, extraído para os três apps usarem o mesmo.

   A regra de largura: a folha NÃO tem `max-width`. O contêiner centralizado
   de 1240px que o builder usava desperdiçava metade de um monitor de 1400px
   e obrigava a rolar para achar o que já cabia na tela. Conteúdo dessas telas
   é tabela e formulário — ele quer a largura toda.
   ───────────────────────────────────────────────────────────────────────── */
.hp-shell {
  display: flex;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--fundo);
}

/* ── A coluna esquerda ── */
.hp-barra {
  flex: none;
  width: var(--barra-larga);
  display: flex; flex-direction: column;
  background: var(--barra);
  overflow: hidden;
}
.hp-barra-topo {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--topbar-alta);
  padding: 0 var(--sp-4);
}
.hp-barra-logo { height: 26px; width: auto; display: block; }
.hp-barra-nav {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: none;
}
.hp-barra-nav::-webkit-scrollbar { width: 0; }
/* O grupo do menu é a única coisa que continua em caixa alta: ele não é um
   rótulo de dado, é uma divisória — e divisória pode ser miúda. */
.hp-barra-grupo {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--peso-forte);
  color: var(--txt3);
}
.hp-barra-grupo:first-child { margin-top: var(--sp-1); }
.hp-item {
  display: flex; align-items: center; gap: 9px;
  height: var(--h-item); padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: var(--peso-medio);
  color: var(--txt);
  cursor: pointer; white-space: nowrap;
  border: none; background: transparent; text-align: left; width: 100%;
  transition: background var(--tr), color var(--tr);
}
.hp-item:hover { background: rgba(0,0,0,.05); }
/* Ativo é um degrau de cinza, não uma folha branca com sombra: o menu inteiro
   fica no mesmo plano e o realce não compete com o conteúdo. */
.hp-item.ativo { background: #E3E3E3; color: var(--txt); font-weight: var(--peso-forte); }
.hp-item svg { width: 16px; height: 16px; flex: none; }
.hp-item-conta {
  overflow: hidden; text-overflow: ellipsis;
}

/* ── O lado direito ── */
.hp-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hp-topbar {
  flex: none;
  height: var(--topbar-alta);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4) 0 var(--sp-2);
  background: var(--fundo);
}
.hp-topbar-titulo {
  font-size: var(--fs-md); font-weight: var(--peso-forte);
  color: var(--txt); letter-spacing: var(--tracking-titulo);
}
.hp-topbar-dir { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

/* A folha: onde o conteúdo mora. Largura toda, sem max-width. */
.hp-folha {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 var(--folha-margem) var(--folha-margem);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--txt2);
}
.hp-folha::-webkit-scrollbar { width: 5px; }
.hp-folha::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: var(--r-xs); }
/* Tela que gerencia a própria rolagem (inbox, editor). */
.hp-folha.sem-rolagem { overflow: hidden; display: flex; flex-direction: column; padding: 0; }

/* ── Celular: a coluna vira gaveta ── */
.hp-barra-btn { display: none; }
.hp-veu { display: none; }
@media (max-width: 900px) {
  .hp-barra {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-3);
  }
  .hp-barra.aberta { transform: none; }
  .hp-veu {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.35); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .hp-veu.aberta { opacity: 1; pointer-events: auto; }
  .hp-barra-btn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; flex: none;
    border: 1px solid var(--linha); border-radius: var(--r-sm);
    background: var(--folha); color: var(--txt);
  }
  .hp-folha { margin: 0 var(--sp-2) var(--sp-2); padding: var(--sp-4); }
  .hp-topbar { padding: 0 var(--sp-3) 0 var(--sp-2); }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CAMPOS E FORMULÁRIOS
   ─────────────────────────────────────────────────────────────────────────
   Moldura: borda 1px, canto 8px, fundo branco, sombra interna de um fio no
   topo (é ela que faz o campo parecer FUNDO e não uma caixa desenhada).

   O RÓTULO MUDOU EM 01/09/2026. Era 10px em caixa alta e cinza claro; agora
   é 13px normal na cor do texto. O motivo: em caixa alta miúda, cada linha
   do formulário obrigava a pessoa a trocar de escala de leitura — rótulo
   minúsculo, campo grande, ajuda minúscula. O Shopify usa o mesmo 13px do
   resto e resolve a hierarquia no peso e na cor. O formulário fica mais
   calmo e, de quebra, legível para quem enxerga menos.
   ───────────────────────────────────────────────────────────────────────── */
.lj-label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--fs-base); font-weight: var(--peso-normal);
  color: var(--txt);
  line-height: 1.4;
}
/* Rótulo de um campo obrigatório ou de destaque. */
.lj-label-forte { font-weight: var(--peso-forte); }

.lj-campo {
  width: 100%; height: var(--h-campo); padding: 0 11px;
  border: 1px solid var(--campo-borda); border-radius: var(--r-campo);
  background: #fff; color: var(--txt);
  font-size: var(--fs-base); font-family: inherit;
  box-shadow: var(--campo-dentro);
  transition: border-color var(--tr), box-shadow var(--tr);
}
/* ── ALTURA DO CAMPO DE TEXTO ──────────────────────────────────────────────
   Todo `textarea` nasce com a MESMA altura de um campo comum e cresce à medida
   que o texto ocupa. Antes cada tela escolhia a sua (`rows="6"`, `min-height:
   70px`, `2.8rem`), e um formulário de dez perguntas curtas virava uma parede
   de caixas vazias que empurravam o botão de salvar para fora da tela.
   Campo vazio não precisa de seis linhas de altura; campo com texto longo
   ganha as linhas na hora em que precisa.

   `field-sizing: content` faz isso sozinho onde há suporte; onde não há, o
   ajuste vem do JavaScript de cada app (a função `hpAltoTexto`, chamada ao
   digitar e ao montar a tela).

   ⚠️ MAS O CRESCIMENTO TEM TETO, E ISSO NÃO É DETALHE (17/09/2026). Sem teto,
   um campo com um FAQ inteiro dentro fica mais alto que a tela: o começo do
   texto sai por cima, o fim sai por baixo, e não há posição de rolagem em que
   se veja o campo e o botão de salvar ao mesmo tempo. Foi o que aconteceu no
   Builder, e o efeito é o oposto do que a regra queria — o campo cresceu tanto
   para caber o texto que impediu de editar o texto.

   `40vh` é a medida: nunca mais de 40% da altura da tela, o que dá umas
   dezessete linhas num monitor comum e uma proporção sensata num notebook.
   Passou disso, o campo para de crescer e rola por dentro — e aí a barra de
   rolagem interna é comportamento normal, não sinal de defeito. (Ela ERA sinal
   de defeito enquanto não havia teto: significava que o ajuste de altura não
   tinha rodado. Por isso o `overflow-y` saiu de `hidden` para `auto`.) */
textarea.lj-campo, textarea {
  height: var(--h-campo);
  min-height: var(--h-campo);
  max-height: 40vh;
  padding: 6px 11px;
  line-height: var(--lh-corpo);
  field-sizing: content;
  resize: vertical;
  overflow-y: auto;
}
/* ── CAMPO DE ARQUIVO: O CONTROLE É NOSSO ─────────────────────────────────
   O botão de um `input[type=file]` é desenhado pelo navegador, e cada um o
   desenha do seu jeito. Dá para pintá-lo por `::file-selector-button` (padrão)
   e por `::-webkit-file-upload-button` (Safari antigo) -- e ainda assim sobra
   navegador em que ele sai cinza, com o canto do sistema operacional e o
   rótulo em inglês ("Choose Files"), num produto em português.
   Perseguir seletor por navegador é jogo que não termina.

   Então o botão nativo some e o nosso entra no lugar: o `input` fica
   transparente por cima da peça inteira (continua sendo ele que abre a janela
   de arquivos, e continua respondendo a `value = ''` e a `files`), e o que se
   vê é um `.hp-btn` de verdade, com o rótulo em português e o nome do arquivo
   ao lado. `hpCampoArquivo`, no HubLayout, monta isso em cima de qualquer
   `input[type=file].lj-campo` -- inclusive nos que o JavaScript desenha depois.

   As regras do botão nativo ficam logo abaixo como RESERVA: se o script não
   rodar, o campo ainda tem a moldura certa em vez de sair cru. */
.lj-arquivo {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: var(--h-campo); padding: 0 9px;
  border: 1px solid var(--campo-borda); border-radius: var(--r-campo);
  background: #fff; box-shadow: var(--campo-dentro);
  cursor: pointer;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.lj-arquivo:hover { border-color: var(--linha); }
.lj-arquivo:focus-within {
  border-color: var(--txt); box-shadow: 0 0 0 2px rgba(48,48,48,.2);
}
/* Transparente e por cima de tudo: o clique em qualquer ponto da peça abre a
   janela de arquivos, que é o que a moldura inteira aparenta prometer. */
.lj-arquivo > input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  border: 0; padding: 0; margin: 0; box-shadow: none; background: none;
}
.lj-arquivo-btn {
  flex: none;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--txt);
  font-size: var(--fs-sm); font-weight: 600;
  pointer-events: none;
}
.lj-arquivo:hover .lj-arquivo-btn { background: var(--fundo); }
.lj-arquivo-nome {
  flex: 1; min-width: 0;
  font-size: var(--fs-base); color: var(--txt3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.lj-arquivo-nome[data-cheio="1"] { color: var(--txt2); }

/* ── RESERVA: o campo de arquivo sem o script ─────────────────────────────
   Ele tem um BOTÃO NATIVO dentro, e esse botão não se centraliza sozinho: com
   a altura fixa do campo e `padding: 0 11px` (que só afasta nas laterais), o
   "Escolher arquivos" encosta na borda de cima. Flex resolve os dois lados de
   uma vez -- centra o botão e o texto "nenhum arquivo selecionado" na mesma
   linha de base.
   O botão em si ganha a régua da casa: 24px, que é a altura de botão dentro de
   peça, e o mesmo raio e borda dos outros. Sem isso ele sai com a cara do
   sistema operacional, diferente em cada máquina. */
input[type="file"].lj-campo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 9px;
  color: var(--txt2);
  cursor: pointer;
}
/* ⚠️ AS DUAS FORMAS DO MESMO SELETOR, E EM REGRAS SEPARADAS.
   `::file-selector-button` é o padrão; `::-webkit-file-upload-button` é o que o
   Safari entendia antes da 16.4, e ainda é o que responde em parte das versões
   em uso. Juntar os dois numa lista NÃO funciona: um seletor desconhecido
   invalida a regra INTEIRA, e aí o botão fica nativo nos dois navegadores em
   vez de em um. Duplicar é feio e é o jeito certo. */
input[type="file"].lj-campo::file-selector-button {
  flex: none;
  height: 24px; padding: 0 10px; margin: 0;
  border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--txt);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr);
}
input[type="file"].lj-campo::-webkit-file-upload-button {
  flex: none;
  height: 24px; padding: 0 10px; margin: 0;
  border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; color: var(--txt);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background var(--tr), border-color var(--tr);
}
/* Separadas pelo mesmo motivo da regra acima: uma lista com um seletor que o
   navegador não conhece perde as duas metades. */
input[type="file"].lj-campo::file-selector-button:hover {
  background: var(--fundo); border-color: var(--campo-borda);
}
input[type="file"].lj-campo::-webkit-file-upload-button:hover {
  background: var(--fundo); border-color: var(--campo-borda);
}

/* Uma seta só, para baixo. A nativa de duas setinhas é o que o Shopify usa,
   mas ela destoa entre navegadores e a regra da casa a proíbe. */
select.lj-campo {
  appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.lj-campo:hover { border-color: #A8A8A8; }
.lj-campo:focus { outline: none; border-color: var(--txt); box-shadow: var(--campo-dentro), var(--foco); }
.lj-campo::placeholder { color: var(--txt4); }
.lj-campo:disabled { background: #FAFAFA; color: var(--txt3); box-shadow: none; }
/* Variante baixa: filtro de tabela e busca de topo. Nunca em formulário. */
.lj-campo-min { height: var(--h-campo-min); font-size: var(--fs-sm); padding: 0 9px; }
.lj-ajuda { margin-top: var(--sp-1); font-size: var(--fs-base); line-height: 1.4; color: var(--txt2); }
.lj-erro { margin-top: var(--sp-1); font-size: var(--fs-base); line-height: 1.4; color: var(--err-txt); }

/* ── A BUSCA ───────────────────────────────────────────────────────────────
   Peça própria desde 01/09/2026. Antes cada tela montava a sua com um campo
   baixo e um ícone posicionado na mão, e nenhuma ficava igual à outra.
   Uso:  <label class="lj-busca">
           <svg …lupa…></svg>
           <input class="lj-campo" placeholder="Buscar">
           <kbd>⌘K</kbd>            ← opcional
         </label> */
.lj-busca { position: relative; display: block; }
.lj-busca > svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--txt3); pointer-events: none;
}
.lj-busca .lj-campo { padding-left: 31px; }
.lj-busca kbd {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 18px; padding: 0 5px; border-radius: 5px;
  background: var(--fundo); color: var(--txt2);
  font: var(--peso-medio) var(--fs-xs)/18px inherit;
  pointer-events: none;
}
.lj-busca:has(kbd) .lj-campo { padding-right: 44px; }

/* ── DATA: TRÊS CAMPOS, NUNCA UM SÓ ────────────────────────────────────────
   REGRA (15/09/2026): toda data — aniversário, vencimento, validade — é
   DIA, MÊS e ANO em três campos, cada um com a largura do que guarda. Nunca
   um campo único com barra no meio, e nunca `<input type="date">` em data de
   nascimento.

   Por quê:
   1. O campo de data do navegador escolhe a ORDEM pela língua do sistema. Com
      o aparelho em inglês a pessoa digita mês/dia sem perceber, e a data entra
      trocada sem erro nenhum.
   2. Para nascimento, o calendário dele abre no ano corrente: a pessoa volta
      cinquenta anos clicando.
   3. Campo único com "/" obriga a decorar o formato e aceita lixo.

   E a LARGURA é proporcional ao conteúdo, como manda a grade: dois dígitos não
   ocupam a mesma caixa que quatro. Três campos esticados na largura toda ficam
   ridículos e ninguém entende qual é qual.

   Uso:  <div class="lj-data">
           <input class="lj-campo" list="…dias"  maxlength="2" placeholder="dia">
           <input class="lj-campo" list="…meses" maxlength="2" placeholder="mês">
           <input class="lj-campo" list="…anos"  maxlength="4" placeholder="ano">
         </div>
   Com `datalist` nos três: lista para escolher E teclado para digitar. */
.lj-data { display: flex; gap: var(--sp-2); align-items: center; }
.lj-data > .lj-campo { text-align: center; padding-left: 4px; padding-right: 4px; flex: none; }
.lj-data > .lj-campo:nth-child(1),
.lj-data > .lj-campo:nth-child(2) { width: 56px; }   /* dois dígitos */
.lj-data > .lj-campo:nth-child(3) { width: 74px; }   /* quatro dígitos */

/* Grade de 12 colunas: o campo ocupa a largura do que ele GUARDA. */
.lj-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-3) 14px; align-content: start;
}
.lj-grade > .c2  { grid-column: span 2; }
.lj-grade > .c3  { grid-column: span 3; }
.lj-grade > .c4  { grid-column: span 4; }
.lj-grade > .c5  { grid-column: span 5; }
.lj-grade > .c6  { grid-column: span 6; }
.lj-grade > .c7  { grid-column: span 7; }
.lj-grade > .c8  { grid-column: span 8; }
.lj-grade > .c9  { grid-column: span 9; }
.lj-grade > .c10 { grid-column: span 10; }
.lj-grade > .c12 { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .lj-grade > .c2, .lj-grade > .c3 { grid-column: span 6; }
  .lj-grade > .c4, .lj-grade > .c5, .lj-grade > .c6,
  .lj-grade > .c7, .lj-grade > .c8, .lj-grade > .c9,
  .lj-grade > .c10 { grid-column: 1 / -1; }
}

/* Escolha curta vira pastilha: quatro opções ocupam a altura de um campo.
   A pastilha continua redonda de propósito — é a única peça que precisa se
   distinguir de um campo à primeira vista. */
.lj-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lj-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h-campo); padding: 0 12px;
  border: 1px solid var(--campo-borda); border-radius: var(--r-full);
  background: #fff;
  font-size: var(--fs-base); color: var(--txt2); cursor: pointer; white-space: nowrap;
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}
.lj-pill:hover { border-color: #A8A8A8; }
.lj-pill input { width: 15px; height: 15px; accent-color: var(--acento); }
/* MARCADA = PRETA. A borda escura sobre fundo quase branco (#FAFAFA) era
   distinção fraca demais: com duas pastilhas lado a lado, ninguém via qual
   estava escolhida — foi o que aconteceu no modo de venda da Loja, em
   09/09/2026. Preenchimento sólido responde de longe.
   Duas formas de marcar, o MESMO desenho: `input:checked` para a pastilha que
   embrulha um radio, e `.on` para a que é um <button> desenhado por JavaScript
   (o caso do builder, onde a tela inteira nasce de innerHTML). Faltava a
   segunda, e por isso o botão não acendia de jeito nenhum. */
.lj-pill:has(input:checked),
.lj-pill.on {
  border-color: var(--txt); background: var(--txt); color: #fff;
  font-weight: var(--peso-forte);
}
.lj-pill:has(input:checked):hover,
.lj-pill.on:hover { border-color: var(--txt); }

/* Duas ou três opções: botão segmentado, nunca dropdown — dropdown de duas
   opções passa por campo de texto e a pessoa não descobre que dava para trocar. */
.lj-seg {
  display: inline-flex; align-items: center;
  height: var(--h-campo); padding: 2px; gap: 2px;
  border: 1px solid var(--linha); border-radius: var(--r-sm);
  background: var(--fundo);
}
.lj-seg label {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; min-width: 42px; padding: 0 12px;
  border-radius: 6px;
  font-size: var(--fs-base); font-weight: var(--peso-medio); color: var(--txt2);
  cursor: pointer; transition: background var(--tr), color var(--tr);
}
.lj-seg label:hover { color: var(--txt); }
.lj-seg input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lj-seg label:has(input:checked) { background: #fff; color: var(--txt); font-weight: var(--peso-forte); box-shadow: var(--relevo-2); }
/* O segmentado também aceita BOTÃO no lugar do par label+radio: tela montada
   por JavaScript (builder, partners) não tem onde guardar o estado do radio, e
   sem isto cada uma inventava a sua pílula. Mesma peça, outro elemento. */
.lj-seg button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; min-width: 42px; padding: 0 12px;
  border: 0; border-radius: 6px; background: transparent;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--peso-medio); color: var(--txt2);
  cursor: pointer; white-space: nowrap; transition: background var(--tr), color var(--tr);
}
.lj-seg button:hover { color: var(--txt); }
.lj-seg button.on { background: #fff; color: var(--txt); font-weight: var(--peso-forte); box-shadow: var(--relevo-2); }

/* Escolha que precisa de explicação: cartão com a mesma moldura. */
.lj-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px var(--sp-3); border: 1px solid var(--linha-sutil); border-radius: var(--r-sm);
  font-size: var(--fs-base); color: var(--txt2); cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.lj-check:hover { border-color: var(--linha-forte); background: #FAFAFA; }
.lj-check input { width: 16px; height: 16px; accent-color: var(--acento); margin-top: 1px; flex: none; }
.lj-check small { display: block; color: var(--txt3); margin-top: 2px; }

/* Linha de campos com cabeçalho de colunas (lista dentro de formulário). */
.g-linha { display: grid; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.g-cab {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-base); font-weight: var(--peso-forte);
  color: var(--txt2);
}

/* ── REDE DE SEGURANÇA ─────────────────────────────────────────────────────
   Campo que ninguém vestiu com `.lj-campo` — de tela antiga ou criado por
   JavaScript — ainda assim nasce com a moldura certa. Especificidade ZERO
   (`:where`), então qualquer classe do projeto ou do Tailwind continua
   mandando; só o que ia cair no estilo nativo do navegador é coberto.
   Fora do tema escuro, que tem as suas próprias regras. */
:where(html:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"])),
:where(html:not([data-theme="dark"]) textarea),
:where(html:not([data-theme="dark"]) select) {
  background-color: #fff; color: var(--txt);
  border: 1px solid var(--campo-borda); border-radius: var(--r-campo);
  font-family: inherit; font-size: var(--fs-base);
}

/* ── A SETA DO SELECT ──────────────────────────────────────────────────────
   O indicador nativo é DUAS setinhas empilhadas, e ele muda de desenho a cada
   navegador e sistema — a mesma tela sai diferente no Mac, no Windows e no
   Android. A regra da casa é UMA seta para baixo, minimalista, desenhada por
   nós.

   Por que fora do `:where`: `appearance` é o que mata a seta nativa, e ele
   precisa alcançar TODO select, inclusive os que já têm classe própria de
   cor. Seletor de elemento puro (0,0,1) é a menor especificidade que ainda
   vence o padrão do navegador — qualquer classe do projeto continua mandando
   em cor, borda e tamanho.

   POR QUE `!important` aqui, se ele é evitado em todo o resto do arquivo:
   são as CINCO propriedades da seta, e nenhuma delas é decisão de tela. Duas
   armadilhas as apagavam em silêncio, e as duas já aconteceram neste código:
   o atalho `background:` de uma regra local apaga a imagem junto com a cor, e
   o atalho `padding:` come o espaço à direita, deixando a seta por cima do
   texto. Estilo de linha (`style="..."`) vence qualquer classe, então sem
   `!important` a proteção falharia justamente onde ela mais falhou antes.
   Cor, borda, altura e tamanho do select seguem livres para cada tela.

   Ainda assim, em select escreva `background-color:`, nunca `background:`. */
select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  padding-right: 30px !important;
}
/* Select sem moldura (o que vive dentro de uma barra ou de um cartão colorido)
   continua sem borda, mas ganha a mesma seta. */
select::-ms-expand { display: none; }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:where(html:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"])),
:where(html:not([data-theme="dark"]) select) {
  height: var(--h-campo); padding: 0 11px;
}
:where(html:not([data-theme="dark"]) textarea) {
  min-height: var(--h-campo); padding: 6px 11px;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. BOTÕES
   ─────────────────────────────────────────────────────────────────────────
   Altura 28px — a mesma do Shopify, e 8px mais baixa do que era. Numa barra
   de ações com quatro botões isso devolve um campo inteiro de altura.

   O relevo (`--relevo-1` / `--relevo-2`) não é enfeite: é a borda escura em
   cima e o fio de luz embaixo que fazem o botão parecer uma peça apertável.
   Sem ele, botão branco e campo branco viram o mesmo retângulo.

   `--acento` é o que muda entre apps; a forma nunca.
   ───────────────────────────────────────────────────────────────────────── */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h-btn); padding: 0 12px;
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--peso-forte);
  background: var(--acento); color: var(--acento-texto);
  box-shadow: var(--relevo-1);
  cursor: pointer; white-space: nowrap;
  transition: background var(--tr), box-shadow var(--tr), color var(--tr);
}
.hp-btn:hover { background: var(--acento-forte); }
.hp-btn:active { box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, inset 0 2px 3px rgba(0,0,0,.25); }
.hp-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* BOTAO COM A MARCA DO YOUTUBE NAO DESBOTA.
   A diretriz de marca do YouTube proibe alterar a cor do icone, e 45% de
   opacidade e alteracao. O caso e real: "Conectar YouTube" se desabilita no
   clique enquanto abre a autorizacao, e a marca ficava translucida justo na
   tela que o revisor usa. Nao da para resolver por dentro do SVG -- `opacity`
   no pai compoe a subarvore inteira. Quem avisa que o botao esta ocupado e o
   texto de status ao lado dele. */
.hp-btn:disabled:has(.hp-marca-youtube) { opacity: 1; }
.hp-btn svg { width: 15px; height: 15px; flex: none; }
/* Secundário: branco com relevo. É o botão mais comum da interface. */
.hp-btn-2 { background: #fff; color: var(--txt); box-shadow: var(--relevo-2); }
.hp-btn-2:hover { background: #F7F7F7; }
/* Terciário: sem moldura nenhuma até o mouse chegar. */
.hp-btn-3 { background: transparent; color: var(--txt); box-shadow: none; }
.hp-btn-3:hover { background: rgba(0,0,0,.05); }
.hp-btn-perigo { background: var(--err); color: #fff; }
.hp-btn-perigo:hover { background: #C21600; }
/* Perigo DISCRETO: sem preenchimento ate o mouse chegar. Acao destrutiva rara
   nao pode ser a coisa mais pesada do rodape -- um bloco vermelho ao lado de
   botoes brancos vira o primeiro lugar para onde o olho vai, e nao e para la
   que a pessoa quer ir. */
.hp-btn-perigo-3 { background: transparent; color: var(--err); box-shadow: none; }
.hp-btn-perigo-3:hover { background: rgba(229, 28, 0, .08); }

/* ── ESCONDER UM BOTAO PRECISA FUNCIONAR ──────────────────────────────────
   `.hp-btn` declara `display:inline-flex` e o utilitario `.hidden` declara
   `display:none`. Os dois sao seletor de UMA classe, entao quem vence e a
   ordem do arquivo -- e o hp.css entra depois do Tailwind. Resultado: todo
   `classList.toggle('hidden')` sobre um botao nao fazia nada, em silencio.

   O estrago era invisivel e antigo. No painel de post do social planner, os
   botoes "Publicar agora", "Remarcar" e "Rascunho" sao escondidos por estado
   -- publicado nao republica, o que ja saiu nao desagenda -- e apareciam
   todos, sempre, em qualquer post. A fila de cinco botoes estourava a largura
   do modal por causa disto, e nao por excesso de acoes.

   Dois seletores de classe (0,2,0) vencem qualquer utilitario de uma classe
   so, independente da ordem. A segunda regra existe para nao quebrar
   `hidden sm:inline-flex`, que e "some no celular, aparece no desktop" e e
   usado em Contatos e Contratos: sem ela, a primeira regra esconderia esses
   botoes para sempre. */
.hp-btn.hidden { display: none; }
@media (min-width: 640px) { .hp-btn.sm\:inline-flex { display: inline-flex; } }
/* Alturas: miúdo dentro de linha de tabela, grande na ação de um cabeçalho. */
.hp-btn-min { height: var(--h-btn-min); padding: 0 8px; font-size: var(--fs-sm); }
.hp-btn-g   { height: var(--h-btn-g); padding: 0 14px; }

/* ─────────────────────────────────────────────────────────────────────────
   5. PEÇAS DE CONTEÚDO
   ───────────────────────────────────────────────────────────────────────── */
/* Cartão BRANCO com borda clara — não mais a caixa cinza de canto 22px.
   Sobre a folha branca quem dá o limite é a borda; sobre o cinza da página,
   a sombra de 1px. Funciona nos dois lugares. */
.hp-card {
  background: var(--card);
  border: 1px solid var(--linha-sutil);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sombra-1);
}
.hp-card-titulo {
  font-size: var(--fs-md); font-weight: var(--peso-forte); color: var(--txt);
  margin-bottom: 2px;
}
.hp-card-sub { font-size: var(--fs-base); color: var(--txt2); line-height: 1.45; }

/* Linha dentro do cartão: o "My Store — entity" do Shopify. Um dado, o que
   ele é, e a ação à direita. Substitui a tabela de duas colunas que cada
   tela montava do seu jeito. */
.hp-linha {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-3); padding: 10px 12px;
  border: 1px solid var(--linha-sutil); border-radius: var(--r-sm);
  background: #fff;
}
.hp-linha:hover { background: #FAFAFA; }
.hp-linha-txt { flex: 1; min-width: 0; }
.hp-linha-txt b { display: block; font-size: var(--fs-base); font-weight: var(--peso-medio); color: var(--txt); }
.hp-linha-txt span { display: block; font-size: var(--fs-base); color: var(--txt2); }

/* Cabeçalho de página: título, explicação e as ações na mesma linha. */
.hp-cabecalho {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.hp-cabecalho h1 {
  font-size: var(--fs-2xl); font-weight: var(--peso-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--tracking-titulo);
  color: var(--txt); margin: 0;
}
.hp-cabecalho p { margin: 3px 0 0; font-size: var(--fs-base); color: var(--txt2); max-width: 68ch; }
.hp-cabecalho-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* Abas. */
.hp-abas { display: flex; gap: var(--sp-1); flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin-bottom: var(--sp-5); }
.hp-aba {
  padding: var(--sp-2) var(--sp-3); margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: none;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--peso-medio);
  color: var(--txt2); cursor: pointer; transition: color var(--tr), border-color var(--tr);
}
.hp-aba:hover { color: var(--txt); }
.hp-aba.ativa { color: var(--txt); font-weight: var(--peso-forte); border-bottom-color: var(--txt); }

/* Tabela. Números alinham por coluna — `tabular-nums` é o que faz isso.
   O cabeçalho saiu da caixa alta miúda: 13px, peso forte, cor do texto. */
.hp-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.hp-tabela th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-base); font-weight: var(--peso-forte);
  color: var(--txt);
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.hp-tabela td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--linha-sutil); color: var(--txt2); }
.hp-tabela tr:hover td { background: #FAFAFA; }
.hp-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabela larga rola dentro da própria caixa — a página nunca rola de lado. */
.hp-rolagem-x { overflow-x: auto; }

/* Etiqueta de estado. Retângulo de canto 8px, como todo o resto — a pílula
   fazia dela a única peça de formato próprio na tela. */
.hp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--h-badge); padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--peso-medio);
  background: var(--linha); color: var(--txt); white-space: nowrap;
}
.hp-badge-ok   { background: var(--ok-fraco);   color: var(--ok-txt); }
.hp-badge-err  { background: var(--err-fraco);  color: var(--err-txt); }
.hp-badge-warn { background: var(--warn-fraco); color: var(--warn-txt); }
.hp-badge-info { background: var(--info-fraco); color: var(--info-txt); }

/* Tela sem nada ainda: diz o que fazer, nunca fica em branco. */
.hp-vazio {
  padding: var(--sp-12) var(--sp-6); text-align: center;
  color: var(--txt2); font-size: var(--fs-base);
}
.hp-vazio strong { display: block; color: var(--txt); font-size: var(--fs-md); margin-bottom: var(--sp-1); }

/* Modal: largura conforme o formulário, e sem barra de rolagem no desktop.
   Se está rolando, o layout está errado — não a tela. */
.hp-modal-fundo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.4);
  display: grid; place-items: center; padding: var(--sp-5);
}
.hp-modal {
  width: 100%; max-height: calc(100vh - 40px); overflow: auto;
  background: var(--folha); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  box-shadow: var(--sombra-3);
}
.hp-modal-curto { max-width: 560px; }
.hp-modal-medio { max-width: 720px; }
.hp-modal-longo { max-width: 900px; }
.lj-modal-titulo { font-size: var(--fs-md); font-weight: var(--peso-forte); color: var(--txt); }
.lj-modal-sub { margin-top: 2px; font-size: var(--fs-base); color: var(--txt2); }
.lj-modal-acoes {
  display: flex; justify-content: flex-end; gap: var(--sp-2); align-items: center;
  margin-top: var(--sp-5); padding-top: 14px; border-top: 1px solid var(--linha);
}
@media (max-width: 767px) {
  .hp-modal-fundo { padding: 0; place-items: stretch; }
  .hp-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  /* No celular o alvo de toque volta a 40px: 32px é confortável com mouse,
     apertado com o polegar. É a saída que o próprio Shopify usa. */
  .lj-campo, .lj-pill, .lj-seg { height: 40px; font-size: var(--fs-md); }
  .hp-btn { height: 36px; }
  .hp-btn-g { height: 40px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   O TEMA ESCURO DOS TOKENS (24/09/2026)
   ════════════════════════════════════════════════════════════════════════════

   ⚠️ ELE FALTAVA, E ISSO QUEBRAVA TODA TELA QUE USA `.hp-card`. Os tokens de
   cor eram definidos só no `:root` claro; no escuro, `.hp-card { background:
   var(--card) }` continuava BRANCO. O resultado é o que a Luiza fotografou:
   cartões brancos sobre a página escura, com o título preto sumindo dentro
   deles. Cada tela que precisou de escuro resolveu por conta — o HubLayout
   tem o dele, os relatórios novos têm o deles —, e as que não resolveram
   ficaram assim, caladas.

   Consertar aqui conserta todas de uma vez, que é a razão de os tokens
   existirem. O que cada tela escreveu por conta continua valendo: estas
   declarações são de VARIÁVEL, e quem redefiniu a cor na mão ganha delas.

   A paleta é a mesma que o HubLayout já usa no escuro, para as duas metades do
   hub não contarem histórias diferentes. */
/* ⚠️ O QUE TEM COR ESCRITA À MÃO PRECISA DO PAR ESCURO, e a pílula tinha
   `background: #fff` fixo: no escuro ela saía como um retângulo branco no
   canto da tela. Foi assim que as pílulas de período das estatísticas
   apareceram como quatro blocos brancos sobre a página escura. A regra vale
   para toda peça daqui que não pegue a cor de um token. */
html[data-theme="dark"] .lj-pill { background: var(--card); color: var(--txt2); border-color: var(--linha); }

/* As demais peças com branco escrito à mão. Cada uma destas aparecia como um
   retângulo claro numa tela escura — o campo, a caixa de arquivo, os botões
   miúdos e a tira de aviso. Aqui elas passam a ler os tokens, como o resto. */
html[data-theme="dark"] .lj-campo,
html[data-theme="dark"] .lj-arquivo,
html[data-theme="dark"] .lj-arquivo-btn,
html[data-theme="dark"] .hp-linha,
html[data-theme="dark"] .hp-btn-2 { background: var(--card); color: var(--txt); border-color: var(--linha); }
html[data-theme="dark"] .lj-campo::placeholder { color: var(--txt3); }
html[data-theme="dark"] .lj-seg label:has(input:checked),
html[data-theme="dark"] .lj-seg button.on { background: var(--card); color: var(--txt); }
html[data-theme="dark"] .lj-pill:hover { border-color: var(--txt3); }
html[data-theme="dark"] .lj-pill.on,
html[data-theme="dark"] .lj-pill[aria-current="true"] { background: var(--txt); color: var(--fundo); border-color: var(--txt); }

html[data-theme="dark"] {
  --fundo:       #131316;
  --fundo-2:     #1A1A1D;
  --folha:       #141417;
  --card:        #1A1A1D;
  --linha:       rgba(255,255,255,0.12);
  --linha-sutil: rgba(255,255,255,0.08);
  --txt:  #F2F2F0;
  --txt2: rgba(255,255,255,0.62);
  --txt3: rgba(255,255,255,0.42);
  --sombra-1: 0 1px 0 rgba(0,0,0,.35);
}