/* ============================================================
   CENOGRAPH — Sistema de Gestão
   Visual conforme o handoff "Cenograph — novo visual do app".
   Sem sombras: a elevação vem de bordas hairline.
   ============================================================ */

:root {
  /* cores do design system */
  --cg-yellow: #ffcb05;
  --cg-yellow-600: #e6b400;
  --cg-black: #0a0203;
  --cg-ink-900: #0a0203;
  --cg-ink-800: #1a1516;
  --cg-ink-700: #2c2627;
  --cg-ink-600: #4a4344;
  --cg-ink-500: #6d6567;
  --cg-ink-400: #948d8e;
  --cg-ink-300: #bdb7b8;
  --cg-ink-200: #ded9da;
  --cg-ink-100: #efecec;
  --cg-ink-050: #f7f5f5;
  --branco: #ffffff;

  /* apelidos mantidos para o que ainda referencia os nomes antigos */
  --amarelo: var(--cg-yellow);
  --amarelo-escuro: var(--cg-yellow-600);
  --preto: var(--cg-ink-900);
  --cinza-1: var(--cg-ink-050);
  --cinza-2: var(--cg-ink-200);
  --cinza-3: var(--cg-ink-400);
  --verde: #1E8E3E;
  --vermelho: #C5221F;
  --cg-vermelho: #C5221F;
  --azul: #1a1516;

  --transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Gotham, "Gotham Book", system-ui, -apple-system, sans-serif;
  background: var(--branco);
  color: var(--cg-ink-900);
  font-size: 12.5px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--cg-yellow); outline-offset: 2px; }

/* ---------------------------------------------- layout + sidebar */
body.app { display: flex; min-height: 100vh; }

.lateral {
  width: 212px; flex: 0 0 212px; background: var(--cg-ink-900);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 20px 0;
}
.marca-lateral { display: block; padding: 0 18px 26px; }
.marca-lateral img { width: 166px; max-width: 100%; display: block; }

/* recolhida: só os ícones, para as colunas ganharem espaço */
.lateral.recolhida { width: 64px; flex: 0 0 64px; }
.marca-recolhida {
  display: flex; align-items: center; justify-content: center; height: 44px;
  margin: 0 12px 18px; border-radius: 10px; background: var(--cg-ink-800); color: var(--cg-yellow);
}
.marca-recolhida svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.marca-recolhida:hover { background: var(--cg-yellow); color: var(--cg-ink-900); }

/* O menu rola, mas sem barra à vista: numa lateral escura e estreita ela vira
   um risco claro no meio do desenho, e o menu não tem tanto conteúdo que a
   pessoa precise da barra para se localizar. A rolagem continua inteira —
   roda do mouse, trackpad, teclado. */
.menu {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding-top: 18px;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Edge antigo */
}
.menu::-webkit-scrollbar { width: 0; height: 0; }   /* Safari e Chrome */
.menu-secao {
  display: block; font-size: 9px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cg-ink-500); padding: 0 18px; margin-bottom: 8px;
  white-space: nowrap;
}
.menu-secao + .menu-secao, .menu a + .menu-secao { margin-top: 22px; }
.menu a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 18px;
  border-left: 3px solid transparent; color: var(--cg-ink-400); text-decoration: none;
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}
.menu a svg {
  width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.menu a .rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu a:hover { color: var(--branco); }
.menu a.ativo {
  border-left-color: var(--cg-yellow); background: var(--cg-ink-800);
  color: var(--cg-yellow); font-weight: 700;
}
.menu a .conta { font-size: 10.5px; font-weight: 600; color: var(--cg-ink-500); }
.menu a.ativo .conta { color: var(--cg-yellow); }

/* estado recolhido */
.lateral.recolhida .menu { padding-top: 6px; }
.lateral.recolhida .menu-secao { height: 1px; margin: 16px 14px 10px; padding: 0;
  overflow: hidden; text-indent: -999px; background: rgba(255,255,255,.10); }
.lateral.recolhida .menu a { justify-content: center; padding: 0; gap: 0;
  border-left: none; border-right: 3px solid transparent; }
.lateral.recolhida .menu a .rotulo { display: none; }
.lateral.recolhida .menu a .conta {
  position: absolute; margin-left: 22px; margin-top: -16px; background: var(--cg-yellow);
  color: var(--cg-ink-900); border-radius: 999px; min-width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800;
}
.lateral.recolhida .menu a { position: relative; }
.lateral.recolhida .menu a.ativo { border-right-color: var(--cg-yellow); }

.usuario-lateral {
  display: flex; align-items: center; gap: 10px; padding: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.lateral.recolhida .usuario-lateral { padding: 14px 0; justify-content: center; }
.lateral.recolhida .usuario-lateral .quem,
.lateral.recolhida .usuario-lateral form { display: none; }
.usuario-lateral .avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--cg-yellow);
  color: var(--cg-ink-900); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 32px;
}
.usuario-lateral .quem { flex: 1; min-width: 0; }
.usuario-lateral .quem b {
  color: var(--branco); font-size: 12.5px; font-weight: 700; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-lateral .quem small {
  color: var(--cg-ink-500); font-size: 10px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.usuario-lateral button {
  background: none; border: none; color: var(--cg-ink-500); cursor: pointer;
  font-size: 15px; padding: 4px; transition: color var(--transicao);
}
.usuario-lateral button:hover { color: var(--cg-yellow); }

.conteudo { flex: 1; min-width: 0; padding: 36px 40px 80px; }

@media (max-width: 860px) {
  body.app { flex-direction: column; }
  .lateral { width: 100%; flex: none; height: auto; position: static; }
  .menu { display: flex; flex-wrap: wrap; padding-top: 0; }
  .menu-secao { display: none; }
  .menu a { height: 34px; border-left: none; border-bottom: 3px solid transparent; }
  .menu a.ativo { border-left: none; border-bottom-color: var(--cg-yellow); }
  .conteudo { padding: 22px 18px 60px; }
}

/* ---------------------------------------------- cabeçalho de tela */
.eyebrow {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--cg-ink-400); margin-bottom: 8px;
}
h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 10px; }
/* título de registro (PIT, Projeto): o nome do item é longo, não é manchete */
.titulo-registro { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.descricao { font-size: 12.5px; font-weight: 400; color: var(--cg-ink-500); margin-top: 8px; }
.descricao b { font-weight: 700; color: var(--cg-ink-900); }
.descricao a { color: var(--cg-ink-900); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--cg-ink-300); }
.descricao a:hover { border-bottom-color: var(--cg-ink-900); }

.barra-acoes {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 26px; flex-wrap: wrap;
}

/* Pedido aberto por quem não é do atendimento: dá para ler, não para mexer.
   A força do seletor precisa passar de `.campo input` mais abaixo, que tem a
   mesma especificidade e vem depois — sem isso o campo ficava travado mas
   continuava branco, com cara de editável. Foi o que fez uma proposta
   finalizada parecer alterável (04/09). */
.so-leitura input, .so-leitura select, .so-leitura textarea,
.so-leitura .campo input, .so-leitura .campo select, .so-leitura .campo textarea,
/* Em proposta finalizada os botões da árvore (mover, duplicar, remover) ficam
   desabilitados pelo editor.js; sem isto continuavam com cara de clicáveis. */
#itens-container button:disabled { opacity: 0.3; cursor: not-allowed; }

/* Requisição: a linha que o estoque não cobre sai inteira em vermelho — não só
   a célula do saldo. Quem separa o material precisa ver de longe o que não vai
   sair hoje. Pedido dele em 04/09. */
table.lista tr.linha-sem-estoque > td,
table.lista tr.linha-sem-estoque > td a { color: var(--cg-vermelho); }
table.lista tr.linha-sem-estoque > td small { color: var(--cg-vermelho); opacity: 0.8; }
table.lista tr.linha-sem-estoque > td:first-child {
  box-shadow: inset 3px 0 0 var(--cg-vermelho);
}

.campo input.travado, input.travado, .linha-desconto input.travado {
  pointer-events: none; background: var(--cg-ink-050); color: var(--cg-ink-500);
  border-color: var(--cg-ink-200); cursor: not-allowed;
}

/* Confirmação da restauração: caixa no lugar de diálogo, que alguns
   navegadores embutidos suprimem — e aí o envio morria calado */
.confirma-restauracao {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--cg-ink-500);
}
.confirma-restauracao input { width: auto; margin: 0; }

/* Proposta que veio do Monday: sem itens, com o valor fechado */
.aviso-migrado {
  background: var(--cg-ink-050); border-left: 3px solid var(--amarelo);
  padding: 11px 14px; margin-bottom: 16px;
  font-size: 12px; line-height: 1.55; color: var(--cg-ink-500);
}

/* O texto que será transcrito na nota fiscal: monoespaçado, para conferir
   número de pedido de compra caractere a caractere */
.campo-fiscal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6;
  border-left: 3px solid var(--amarelo);
}

