/* =========================================================================
   NHG Core — camada de apresentação COMUM (SPEC_CORE_09)
   Alinhamento visual com o NHG Site. Portas de entrada (260, 270, 9999) na
   Fase 1/2, shell autenticada (200–250) na Fase 3.

   ÂMBITO — MUDOU a 2026-08-20 (Fase 3). Este ficheiro é hoje a BASE COMUM de
   toda a app 888: tokens, as quatro camadas de fundo, a ponte de tema e o
   vidro. Carregam-no as portas de entrada (260, 270, 9999) E a shell
   autenticada (200, 210, 220, 230, 240, 250). Estiliza sem se esconder atrás
   de uma classe porque quem o carrega já decidiu que o quer.

   O que é PRÓPRIO das portas continua ancorado nas classes delas
   (`[class*="nhg-"][class*="-wrap"]`, `-back`, `.t-Login-*`) e não pega em
   mais nada. O que é próprio do painel vive no `nhg-core.css`, que carrega
   DEPOIS deste e assume que os tokens já existem.

   ATENÇÃO AO QUE ESTE FICHEIRO PODE APANHAR SEM QUERER. Uma regra escrita
   aqui contra uma classe genérica passou a valer também em páginas com
   tabelas, formulários e navegação. Foi o que aconteceu às três regras do
   `.core-header` que este ficheiro tinha: viviam cá desde a 1.ª versão da
   260, já estavam mortas nas portas, e teriam ganho por especificidade ao
   `nhg-core.css` no dia em que a shell passou a carregá-lo.

   DECISÃO DO PO, 2026-08-20: o canvas fica VIVO também na shell autenticada.
   O §4 do SPEC_CORE_09 previa estático ou desligado; foi sobreposto por
   pedido explícito de "mesmo aspeto".

   TOKENS MEDIDOS NO SITE a 2026-08-18, não aproximados. A proposta original
   sugeria vidro a rgba(255,255,255,0.75) com blur(16px); o site usa 0.18 com
   blur(20px) e saturate(180%). A diferença não é de gosto: 0.75 é um painel
   leitoso, e o efeito líquido vem da transparência alta COM saturação.
   SELETORES AGNOSTICOS AO PREFIXO DA PAGINA. A 260 usa `nhg-reg-wrap`, a 270
   usa `nhg-reset-wrap`, e cada porta nova traria outro. O que todas partilham
   e' serem uma `t-Region` cuja classe comeca por `nhg-` e acaba em `-wrap` --
   e e' por ai que se agarram, em vez de crescer uma lista de seletores a cada
   pagina. `nhg-reg-back` / `nhg-reset-back` seguem a mesma regra.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --nhg-accent-blue: #0284c7;
  --nhg-accent-cyan: #06b6d4;
  --nhg-accent-glow: rgba(56, 189, 248, 0.25);

  --bg-base: #f8fafc;
  --bg-gradient: radial-gradient(circle at 50% 0%, #e0f2fe 0%, #f8fafc 75%);
  --bg-mesh: radial-gradient(at 0% 0%, rgba(186, 230, 253, 0.4) 0px, transparent 50%),
             radial-gradient(at 100% 100%, rgba(199, 210, 254, 0.35) 0px, transparent 50%);
  --bg-texture-opacity: 0.36;
  --bg-texture-blend: multiply;
  --bg-texture-filter: none;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;

  --glass-bg: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.60);
  --glass-blur: 20px;
  --glass-saturate: 180%;
  --glass-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08),
                  inset 0 1px 1px 0 rgba(255, 255, 255, 0.8),
                  inset 0 0 16px 0 rgba(255, 255, 255, 0.2);
  --glass-refraction: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%,
                                              rgba(255, 255, 255, 0.08) 50%,
                                              rgba(255, 255, 255, 0) 100%);

  --field-bg: rgba(255, 255, 255, 0.72);
  --field-border: rgba(148, 163, 184, 0.55);

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius-lg: 20px;
  --radius-full: 999px;
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Escuro por escolha explícita (a ponte do site escreve data-theme) ... */
[data-theme="dark"] {
  --nhg-accent-blue: #38bdf8;
  --nhg-accent-cyan: #22d3ee;
  --nhg-accent-glow: rgba(56, 189, 248, 0.35);

  --bg-base: #060b13;
  --bg-gradient: radial-gradient(circle at 50% 0%, #0d1e38 0%, #060b13 80%);
  --bg-mesh: radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 60%),
             radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.12) 0px, transparent 60%);
  --bg-texture-opacity: 0.26;
  --bg-texture-blend: screen;
  --bg-texture-filter: invert(1) brightness(0.8) contrast(1.2);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --glass-bg: rgba(13, 22, 38, 0.22);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-saturate: 190%;
  --glass-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.55),
                  inset 0 1px 1px 0 rgba(255, 255, 255, 0.18),
                  inset 0 0 20px 0 rgba(56, 189, 248, 0.03);
  --glass-refraction: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%,
                                              rgba(255, 255, 255, 0.03) 50%,
                                              rgba(255, 255, 255, 0) 100%);

  --field-bg: rgba(9, 16, 28, 0.55);
  --field-border: rgba(148, 163, 184, 0.35);
}

