/* =====================================================================
   Identidade Questor — Brand Book 2026
   ---------------------------------------------------------------------
   Carregado DEPOIS do <style> de cada pagina.

   TEMA CLARO FIXO, de proposito. As paginas nasceram com tema duplo, mas:
     - o fundo de conteudo da marca e branco / off-white (#FFFFFF / #F9FAFB);
     - a peca e voltada ao cliente e vai ser aberta em navegador alheio,
       muitos em modo escuro — e a marca nao pode virar outra cor por causa
       da configuracao de quem abre;
     - o laranja #FA5A23 foi calibrado sobre fundo claro.

   Por isso a paleta clara e repetida nos TRES estados de tema
   (`:root`, `:root:not([data-theme="light"])` sob prefers-color-scheme:dark,
   e `:root[data-theme="dark"]`). Sem isso, o bloco escuro de cada pagina
   ganha por especificidade — `:root:not(...)` e mais especifico que `:root` —
   e a tela abre preta em quem usa modo escuro. Foi o que aconteceu.

   Cores oficiais:
     laranja  #FA5A23  protagonista (publico contabil/institucional)
     grafite  #1E1E24  texto/alto impacto
     turquesa #0FD6CA  protagonista de ERP/empresarial — nao usada aqui:
                       a regra da marca e uma cor dominante por peca

   Apoio: #F9FAFB #D2D2D2 #FEDCCD #FF9C7B #FF7D50 #FFAA33 #A12900
          #005D72 #242424 #888888

   Tipografia: Encode Sans. Paralucent e LT Renovate sao as oficiais de
   titulo, mas nao existem no Google Fonts — mesma decisao dos slides.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------- paleta */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: light;           /* controles nativos e barra de rolagem claros */

  --ground: #F9FAFB;
  --surface: #FFFFFF;
  --surface-2: #F1F2F4;
  --surface-3: #FDF7F4;
  --rule: #D2D2D2;
  --rule-2: #E6E7E9;

  --ink: #242424;
  --ink-2: #4A4A4A;
  --muted: #888888;

  --accent: #FA5A23;
  --accent-hover: #A12900;
  --accent-soft: #FEDCCD;
  --accent-ink: #FFFFFF;

  --warn: #A15A00;
  --warn-soft: #FFF0DB;
  --err: #8B2000;
  --err-soft: #FDE4DC;
  --info: #005D72;
  --info-soft: #DDEEF2;
  --ok: #1C6144;
  --ok-soft: #DEEBE4;

  --shadow-s: 0 1px 2px rgba(36, 36, 36, .06);
  --shadow-m: 0 1px 3px rgba(36, 36, 36, .08), 0 12px 28px -18px rgba(36, 36, 36, .22);

  --focus: #FA5A23;
}

/* O body pinta o fundo explicitamente: sem isso a pagina herda o fundo do
   navegador, que em modo escuro e preto. */
html, body { background: var(--ground) !important; color: var(--ink); }

/* --------------------------------------------------------------- tipografia */
body,
input, select, textarea, button {
  font-family: "Encode Sans", ui-sans-serif, system-ui, sans-serif;
}