/* Exclusão de pedido: separada do resto do cartão, para não se clicar sem ver */
.zona-risco { border-top: 3px solid var(--vermelho, #c0392b); }
.zona-risco h2 { color: var(--vermelho, #c0392b); }
.o-que-vai { margin: 0 0 12px; padding-left: 18px; }
.o-que-vai li { margin-bottom: 3px; }

/* Abertura de pedido interrompida pela metade */
.aviso-rascunho {
  background: var(--cg-ink-050); border-left: 3px dashed var(--cg-ink-300);
  padding: 11px 14px; margin-bottom: 16px;
  font-size: 12px; line-height: 1.55; color: var(--cg-ink-500);
}
.botoes-abertura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* No painel, o Pendente que ainda não tem tudo: o seletor não o leva a lugar
   nenhum, e este é o caminho que leva — a tela de abertura, onde as datas cabem */
.concluir-abertura {
  display: block; margin-top: 3px; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--cg-ink-500); text-decoration: none;
}
.concluir-abertura:hover { color: var(--azul); text-decoration: underline; }

/* Ação miúda dentro de uma linha de lista — "separar" do pedido no centro */
.btn-linha {
  background: none; border: none; padding: 0 0 0 8px; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: var(--cg-ink-500);
  font-family: inherit; letter-spacing: .02em;
}
.btn-linha:hover { color: var(--vermelho, #c0392b); text-decoration: underline; }

/* As outras versões da mesma proposta, dentro do editor */
.outras-versoes { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.outras-versoes span {
  font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cg-ink-400); margin-right: 2px;
}
.outras-versoes a, .outras-versoes b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-decoration: none;
}
.outras-versoes a { background: var(--cg-ink-100); color: var(--cg-ink-500); }
.outras-versoes a:hover { background: var(--cg-ink-200); color: var(--cg-ink-900); }
.outras-versoes b { background: var(--amarelo); color: var(--cg-ink-900); }

/* Marca discreta de que existem versões anteriores desta proposta */
.versoes-antes {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 999px;
  background: var(--cg-ink-100); color: var(--cg-ink-500);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0; vertical-align: 1px;
}

/* Filtros da lista — discretos, para não competir com o conteúdo da tabela */
.filtros {
  display: flex; align-items: center; gap: 16px; margin: -14px 0 20px;
  /* seis controles numa linha só espremiam a busca até o rótulo encostar no
     do vizinho. Quebrando a linha, cada campo mantém a largura que precisa. */
  flex-wrap: wrap; row-gap: 12px;
}
.filtros label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cg-ink-400);
  /* rótulo de duas palavras quebrando em duas ou três linhas desalinhava a
     barra inteira; agora quem quebra é a linha de filtros, não a palavra */
  white-space: nowrap;
}
.filtros select {
  border: 0; border-bottom: 1px solid var(--cg-ink-200); background: none;
  padding: 2px 0; min-width: 96px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--cg-ink-900);
}
.filtros select:hover { border-bottom-color: var(--cg-ink-900); }
.filtros .limpar { font-size: 11.5px; color: var(--cg-ink-400); }
/* a busca ocupa o espaço que sobra, mas cede antes de empurrar a barra */
.filtros .busca { flex: 1 1 220px; min-width: 0; }
.filtros .busca input {
  flex: 1; min-width: 0;
  border: 0; border-bottom: 1px solid var(--cg-ink-200); background: none;
  padding: 3px 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--cg-ink-900);
}
.filtros .busca input::placeholder { font-weight: 400; color: var(--cg-ink-300); }
.filtros .busca input:focus { outline: none; border-bottom-color: var(--cg-ink-900); }
/* Campo digitável na barra de filtros: a mesma cara do select ao lado.
   O padrão de campo do sistema é caixa de 38px com borda fina e canto reto —
   é o que `.sel-simples` e `.campo input` usam. Text e date vinham crus do
   navegador, com borda própria e o calendário preto; Contas a Pagar é a única
   tela que tem os dois na barra, e por isso era a única fora do padrão. */
.filtros input[type="text"],
.filtros input[type="date"],
.filtros input[type="number"] {
  border: 1px solid var(--cg-ink-200); border-radius: 0; background: var(--branco);
  color: var(--cg-ink-900); font-family: inherit;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 8px 11px; min-height: 38px; min-width: 96px;
}
.filtros input[type="text"]:hover, .filtros input[type="date"]:hover,
.filtros input[type="number"]:hover { border-color: var(--cg-ink-300); }
.filtros input[type="text"]:focus, .filtros input[type="date"]:focus,
.filtros input[type="number"]:focus { border-color: var(--cg-ink-900); outline: none; }
.filtros input[type="text"]:focus-visible, .filtros input[type="date"]:focus-visible,
.filtros input[type="number"]:focus-visible {
  outline: 2px solid var(--cg-yellow); outline-offset: 2px;
}
.filtros input::placeholder { font-weight: 400; color: var(--cg-ink-300); }
.filtros input[type="date"] { width: 150px; min-width: 0; }
/* data ainda em branco: o dd/mm/aaaa do navegador vem em preto cheio e pesa
   mais que o valor de verdade dos campos ao lado */
.filtros input[type="date"][value=""] { color: var(--cg-ink-300); font-weight: 400; }
.filtros input[type="date"][value=""]:focus { color: var(--cg-ink-900); }
/* o calendário nativo é escuro demais para o peso do resto da barra */
.filtros input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .4; cursor: pointer;
}
.filtros input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.sem-resultado {
  margin: -6px 0 20px; padding: 14px 16px;
  background: var(--cg-ink-050); font-size: 12.5px; color: var(--cg-ink-500);
}

/* Escala de texto do sistema. Antes cada tela escolhia 12px, 13px ou 14px
   solto no style=, e o conjunto ficava desalinhado. */
.texto      { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--cg-ink-900); }
.texto-sec  { font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--cg-ink-400); }
.texto b, .texto-sec b { font-weight: 700; color: var(--cg-ink-900); }
.mb-4  { margin-bottom: 4px; }  .mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mt-8  { margin-top: 8px; }

/* ---------------------------------------------- botões (pill) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 22px; border-radius: 999px;
  border: 2px solid var(--cg-ink-200); background: transparent; color: var(--cg-ink-500);
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn:hover { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
.btn:active { transform: translateY(1px); }

/* select em forma de pill (status do orçamento): sem o controle nativo,
   com o mesmo caret desenhado dos campos de formulário */
select.btn {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px; text-align: left;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.btn:focus { outline: none; border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
/* o anel amarelo continua para quem navega pelo teclado */
select.btn:focus-visible { outline: 2px solid var(--cg-yellow); outline-offset: 2px; }

.btn.btn-primario { background: var(--cg-yellow); border-color: var(--cg-yellow); color: var(--cg-ink-900); }
.btn.btn-primario:hover { background: var(--cg-yellow-600); border-color: var(--cg-yellow-600); }
.btn.btn-escuro { background: var(--cg-ink-700); border-color: var(--cg-ink-700); color: var(--branco); }
.btn.btn-escuro:hover { background: var(--cg-ink-900); border-color: var(--cg-ink-900); }
.btn.btn-contorno-amarelo { border-color: var(--cg-yellow); color: var(--cg-ink-900); }
.btn.btn-contorno-amarelo:hover { background: var(--cg-yellow); }
.btn.btn-escuro-contorno { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
.btn.btn-escuro-contorno:hover { background: var(--cg-ink-900); color: var(--branco); }
.btn.btn-perigo { color: var(--vermelho); }
.btn.btn-perigo:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn-mini { height: 28px; padding: 0 14px; font-size: 10px; }

/* ---------------------------------------------- status (formato único) */
.status-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 26px; min-width: 112px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--cg-ink-200); background: transparent; color: var(--cg-ink-500);
  font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; white-space: nowrap;
}
select.status-pill {
  cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center;
  width: 146px; max-width: 146px; text-overflow: ellipsis;
}
select.status-pill option {
  background: var(--branco); color: var(--cg-ink-900); font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--cg-ink-300); }

.st-queued    { border-color: var(--cg-ink-200); color: var(--cg-ink-500); }
.st-queued::before   { background: var(--cg-ink-300); }
.st-active    { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
.st-active::before   { background: var(--cg-ink-900); }
.st-attention { border-color: var(--cg-yellow); background: var(--cg-yellow); color: var(--cg-ink-900); }
.st-attention::before { display: none; }
.st-done      { border-color: var(--cg-ink-900); background: var(--cg-ink-900); color: var(--branco); }
.st-done::before      { display: none; }
.st-muted     { border-color: var(--cg-ink-100); color: var(--cg-ink-400); }
.st-muted::before     { display: none; }
/* rascunho: tracejado, porque ainda não é um pedido de verdade */
.st-rascunho  { border-color: var(--cg-ink-300); border-style: dashed; color: var(--cg-ink-400); }
.st-rascunho::before  { display: none; }

/* arquivado: o status vira leitura. Quem tira do arquivo e o Comercial,
   entao o seletor da equipe fica travado em vez de sumir — sumindo,
   ninguem entenderia por que a coluna esta vazia. */
select.status-pill:disabled, select.btn:disabled {
  cursor: default; opacity: .8; background-image: none; padding-right: 14px;
}

/* espelhos (S_PROJ / S_ORC) usam o mesmo formato, um pouco menor */
.pill-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; min-width: 96px; padding: 0 11px; border-radius: 999px;
  border: 1.5px solid var(--cg-ink-200); color: var(--cg-ink-500);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.pill-mini::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--cg-ink-300); }
