/* ==========================================================================
   LOOB BUSINESS — a casca
   --------------------------------------------------------------------------
   Esta folha NÃO repete o `styles.css`. Ela vem depois dele e acrescenta só o
   que é do Business: a marca, a barra lateral do computador, a barra de baixo
   do celular e a tela de entrada. Cor de botão, campo, cartão e tipografia
   continuam vindo de lá — copiar teria criado duas verdades sobre a mesma
   coisa, e a segunda envelhece.

   O QUE DIFERENCIA O BUSINESS DO SOCIAL, visualmente: o social é claro e
   arejado, feito para navegar. Este é um PAINEL — uma coluna só, densidade
   maior, e a marca é a outra. Quem abre os dois no mesmo dia sabe em qual está
   sem ler o endereço.

   O PREFIXO É `lb-`, E NÃO `biz-`. O `biz-` JÁ EXISTE no `styles.css`: é do
   painel Business que mora dentro do app social (`.biz-secao`, `.biz-topo`,
   `.biz-voltar`, `.biz-grade`, `.biz-mod`...). Como as duas folhas carregam
   juntas aqui, a minha `.biz-secao` herdou o `text-transform: uppercase` da
   dele e TODOS os cartões saíram em caixa alta — os títulos, as descrições, a
   frase da ponte. Levou uma varredura de ancestrais para achar, porque a
   regra não casava com o elemento: ela casava com a seção, e o
   `text-transform` é herdado.

   É o mesmo tipo de armadilha que este projeto já pagou no `app.js`, onde um
   `selo` novo apagou um `selo` que existia. Nome curto e genérico em folha
   compartilhada é colisão esperando acontecer.
   ========================================================================== */

:root {
  --lb-tinta: #0C0A1E;          /* o fundo da barra lateral e da marca */
  --lb-tinta-2: #171339;
  --lb-brilho: #7C5CFF;         /* o roxo do logo, para acento */
}

/* -------------------------------------------------------------------------
   A MARCA
   ------------------------------------------------------------------------- */
.lb-marca { display: inline-flex; align-items: center; }
.lb-marca img { display: block; height: 34px; width: auto; }
/* Duas artes, uma para cada fundo. A troca é por tema, não por opacidade:
   logo claro com filtro em cima de fundo branco vira um borrão cinza. */
.lb-marca .marca-clara { display: inline-block; }
.lb-marca .marca-escura { display: none; }
:root[data-tema="escuro"] .lb-marca .marca-clara { display: none; }
:root[data-tema="escuro"] .lb-marca .marca-escura { display: inline-block; }
/* Sobre a tela escura da entrada, vale sempre a arte clara — lá o fundo é
   escuro nos dois temas. */
.lb-entrada-marca .lb-marca .marca-clara { display: none; }
.lb-entrada-marca .lb-marca .marca-escura { display: inline-block; }

/* -------------------------------------------------------------------------
   A CASCA — UMA COLUNA SÓ
   -------------------------------------------------------------------------
   A primeira versão tinha barra lateral escura no computador e barra de baixo
   no celular. Ele pediu o contrário, e tem razão para um painel de empresa:
   duas colunas de navegação em volta de uma tela cujo conteúdo JÁ É uma lista
   de atalhos é dizer a mesma coisa três vezes.

   Agora o painel é o menu. A coluna é uma, centrada, e cada destino é um
   cartão. A marca fica no topo, no meio — é o que diz "você está no Loob
   Business" sem gastar uma faixa lateral inteira para isso.

   As telas de dentro ganham um "voltar ao painel", porque sem barra nenhuma
   ele passa a ser o único caminho de volta.
   ------------------------------------------------------------------------- */
.lb-app { min-height: 100dvh; }

.lb-coluna { width: 100%; max-width: 1080px; margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-10); }
@media (max-width: 640px) {
  .lb-coluna { padding: var(--space-5) var(--space-4) var(--space-8); }
}

/* O TOPO: marca no centro, e as saídas discretas embaixo dela. */
.lb-topo { display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4); padding-top: env(safe-area-inset-top);
  margin-bottom: var(--space-6); text-align: center; }
.lb-topo .lb-marca img { height: 44px; }
@media (max-width: 640px) { .lb-topo .lb-marca img { height: 34px; } }

.lb-topo-links { display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; justify-content: center; }
.lb-topo-links a { display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius-full);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 12.5px; font-weight: 650; }
.lb-topo-links a:hover { text-decoration: none; background: var(--veu-solido);
  color: var(--text-strong); border-color: var(--border-strong); }

/* O NOME DA EMPRESA é o título da tela — não um crachá numa lateral. */
.lb-cab { text-align: center; margin-bottom: var(--space-6); }
.lb-cab h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 750;
  letter-spacing: -.035em; line-height: 1.08; }
