/* Casca dos sistemas Link Finance em subdomínio: a moldura do sistema principal
   (barra flutuante, brilho da marca, entrada dos blocos) e a tela de entrada.
   Usa os tokens de tema.css; a única cor escrita aqui é o dourado do nome "Finance" (abaixo),
   que a identidade pede e o tema.css não traz como token. */

/* dourado de texto da identidade (Design/identidade.md): gold-ink no claro, gold-light no escuro */
:root { --lf-ouro-texto: #8A6425; }
html[data-tema="escuro"] { --lf-ouro-texto: #D6A85C; }

html { background: var(--sis-fundo); }
/* Dentro do sistema a barra flutuante ocupa o topo da janela: o que o navegador ou o sistema trouxer para
   a vista (âncora, campo com foco, scrollIntoView) para abaixo dela, e não atrás. */
html.lf-sistema { scroll-padding-top: 84px; }
/* o fundo fica no <html>: assim o brilho da marca aparece atrás do conteúdo */
html body { margin: 0; min-height: 100dvh; background: transparent; color: var(--sis-texto); font-family: var(--sis-fonte); }

.lf-brilho {
  position: fixed; inset: 0 0 auto 0; height: 440px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 320px at 18% -120px, color-mix(in oklch, var(--sis-marca-de) 16%, transparent), transparent 70%),
    radial-gradient(900px 320px at 82% -140px, color-mix(in oklch, var(--sis-marca-ate) 13%, transparent), transparent 70%);
}

/* Foco pelo teclado. O anel do tema é um box-shadow, e qualquer botão com sombra própria nos ajustes
   de cada sistema o apagava: aqui ele pesa mais que essas regras. */
html body :is(button, a, [role="tab"], [role="button"], summary):focus-visible { outline: none; box-shadow: var(--sis-anel); }

/* ---------- barra flutuante ---------- */
/* Os sistemas têm regras gerais para button e a; dentro da casca elas não valem.
   :where() não pesa na conta, então as regras abaixo (uma classe cada) vencem esta limpeza. */
.lf-barra, .lf-barra *, .lf-aviso, .lf-aviso *, .lf-bloqueio, .lf-bloqueio * { box-sizing: border-box; }
.lf-barra :where(button, a), .lf-aviso :where(button, a), .lf-bloqueio :where(button, a) { all: unset; box-sizing: border-box; cursor: pointer; }
.lf-barra :where(button, a):focus-visible, .lf-aviso :where(button, a):focus-visible, .lf-bloqueio :where(button, a):focus-visible { box-shadow: var(--sis-anel); }
.lf-barra :where(hr) { display: block; }
.lf-barra :where(svg) { display: block; flex: none; }

.lf-barra {
  position: sticky; top: 12px; z-index: 40; margin: 12px 0 0; padding: 0 12px;
  font: 400 14px/1.4 var(--sis-fonte); color: var(--sis-texto); text-align: left; letter-spacing: normal;
}
.lf-barra-in {
  display: flex; align-items: center; gap: 6px; box-sizing: border-box;
  height: 56px; max-width: 1400px; margin: 0 auto; padding: 0 8px;
  border: 1px solid color-mix(in oklch, var(--sis-borda) 70%, transparent); border-radius: 16px;
  background: color-mix(in oklch, var(--sis-fundo) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--sis-sombra-2);
  transition: box-shadow .3s, background-color .3s, border-color .3s;
}
.lf-barra.rolou .lf-barra-in {
  border-color: var(--sis-borda);
  background: color-mix(in oklch, var(--sis-fundo) 86%, transparent);
  box-shadow: var(--sis-sombra-3);
}
.lf-marca {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 10px;
  color: var(--sis-texto); text-decoration: none; transition: opacity var(--sis-transicao); flex: none;
}
.lf-marca:hover { opacity: .8; }
/* nome ao lado da logo: "Link" na cor do texto e "Finance" em dourado, Fraunces 600 (identidade) */
.lf-palavra { font-family: "Fraunces", Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.lf-palavra span { color: var(--lf-ouro-texto); font-weight: 600; }
/* a logo (Design/link-icone.svg): quadrada, cantos já arredondados no próprio desenho */
.lf-logo-link { display: block; flex: none; border-radius: 26%; box-shadow: var(--sis-sombra-2); }
.lf-div { width: 1px; height: 20px; margin: 0 6px; background: var(--sis-borda); flex: none; }
.lf-sistema { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.lf-sistema b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-sistema small { font-size: 11.5px; color: var(--sis-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-acoes { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }

/* As seções do próprio sistema, quando cabem, vêm para dentro da barra (casca.js as traz e devolve):
   o mesmo menu flutuante do sistema principal. O que vale aqui pesa mais que o estilo de cada sistema. */
.lf-vaga { display: flex; align-items: center; flex: 1 1 0; min-width: 0; height: 36px; margin: 0 6px; overflow: hidden; }
.lf-vaga[hidden] { display: none; }
.lf-barra .lf-vaga > * { all: unset; display: flex; align-items: center; gap: 2px; flex: none; }
html.lf-menu-na-barra .lf-vaga::before { content: ""; flex: none; width: 1px; height: 20px; margin-right: 8px; background: var(--sis-borda); }
.lf-barra .lf-vaga button, .lf-barra .lf-vaga a {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 36px; padding: 0 11px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  font: 500 13px/1 var(--sis-fonte); color: color-mix(in oklch, var(--sis-texto) 70%, transparent);
  transition: background var(--sis-transicao), color var(--sis-transicao);
}
.lf-barra .lf-vaga button:hover, .lf-barra .lf-vaga a:hover { color: var(--sis-texto); }
.lf-barra .lf-vaga button:is([aria-selected="true"], [aria-current="true"], [aria-pressed="true"], .active) { background: var(--sis-realce); color: var(--sis-sobre-realce); }
.lf-barra .lf-vaga button:focus-visible { box-shadow: var(--sis-anel); }
html.lf-menu-na-barra .lf-sistema small { display: none; }
html.lf-menu-na-barra .lf-estado:is([data-estado="salvo"], [data-estado="salvando"]) span { display: none; }
html.lf-menu-na-barra .lf-estado:is([data-estado="salvo"], [data-estado="salvando"]) { padding: 0 9px; }

.lf-estado {
  display: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-right: 4px;
  border: 1px solid var(--sis-borda); border-radius: 999px; background: var(--sis-cartao);
  font-size: 12px; color: var(--sis-texto-2); white-space: nowrap;
}
.lf-estado[data-estado] { display: inline-flex; }
.lf-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--sis-positivo); flex: none; }
.lf-estado[data-estado="salvando"] i, .lf-estado[data-estado="tentando"] i { background: var(--sis-aviso); animation: lf-pulso 1s ease-in-out infinite; }
.lf-estado[data-estado="tentando"] { border-color: color-mix(in oklch, var(--sis-aviso) 45%, transparent); }
.lf-estado[data-estado="erro"] { color: var(--sis-negativo); border-color: color-mix(in oklch, var(--sis-negativo) 35%, transparent); }
.lf-estado[data-estado="erro"] i { background: var(--sis-negativo); }

.lf-icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--sis-texto); cursor: pointer; transition: background var(--sis-transicao), transform var(--sis-transicao);
}
.lf-icone:hover { background: var(--sis-realce); }
.lf-icone:active { transform: scale(.96); }
.lf-icone svg { width: 18px; height: 18px; transition: transform .3s, opacity .3s; }
.lf-icone .lua { position: absolute; opacity: 0; transform: rotate(90deg) scale(0); }
html[data-tema="escuro"] .lf-icone .sol { opacity: 0; transform: rotate(-90deg) scale(0); }
html[data-tema="escuro"] .lf-icone .lua { opacity: 1; transform: none; }

.lf-usuario { position: relative; margin-left: 2px; flex: none; }
.lf-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--sis-borda); border-radius: 50%; cursor: pointer;
  background: linear-gradient(120deg, var(--sis-marca-de), var(--sis-marca-ate));
  color: #fff; font: 600 12px/1 var(--sis-fonte); letter-spacing: .01em;
  transition: transform var(--sis-transicao);
}
.lf-avatar:hover { transform: scale(1.05); }
.lf-avatar:active { transform: scale(.95); }
.lf-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 244px; padding: 4px; box-sizing: border-box;
  border: 1px solid var(--sis-borda); border-radius: 12px; background: var(--sis-cartao); color: var(--sis-texto);
  box-shadow: var(--sis-sombra-3); transform-origin: top right;
  animation: lf-surgir .16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lf-menu[hidden] { display: none; }