.pill-mini.st-attention, .pill-mini.st-done, .pill-mini.st-muted { }
.pill-mini.st-attention::before, .pill-mini.st-done::before, .pill-mini.st-muted::before { display: none; }
/* histórico da descrição do pedido: entrada nova sempre no topo */
.rotulo-historico {
  display: flex; align-items: baseline; gap: 8px; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cg-ink-400);
  margin-bottom: 8px;
}
.rotulo-historico em { font-style: normal; font-weight: 500; letter-spacing: 0.06em;
                       color: var(--cg-ink-300); }
/* janela de leitura: role para ver todos os registros, do mais novo ao mais antigo */
.historico {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--cg-ink-200); background: var(--cg-ink-050);
  padding: 12px 14px;
}
.historico:focus { outline: none; border-color: var(--cg-ink-900); }
.historico .nota + .nota { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cg-ink-100); }
.historico .carimbo {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cg-ink-500); margin-bottom: 4px;
}
.historico .nota:first-child .carimbo { color: var(--cg-ink-900); }
.historico .nota:first-child { position: relative; }
.historico .nota:first-child::before {
  content: ""; position: absolute; left: -14px; top: 3px;
  width: 3px; height: 14px; background: var(--cg-yellow);
}
.historico p { font-size: 12.5px; line-height: 1.55; white-space: pre-line; color: var(--cg-ink-700); }

.aviso-restauracao {
  font-size: 12.5px; font-weight: 700; color: var(--cg-ink-900);
  border-left: 3px solid var(--cg-yellow); padding: 8px 12px;
  background: var(--cg-ink-050); margin-bottom: 12px;
}

/* entregas na ficha do pedido, separadas por área */
.bloco-entrega + .bloco-entrega { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cg-ink-100); }
.rotulo-entrega {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cg-ink-500); margin-bottom: 8px;
}
.sem-entrega { font-size: 11.5px; color: var(--cg-ink-400); }

/* entrega pronta: o chip vira link para abrir o arquivo e mandar ao cliente */
a.pill-mini.entrega { text-decoration: none; cursor: pointer; }
a.pill-mini.entrega::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 8px; background: currentColor;
  clip-path: polygon(0 45%, 45% 45%, 45% 0, 100% 50%, 45% 100%, 45% 55%, 0 55%);
}
a.pill-mini.entrega:hover { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
a.pill-mini.entrega.st-done:hover { background: var(--cg-ink-800); color: var(--branco); }

/* ---------------------------------------------- sede e responsável (círculos) */
.selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--cg-ink-900);
  color: var(--cg-ink-900); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
}
.selo-prio { width: auto; padding: 0 9px; border-color: var(--cg-ink-200); color: var(--cg-ink-500); }
.ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; background: var(--cg-ink-900);
  color: var(--cg-yellow); font-size: 9.5px; font-weight: 800; cursor: default;
}
/* sem dono ainda: círculo aberto, que se lê como uma vaga a preencher */
.ini.vazia { background: transparent; border: 1.5px dashed var(--cg-ink-300); }

/* Direcionar na própria lista, como se faz com a bolinha de prioridade: o
   gatilho da caixa de seleção é o próprio círculo do responsável. */
.resp-campo { display: inline-flex; }
.resp-campo .sel { width: auto; }
.resp-campo .sel-gatilho, .resp-campo .sel-gatilho.sel-simples {
  border: 0; background: none; padding: 0; min-width: 0; height: auto;
}
.resp-campo .sel-gatilho:hover .sel-marcador.resp {
  border-color: var(--cg-ink-900); border-style: solid;
}
.sel-marcador.resp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid transparent; background: var(--cg-ink-900);
  color: var(--cg-yellow); font-size: 9.5px; font-weight: 800; letter-spacing: 0;
}
/* ".r" sozinho é o valor vazio; ".r7", ".r8"… são as pessoas */
.sel-marcador.resp.r { background: transparent; border: 1.5px dashed var(--cg-ink-300); }

/* ---------------------------------------------- grupos */
.grupo { margin-bottom: 0; }
.grupo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px;
  padding: 10px 0; margin-top: 18px; border-bottom: 2px solid var(--cg-ink-900);
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::before { content: "▾"; font-size: 10px; color: var(--cg-ink-400); }
.grupo:not([open]) > summary::before { content: "▸"; }
.grupo .nome-grupo {
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--cg-ink-900);
}
.grupo .contagem {
  margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cg-ink-400);
}
/* grupo vazio: uma linha só, sem tabela */
.grupo.vazio > summary { border-bottom: 1px solid var(--cg-ink-100); margin-top: 0; }
.grupo.vazio .nome-grupo { color: var(--cg-ink-400); }
.grupo.vazio .contagem { color: var(--cg-ink-300); letter-spacing: 0; text-transform: none; font-weight: 600; }

/* ---------------------------------------------- tabelas */
.rolagem { overflow-x: auto; }
/* as listas têm muitas colunas: rolam em vez de espremer os chips */
.rolagem table.lista { min-width: 1040px; table-layout: fixed; }
.rolagem.larga table.lista { min-width: 1040px; }
/* Tabela que vive numa coluna, e não na página inteira: o piso de 1040px foi
   feito para as filas de painel, e dentro dos dois terços da ficha ele criava
   uma rolagem lateral escondendo as colunas da direita. Aqui a tabela se ajusta
   à caixa e o texto quebra. */
.rolagem.estreita table.lista { min-width: 0; }
/* Caixa de painel: a lista cresce para baixo, nunca para o lado. Rolagem
   lateral em caixa estreita esconde justamente a coluna do valor, que é a que
   se quer ver; e o cabeçalho fica colado no topo para a rolagem não deixar o
   leitor sem saber que número está olhando. */
.rolagem.coluna { overflow-x: hidden; overflow-y: auto; max-height: 264px; }
.rolagem.coluna table.lista { min-width: 0; }
.rolagem.coluna table.lista thead th {
  position: sticky; top: 0; z-index: 1; background: var(--branco);
}
.rolagem.coluna table.lista tfoot td {
  position: sticky; bottom: 0; background: var(--cg-yellow);
}
/* colunas com largura fixa, iguais às do protótipo */
table.lista th.c-resp, table.lista td:nth-child(var(--i)) { }
.c-resp { width: 60px; } .c-sede { width: 56px; } .c-status { width: 170px; }
.c-espelho { width: 162px; } .c-arq { width: 118px; } .c-data { width: 112px; }
.c-evento { width: 118px; } .c-prio { width: 44px; } .c-anexos { width: 44px; }
.c-pit { width: 92px; } .c-orc { width: 116px; } .c-cliente { width: 180px; }
.c-valor { width: 148px; } .c-acao { width: 66px; } .c-etapas { width: 52px; }
/* clipe de anexo na lista: a coluna existe para ser varrida com o olho, então
   o que não tem papel fica em branco mesmo — vazio também é informação. */
table.lista td.c-anexos { text-align: center; padding-right: 0; }
table.lista td.c-anexos a { color: var(--cg-ink-400); text-decoration: none; font-size: 13px; }
table.lista td.c-anexos a:hover { color: var(--cg-ink-900); }
table.lista td.c-anexos a small {
  font-size: 9.5px; font-weight: 700; vertical-align: super; margin-left: 1px;
}
table.lista th.c-anexos { text-align: center; padding-right: 0; font-size: 11px; }
/* contagem ao lado de um valor: estreita, para o número não roubar a coluna */
.c-num { width: 58px; color: var(--cg-ink-400); font-variant-numeric: tabular-nums; }
/* selo de etapa cumprida: só aparece depois de feita (F faturamento, C contrato) */
.etapa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 999px; background: var(--cg-yellow);
  color: var(--cg-ink-900); font-size: 8.5px; font-weight: 800; letter-spacing: 0;
  vertical-align: middle;
}
.etapa + .etapa { margin-left: 3px; }
/* botão que ainda não vale: fica no lugar, apagado */
.btn.btn-travado {
  border-color: var(--cg-ink-100); color: var(--cg-ink-300);
  cursor: not-allowed; background: transparent;
}