.lb-cab p { color: var(--text-muted); font-size: 15px; margin-top: 8px; }
.lb-cab .cnpj { display: inline-block; margin-top: 10px; padding: 5px 12px;
  border-radius: var(--radius-full); background: var(--veu-medio);
  border: 1px solid var(--border-subtle); font-size: 12.5px; font-weight: 650;
  color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* O VOLTAR das telas de dentro. Sem barra nenhuma, ele é o único caminho. */
.lb-voltar { display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--space-4); padding: 7px 13px; border-radius: var(--radius-full);
  background: var(--veu-medio); border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 13px; font-weight: 650; }
.lb-voltar:hover { text-decoration: none; color: var(--text-strong); }

/* -------------------------------------------------------------------------
   AS SEÇÕES E OS CARTÕES
   ------------------------------------------------------------------------- */
.lb-secao { margin-top: var(--space-6); }
.lb-secao > h2 { font-size: 11.5px; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-subtle);
  margin-bottom: var(--space-3); }

/* Os KPIs. Quatro em linha no computador, dois no celular. */
.lb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); }
@media (max-width: 780px) { .lb-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lb-kpi { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.lb-kpi .n { display: block; font-size: 30px; line-height: 1; font-weight: 750;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lb-kpi .r { display: block; margin-top: 10px; font-size: 14px; font-weight: 700;
  color: var(--text-strong); }
.lb-kpi .s { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
/* Número que não veio do banco é TRAÇO, e ele é cinza para não competir com
   os que são de verdade. Zero é uma afirmação; traço é a verdade. */
.lb-kpi.e-sem-dado .n { color: var(--text-subtle); }

/* O ATALHO: ícone, nome, uma linha do que é, e a seta. Duas colunas no
   computador, uma no celular — é uma lista, não um mosaico. */
.lb-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); }
@media (max-width: 780px) { .lb-atalhos { grid-template-columns: minmax(0, 1fr); } }
.lb-atalho { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out); }
.lb-atalho:hover { text-decoration: none; border-color: var(--border-strong);
  transform: translateY(-1px); }
.lb-atalho-ic { flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.lb-atalho-txt { flex: 1; min-width: 0; }
.lb-atalho-txt b { display: block; font-size: 15px; font-weight: 700;
  color: var(--text-strong); line-height: 1.25; }
.lb-atalho-txt small { display: block; margin-top: 2px; font-size: 13px;
  color: var(--text-muted); line-height: 1.35; }
.lb-atalho > svg:last-child { flex: none; color: var(--text-subtle); }

/* A LIGAÇÃO COM O SOCIAL, dita uma vez e no lugar certo: em cima da seção do
   que se publica. */
.lb-ponte { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: var(--radius-lg); background: var(--accent-softer);
  border: 1px solid var(--accent-soft); color: var(--tinta-acento);
  font-size: 13.5px; line-height: 1.45; margin-bottom: var(--space-3); }
.lb-ponte svg { flex: none; }

.lb-cartao { padding: var(--space-5); border-radius: var(--radius-window);
  background: var(--veu-solido); border: 1px solid var(--border-subtle);
  box-shadow: var(--lift-1); }
.lb-cartao h2 { font-size: 16px; font-weight: 700; }
.lb-cartao p { color: var(--text-muted); font-size: 13.5px; line-height: 21px; margin-top: 6px; }

.lb-vazio { text-align: center; padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-window); border: 1px dashed var(--border-default);
  color: var(--text-subtle); }
.lb-vazio h2 { font-size: 17px; font-weight: 700; color: var(--text-strong);
  margin-bottom: 6px; }
.lb-vazio p { max-width: 46ch; margin: 0 auto; font-size: 14px; line-height: 22px; }

/* -------------------------------------------------------------------------
   A ENTRADA
   ------------------------------------------------------------------------- */
.lb-entrada { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }

/* O lado escuro é a marca. Ele SOME no celular: numa tela de 390px, meia tela
   de discurso empurra o formulário para fora da primeira dobra, e quem chega
   aqui vem para entrar. Mas a identidade não some junto — o degradê passa
   para a tela inteira, e o cartão branco do formulário flutua sobre ele. */
@media (max-width: 900px) { .lb-entrada { grid-template-columns: 1fr; } }

/* Os dois lados são flex de LINHA de propósito. Num flex de linha o `stretch`
   padrão age sobre a ALTURA, não sobre a largura — então nenhum filho tem a
   largura deformada. Era esse o erro que esticava a logo. E o `justify-content`
   encosta cada lado no vão do meio: numa tela de 1512px o discurso e o
   formulário se encontram no centro em vez de fugirem para as bordas. */
/* O foco do degradê fica ATRÁS do texto, não num canto. Ele estava em `20% 10%`
   — o brilho no canto superior esquerdo e o discurso lá embaixo, no quase-preto.
   O halo é de graça; só precisa estar onde os olhos vão. */
.lb-entrada-marca {
  display: flex; justify-content: flex-end;
  padding: var(--space-12) clamp(24px, 5vw, 72px);
  background: radial-gradient(95% 75% at 68% 42%, #2E2472, var(--lb-tinta) 72%);
  color: #fff;
}
@media (max-width: 900px) { .lb-entrada-marca { display: none; } }

/* `margin-block: auto` centra na vertical E NUNCA CORTA: quando o conteúdo
   passa da altura disponível, a margem automática vira zero em vez de virar
   deslocamento negativo. `align-items: center` cortaria o topo. */
.lb-entrada-dizer {
  width: 100%; max-width: 460px; margin-block: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
}

/* A logo é medida pela LARGURA, com a altura livre. É o inverso do que estava
   aqui, e é o que respeita o desenho: 640×358 no arquivo, 1,79:1 na tela. */
.lb-entrada-logo { width: clamp(180px, 16vw, 232px); height: auto; }

.lb-entrada-marca h1 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12;
  font-weight: 750; letter-spacing: -.03em; max-width: 14ch; margin: 0; }
.lb-entrada-marca p { color: rgba(255,255,255,.72); font-size: 16px; line-height: 26px;
  max-width: 42ch; margin: 0; }
.lb-entrada-lista { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-2); }
.lb-entrada-lista span { display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.84); font-size: 14.5px; }
.lb-entrada-lista svg { flex: none; color: var(--lb-brilho); }