h1 {
  font-family: "Encode Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
h1 em { font-style: normal; color: var(--accent); }

.step-eyebrow, .k, .tag, .eyebrow {
  letter-spacing: .14em;
  text-transform: uppercase;
}
.step-eyebrow { color: var(--accent); }

/* --------------------------------------------------------------- logo */
.logo .mark { display: none !important; }
.logo::before {
  content: "";
  display: block;
  width: 8.5rem;
  height: 1.75rem;
  background: url("/assets/logo-questor.png") left center / contain no-repeat;
}
.logo { font-size: 0 !important; gap: 0 !important; }

/* Cabecalho com a linha laranja da marca */
.top, header.doc, .brand {
  border-bottom: 2px solid var(--accent) !important;
}

/* --------------------------------------------------------------- detalhes */
.stepper div[data-on="1"] .bar { background: var(--accent); }
.pill.ok, .pill.lib { background: var(--ok-soft); color: var(--ok); }
a.btn-doc, button { border-radius: 4px; }
.card, .tiles, .scroll, .passos, .nota { border-radius: 6px; }

/* Campos: fundo branco garantido, inclusive no autofill do Chrome, que em
   modo escuro pinta o campo de azul-escuro por conta propria. */
input, select, textarea {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 2rem var(--surface) inset;
}

/* =====================================================================
   Layout — largura e alinhamento
   ---------------------------------------------------------------------
   Medido em tela de 1800px: o conteudo tinha 896px com 444px de margem de
   cada lado, e o card de Resumo (380px de altura) terminava 553px acima do
   fim da coluna da esquerda, abrindo um vao. Tres correcoes:

   1. conteudo mais largo, com gutter minimo garantido no celular;
   2. na proposta, colunas proporcionais e Resumo grudado no topo, que
      acompanha a rolagem em vez de deixar buraco;
   3. nos passos de uma coluna so, o bloco e limitado e alinhado a
      ESQUERDA — campo de CNPJ com 1200px de largura nao ajuda ninguem.
   ===================================================================== */

.shell {
  max-width: min(78rem, 100% - 1.6rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-inline: auto;
}

/* Telas com TABELA usam a janela inteira. As margens de 3rem de cada lado
   faziam sentido em bloco de leitura e apertavam a tabela de liberações a ponto
   de o número de WhatsApp quebrar no meio (visto pela Tauana em 18/09/2026).
   Quem é largo diz que é, com a classe: assim o padrão continua sendo o bloco
   de leitura, que é o certo para a proposta e para os formulários. */
.shell.largo {
  max-width: min(104rem, 100% - 1.6rem) !important;
}

/* passos de coluna unica: bloco de leitura, ancorado a esquerda */
#s1 > *, #s2 > *, #s4 > *, #s5 > * { max-width: 54rem; }
#s1 h1, #s4 h1 { max-width: 30ch; }
.lede { max-width: 66ch; }

/* o campo do documento nao precisa da largura do card */
input.doc { max-width: 22rem; }

/* proposta: duas colunas alinhadas pelo topo, resumo acompanha a rolagem */
.cols {
  grid-template-columns: minmax(0, 1.5fr) minmax(19rem, .85fr) !important;
  gap: 1.15rem !important;
  align-items: start !important;
}
.cols > .card { position: sticky; top: 1.25rem; }
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr !important; }
  .cols > .card { position: static; }
  #s1 > *, #s2 > *, #s4 > *, #s5 > * { max-width: none; }
}

/* respiro vertical do topo de cada passo */
.step-eyebrow { margin-bottom: .6rem; }
h1 { margin-bottom: .7rem !important; }

/* ---------------------------------------------------------------------
   Logo ao lado do titulo, nos paineis internos
   ---------------------------------------------------------------------
   Medido em /liberacoes: o logo tinha 136x28 com o topo em y=31, e o h1
   (20px / line-height 31) o topo em y=24. O `.top` alinhava por baseline,
   entao o CENTRO do logo caia sobre a linha de base do texto — dai ele
   parecer maior e afundado.

   Correcao: alinhar os dois pelo centro da caixa e reduzir o logo para
   22px de altura, proporcional ao titulo de 20px. Largura sai da
   proporcao real da marca (4,923:1), medida no PNG.

   No cabecalho da tela do cliente (.brand) o logo aparece sozinho e
   continua maior — la ele e a marca, nao um adorno de titulo.
   --------------------------------------------------------------------- */
.top { align-items: center !important; }
.top .logo::before {
  height: 1.375rem;      /* 22px */
  width: 6.77rem;        /* 22 x 4,923 */
}
.top h1 {
  line-height: 1.35;
  /* A regra global `h1 { margin-bottom: .7rem !important }` deste arquivo
     tambem pegava os titulos de painel, que nascem com margem zero. Num flex
     alinhado ao centro, a margem entra na caixa do item e desloca o texto
     ~5,6px para cima — era a causa do desalinhamento com o logo. */
  margin: 0 !important;
}