/* ============================================================
   CREPTUS · brand-v7.css · 25/out/2026 (paleta Organic Intelligence sobre o v6)
   Arquivo novo, escrito do zero. Não tem camadas: o que está aqui
   é o que vale. O brand.css antigo continua no ar para as peças já
   publicadas e não deve ser carregado junto com este.

   Regras de uso de cada peça: MARCA.md.
   Amostra viva de cada peça: starter-v6.html.

   Letra que a página precisa carregar (Google Fonts):
   https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&family=JetBrains+Mono:wght@400..600&family=Space+Grotesk:wght@600&display=swap

   Tema: <html data-tema="claro">, "escuro" ou "auto".
   Sem o atributo, ou com "auto", segue o aparelho.

   Índice deste arquivo
    1  Cores, tema claro
    2  Cores, tema escuro
    3  Letra, tamanhos, espaço e forma
    4  Base
    5  Casca: índice, faixas e miolo
    6  Texto
    7  Botão
    8  Carimbo de estado
    9  Quadrados do plano
   10  Etiqueta
   11  Três números
   12  Fila de Entregas e rastreio
   13  Cartões, placar, número de cartaz e planos
   14  Passos, pedido ao cliente, pares e próximos passos
   15  Linha com chevron
   16  Termo sublinhado
   17  Gaveta
   18  Tabela
   19  Rodapé, Semente e ícone
   20  Impressão e PDF
   ============================================================ */


/* ---------- 1 · CORES, TEMA CLARO ----------------------------
   Paleta v7, 25/out/2026: Tinta, Marfim e Broto continuam. Sage, Neural Teal
   e Amber entram no lugar do amarelo, do azul claro e do cinza neutro.
   Regra única: cor é sempre fundo, com Tinta por cima.
   Exceção: o Neural Teal pode ser letra sobre o papel claro (link, prazo).
   Cada cor com trabalho tem um só trabalho:
     Broto claro  o que a leitura achou na empresa, e o próximo passo (botão)
     Amber        o que depende do cliente, e atenção
     Teal claro   a Creptus está trabalhando
     Sage         neutro: na fila, sem ação de ninguém
     Tinta        Entregue (carimbo) e o que já está no ar
   Crítico: cartão em Tinta com letra Amber. Vermelho não existe nesta marca.
   Legenda: sempre o quadradinho da cor seguido do que ela quer dizer.
   Nunca escrever o nome da cor (âmbar, teal, verde) para o cliente. */
:root {
  /* paleta da marca: não muda com o tema */
  --c-tinta: #1A231D;          /* Forest Core */
  --c-marfim: #F4F3EC;         /* Organic White */
  --c-broto: #8FC23C;          /* Growth: ponto novo da Semente */
  --c-broto-claro: #B8E34D;    /* botão principal */
  --c-sage: #A7B9A5;
  --c-teal: #3C7770;           /* Neural Teal */
  --c-amber: #DF8F5B;

  /* papel */
  --fundo: #F4F3EC;            /* página */
  --fundo-2: #E6EAE1;          /* faixa alternada, puxada pro Sage */
  --superficie: #FBFBF7;       /* cartão, etiqueta, tabela */
  --superficie-alta: #FFFFFF;  /* gaveta e opção marcada */

  /* texto: sempre cor sólida. Transparência só em desabilitado. */
  --texto: #1A231D;
  --texto-2: #42504A;
  --texto-3: #566459;
  --texto-off: rgba(26, 35, 29, .38);
  --texto-teal: #3C7770;       /* link e prazo, 4,7 para 1 */

  /* linhas */
  --linha: #D3DACF;
  --contorno: #7E8879;

  /* cores com trabalho */
  --achado: #B8E34D;           /* Broto claro */
  --voce: #DF8F5B;             /* Amber */
  --caminho: #8CC0B8;          /* Teal claro, Tinta por cima a 7,9 para 1 */
  --caminho-listra: #3C7770;   /* listra do teal no papel e sem cor */
  --neutro: #A7B9A5;           /* Sage */
  --sobre-cor: #1A231D;        /* letra sobre achado, voce, caminho e neutro */
  --achado-suave: #E8F3C9;
  --voce-suave: #F7E2D3;
  --caminho-suave: #DCEBE8;
  --neutro-suave: #E3E9E1;

  /* crítico: cartão em Tinta com letra Amber */
  --critico: #1A231D;
  --sobre-critico: #DF8F5B;

  /* Entregue: carimbo de Tinta com o visto em Broto claro */
  --entregue: #1A231D;
  --sobre-entregue: #B8E34D;
  --visto: #B8E34D;

  /* botão principal: Broto claro com Tinta, nos dois temas */
  --botao: #B8E34D;
  --sobre-botao: #1A231D;

  /* faixa escura (pontuação entre faixas claras) */
  --escura-fundo: #1A231D;
  --escura-superficie: #26332B;
  --escura-texto: #F4F3EC;
  --escura-texto-2: #B8C5BB;
  --escura-linha: #3A4D40;
  --escura-destaque: #B8E34D;

  --veu: rgba(10, 16, 13, .36);
  --sombra: 0 18px 50px rgba(10, 16, 13, .18);
  color-scheme: light;
}


