/* Estilos proprios da Central (o resto e o kit, por referencia). So layout: cor e medida vem dos tokens --wm-*. */

html, body { height: 100%; }
body { margin: 0; background: var(--wm-surface-base); color: var(--wm-label-primary); }

/* ── Seletor de idioma (_parciais/idiomas.html): menu compacto no fluxo; a lista abre por cima so ao clicar ── */
.wm-idiomas { position: relative; display: inline-block; font-size: var(--wm-font-size-footnote); }
.wm-idiomas summary { cursor: pointer; list-style: none; color: var(--wm-label-secondary); padding: 4px 8px; border-radius: 8px; }
.wm-idiomas summary::-webkit-details-marker { display: none; }
.wm-idiomas summary:hover, .wm-idiomas summary:focus-visible { color: var(--wm-label-primary); background: var(--wm-fill-secondary); }
.wm-idiomas nav { position: absolute; right: 0; z-index: 20; margin-top: 4px; display: grid; min-width: 12rem; padding: 6px;
  background: var(--wm-surface-raised, var(--wm-surface-base)); border: 1px solid var(--wm-separator-primary, rgba(0,0,0,.1));
  border-radius: 12px; box-shadow: var(--wm-shadow-medium, 0 8px 24px rgba(0,0,0,.12)); }
.wm-idiomas nav a { color: var(--wm-label-primary); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.wm-idiomas nav a:hover, .wm-idiomas nav a:focus-visible { background: var(--wm-fill-secondary); }
/* na barra de cima, até 1100 px o idioma mostra só o código (PT-BR): sobra lugar para a navegação e o "Mais" não encosta
   no tema; o nome inteiro segue na lista que abre */
@media (max-width: 1100px) {
  .lg__topo .wm-idiomas summary > span { display: none; }
  .lg__topo .wm-idiomas summary::after { content: attr(data-curto); font-weight: 600; }
}
.wm-idiomas nav a[aria-current="true"] { font-weight: var(--wm-font-weight-semibold); }
.wm-auth-aurora__idiomas { display: flex; justify-content: center; margin-top: var(--wm-space-4); }
.wm-auth-aurora__field--seguinte { margin-top: var(--wm-space-6); }

/* ── Layout logado (layouts/logado.html): a aurora da tela de entrar continua depois do login ──
   Mesma paleta de assinatura do auth-aurora do kit (mesmo hex): e a identidade da Wortic, nao token do sistema,
   por isso mora em custom properties locais (--lg-*). Claro e escuro trocam so estas variaveis.
   Palco: 100% de largura, 3% lateral. */
.lg {
  /* paleta oficial do logo (wortic-uikit AGENTS.md, "Assets da marca"): azul #0049ff, ciano #2ac2f3, azul-violeta #020bb5,
     indigo #0a008e; destaque do produto #1d59f0. --lg-violeta guarda o nome antigo e agora e o azul-violeta da marca. */
  --lg-azul: #1d59f0; --lg-azul2: #0049ff; --lg-azul-claro: #8fb4ff; --lg-ciano: #2ac2f3; --lg-violeta: #020bb5; --lg-indigo: #0a008e;
  /* movimento (motion-de-interface): ease-out forte para entrar e abrir, curva de gaveta para janelas */
  --lg-sai: cubic-bezier(0.23, 1, 0.32, 1); --lg-gaveta: cubic-bezier(0.32, 0.72, 0, 1);
  --lg-fundo: #eaf0fb; --lg-tinta: #0e1730; --lg-tinta2: #4a5578; --lg-tinta3: #7a84a3;
  --lg-vidro: rgba(255, 255, 255, 0.58); --lg-vidro-forte: rgba(255, 255, 255, 0.8);
  --lg-vidro-borda: rgba(255, 255, 255, 0.85); --lg-linha: rgba(23, 50, 102, 0.12);
  --lg-sombra: 0 30px 80px -30px rgba(20, 45, 110, 0.38), 0 2px 8px rgba(20, 45, 110, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --lg-sombra-alta: 0 40px 90px -28px rgba(20, 45, 110, 0.5), 0 2px 8px rgba(20, 45, 110, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --lg-brilho: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 45%);
  --lg-blobs: 1;
  position: relative; isolation: isolate; min-height: 100dvh; background: var(--lg-fundo); color: var(--lg-tinta);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] .lg {
  --lg-fundo: #060a17; --lg-tinta: #eef2ff; --lg-tinta2: #a7b0cc; --lg-tinta3: #7c86a6;
  --lg-vidro: rgba(24, 32, 58, 0.52); --lg-vidro-forte: rgba(34, 44, 76, 0.72);
  --lg-vidro-borda: rgba(255, 255, 255, 0.09); --lg-linha: rgba(255, 255, 255, 0.08);
  --lg-sombra: 0 30px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lg-sombra-alta: 0 40px 90px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(99, 210, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lg-brilho: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent 45%);
  --lg-blobs: 0.55;
}
/* aurora fixa atras de tudo (parede, nao rola) */
.lg__aurora { position: fixed; inset: -20% -10% -10% -10%; z-index: 0; filter: blur(70px) saturate(1.05); opacity: .32; pointer-events: none; }  /* bem sutil (Will, 29/09) */
.lg__blob { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lg__blob--1 { width: 46vw; height: 46vw; left: -6vw; top: -8vw; opacity: calc(0.55 * var(--lg-blobs));
  background: radial-gradient(circle at 30% 30%, var(--lg-azul) 0, rgba(29, 89, 240, 0) 68%); animation: lg-flo1 26s ease-in-out infinite; }
.lg__blob--2 { width: 42vw; height: 42vw; right: -8vw; top: 6vw; opacity: calc(0.5 * var(--lg-blobs));
  background: radial-gradient(circle at 60% 40%, var(--lg-ciano) 0, rgba(42, 194, 243, 0) 66%); animation: lg-flo2 32s ease-in-out infinite; }
.lg__blob--3 { width: 50vw; height: 50vw; left: 12vw; bottom: -22vw; opacity: calc(0.42 * var(--lg-blobs));
  background: radial-gradient(circle at 50% 50%, var(--lg-azul2) 0, rgba(0, 73, 255, 0) 68%); animation: lg-flo3 30s ease-in-out infinite; }
.lg__blob--4 { width: 34vw; height: 34vw; right: 6vw; bottom: -10vw; opacity: calc(0.5 * var(--lg-blobs));
  background: radial-gradient(circle at 40% 40%, var(--lg-azul-claro) 0, rgba(143, 180, 255, 0) 66%); animation: lg-flo1 24s ease-in-out infinite reverse; }
@keyframes lg-flo1 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(4vw, 3vw) scale(1.12) } }
@keyframes lg-flo2 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-5vw, 4vw) scale(1.08) } }
@keyframes lg-flo3 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(3vw, -4vw) scale(1.14) } }
.lg__grao { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.lg__palco { position: relative; z-index: 1; box-sizing: border-box; width: 100%; padding: 16px 3vw 64px; }

/* barra de vidro: marca | navegacao em trilho (item ativo = pilula branca, como as abas da tela de entrar) | idioma e sair */
.lg__topo { position: sticky; top: 12px; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 14px;
  margin-bottom: clamp(32px, 6vh, 64px); border-radius: 22px; background: var(--lg-vidro);
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); }
.lg__marca { display: inline-flex; align-items: center; gap: 10px; color: var(--lg-tinta); text-decoration: none; }
.lg__marca img { width: 32px; height: 32px; }
.lg__marca strong { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.lg__nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 14px;
  background: rgba(23, 50, 102, 0.06); border: 1px solid var(--lg-linha); }