/* ... e escuro por preferência do sistema, mas SÓ quando não há escolha
   explícita em contrário. Sem o :not(), quem escolheu claro num sistema
   escuro via a escolha ser ignorada — é a mesma disciplina do site. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nhg-accent-blue: #38bdf8;
    --nhg-accent-cyan: #22d3ee;
    --bg-base: #060b13;
    --bg-gradient: radial-gradient(circle at 50% 0%, #0d1e38 0%, #060b13 80%);
    --bg-mesh: radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 60%),
               radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.12) 0px, transparent 60%);
    --bg-texture-opacity: 0.26;
    --bg-texture-blend: screen;
    --bg-texture-filter: invert(1) brightness(0.8) contrast(1.2);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --glass-bg: rgba(13, 22, 38, 0.22);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-saturate: 190%;
    --glass-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.55),
                    inset 0 1px 1px 0 rgba(255, 255, 255, 0.18),
                    inset 0 0 20px 0 rgba(56, 189, 248, 0.03);
    --glass-refraction: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%,
                                                rgba(255, 255, 255, 0.03) 50%,
                                                rgba(255, 255, 255, 0) 100%);
    --field-bg: rgba(9, 16, 28, 0.55);
    --field-border: rgba(148, 163, 184, 0.35);
  }
}

/* -------------------------------------------------------------- as 4 camadas
   O fundo do site não é uma imagem: é gradiente + mesh + textura em modo de
   mistura + canvas. Portar só a imagem como `background: url() cover` dava uma
   fotografia opaca e pesada, sem a profundidade que vem da mistura. */

/* `[class*=]` e nao `.t-PageBody`: medido, a pagina de login sai com
   `class="t-PageBody--login t-PageTemplate--login ..."` -- SEM a classe
   `t-PageBody` isolada. A regra antiga nao lhe pegava, e a 9999 ficava sem
   fundo nenhum. */
body[class*="t-PageBody"] {
  background-color: var(--bg-base);
  background-image: var(--bg-mesh), var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

#nhg-bg-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("../backgrounds/nhg-bg-constellation.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: var(--bg-texture-opacity);
  mix-blend-mode: var(--bg-texture-blend);
  filter: var(--bg-texture-filter);
}

#constellation-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* O conteúdo do APEX tem de ficar ACIMA das duas camadas fixas, senão o
   formulário fica por baixo do canvas e deixa de receber cliques. */
.t-Body, .t-Body-main, .t-Body-content, .t-Body-contentInner {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* --------------------------------------------------------------- o vidro
   REGRA DESTA FRENTE, e não é preferência: nenhum elemento com
   backdrop-filter recebe transform. No iOS Safari, backdrop-filter num
   elemento com transform (sobretudo em position:fixed) fica INVISÍVEL —
   medido nesta casa a 2026-06-27, no Kanban do HumanPlanner. A elevação
   faz-se só com box-shadow. */

/* ÂNCORA MEDIDA NO HTML GERADO, e não deduzida do tema.
   A primeira versão deste ficheiro usava `.t-Region:not(#nhg-reg-brand)` e
   `.t-Form-inputContainer`. Fui buscar a página ao vivo: o `static_id` da
   região **não sai como id** (sai `R88826000000000020`, gerado) e
   `t-Form-inputContainer` **não existe** neste markup — zero ocorrências. Ou
   seja, metade do ficheiro não estilizava coisa nenhuma e nada o dizia.
   O que existe, e já lá estava, é `p_region_css_classes => 'nhg-reg-wrap'`
   nas três regiões de conteúdo — e NÃO no cabeçalho. É essa a âncora.
   Escopo `.t-Region[class*="nhg-"][class*="-wrap"]` porque o `<header>` também traz a classe,
   para largura, e esse fica fora do vidro: é título sobre o fundo, como no
   site. Três caixas de vidro empilhadas liam-se como lista de painéis. */
.t-Region[class*="nhg-"][class*="-wrap"] {
  /* As tres caixas apareciam coladas: cada uma tem cantos de 20px e nenhuma
     tinha margem, portanto encostavam. 4px, pedido do PO -- o suficiente para
     se lerem como tres superficies e nao como uma so' cortada. */
  margin-bottom: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* O fio de luz no topo do cartão. É o que faz a superfície ler como vidro e
   não como plástico translúcido. */
.t-Region[class*="nhg-"][class*="-wrap"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--glass-refraction);
  pointer-events: none;
}

.t-Region[class*="nhg-"][class*="-wrap"] .t-Region-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
}

.t-Region[class*="nhg-"][class*="-wrap"] .t-Region-title,
.t-Region[class*="nhg-"][class*="-wrap"] .t-Region-headerItems--title {
  font-family: var(--font-display);
  color: var(--text-primary);
}

/* ------------------------------------------------------------- os campos
   Campos translúcidos, mas NÃO transparentes: o texto escrito por uma pessoa
   tem de ficar legível por cima de uma imagem que muda de zona para zona.
   É onde o contraste se perde num desenho destes. */

/* ------------------------------------------------------------- os campos

   O MARKUP, MEDIDO NA PÁGINA VIVA — e é ele que manda no que se segue:

     <div class="row">
       <div class="col col-12 …">Email<input class="text_field apex-item-text" size="40"></div>
     </div>

   O rótulo é um **nó de texto solto**, e o `<input>` vem logo a seguir na
   MESMA LINHA, alinhado pela linha de base. Daí as duas queixas: os campos
   pareciam altos (a linha do rótulo somava-se à altura do input) e o texto
   não alinhava com nada.

   A CORREÇÃO É `display: block` NO INPUT, e não um `flex` no contentor.
   Com o input a block, o texto fica sozinho na sua linha e o campo desce para
   baixo dele, à largura toda. Faz-se **sem selecionar o pai** de propósito:
   medido, há `div.col` que embrulham REGIÕES inteiras e não campos, e uma
   regra cega no `.col` mexia-lhes na disposição.

   O `size="40"` do APEX impõe largura em caracteres; `width: 100%` anula-o,
   senão os campos ficavam de comprimentos diferentes conforme o `size` de cada
   um (40 nos dados, 48 no código). */