/* ---------- 2 · CORES, TEMA ESCURO ---------------------------
   As mesmas cores. O Teal vira o tom claro para poder ser letra.
   O carimbo de Entregue e o cartão crítico invertem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #0F1713; --fundo-2: #17221C; --superficie: #1F2D25; --superficie-alta: #263529;
    --texto: #EEF3EA; --texto-2: #B8C5BB; --texto-3: #92A499; --texto-off: rgba(238, 243, 234, .38); --texto-teal: #8CC0B8;
    --linha: #2F4036; --contorno: #74857A;
    --achado: #B8E34D; --voce: #DF8F5B; --caminho: #8CC0B8; --caminho-listra: #3C7770; --neutro: #A7B9A5; --sobre-cor: #0F1713;
    --achado-suave: #26381A; --voce-suave: #3E2A1B; --caminho-suave: #1C3330; --neutro-suave: #26322A;
    --critico: #F4F3EC; --sobre-critico: #7A531A;
    --entregue: #EEF3EA; --sobre-entregue: #1A231D; --visto: #2B6F1B;
    --botao: #B8E34D; --sobre-botao: #0F1713;
    --escura-fundo: #F4F3EC; --escura-superficie: #FBFBF7; --escura-texto: #1A231D; --escura-texto-2: #42504A; --escura-linha: #D3DACF; --escura-destaque: #1A231D;
    --veu: rgba(0, 0, 0, .6); --sombra: 0 18px 50px rgba(0, 0, 0, .5);
  }
}
:root[data-tema="escuro"], :root[data-theme="dark"]:not([data-tema="claro"]), .tema-escuro {
  color-scheme: dark;
  --fundo: #0F1713; --fundo-2: #17221C; --superficie: #1F2D25; --superficie-alta: #263529;
  --texto: #EEF3EA; --texto-2: #B8C5BB; --texto-3: #92A499; --texto-off: rgba(238, 243, 234, .38); --texto-teal: #8CC0B8;
  --linha: #2F4036; --contorno: #74857A;
  --achado: #B8E34D; --voce: #DF8F5B; --caminho: #8CC0B8; --caminho-listra: #3C7770; --neutro: #A7B9A5; --sobre-cor: #0F1713;
  --achado-suave: #26381A; --voce-suave: #3E2A1B; --caminho-suave: #1C3330; --neutro-suave: #26322A;
  --critico: #F4F3EC; --sobre-critico: #7A531A;
  --entregue: #EEF3EA; --sobre-entregue: #1A231D; --visto: #2B6F1B;
  --botao: #B8E34D; --sobre-botao: #0F1713;
  --escura-fundo: #F4F3EC; --escura-superficie: #FBFBF7; --escura-texto: #1A231D; --escura-texto-2: #42504A; --escura-linha: #D3DACF; --escura-destaque: #1A231D;
  --veu: rgba(0, 0, 0, .6); --sombra: 0 18px 50px rgba(0, 0, 0, .5);
}


/* ---------- 3 · LETRA, TAMANHOS, ESPAÇO E FORMA --------------
   Uma família para ler: Manrope, de 400 a 800, em texto, título e número.
   Letra de máquina (JetBrains Mono) só em código de Pedido e data de etiqueta.
   Space Grotesk 600 só no logotipo. */
:root {
  --letra: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --letra-codigo: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --letra-logo: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  /* sete tamanhos, cada um com um trabalho. Nada abaixo de 13 px. */
  --t-rotulo: .8125rem;                       /* 13 · rótulo, legenda, dado */
  --t-apoio: .9375rem;                        /* 15 · apoio, célula de tabela */
  --t-leitura: 1.0625rem;                     /* 17 · leitura */
  --t-abertura: 1.3125rem;                    /* 21 · parágrafo de abertura */
  --t-bloco: 1.625rem;                        /* 26 · título de bloco */
  --t-faixa: clamp(1.75rem, 2.7vw, 2.375rem); /* até 38 · título de faixa */
  --t-pagina: clamp(2.1rem, 3.9vw, 3.5rem);   /* até 56 · título da página e número de cartaz */

  /* espaço */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 36px; --e-7: 56px;
  --pad-x: clamp(18px, 3.6vw, 56px);
  --pad-faixa: clamp(44px, 5.4vw, 78px);

  /* forma */
  --raio-1: 6px;     /* carimbo, marca-texto, quadrado */
  --raio-2: 10px;    /* botão, linha, campo */
  --raio-3: 16px;    /* cartão, etiqueta, tabela */
  --traco-forma: 1.5px;

  /* movimento: só em resposta ao toque */
  --rapido: 160ms cubic-bezier(.2, .7, .2, 1);
  --medio: 220ms cubic-bezier(.2, .7, .2, 1);

  /* índice: 240 px; 180 px de 700 a 1079 px; barra inferior abaixo de 700 px */
  --indice-w: 240px;
}
@media (max-width: 1079px) { :root { --indice-w: 180px; } }
@media (max-width: 699px)  { :root { --indice-w: 0px; } }


