/* =====================================================================
   RADAR DO CNPJ — sistema de design
   Extraido do prototipo oficial. Regras e racional em DESIGN.md.

   NAO invente valor novo aqui. Se faltar algo, decida no DESIGN.md
   primeiro e depois acrescente o token.
   ===================================================================== */

:root {
  /* ---- tinta e superficie ---- */
  --tinta:        #0B0D17;   /* titulo, texto principal */
  --tinta-2:      #31364A;   /* secundario forte */
  --texto:        #5C6275;   /* corpo */
  /* 06/08/2026 — era #9AA0B4, que dava 2,61:1 no branco. O minimo legivel
     e 4,5:1, e este token carrega justamente o texto de 11 e 12px: migalha,
     legenda, dica, rodape. Texto pequeno E claro e o pior par possivel.
     Mesma matiz, so mais escuro.

     O valor foi calculado contra os SETE fundos em que ele aparece, nao so
     contra o branco: a primeira tentativa (#68708C) passava no cinza e
     falhava por pouco (4,32) sobre o azul-fraco do bloco comercial. */
  --suave:        #656C88;   /* rotulo, legenda — 4,53:1 no pior fundo */
  --linha:        #E5E7EF;   /* TODA borda de cartao */
  --fundo:        #F5F6F8;   /* fundo da pagina */
  --fundo-2:      #FAFBFF;   /* faixa alternada */
  --branco:       #FFFFFF;

  /* ---- marca ---- */
  --azul:         #1B33F0;
  --azul-escuro:  #1226C4;   /* hover */
  --azul-fraco:   #EEF0FE;   /* fundo de selo */
  --azul-linha:   #D6DBFB;

  /* ---- estado: tres cores, tres significados fixos ---- */
  /* Verde e ambar tambem estavam abaixo de 4,5:1 sobre o proprio fundo de
     selo (3,95 e 3,44). Escurecidos o minimo necessario — a diferenca mal se
     enxerga lado a lado, mas e ela que separa legivel de ilegivel para quem
     tem baixa visao ou olha num monitor claro. */
  --ok:           #0D7F49;   /* ativa, regular, nada consta */
  --ok-fundo:     #E7F6EE;
  --atencao:      #9D6209;   /* inapta, dado antigo, indicio */
  --atencao-fundo:#FFF1E0;
  --risco:        #C42B1C;   /* sancao vigente, baixada */
  --risco-fundo:  #FDECEA;

  /* ---- tipografia ---- */
  --fonte:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono:   'IBM Plex Mono', ui-monospace, monospace;

  /* ---- raio ---- */
  --r-cartao:  14px;
  --r-interno: 12px;
  --r-botao:   10px;
  --r-selo:     9px;
  --r-pilula: 999px;

  /* ---- espaco (escala de 4) ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px; --e9: 60px;

  /* ---- unica sombra do sistema ---- */
  --sombra-flutuante: 0 20px 50px -28px rgba(11, 13, 23, .4);

  --largura-max: 1180px;
}

/* ===================================================== base */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-escuro); text-decoration: underline; }

h1, h2, h3 { color: var(--tinta); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9CCD8; border-radius: var(--e2); }

.envelope { max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--e5); }

/* ===================================================== cartao */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: var(--e5);
}
.cartao-g { padding: clamp(18px, 2.2cqi, 26px); }
.cartao-p { border-radius: var(--r-interno); padding: var(--e4); }

/* ===================================================== rotulo e valor
   O par rotulo/valor e o tijolo da ficha. O rotulo em mono maiusculo e
   o que da o ar tecnico do produto - use sempre. */

.rotulo {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave);
  margin-bottom: 5px;
}

.valor { font-size: 13px; font-weight: 600; color: var(--tinta); }

/* Numero, CNPJ, CEP, data e coordenada SEMPRE em mono. */
.num { font-family: var(--mono); font-weight: 600; color: var(--tinta); }

.destaque { font-size: 22px; font-weight: 800; color: var(--tinta); }

