/* Plantio Certo -- manual de marca v1 (docs/marca/plantio-certo-manual-de-marca.html).
   Redesign de 2026-09-16 (plan_redesign_relatorio.md); substitui a marca D6
   (navy #16143A + teal #0F8A7C) herdada da DataClimate.

   Regras do manual que este arquivo segue:
   - Duas cores de marca, tiradas do logo: escura #1E5C4A (titulos de destaque,
     botoes primarios) e clara #5FA07D (destaque secundario, "boa nota" em
     grafico). A clara tem 3,1:1 sobre branco -- nunca carrega texto.
   - Duas cores FUNCIONAIS, so para indicar risco em grafico/indicador:
     #C97B4E (medio) e #B4482A (alto). Nunca em texto, botao ou identidade --
     por isso o selo de risco tem texto em tinta e a cor vai numa bolinha.
   - Manrope para tudo; IBM Plex Mono so para numero e dado (valor, data de
     quinzena, celula de tabela). Rotulo em caixa alta NAO e dado: vai em
     Manrope 700, como o "eyebrow" do manual.
   - Logo cor cheia so sobre branco ou #F3F6F2 -- o topo e a capa sao claros.

   Tokens que o manual nao cobre e foram derivados aqui: --ink-3 (4,65:1 sobre
   branco), --dark-hover, --dark-wash, --medio-wash, --alto-wash.

   Fontes hospedadas em static/fonts (Fontsource 5.3.0, OFL), nao no Google
   Fonts: o PDF e renderizado pelo Chromium do servidor (platform/pdf.py) e nao
   pode depender de rede externa para sair igual para todo mundo. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* So o grego: o sigma do cabecalho da tabela de cenarios do Premium. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-greek-wght.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}

:root {
  /* marca */
  --dark: #1E5C4A;
  --dark-hover: #174A3B;
  --dark-wash: #E3EFE8;
  --light: #5FA07D;

  /* funcionais -- so indicador e grafico */
  --medio: #C97B4E;
  --medio-wash: #F7EBE2;
  --alto: #B4482A;
  --alto-wash: #F5DCD3;

  --ground: #FCFBF8;
  --surface: #FFFFFF;
  --surface-2: #F3F6F2;
  --ink: #1C1B17;
  --ink-2: #5C5647;
  --ink-3: #7A7466;
  --rule: rgba(28, 27, 23, .10);
  --rule-strong: rgba(28, 27, 23, .22);

  --radius: 8px;
  --shadow: 0 1px 2px rgba(28, 27, 23, .05), 0 10px 30px -22px rgba(28, 27, 23, .35);
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 800; }
b, strong { font-weight: 700; }

a { color: var(--dark); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--dark); outline-offset: 2px; border-radius: 3px;
}

/* Numero/dado fora de tabela (coordenada, produtividade na capa). */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* O espaco da mono e da largura de um digito: entre o numero e o "+-"/a
   unidade ele abre um buraco maior que o normal. So nesses dois elementos,
   nunca no container (`.valor`/`.numero` tambem embrulham selo com texto
   comum, tipo "Risco medio" -- `word-spacing` ali colava as palavras). */
.mais-menos, .unidade { margin-left: -.15em; }

/* Rotulo em caixa alta -- o "eyebrow" do manual. Um lugar so, para todo
   rotulo de campo, KPI, capa e cabecalho de tabela ficarem iguais. */
.campo label, .kpi .rotulo, .std-kpi .rotulo, .resumo .rotulo, .capa dt, .std-sobre,
table.dados thead th {
  font-family: var(--sans); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------------------------------------------------------------- topo */
/* Branco de proposito: o lockup cor cheia e proibido sobre verde escuro, e o
   lockup reverso ainda nao existe (manual §02). */
header.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: 64px;
  background: var(--surface); color: var(--ink);
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 20;
}
/* Respiro do logo (manual §03): nada entra a menos da altura do icone. */
.marca { display: flex; align-items: center; padding: 6px 0; text-decoration: none; }
.marca img { display: block; height: 26px; width: auto; }
/* "Powered by DataClimate" -- filete fino separa do logo do Plantio Certo,
   pra nao parecer um lockup so. O logo (recorte do lockup oficial, ver
   comentario em base.html) carrega o nome por extenso, entao so o "Powered
   by" e texto nosso. */