:root[data-theme="dark"] .lg__nav { background: rgba(0, 0, 0, 0.25); }
.lg__nav > a { font-size: 14px; font-weight: 600; color: var(--lg-tinta2); text-decoration: none; padding: 8px 16px; border-radius: 10px;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.lg__nav > a:hover { color: var(--lg-tinta); }
.lg__nav > a[aria-current="page"] { color: var(--lg-azul); background: var(--lg-vidro-forte);
  box-shadow: 0 1px 2px rgba(20, 45, 110, 0.08), 0 6px 16px -8px rgba(20, 45, 110, 0.35); }
:root[data-theme="dark"] .lg__nav > a[aria-current="page"] { color: #fff; background: var(--lg-azul); }
.lg__acoes { display: flex; align-items: center; gap: 4px; }
.lg__acoes form { margin: 0; }
.lg__sair { font: inherit; font-size: 14px; font-weight: 600; color: var(--lg-tinta2); background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 10px; transition: color .2s ease, background-color .2s ease; }
.lg__sair:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
/* tema claro/escuro (static/tema.js) e o menu da conta (perfil e sair) */
.lg__tema { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 10px;
  cursor: pointer; color: var(--lg-tinta2); background: none; }
.lg__tema:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg__tema .wm-icon { width: 19px; height: 19px; }
.lg__tema-lua, :root[data-theme="dark"] .lg__tema-sol { display: none; }
:root[data-theme="dark"] .lg__tema-lua { display: inline; }
.lg__conta { position: relative; }
.lg__conta > summary { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 12px; cursor: pointer; list-style: none;
  color: var(--lg-tinta2); }
.lg__conta > summary::-webkit-details-marker { display: none; }
.lg__conta > summary:hover { background: rgba(23, 50, 102, 0.06); }
.lg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  color: #fff; background: #5d6b8a; }
.lg__avatar .wm-icon { width: 18px; height: 18px; }
.lg__conta-seta { width: 16px; height: 16px; }
.lg__conta-menu { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); display: grid; min-width: 180px; padding: 6px; border-radius: 12px;
  background: var(--lg-vidro-forte, #fff); border: 1px solid var(--lg-linha, #e6e9f0); box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .25); }
.lg__conta-menu a, .lg__conta-menu .lg__sair { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left;
  font-size: 14.5px; font-weight: 600; color: var(--lg-tinta); text-decoration: none; }
.lg__conta-menu a:hover { background: rgba(23, 50, 102, 0.06); }
/* espaco ativo ao lado da marca (layouts/logado.html): o nome corta com reticencias; a troca abre a lista (espaco-troca.js) */
.lg__espaco { position: relative; flex: 0 1 auto; min-width: 0; }
/* no computador o menu (que rola) cede espaço antes do nome: sem isso o nome do espaço virava "De..." */
@media (min-width: 721px) { .lg__espaco { flex-shrink: 0; } }
.lg__espaco-rotulo { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--lg-tinta2); list-style: none; }
.lg__espaco-troca > summary { cursor: pointer; }
.lg__espaco-troca > summary::-webkit-details-marker { display: none; }
.lg__espaco-troca > summary:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg__espaco-icone { flex: none; width: 18px; height: 18px; }
.lg__espaco-seta { flex: none; width: 16px; height: 16px; }
.lg__espaco-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg__espaco-menu { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); display: grid; min-width: 240px;
  width: max-content; max-width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 6px; border-radius: 12px; border: 1px solid var(--lg-linha, #e6e9f0);
  /* opaco: a cor de vidro do tema por cima do fundo da página, para o texto de baixo não aparecer através */
  background: linear-gradient(var(--lg-vidro-forte, #fff), var(--lg-vidro-forte, #fff)), var(--lg-fundo, #fff);
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .25);
  /* muitos espaços (as contas de demonstração têm 101): a lista rola por dentro, nunca passa da tela */
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
/* a busca fica presa no alto enquanto a lista rola */
.lg__espaco-busca { position: sticky; top: -6px; z-index: 1; box-shadow: 0 -6px 0 6px var(--lg-vidro-forte, #fff); }
.lg__espaco-menu a[hidden], .lg__mais-menu a[hidden] { display: none; }
/* "Mais" na barra (computador e notebook): guarda os itens que não cabem; a lista abre à direita, alinhada ao botão */
.lg__mais { position: relative; flex: none; }
.lg__mais[hidden] { display: none; }
.lg__mais > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--lg-tinta2); padding: 8px 12px 8px 16px; border-radius: 10px; }
.lg__mais > summary::-webkit-details-marker { display: none; }
.lg__mais > summary:hover, .lg__mais[open] > summary { color: var(--lg-tinta); }
.lg__mais[data-atual] > summary { color: var(--lg-azul); }
.lg__mais-menu { left: auto; right: 0; }
.lg__nav[data-mais-ligado] { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.lg__nav > a[hidden] { display: none; }
.lg__espaco-titulo { margin: 0; padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--lg-tinta3); }
.lg__espaco-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--lg-tinta); text-decoration: none; }
.lg__espaco-menu a:hover { background: rgba(23, 50, 102, 0.06); }
.lg__espaco-menu a[aria-current="true"] { color: var(--lg-azul); }
/* nome comprido quebra em até 2 linhas (cortar escondia qual era o espaço) */
.lg__espaco-item { min-width: 0; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lg__espaco-check { flex: none; width: 16px; height: 16px; color: var(--lg-azul); }
/* seletor de empresas e clientes (empresas.js): a lista rola quando passa da altura da tela */
.lg__grupo-menu { min-width: 240px; max-width: 340px; max-height: min(70vh, 520px); overflow-y: auto; }
.lg__grupo-busca { margin: 4px 6px 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lg-linha, #e6e9f0);
  font: inherit; font-size: 14px; color: var(--lg-tinta); background: #fff; }
.lg__grupo-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--lg-tinta);
  text-align: left; cursor: pointer; }
.lg__grupo-item:hover, .lg__grupo-item:focus-visible { background: rgba(23, 50, 102, 0.06); outline: none; }
.lg__grupo-item[aria-pressed="true"] { color: var(--lg-azul); }
.lg__grupo-item[hidden] { display: none; }
.lg__grupo-texto { min-width: 0; display: flex; flex-direction: column; }
.lg__grupo-cnpj { font-size: 12px; font-weight: 400; color: var(--lg-tinta3); white-space: nowrap; }
.lg__grupo-esperando { flex: none; min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center; font-size: 12px;
  line-height: 20px; background: var(--lg-azul); color: #fff; }
.lg__grupo-vazio, .lg__grupo-erro { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--lg-tinta3); }
.lg__grupo-erro { color: #b42318; }
.lg__grupo-erro[hidden], .lg__grupo-vazio[hidden] { display: none; }
.lg .wm-idiomas summary { font-size: 13px; color: var(--lg-tinta3); padding: 8px 10px; border-radius: 10px; }
.lg .wm-idiomas summary:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg__marca, .lg__nav > a, .wm-idiomas summary { flex: none; white-space: nowrap; }
/* tablet e notebook pequeno (721 a ~1280 px): o trilho encolhe e rola por dentro, nunca a pagina (auditoria 08/10: em 768 px
   toda tela rolava de lado porque os 9 itens + idioma + conta passavam de 1.200 px); a borda com item escondido esmaece */
.lg__nav { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.lg__nav::-webkit-scrollbar { display: none; }
.lg__nav > a { scroll-snap-align: center; }
.lg__acoes { flex: none; }
.lg__nav[data-rola="dir"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.lg__nav[data-rola="esq"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.lg__nav[data-rola="esq dir"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.lg a:focus-visible, .lg button:focus-visible, .lg summary:focus-visible { outline: 2px solid var(--lg-azul2); outline-offset: 2px; }
/* celular: marca e acoes numa linha; o trilho da navegacao embaixo, largura toda (antes passava por cima da marca) */
@media (max-width: 720px) {
  .lg__topo { flex-wrap: wrap; row-gap: 8px; padding: 8px; top: 8px; margin-bottom: 28px; }
  .lg__marca { padding-left: 6px; }
  .lg__acoes { margin-left: auto; }
  .lg__espaco-nome { display: none; }   /* celular: so o icone do espaco; o nome segue no aria-label */
  /* celular: a lista de espacos abre na largura do cabecalho, logo abaixo dele (antes saia pela borda da tela) */
  .lg__espaco { position: static; }
  .lg__espaco-menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  .lg__nav { order: 3; width: 100%; margin: 0; box-sizing: border-box; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; }
  .lg__nav::-webkit-scrollbar { display: none; }
  /* com mais itens do que cabem, o trilho rola de lado (o item atual e trazido para a vista pelo scroll-snap) */
  .lg__nav > a { flex: 1 0 auto; text-align: center; padding: 8px; font-size: 13px; scroll-snap-align: center; }
  /* item fora da vista: a borda daquele lado esmaece (sinal de que o trilho rola); nav-atual.js marca os lados */
  .lg__nav[data-rola="dir"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .lg__nav[data-rola="esq"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
  .lg__nav[data-rola="esq dir"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
}

/* titulos e avisos das paginas internas (perfil, apps conectados) */
.lg__titulo { margin: 0 0 var(--wm-space-8); font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.1; color: var(--lg-tinta); }
.lg__aviso { margin: 0 0 var(--wm-space-8); padding: var(--wm-space-4) var(--wm-space-6); border-radius: 14px;
  font-weight: var(--wm-font-weight-semibold); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.lg__aviso--ok { background: var(--wm-success-fill); color: var(--wm-success); }
.lg__aviso--erro { background: var(--wm-error-fill); color: var(--wm-error); }

/* ── Inicio: a pessoa e as duas portas ── */
.hub__hero { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); margin-bottom: clamp(32px, 6vh, 56px); }
.hub__eu { position: relative; flex: none; display: block; width: 112px; height: 112px; border-radius: 50%; text-decoration: none; }
.hub__anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hub__anel circle { fill: none; stroke-width: 4; }
.hub__anel-trilho { stroke: var(--lg-linha); }
/* o anel enche na entrada e acompanha o onboarding (o JS troca --hub-progresso a cada etapa respondida) */
.hub__anel-feito { stroke: var(--lg-azul); stroke-linecap: round; stroke-dasharray: 289.03;
  stroke-dashoffset: calc(289.03 * (1 - var(--hub-progresso)));
  animation: hub-anel 1.2s cubic-bezier(.16, 1, .3, 1) .2s backwards; transition: stroke-dashoffset .8s cubic-bezier(.16, 1, .3, 1); }
@keyframes hub-anel { from { stroke-dashoffset: 289.03; } }
.hub__rosto { position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  background: var(--lg-azul); box-shadow: 0 12px 28px -18px rgba(20, 45, 110, 0.55); }
.hub__rosto img { width: 100%; height: 100%; object-fit: cover; }
.hub__rosto .wm-icon { width: 40px; height: 40px; }
.hub__ola { margin: 0; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; color: var(--lg-tinta); }
.hub__sub { margin: 10px 0 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--lg-tinta2); }

.hub__portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.hub__porta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 220px; box-sizing: border-box;
  padding: 24px 26px 26px; border-radius: 28px; text-decoration: none; color: var(--lg-tinta);
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.hub__porta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--lg-brilho); }
.hub__porta:hover { transform: translateY(-3px); box-shadow: var(--lg-sombra-alta); }
.hub__porta-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 28px; }
/* ladrilho de cor chapada, como os icones do System Settings (a cor diz o assunto; brilho colorido nao) */
.hub__icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: #fff;
  background: var(--lg-azul); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(20, 45, 110, 0.2); }
.hub__icone--apps { background: var(--lg-violeta); }
.hub__icone--ia { background: linear-gradient(135deg, var(--lg-azul), var(--lg-violeta)); }
.hub__icone .wm-icon { width: 24px; height: 24px; }
.hub__seta { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--lg-tinta2); border: 1px solid var(--lg-linha); transition: transform .35s cubic-bezier(.16, 1, .3, 1), color .2s ease, background-color .2s ease; }
.hub__seta .wm-icon { width: 18px; height: 18px; }
.hub__porta:hover .hub__seta { transform: translateX(3px); color: #fff; background: var(--lg-azul); border-color: transparent; }
.hub__porta-titulo { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.hub__porta-desc { max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--lg-tinta2); }
.hub__etapas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hub__etapa { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--lg-tinta2); background: rgba(23, 50, 102, 0.05); border: 1px dashed rgba(23, 50, 102, 0.22); }
:root[data-theme="dark"] .hub__etapa { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }
.hub__etapa .wm-icon { width: 16px; height: 16px; }
.hub__etapa--feita { color: #1f9c6a; background: rgba(47, 174, 122, 0.1); border: 1px solid rgba(47, 174, 122, 0.25); }
:root[data-theme="dark"] .hub__etapa--feita { color: #5fd3a0; background: rgba(47, 174, 122, 0.14); border-color: rgba(47, 174, 122, 0.3); }
.hub__marcas { display: flex; margin-top: 14px; }
.hub__marca { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lg-fundo); box-shadow: 0 6px 14px -8px rgba(20, 45, 110, 0.5); color: var(--lg-tinta2); }
.hub__marca + .hub__marca { margin-left: -10px; }
.hub__marca img { width: 56%; height: 56%; object-fit: contain; }
.hub__marca .wm-icon { width: 18px; height: 18px; }

/* uma entrada so: a pessoa, depois as portas (e o anel enche) */
.hub__hero, .hub__porta { animation: hub-entra .7s cubic-bezier(.16, 1, .3, 1) backwards; }
.hub__porta:nth-child(1) { animation-delay: .08s; }
.hub__porta:nth-child(2) { animation-delay: .16s; }
.hub__porta:nth-child(3) { animation-delay: .24s; }
.hub__porta:nth-child(4) { animation-delay: .32s; }
@keyframes hub-entra { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 560px) {
  .hub__hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hub__eu { width: 88px; height: 88px; }
  .hub__rosto { inset: 8px; font-size: 24px; }
  .hub__porta { min-height: 0; padding: 20px; border-radius: 24px; }
  .hub__porta-topo { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg__blob, .hub__hero, .hub__porta, .hub__anel-feito, .onb { animation: none; }
  .hub__porta, .hub__seta, .hub__anel-feito { transition: none; }
}

/* o rosto sem foto (avatar do kit, no inicio e no perfil) e azul chapado como o do inicio, sem o degrade da marca */
.lg .wm-avatar { --wm-gradient-brand: var(--lg-azul); }
.lg .wm-avatar-upload__iniciais .wm-icon { width: 40%; height: 40%; }

/* ── Perfil (perfil.html): settings-group do kit no vidro da aurora; cada linha abre o dialogo dela.
   Desktop: a foto numa coluna ao lado (parada ao rolar), os grupos na outra; celular: uma coluna so. ── */
.lg .pf { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wm-space-10); }
.lg .lg__aviso:has(+ .pf) { max-width: 1040px; }
@media (min-width: 980px) {
  .lg .pf { grid-template-columns: 320px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: start; }
  .lg .pf > .pf__grupo:first-child { grid-row: 1 / span 3; position: sticky; top: 110px; }
}
.lg .pf .wm-settings-group { background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border-radius: 20px; box-shadow: inset 0 0 0 1px var(--lg-vidro-borda), var(--lg-sombra); }
.lg .pf .wm-settings-group__label, .lg .pf .wm-settings-group__footer { color: var(--lg-tinta2); }
.lg .pf .wm-settings-row__label { color: var(--lg-tinta); }
.lg .pf .wm-settings-row__desc { color: var(--lg-tinta2); }
.lg .pf .wm-settings-row + .wm-settings-row::before { border-top-color: var(--lg-linha); }
.pf__ladrilho--nome { background: #1d59f0; }
.pf__ladrilho--email { background: #020bb5; }
.pf__ladrilho--whatsapp { background: #30b67a; }
.pf__ladrilho--cpf { background: #8e8e93; }
.lg .pf .pf__vazio { color: var(--lg-tinta3); }
.pf__foto { padding: var(--wm-space-7); }
.pf__campos { display: grid; gap: var(--wm-space-5); margin-top: var(--wm-space-6); }
.pf__erro { margin: var(--wm-space-4) 0 0; min-height: 1.2em; color: var(--wm-error); font-size: var(--wm-font-size-footnote); }
.pf__dialogo { width: min(30rem, calc(100vw - 32px)); }
.pf__dialogo .wm-field { margin-top: var(--wm-space-3); }

/* ── Onboarding do inicio (_parciais/onboarding.html): o agentic-flow do kit num painel de vidro ── */
.onb { margin-bottom: clamp(24px, 4vh, 40px); padding: clamp(20px, 2.6vw, 32px); border-radius: 28px;
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); animation: hub-entra .7s cubic-bezier(.16, 1, .3, 1) .08s backwards; }
.onb[hidden] { display: none; }
.lg .onb .wm-agentic-flow__track-title { color: var(--lg-tinta2); }
/* quem pergunta e a Wortic: a marca num circulo branco (o kit pinta o avatar com o degrade da marca) */
.onb .wm-agentic-turn__avatar { background: #fff; box-shadow: inset 0 0 0 1px var(--lg-linha); }
.onb .wm-agentic-turn__avatar img { width: 70%; height: 70%; object-fit: contain; }
.lg .onb .wm-agentic-turn__bubble { background: var(--lg-vidro-forte); box-shadow: inset 0 0 0 1px var(--lg-vidro-borda); }
/* a pergunta na escala da pagina (o kit e denso, de app de mesa; aqui e a conversa que abre a conta) */
.onb .wm-agentic-turn__question { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.onb .wm-agentic-turn__hint { font-size: 14px; line-height: 1.5; }
.onb__dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--wm-space-4); }
.onb__codigo { display: grid; gap: var(--wm-space-3); }
.onb__codigo-texto { margin: 0; color: var(--lg-tinta2); }
.onb__codigo-campo { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.onb__codigo-acoes { display: flex; flex-wrap: wrap; gap: var(--wm-space-2); margin: 0; }
.onb__pronto { margin-top: var(--wm-space-5); }
.onb .wm-avatar-upload { max-width: none; }

/* ── Apps conectados (conexoes.html): lista do kit (oauth-connection-status --row) + confirmar sem JS ── */
.cx__titulo { margin-bottom: var(--wm-space-3); }
.cx__sub { margin: 0 0 var(--wm-space-8); max-width: 60rem; color: var(--wm-label-secondary); line-height: 1.6; }
/* a lista do kit corta o que passa da borda (overflow: hidden, pelos cantos); aqui a caixa de confirmar
   precisa sair por baixo, entao os cantos vao nas linhas das pontas */
.cx__lista { margin-bottom: var(--wm-space-9); overflow: visible; }
.cx__lista .wm-oauth-connection-status { max-width: none; }
.cx__lista > .wm-oauth-connection-status:first-child { border-start-start-radius: var(--wm-radius-lg); border-start-end-radius: var(--wm-radius-lg); }
.cx__lista > .wm-oauth-connection-status:last-child { border-end-start-radius: var(--wm-radius-lg); border-end-end-radius: var(--wm-radius-lg); }
.cx__pode { flex-wrap: wrap; row-gap: var(--wm-space-2); }
.cx__pode .wm-badge { margin-inline-start: var(--wm-space-2); }
.cx__confirmar { position: relative; }
.cx__confirmar summary { list-style: none; }
.cx__confirmar summary::-webkit-details-marker { display: none; }
.cx__confirmar[open] summary { background: var(--wm-fill-secondary); }
.cx__confirmar-caixa { position: absolute; right: 0; top: calc(100% + var(--wm-space-3)); z-index: 20; width: min(22rem, 80vw);
  box-sizing: border-box; padding: var(--wm-space-6); border-radius: var(--wm-radius-lg); background: var(--wm-surface-elevated);
  box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator), var(--wm-shadow-3); }
.cx__confirmar-caixa p { margin: 0 0 var(--wm-space-5); line-height: 1.5; }
.cx__vazio { margin-bottom: var(--wm-space-9); }
.cx__como { max-width: 60rem; padding: var(--wm-space-6) var(--wm-space-7); border-radius: var(--wm-radius-panel);
  background: var(--wm-fill-quaternary); }
.cx__como h2 { margin: 0 0 var(--wm-space-2); font-size: var(--wm-font-size-headline); font-weight: var(--wm-font-weight-semibold); }
.cx__como p { margin: 0 0 var(--wm-space-4); color: var(--wm-label-secondary); line-height: 1.6; }
.cx__url { display: inline-block; padding: var(--wm-space-2) var(--wm-space-4); border-radius: var(--wm-radius-md);
  background: var(--wm-surface-primary); font-size: var(--wm-font-size-subheadline); user-select: all; }

/* ── Paginas internas no mesmo vidro: os paineis do kit (lista de apps, vazio, conectar)
   deixam o cinza opaco e ficam iguais as portas do inicio. Central.css fora de @layer: vence o kit. ── */
.lg .wm-oauth-connection-status__list, .lg .cx__vazio, .lg .cx__como {
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); border-radius: 28px; }
.lg .cx__sub, .lg .cx__como p { color: var(--lg-tinta2); }
.lg .wm-oauth-connection-status__list .wm-oauth-connection-status--row { background: transparent; padding: 18px 22px; }
.lg .wm-oauth-connection-status__list .wm-oauth-connection-status--row + .wm-oauth-connection-status--row {
  box-shadow: inset 0 1px 0 var(--lg-linha); }
.lg .wm-oauth-connection-status__name, .lg .cx__como h2 { color: var(--lg-tinta); }
.lg .wm-oauth-connection-status__icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; }
.lg .cx__como { padding: 24px 26px; }
.lg .cx__url { background: var(--lg-vidro-forte); color: var(--lg-tinta); border: 1px solid var(--lg-linha); }
.lg .cx__confirmar-caixa { background: var(--lg-vidro-forte); backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra-alta); border-radius: 20px; }
.lg .cx__vazio { padding: 40px 24px; }

/* ── Receber pagamentos (recebimentos.html): padrao OAuth do kit. Convite = oauth-consent (marca do provedor · elo ·
   Wortic) em duas colunas: a promessa e o botao a esquerda, o transfer-flow (R$ indo do checkout Wortic para a conta
   Mercado Pago) a direita; no celular empilha. Conectado = a linha de status do kit com o logo + o fluxo concluido. ── */
.rc__logo { display: block; width: 72%; height: 72%; margin: auto; object-fit: contain; }
.rc__logo--mp { background: #00B1EA;   /* cor_marca do mercadopago.svg em assets/brands/brands.json */
  -webkit-mask: url(/assets/brands/mercadopago.svg) center / contain no-repeat; mask: url(/assets/brands/mercadopago.svg) center / contain no-repeat; }
.wm-oauth-connection-status__icon .rc__logo, .wm-oauth-consent__actor-icon .rc__logo { width: 70%; height: 70%; }

.rc__convite { max-width: 68rem; margin: 0 0 var(--wm-space-9); display: grid; gap: var(--wm-space-6) var(--wm-space-10);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "head fluxo" "fatos fluxo" "acoes fluxo" "legal legal"; align-items: start; }
.rc__convite > .wm-oauth-consent__head { grid-area: head; align-items: flex-start; text-align: start; }
.rc__convite .wm-oauth-consent__actors { margin-bottom: var(--wm-space-2); }
.rc__convite .wm-oauth-consent__title { max-width: 26ch; }
.rc__convite > .rc__fluxo { grid-area: fluxo; align-self: center; margin: 0; }
.rc__convite > .rc__fatos { grid-area: fatos; }
.rc__convite > .rc__acoes { grid-area: acoes; }
.rc__convite > .wm-oauth-consent__legal { grid-area: legal; text-align: start; }
@media (max-width: 760px) {
  .rc__convite { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fluxo" "fatos" "acoes" "legal"; }
  .rc__convite > .wm-oauth-consent__head { align-items: center; text-align: center; }
  .rc__convite .wm-oauth-consent__title { max-width: none; }
  .rc__convite > .wm-oauth-consent__legal { text-align: center; }
}

.rc__convite .rc__fluxo { max-width: none; background: var(--wm-fill-quaternary); box-shadow: none; }
.rc__fluxo { max-width: none; margin-bottom: var(--wm-space-9); }
.rc__fluxo .wm-transfer-flow__endpoint { min-width: 8.5rem; }
.rc__fluxo .wm-transfer-flow__endpoint-label { text-align: center; }
.rc__marca { padding: 0; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px var(--wm-separator); }
.wm-transfer-flow--concluido .rc__marca { box-shadow: inset 0 0 0 2px var(--wm-success); }
.wm-transfer-flow--erro .rc__marca { box-shadow: inset 0 0 0 2px var(--wm-warning); }
.rc__pacote { inline-size: auto; padding: 0 5px; font-size: 10px; font-weight: var(--wm-font-weight-bold);
  letter-spacing: .02em; color: var(--wm-success); font-variant-numeric: tabular-nums; }
.rc__fatos { display: grid; gap: var(--wm-space-4); margin: 0; padding: 0; list-style: none; }
.rc__fatos li { display: flex; align-items: flex-start; gap: var(--wm-space-4); line-height: 1.5; color: var(--wm-label-secondary); }
.rc__fatos .wm-icon { flex: none; margin-top: 2px; color: var(--wm-accent); }
.rc__acoes .rc__conectar { gap: var(--wm-space-3); }
.rc__conectar-marca { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: #fff; overflow: hidden; }
.rc__conectar-marca .rc__logo { width: 80%; height: 80%; }
.lg .rc__convite, .lg .rc__fluxo:not(.rc__convite .rc__fluxo) {
  background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); border-radius: 28px; }
.lg .rc__convite { padding: 36px 34px; }
.lg .rc__convite .rc__fluxo { background: var(--lg-vidro-forte); border: 1px solid var(--lg-linha); border-radius: 20px; }
.lg .rc__convite .wm-oauth-consent__title, .lg .wm-transfer-flow__title, .lg .wm-transfer-flow__endpoint-label { color: var(--lg-tinta); }
.lg .rc__convite .wm-oauth-consent__subtitle, .lg .rc__fatos li { color: var(--lg-tinta2); }

/* ── Regras de negocio (admin-regras.html): escopo, comissoes, taxas e parametros; cada linha e um formulario. ── */
.rg__escopo { display: flex; align-items: flex-end; gap: var(--wm-space-4); margin: 0 0 var(--wm-space-8); max-width: 34rem; }
.rg__escopo .wm-field-group { flex: 1; }
.rg__secao { margin: 0 0 var(--wm-space-9); padding: var(--wm-space-7); border-radius: var(--wm-radius-panel); background: var(--wm-fill-quaternary); }
.rg__secao h2 { margin: 0 0 var(--wm-space-2); font-size: var(--wm-font-size-title3); font-weight: var(--wm-font-weight-semibold); }
.rg__desc { margin: 0 0 var(--wm-space-6); color: var(--wm-label-secondary); line-height: 1.55; max-width: 60rem; }
.rg__grupo { margin: var(--wm-space-6) 0 var(--wm-space-3); font-size: var(--wm-font-size-headline); }
.rg__linhas { display: grid; gap: var(--wm-space-3); }
.rg__linha { display: grid; grid-template-columns: minmax(10rem, 1.3fr) repeat(4, minmax(6.5rem, 1fr)) auto auto; gap: var(--wm-space-4);
  align-items: end; padding: var(--wm-space-4) var(--wm-space-5); border-radius: var(--wm-radius-lg); background: var(--wm-surface-primary);
  box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator); }
.rg__linha--taxa { grid-template-columns: minmax(10rem, 1.3fr) repeat(2, minmax(7rem, 1fr)) auto; }
.rg__linha--nova { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: var(--wm-space-4); }
.rg__linha--parametro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.rg__nome { display: grid; gap: 2px; align-content: center; align-self: center; justify-items: start; }
.rg__sub { font-size: var(--wm-font-size-caption); color: var(--wm-label-secondary); }
.rg__campo .wm-field-group__label { font-size: var(--wm-font-size-caption); }
.rg__recorrente { align-self: center; }
.rg__acoes-linha { display: flex; align-items: center; gap: var(--wm-space-3); flex-wrap: wrap; justify-content: flex-end; }
.rg__chave { font-size: var(--wm-font-size-caption2); color: var(--wm-label-tertiary); }
.rg__campo .wm-field:has(> textarea) { height: auto; align-items: stretch; padding-block: var(--wm-space-2); }
.rg__lista { min-height: 4.5rem; resize: vertical; font-family: inherit; line-height: 1.5; white-space: pre; overflow: auto; }
.rg__parametro { display: grid; gap: var(--wm-space-2); }
.rg__herdar { justify-self: end; }
.rg__nova summary { list-style: none; margin-top: var(--wm-space-4); }
.rg__nova summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .rg__linha, .rg__linha--taxa, .rg__linha--parametro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg__nome, .rg__acoes-linha { grid-column: 1 / -1; }
}
.lg .rg__secao { background: var(--lg-vidro); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid var(--lg-vidro-borda); box-shadow: var(--lg-sombra); border-radius: 28px; }
.lg .rg__linha { background: var(--lg-vidro-forte); box-shadow: none; border: 1px solid var(--lg-linha); border-radius: 18px; }
.lg .rg__secao h2, .lg .rg__grupo { color: var(--lg-tinta); }
.lg .rg__desc { color: var(--lg-tinta2); }

/* Sino do cabecalho (layouts/logado.html, notificacoes.js): o numero de nao lidas e o painel de vidro. */
.lg [hidden] { display: none !important; }
.lg__notif { position: relative; display: inline-flex; }
.lg__notif-botao { position: relative; }
.lg__notif-numero { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; color: #fff; background: var(--lg-azul);
  box-shadow: 0 0 0 2px var(--lg-fundo); }
.lg__notif-painel { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 520px); box-sizing: border-box; padding: 12px; border-radius: 14px;
  background: var(--lg-vidro-forte, #fff); border: 1px solid var(--lg-linha, #e6e9f0); box-shadow: var(--lg-sombra-alta); }
.lg__notif-titulo { margin: 0; padding: 2px 4px 0; font-size: 14px; font-weight: 700; color: var(--lg-tinta); }
.lg__notif-filtros { display: flex; gap: 6px; }
.lg__notif-filtro { font: inherit; font-size: 13px; font-weight: 600; color: var(--lg-tinta2); background: none; cursor: pointer;
  border: 1px solid var(--lg-linha); border-radius: 999px; padding: 5px 12px; }
.lg__notif-filtro:hover { color: var(--lg-tinta); background: rgba(23, 50, 102, 0.06); }
.lg__notif-filtro[aria-pressed="true"] { color: #fff; background: var(--lg-azul); border-color: var(--lg-azul); }
.lg__notif-aviso { margin: 0; padding: 8px 4px; font-size: 13.5px; color: var(--lg-tinta2); }
.lg__notif-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 0; overflow-y: auto; }
.lg__notif-item { border-radius: 10px; }
.lg__notif-item--nova { background: rgba(29, 89, 240, 0.08); }
.lg__notif-link { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--lg-tinta); text-decoration: none; }
a.lg__notif-link:hover { background: rgba(23, 50, 102, 0.06); }
.lg__notif-titulo-item { font-size: 14px; font-weight: 600; }
.lg__notif-empresa { font-size: 12px; font-weight: 600; color: var(--lg-azul); }
.lg__notif-texto { color: var(--lg-tinta2); line-height: 1.4; }
.lg__notif-quando { font-size: 12px; color: var(--lg-tinta3); }
.lg__notif-rodape { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--lg-linha); }
.lg__notif-acao { font: inherit; font-size: 13px; font-weight: 600; color: var(--lg-azul); background: none; cursor: pointer;
  border: 0; border-radius: 8px; padding: 6px 8px; }
.lg__notif-acao:hover { background: rgba(23, 50, 102, 0.06); }
.lg__notif-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barra de abas do celular: so em tela estreita (embaixo, ao alcance do polegar). */
.lg__abas { display: none; }
@media (max-width: 720px) {
  /* a barra fica por cima do fim da página: a página ganha o espaço dela embaixo. Na conversa (e no /montar, que também
     tem o campo fixo embaixo) a barra não aparece, para não cobrir o campo de escrever. */
  .lg:has(.lg__abas) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .lg:has([data-chat]) .lg__abas, .lg:has([data-mt]) .lg__abas { display: none; }
  .lg:has([data-chat]), .lg:has([data-mt]) { padding-bottom: 0; }
  .lg__abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--lg-fundo, #fff); border-top: 1px solid var(--lg-linha); }
  .lg__aba { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 4px 2px;
    font-size: 12px; font-weight: 600; color: var(--lg-tinta2); text-decoration: none; border-radius: 10px; }
  .lg__aba .wm-icon { width: 22px; height: 22px; }
  .lg__aba.is-on { color: var(--lg-azul); }
}

/* ── Movimento da Central (taste skill + motion-de-interface): só transform e opacity, ease-out forte, abaixo de 300 ms
   no que a pessoa usa todo dia. Quem pede menos movimento (prefers-reduced-motion) fica com troca curta de opacidade. ──
   Troca de tela: a página que sai esmaece e a que entra sobe 6 px (View Transitions entre documentos; navegador sem
   suporte troca seco, como antes). A pílula do item ativo do menu desliza do item antigo para o novo. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .lg__nav > a[aria-current="page"] { view-transition-name: lg-nav-ativo; }
  ::view-transition-group(lg-nav-ativo) { animation-duration: .32s; animation-timing-function: var(--lg-sai, ease-out); }
  ::view-transition-old(root) { animation: lg-vt-sai .16s ease-out both; }
  ::view-transition-new(root) { animation: lg-vt-entra .28s cubic-bezier(0.23, 1, 0.32, 1) both; }
}
@keyframes lg-vt-sai { to { opacity: 0; } }
@keyframes lg-vt-entra { from { opacity: 0; transform: translateY(6px); } }

/* menus do cabeçalho (conta, espaço, sino, idioma): abrem saindo do botão que os chamou, com escala 0.96 e opacidade */
@keyframes lg-pop { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.lg__conta[open] > .lg__conta-menu { transform-origin: top right; animation: lg-pop .18s var(--lg-sai) both; }
.lg__espaco-troca[open] > .lg__espaco-menu { transform-origin: top left; animation: lg-pop .18s var(--lg-sai) both; }
.lg__mais[open] > .lg__mais-menu { transform-origin: top right; animation: lg-pop .18s var(--lg-sai) both; }
.lg__mais[open] .lg__espaco-seta { transform: rotate(180deg); }
.lg__notif-painel:not([hidden]) { transform-origin: top right; animation: lg-pop .2s var(--lg-sai) both; }
.wm-idiomas[open] nav { transform-origin: top right; animation: lg-pop .18s var(--lg-sai) both; }
.lg__conta-seta, .lg__espaco-seta { transition: transform .2s var(--lg-sai); }
.lg__conta[open] .lg__conta-seta, .lg__espaco-troca[open] .lg__espaco-seta { transform: rotate(180deg); }
/* itens dos menus e botões do cabeçalho: resposta ao toque (press 120 ms) */
.lg__conta-menu a, .lg__espaco-menu a, .lg__grupo-item, .lg__notif-link, .lg__tema, .lg__sair { transition: background-color .15s ease, color .15s ease, transform .12s ease; }
.lg__tema:active, .lg__conta > summary:active, .lg__nav > a:active { transform: scale(.96); }
.lg__nav > a { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .12s ease; }
/* barra de abas do celular: o ícone da aba atual ganha um traço da marca embaixo */
.lg__aba { position: relative; transition: color .2s ease, transform .12s ease; }
.lg__aba:active { transform: scale(.94); }
.lg__aba.is-on::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px;
  background: var(--lg-azul); animation: lg-traco .3s var(--lg-sai) both; }
@keyframes lg-traco { from { transform: scaleX(0); } }

/* esqueleto de carregando, comum às telas (nicho, operação, vendas): a forma do que vem (linhas de tabela) e um brilho
   que passa por cima; o texto "Carregando" segue para o leitor de tela, escondido da vista */
.lg-esqueleto, [data-carregando] ~ .nt__peca:empty, [data-carregando] ~ [data-op-alvo]:empty { display: block; position: relative; overflow: hidden; min-height: 280px; border-radius: 20px; background: var(--lg-vidro, rgba(255, 255, 255, .7));
  border: 1px solid var(--lg-vidro-borda, #e3e8f2); box-shadow: var(--lg-sombra, 0 18px 40px -26px rgba(20, 45, 110, .35)); }
.lg-esqueleto::before, [data-carregando] ~ .nt__peca:empty::before, [data-carregando] ~ [data-op-alvo]:empty::before { content: ""; position: absolute; inset: 22px 24px; border-radius: 10px;
  background:
    linear-gradient(var(--lg-linha, rgba(23, 50, 102, .12)), var(--lg-linha, rgba(23, 50, 102, .12))) 0 0 / 38% 14px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 46px, rgba(23, 50, 102, .07) 46px 60px) 0 34px / 100% calc(100% - 34px) no-repeat; }
.lg-esqueleto::after, [data-carregando] ~ .nt__peca:empty::after, [data-carregando] ~ [data-op-alvo]:empty::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  animation: lg-brilho 1.4s ease-in-out infinite; }
:root[data-theme="dark"] .lg-esqueleto::after, :root[data-theme="dark"] [data-carregando] ~ :empty::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%); }
@keyframes lg-brilho { to { transform: translateX(100%); } }
.lg-so-leitor, [data-carregando]:has(~ .nt__peca:empty), [data-carregando]:has(~ [data-op-alvo]:empty) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lg__conta-menu, .lg__espaco-menu, .lg__notif-painel, .wm-idiomas nav, .lg__aba.is-on::after { animation: lg-so-opacidade .12s linear both; }
  .lg-esqueleto::after, [data-carregando] ~ :empty::after { animation: none; display: none; }
  .lg__conta-seta, .lg__espaco-seta, .lg__aba, .lg__nav > a { transition: none; }
  .lg__tema:active, .lg__conta > summary:active, .lg__nav > a:active, .lg__aba:active { transform: none; }
}
@keyframes lg-so-opacidade { from { opacity: 0; } }

/* menus da conta e do sino: opacos como o de espaço (o vidro de 80 % deixava ler o botão e o texto da página por trás) */
.lg__conta-menu, .lg__notif-painel { background: linear-gradient(var(--lg-vidro-forte, #fff), var(--lg-vidro-forte, #fff)), var(--lg-fundo, #fff); }

/* T6066: a faixa do admin geral numa conta de demonstração (layouts/logado.html) */
.lg__demo { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 16px; max-width: 960px;
  padding: 8px 14px; border-radius: 12px; background: var(--lg-azul-claro); color: var(--lg-azul); font-size: 14px; }
.lg__demo-voltar { border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }