/* Fragmentos de interface — [data-ui]
   Esta folha é a especificação visual dos três aplicativos.
   Regras seguidas (estudo de 23 telas reais de produto):
     · cor só no dado, nunca na moldura — por volta de 3% dos pixels
     · número é tipo, não cartela com ícone
     · superfície plana: separa por 1px ou por um degrau de tom, nunca por sombra
     · sem título de impacto: nada passa de 32px, nenhuma cifra chega a 48px
     · algarismos tabulares em tudo que é número */

[data-ui] {
  /* Neutros FRIOS, do mesmo matiz do papel da marca (#e8eae7). Até 11/11/2026
     eram bege (#faf9f7, #f4f2ee, #e4e0d9): chão quente sob uma marca de chão
     frio, que é justamente o par que a identidade recusou. O contorno de campo
     subiu de 1,63:1 para 3,41:1 contra o branco. Medidas em IDENTIDADE §4. */
  --ui-ground: #f3f5f3;
  --ui-surface: #ffffff;
  --ui-raised: #eaedea;
  --ui-border: #d9ded9;
  --ui-rule: #e6e9e6;
  --ui-control: #858d86;
  --ui-text: #131613;
  --ui-muted: #565c57;
  /* O acento e PARTIDO, e isso e deliberado (IDENTIDADE secao 4): num programa
     que mostra erro em vermelho, pintar a acao de vermelho faz ler "perigo"
     onde esta escrito "gerar". Entao ACAO e tinta e LEITURA e o vermelho, que
     so aparece no traco da regua e no numero que o programa calculou.
     Esta folha tinha um --ui-accent vermelho so, e por isso o anel de foco,
     a borda do documento, o nome do negocio e a barra cheia estavam todos em
     vermelho: quatro coisas que a identidade proibe. */
  --ui-acao: #131613;
  --ui-acao-hover: #000000;
  --ui-acao-ink: #ffffff;
  --ui-leitura: #e02718;
  --ui-positive: #247b50;
  --ui-warning: #8a6100;
  /* escureceu de #c4242a para nao ser confundido com a leitura */
  --ui-negative: #a3121a;

  --ui-radius: 12px;
  --ui-radius-ctl: 8px;

  font-family: Archivo, system-ui, "Segoe UI", sans-serif;
  font-stretch: 100%;
  /* O fragmento zera a tipografia herdada: ele mora dentro de títulos enormes
     e precisa manter o tamanho real de interface. */
  font-size: 14px;
  font-weight: 400;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border); /* taste-skill-ignore: moldura de interface */
  border-radius: var(--ui-radius);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}

[data-ui] * { box-sizing: border-box; }

[data-ui] .num { font-variant-numeric: tabular-nums; }

/* rótulo acima do valor, cinza, caixa de frase — nunca versalete espaçado */
[data-ui] .rotulo {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ui-muted);
  font-weight: 400;
}

[data-ui] .valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ui-text);
}

/* A REGRA DO VERMELHO NA PAGINA, para nao desencontrar de novo:
   por tela, no maximo UM numero em leitura - o que aquela secao existe para
   entregar. O heroi entrega o custo-hora; a conta ao vivo entrega o mesmo
   custo-hora, agora com os numeros de quem le. Tudo o mais dentro do
   fragmento e tinta, como no programa de verdade.
   Grade de programas e passo a passo NAO tem numero em leitura: ali os
   fragmentos sao paralelos, e tres vermelhos lado a lado nao destacam nada.
   Isto estava num style="color:var(--ui-accent)" solto no HTML - o unico
   estilo de cor embutido da pagina, e apontando para um token que nem
   existia mais. */
[data-ui] .valor.medido { color: var(--ui-leitura); }

/* ---------------------------------------------- fragmento grande do herói */

.frag-heroi { display: flex; flex-direction: column; width: 100%; height: 100%; }
.frag-heroi .barra {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: var(--ui-raised);
  border-bottom: 1px solid var(--ui-border); /* taste-skill-ignore: moldura de interface */
  font-size: 12px;
  color: var(--ui-muted);
  flex: 0 0 auto;
}
.frag-heroi .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-acao); flex: 0 0 auto; }
.frag-heroi .corpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px 12px;
  min-height: 0;
}
/* O unico vermelho do fragmento: o numero que o programa calculou. */
.frag-heroi .valor {
  display: block;
  font-size: clamp(26px, 2.1vw, 34px);
  line-height: 1.05;
  color: var(--ui-leitura);
}
.frag-heroi .unidade { font-size: 14px; color: var(--ui-muted); font-weight: 400; margin-left: 5px; }
.frag-heroi .conta {
  display: block;
  font-size: 12.5px;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- lacunas do parágrafo (chips) */

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 9px;
  font-size: 13px;
  line-height: 1.2;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-ctl);
}
.chip .marca-cor { width: 3px; align-self: stretch; border-radius: 2px; background: var(--ui-acao); }
.chip .texto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .meta { color: var(--ui-muted); font-weight: 400; }

/* ------------------------------------------------- painel de um dos apps */