.powered-by {
  display: flex; align-items: center; gap: 6px;
  padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--rule-strong);
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
}
.powered-by img { display: block; height: 17px; width: auto; }
.topo nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topo nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.topo nav a:hover { color: var(--dark); }
.topo nav a.btn.primario { color: #fff; }
/* Botao de "Sair" e um <form>/<button>, nao <a> (POST, nao GET -- CSRF), mas
   precisa ler igual aos links ao lado no topo. */
.btn-sair { background: none; border: none; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.btn-sair:hover { color: var(--dark); }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
/* `pill-admin`, nao `admin`: `.admin` e o conteiner da pagina de
   administracao (padding de 90 px), e a pilula herdava esse padding. */
.pill.pill-admin { background: var(--dark-wash); color: var(--dark); }
.topo .email { color: var(--ink-3); }
.perfil-menu { position: relative; }
.perfil-menu summary {
  list-style: none; display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; color: var(--ink-2);
}
.perfil-menu summary::-webkit-details-marker { display: none; }
.perfil-icone {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dark); color: #fff; font-weight: 700;
}
.perfil-email { color: var(--ink-3); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-painel {
  position: absolute; top: calc(100% + 12px); right: 0; width: min(310px, calc(100vw - 28px));
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; z-index: 30;
}
.perfil-painel::before {
  content: ""; position: absolute; top: -7px; right: 13px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}
.perfil-painel a, .perfil-painel button {
  display: block; width: 100%; text-align: left; color: var(--ink); padding: 10px 11px; border-radius: 4px;
}
.perfil-painel a:hover, .perfil-painel button:hover { background: var(--surface-2); color: var(--dark); }
.perfil-identidade { padding: 11px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.perfil-identidade b, .perfil-identidade span { display: block; overflow-wrap: anywhere; }
.perfil-identidade b { font-size: 14px; }
.perfil-identidade span { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 8px; }
.perfil-identidade .pill { display: inline-flex; font-style: normal; }
/* Celular: o topo cabe em 375 px -- saem o e-mail e o perfil (o relatorio e
   lido no celular, espec. do Plantio Certo §6). O logo desce a 18 px (minimo
   do manual: 16 px) para sobrar respiro entre ele e "Entrar" + "Criar conta
   gratis" do visitante em 375 px. */
@media (max-width: 600px) {
  header.topo { padding: 0 14px; gap: 18px; height: 56px; }
  .marca img { height: 18px; }
  .topo .email, .topo .pill, .powered-by, .perfil-email { display: none; }
  .topo nav { gap: 12px; font-size: 13.5px; }
  .topo nav .btn { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
}

/* ---------------------------------------------------------------- botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: 14px;
  padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn.primario { background: var(--dark); color: #fff; }
.btn.primario:hover { background: var(--dark-hover); }
.btn.secundario { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn.secundario:hover { border-color: var(--dark); color: var(--dark); }
.btn-esqueci { width: 100%; margin-top: 10px; color: var(--dark) !important; background: #fff !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=email], input[type=password], input[type=number], select {
  font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); width: 100%;
}

.sucesso {
  margin: 14px 0; padding: 10px 12px; border-radius: var(--radius);
  background: var(--dark-wash); color: var(--dark); font-size: 14px;
}

/* --------------------------------------------------------- confirmação */
.confirmacao {
  /* 64px = altura do header (58px era da marca D6). */
  width: min(960px, calc(100% - 40px)); min-height: calc(100vh - 64px); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.confirmacao-intro h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; margin: 14px 0; color: var(--dark); }
.confirmacao-intro p { max-width: 360px; color: var(--ink-2); font-size: 17px; }
.confirmacao-intro ol { margin: 28px 0 0; padding-left: 22px; color: var(--ink-2); }
.confirmacao-intro li { margin: 12px 0; }
.confirmacao-cartao { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); padding: 34px; }
.confirmacao-cartao h2 { margin: 4px 0 10px; font-size: 23px; color: var(--dark); }
.confirmacao-cartao p { color: var(--ink-2); }
.confirmacao-saudacao { margin: 0; font-size: 14px; }
.confirmacao-email { margin: -7px 0 22px; color: var(--ink) !important; font-weight: 650; overflow-wrap: anywhere; }
.confirmacao-ajuda { margin: 22px 0 0; font-size: 12.5px; }
@media (max-width: 700px) {
  .confirmacao { grid-template-columns: 1fr; gap: 28px; padding: 42px 0; align-items: start; }
  .confirmacao-cartao { padding: 25px; }
}

/* ---------------------------------------------------------------- mapa */
.mapa-layout { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 64px); }
@media (max-width: 820px) { .mapa-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
@media (max-width: 600px) { .mapa-layout { height: calc(100vh - 56px); } }

.painel {
  background: var(--surface); border-right: 1px solid var(--rule);
  padding: 22px; overflow-y: auto;
}
.painel h1 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px; }
.painel .sub { color: var(--ink-2); font-size: 14px; margin: 0 0 22px; }

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; }
.campo .ajuda { font-size: 12px; color: var(--ink-3); margin: 5px 0 0; line-height: 1.4; }
.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#mapa { width: 100%; height: 100%; background: var(--surface-2); }
.aviso-mapa {
  position: absolute; inset: auto 16px 16px 16px; z-index: 5;
  background: var(--medio-wash); color: var(--ink);
  border-left: 3px solid var(--medio);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
}

/* ---------------------------------------------------------------- cartoes */
.cartao {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.cartao h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.01em; }
.cartao p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.cartao p:last-child { margin-bottom: 0; }

/* Selo de risco/condicao: o texto fica em tinta (o manual proibe a cor de
   risco em texto) e a cor vai numa bolinha ao lado. O icone e o rotulo
   continuam -- nunca so a cor. */
.selo {
  --selo-cor: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink);
}
.selo::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--selo-cor); display: none;
}
.selo.baixo, .selo.favoravel, .selo.std-bom { --selo-cor: var(--light); }
.selo.medio, .selo.neutro, .selo.atencao, .selo.std-atencao { --selo-cor: var(--medio); }
.selo.alto, .selo.critico, .selo.std-ruim { --selo-cor: var(--alto); }
.selo:is(.baixo, .favoravel, .std-bom, .medio, .neutro, .atencao, .std-atencao,
         .alto, .critico, .std-ruim)::before { display: block; }