/* ---------- 4 · BASE ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--letra); font-size: var(--t-leitura); line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-color: var(--contorno); }
a:hover { text-decoration-color: var(--texto); }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
[disabled], [aria-disabled="true"] { color: var(--texto-off); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ---------- 5 · CASCA: ÍNDICE, FAIXAS E MIOLO ----------------
   O índice é o sumário da peça. No celular vira barra inferior. */
.indice {
  position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--indice-w);
  display: flex; flex-direction: column; gap: 22px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 14px 20px;
  background: var(--fundo); border-right: 1px solid var(--linha); overflow-y: auto;
}
.indice-logo { display: flex; align-items: center; gap: 9px; padding-left: 8px; color: var(--texto); text-decoration: none; }
.indice ul { display: grid; gap: 2px; }
.indice li a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--raio-2);
  color: var(--texto-2); text-decoration: none; font-size: var(--t-apoio); font-weight: 500; line-height: 1.25;
}
.indice li a:hover { background: var(--fundo-2); color: var(--texto); }
.indice li a[aria-current="true"] { background: var(--texto); color: var(--fundo); font-weight: 700; }
.indice-pe { margin-top: auto; display: grid; gap: 12px; padding-left: 10px; font-size: var(--t-rotulo); line-height: 1.5; color: var(--texto-3); }
.conteudo { margin-left: var(--indice-w); min-width: 0; }
@media (max-width: 1079px) { .indice { padding-inline: 10px; } .indice li a { padding: 8px; } }
@media (max-width: 699px) {
  .indice { inset: auto 0 0 0; width: auto; flex-direction: row; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: 0; border-top: 1px solid var(--linha); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .indice::-webkit-scrollbar { display: none; }
  .indice .indice-logo, .indice .indice-pe { display: none; }
  .indice ul { display: flex; gap: 4px; }
  .indice li a { min-height: 44px; padding: 0 12px; white-space: nowrap; }
  .conteudo { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* faixa: largura cheia. Fundo alterna entre .faixa e .faixa-2.
   .faixa-tela: a primeira tela fecha a ideia; o resto cresce com a rolagem.
   .faixa-escura: pontuação entre faixas claras, uma ou duas por peça, nunca em sequência. */
.faixa { padding: var(--pad-faixa) var(--pad-x); border-bottom: 1px solid var(--linha); }
.faixa-2 { background: var(--fundo-2); }
.faixa-tela { min-height: min(100svh, 980px); display: grid; align-content: center; }
.faixa-escura, .cartao-escuro {
  --fundo: var(--escura-fundo); --fundo-2: var(--escura-superficie); --superficie: var(--escura-superficie);
  --texto: var(--escura-texto); --texto-2: var(--escura-texto-2); --texto-3: var(--escura-texto-2);
  --linha: var(--escura-linha); --contorno: var(--escura-texto-2);
  background: var(--fundo); color: var(--texto);
}
.faixa-escura { border-bottom-color: var(--fundo); }
/* miolo: a página usa a largura toda ao lado do índice; medida de leitura só no parágrafo */
.miolo { max-width: 1280px; margin-inline: auto; min-width: 0; display: grid; gap: clamp(26px, 3vw, 40px); }
.miolo > * { min-width: 0; }

/* abertura: texto à esquerda, o objeto que prova à direita. Abaixo de 1060 px, um embaixo do outro. */
.abertura { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.objeto { display: grid; gap: 10px; min-width: 0; }
.objeto-legenda { font-size: var(--t-rotulo); color: var(--texto-3); }
@media (max-width: 1060px) { .abertura { grid-template-columns: minmax(0, 1fr); } }

.grade-2, .grade-3, .grade-4 { display: grid; gap: 16px; align-items: stretch; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); } }


/* ---------- 6 · TEXTO -----------------------------------------
   Título diz do que o bloco trata e o fato principal, em frase comum.
   Título é sempre Tinta. .fraco deixa a primeira frase em cinza, só no
   momento de virada, no máximo um por tela.
   Rótulo em letra normal de 13 px. Nunca caixa alta. */
.cab { display: grid; gap: 14px; }
h1, h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: var(--t-pagina); max-width: 20ch; }
h2 { font-size: var(--t-faixa); max-width: 26ch; }
h3 { font-size: var(--t-bloco); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h4 { font-size: var(--t-leitura); font-weight: 700; line-height: 1.3; }
.fraco { color: var(--texto-3); }
.abre { font-size: var(--t-abertura); line-height: 1.45; color: var(--texto-2); max-width: 36em; }
p { max-width: 46em; }
.apoio { font-size: var(--t-apoio); color: var(--texto-2); }
.nota { font-size: var(--t-apoio); color: var(--texto-2); padding-top: 12px; border-top: 1px solid var(--linha); }
.rotulo { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); line-height: 1.35; }
p b, li b, dd b { color: var(--texto); }
/* chapéu: só quando traz informação nova (cliente, data, origem). Nunca repete o menu. */
.chapeu { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); }

