/* =====================================================================
   kit/app.css — casca da aplicacao.

   Navegacao principal e' a TOPBAR HORIZONTAL. Com dois destinos, uma
   barra horizontal mostra os dois ao mesmo tempo e devolve a largura que
   a tabela de Formularios precisa — um rail lateral de 236px comia essa
   largura pra listar dois links.

   No celular a topbar fica so com marca e conta; a navegacao desce pra
   tab bar fixa na zona do polegar — com 2-3 destinos isso mostra onde
   voce esta E leva a qualquer lugar num toque, sem abrir/fechar gaveta.
   ===================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  /* Textura de pontos: fundo chapado em tela grande le como "vazio". */
  background-image: radial-gradient(var(--dot-grid) 1px, transparent 1px);
  background-size: var(--dot-size) var(--dot-size);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Aurora: duas manchas de cor bem esmaecidas, atras de tudo, com deriva
   lenta. E' fundo — o unico movimento do sistema que passa de .4s. */
body::before {
  content: "";
  position: fixed; inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side circle at 18% 8%, var(--aurora-1), transparent),
    radial-gradient(closest-side circle at 86% 4%, var(--aurora-2), transparent);
  animation: derivar-aurora 26s var(--ease-suave) infinite;
}

/* Aurora PARADA enquanto ha modal aberto — decisao de desempenho, medida.

   O overlay do modal e' translucido de proposito (da pra ver que existe pagina
   atras). O preco disso e' que o navegador NAO pode descartar o que esta atras:
   cada quadro da aurora obriga a recompor a tela cheia por baixo do veu. Rolando
   o popup em 2560x1440, isso levava o scroll de 60 pra 20 quadros por segundo —
   e era o "travamento" relatado no popup de detalhe.

   Parar a animacao nao muda nada visualmente: a aurora fica atras de um veu de
   82% de opacidade, onde a deriva de 26s e' imperceptivel. O `body.com-modal`
   e' posto e tirado por NexiUI.abrirModal / fecharModal. */
body.com-modal::before { animation: none; }

/* Foco de teclado visivel em tudo que e' operavel. O painel antigo
   dependia de hover, que nao existe no toque nem no teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Atalho de teclado pra pular a navegacao (leitor de tela / tab). */
.pular-nav {
  position: absolute; left: var(--space-4); top: -60px;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  text-decoration: none;
  transition: top var(--transition-base);
}
.pular-nav:focus { top: var(--space-4); }

/* ============================== SHELL ============================== */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content {
  flex: 1; min-height: 0;
  width: 100%; max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--space-4);
}
body.tem-tabbar .content { padding-bottom: calc(var(--tabbar-altura) + var(--space-6)); }

@media (min-width: 880px) {
  body.tem-tabbar .content { padding-bottom: var(--space-10); }
  .content { padding: var(--space-5) var(--space-6) var(--space-10); }
}
@media (min-width: 1200px) {
  .content { padding: var(--space-6) var(--space-8) var(--space-12); }
}

/* ============================== TOPBAR ============================== */
.topbar {
  position: sticky; top: 0;
  z-index: var(--z-sidebar);
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-altura);
  padding: 0 var(--space-4);
  /* OPACA, sem backdrop-filter — e essa escolha e' de DESEMPENHO, nao de gosto.
     Aqui havia `backdrop-filter: blur(14px)` pra dar vidro fosco. O custo,
     medido: a pagina rolava a 30fps em vez de 60. Exatamente metade, porque o
     navegador precisa refazer o desfoque do que esta atras A CADA QUADRO — e ao
     rolar, o que esta atras muda sempre. Numa barra que ocupa a largura toda e
     fica GRUDADA no topo, isso acontece durante todo o scroll.
     Comprovado com /login (que nao tem a barra) marcando 60fps no mesmo teste.

     O papel visual da barra — ser uma camada acima do conteudo — fica com a
     borda e a sombra, que custam zero por quadro. */
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.topbar__interno {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; max-width: var(--largura-max);
  margin: 0 auto;
}

/* marca */
.topbar__marca { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; flex: none; }
.topbar__tile {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius);
  background: var(--gradient-accent);
  color: var(--text-on-accent);
  font-family: var(--font-marca); font-size: var(--text-md);
  box-shadow: var(--shadow-accent);
  /* O "N" da Ethnocentric fica alto: nudge otico pra centrar de verdade. */
  padding-left: 1px;
}
.topbar__produto { display: none; line-height: 1.25; }
.topbar__produto strong { display: block; font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: -.01em; }
.topbar__produto span { font-size: 10.5px; color: var(--text-muted); letter-spacing: .04em; }