.lf-menu-topo { padding: 8px 10px 9px; }
.lf-menu-topo b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-menu-topo small { display: block; margin-top: 2px; font-size: 12px; color: var(--sis-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-menu hr { height: 1px; margin: 4px -4px; border: 0; background: var(--sis-borda); }
.lf-menu a, .lf-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--sis-texto);
  font: 400 14px/1.2 var(--sis-fonte); text-align: left; text-decoration: none; cursor: pointer;
}
.lf-menu a:hover, .lf-menu button:hover, .lf-menu a:focus-visible, .lf-menu button:focus-visible { background: var(--sis-rebaixado); box-shadow: none; }
.lf-menu svg { width: 16px; height: 16px; color: var(--sis-texto-suave); flex: none; }
.lf-menu em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--sis-texto-suave); }
.lf-menu .perigo, .lf-menu .perigo svg { color: var(--sis-negativo); }
.lf-menu .perigo:hover { background: var(--sis-negativo-suave); }

/* Gravação parada (casca.js): o conteúdo fica apagado e sem responder até a pessoa resolver pelo aviso.
   Continuar editando daria a impressão de que o trabalho está sendo salvo. */
html.lf-travado body > :not(.lf-barra):not(.lf-aviso):not(.lf-brilho):not(.lf-bloqueio) { opacity: .45; pointer-events: none; user-select: none; }