/* marca-texto: só no dado que a leitura achou na empresa do cliente. No máximo dois por bloco. */
mark, .marca-texto {
  background: var(--achado); color: var(--sobre-cor); padding: .06em .3em; margin-inline: -.06em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; font-weight: 600;
}
/* código de Pedido e data de etiqueta. Só esses dois. */
.codigo { font-family: var(--letra-codigo); font-size: var(--t-rotulo); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* lista com ponto: afirmação em negrito, apoio em texto normal */
.pontos { display: grid; gap: 10px; }
.pontos > li { position: relative; padding-left: 20px; }
.pontos > li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--texto); }


/* ---------- 7 · BOTÃO ----------------------------------------
   Um principal por tela: Broto claro com Tinta. Os outros, em contorno.
   O texto diz o que acontece. Sem seta no texto. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px; border: 0; border-radius: var(--raio-2);
  background: var(--botao); color: var(--sobre-botao); font-family: var(--letra); font-size: var(--t-leitura); font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26, 35, 29, .16); }
.botao-2 { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 var(--traco-forma) var(--contorno); }
.botao-2:hover { background: var(--fundo-2); box-shadow: inset 0 0 0 var(--traco-forma) var(--texto); }
.botao-pequeno { min-height: 40px; padding: 8px 14px; font-size: var(--t-apoio); }
.botao[disabled] { background: var(--fundo-2); color: var(--texto-off); box-shadow: none; transform: none; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }


/* ---------- 8 · CARIMBO DE ESTADO ----------------------------
   O estado do Pedido. Sempre ícone e palavra; a cor nunca trabalha sozinha.
   Com quem está a bola? Creptus trabalhando: teal claro. Cliente: âmbar. Na fila: sage.
   Entregue: carimbo de Tinta. */
.carimbo {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 10px 4px 7px; border-radius: 7px;
  font-family: var(--letra); font-size: var(--t-rotulo); font-weight: 700; line-height: 1.3; white-space: nowrap; font-style: normal;
  color: var(--texto-2); box-shadow: inset 0 0 0 var(--traco-forma) var(--contorno); justify-self: start; align-self: start;
}
.carimbo .icone { width: 16px; height: 16px; --traco: 2.1; }
.carimbo[data-e="entregue"] { background: var(--entregue); color: var(--sobre-entregue); box-shadow: none; }
.carimbo[data-e="entregue"] .icone { color: var(--visto); }
.carimbo[data-e="caminho"]  { background: var(--caminho); color: var(--sobre-cor); box-shadow: none; }
.carimbo[data-e="voce"]     { background: var(--voce); color: var(--sobre-cor); box-shadow: none; }
.carimbo[data-e="achado"]   { background: var(--achado); color: var(--sobre-cor); box-shadow: none; padding-left: 10px; }
.carimbo[data-e="sugerido"] { background: var(--texto); color: var(--fundo); box-shadow: none; padding-left: 10px; }
.carimbo[data-e="desligado"] { color: var(--texto-3); }
.carimbo[data-e="neutro"]   { background: var(--neutro); color: var(--sobre-cor); box-shadow: none; }
.carimbo:not(:has(.icone)) { padding-left: 10px; }


/* ---------- 9 · QUADRADOS DO PLANO ---------------------------
   Um quadrado por espaço. Ordem fixa: no ar, constrói, aguarda, livre.
     no ar     cheio de Tinta      data-e="ar"
     constrói  azul claro          data-e="constroi"
     aguarda   amarelo             data-e="voce"
     livre     só contorno         sem data-e
   Quadrado dividido: data-mix com --a (no ar), --c (constrói) e --v
   (aguarda), em fração do quadrado. data-mix="cheio" quando não sobra livre.
   O texto ao lado diz o percentual ocupado. O texto do leitor de tela fala
   em porcentagem de cada espaço: "Mantém o que já funciona: 50% do espaço 1".
   No papel e sem cor, o azul ganha listra. */