/* trilha das etapas do fechamento, na ficha do pedido */
.trilha-etapas { display: flex; flex-direction: column; gap: 8px; }
.etapa-linha { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cg-ink-400); }
.etapa-linha .marca {
  width: 10px; height: 10px; border-radius: 999px; flex: 0 0 10px;
  border: 1.5px solid var(--cg-ink-200); background: transparent;
}
.etapa-linha.feita { color: var(--cg-ink-900); font-weight: 700; }
.etapa-linha.feita .marca { background: var(--cg-yellow); border-color: var(--cg-yellow-600); }
/* campo de dinheiro: símbolo fixo à esquerda, número alinhado à direita */
.campo-moeda { position: relative; }
.campo-moeda .simbolo {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 700; color: var(--cg-ink-400); pointer-events: none;
}
.campo-moeda input.valor {
  padding-left: 34px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.conferencia { font-size: 11.5px; margin-top: 8px; }
.conferencia.ok { color: var(--cg-ink-500); }
.conferencia.erro { color: var(--cg-vermelho); font-weight: 700; }
/* tabela de preços */
.c-cod { width: 250px; } .c-preco { width: 96px; } .c-acoes-tab { width: 196px; }
table.lista tr.inativo td { opacity: 0.45; }
.cod-grupo {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cg-ink-500); border: 1px solid var(--cg-ink-200);
  border-radius: 999px; padding: 3px 9px;
}
/* alternador de região (BR | PT) */
.alternador { display: inline-flex; border: 1.5px solid var(--cg-ink-900); border-radius: 999px; overflow: hidden; }
.alternador a {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 36px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cg-ink-900); text-decoration: none; background: transparent;
}
.alternador a + a { border-left: 1.5px solid var(--cg-ink-900); }
.alternador a small { font-size: 10px; font-weight: 600; letter-spacing: 0; color: var(--cg-ink-400); }
.alternador a:hover { background: var(--cg-ink-100); }
.alternador a.ativo { background: var(--cg-yellow); }
.alternador a.ativo small { color: var(--cg-ink-700); }
table.lista { width: 100%; border-collapse: collapse; background: transparent; }
table.lista th {
  background: transparent; color: var(--cg-ink-400); text-align: left;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 10px 10px 0; white-space: nowrap; border: none;
}
table.lista td {
  padding: 13px 10px 13px 0; border-top: 1px solid var(--cg-ink-100);
  font-size: 12px; font-weight: 400; color: var(--cg-ink-500); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* nome do item: 12.5px/600 em preto, com respiro à direita */
table.lista td.nome-item { font-size: 12.5px; font-weight: 600; color: var(--cg-ink-900); padding-right: 20px; }
/* linha mais baixa: para tabela curta dentro de cartão da coluna lateral, onde
   o respiro de 13px do padrão empilha a listagem sem precisar — Requisições e
   Compras da ficha da OP, 03/09. table-layout volta a auto: o fixed vem de
   `.rolagem table.lista` para as filas largas de painel, e numa tabela
   estreita ele obedecia cegamente a largura pedida em cada th e deixava a
   pastilha (112px de mínimo) estourar a coluna vizinha por cima. */
table.lista.compacta { table-layout: auto; }
table.lista.compacta td { padding-top: 7px; padding-bottom: 7px; }
table.lista.compacta th { padding-top: 6px; padding-bottom: 6px; }
/* Texto que precisa quebrar em vez de esticar a tabela. A regra da casa é
   `nowrap` com reticências, que serve para nome de material numa tabela larga;
   numa coluna estreita — o check-list dentro dos dois terços da ficha — ela
   empurrava a tabela para 1040px dentro de uma caixa de 697 e escondia as
   colunas da direita atrás de uma rolagem que ninguém procura. */
table.lista td.envolve, table.lista td.envolve small { white-space: normal; }
table.lista td.envolve small { display: block; margin-top: 2px; }
table.lista tbody tr:last-child td { border-bottom: 1px solid var(--cg-ink-100); }
/* linha de quem saiu do elenco: continua legível, mas apagada — ela é história,
   não fila de trabalho */
table.lista tr.apagado td { color: var(--cg-ink-300); }
table.lista tr.apagado td.nome-item { color: var(--cg-ink-400); font-weight: 500; }
table.lista tbody tr:hover td { background: var(--cg-ink-050); }
table.lista td.nome-item a { color: var(--cg-ink-900); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; }
/* Link secundário dentro da célula do nome — "ver a OP" e afins. Sem isto ele
   herdava `display:block` e ocupava a largura inteira logo abaixo do nome:
   metade da área clicável da linha levava para outro lugar, e quem clicava no
   pedido caía na OP achando que a tela não abria. */
table.lista td.nome-item a.link-secundario {
  display: inline-block; width: auto; max-width: 100%; font-size: 11px;
  color: var(--cg-ink-400); margin-top: 2px;
}
table.lista td.nome-item a.link-secundario:hover { color: var(--cg-ink-900); text-decoration: underline; }
table.lista td.nome-item a:hover { text-decoration: underline; }
table.lista th.num, table.lista td.num { text-align: right; padding-right: 18px; font-variant-numeric: tabular-nums; }
/* só a última coluna encosta na borda */
table.lista tr > th:last-child, table.lista tr > td:last-child { padding-right: 0; }
table.lista td.num { color: var(--cg-ink-900); }
table.lista td.num b { font-weight: 700; }
table.lista td.mono, .mono { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--cg-ink-900); }
.mono a { text-decoration: none; font-weight: 700; }
.mono a:hover { text-decoration: underline; }
/* campo que o sistema preenche: continua legível, mas não convida a digitar */
.campo input.calculado {
  background: var(--cg-ink-050); color: var(--cg-ink-900); font-weight: 700;
  border-style: dashed;
}

/* bloco recolhido: o que só interessa quando algo deu errado fica fora do
   caminho, porque esta tela é compartilhada e vira print */
/* Cartão que se dobra. O resumo veste a tipografia do <h2> que ele substitui,
   para a tela não parecer ter dois tipos de título; a contagem à direita diz se
   vale abrir sem precisar abrir. */
details.cartao.dobra { padding: 0; }
details.cartao.dobra > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 18px 22px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}
details.cartao.dobra > summary::-webkit-details-marker { display: none; }
details.cartao.dobra > summary::before { content: "▸"; font-size: 11px; color: var(--cg-ink-400); }
details.cartao.dobra[open] > summary::before { content: "▾"; }
details.cartao.dobra > summary:hover { background: var(--cg-ink-050); }
details.cartao.dobra > summary .contagem {
  margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cg-ink-400);
}
/* o conteúdo recupera o respiro que o cartão perdeu para o resumo */
details.cartao.dobra > *:not(summary) { margin-left: 22px; margin-right: 22px; }
details.cartao.dobra > *:last-child { margin-bottom: 22px; }

details.tecnico { margin-top: 16px; border-top: 1px solid var(--cg-ink-100); padding-top: 12px; }
details.tecnico > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cg-ink-400);
}
details.tecnico > summary::-webkit-details-marker { display: none; }
details.tecnico > summary::before { content: "▸"; font-size: 11px; letter-spacing: 0; }
details.tecnico[open] > summary::before { content: "▾"; }
details.tecnico > summary:hover { color: var(--cg-ink-900); }
details.tecnico[open] > summary { margin-bottom: 8px; }

.acoes-conector { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

/* nome e e-mail na tabela de usuários: leem como texto e só viram campo quando
   o cursor chega, para a tabela não virar um formulário */
.edita-linha {
  width: 100%; border: 1px solid transparent; border-radius: 0;
  padding: 6px 8px; background: transparent; color: var(--cg-ink-900);
  font-family: inherit; font-size: 12px; font-weight: 400;
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none;
}
/* as colunas de permissão são estreitas: o título quebra em vez de invadir a
   vizinha, e o espaçamento entre letras cede um pouco */
table.tab-usuarios th {
  white-space: normal; line-height: 1.25; letter-spacing: 0.06em;
  vertical-align: bottom; padding-right: 8px;
}

/* o "(você)" divide a célula com o campo em vez de ser empurrado para fora */
table.lista td.cel-nome { display: flex; align-items: center; gap: 6px; }
table.lista td.cel-nome .edita-linha { flex: 1; min-width: 0; }
table.lista td.cel-nome small { color: var(--cg-ink-400); white-space: nowrap; }

.edita-linha:hover { border-color: var(--cg-ink-200); background: var(--branco); }
.edita-linha:focus {
  outline: none; border-color: var(--cg-ink-900); background: var(--branco);
  text-overflow: clip;
}

td .vazio, .vazio { color: var(--cg-ink-300); }
.valor-zero { color: var(--cg-ink-300) !important; font-weight: 400 !important; }

/* ---------------------------------------------- arquivos */
.chip-arq, .chip-num {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  text-decoration: none; color: var(--cg-ink-900); font-size: 12px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-arq i, .chip-num i {
  font-style: normal; border: 1.5px solid var(--cg-ink-900); border-radius: 3px;
  padding: 2px 4px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; flex: 0 0 auto;
}
.chip-arq:hover, .chip-num:hover { text-decoration: underline; }
.btn-pit {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px;
  border-radius: 999px; border: 1.5px solid var(--cg-ink-900); background: transparent;
  color: var(--cg-ink-900); font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.btn-pit:hover { background: var(--cg-ink-900); color: var(--branco); }
.btn-pit b { font-weight: 800; }

.arquivos { display: flex; flex-direction: column; }
.arquivo {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--cg-ink-100);
}
.arquivo:first-child { border-top: none; }
.arquivo .ext {
  border: 1.5px solid var(--cg-ink-900); border-radius: 3px; padding: 3px 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; flex: 0 0 auto;
}
.arquivo .nome {
  flex: 1; min-width: 0; color: var(--cg-ink-900); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.arquivo .nome small { display: block; color: var(--cg-ink-400); font-weight: 400; font-size: 10px; }
.arquivo .nome:hover { text-decoration: underline; }
.arquivo button {
  background: none; border: none; color: var(--cg-ink-300); cursor: pointer;
  font-size: 13px; padding: 4px 6px; transition: color var(--transicao);
}
.arquivo button:hover { color: var(--vermelho); }

/* ---------------------------------------------- dashboard */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--cg-ink-900); border-bottom: 1px solid var(--cg-ink-100);
  margin-bottom: 26px;
}
/* Três contas, e não quatro: o dashboard do painel de Produção tem "a produzir",
   "em andamento" e "concluídos" — com a grade de quatro, sobrava uma coluna
   vazia e o terceiro número descia sozinho para a linha de baixo. */
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.kpi { padding: 22px 26px 22px 0; }
.kpi + .kpi { border-left: 1px solid var(--cg-ink-100); padding-left: 26px; }
.kpi .rotulo {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--cg-ink-500); margin-bottom: 12px;
}
.kpi b {
  display: flex; align-items: center; gap: 12px;
  font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--cg-ink-900);
  line-height: 1; margin-bottom: 12px;
}
/* o valor tem de caber em uma linha até 00.000.000,00; o tamanho acompanha
   a largura da coluna para não quebrar em telas menores */