/* ---------- aviso (falha ao salvar, sessão encerrada) ---------- */
.lf-aviso {
  position: fixed; left: 50%; bottom: 20px; z-index: 2147483000; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; box-sizing: border-box;
  width: min(680px, calc(100vw - 24px)); padding: 12px 14px;
  border: 1px solid color-mix(in oklch, var(--sis-negativo) 35%, transparent); border-radius: 14px;
  background: var(--sis-cartao); color: var(--sis-texto); box-shadow: var(--sis-sombra-3);
  font: 14px/1.4 var(--sis-fonte); animation: lf-subir .3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.lf-aviso p { flex: 1 1 260px; margin: 0; }
.lf-aviso div { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--sis-borda); border-radius: var(--sis-raio); background: var(--sis-cartao); color: var(--sis-texto);
  font: 500 14px/1 var(--sis-fonte); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sis-sombra-1); transition: background var(--sis-transicao), transform var(--sis-transicao), box-shadow var(--sis-transicao);
}
.lf-botao:hover { background: var(--sis-rebaixado); }
.lf-botao:active { transform: scale(.98); }
.lf-botao.primario { border-color: transparent; background: var(--sis-primaria); color: var(--sis-sobre-primaria); }
.lf-botao.primario:hover { background: var(--sis-primaria-forte); }
.lf-botao[disabled] { opacity: .6; pointer-events: none; }

/* enquanto os dados da empresa chegam (casca.js), o conteúdo espera: sem isto o exemplo de fábrica
   piscaria na tela antes do trabalho salvo */
html.lf-carregando body > :not(.lf-barra):not(.lf-aviso):not(.lf-brilho):not(.glass-system-loader):not(.lf-bloqueio):not(.lfg-dlg) { opacity: 0; visibility: hidden; transition: none; }
/* se a resposta demora (rede de celular, lista grande), a tela diz o que está fazendo em vez de ficar em branco;
   o texto só aparece depois de meio segundo, para não piscar em toda abertura */
html.lf-carregando:not(.lf-sem-dados) body::after {
  content: "Abrindo os dados da empresa…"; position: fixed; inset: 0; z-index: 1; display: grid; place-items: center;
  font: 500 14px/1.4 var(--sis-fonte); color: var(--sis-texto-suave); pointer-events: none;
  animation: lf-aparecer .3s ease-out .5s backwards;
}
/* Com a identidade visual (design/glass.css) quem avisa é o carregador dela, que esconde o texto acima. A regra que
   esconde o conteúdo também o pegava (é mais específica), e as duas juntas deixavam a tela vazia: ele fica de fora
   e aparece com o mesmo meio segundo de espera do texto. */
html.lf-carregando:not(.lf-sem-dados) body > .glass-system-loader { animation: lf-aparecer .3s ease-out .5s backwards; }
:where(body > :not(.lf-barra, .lf-aviso, .lf-brilho, .lf-bloqueio)) { transition: opacity .25s ease-out; }

/* Enquanto o Link Finance não confirma que o sistema está liberado para a empresa (casca.js), o conteúdo
   espera do mesmo jeito: um sistema bloqueado pelo painel não pode aparecer nem por um instante. Se a
   resposta demora, o carregador da identidade visual aparece depois do mesmo meio segundo. */