.espacos { --tom-constroi: var(--caminho); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.espacos i { flex: none; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 var(--traco-forma) var(--contorno); }
.espacos i[data-e="ar"]       { background: var(--entregue); box-shadow: none; }
.espacos i[data-e="constroi"] { background: var(--tom-constroi); box-shadow: none; }
.espacos i[data-e="voce"]     { background: var(--voce); box-shadow: none; }
.espacos i[data-mix] {
  --a: 0; --c: 0; --v: 0;
  background:
    linear-gradient(90deg,
      var(--entregue) calc(var(--a) * 100%),
      transparent 0 calc((var(--a) + var(--c)) * 100%),
      var(--voce) 0 calc((var(--a) + var(--c) + var(--v)) * 100%),
      var(--superficie) 0),
    var(--tom-constroi);
}
.espacos i[data-mix="cheio"] { box-shadow: none; }
.espacos > span { margin-left: 6px; font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.espacos-grande i { width: 32px; height: 32px; border-radius: 7px; }
/* número embaixo de cada quadrado (na barra grande, onde o texto fala de cada espaço) */
.espacos-numerados { counter-reset: espaco; padding-bottom: 20px; row-gap: 26px; }
.espacos-numerados i { position: relative; counter-increment: espaco; }
.espacos-numerados i::after {
  content: counter(espaco); position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  font-size: var(--t-rotulo); font-weight: 600; font-style: normal; line-height: 1; text-align: center; color: var(--texto-3);
}
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-rotulo); color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { flex: none; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 var(--traco-forma) var(--contorno); }
.legenda i[data-e="ar"] { background: var(--entregue); box-shadow: none; }
.legenda i[data-e="constroi"] { background: var(--tom-constroi, var(--caminho)); box-shadow: none; }
.legenda i[data-e="voce"] { background: var(--voce); box-shadow: none; }
.legenda-linhas { flex-direction: column; gap: 6px; }
.legenda-linhas span { display: block; position: relative; padding-left: 21px; }
.legenda-linhas i { position: absolute; left: 0; top: .2em; }


/* ---------- 10 · ETIQUETA ------------------------------------
   Pedido, item e Entrega. O único objeto com cabeça de Tinta.
   Cabeça: nome à esquerda, data em .codigo à direita. */
.etiqueta { min-width: 0; overflow: hidden; background: var(--superficie); border: var(--traco-forma) solid var(--texto); border-radius: 14px; }
.etiqueta-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: var(--texto); color: var(--fundo); }
.etiqueta-topo b { font-size: var(--t-apoio); font-weight: 700; }
.etiqueta-corpo { display: grid; padding: 14px 16px 16px; }
.etiqueta-titulo { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); }
.itens > li { display: grid; gap: 5px; padding: 12px 0 13px; border-bottom: 1px dashed var(--contorno); }
.item-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.item-linha b { font-size: var(--t-leitura); font-weight: 700; line-height: 1.25; }
.item-linha .qtd { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.itens p { font-size: var(--t-apoio); line-height: 1.5; color: var(--texto-2); }
.etiqueta-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 14px; }


/* ---------- 11 · TRÊS NÚMEROS --------------------------------
   Para construir, para ficar no ar e para levar. O valor à direita;
   embaixo, em etiquetas curtas, o que o número cobre. */
.tres-numeros { display: grid; }
.tres-numeros > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--linha); }
.tres-numeros dt { font-size: var(--t-apoio); font-weight: 600; color: var(--texto-2); }
.tres-numeros dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tres-numeros dd small { display: block; font-size: var(--t-rotulo); font-weight: 500; color: var(--texto-3); }
.tres-numeros dd.inclui { grid-column: 1 / -1; text-align: left; }
.inclui { display: flex; flex-wrap: wrap; gap: 5px; font-weight: 400; }
.inclui span { padding: 2px 8px; border-radius: var(--raio-1); background: var(--fundo-2); font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-2); }


/* ---------- 12 · FILA DE ENTREGAS E RASTREIO -----------------
   .fila: a fila do plano, Entrega por Entrega, numa régua só.
   .rastreio: cada Pedido com código, nome, data e carimbo.
   .falta: o que falta do cliente, dentro da linha do Pedido. */
.fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.fila > li { display: grid; gap: 12px; align-content: start; padding: 16px; border-left: 1px solid var(--linha); min-width: 0; }
.fila > li:first-child { border-left: 0; }
.fila-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.fila-topo b { font-size: var(--t-leitura); font-weight: 700; }
.fila-topo .codigo { color: var(--texto-3); }
.fila ul { display: grid; gap: 10px; }
.fila ul li { display: grid; gap: 1px; }
.fila ul li b { font-size: var(--t-apoio); font-weight: 600; line-height: 1.35; }
.fila ul li em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: var(--t-rotulo); color: var(--texto-2); }
.fila ul li em .icone { width: 15px; height: 15px; --traco: 2; }
.fila .espacos > span { flex-basis: 100%; margin: 2px 0 0; }
@media (max-width: 1180px) { .fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fila > li:nth-child(odd) { border-left: 0; } .fila > li:nth-child(n+3) { border-top: 1px solid var(--linha); } }
@media (max-width: 620px) { .fila { grid-template-columns: minmax(0, 1fr); } .fila > li { border-left: 0; } .fila > li:nth-child(n+2) { border-top: 1px solid var(--linha); } }

.rastreio { display: grid; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.rastreio > li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 13px 16px; border-top: 1px solid var(--linha); }
.rastreio > li:first-child { border-top: 0; }
.rastreio .codigo { color: var(--texto-3); }
.rastreio b { font-size: var(--t-leitura); font-weight: 600; line-height: 1.3; }
.rastreio .quando { font-size: var(--t-apoio); color: var(--texto-2); white-space: nowrap; }
.falta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border-radius: var(--raio-2); background: var(--voce-suave); font-size: var(--t-apoio); color: var(--texto); }
@media (max-width: 820px) {
  .rastreio > li { grid-template-columns: minmax(0, 1fr) auto; }
  .rastreio .codigo { grid-column: 1; } .rastreio b { grid-column: 1 / -1; } .rastreio .quando { grid-column: 1; } .falta { grid-column: 1 / -1; }
  .rastreio .carimbo { grid-column: 2; grid-row: 1; justify-self: end; }
}