.t-Region[class*="nhg-"][class*="-wrap"] input.apex-item-text {
  display: block;
  width: 100%;
  max-width: 100%;
  /* Altura fixa e box-sizing explícito: sem isto, o padding somava-se ao que o
     tema já dá e era essa a origem dos campos altos. 44px é também o alvo de
     toque confortável. */
  height: 44px;
  min-height: 0;
  padding: 0 14px;
  box-sizing: border-box;
  margin: 6px 0 18px;          /* respiro do rótulo em cima, do campo seguinte em baixo */
  line-height: 1.2;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;            /* o rótulo é semibold; o que se escreve não */
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.t-Region[class*="nhg-"][class*="-wrap"] input.apex-item-text:focus {
  outline: none;
  border-color: var(--nhg-accent-blue);
  box-shadow: 0 0 0 3px var(--nhg-accent-glow);
}

.t-Region[class*="nhg-"][class*="-wrap"] input.apex-item-text::placeholder {
  color: var(--text-muted);
}

/* ---------------------------------------------- o olho de ver a password

   CLASSES MEDIDAS no Core.min.css do tema (26.1.3), porque este markup NÃO
   vem no HTML servido — a APEX injeta-o por JavaScript, portanto não se via
   na página que fui buscar. O tema diz:

     .apex-item-group--password > input.apex-item-password + .t-Button--passwordVisibility

   e dá ao botão `--a-button-padding-y: .25rem` mais o seu próprio line-height.
   Era essa a causa de ficar mais alto do que a caixa: eu fixei 44px no input,
   e o botão continuou a calcular a altura dele.

   A correção é o GRUPO passar a flex com os dois filhos à mesma altura fixa.
   Assim a altura deixa de depender do conteúdo do botão. */

.t-Region[class*="nhg-"][class*="-wrap"] .apex-item-group--password {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* O espaçamento passa para o grupo: se ficasse no input, contava-se por
     dentro do grupo e o campo seguinte colava-se. */
  margin: 6px 0 18px;
}

.t-Region[class*="nhg-"][class*="-wrap"] .apex-item-group--password input.apex-item-password {
  flex: 1 1 auto;
  width: auto;              /* dentro do flex, o 100% empurrava o botão para fora */
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.t-Region[class*="nhg-"][class*="-wrap"] .t-Button--passwordVisibility {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-left: 0;                 /* encosta ao campo, sem risca dupla */
  border-radius: 0 10px 10px 0;
  box-shadow: none;
  margin: 0;
}

.t-Region[class*="nhg-"][class*="-wrap"] .t-Button--passwordVisibility:hover {
  color: var(--nhg-accent-blue);
}

.t-Region[class*="nhg-"][class*="-wrap"] .t-Button--passwordVisibility:focus-visible {
  outline: 2px solid var(--nhg-accent-blue);
  outline-offset: -2px;
}

/* O RÓTULO. Não há `<label>` para agarrar (ver o aviso abaixo), portanto
   estiliza-se o `div.col` — mas SÓ o que contém mesmo um campo, senão apanhava
   os `.col` que embrulham regiões e punha meia página a semibold.
   `:has()` é o único seletor que sabe fazer isto, e onde não existir o rótulo
   fica sem estilo: continua na sua linha, alinhado à esquerda, legível.
   Degradação aceitável — a DISPOSIÇÃO não depende disto. */
.t-Region[class*="nhg-"][class*="-wrap"] .col:has(> input.apex-item-text) {
  display: block;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-left: 0;
  padding-right: 0;
}

/* As linhas da grelha do APEX trazem margens negativas de goteira que aqui não
   servem: cada linha tem uma coluna só, à largura toda. */
.t-Region[class*="nhg-"][class*="-wrap"] .row:has(input.apex-item-text) {
  margin: 0;
}

/* ⚠️ NÃO HÁ `<label>` NESTA PÁGINA, e isto é um achado a sério.
   Medido no HTML vivo: o texto do campo é um nó de texto solto, sem elemento
   `<label>` e sem `for=`. Um leitor de ecrã não associa o rótulo ao campo.
   É defeito PRÉ-EXISTENTE e corrigi-lo é mexer no markup da página — está
   registado no backlog em vez de ser emendado em silêncio. O que se faz aqui
   é aspeto; a acessibilidade fica por resolver e não se finge o contrário. */

/* ------------------------------------------------------------- os botões */

.t-Button--hot,
.t-Button.t-Button--hot {
  background: linear-gradient(135deg, var(--nhg-accent-blue), var(--nhg-accent-cyan));
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 12px 28px;
  box-shadow: 0 10px 25px -5px var(--nhg-accent-glow);
  transition: box-shadow var(--transition-smooth);
}

/* Sem transform no hover: ver a regra do iOS acima. O botão não tem
   backdrop-filter hoje, mas a regra é da frente e não do elemento — basta
   alguém envidraçar o botão amanhã para o efeito desaparecer no iPhone. */
.t-Button--hot:hover {
  box-shadow: 0 16px 34px -5px var(--nhg-accent-glow);
}

.t-Button--hot:focus-visible {
  outline: 3px solid var(--nhg-accent-glow);
  outline-offset: 2px;
}

/* A BARRA DO CABECALHO DO TEMA.
   O template "Minimal (No Navigation)" tira a arvore lateral e esvazia o menu
   -- medido: `t-PageTemplate--minimal`, `t-PageBody--noNav`, zero itens de
   menu -- mas AINDA RENDERIZA a barra `#t_Header`, com o logotipo. Numa porta
   publica isso e' uma barra opaca por cima de um fundo que se queria continuo,
   e o unico link que oferecia ia para /home, que exige sessao: quem ainda nao
   tem conta batia num login.
   `display: none` e nao `visibility`/`opacity`: assim sai tambem da ordem de
   tabulacao e da arvore de acessibilidade, em vez de ficar um link invisivel
   que o teclado ainda apanha. A saida da pagina passa a ser o link de regresso
   ao site, abaixo. */
#t_Header,
.t-Body-title {
  display: none;
}

/* ------------------------------------------------- o link de volta ao site

   Substituiu a barra "NHG Core / Criar a sua conta". Duas razoes para ter
   saido: quem chega aqui acabou de carregar em "Criar conta" no site e sabe
   onde esta -- o titulo repetia-lhe o obvio; e a regiao ficava com o fundo
   BRANCO do tema, uma barra opaca por cima de um fundo que se queria continuo.

   O que fica no lugar e' a unica coisa que faltava mesmo: a porta de volta.
   A pagina passou tambem a template "Minimal (No Navigation)", portanto nao ha
   menu nenhum para onde voltar dentro da aplicacao. */

.t-Region[class*="nhg-"][class*="-back"],
.t-Region[class*="nhg-"][class*="-back"] .t-Region-body {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.nhg-back {
  width: min(720px, 100%);
  margin: 0 auto 14px;
}

.nhg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-smooth), border-color var(--transition-smooth);
}

.nhg-back-link:hover,
.nhg-back-link:focus-visible {
  color: var(--nhg-accent-blue);
  border-bottom-color: var(--nhg-accent-blue);
}

/* --------------------------------------------------- cabeçalho do registo */

/* AGNOSTICO AO PREFIXO, como o resto do ficheiro ja' era e esta regra nao.
   Ficou lista explicita por descuido quando a 270 chegou, e a Fase 3 mostrou
   o custo: a 250 traz `nhg-cp-wrap`, apanhava o vidro (que ja' era agnostico)
   e NAO apanhava a largura -- cartao de vidro encostado a' esquerda, a ocupar
   o ecra todo. Uma porta nova traria o mesmo. */
[class*="nhg-"][class*="-wrap"] {
  width: min(720px, 100%);
  margin: 0 auto;
}

/* AS TRES REGRAS DO `.core-header` SAIRAM DAQUI a 2026-08-20 (Fase 3).
   Eram restos da 1.a versao da 260, quando a pagina ainda tinha a barra
   "NHG Core / Criar a sua conta". Essa barra saiu na 2.a ronda de feedback do
   PO e a propria guarda passou a PROIBIR `core-eyebrow` nas portas -- medido
   agora: zero ocorrencias de `.core-header` nas tres. Eram codigo morto.

   E deixaram de ser inofensivas no dia em que a shell autenticada passou a
   carregar este ficheiro: `.core-header .core-eyebrow` tem especificidade
   (0,2,0) contra (0,1,0) do `.core-eyebrow` do `nhg-core.css`, portanto
   ganhava-lhe -- a paleta do cabecalho do painel passava a ser decidida no
   ficheiro das portas. O cabecalho da shell autenticada vive todo no
   `nhg-core.css`. */

/* Os passos 1 e 2, e as caixas de aviso. Estas regras vinham de um bloco
   <style> DENTRO da página 260, com hex codes à mão — o que obrigava a mudar
   a paleta em dois sítios e um deles não era um ficheiro CSS. */
.nhg-reg-step,
.nhg-reset-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--nhg-accent-blue), var(--nhg-accent-cyan));
  font-size: 0.85rem;
  font-weight: 700;
}