.lb-entrada-form { display: flex; justify-content: flex-start;
  padding: var(--space-12) clamp(20px, 4vw, 64px); background: var(--surface-page); }
/* No celular a coluna vira: faixa da marca em cima, formulário embaixo. */
@media (max-width: 900px) {
  .lb-entrada-form { flex-direction: column; align-items: stretch; padding: 0; }
}

/* O FORMULÁRIO É UM CARTÃO, e isso não é enfeite. No tema claro a composição
   se sustentava sozinha — lado escuro contra lado claro. No tema ESCURO os
   dois lados ficam quase da mesma cor (#0E0B1C contra o fim do degradê), a
   divisão some e a tela vira um campo escuro só, com os campos boiando. O
   cartão em `--surface-raised` (#171331 no escuro, #FFF no claro) devolve a
   separação nos dois temas. */
.lb-form-caixa {
  width: 100%; max-width: 440px; margin-block: auto;
  padding: clamp(24px, 3vw, 36px);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--lift-2);
}
/* No celular o cartão perde a casca: numa tela de 390px ele ficaria a 20px de
   cada borda, e uma moldura de 20px não lê como cartão — lê como sobra. A
   página inteira vira a superfície, que é como um app se comporta. */
@media (max-width: 900px) {
  .lb-form-caixa { max-width: 460px; margin: 0 auto; padding: var(--space-8) var(--space-5);
    background: transparent; border: 0; box-shadow: none; }
}

/* A FAIXA DA MARCA, só no celular. É ela que segura a identidade quando o lado
   escuro some — e ela é sempre escura, nos dois temas, então a logo aqui é
   sempre a versão clara. */
.lb-form-marca { display: none; }
@media (max-width: 900px) {
  .lb-form-marca { display: block; text-align: center;
    padding: var(--space-10) var(--space-5) var(--space-8);
    background: radial-gradient(120% 130% at 50% 0%, #2E2472, var(--lb-tinta) 78%); }
}
.lb-form-marca .lb-marca .marca-clara { display: none; }
.lb-form-marca .lb-marca .marca-escura { display: inline-block; }
.lb-form-marca img { height: 46px; width: auto; }

.lb-abas { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--space-6);
  border-radius: var(--radius-full); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); }
.lb-abas button { flex: 1; padding: 9px 12px; border: 0; background: transparent;
  border-radius: var(--radius-full); font: inherit; font-size: 13.5px; font-weight: 650;
  color: var(--text-muted); cursor: pointer; }
/* A aba escolhida sobe para a cor do CARTÃO, não para a da página: dentro de
   uma superfície elevada, a cor da página lê como buraco, não como escolha. */
.lb-abas button[aria-pressed="true"] { background: var(--surface-raised);
  color: var(--text-strong); box-shadow: var(--lift-1); }
/* No celular o cartão é transparente, então a aba escolhida precisa subir para
   a cor da PÁGINA — `--surface-raised` daria um retângulo mais claro boiando. */
@media (max-width: 900px) {
  .lb-abas { background: var(--surface-sunken); }
  .lb-abas button[aria-pressed="true"] { background: var(--surface-page); }
}

/* Um caminho de recuperação, não um segundo botão principal. */
.lb-esqueci { display: block; width: 100%; margin-top: -4px; padding: 8px;
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.lb-esqueci:hover { color: var(--text-strong); text-decoration: underline; }

.lb-erro { margin-top: var(--space-4); padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text);
  font-size: 13.5px; line-height: 1.45; }

/* O CNPJ é a porta do Business, então o campo dele diz o que está acontecendo:
   verde quando os dígitos verificadores fecham, vermelho quando não. */
.lb-cnpj-estado { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.lb-cnpj-ok  { color: var(--success-text); }
.lb-cnpj-mal { color: var(--danger-text); }