/* Portal do Investidor — padrão compartilhado entre as telas de autenticação
   (login, escolha de método, verificação, cadastro...) — Nova Marca.

   Problema que isso resolve: .headerBanner é filho de .formPadrao, que tem
   padding pro conteúdo do form (campos, título etc.) — mas em todas essas
   telas o header do Figma ocupa o card inteiro, encostado no topo e na
   largura total, sem respeitar esse padding. Antes isso era recalculado "no
   olho" em cada arquivo CSS de cada tela (e errava toda vez que o padding
   do form mudava, ex. no breakpoint mobile) — este arquivo centraliza a
   conta usando custom properties: cada tela só declara o padding do
   .formPadrao como --nm-portal-form-pad-y/--nm-portal-form-pad-x (direto no
   mesmo seletor que já define o padding, nos mesmos breakpoints que já
   tem), e a margem negativa de escape é sempre a mesma fórmula abaixo.

   Uso (no CSS de cada tela):
     .nm-portal-xxx .caixaLogin .formPadrao {
       --nm-portal-form-pad-y: var(--nm-space-7);
       --nm-portal-form-pad-x: var(--nm-space-6);
       padding: var(--nm-portal-form-pad-y) var(--nm-portal-form-pad-x);
     }
   E no HTML, adicionar a classe .nm-portal-auth-header no .headerBanner
   (além das classes que a tela já usa) — ver page-login-app-portal.php e
   page-metodo-verificacao-app-portal.php. */

.nm-portal-auth-header {
  /* !important porque .caixaLogin .headerBanner (css-portal-novo.css, 2
     classes) tem especificidade maior que essa classe sozinha (1 classe) e
     ainda define position:relative/left:-24px/width:calc(100% + 48px) —
     resquício do esquema de padding antigo (24px). Sem isso, o navegador
     mistura essas propriedades antigas com a margem nova aqui, e o header
     fica deslocado/com largura errada (visto ao vivo: sobrava um filete
     branco no canto do card). */
  position: static !important;
  left: auto !important;
  width: calc(100% + var(--nm-portal-form-pad-x, var(--nm-space-6)) * 2) !important;
  /* margin-bottom = +pad-y (não 0): o header só escapa do padding pra ele
     mesmo (topo/laterais) — o espaço até o próximo conteúdo do form (título,
     campos...) continua sendo o padding-top normal do .formPadrao, só que
     "devolvido" aqui porque o margin-top negativo já consumiu esse espaço. */
  margin:
    calc(var(--nm-portal-form-pad-y, var(--nm-space-7)) * -1)
    calc(var(--nm-portal-form-pad-x, var(--nm-space-6)) * -1)
    var(--nm-portal-form-pad-y, var(--nm-space-7))
    !important;
  box-sizing: border-box;
}