.topbar__sep { width: 1px; height: 22px; background: var(--border-default); flex: none; }

/* navegacao (>=880px) */
.topbar__nav { display: none; align-items: center; gap: var(--space-1); }
.topbar__link {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background var(--dur-rapida) var(--ease-saida), color var(--dur-rapida) var(--ease-saida);
}
.topbar__link svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
  transition: transform var(--dur-base) var(--ease-mola), opacity var(--dur-rapida) linear;
}
.topbar__link:hover { background: var(--surface-2); color: var(--text-primary); }
.topbar__link:hover svg { opacity: 1; transform: scale(1.08); }
.topbar__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-bold); }
.topbar__link[aria-current="page"] svg { opacity: 1; }
/* Sublinhado do item atual: sinal de posicao que nao depende so de cor.
   Cresce do centro ao carregar. */
.topbar__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  animation: sublinhado-entra var(--dur-base) var(--ease-saida) .1s forwards;
}
.topbar__contador {
  font-size: 10.5px; font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--text-secondary);
}
.topbar__link[aria-current="page"] .topbar__contador { background: var(--accent-border); color: var(--accent); }

/* lado direito: conta */
.topbar__end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.topbar__perfil {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
}
.topbar__avatar {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.topbar__quem { display: none; line-height: 1.25; max-width: 168px; }
.topbar__quem strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__quem span { font-size: 10px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; font-weight: var(--weight-semibold); }
.topbar__sair { display: none; }

/* ==================== IDENTIDADE DA EMPRESA ABERTA ====================
   O portal serve duas empresas (ver templates/_nav.html). Estas regras sao
   o "onde eu estou" — quem administra as duas precisa saber, de relance,
   qual RH esta mexendo antes de excluir ou aprovar alguma coisa.

   POR QUE VERDE E' DA NEXI: #09bc8a e' a marca da propria Nexi (o botao de
   SSO no login desenha o logo nessa cor). Ela fica com quem e' dona dela;
   Tendencia recebe o ciano. Nao e' cor sorteada.

   O TEMA NAO REPINTA O APP. Botao, KPI, grafico e selo continuam no accent
   de sempre — so' os marcadores de contexto (tile, fio do topo, item ativo)
   trocam. Repintar tudo faria a mesma tela parecer dois produtos, e jogaria
   fora o contraste ja aferido de cada componente do kit. */
.topbar[data-empresa="tendencia"],
.tabbar[data-empresa="tendencia"] {
  --empresa-cor: var(--cyan);
  --empresa-suave: var(--cyan-soft);
  --empresa-borda: var(--cyan-border);
  --empresa-gradiente: linear-gradient(135deg, #55dae6, var(--cyan));
  --empresa-sombra: 0 8px 20px -7px rgba(34, 198, 212, .4);
}
.topbar[data-empresa="nexi"],
.tabbar[data-empresa="nexi"] {
  --empresa-cor: var(--accent);
  --empresa-suave: var(--accent-soft);
  --empresa-borda: var(--accent-border);
  --empresa-gradiente: var(--gradient-accent);
  --empresa-sombra: var(--shadow-accent);
}

/* Fio na cor da empresa colado no topo da barra. Existe em TODA tela do
   portal, inclusive onde nenhum item de nav esta ativo (ficha, formulario)
   — o item ativo sozinho deixaria essas telas sem sinal nenhum. */
.topbar[data-empresa]::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--empresa-gradiente);
}

.topbar[data-empresa] .topbar__tile {
  background: var(--empresa-gradiente);
  box-shadow: var(--empresa-sombra);
}
.topbar[data-empresa] .topbar__link[aria-current="page"] {
  background: var(--empresa-suave); color: var(--empresa-cor);
}
.topbar[data-empresa] .topbar__link[aria-current="page"]::after { background: var(--empresa-cor); }
.topbar[data-empresa] .topbar__link[aria-current="page"] .topbar__contador {
  background: var(--empresa-borda); color: var(--empresa-cor);
}
.tabbar[data-empresa] .tabbar__item[aria-current="page"] { color: var(--empresa-cor); }
.tabbar[data-empresa] .tabbar__item[aria-current="page"]::before { background: var(--empresa-cor); }