.kpi.moeda b {
  display: block; white-space: nowrap;
  font-size: clamp(18px, 1.9vw, 27px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.kpi small { display: block; font-size: 11.5px; font-weight: 400; color: var(--cg-ink-400); }
/* o traço deixou de disputar a linha com o número */
.kpi .traco { display: block; width: 28px; height: 4px; background: var(--cg-yellow);
              flex: 0 0 28px; margin-bottom: 10px; }

.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.atalho {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--cg-ink-200); text-decoration: none; color: var(--cg-ink-900);
  transition: border-color var(--transicao);
}
.atalho:hover { border-color: var(--cg-ink-900); }
.atalho .txt { flex: 1; min-width: 0; }
.atalho .txt b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.atalho .txt small { color: var(--cg-ink-400); font-size: 11px; font-weight: 400; }
.atalho .seta { color: var(--cg-ink-400); font-size: 15px; }

.painel-duplo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
/* Item de grid não encolhe abaixo do próprio conteúdo por padrão: com nome de
   pedido comprido, as duas colunas somavam mais que a largura da página e o
   Dashboard estourava para a direita. */
.painel-duplo > * { min-width: 0; }
.painel-duplo table.lista { table-layout: fixed; width: 100%; }
.painel-duplo table.lista td.nome-item { max-width: 0; }
.painel-duplo table.lista td.nome-item a,
.painel-duplo table.lista td.nome-item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bloco-titulo {
  display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px;
  border-bottom: 2px solid var(--cg-ink-900); margin-bottom: 0;
}
.bloco-titulo h2 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
}
.bloco-titulo .contagem {
  margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cg-ink-400);
}
.aviso-vazio { font-size: 12.5px; font-weight: 400; color: var(--cg-ink-500); padding: 16px 0; }

@media (max-width: 1080px) {
  .kpis, .atalhos { grid-template-columns: repeat(2, 1fr); }
  .kpis-3 { grid-template-columns: repeat(3, 1fr); }   /* três cabem sempre */
  .kpi:nth-child(3) { border-left: none; }
  .kpis-3 .kpi:nth-child(3) { border-left: 1px solid var(--cg-ink-100); }
  .painel-duplo { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------------------------------------------- cronograma */
.legenda { display: flex; gap: 18px; align-items: center; }
.legenda span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cg-ink-500);
}
.legenda i { display: inline-block; width: 18px; height: 8px; border-radius: 999px; }
.legenda i.hachura { background: repeating-linear-gradient(135deg, var(--cg-ink-200) 0 4px, var(--cg-ink-050) 4px 8px); }
.legenda i.evento { background: var(--cg-yellow); }

.gantt-wrap { overflow-x: auto; }
table.gantt { border-collapse: collapse; width: 100%; }
table.gantt th.col-nome, table.gantt td.col-nome {
  width: 420px; min-width: 300px; text-align: left; padding: 0 18px 0 0;
  position: sticky; left: 0; background: var(--branco); z-index: 2;
}
table.gantt th.col-nome {
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--cg-ink-900); padding-bottom: 10px; border-bottom: 2px solid var(--cg-ink-900);
}
table.gantt th.mes {
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--cg-ink-900); text-align: left; padding: 0 0 10px;
  border-bottom: 2px solid var(--cg-ink-900);
}
table.gantt th.dia {
  font-size: 10px; font-weight: 600; color: var(--cg-ink-400); text-align: center;
  padding: 8px 0; min-width: 34px; border-bottom: 1px solid var(--cg-ink-100);
}
table.gantt td.col-nome { padding: 18px 18px 18px 0; vertical-align: middle; }
table.gantt td.col-nome a {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--cg-ink-900);
  text-decoration: none; margin-bottom: 8px;
}
table.gantt td.col-nome a:hover { text-decoration: underline; }
table.gantt td.col-nome small { display: flex; gap: 8px; align-items: center; }
table.gantt tbody tr { border-bottom: 1px solid var(--cg-ink-100); }
table.gantt td.faixa { padding: 14px 0; vertical-align: middle; }

.trilho { display: grid; grid-auto-rows: 22px; row-gap: 4px; position: relative; }
.trilho .fundo-grade {
  position: absolute; inset: 0; grid-row: 1 / -1; grid-column: 1 / -1;
  background-image: linear-gradient(to right, var(--cg-ink-050) 1px, transparent 1px);
  background-size: var(--passo-dia) 100%;
}
.trilho .barra {
  height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  overflow: hidden; white-space: nowrap; padding: 0 10px; position: relative; z-index: 1;
}
.trilho .barra.montagem, .trilho .barra.desmontagem {
  background: repeating-linear-gradient(135deg, var(--cg-ink-200) 0 4px, var(--cg-ink-050) 4px 8px);
  color: var(--cg-ink-600);
}
.trilho .barra.evento { background: var(--cg-yellow); color: var(--cg-ink-900); }
.trilho .marca-hoje {
  grid-row: 1 / -1; border-left: 2px solid var(--cg-ink-900); opacity: .35; z-index: 0;
}

/* ---------------------------------------------- formulários e cartões */
.cartao { border: 1px solid var(--cg-ink-200); padding: 22px; margin-bottom: 18px; background: var(--branco); }
.grade { display: grid; gap: 14px; }
/* Coluna de grid não encolhe abaixo do conteúdo por padrão. Com dois campos de
   data lado a lado, o par exigia 304px e a terceira coluna vazava para fora do
   cartão. */
.grade > * { min-width: 0; }
.campo input[type="date"] { min-width: 0; padding-left: 8px; padding-right: 4px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
/* Dois terços à esquerda, um terço à direita — a proporção que ele desenhou
   na nota de 31/08 para a ficha do pedido. */
.grade-detalhe { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.grade-detalhe > * { min-width: 0; }   /* mesmo motivo do painel-duplo */
@media (max-width: 1180px) { .g5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .grade-detalhe, .g3, .g4, .g5 { grid-template-columns: 1fr; } }

.campo label {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cg-ink-400); margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid var(--cg-ink-200); border-radius: 0;
  padding: 9px 11px; font-size: 12.5px; font-family: inherit; font-weight: 500;
  background: var(--branco); color: var(--cg-ink-900);
  -webkit-appearance: none; appearance: none;
}
/* todos os controles com a mesma altura */
.campo input, .campo select { min-height: 38px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--cg-ink-900);
}
/* o select nativo do macOS destoa do resto: caret desenhado por nós */
.campo select, select.campo-solto {
  padding-right: 30px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cg-ink-900) 50%),
    linear-gradient(135deg, var(--cg-ink-900) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.campo select:focus { background-color: var(--branco); }
/* number sem as setinhas e date sem o relevo nativo */
.campo input[type="number"]::-webkit-outer-spin-button,
.campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input[type="number"] { -moz-appearance: textfield; }

.campo input[type="file"] { padding: 6px; font-size: 12px; color: var(--cg-ink-500); }
.campo input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 14px; border: 1.5px solid var(--cg-ink-900);
  border-radius: 999px; background: var(--branco); color: var(--cg-ink-900);
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
}
.campo input[type="file"]::file-selector-button:hover { background: var(--cg-yellow); }
.campo textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.campo.destaque label { color: var(--cg-ink-900); }
.campo input.travado { background: var(--cg-ink-050); color: var(--cg-ink-400); cursor: not-allowed; }
/* fator de cálculo mexido só neste orçamento: quem abrir a proposta meses
   depois precisa ver na hora que a margem não é a da praça */
