/* =====================================================================
   [R1] Camada responsiva do Diagnóstico de Maturidade Digital.

   Carregada DEPOIS do <style> inline do arquivo congelado, então vence a
   cascata e sobrescreve as regras sem editá-las. Regra de ouro deste arquivo:
   mexer só em GEOMETRIA (larguras, colunas, padding, tamanho de fonte por
   breakpoint). Nada de cor, nada de novo componente — o design system fica
   exatamente como está no desktop.

   O arquivo congelado já trazia colapso de grids a 640px; aqui a gente
   completa o que faltava (o viewport recém-ligado expôs o resto) e trata a
   topbar, que era o que realmente vazava no celular.
   ===================================================================== */

/* ---------------------------------------------------------------------
   [R3] Landing reconstruída em HTML.
   Antes era um único JPEG 16:9 com o texto, os logos e o botão "chapados"
   dentro — não tinha como refluir: ou cortava (cover) ou encolhia (contain).
   Agora o fundo é a MESMA arte, só que SEM texto (fundo-textura.jpg): é
   decorativo e pode cortar de boa. O que importa — título, subtítulo e botão —
   é HTML real e acompanha qualquer tela.
   --------------------------------------------------------------------- */
.landing-hero {
  position: fixed; inset: 0; overflow: hidden;
  background: #fbe9f2;                     /* rosa claro enquanto a arte carrega */
  display: flex; align-items: center; justify-content: flex-end;
}
.landing-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
/* [R5] Para onde puxar o recorte quando o cover corta.
   A arte é 16:9 e tem os dois logos colados na borda DIREITA — em telas mais
   quadradas (1440x900 e afins) o centro come o "Criciúma". Puxando o recorte
   para a direita, o que se perde é tecido magenta, que sobra na peça.
   No celular o problema é o oposto: a faixa central da arte é justamente o
   espaço vazio deixado para o texto, então o fundo virava um branco sem graça —
   puxar para a esquerda traz o manequim e o tecido de volta. */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) { .landing-bg { object-position: 72% center; } }
@media (max-width: 900px), (max-aspect-ratio: 5/4) { .landing-bg { object-position: 26% center; } }
/* Janela larga mas quase quadrada: em 26% o logo Sebrae fica meio cortado na
   borda. Puxando mais para a esquerda ele sai de cena por inteiro — cortado
   pela metade fica pior do que ausente, e o par de logos já vive no topo da
   arte, não na leitura da tela. */
