/* ══════════════════════════════════════════════════════════════════════════
   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.

   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 {
  /* ── 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. */
  --fs-micro: 9px;   /* selo dentro de miniatura. Último recurso.        */
  --fs-2xs:  10px;   /* rótulo em caixa alta acima do campo              */
  --fs-xs:   11px;   /* texto de apoio, meta, legenda                    */
  --fs-sm:   12px;   /* texto secundário, célula de tabela densa         */
  --fs-base: 13px;   /* O CORPO. O padrão de tudo que se lê.             */
  --fs-md:   14px;   /* campo de formulário, ênfase                      */
  --fs-lg:   16px;   /* título de cartão, título de linha                */
  --fs-xl:   18px;   /* título 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;  /* o único letter-spacing: rótulo em caixa alta */

  /* ── 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. */
  --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 ──────────────────────────────────────────────────────────────
     8 degraus. `--r-campo` é o 11px do padrão de formulário — ele tem nome
     próprio porque é uma decisão, não um degrau da escala. */
  --r-xs:     4px;
  --r-sm:     8px;
  --r-campo: 11px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    22px;
  --r-2xl:   28px;
  --r-full: 999px;

  /* ── 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, e as peças dentro da folha voltam
     um tom abaixo. Três níveis, e a borda dá o limite. */
  --fundo:       #F6F6F6;  /* a página, atrás de tudo        */
  --barra:       #F0F0F0;  /* a coluna esquerda              */
  --folha:       #FFFFFF;  /* o cartão grande de conteúdo    */
  --card:        #F0F0F0;  /* peça dentro da folha           */
  --card-fundo:  #FFFFFF;  /* peça que precisa se destacar   */
  --linha:       #E0E0E0;  /* TODA borda começa aqui         */
  --linha-forte: #CCCCCC;  /* divisa que precisa aparecer    */
  --linha-sutil: rgba(0,0,0,.06);

  /* ── TEXTO ─────────────────────────────────────────────────────────────
     Quatro níveis. O 4 é limite de contraste: só para marca d'água e
     placeholder, nunca para informação. */
  --txt:  #111111;
  --txt2: rgba(0,0,0,.62);
  --txt3: rgba(0,0,0,.40);
  --txt4: rgba(0,0,0,.28);

  /* ── SEMÂNTICA ─────────────────────────────────────────────────────────
     Cor que significa estado. Não é acento e não decora. */
  --ok:   #10B981;
  --err:  #EF4444;
  --warn: #F59E0B;
  --info: #3B82F6;
  --ok-fraco:   rgba(16,185,129,.12);
  --err-fraco:  rgba(239,68,68,.10);
  --warn-fraco: rgba(245,158,11,.13);
  --info-fraco: rgba(59,130,246,.10);

  /* ── 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:       #111111;
  --acento-texto: #FFFFFF;

  /* ── ELEVAÇÃO ──────────────────────────────────────────────────────────
     Quatro degraus, e o primeiro é `none` de propósito: a maior parte da
     interface não precisa de sombra, precisa de borda. */
  --sombra-0: none;
  --sombra-1: 0 1px 3px rgba(0,0,0,.07);
  --sombra-2: 0 8px 24px rgba(0,0,0,.07);
  --sombra-3: 0 14px 36px rgba(0,0,0,.08);

  --tr: .15s ease;
  --foco: 0 0 0 3px 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;

}

/* 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. */
: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; }
.hp-barra-grupo {
  margin: var(--sp-4) 0 var(--sp-1);
  padding: 0 var(--sp-3);
  font-size: var(--fs-2xs); font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--txt3);
}
.hp-barra-grupo:first-child { margin-top: var(--sp-1); }
.hp-item {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: var(--peso-medio);
  color: var(--txt2);
  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); color: var(--txt); }
.hp-item.ativo { background: var(--folha); color: var(--txt); font-weight: var(--peso-forte); box-shadow: var(--sombra-1); }
.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-lg); font-weight: var(--peso-bold);
  color: var(--txt); letter-spacing: -.01em;
}
.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-lg);
  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: 34px; height: 34px; 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
   ─────────────────────────────────────────────────────────────────────────
   O padrão obrigatório (regra do CLAUDE.md). Estava só no HubLayout; agora
   vive aqui e os três apps herdam o mesmo.

   Moldura: borda 1px cinza-clara, canto 11px, fundo branco, rótulo em bloco
   ACIMA. Nunca campo sem borda com fundo cinza; nunca placeholder no lugar
   de rótulo.
   ───────────────────────────────────────────────────────────────────────── */
.lj-label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--fs-2xs); font-weight: var(--peso-forte);
  color: var(--txt3);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.lj-campo {
  width: 100%; height: 40px; padding: 0 13px;
  border: 1px solid rgba(0,0,0,.11); border-radius: var(--r-campo);
  background: #fff; color: var(--txt);
  font-size: var(--fs-md); font-family: inherit;
  transition: border-color var(--tr), box-shadow var(--tr);
}
textarea.lj-campo { height: auto; padding: 10px 13px; line-height: var(--lh-corpo); resize: vertical; }
select.lj-campo {
  appearance: none; padding-right: 34px;
  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='%23999' 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 11px center;
}
.lj-campo:focus { outline: none; border-color: rgba(0,0,0,.34); box-shadow: var(--foco); }
.lj-campo::placeholder { color: var(--txt4); }
.lj-campo:disabled { background: rgba(0,0,0,.03); color: var(--txt3); }
/* Variante baixa: filtro de tabela e busca de topo. Nunca em formulário. */
.lj-campo-min { height: 34px; font-size: var(--fs-sm); border-radius: 9px; padding: 0 11px; }
.lj-ajuda { margin-top: 5px; font-size: var(--fs-xs); line-height: 1.45; color: var(--txt3); }