.marca-fora {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--cg-yellow); color: var(--cg-ink-900);
  font-size: 9px; font-weight: 800; letter-spacing: 0.10em;
}
.campo.alterado input { border-color: var(--cg-ink-900); background: #fffbe6; }
.campo.alterado label em {
  font-style: normal; font-weight: 800; color: var(--cg-ink-900);
}
/* ---------------------------------------------- caixa de seleção da casa
   O menu nativo do macOS não aceita CSS (vem cinza escuro, fonte do sistema,
   realce azul). O <select> real fica escondido e o menu é desenhado aqui. */
.sel { position: relative; display: inline-block; width: 100%; }
/* Numa fila de botões o seletor não é o dono da linha: sem isto ele esticava
   até a borda da célula e empurrava o ✕ para debaixo dele. */
.linha-botoes > .sel { width: auto; flex: 0 0 auto; }
.linha-botoes > .sel .status-pill { min-width: 128px; }
.sel > select, table.tab-linhas .sel > select {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0; padding: 0; border: 0; min-height: 0;
}
/* O gatilho é um <button>, então as regras escritas para `select` não o
   alcançam. Quem já tem classe própria (.btn, .status-pill, .pill-mini)
   continua mandando no visual; só quem não tem recebe a cara de campo. */
.sel-gatilho { cursor: pointer; font-family: inherit; }
.sel-gatilho .sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-gatilho .sel-caret {
  flex: 0 0 8px; width: 8px; height: 5px; background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* o caret desenhado por background das regras de campo/pill não vale aqui */
.sel-gatilho { background-image: none; }

/* --- seleção comum (cara de campo) */
.sel-simples {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--cg-ink-200); border-radius: 0; background: var(--branco);
  color: var(--cg-ink-900); font-size: 12.5px; font-weight: 500;
  padding: 8px 11px; min-height: 38px;
}
.sel-simples .sel-texto { flex: 1; }
.sel-simples:hover { border-color: var(--cg-ink-300); }
.sel.aberto > .sel-simples, .sel-simples:focus { border-color: var(--cg-ink-900); outline: none; }
.sel-simples:focus-visible { outline: 2px solid var(--cg-yellow); outline-offset: 2px; }

/* --- pill de ação (status do orçamento, no alto do editor) */
.sel-gatilho.btn { padding-right: 18px; }
.sel-gatilho.btn .sel-texto { flex: 1; }

/* --- chip de status nas listas: largura fixa, centralizado e sem seta,
       exatamente como era no <select> que ele substituiu */
.sel-gatilho.status-pill { width: 146px; max-width: 146px; }
.sel-gatilho.status-pill .sel-caret, .sel-gatilho.pill-mini .sel-caret { display: none; }
.sel.aberto > .sel-gatilho.status-pill { box-shadow: 0 0 0 2px var(--cg-yellow); }

.sel-menu {
  display: none; position: fixed; z-index: 200; max-height: 320px; overflow-y: auto;
  background: var(--branco); border: 1.5px solid var(--cg-ink-900);
  padding: 4px; text-transform: none; letter-spacing: 0;
}
/* com busca o menu vira coluna: o campo fica parado no alto e só a lista rola.
   Sem isso, procurar numa lista de 600 nomes empurraria o campo para fora. */
.sel .sel-menu.com-busca { display: flex; flex-direction: column; overflow: hidden; }
.sel-menu .sel-lista { overflow-y: auto; min-height: 0; }
.sel-busca-caixa { flex: 0 0 auto; padding: 2px 2px 6px; }
.sel-busca {
  width: 100%; height: 32px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--cg-ink-200); border-radius: 0; background: var(--branco);
  color: var(--cg-ink-900); font-family: inherit; font-size: 12.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  -webkit-appearance: none; appearance: none;
}
.sel-busca:focus { outline: none; border-color: var(--cg-ink-900); }
.sel-busca::-webkit-search-cancel-button { -webkit-appearance: none; }
.sel-sem-resultado {
  flex: 0 0 auto; padding: 8px 12px; font-size: 11.5px; font-style: italic;
  color: var(--cg-ink-400); text-transform: none; letter-spacing: 0;
}
/* fica montado (invisível) para dar para medir a altura antes de abrir */
.sel .sel-menu { visibility: hidden; display: block; pointer-events: none;
                 top: -9999px; left: -9999px; }
.sel.aberto .sel-menu { visibility: visible; pointer-events: auto; }
.sel-opcao {
  padding: 8px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--cg-ink-700); white-space: nowrap; cursor: pointer;
  border-left: 3px solid transparent;
}
/* o rótulo do <optgroup>, desenhado à mão pelo select.js: não se escolhe */
.sel-grupo {
  padding: 8px 12px 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cg-ink-400); pointer-events: none;
}
.sel-opcao:hover { background: var(--cg-ink-050); color: var(--cg-ink-900); }
.sel-opcao.marcada {
  background: var(--cg-ink-050); border-left-color: var(--cg-yellow);
  color: var(--cg-ink-900); font-weight: 700;
}
.sel-menu.caixa-alta .sel-opcao {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
}

/* campo de busca solto nas barras de ação */
.campo-busca {
  width: 220px; height: 38px; padding: 0 14px; border: 1px solid var(--cg-ink-200);
  border-radius: 0; background: var(--branco); color: var(--cg-ink-900);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  -webkit-appearance: none; appearance: none;
}
.campo-busca:focus { outline: none; border-color: var(--cg-ink-900); }

/* data de entrega vencida aparece em vermelho em qualquer lugar */
/* precisa vencer `table.lista td`, que é mais específico que uma classe só */
.atrasado, table.lista td.atrasado, table.lista td.atrasado b,
.campo input.atrasado { color: var(--cg-vermelho); font-weight: 700; }
.campo input.atrasado { border-color: var(--cg-vermelho); }

/* ---------------------------------------------- editor de orçamento */
/* número à esquerda, ações no meio, valor total à direita — os botões
   quebram dentro do próprio bloco em vez de empurrar o total para baixo */
.editor-topo { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 18px; flex-wrap: nowrap; margin-bottom: 22px; }
.numero-orc { flex: 0 0 auto; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.editor-acoes { flex: 1 1 auto; display: flex; gap: 8px; align-items: center;
                flex-wrap: wrap; justify-content: center; }
/* o select de status abria na largura da maior opção e empurrava os botões */
.editor-acoes #campo-status { width: 156px; min-width: 156px; }
@media (max-width: 1180px) {
  .editor-topo { flex-wrap: wrap; }
  .editor-acoes { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
.numero-orc small { display: block; font-size: 11.5px; font-weight: 400; color: var(--cg-ink-400); letter-spacing: 0; margin-top: 4px; }
.total-orc { flex: 0 0 auto; margin-left: auto; font-size: 30px; font-weight: 800;
             letter-spacing: -0.02em; text-align: right; }
.total-orc small {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--cg-ink-500); margin-bottom: 4px;
}
/* desconto negociado, logo abaixo do valor total */
.linha-desconto {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px;
}
.linha-desconto label {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cg-ink-500);
}
.linha-desconto .moeda { font-size: 12px; font-weight: 700; color: var(--cg-ink-500); }
.linha-desconto input {
  width: 118px; text-align: right; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 6px 10px;
  border: 1px solid var(--cg-ink-200); border-radius: 0; background: #fff;
  font-family: inherit; color: var(--cg-ink-900);
  -webkit-appearance: none; appearance: none;
}
.linha-desconto input::-webkit-outer-spin-button,
.linha-desconto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.linha-desconto input:focus { outline: none; border-color: var(--cg-ink-900); }
.linha-final { margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.linha-final small {
  display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--cg-ink-900); margin-bottom: 2px;
}
.salvo-indicador { font-size: 11px; color: var(--cg-ink-400); }
details.painel-fatores > summary {
  cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cg-ink-900); list-style: none;
}
details.painel-fatores > summary::-webkit-details-marker { display: none; }
details.painel-fatores > summary::before { content: "▸ "; color: var(--cg-ink-400); }
details.painel-fatores[open] > summary::before { content: "▾ "; }

.area-secao { margin-bottom: 30px; }
.area-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--cg-ink-900); padding-bottom: 8px; margin-bottom: 14px;
}
.area-cab h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; }
.area-total { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
/* OPCIONAIS: entra na proposta depois do fechamento e não soma ao total */
.area-fora .area-cab { border-bottom-style: solid; }
.area-fora .area-cab h2, .area-fora .area-total { color: var(--cg-ink-500); }
.aviso-fora {
  margin-right: auto; margin-left: 12px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cg-ink-500); border: 1px solid var(--cg-ink-200);
  border-radius: 999px; padding: 3px 9px;
}

.item-bloco { border: 1px solid var(--cg-ink-200); margin-bottom: 14px; }
.item-cab { display: flex; align-items: center; gap: 10px; background: var(--cg-yellow); padding: 8px 12px; }
.item-cab input.nome-item {
  flex: 1; font-weight: 700; font-size: 13px; border: none; background: transparent;
  padding: 6px 8px; font-family: inherit; letter-spacing: 0.04em;
}
.item-cab input.nome-item:focus { background: var(--branco); outline: none; }
.item-cab .total-item { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }

table.tab-linhas { width: 100%; border-collapse: collapse; }
table.tab-linhas th {
  background: transparent; font-size: 9px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cg-ink-400); padding: 8px; text-align: left;
  border-bottom: 1px solid var(--cg-ink-200);
}
table.tab-linhas td { padding: 2px 4px; border-bottom: 1px solid var(--cg-ink-100); vertical-align: middle; }
table.tab-linhas input, table.tab-linhas select {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: 6px; font-size: 12px; font-family: inherit; font-weight: 500;
}
table.tab-linhas input:hover { border-color: var(--cg-ink-200); }
table.tab-linhas input:focus { border-color: var(--cg-ink-900); background: var(--branco); outline: none; }
table.tab-linhas input.num { text-align: right; min-width: 46px; }
table.tab-linhas input[type="number"]::-webkit-outer-spin-button,
table.tab-linhas input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.tab-linhas input[type="number"] { -moz-appearance: textfield; }
td.calc { text-align: right; font-variant-numeric: tabular-nums; color: var(--cg-ink-400); font-size: 12px; padding-right: 8px; white-space: nowrap; }
td.calc.forte { color: var(--cg-ink-900); font-weight: 700; }
/* Ações de uma LINHA de tabela: ficam escondidas até o mouse passar por cima,
   para a planilha não virar um paredão de botões. Só serve dentro de <tr> —
   fora dele o `opacity: 0` nunca acende, e foi assim que Salvar, Finalizar e o
   check-list inteiro passaram semanas invisíveis na tela. */