/* ===================================================== botao */

.botao {
  font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: var(--r-botao); padding: 11px 18px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e2);
}
.botao-1 { background: var(--azul); color: #fff; }
.botao-1:hover { background: var(--azul-escuro); }
.botao-2 {
  background: var(--branco); color: var(--texto);
  border: 1px solid var(--linha); font-weight: 600;
}
.botao-2:hover { border-color: #C9CCD8; color: var(--tinta); }

/* ===================================================== pilula e selo */

.pilula {
  display: inline-block;
  border-radius: var(--r-pilula); padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.pilula-ok      { background: var(--ok-fundo);      color: var(--ok); }
.pilula-atencao { background: var(--atencao-fundo); color: var(--atencao); }
.pilula-risco   { background: var(--risco-fundo);   color: var(--risco); }
.pilula-neutra  { background: #F1F2F7;              color: var(--texto); }

.selo {
  display: inline-block;
  background: var(--azul-fraco); color: var(--azul);
  border-radius: var(--r-pilula); padding: 6px 12px;
  font-size: 12px; font-weight: 700;
}

/* ===================================================== leitura
   Bloco azul que da contexto a um numero que seria mal lido sozinho.
   Caso canonico: 20.718 CNPJs num endereco = predio, nao fachada. */

.leitura {
  background: var(--azul-fraco);
  border: 1px solid var(--azul-linha);
  border-radius: var(--r-cartao);
  padding: 18px;
  font-size: 13px; color: var(--tinta-2);
}

/* ===================================================== carimbo de fonte
   OBRIGATORIO em toda secao com dado externo. Sem a data, a afirmacao
   e desonesta - e a data e o que diferencia o produto. */

.fonte {
  font-family: var(--mono); font-size: 11px;
  color: var(--suave); margin-top: var(--e3);
}

/* ===================================================== bloco pago */

.bloqueado { position: relative; overflow: hidden; }
.bloqueado > .conteudo { filter: blur(6px); pointer-events: none; user-select: none; }
/* O cadeado e so a CAMADA: ele escurece e desfoca o que esta atras. O texto
   nunca mora nele - mora no painel opaco de baixo.

   Versao anterior punha titulo, lista e botao direto sobre um veu de branco
   a 72%. Os 28% restantes deixavam o conteudo borrado atravessar, e a
   chamada mais importante da ficha virava a parte mais dificil de ler.

   `align-items: flex-start` no eixo vertical: o bloco pago e alto, e centrar
   no meio de mil pixels de borrao joga a mensagem para fora da tela. Ela
   fica no topo e ACOMPANHA a rolagem (sticky), para continuar ao alcance
   enquanto a pessoa passa os olhos pelo que esta borrado. */
.bloqueado > .cadeado {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  background: rgba(245, 246, 248, .55);
  backdrop-filter: blur(3px);
  text-align: center; padding: var(--e6) var(--e5);
}

.cadeado-painel {
  position: sticky; top: var(--e6);
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  width: 100%; max-width: 540px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-cartao);
  padding: var(--e6) var(--e5);
  box-shadow: var(--sombra-flutuante);
}

/* ===================================================== estados vazios
   "nada consta" e "nao verificado" NAO podem parecer a mesma coisa. */

.nada-consta   { color: var(--ok); font-weight: 600; }
.nao-verificado{ color: var(--atencao); font-weight: 600; }

/* ===================================================== tabela */

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); text-align: left;
  padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha);
}
.tabela td { padding: var(--e3); border-bottom: 1px solid var(--linha); }
.tabela tr:last-child td { border-bottom: none; }

/* Tabela larga rola sozinha - a PAGINA nunca rola na horizontal. */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===================================================== celular */

@media (max-width: 1023px) {
  .envelope { padding: 0 var(--e4); }
  h1 { font-size: 22px; }
  .painel-lateral { display: none; }     /* barra lateral so no desktop */
  .botao { padding: 12px 18px; min-height: 44px; }  /* alvo de toque */
}