.selo:is(.baixo, .favoravel, .std-bom) { background: var(--dark-wash); }
.selo:is(.medio, .neutro, .atencao, .std-atencao) { background: var(--medio-wash); }
.selo:is(.alto, .critico, .std-ruim) { background: var(--alto-wash); }
/* Condicao "Regular": na media, nem bom nem ruim -- bolinha em tinta neutra. */
.selo.std-neutro { --selo-cor: var(--ink-3); }
.selo.std-neutro::before { display: block; }
/* Tendencia de chuva/temperatura: informativo, nao um risco -- acima ou
   abaixo da media nao e "bom" ou "ruim" fora de contexto agronomico, entao
   nao usa a paleta de risco. Tom neutro, sem bolinha. */
.selo.dado { background: var(--surface-2); color: var(--ink-2); }

.kpi { display: grid; gap: 3px; }
.kpi .valor {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink);
}

/* ---------------------------------------------------------------- relatorio */
.relatorio { max-width: 980px; margin: 0 auto; padding: 0 24px 100px; }

/* Capa clara, como a capa do manual: o logo cor cheia pode aparecer em cima
   dela, e o PDF nao gasta um bloco inteiro de tinta escura. */
.capa {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 30px 32px; margin: 26px 0 22px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.capa h1 { margin: 0 0 4px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.02em; line-height: 1.1; }
.capa .local { font-size: 16px; color: var(--ink-2); margin-bottom: 22px; }
.capa .grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 22px; border-top: 1px solid var(--rule); padding-top: 20px;
}
.capa dt { margin-bottom: 3px; }
.capa dd { margin: 0; font-size: 14.5px; font-weight: 600; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.kpis .cartao { margin: 0; }

/* Card de sintese, entre a capa e as tabelas. E a primeira coisa que o
   produtor le, entao o numero e o maior elemento tipografico do relatorio --
   e o "+- sigma" fica junto dele, no mesmo respiro, nunca numa nota de
   rodape que ninguem le. */
.resumo {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--dark); border-radius: var(--radius);
  padding: 22px 26px; margin: 0 0 26px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.resumo .rotulo { color: var(--dark); margin-bottom: 10px; }
.resumo .frase { margin: 0 0 6px; font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.resumo .numero {
  font-family: var(--mono); font-size: clamp(30px, 5vw, 42px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; color: var(--dark); font-variant-numeric: tabular-nums;
}
.resumo .numero .unidade {
  font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink-2);
  margin-left: 6px; letter-spacing: 0;
}
.resumo .faixa { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* Valor bloqueado (quem nao pagou, D-perfil-2): a mascara ocupa o lugar do
   numero real -- nunca um `blur` sobre o numero de verdade, que devtools
   desfaz; o servidor nunca manda o numero pra quem nao pagou. Mesmo padrao
   diagonal do `.trava .fantasma`, so que do tamanho de um numero. */
.numero-bloqueada .mascara {
  display: inline-block; width: 3.4em; height: .62em; border-radius: 6px;
  vertical-align: middle;
  background: repeating-linear-gradient(
    100deg, var(--surface-2) 0 7px, var(--rule-strong) 7px 14px);
}
.numero-bloqueada .unidade { margin-left: 10px; }
.faixa-bloqueada { color: var(--ink-3); font-style: italic; }

.resumo .rodape {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 76ch;
}

/* O cabecalho da tabela e `text-transform: uppercase`, e isso transforma o
   sigma minusculo em SOMATORIO (sigma -> Sigma). Simbolo entra aqui. */
.literal { text-transform: none; }

/* O "+- sigma" nunca compete com a media: mesmo peso de leitura, um degrau
   abaixo em tamanho e cor. Vale no card e na tabela de cenarios. */
.mais-menos { font-weight: 500; color: var(--ink-3); }
.resumo .numero .mais-menos { font-size: .62em; letter-spacing: -.01em; }
table.dados .mais-menos { font-size: 12.5px; }

.bloco { margin: 34px 0; }
.bloco > h2 {
  font-size: 20px; letter-spacing: -.01em; margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 2px solid var(--dark);
}
.bloco > .contexto { color: var(--ink-2); font-size: 14.5px; margin: 0 0 16px; }

table.dados { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dados th, table.dados td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule);
}
table.dados thead th { background: var(--surface-2); border-bottom: 1px solid var(--rule-strong); }
table.dados td.num, table.dados th.num { text-align: right; }
/* fonte mono do numero vem da regra .num global, no topo do arquivo */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }

.grafico { height: 340px; width: 100%; }
.figura { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; }
.takeaway {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink);
}