.linha-acoes { display: flex; gap: 2px; opacity: 0; }
tr:hover .linha-acoes { opacity: 1; }
tr:focus-within .linha-acoes { opacity: 1; }
/* Fila de botões comum, sempre visível. É esta que se usa fora de tabela. */
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* O centro de custo é o nível de cima do painel de Produção: os pedidos moram
   embaixo dele, e as etapas separam por dentro. */
.centro-bloco { margin: 0 0 22px; }
.centro-cab {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 8px 0 6px; border-bottom: 2px solid var(--cg-ink-900);
}
/* Um ponto a mais que o resto do bloco, a pedido de 31/08: o centro de custo é
   a raiz da tela, e no tamanho do texto dos pedidos ele se perdia entre eles. */
.centro-num {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; min-width: 42px;
}
.centro-nome { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.centro-nome a { color: inherit; text-decoration: none; }
.centro-nome a:hover { text-decoration: underline; }
.centro-conta {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cg-ink-400);
}
.centro-bloco > .grupo { margin-left: 0; }

/* As datas do evento em destaque, no alto da OP: é delas que sai a estimativa
   de mão de obra, e por isso elas não podem ficar perdidas numa grade. */
.faixa-datas { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--cg-ink-900); }
.faixa-datas .fd-item {
  flex: 1 1 150px; padding: 10px 14px; border-right: 1px solid var(--cg-ink-100);
  display: flex; flex-direction: column; gap: 3px;
}
.faixa-datas .fd-item:last-child { border-right: 0; }
.faixa-datas .fd-rot {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cg-ink-400);
}
.faixa-datas b { font-size: 14px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.faixa-datas .fd-vazio b { color: var(--cg-ink-300); font-weight: 500; }
.faixa-datas .fd-dias { background: var(--cg-yellow); }
.faixa-datas .fd-dias .fd-rot { color: var(--cg-ink-900); }
/* Dentro do bloco do centro de custo ela é informação de apoio, não o assunto
   da tela: fio fino e corpo menor, para não competir com o nome do evento. */
.centro-bloco > .faixa-datas { border-width: 1px; margin-top: 10px; }
.centro-bloco > .faixa-datas .fd-item { padding: 8px 12px; }
.centro-bloco > .faixa-datas b { font-size: 12.5px; }

/* A trilha: onde estou e como volto. Some na impressão. */
.trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.04em; color: var(--cg-ink-400);
  margin: 0 0 10px;
}
.trilha a { color: var(--cg-ink-400); text-decoration: none; }
.trilha a:hover { color: var(--cg-ink-900); text-decoration: underline; }
.trilha b { color: var(--cg-ink-900); font-weight: 700; }
.trilha .sep { color: var(--cg-ink-300); }

/* "não está na lista? cadastrar aqui" — o cadastro rápido que abre dentro do
   próprio campo, sem tirar ninguém da tela. */
.mais-um { margin-top: 6px; }
.mais-um > summary {
  cursor: pointer; font-size: 11px; list-style: none; padding: 2px 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.mais-um > summary::-webkit-details-marker { display: none; }
.mais-um > summary:hover { color: var(--cg-ink-900); }
.mais-um[open] {
  border: 1px solid var(--cg-ink-200); padding: 10px; margin-top: 8px;
}
.mais-um[open] > summary { margin-bottom: 8px; }
.btn-icone { border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 4px 6px; color: var(--cg-ink-400); }
.btn-icone:hover { color: var(--cg-ink-900); }
.rodape-item { padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; }
.rodape-item textarea {
  flex: 1; border: 1px solid var(--cg-ink-200); padding: 7px 9px; font-size: 12px;
  font-family: inherit; min-height: 34px;
}

.autocomplete-caixa {
  position: absolute; z-index: 100; background: var(--branco); border: 1px solid var(--cg-ink-900);
  max-height: 300px; overflow-y: auto; min-width: 420px;
}
.autocomplete-caixa .op { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.autocomplete-caixa .op:hover, .autocomplete-caixa .op.sel { background: var(--cg-ink-050); }
.autocomplete-caixa .op .preco { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.autocomplete-caixa .grupo-ac {
  padding: 8px 12px 3px; font-size: 9px; text-transform: uppercase; color: var(--cg-ink-400);
  font-weight: 700; letter-spacing: 0.14em;
}

/* ---------------------------------------------- % Bases */
.base-cab { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--cg-ink-900); padding-bottom: 8px; }
.pct { display: flex; align-items: center; gap: 6px; }
.pct input { text-align: right; font-variant-numeric: tabular-nums; }
.pct span { color: var(--cg-ink-400); font-weight: 600; }
.markup-linha { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cg-ink-100);
  font-size: 11.5px; color: var(--cg-ink-500); }
.markup-linha b { color: var(--cg-ink-900); }
.markup-linha .mk { font-weight: 800; color: var(--cg-ink-900); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- login */
.caixa-login { background: var(--branco); border: 1px solid var(--cg-ink-200); padding: 40px; width: 400px; }
.caixa-login .marca { display: block; width: 200px; max-width: 70%; margin: 0 auto 22px; }
.caixa-login p.sub {
  text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.20em;
  text-transform: uppercase; color: var(--cg-ink-400); margin-bottom: 28px;
}
.erro { border: 1.5px solid var(--vermelho); color: var(--vermelho); padding: 10px 12px;
  margin-bottom: 16px; font-size: 12px; }

/* prioridade: 1 bola preta · 2 amarela · 3 vazia */
.prio {
  display: inline-block; width: 12px; height: 12px; border-radius: 999px;
  border: 1.5px solid var(--cg-ink-900); vertical-align: middle;
}
.prio.p1 { background: var(--cg-ink-900); }
.prio.p2 { background: var(--cg-yellow); border-color: var(--cg-yellow-600); }
.prio.p3 { background: transparent; border-color: var(--cg-ink-300); }
/* a bola é o próprio gatilho do seletor de prioridade */
.prio-campo { display: inline-flex; }
.prio-campo .sel { width: auto; }
.prio-campo .sel-gatilho.sel-simples, .prio-campo .sel-gatilho {
  width: 26px; height: 26px; min-height: 0; padding: 0; gap: 0;
  border: 0; background: transparent; border-radius: 999px;
  justify-content: center; cursor: pointer;
}
.prio-campo .sel-gatilho:hover { background: var(--cg-ink-100); }


/* Registro de arquivo que veio do Monday sem o arquivo: o nome está ali para
   se saber o que existe, mas não há o que baixar. Sem link, e apagado, para
   ninguém clicar esperando o documento. */
.arquivo.so-nome { opacity: .72; }
.arquivo.so-nome .ext { border-style: dashed; }
.arquivo.so-nome .nome { cursor: default; }
.arquivo.so-nome .nome small { font-style: italic; }

/* ---------------------------------------------- manual do usuário
   Texto longo pede medida de leitura: a coluna para em ~880px, e cada
   passo ganha o número em bola, para se achar o ponto onde parou. */
.manual { max-width: 880px; }
.manual h3 {
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cg-ink-900); margin: 22px 0 10px;
}
.manual .cartao h2:first-of-type { margin-top: 0; }
.manual-secao { scroll-margin-top: 20px; }

/* sumário: os passos do manual, em pílulas, para pular direto */
.sumario-manual {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 0 18px; margin-bottom: 18px; border-bottom: 2px solid var(--cg-ink-900);
}
.sumario-manual .rot {
  font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cg-ink-400); margin-right: 4px;
}
.sumario-manual a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border: 1.5px solid var(--cg-ink-200); border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--cg-ink-500); text-decoration: none;
  transition: border-color var(--transicao), color var(--transicao);
}
.sumario-manual a:hover { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }

/* passo a passo numerado */
.passos { list-style: none; counter-reset: passo; margin: 0 0 4px; padding: 0; }
.passos > li {
  position: relative; padding-left: 34px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--cg-ink-900);
}
.passos > li::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 0; top: -1px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--cg-ink-900); color: var(--cg-yellow);
  font-size: 10px; font-weight: 800;
}
.passos ul, .lista-simples { margin: 6px 0 0; padding-left: 17px; }
.passos ul li, .lista-simples li {
  font-size: 11.5px; font-weight: 400; line-height: 1.55; color: var(--cg-ink-500);
  margin-bottom: 5px;
}
.passos ul li b, .lista-simples li b { font-weight: 700; color: var(--cg-ink-900); }
.lista-simples { margin: 0 0 4px; }
.lista-simples > li { font-size: 12.5px; font-weight: 500; color: var(--cg-ink-900); }