@media (min-width: 901px) and (max-aspect-ratio: 5/4) { .landing-bg { object-position: 12% center; } }
.landing-content {
  position: relative; z-index: 2;
  width: min(52%, 620px); margin-right: 6%; padding: 1.5rem;
  /* [R5] desce o bloco para não encostar nos logos da arte, que ficam no
     topo-direita justamente onde o texto começa. A largura subiu junto: com
     620px o título fecha em 3 linhas (como na arte original) em vez de 4,
     o bloco fica mais baixo e sobra folga para descer. */
  margin-top: min(8vh, 80px);
}
/* [R5] Com a arte em cores plenas, o recorte do cover pode trazer a onda magenta
   para baixo do texto em telas mais largas/quadradas — onde a versão lavada
   perdoava, esta não perdoa. Um scrim branco difuso (sem borda, sem retângulo
   visível) segura o contraste sem descaracterizar a arte. Só no desktop: de
   900px para baixo já existe o painel branco com blur, logo abaixo. */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
  .landing-content::before {
    content: ""; position: absolute; inset: -14% -10%; z-index: -1;
    pointer-events: none;
    background: radial-gradient(62% 58% at 50% 48%,
      rgba(255,255,255,.86) 0%, rgba(255,255,255,.70) 42%,
      rgba(255,255,255,.30) 70%, rgba(255,255,255,0) 100%);
  }
}
.landing-eyebrow {
  font-weight: 700; color: #d6006e; font-size: clamp(13px, 1.6vw, 17px);
  margin-bottom: .7rem; padding-bottom: .5rem; position: relative;
}
.landing-eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 3px; background: #d6006e;
}
.landing-title {
  color: #17224e; font-weight: 700; line-height: 1.08;
  font-size: clamp(30px, 4.2vw, 52px); margin: 0 0 1rem;
  text-shadow: 0 1px 10px rgba(255,255,255,.5);
}
.landing-title span { color: #d6006e; display: block; }
.landing-sub {
  color: #47506f; font-size: clamp(14px, 1.5vw, 19px); line-height: 1.5;
  margin: 0 0 1.9rem; max-width: 34ch; text-shadow: 0 1px 8px rgba(255,255,255,.6);
}
.landing-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer; color: #fff; font-weight: 600;
  font-size: clamp(15px, 1.5vw, 19px);
  padding: clamp(12px, 1.4vw, 17px) clamp(22px, 2.4vw, 34px);
  border-radius: 14px;
  background: linear-gradient(135deg, #e0097e 0%, #b8005f 100%);
  box-shadow: 0 10px 24px -8px rgba(184,0,95,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 14px 30px -8px rgba(184,0,95,.6); }
.landing-btn:active { transform: scale(.99); }
.landing-btn i { font-size: 1.15em; }

/* Tablet e abaixo: o texto centraliza e ganha um painel claro para legibilidade
   sobre qualquer parte da arte que o corte deixe aparecer.
   [R5] Vale também para janelas quase quadradas em qualquer largura: a arte é
   16:9, então abaixo de 5/4 o cover corta tanto que o layout em duas colunas
   deixa de fazer sentido (some o manequim de um lado ou o logo do outro). */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .landing-hero { justify-content: center; }
  .landing-content {
    width: min(90%, 560px); margin-right: 0; margin-top: 0; text-align: center;
    background: rgba(255,255,255,.74); backdrop-filter: blur(4px);
    border-radius: 20px; padding: clamp(1.4rem, 4vw, 2.2rem);
    box-shadow: 0 20px 50px -20px rgba(122,0,60,.35);
  }
  .landing-eyebrow::after { left: 50%; transform: translateX(-50%); }
  .landing-title span { display: inline; }
  .landing-sub { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) { .landing-content { width: 92%; } }

/* ---------------------------------------------------------------------
   [R4/#2] "Gerar diagnóstico" espremido com o aceite LGPD.
   O box #lgpd-box é injetado por JS DENTRO do .btn-row de screen-1, que é um
   flex justify-content:flex-end — então o texto longo do aceite e o botão
   ficavam lado a lado, apertados à direita. Aqui o .btn-row de screen-1 passa
   a empilhar: aceite em cima (largura total), botão embaixo à direita.
   Escopo em #screen-1 para não mexer nos outros .btn-row do app.
   --------------------------------------------------------------------- */
#screen-1 .btn-row {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
#screen-1 #lgpd-box {
  margin: 0 !important;      /* o espaçamento agora vem do gap do .btn-row */
  width: 100%;
}
#screen-1 .btn-row #btn-gerar {
  align-self: flex-end;      /* botão volta a ficar à direita, abaixo do aceite */
}
@media (max-width: 640px) {
  #screen-1 .btn-row #btn-gerar { align-self: stretch; justify-content: center; }
}

/* ---------------------------------------------------------------------
   [R4/#1] Spinner de loading em botões durante ações assíncronas
   (Entrar, Validar código, Criar conta, Login admin, Chat). O texto some,
   um anel gira no centro. Reaproveita o @keyframes spin já definido no HTML.
   Todos esses botões têm fundo escuro (navy/magenta), por isso o anel é branco.
   --------------------------------------------------------------------- */
button.is-loading, .btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
button.is-loading > *, .btn.is-loading > * { visibility: hidden; }
button.is-loading::after, .btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; visibility: visible;
  animation: spin 0.6s linear infinite;
}