/* Mesma razao da regra acima: `-hint` e' agnostico, a boas-vindas do registo
   e' propria da 260 e fica explicita. */
.nhg-reg-welcome,
[class*="nhg-"][class*="-hint"] {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(calc(var(--glass-blur) / 2)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) / 2)) saturate(var(--glass-saturate));
  color: var(--text-secondary);
}

[class*="nhg-"][class*="-hint"] ul { margin: 8px 0 0; padding-left: 20px; }
[class*="nhg-"][class*="-hint"] li { margin: 4px 0; }

/* ------------------------------------------------------- acessibilidade */

@media (prefers-reduced-motion: reduce) {
  /* A constelação já faz um render único e não anima (ver nhg-constellation.js).
     Aqui garante-se que nada mais se move. */
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Onde o backdrop-filter não existe, o vidro tem de degradar para uma
   superfície OPACA. Sem isto o cartão fica quase invisível por cima da
   imagem e o formulário deixa de se ler — falhar bonito não é falhar bem. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .t-Region[class*="nhg-"][class*="-wrap"],
  .nhg-reg-welcome,
  [class*="nhg-"][class*="-hint"] {
    background: rgba(255, 255, 255, 0.94);
  }
  [data-theme="dark"] .t-Region[class*="nhg-"][class*="-wrap"],
  [data-theme="dark"] .nhg-reg-welcome,
  [data-theme="dark"] [class*="nhg-"][class*="-hint"] {
    background: rgba(9, 16, 28, 0.94);
  }
}