/* ---------- 13 · CARTÕES, PLACAR, NÚMERO DE CARTAZ E PLANOS ---
   Cartão agrupa; não é enfeite. Item com mais de duas linhas vira cartão.
   .cartao-sugerido: contorno de Tinta e carimbo "Sugerido".
   .numero-cartaz: quando um número é o argumento da tela. Um por tela. */
.cartao { display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(16px, 2vw, 24px); border-radius: var(--raio-3); background: var(--superficie); border: 1px solid var(--linha); }
.cartao-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.cartao-topo h3, .cartao h3 { font-size: var(--t-abertura); font-weight: 800; letter-spacing: -.015em; }
.cartao-pe { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); font-size: var(--t-apoio); color: var(--texto-2); }
.cartao-sugerido { border: var(--traco-forma) solid var(--texto); }
.cartao-escuro { border-color: var(--fundo); }

.placar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--texto); }
.placar > div { display: grid; gap: 4px; align-content: start; padding: 14px 18px 4px; border-left: 1px solid var(--linha); }
.placar > div:first-child { padding-left: 0; border-left: 0; }
.placar dt { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); }
.placar dd { font-size: var(--t-bloco); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.placar dd small { display: block; margin-top: 4px; font-size: var(--t-apoio); font-weight: 500; letter-spacing: 0; color: var(--texto-2); }
@media (max-width: 700px) { .placar { grid-template-columns: minmax(0, 1fr); } .placar > div { padding: 12px 0; border-left: 0; border-top: 1px solid var(--linha); } .placar > div:first-child { border-top: 0; } }

.numero-cartaz { font-size: var(--t-pagina); font-weight: 800; line-height: .95; letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.numero-cartaz .un { margin-left: .18em; font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--texto-2); }
.faixa-escura .numero-cartaz, .cartao-escuro .numero-cartaz { color: var(--escura-destaque); }

.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plano-preco { font-size: var(--t-bloco); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.plano-preco small { margin-left: 4px; font-size: var(--t-apoio); font-weight: 500; letter-spacing: 0; color: var(--texto-2); }
@media (max-width: 900px) { .planos { grid-template-columns: minmax(0, 1fr); } }


/* ---------- 14 · PASSOS, PEDIDO AO CLIENTE, PARES E PRÓXIMOS ---
   .etapas: passos em ordem. O número só existe porque é sequência.
   Quem faz o passo vem escrito: "Você" ou "Creptus" (a Creptus é o sistema).
   .pede: o que a Creptus precisa do cliente: quem, o quê e para quê.
   .pares: o que o cliente disse e onde isso entrou.
   .proximos: fecha a peça. Quem faz e o que destrava. */
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; counter-reset: etapa; }
.etapa { counter-increment: etapa; display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--raio-3); background: var(--superficie); border: 1px solid var(--linha); }
.etapa::before { content: counter(etapa); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fundo-2); font-size: var(--t-apoio); font-weight: 800; }
.etapa[data-quem="voce"]::before { background: var(--voce); color: var(--sobre-cor); }
.etapa[data-quem="creptus"]::before { background: var(--caminho); color: var(--sobre-cor); }
.etapa[data-quem="entrega"]::before { background: var(--entregue); color: var(--sobre-entregue); }
.etapa h4 { font-size: var(--t-leitura); }
.etapa p { font-size: var(--t-apoio); color: var(--texto-2); }
.quem { font-size: var(--t-rotulo); font-weight: 700; color: var(--texto-3); }

.pede { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--raio-3); background: var(--voce-suave); border: 1px solid var(--linha); }
.pede-rotulo { display: flex; align-items: center; gap: 8px; font-size: var(--t-rotulo); font-weight: 700; color: var(--texto); }
.pede-rotulo .icone { width: 18px; height: 18px; }
.pede dl { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 6px 14px; font-size: var(--t-apoio); }
.pede dt { font-weight: 700; color: var(--texto-2); }
@media (max-width: 560px) { .pede dl { grid-template-columns: minmax(0, 1fr); } .pede dd { margin-bottom: 6px; } }

.pares { display: grid; gap: 12px; }
.par { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.par > div { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--raio-3); background: var(--superficie); border: 1px solid var(--linha); }
.par > div:last-child { border: var(--traco-forma) solid var(--texto); }
.par > .icone { align-self: center; width: 22px; height: 22px; color: var(--texto-3); }
.par p { font-size: var(--t-apoio); color: var(--texto-2); }
@media (max-width: 760px) { .par { grid-template-columns: minmax(0, 1fr); } .par > .icone { transform: rotate(90deg); justify-self: center; } }