/* o caminho do pedido: uma etapa por linha, com a trilha ligando */
.fluxo { list-style: none; counter-reset: etapa; margin: 0; padding: 0; }
.fluxo > li {
  position: relative; padding: 0 0 16px 30px; margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--cg-ink-500);
  border-left: 1px solid var(--cg-ink-200);
}
.fluxo > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fluxo > li::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--branco); border: 2px solid var(--cg-ink-900);
}
.fluxo > li b { color: var(--cg-ink-900); }

/* recado dentro do manual; a variante de atenção usa a tarja vermelha */
.nota-manual {
  background: var(--cg-ink-050); border-left: 3px solid var(--cg-yellow);
  padding: 11px 14px; margin: 12px 0;
  font-size: 12px; line-height: 1.55; color: var(--cg-ink-500);
}
.nota-manual.atencao { border-left-color: var(--vermelho); }
.nota-manual b { color: var(--cg-ink-900); }
.nota-manual a { color: var(--cg-ink-900); font-weight: 700; }

/* perguntas frequentes */
.perguntas { margin: 0; }
.perguntas dt {
  font-size: 12.5px; font-weight: 700; color: var(--cg-ink-900);
  padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--cg-ink-100);
}
.perguntas dt:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.perguntas dd {
  margin: 5px 0 0; font-size: 12px; font-weight: 400; line-height: 1.55;
  color: var(--cg-ink-500);
}
.perguntas dd b { font-weight: 700; color: var(--cg-ink-900); }

/* tabela de referência do manual: sem a largura mínima das listas de dados */
table.lista.tabela-manual { min-width: 0; table-layout: auto; }
table.lista.tabela-manual td { vertical-align: middle; font-size: 12px; }

.formula {
  background: var(--cg-ink-050); border-left: 3px solid var(--cg-ink-900);
  padding: 12px 14px; margin: 12px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.9; color: var(--cg-ink-700);
}

.so-admin {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  border: 1.5px solid var(--cg-ink-200); vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cg-ink-400);
}
.assinatura-manual { padding: 6px 0 0; }

/* Capa do manual: existe só no papel (ver o bloco @media print abaixo) */
.capa-manual { display: none; }

/* impressão: sai o menu e a navegação, fica o manual em folha branca */
@media print {
  /* sem isto o navegador tira os fundos, e o número do passo, os chips de
     status e as tarjas de aviso saem em branco — que é onde mora a leitura */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lateral, .sumario-manual, .barra-acoes .alternador, .barra-acoes .btn { display: none; }
  /* atalho que só faz sentido na tela: em papel o endereço escrito basta */
  .so-tela { display: none; }
  body.app { display: block; }
  .conteudo { padding: 0; }
  .manual { max-width: none; }
  .manual .cartao { border: none; border-top: 1px solid var(--cg-ink-200);
                    padding: 16px 0; margin-bottom: 0; }
  /* a seção inteira não cabe numa folha, e segurá-la só deixava meia página em
     branco; o que não pode partir é o passo, a pergunta, a nota e a fórmula */
  .passos > li, .perguntas dt, .nota-manual, .formula { break-inside: avoid; }
  .manual h2 { break-after: avoid; }

  /* --- capa ---------------------------------------------------------
     Página própria, sem margem, para o preto sangrar até a borda: é o
     mesmo fundo da tela de login, que é onde a marca já aparece cheia. */
  @page capa { size: A4; margin: 0; }
  .capa-manual {
    display: flex; flex-direction: column;
    page: capa; break-after: page;
    width: 210mm; height: 297mm; padding: 24mm 22mm;
    background: var(--cg-ink-900); color: var(--branco);
  }
  .capa-marca { width: 52mm; display: block; }
  /* o título desce e encosta no rodapé: o vazio fica em cima, sob a marca,
     como na tela de login — flutuando no meio ele parecia solto */
  .capa-meio { margin-top: auto; margin-bottom: 16mm; }
  .capa-eyebrow {
    display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.30em;
    text-transform: uppercase; color: var(--cg-ink-500); margin-bottom: 10mm;
  }
  .capa-titulo {
    font-size: 62px; font-weight: 800; letter-spacing: -0.025em; line-height: 1;
    color: var(--branco); margin: 0;
  }
  .capa-para {
    margin: 8mm 0 0; padding-top: 6mm; border-top: 1px solid var(--cg-yellow);
    font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--cg-yellow);
  }
  .capa-resumo {
    margin: 4mm 0 0; max-width: 118mm;
    font-size: 12.5px; font-weight: 400; line-height: 1.6; color: var(--cg-ink-400);
  }
  .capa-rodape {
    display: flex; justify-content: space-between; gap: 8mm;
    padding-top: 5mm; border-top: 1px solid rgba(255,255,255,.16);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cg-ink-500);
  }
}

/* ajuste de custo da linha: 1 é o normal, e o que sair disso precisa saltar
   aos olhos de quem abrir a proposta depois */
.tab-linhas input.fator { text-align: right; }
.tab-linhas input.fator.fator-mexido {
  background: #fffbe6; border-color: var(--cg-ink-900); font-weight: 700;
}
.tab-linhas input.fator.travado {
  background: var(--cg-ink-050); color: var(--cg-ink-400); cursor: not-allowed;
}

/* Devolver um pedido aprovado para a mesa da equipe. Mesma bolinha da
   prioridade: vazia quando não há alteração em curso, amarela quando há —
   e o status ao lado já sai amarelo pela mesma razão.

   A célula é uma linha flex para o chip e a bolinha dividirem a largura sem
   uma empurrar a outra para fora: o chip cede espaço, a bolinha não. */
.espelho { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.espelho .pill-mini { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.espelho .acao-campo { flex: 0 0 auto; margin-left: auto; }
.acao-campo { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.acao-campo .sel { width: auto; }
.acao-campo .sel-gatilho {
  width: 22px; height: 22px; min-height: 0; padding: 0; gap: 0;
  border: 0; background: transparent; border-radius: 999px;
  justify-content: center; cursor: pointer;
}
.acao-campo .sel-gatilho:hover { background: var(--cg-ink-100); }
.sel-marcador.acao {
  display: inline-block; width: 12px; height: 12px; border-radius: 999px;
  border: 1.5px solid var(--cg-ink-300); background: transparent;
}
.sel-marcador.acao.aAlterando, .sel-marcador.acao.aDetalhando {
  background: var(--cg-yellow); border-color: var(--cg-yellow-600);
}

/* ---------------------------------------------- nomes já cadastrados
   Aviso na abertura do PIT quando o nome digitado já existe, ou existe
   parecido. Cada nome é um botão: clicar usa o cadastro em vez de criar
   mais um. É aviso, não trava — dois eventos podem ter nomes vizinhos. */
.parecidos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; padding: 8px 10px;
  background: var(--cg-ink-050); border-left: 3px solid var(--cg-yellow);
}
.parecidos-rot {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cg-ink-500); width: 100%;
}
.parecido {
  padding: 5px 10px; border: 1px solid var(--cg-ink-200); background: var(--branco);
  color: var(--cg-ink-700); font-family: inherit; font-size: 11.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.parecido:hover { border-color: var(--cg-ink-900); color: var(--cg-ink-900); }
/* o que é o mesmo nome, e não só parecido, vem marcado */
.parecido.igual {
  border-color: var(--cg-ink-900); background: var(--cg-ink-900); color: var(--branco);
}
.parecido.igual:hover { background: var(--cg-ink-700); color: var(--branco); }
/* par que difere só no ano: fica na lista, mas sem puxar o olho */
table.lista tr.outro-ano td { opacity: .55; }
table.lista tr.outro-ano:hover td { opacity: 1; }

/* orçamento fechado: a tela inteira vira leitura, e o recado explica por quê */
.aviso-fechado {
  margin: 0 0 16px; padding: 12px 16px; font-size: 12.5px; line-height: 1.5;
  color: var(--cg-ink-900); background: var(--cg-ink-050);
  border-left: 3px solid var(--cg-ink-900);
}

/* ---------------------------------------------------------------- Financeiro
   O DRE e o orçamento do ano são tabelas com dois níveis: o bloco (RECEITAS,
   DESPESAS COM VENDAS) e as linhas dentro dele. Sem essa distinção visual a
   tabela vira uma parede de números. */
table.lista tr.fin-bloco > td { background: var(--cg-ink-050); font-weight: 700; }
table.lista tr.fin-total > td {
  background: var(--cg-yellow); font-weight: 800; border-top: 1px solid var(--cg-ink-200);
}
table.lista td.fin-linha { padding-left: 26px; }
table.lista td.c-pct {
  text-align: right; white-space: nowrap; color: var(--cg-ink-400);
  font-variant-numeric: tabular-nums;
}
table.lista td.c-valor input.campo-moeda { width: 84px; text-align: right; }
/* conta escolhida na tela de bancos: o extrato e a edição abaixo são dela */
table.lista tr.sel > td { background: var(--cg-ink-050); }
/* o movimento do extrato virando lançamento na própria linha: dois selects e
   um botão têm de caber sem estourar a coluna */
.linha-lancar { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.linha-lancar select { max-width: 190px; font-size: 11px; height: 28px; }