/* ------------------------------------------------------ relatorio standard */
/* Relatorio Standard do Plantio Certo (plan_plantio_certo.md, etapa 4):
   coluna unica e estreita -- le no celular, sai inteira num print de
   WhatsApp e imprime em A4 sem reflow. KPIs sempre EMPILHADOS (espec. §6),
   nunca lado a lado. */
.relatorio.std { max-width: 720px; padding: 0 16px 90px; }
.std-capa { padding: 24px 22px; margin-top: 18px; }
.std-capa h1 { font-size: clamp(24px, 6vw, 34px); margin-bottom: 18px; }
.std-sobre { color: var(--dark); margin-bottom: 6px; }
.std-capa .grade { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; padding-top: 16px; }

.std-resumo .frase { font-size: 16px; color: var(--ink); }
.std-resumo .numero { font-size: clamp(40px, 11vw, 56px); }
.std-resumo .faixa { font-size: 15px; }

.std-kpis { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 26px; }
.std-kpi {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 16px; display: grid; gap: 4px;
}
.std-kpi .valor {
  font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.15; color: var(--dark); font-variant-numeric: tabular-nums;
}
.std-kpi .valor .unidade { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.std-kpi .valor .selo { font-size: 14px; padding: 5px 12px; letter-spacing: 0; }
.std-kpi .sub { font-size: 14px; color: var(--ink-2); }

/* Alerta: a cor funcional vai so na borda (indicador), o texto fica em tinta. */
.std-alerta { border-left-width: 4px; }
.std-alerta.std-atencao { border-left-color: var(--medio); }
.std-alerta.std-neutro { border-left-color: var(--ink-3); }

.std-pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.std-ponto {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px;
}
.std-ponto b { font-size: 14.5px; font-weight: 800; }
.std-ponto p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
/* Icone e indicador grafico (glifo branco sobre a cor), nao texto corrido. */
.std-icone {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--medio); color: #fff;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.std-ponto-semeadura .std-icone { background: var(--light); }
.std-ponto-evitar .std-icone { background: var(--alto); }

.std-grafico { height: 300px; }
@media (max-width: 600px) { .std-grafico { height: 250px; } }
.std-subtitulo { margin: 4px 0 4px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.std-subtitulo + .std-grafico { margin-bottom: 14px; }

.std-legenda { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.std-legenda li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: start; font-size: 13px; color: var(--ink-2); }
.std-legenda i { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
.std-legenda b { color: var(--ink); font-weight: 700; }

.std-dados { margin-top: 12px; font-size: 13.5px; }
.std-dados summary { cursor: pointer; color: var(--dark); font-weight: 700; }
.std-dados .tabela-rolagem { margin-top: 8px; max-height: 320px; overflow-y: auto; }

.std-institucional { background: var(--surface-2); border-radius: var(--radius); padding: 18px 20px; }
.std-institucional > h2 { border-bottom-color: var(--light); }
.std-institucional p { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; }

.std-acoes { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- paywall */
.trava {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 30px; text-align: center; margin: 30px 0;
}
.trava h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }
.trava p { color: var(--ink-2); max-width: 52ch; margin: 0 auto 18px; }
.trava .fantasma {
  height: 190px; margin: -6px 0 22px; border-radius: var(--radius);
  background: repeating-linear-gradient(
    100deg, var(--surface-2) 0 18px, var(--ground) 18px 36px);
  filter: blur(3px); opacity: .8;
}

/* -------------------------------------------------------------- checkout */
.checkout {
  width: min(920px, calc(100% - 40px)); min-height: calc(100vh - 58px);
  margin: 0 auto; display: grid; grid-template-columns: 1fr 380px;
  gap: 56px; align-items: center; padding: 42px 0;
}
.checkout-intro h1 {
  margin: 14px 0 10px; font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08; letter-spacing: -.03em; color: var(--dark);
}
.checkout-intro p:not(.selo) { color: var(--ink-2); font-size: 17px; max-width: 460px; }
.checkout-cartao {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: var(--shadow); padding: 28px;
}
.checkout-cartao h2 { margin: 0 0 18px; font-size: 21px; color: var(--dark); }
.checkout-cartao dl { margin: 0 0 22px; display: grid; gap: 12px; }
.checkout-cartao dl div {
  display: flex; justify-content: space-between; gap: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.checkout-cartao dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.checkout-cartao dd { margin: 0; text-align: right; font-weight: 650; color: var(--ink); }
.checkout-cartao form { display: flex; gap: 10px; flex-wrap: wrap; }
.checkout-nota { margin: 18px 0 0; color: var(--ink-3); font-size: 13px; }
@media (max-width: 760px) {
  .checkout { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .checkout-cartao { padding: 22px; }
}

/* ---------------------------------------------------------------- conta */
.conta { max-width: 860px; margin: 0 auto; padding: 34px 24px 90px; }
.conta-cabecalho { margin-bottom: 28px; }
.conta-cabecalho h1 {
  margin: 12px 0 4px; font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08; letter-spacing: -.03em; color: var(--dark);
}
.conta-cabecalho p { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.conta-secao h2 { font-size: 19px; margin: 0 0 14px; }
.relatorios-comprados { display: grid; gap: 12px; }
.relatorio-comprado {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 15px 16px;
}
.relatorio-comprado h3 { margin: 0 0 3px; font-size: 15.5px; }
.relatorio-comprado p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.conta-vazia { padding: 22px; }
.conta-vazia .btn { margin-top: 8px; }
@media (max-width: 620px) {
  .relatorio-comprado { align-items: stretch; flex-direction: column; }
  .relatorio-comprado .btn { width: 100%; }
}

/* ---------------------------------------------------------------- admin */
.admin { max-width: 1180px; margin: 0 auto; padding: 26px 24px 90px; }
.admin h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 22px; }
.admin h2 { font-size: 17px; margin: 34px 0 10px; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }

/* ---------------------------------------------------------------- auth */
.auth { max-width: 400px; margin: 60px auto; padding: 0 24px; }
.auth h1 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.auth p.sub { color: var(--ink-2); margin: 0 0 24px; font-size: 14.5px; }
.erro {
  background: var(--alto-wash); color: var(--ink); padding: 10px 13px;
  border-left: 3px solid var(--alto);
  border-radius: var(--radius); font-size: 14px; margin-bottom: 16px;
}

/* ---------------------------------------------------------------- impressao */
@media print {
  header.topo, .nao-imprime { display: none !important; }
  body { background: #fff; }
  .relatorio { max-width: none; padding: 0; }
  .figura, .cartao, .capa { break-inside: avoid; }
  .bloco { break-inside: avoid-page; }
  @page { size: A4 portrait; margin: 11mm 10mm; }
}