.proximos { display: grid; counter-reset: passo; }
.proximos li { counter-increment: passo; display: grid; grid-template-columns: 34px 6.4em minmax(0, 1fr); gap: 6px 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.proximos li:last-child { border-bottom: 0; }
.proximos li::before { content: counter(passo); font-size: var(--t-bloco); font-weight: 800; line-height: 1; }
.faixa-escura .proximos li::before { color: var(--escura-destaque); }
.proximos .quem { font-size: var(--t-apoio); font-weight: 800; color: var(--texto); }
.proximos span { color: var(--texto-2); }
.proximos span strong { color: var(--texto); }
@media (max-width: 560px) { .proximos li { grid-template-columns: 28px minmax(0, 1fr); } .proximos .quem, .proximos span { grid-column: 2; } }


/* ---------- 15 · LINHA COM CHEVRON ---------------------------
   A linha fechada já responde. Abrir traz o porquê.
   <details class="linha"><summary><span class="pergunta">…</span>
   <span class="resposta">…</span><span class="girar">ícone chevron</span></summary><div>…</div></details>
   button.linha abre a gaveta: mesmo desenho, ícone de seta para o lado. */
.linhas { display: grid; border-top: 1px solid var(--linha); }
.linha { border-bottom: 1px solid var(--linha); }
.linha > summary, button.linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  width: 100%; padding: 14px 2px; background: none; border: 0; text-align: left; cursor: pointer; list-style: none;
  font-family: var(--letra); font-size: var(--t-leitura); color: var(--texto);
}
.linha > summary::-webkit-details-marker { display: none; }
.linha .pergunta { grid-column: 1; font-weight: 700; line-height: 1.3; }
.linha .resposta { grid-column: 1; font-size: var(--t-apoio); line-height: 1.45; color: var(--texto-2); }
.linha .girar {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fundo-2); color: var(--texto); transition: transform var(--rapido), background var(--rapido);
}
.faixa-2 .linha .girar { background: var(--superficie); }
.linha .girar .icone { width: 18px; height: 18px; }
.linha > summary:hover .girar, button.linha:hover .girar { background: var(--achado); color: var(--sobre-cor); }
.linha[open] > summary .girar { transform: rotate(180deg); background: var(--texto); color: var(--fundo); }
.linha > div { display: grid; gap: 10px; padding: 0 56px 16px 2px; font-size: var(--t-apoio); color: var(--texto-2); }
@media (max-width: 560px) { .linha > div { padding-right: 2px; } }


/* ---------- 16 · TERMO SUBLINHADO ----------------------------
   Explica uma palavra no lugar, em uma frase. Sublinhado pontilhado.
   <button type="button" class="termo" data-termo="espaco">espaços</button> */
.termo {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted var(--texto-3); text-decoration-thickness: 1.5px; text-underline-offset: .2em;
}
.termo:hover, .termo[aria-expanded="true"] { text-decoration-color: var(--texto); }
.balao {
  position: absolute; z-index: 40; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--raio-2);
  background: var(--texto); color: var(--fundo); font-family: var(--letra); font-size: var(--t-apoio); line-height: 1.45; box-shadow: var(--sombra);
}
.balao b { display: block; margin-bottom: 2px; color: var(--achado); }


/* ---------- 17 · GAVETA ---------------------------------------
   O detalhe extenso: tabela inteira, conta passo a passo, regra com
   exceção. Entra pelo lado e a página continua à vista. No celular,
   ocupa a tela inteira. <dialog class="gaveta"> com .gaveta-cab,
   .gaveta-fechar e .gaveta-corpo. */
dialog.gaveta {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(680px, 100vw); max-width: none; height: 100%; max-height: none;
  background: var(--superficie-alta); color: var(--texto); font-family: var(--letra);
  box-shadow: var(--sombra); overflow-y: auto; overscroll-behavior: contain;
}
dialog.gaveta::backdrop { background: var(--veu); }
.gaveta-cab {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) clamp(18px, 3vw, 30px) 14px; background: var(--superficie-alta); border-bottom: 1px solid var(--linha);
}
.gaveta-cab > div { display: grid; gap: 4px; min-width: 0; }
.gaveta-cab h3 { font-size: var(--t-bloco); }
.gaveta-fechar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fundo-2); color: var(--texto); cursor: pointer; }
.gaveta-fechar:hover { background: var(--texto); color: var(--fundo); }
.gaveta-fechar .icone { transform: rotate(45deg); }
.gaveta-corpo { display: grid; gap: 18px; padding: 20px clamp(18px, 3vw, 30px) calc(32px + env(safe-area-inset-bottom, 0px)); }
/* a gaveta nunca fica mais larga que a tela: coluna única que encolhe, campos e selects cabem nela */
.gaveta-corpo { grid-template-columns: minmax(0, 1fr); }
.gaveta-corpo > *, .gaveta-corpo form, .gaveta-corpo label { min-width: 0; }
.gaveta-corpo input, .gaveta-corpo select, .gaveta-corpo textarea { max-width: 100%; min-width: 0; }
.gaveta-corpo p, .gaveta-corpo b, .gaveta-corpo li { overflow-wrap: anywhere; }
.gaveta-corpo p { color: var(--texto-2); }
@media (prefers-reduced-motion: no-preference) {
  dialog.gaveta[open] { animation: gaveta-entra .22s cubic-bezier(.2, .7, .2, 1); }
  dialog.gaveta[open]::backdrop { animation: gaveta-veu .22s ease-out; }
}
@keyframes gaveta-entra { from { transform: translateX(28px); opacity: 0; } }
@keyframes gaveta-veu { from { opacity: 0; } }
@media (max-width: 699px) { dialog.gaveta { inset: 0; width: 100vw; } }