html.lf-conferindo body > :not(.lf-barra):not(.lf-aviso):not(.lf-brilho):not(.glass-system-loader):not(.lf-bloqueio):not(.lfg-dlg) { opacity: 0; visibility: hidden; transition: none; }
html.lf-conferindo:not(.lf-bloqueado) body > .glass-system-loader {
  display: flex; position: fixed; inset: 88px 0 0; z-index: 10; align-items: center; justify-content: center; flex-direction: column;
  opacity: 1; visibility: visible; background: var(--glass-ground, var(--sis-fundo)); color: var(--glass-ink, var(--sis-texto));
  animation: lf-aparecer .3s ease-out .5s backwards;
}

/* ---------- sistema bloqueado para a empresa (casca.js: bloquear) ----------
   Sai de vista tudo o que não é a tela de bloqueio, inclusive a barra (o menu do sistema pode estar
   dentro dela). display:none, e não visibility: nenhum pedaço do sistema consegue reaparecer por cima. */
html.lf-bloqueado, html.lf-bloqueado body { overflow: hidden; }
html.lf-bloqueado body > :not(.lf-bloqueio) { display: none !important; }
.lf-bloqueio {
  position: fixed; inset: 0; z-index: 2147483001; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--sis-fundo); color: var(--sis-texto); font: 400 14px/1.5 var(--sis-fonte); text-align: left; letter-spacing: normal;
}
.lf-bloqueio::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 440px; pointer-events: none;
  background:
    radial-gradient(900px 320px at 18% -120px, color-mix(in oklch, var(--sis-marca-de) 16%, transparent), transparent 70%),
    radial-gradient(900px 320px at 82% -140px, color-mix(in oklch, var(--sis-marca-ate) 13%, transparent), transparent 70%);
}
.lf-bloqueio > * { position: relative; }
.lf-bloqueio-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.lf-bloqueio .lf-logo { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px; border-radius: 10px; color: var(--sis-texto); }
.lf-bloqueio .lf-palavra { display: inline; }
.lf-bloqueio-centro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 16px 64px; }
.lf-bloqueio-cartao {
  width: 100%; max-width: 460px; padding: 36px 32px 28px; text-align: center;
  border: 1px solid var(--sis-borda); border-radius: 20px; box-shadow: var(--sis-sombra-3);
  background: color-mix(in oklch, var(--sis-cartao) 88%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  animation: lf-subir .5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.lf-bloqueio-selo {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 20px;
  border: 1px solid var(--sis-borda); border-radius: 14px; background: var(--sis-rebaixado); color: var(--sis-texto-2);
}
.lf-bloqueio-selo svg { width: 22px; height: 22px; }
.lf-bloqueio .lf-bloqueio-cartao h1 { margin: 0 0 10px; font: 600 22px/1.25 var(--sis-fonte); letter-spacing: -0.02em; color: var(--sis-texto); text-wrap: balance; }
.lf-bloqueio .lf-bloqueio-cartao h1:focus { outline: none; box-shadow: none; }
.lf-bloqueio .lf-bloqueio-texto { margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--sis-texto-suave); text-wrap: pretty; }
.lf-bloqueio .lf-bloqueio-texto b { font-weight: 600; color: var(--sis-texto); }
.lf-bloqueio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lf-bloqueio-acoes .lf-botao svg { width: 16px; height: 16px; flex: none; }
.lf-bloqueio .lf-bloqueio-quem { margin: 20px 0 0; font-size: 12.5px; color: var(--sis-texto-suave); overflow-wrap: anywhere; }
.lf-bloqueio .lf-bloqueio-quem[hidden] { display: none; }
@media (max-width: 640px) {
  .lf-bloqueio-topo { padding: 12px 16px; }
  .lf-bloqueio-centro { align-items: flex-start; padding: 24px 16px 40px; }
  .lf-bloqueio-cartao { padding: 28px 20px 22px; }
  .lf-bloqueio .lf-bloqueio-cartao h1 { font-size: 20px; }
  .lf-bloqueio-acoes .lf-botao { flex: 1 1 100%; height: 40px; }
}

/* ---------- entrada dos blocos (a mesma cascata do sistema) ---------- */
/* "backwards": terminada a entrada não sobra efeito no bloco — um transform preso prenderia
   menus e janelas do sistema atrás do bloco seguinte */
.lf-entrada > * { animation: lf-subir .5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.lf-entrada > *:nth-child(2) { animation-delay: 45ms; }
.lf-entrada > *:nth-child(3) { animation-delay: 90ms; }
.lf-entrada > *:nth-child(4) { animation-delay: 135ms; }
.lf-entrada > *:nth-child(5) { animation-delay: 180ms; }
.lf-entrada > *:nth-child(n + 6) { animation-delay: 225ms; }
@keyframes lf-subir { from { opacity: 0; transform: translateY(8px); } }
.lf-aviso { animation-name: lf-subir-centro; }
@keyframes lf-subir-centro { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes lf-surgir { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes lf-pulso { 50% { opacity: .35; } }
@keyframes lf-girar { to { transform: rotate(360deg); } }
@keyframes lf-tremer { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

@media (max-width: 640px) {
  .lf-barra { top: 8px; margin-top: 8px; padding: 0 8px; }
  .lf-div, .lf-sistema small { display: none; }
  .lf-palavra { display: none; }
  .lf-marca { padding: 0 4px 0 6px; }
  .lf-sistema b { font-size: 14px; }
  .lf-estado:is([data-estado="salvo"], [data-estado="salvando"]) span { display: none; }
  .lf-estado:is([data-estado="salvo"], [data-estado="salvando"]) { padding: 0 9px; }
  .lf-estado span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1024px) { .lf-barra { padding: 0 24px; } }
@media print { .lf-barra, .lf-brilho, .lf-aviso { display: none !important; } html, html body { background: #fff; } .lf-bloqueio { position: static; } }

/* ==================== tela de entrada ==================== */
.lf-entrar { display: flex; min-height: 100dvh; }
.lf-vitrine {
  position: relative; display: none; flex-direction: column; justify-content: space-between; gap: 48px;
  width: 46%; max-width: 672px; flex: none; box-sizing: border-box; padding: 48px; overflow: hidden;
  background: var(--sis-fundo); color: var(--sis-texto);
}
@media (min-width: 1024px) { .lf-vitrine { display: flex; } }
.lf-vitrine::before, .lf-vitrine::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(64px);
  background: linear-gradient(120deg, var(--sis-marca-de), var(--sis-marca-ate));
}
.lf-vitrine::before { top: -160px; right: -128px; width: 448px; height: 448px; opacity: .2; }
.lf-vitrine::after { bottom: -192px; left: -128px; width: 416px; height: 416px; opacity: .1; }
.lf-grade {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--sis-texto) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--sis-texto) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}
.lf-vitrine > :not(.lf-grade) { position: relative; z-index: 1; }
.lf-vitrine .lf-palavra { display: inline; font-size: 20px; }
.lf-logo { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: inherit; text-decoration: none; }
.lf-selo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--sis-borda); border-radius: 999px; background: color-mix(in oklch, var(--sis-cartao) 70%, transparent);
  font-size: 12px; font-weight: 500; color: var(--sis-texto-2);
}
.lf-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--sis-primaria); box-shadow: 0 0 0 3px color-mix(in oklch, var(--sis-primaria) 22%, transparent); }
.lf-vitrine h2 { max-width: 448px; margin: 0 0 16px; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.lf-degrade { background: linear-gradient(100deg, var(--sis-marca-de), var(--sis-marca-ate)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* no escuro o azul da logo (#24548A) some no fundo: o degradê começa no azul claro do tema */
html[data-tema="escuro"] .lf-degrade { background-image: linear-gradient(100deg, var(--sis-primaria), var(--sis-marca-ate)); }
.lf-vitrine p.lf-texto { max-width: 448px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--sis-texto-suave); }
.lf-topicos { display: grid; gap: 20px; max-width: 448px; margin: 40px 0 0; padding: 0; list-style: none; }
.lf-topicos li { display: flex; align-items: flex-start; gap: 14px; }
.lf-topicos li > span:first-child {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 2px; flex: none;
  border: 1px solid var(--sis-borda); border-radius: 10px; background: color-mix(in oklch, var(--sis-cartao) 70%, transparent); color: var(--sis-primaria);
}
.lf-topicos svg { width: 16px; height: 16px; }
.lf-topicos b { display: block; font-size: 14px; font-weight: 500; }
.lf-topicos small { display: block; font-size: 14px; color: var(--sis-texto-suave); }
.lf-rodape { margin: 0; font-size: 12px; color: color-mix(in oklch, var(--sis-texto-suave) 70%, transparent); }
.lf-vitrine > :not(.lf-grade) { animation: lf-subir .5s ease-out backwards; }
.lf-vitrine > :nth-child(3) { animation-delay: .12s; }
.lf-vitrine > :nth-child(4) { animation-delay: .3s; }

.lf-acesso { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; }
.lf-acesso-in { width: 100%; max-width: 384px; animation: lf-subir .5s ease-out backwards; }
.lf-acesso .lf-logo { margin-bottom: 40px; color: var(--sis-texto); }
@media (min-width: 1024px) { .lf-acesso .lf-logo { display: none; } }
.lf-acesso h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
.lf-acesso .lf-sub { margin: 0 0 32px; font-size: 14px; line-height: 1.5; color: var(--sis-texto-suave); }
.lf-form { display: grid; gap: 20px; }
.lf-form.tremer { animation: lf-tremer .4s ease-in-out; }
.lf-campo { display: grid; gap: 8px; }
.lf-campo label { font-size: 14px; font-weight: 500; line-height: 1; }
.lf-campo > div { position: relative; }
.lf-campo input {
  width: 100%; height: 36px; box-sizing: border-box; padding: 4px 12px; border: 1px solid var(--sis-borda-forte); border-radius: 8px;
  background: transparent; color: var(--sis-texto); font: 14px/1.4 var(--sis-fonte); outline: none;
  box-shadow: var(--sis-sombra-1); transition: border-color var(--sis-transicao), box-shadow var(--sis-transicao);
}
/* no iPhone o Safari amplia a página ao tocar num campo com letra menor que 16px, e não volta sozinho */
@media (max-width: 767px) { .lf-campo input { font-size: 16px; } }
html[data-tema="escuro"] .lf-campo input { background: color-mix(in oklch, var(--sis-borda-forte) 30%, transparent); }
.lf-campo input::placeholder { color: var(--sis-texto-suave); }
.lf-campo input:focus-visible { border-color: var(--sis-primaria); box-shadow: var(--sis-anel); }
.lf-campo input[aria-invalid="true"] { border-color: var(--sis-negativo); box-shadow: 0 0 0 3px color-mix(in oklch, var(--sis-negativo) 20%, transparent); }
.lf-campo input:disabled { opacity: .5; }
.lf-campo .com-olho { padding-right: 40px; }
.lf-olho {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; padding: 4px;
  border: 0; border-radius: 4px; background: transparent; color: var(--sis-texto-suave); cursor: pointer;
}
.lf-olho:hover { color: var(--sis-texto); }
.lf-olho svg { width: 16px; height: 16px; }
.lf-olho .fechado, .lf-olho[aria-pressed="true"] .aberto { display: none; }
.lf-olho[aria-pressed="true"] .fechado { display: block; }
.lf-erro {
  margin: 0; padding: 8px 12px; border: 1px solid color-mix(in oklch, var(--sis-negativo) 30%, transparent); border-radius: 8px;
  background: color-mix(in oklch, var(--sis-negativo) 5%, transparent); color: var(--sis-negativo); font-size: 14px; line-height: 1.45;
  animation: lf-subir .25s ease-out both;
}
.lf-erro[hidden] { display: none; }
.lf-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.lf-linha label { display: inline-flex; align-items: center; gap: 8px; color: var(--sis-texto-suave); cursor: pointer; }
.lf-linha input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--sis-primaria); cursor: pointer; }
.lf-link { padding: 0; border: 0; background: none; color: var(--sis-primaria-forte); font: inherit; text-decoration: none; text-underline-offset: 4px; cursor: pointer; }
.lf-link:hover { text-decoration: underline; }
.lf-entrar-botao { width: 100%; height: 40px; }
.lf-entrar-botao svg { display: none; width: 16px; height: 16px; animation: lf-girar .8s linear infinite; }
.lf-entrar-botao.carregando svg { display: block; }
.lf-ajuda {
  margin: 0; padding: 12px 14px; border: 1px solid var(--sis-borda); border-radius: 10px; background: var(--sis-rebaixado);
  font-size: 13px; line-height: 1.55; color: var(--sis-texto-2); animation: lf-subir .25s ease-out both;
}
.lf-ajuda[hidden] { display: none; }
.lf-nota { margin: 28px 0 0; font-size: 13px; line-height: 1.55; color: var(--sis-texto-suave); }
.lf-entrar .lf-tema-canto { position: fixed; top: 16px; right: 16px; }
.lf-passagem {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--sis-fundo); color: var(--sis-texto); font-size: 14px; animation: lf-aparecer .3s ease-out both;
}
.lf-passagem[hidden] { display: none; }
.lf-passagem :is(svg, img) { animation: lf-respirar 1.4s ease-in-out infinite; }
@keyframes lf-aparecer { from { opacity: 0; } }
@keyframes lf-respirar { 50% { transform: scale(1.08); opacity: .75; } }