/* ---------------------------------------------------------------------
   Tablet e abaixo (≤768px): respira o padding lateral, grid3 de 3→2.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { padding: 1rem 0.75rem; }
  .screen { padding: 1.5rem 1.25rem 1.75rem; }

  /* Instagram/Facebook/TikTok (grid3) fica ilegível em 3 colunas no celular */
  .grid3 { grid-template-columns: 1fr 1fr; }

  .rep-header, .rep-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .admin-header, .admin-body { padding-left: 1.25rem; padding-right: 1.25rem; }
  .admin-filters { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Celular (≤560px): a topbar era o problema de verdade.
   O nome da marca quebrava em 4 linhas e o stepper era cortado à direita
   (o .frame tem overflow:hidden, então clipava sem "estourar").
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .topbar { padding: 0.8rem 1rem; gap: 8px; }
  .brand { font-size: 11px; line-height: 1.25; }

  /* Stepper compacto: só as bolinhas numeradas. Os rótulos ("Conta",
     "Cadastro"...) são nós de texto soltos dentro de .step-dot — font-size:0
     os some e o número volta pelo .n. */
  .stepper { gap: 4px; flex-shrink: 0; }
  .step-dot { gap: 0; font-size: 0; }
  .step-dot .n { font-size: 11px; }
  .step-line { width: 10px; }

  /* Logout vira só o ícone, para caber ao lado da marca + stepper */
  .btn-logout { font-size: 0; padding-left: 8px; padding-right: 8px; }
  .btn-logout i { font-size: 16px; }

  /* Formulários e blocos em coluna única */
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .admin-filters { grid-template-columns: 1fr; }

  /* Tabelas largas (benchmark, ranking do admin) rolam na horizontal em vez
     de espremer a ponto de ficar ilegível */
  table.bench { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Nota do relatório: 44px é grande demais ao lado do anel no celular */
  .rep-score .num { font-size: 34px; }
  .rep-header { padding: 1.4rem 1.25rem; }
}

/* ---------------------------------------------------------------------
   Celular pequeno (≤400px): últimos ajustes de aperto.
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  .screen { padding: 1.25rem 1rem 1.5rem; }
  .brand { font-size: 10px; letter-spacing: 0; }
  .auth-tab { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* ---------------------------------------------------------------------
   [R6] Painel Sebrae: KPIs e filtros voltam ao padrão de uma linha só.

   O layout original tinha 4 KPIs e 4 filtros, e os dois blocos fechavam
   certinho: os chips numa linha (.kpi-top é flex com wrap) e os selects num
   grid de 4 colunas — que no papel A4 (~794px, abaixo do breakpoint de 900)
   viram 2x2. Depois vieram duas adições legítimas: o chip "marca registrada
   (INPI)" e o filtro de cidade. Com 5 elementos em blocos dimensionados para
   4, cada um passou a sobrar um item na linha de baixo, sozinho — é o
   "desconfigurado" que aparece no PDF exportado.

   Some-se a isso o chip "maior nota do ciclo", que carrega o nome da empresa
   cru: com uma razão social longa ("bruno cardoso ferreira desenvolvimento")
   o chip cresce até empurrar o vizinho para a linha seguinte. Na coorte de
   demonstração isso nunca apareceu porque os nomes eram curtos.

   Correção de geometria, sem tocar no design system:
   - .kpi-top vira uma linha só, com os chips dividindo a largura igualmente.
     O chip do nome (o único com .delta-flat) ganha ~1,8x, que é a proporção
     que ele já tinha no original, e o nome quebra dentro do próprio chip em
     vez de esticá-lo.
   - .admin-filters passa a acompanhar a quantidade de selects em vez de fixar
     4 colunas; e quando sobra um ímpar no fim (o caso 5 em 2 colunas), ele
     ocupa a linha inteira, que é o que elimina o buraco ao lado.
   --------------------------------------------------------------------- */
.kpi-top { flex-wrap: nowrap; align-items: stretch; }
.kpi-top .kpi-chip { flex: 1 1 0; min-width: 0; }
/* :has() é progressivo — onde não houver, todos os chips ficam iguais, que
   já resolve o essencial (uma linha, sem órfão). */
.kpi-top .kpi-chip:has(.delta-flat) { flex: 1.8 1 0; }
/* O único .v que é texto, e não número: 16px faz "desenvolvimento" (a palavra
   mais longa que apareceu numa razão social real) caber inteira na largura do
   chip. A 18px ela sobrava por poucos pixels e quebrava deixando um "o" órfão
   na linha de baixo. */
.kpi-top .kpi-chip:has(.delta-flat) .v { font-size: 16px; line-height: 1.3; }
/* break-word, e não anywhere: `anywhere` também encolhe a largura mínima do
   chip, e aí o nome quebrava no meio da palavra ("desenvolvi-mento") mesmo
   havendo espaço. Assim só quebra palavra que realmente não couber. */
.kpi-chip .v { overflow-wrap: break-word; text-wrap: balance; }

.admin-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Papel A4 (~794px) e tablet: 2 colunas, como o arquivo congelado já fazia a
   partir de 900px — a regra precisa ser repetida aqui porque a de cima, sem
   media query e carregada depois, venceria a dele na cascata. O que faltava
   era o tratamento do ímpar sobrando: ele ocupa a linha inteira. */
@media (max-width: 900px) {
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .admin-filters > select:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* No celular os KPIs em linha única ficariam ilegíveis: voltam a 2 por linha. */
@media (max-width: 560px) {
  .kpi-top { flex-wrap: wrap; }
  .kpi-top .kpi-chip, .kpi-top .kpi-chip:has(.delta-flat) { flex: 1 1 calc(50% - 5px); }
}