/* 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. */
.lj-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.lj-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;
  border: 1px solid rgba(0,0,0,.11); border-radius: var(--r-full);
  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: rgba(0,0,0,.24); }
.lj-pill input { width: 15px; height: 15px; accent-color: var(--txt); }
.lj-pill:has(input:checked) { border-color: rgba(0,0,0,.5); background: rgba(0,0,0,.035); color: var(--txt); font-weight: var(--peso-forte); }

/* 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: 40px; padding: 3px; gap: 2px;
  border: 1px solid rgba(0,0,0,.11); border-radius: var(--r-full);
  background: rgba(0,0,0,.035);
}
.lj-seg label {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; min-width: 42px; padding: 0 13px;
  border-radius: var(--r-full);
  font-size: var(--fs-base); font-weight: var(--peso-forte); color: var(--txt3);
  cursor: pointer; transition: background var(--tr), color var(--tr);
}
.lj-seg label:hover { color: var(--txt2); }
.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); box-shadow: var(--sombra-1); }

/* 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 rgba(0,0,0,.09); border-radius: var(--r-campo);
  font-size: var(--fs-base); color: var(--txt2); cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
}
.lj-check:hover { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.015); }
.lj-check input { width: 16px; height: 16px; accent-color: var(--txt); 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: 6px;
  font-size: var(--fs-2xs); font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--txt3);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. BOTÕES
   ─────────────────────────────────────────────────────────────────────────
   Altura 36px, a mesma da pastilha, para alinhar em qualquer barra de ações.
   `--acento` é o que muda entre apps; a forma nunca.
   ───────────────────────────────────────────────────────────────────────── */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid transparent; 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);
  cursor: pointer; white-space: nowrap;
  transition: opacity var(--tr), background var(--tr), border-color var(--tr), color var(--tr);
}
.hp-btn:hover { opacity: .86; }
.hp-btn:disabled { opacity: .45; cursor: default; }
.hp-btn svg { width: 15px; height: 15px; flex: none; }
.hp-btn-2 { background: transparent; color: var(--txt); border-color: var(--linha-forte); }
.hp-btn-2:hover { background: rgba(0,0,0,.04); opacity: 1; }
.hp-btn-3 { background: transparent; color: var(--txt2); border-color: transparent; }
.hp-btn-3:hover { background: rgba(0,0,0,.05); color: var(--txt); opacity: 1; }
.hp-btn-perigo { background: var(--err); color: #fff; }
.hp-btn-min { height: 30px; padding: 0 11px; font-size: var(--fs-sm); }

/* ─────────────────────────────────────────────────────────────────────────
   5. PEÇAS DE CONTEÚDO
   ───────────────────────────────────────────────────────────────────────── */
.hp-card {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
}
.hp-card-titulo {
  font-size: var(--fs-lg); font-weight: var(--peso-bold); color: var(--txt);
  margin-bottom: var(--sp-1);
}
.hp-card-sub { font-size: var(--fs-sm); color: var(--txt3); }

/* 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-bold);
  line-height: var(--lh-titulo); color: var(--txt); margin: 0;
}
.hp-cabecalho p { margin: 3px 0 0; font-size: var(--fs-base); color: var(--txt3); 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-forte);
  color: var(--txt3); cursor: pointer; transition: color var(--tr), border-color var(--tr);
}
.hp-aba:hover { color: var(--txt2); }
.hp-aba.ativa { color: var(--txt); border-bottom-color: var(--txt); }

/* Tabela. Números alinham por coluna — `tabular-nums` é o que faz isso. */
.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-2xs); font-weight: var(--peso-forte);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--txt3);
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.hp-tabela td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--linha-sutil); color: var(--txt2); }
.hp-tabela tr:hover td { background: rgba(0,0,0,.02); }
.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. */
.hp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--peso-forte);
  background: rgba(0,0,0,.06); color: var(--txt2); white-space: nowrap;
}
.hp-badge-ok   { background: var(--ok-fraco);   color: #067a55; }
.hp-badge-err  { background: var(--err-fraco);  color: #b91c1c; }
.hp-badge-warn { background: var(--warn-fraco); color: #92600b; }
.hp-badge-info { background: var(--info-fraco); color: #1d4ed8; }

/* 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(--txt3); font-size: var(--fs-base);
}
.hp-vazio strong { display: block; color: var(--txt2); font-size: var(--fs-lg); margin-bottom: 5px; }

/* 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-xl);
  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-lg); font-weight: var(--peso-bold); color: var(--txt); }
.lj-modal-sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--txt3); }
.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 rgba(0,0,0,.07);
}
@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; }
}