/* Marca como botao de trocar — so' pra quem enxerga as duas empresas. A
   setinha fica apagada ate o hover: em repouso a marca tem que ler como
   identificacao ("voce esta na Tendencia"), nao como acao. */
.topbar__marca--troca { padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1); border-radius: var(--radius); }
.topbar__marca--troca:hover { background: var(--surface-2); }
.topbar__troca {
  width: 15px; height: 15px; flex: none;
  color: var(--text-muted); opacity: 0;
  transition: opacity var(--dur-rapida) linear, transform var(--dur-base) var(--ease-mola);
}
.topbar__marca--troca:hover .topbar__troca { opacity: 1; transform: translateX(2px); }
.topbar__marca--troca:focus-visible .topbar__troca { opacity: 1; }
/* Sem hover (celular/tablet) nao ha como a setinha aparecer — fica sempre
   visivel, senao a troca vira funcao escondida justamente onde o alvo e' o
   dedo. */
@media (hover: none) {
  .topbar__troca { opacity: 1; }
}

@media (min-width: 620px) {
  .topbar__produto { display: block; }
}
@media (min-width: 880px) {
  .topbar { padding: 0 var(--space-6); }
  .topbar__nav { display: flex; }
  .topbar__quem { display: block; }
  .topbar__sair { display: inline-grid; }
}
@media (min-width: 1200px) {
  .topbar { padding: 0 var(--space-8); }
}

/* ========================== TAB BAR (celular) ========================== */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-sidebar);
  height: calc(var(--tabbar-altura) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  /* Opaca, mesmo motivo da topbar: barra fixa + backdrop-filter derruba o scroll
     pra metade do quadro. No celular pesa ainda mais que no desktop. */
  background: var(--surface-1);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
/* O "Sair" e' um <form method=post>, entao precisa ocupar a mesma fatia
   que os links irmaos. */
.tabbar__form { flex: 1; display: flex; }
.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10.5px; font-weight: var(--weight-semibold);
  letter-spacing: .01em;
  background: none; border: none; font-family: inherit;
  cursor: pointer; position: relative;
  transition: color var(--transition-base);
  -webkit-tap-highlight-color: transparent;
}
.tabbar__item svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-mola);
}
.tabbar__item[aria-current="page"] { color: var(--accent); }
.tabbar__item[aria-current="page"] svg { transform: scale(1.12) translateY(-1px); }
.tabbar__item[aria-current="page"]::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 26px; height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  animation: tracinho-entra var(--dur-base) var(--ease-saida) .05s forwards;
}
/* Feedback de toque: afunda de leve. Sem isso o toque parece nao ter
   registrado (nao ha hover no celular). */
.tabbar__item:active { color: var(--text-secondary); }
.tabbar__item:active svg { transform: scale(.9); }

@media (min-width: 880px) {
  .tabbar { display: none; }
}

/* ======================= CABECALHO DE PAGINA ======================= */
.pagina-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  width: 100%; max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.pagina-cab__titulo {
  margin: 0;
  font-size: var(--text-lg); font-weight: var(--weight-bold);
  letter-spacing: -.02em;
  /* Clip do gradiente no texto: branco esmaecendo pra cinza. */
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pagina-cab__sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; max-width: 76ch; }
.pagina-cab__acoes { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

@media (min-width: 880px) {
  .pagina-cab { padding: var(--space-6) var(--space-6) var(--space-4); }
  .pagina-cab__titulo { font-size: var(--text-xl); }
}
@media (min-width: 1200px) {
  .pagina-cab { padding: var(--space-8) var(--space-8) var(--space-5); }
}

/* Sub-abas logo abaixo do cabecalho de pagina: mesmo recuo lateral do
   titulo, senao o rotulo da aba fica desalinhado com o <h1> acima. */
.tabs--shell {
  width: 100%; max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 880px) { .tabs--shell { padding: 0 var(--space-6); } }
@media (min-width: 1200px) { .tabs--shell { padding: 0 var(--space-8); } }

/* ===================== TELAS DE ENTRADA (auth) =====================
   Login, codigo de 2FA, recuperar e redefinir senha. Identidade propria
   (verde radial + grao + wordmark), mas construidas com os mesmos tokens
   do resto — antes eram 4 arquivos com hex solto repetido. */
body.auth {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-4);
  background-color: #000000;
  /* Desfaz o ladrilho de 22px que o `body` usa pra textura de pontos: sem
     isto o gradiente abaixo e' repetido em azulejos de 22px e a tela fica
     com cara de painel de LED. `auto` = o gradiente ocupa o elemento
     inteiro, que e' o que da o brilho central amplo. */
  background-size: auto;
  background-repeat: no-repeat;
  /* Uma cor so, esmaecendo por alpha numa curva suave com paradas
     proximas. Misturar cores diferentes em poucas paradas cria "aneis"
     visiveis nas costuras — foi o que essa curva resolveu. */
  background-image: radial-gradient(circle at 50% 50%,
    rgba(60, 105, 84, .80) 0%,   rgba(60, 105, 84, .68) 7.1%,
    rgba(60, 105, 84, .57) 14.3%, rgba(60, 105, 84, .47) 21.4%,
    rgba(60, 105, 84, .38) 28.6%, rgba(60, 105, 84, .30) 35.7%,
    rgba(60, 105, 84, .23) 42.9%, rgba(60, 105, 84, .17) 50%,
    rgba(60, 105, 84, .12) 57.1%, rgba(60, 105, 84, .08) 64.3%,
    rgba(60, 105, 84, .05) 71.4%, rgba(60, 105, 84, .03) 78.6%,
    rgba(60, 105, 84, .01) 85.7%, rgba(60, 105, 84, .002) 92.9%,
    rgba(60, 105, 84, 0) 100%);
}
/* Grao por cima do gradiente: tira a aparencia lisa/vetorial. Substitui
   a aurora do shell (mesmo pseudo-elemento). */