/* ---------- 18 · TABELA --------------------------------------
   Vira cartão abaixo de 700 px. Cada <td> leva data-r com o nome da coluna. */
.tabela { border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); overflow-x: auto; }
.tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-apoio); }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th { font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); line-height: 1.3; }
.tabela td { color: var(--texto-2); }
.tabela td b { color: var(--texto); }
.tabela .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela tfoot td { border-top: 2px solid var(--texto); border-bottom: 0; color: var(--texto); font-weight: 700; }
@media (max-width: 699px) {
  .tabela { border: 0; background: none; overflow: visible; }
  .tabela table, .tabela tbody, .tabela tfoot, .tabela tr, .tabela td { display: block; width: auto; }
  .tabela thead { display: none; }
  .tabela tr { margin-bottom: 10px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-2); }
  .tabela td, .tabela tfoot td { padding: 4px 0; border: 0; }
  .tabela td.n { text-align: left; }
  .tabela td[data-r]::before { content: attr(data-r) ": "; font-size: var(--t-rotulo); font-weight: 600; color: var(--texto-3); }
}


/* ---------- 19 · RODAPÉ, SEMENTE E ÍCONE ---------------------- */
.rodape { padding: var(--e-6) var(--pad-x) calc(var(--e-6) + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; font-size: var(--t-apoio); color: var(--texto-2); }
.rodape-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.rodape a { color: var(--texto); }
.rodape-legal { max-width: none; padding-top: 14px; border-top: 1px solid var(--linha); font-size: var(--t-rotulo); color: var(--texto-3); }

/* logotipo: Semente + "creptus" em Space Grotesk 600, minúsculo.
   Semente: 48 pontos de 40 px para cima, 21 pontos de 20 a 40 px, 13 pontos abaixo de 20 px.
   O ponto novo é sempre Broto. */
.logo { display: inline-flex; align-items: center; gap: .32em; color: var(--texto); text-decoration: none;
  font-family: var(--letra-logo); font-weight: 600; font-size: 1.28rem; letter-spacing: -.025em; line-height: 1; }
.logo .semente { width: 1.4em; height: 1.4em; }
.semente { flex: none; }
.semente circle { fill: currentColor; }
.semente circle.novo { fill: var(--c-broto); }

/* ícone: os 27 de traço com ponto. Sempre com a palavra do lado.
   <svg class="icone" aria-hidden="true"><use href="#cr-ico-check"/></svg>
   Traço 1,75 de 20 px para cima; em 16 px, --traco: 2. */
.icone { width: 1.15em; height: 1.15em; flex: none; --traco: 1.75; vertical-align: -.2em; }
.com-icone { display: inline-flex; align-items: center; gap: 7px; }


/* ---------- 21 · v7: LINK, CRÍTICO E NEUTRO -------------------
   Link e prazo em Teal. Crítico é o cartão invertido (Tinta com letra Amber),
   nunca vermelho. Neutro (Sage) é o que está na fila sem ação de ninguém. */
.link, a.link { color: var(--texto-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prazo { color: var(--texto-teal); font-weight: 700; }
.critico { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--raio-3); background: var(--critico); color: var(--sobre-critico); }
.critico b { font-weight: 800; }
.critico p { margin: 0; color: var(--sobre-critico); }
.neutro-suave { background: var(--neutro-suave); }


/* ---------- 20 · IMPRESSÃO E PDF -----------------------------
   O PDF sai da própria página: chevrons e gavetas abertos no lugar,
   índice e botões escondidos, o azul ganha listra. */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  :root { --indice-w: 0px; --tom-constroi: repeating-linear-gradient(135deg, var(--caminho) 0 4px, var(--caminho-listra) 4px 6px); }
  .espacos, .legenda { --tom-constroi: repeating-linear-gradient(135deg, var(--caminho) 0 4px, var(--caminho-listra) 4px 6px); }
  .indice, .acoes, .botao, .gaveta-fechar, .linha .girar, button.linha { display: none !important; }
  .conteudo { margin: 0; padding: 0; }
  .faixa { padding: 18mm 0; border: 0; break-inside: auto; }
  .faixa-tela { min-height: 0; }
  dialog.gaveta { display: block; position: static; width: auto; height: auto; box-shadow: none; overflow: visible; }
  .gaveta-cab { position: static; padding-inline: 0; }
  .gaveta-corpo { padding-inline: 0; }
  .linha > div { padding-right: 0; }
  .cartao, .etiqueta, .tabela tr, .par, .etapa { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}