/* 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.
   Só usa os tokens de tema.css — nenhuma cor é escrita aqui. */

html { background: var(--sis-fundo); }
/* 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%);
}

/* ---------- 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 * { box-sizing: border-box; }
.lf-barra :where(button, a), .lf-aviso :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 { 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; }
.lf-palavra { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.lf-palavra span { color: var(--sis-texto-suave); font-weight: 500; }
.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-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 span { display: none; }
html.lf-menu-na-barra .lf-estado { 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 { background: var(--sis-aviso); animation: lf-pulso 1s ease-in-out infinite; }
.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); }

/* ---------- 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; 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 :is(main, .lf-espera) { opacity: 0; }
:is(main, .lf-espera) { transition: opacity .25s ease-out; }

/* ---------- 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 span { display: none; }
  .lf-estado { padding: 0 9px; }
}
@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; } }

/* ==================== 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; }
.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);
}
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 svg { 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; } }