body.auth::before {
  inset: 0;
  animation: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.4' intercept='0'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.auth-cartao {
  width: 100%; max-width: 470px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xl);
  animation: entrar-escala var(--dur-lenta) var(--ease-saida) both;
}
.auth-cartao__marca {
  margin: 0 0 var(--space-3);
  text-align: center;
  font-family: var(--font-marca);
  font-size: 38px; font-weight: var(--weight-bold);
  letter-spacing: .04em;
  color: #ffffff;
}
.auth-cartao__sub {
  margin: 0 0 var(--space-6);
  text-align: center;
  font-size: var(--text-sm); color: var(--text-muted);
  line-height: 1.6;
}
.auth-cartao form { margin: 0; }
.auth-cartao .field { margin-bottom: var(--space-5); }
.auth-cartao .field__label { font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--text-primary); font-weight: var(--weight-semibold); }
.auth-cartao .btn { width: 100%; }

.auth-cartao__link { text-align: right; margin: calc(var(--space-4) * -1) 0 var(--space-5); }
.auth-cartao__link a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.auth-cartao__link a:hover { color: var(--text-secondary); text-decoration: underline; }

.auth-cartao__divisor { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-4); }
.auth-cartao__divisor::before,
.auth-cartao__divisor::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.auth-cartao__divisor span { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .1em; color: var(--text-muted); }

.auth-cartao__nota { margin: 0 0 var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }

/* Botao "Nexi" (SSO com o site oficial). Pill contornada, wordmark na
   fonte da marca — le como "entrar por outro produto", nao como CTA. */
.btn-nexi {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: fit-content;
  margin: 0 auto var(--space-5);
  padding: var(--space-3) var(--space-10);
  background: transparent;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-full);
  color: #ffffff;
  font-family: var(--font-marca); font-size: var(--text-md);
  letter-spacing: .04em; cursor: pointer;
  transition: border-color var(--transition-base), filter var(--transition-base), transform var(--dur-rapida) var(--ease-saida), box-shadow var(--dur-base) var(--ease-saida);
}
.btn-nexi svg { flex: none; }
.btn-nexi:hover { border-color: var(--accent); filter: brightness(1.15); box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-nexi:active { transform: scale(.98); }

.auth-cartao__acoes {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.auth-cartao__acoes a,
.auth-cartao__acoes .link {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.auth-cartao__acoes a:hover,
.auth-cartao__acoes .link:hover { color: var(--accent); text-decoration: underline; }

/* Codigo de 2FA: 6 caixas de 1 digito. */
.otp { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-6); }
.otp__digito {
  width: 100%; min-width: 0;
  aspect-ratio: 3 / 4;
  max-height: 62px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-bold);
  text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--dur-rapida) var(--ease-saida);
}
.otp__digito:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: translateY(-2px);
}

@media (min-width: 480px) {
  .auth-cartao { padding: var(--space-10) var(--space-10) var(--space-8); }
}

/* Entrada em fila dos itens do cartao de auth. */
.auth-cartao .anim-stagger > * { animation-delay: calc(var(--fila-passo) * var(--i, 0) + .1s); }