/* =========================================================================
   A PAGINA DE LOGIN (9999)

   Estrutura diferente das outras duas, medida no vivo: usa o template
   `@/login`, que ja' nao tem cabecalho, menu nem arvore -- `t-Header`,
   `t-NavigationBar` e `t-TreeNav` dao todos ZERO. Nao precisa do template
   minimo. Em vez de `t-Region` tem `t-Login-*`.

   O fundo proprio dela (`.t-Login-bg`, com o `bkgd-core-login-v1.webp`) sai:
   a regiao foi removida da pagina e esta regra fecha a porta a que volte por
   outro caminho. Duas imagens de fundo sobrepostas nao sao um fundo, sao um
   acidente.
   ========================================================================= */

.t-Login-bg {
  display: none;
}

.t-Login-region {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.t-Login-region::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--glass-refraction);
  pointer-events: none;
}

.t-Login-container,
.t-Login-containerBody,
.t-Login-containerHeader,
.t-Login-containerFooter,
.t-Login-body,
.t-Login-subRegions {
  background: transparent;
  position: relative;
  z-index: 1;
}

.t-Login-title,
.t-Login-header {
  font-family: var(--font-display);
  color: var(--text-primary);
}

/* ------------------------------------------------- os campos do login

   MEDIDO, e e' diferente das outras duas portas -- foi o erro da primeira
   versao deste bloco. O login usa o sistema de formulario COMPLETO do tema:

     .t-Form-fieldContainer--floatingLabel
       > .t-Form-labelContainer > label.t-Form-label
       > .t-Form-inputContainer > .t-Form-itemWrapper
            > input.apex-item-text.apex-item-has-icon
            > span.apex-item-icon.fa.fa-user

   Ou seja: RÓTULO FLUTUANTE (posicionado por cima do campo, sobe quando ha
   foco ou conteudo) e ICONE dentro do campo. Ao contrario da 260/270, onde o
   rotulo e' um no de texto solto e nao ha' geometria nenhuma para respeitar.

   A primeira versao impos aqui `display:block`, `height:44px`, `padding` e
   `margin` -- exatamente o que o rotulo flutuante e o icone usam para se
   posicionarem. Resultado, nas palavras do PO: "o texto parece desalinhado com
   as caixas e os formatos estranhos".

   ESTE BLOCO E' SO' COSMETICO. Cor, fundo, borda, raio e foco. A DISPOSICAO
   FICA COM O TEMA, que ja' a tem certa. A altura sai naturalmente maior do que
   os 44px das outras portas, e e' assim que deve ser: um campo com rotulo
   flutuante precisa de espaco para o rotulo subir. */

.t-Login-region .t-Form-itemWrapper input.apex-item-text {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.t-Login-region .t-Form-itemWrapper input.apex-item-text:focus {
  outline: none;
  border-color: var(--nhg-accent-blue);
  box-shadow: 0 0 0 3px var(--nhg-accent-glow);
}

.t-Login-region .t-Form-label {
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

/* O icone dentro do campo (fa-user, fa-key). So' a cor: a posicao e' do tema. */
.t-Login-region .apex-item-icon {
  color: var(--text-muted);
}

/* O olho de ver a password NAO leva aqui o tratamento em flex que as outras
   portas levam: la' o campo e' um input solto e o grupo tinha de ser montado;
   aqui o tema ja' o posiciona dentro do `t-Form-itemWrapper`, junto do icone.
   Forcar um flex por cima disso era repetir o erro deste bloco. So' a cor. */
.t-Login-region .t-Button--passwordVisibility {
  color: var(--text-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.t-Login-region .t-Button--passwordVisibility:hover {
  color: var(--nhg-accent-blue);
}

.t-Login-links a,
.t-Login-region .t-Button--noUI {
  color: var(--text-secondary);
}

.t-Login-links a:hover {
  color: var(--nhg-accent-blue);
}