.frag-painel { width: 100%; }
.frag-painel .cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border); /* taste-skill-ignore: moldura de interface */
  background: var(--ui-raised);
}
.frag-painel .cabeca .titulo { font-size: 13px; font-weight: 600; }
.frag-painel .cabeca .escopo { font-size: 12px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.frag-painel .corpo { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* tira de números dividida por 1px — não cartelas separadas */
.tira { display: flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-ctl); overflow: hidden; } /* taste-skill-ignore: moldura de interface */
.tira > div { flex: 1; padding: 10px 12px; }
.tira > div + div { border-left: 1px solid var(--ui-border); } /* taste-skill-ignore: divisor de interface */
.tira .valor { font-size: 22px; display: block; margin-top: 2px; }

/* linhas de tabela: régua e alinhamento, sem zebra nem faixa de cabeçalho */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-weight: 400; font-size: 12px; color: var(--ui-muted);
  padding: 0 0 7px; border-bottom: 1px solid var(--ui-border); /* taste-skill-ignore: regua de tabela */
}
.tabela th.n, .tabela td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td { padding: 8px 0; border-bottom: 1px solid var(--ui-rule); } /* taste-skill-ignore: regua de tabela */
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.total { font-weight: 600; border-top: 1px solid var(--ui-border); border-bottom: 0; padding-top: 10px; } /* taste-skill-ignore: linha de total */

/* selo de estado: tinta escura sobre tinta pálida da mesma matiz */
.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}
.selo.bateu { background: #dcf0e5; color: #0d3a24; }
.selo.quase { background: #fbf0d8; color: #6b4b00; }
.selo.abaixo { background: #f7e3e1; color: #7d1d1a; }

/* barra de progresso contra a meta — a única cor do painel */
.medida { display: flex; flex-direction: column; gap: 5px; }
.medida .linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.medida .linha .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.medida .trilha { height: 6px; background: var(--ui-raised); border-radius: 3px; overflow: hidden; }
.medida .cheio { height: 100%; background: var(--ui-acao); }
.medida.ok .cheio { background: var(--ui-positive); }
.medida.atencao .cheio { background: var(--ui-warning); }
.medida.ruim .cheio { background: var(--ui-negative); }

/* ------------------------------------------- a regua graduada do programa
   O mesmo desenho da peca (marketing/pecas.html) e do PDF (pdf.py): e assim
   que os tres programas mostram ONDE um numero caiu numa escala.
   Entrou no lugar de uma barra de progresso em 100%, que nao media nada:
   100% de que? A regua declara os dois extremos, e por isso e medida.
   Tudo em em, para acompanhar o font-size do fragmento. */
.regua-ui { position: relative; padding-top: 2.2em; }
.regua-ui .tracos {
  height: 1.3em;
  background: repeating-linear-gradient(90deg,
              var(--ui-text) 0 .09em, transparent .09em 1.1em);
  border-bottom: .16em solid var(--ui-text);
}
.regua-ui .leitura {
  position: absolute; top: 1.85em; height: 1.85em; width: .18em;
  background: var(--ui-leitura); transform: translateX(-50%);
}
.regua-ui .valor-leitura {
  position: absolute; top: .1em; transform: translateX(-50%);
  white-space: nowrap; text-align: center; color: var(--ui-text);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.regua-ui .extremos {
  display: flex; justify-content: space-between; margin-top: .45em;
  color: var(--ui-muted); font-size: .85em; font-variant-numeric: tabular-nums;
}

/* folha de PDF reduzida */
.frag-papel { width: 100%; background: var(--ui-surface); padding: 14px 16px; }
.frag-papel .topo-papel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ui-acao); padding-bottom: 8px; } /* taste-skill-ignore: cabecalho do documento */
/* No programa de verdade este nome sai na COR DO CLIENTE, nunca na nossa:
   o papel leva a marca de quem orca. Aqui, tinta. */
.frag-papel .negocio { font-size: 14px; font-weight: 600; color: var(--ui-acao); }
.frag-papel .doc { font-size: 11.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.frag-papel .tabela { margin-top: 10px; }
.frag-papel .fecha { margin-top: 10px; display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
.frag-papel .fecha .rot { font-size: 12px; color: var(--ui-muted); }
.frag-papel .fecha .tot { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-text); }

/* campo e botão, para os estágios */
.campo-ui {
  display: flex; flex-direction: column; gap: 4px;
}
.campo-ui label { font-size: 12px; color: var(--ui-muted); }
.campo-ui .caixa {
  border: 1px solid var(--ui-control); /* taste-skill-ignore: borda de campo */
  border-radius: var(--ui-radius-ctl);
  padding: 7px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--ui-surface);
}
/* Foco e ACAO, nao leitura: borda vermelha nos programas significa ERRO. */
.campo-ui .caixa.foco { border-color: var(--ui-acao); box-shadow: 0 0 0 2px rgba(19,22,19,.18); } /* taste-skill-ignore: anel de foco */

.botao-ui {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--ui-radius-ctl);
  background: var(--ui-acao);
  color: var(--ui-acao-ink);
  font-size: 13px;
  font-weight: 600;
}

/* linhas de menu lateral — a navegação recua, o ativo é um degrau neutro */
.menu-ui { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.menu-ui span { padding: 6px 9px; border-radius: var(--ui-radius-ctl); color: var(--ui-muted); }
.menu-ui span.ativo { background: var(--ui-raised); color: var(--ui-text); font-weight: 600; }

/* estado vazio honesto */
.vazio-ui { font-size: 12.5px; color: var(--ui-muted); padding: 10px 0; }
.traco { color: var(--ui-muted); }