/* ==========================================================================
   Backoffice — o que existe só aqui.
   Componentes de base (bloco, campo, tabela, botão, chips) vêm do admin.css,
   que é o mesmo dos outros dois sistemas. Aqui ficam quadro de produção,
   etiquetas de situação, totais e agenda.
   ========================================================================== */

/* --- Números do painel: cada um é um link para a fila que ele conta ------- */
.bo-numeros { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.bo-numero {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); text-decoration: none; transition: border-color .15s;
}
.bo-numero:hover { border-color: var(--accent); }
.bo-numero__n { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.bo-numero__r { font-size: var(--text-sm); color: var(--text-soft); }
.bo-numero__d { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Listas curtas dentro de um bloco ------------------------------------ */
.bo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.bo-lista li { font-size: var(--text-sm); }
.bo-lista__det { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }

/* --- Etiqueta de situação -------------------------------------------------
   A cor diz o que está parado esperando alguém: âmbar é a sua vez, verde é
   fechado, vermelho é perdido, cinza é histórico. */
.bo-etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--bg);
  /* 11px, não 10: é texto que se lê (a situação, o tipo do contato), e 10px
     em caixa alta era o menor texto funcional do sistema. */
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  vertical-align: middle; white-space: nowrap;
}
.bo-etiqueta--enviado,
.bo-etiqueta--aberto,
.bo-etiqueta--lead { border-color: var(--gold-500); color: var(--accent); }
.bo-etiqueta--aprovado,
.bo-etiqueta--producao,
.bo-etiqueta--instalacao { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-gold); }
.bo-etiqueta--concluido,
.bo-etiqueta--cliente { border-color: var(--accent-soft); color: var(--accent-soft); }
.bo-etiqueta--recusado,
.bo-etiqueta--cancelado { border-color: var(--danger); color: var(--danger); }
.bo-etiqueta--substituido { opacity: .7; }

/* --- Filtros de lista ---------------------------------------------------- */
.bo-filtros { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.bo-filtros input[type="search"], .bo-filtros select {
  padding: var(--space-2) var(--space-3); background-color: var(--forest-1000);
  /* o lado direito do select fica com o admin.css, que desenha a seta */
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm);
}
.bo-filtros select { padding-right: calc(var(--space-3) * 2 + 13px); }
.bo-filtros input[type="search"] { flex: 1; min-width: 12rem; }
/* Tudo na barra com a MESMA altura: a busca, o select, os botões e o par
   Lista/Grade. Eram três alturas (37, 26 e 22) numa linha só. */
.bo-filtros input[type="search"], .bo-filtros select, .bo-filtros .adm-btn, .bo-filtros .bo-ver .adm-btn {
  box-sizing: border-box; height: 2.25rem; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center;
}
.bo-filtros .bo-ver { display: inline-flex; align-items: stretch; }

/* --- Itens do orçamento -------------------------------------------------- */
.bo-itens td, .bo-itens th { vertical-align: top; }
.bo-itens__grupo th {
  padding-top: var(--space-5); font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.bo-itens__grupo td { padding-top: var(--space-5); }

/* Linha de digitação: os campos ficam lado a lado e o botão fecha a linha,
   porque orçar é digitar dezenas de linhas seguidas. */
.bo-item-novo {
  display: grid; gap: var(--space-3); align-items: end; margin-top: var(--space-6);
  padding-top: var(--space-5); border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .bo-item-novo { grid-template-columns: 10rem 1fr 5rem 5rem 8rem auto; }
}
.bo-item-novo .adm-btn { white-space: nowrap; }
.bo-item-novo .adm-salvo { grid-column: 1 / -1; }

/* --- Totais -------------------------------------------------------------- */
.bo-totais { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bo-totais > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.bo-totais dt { color: var(--text-muted); font-size: var(--text-sm); }
.bo-totais dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.bo-totais__final { padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }
.bo-totais__final dt { color: var(--text); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.bo-totais__final dd { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); }
.bo-totais__final dd.bo-totais__sem { font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; }

/* --- Todos os ambientes, um do lado do outro -----------------------------
   Na coluna da direita, antes dos totais do orçamento: é aqui que se vê
   qual ambiente apertou a margem e qual sobrou. */
.bo-por-ambiente {
  width: 100%; margin: 0 0 var(--space-5); border-collapse: collapse;
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.bo-por-ambiente th, .bo-por-ambiente td { padding: var(--space-2) 0; text-align: left; }
.bo-por-ambiente .num { text-align: right; }
.bo-por-ambiente thead th {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.bo-por-ambiente tbody th { font-weight: 400; color: var(--text-soft); }
.bo-por-ambiente tbody td { color: var(--text-soft); }
.bo-por-ambiente--fora th, .bo-por-ambiente--fora td { color: var(--text-muted); font-style: italic; }
.bo-por-ambiente__soma th, .bo-por-ambiente__soma td {
  padding-top: var(--space-3); border-top: 1px solid var(--border-strong); color: var(--text);
}
.bo-por-ambiente__soma th { font-family: var(--font-display); font-weight: 600; }

/* --- Barra de progresso da produção -------------------------------------- */
.bo-barra { width: 6rem; height: 6px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.bo-barra span { display: block; height: 100%; background: var(--gold-500); }

/* --- Quadro de produção ---------------------------------------------------
   Rola na horizontal em tela estreita: seis colunas espremidas em celular
   viram seis colunas ilegíveis. */
.bo-quadro { display: grid; gap: var(--space-4); grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); overflow-x: auto; padding-bottom: var(--space-4); }
.bo-coluna { display: flex; flex-direction: column; gap: var(--space-3); }
.bo-coluna__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: 0 0 var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft);
}
.bo-coluna__n { color: var(--text-muted); font-size: 0.625rem; }
.bo-coluna__vazia { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.bo-cartao {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt);
}
.bo-cartao--atraso { border-color: var(--danger); }
.bo-cartao__amb { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.bo-cartao__det { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.bo-cartao__det--atraso { color: var(--danger); }
.bo-cartao__nota { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-soft); font-style: italic; }
.bo-cartao form { margin-top: var(--space-3); }

.bo-select-etapa {
  width: 100%; padding: 4px 8px; padding-right: 24px; background-color: var(--forest-1000);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text-soft); font-family: var(--font-body); font-size: var(--text-xs);
}

/* --- Agenda de instalação ------------------------------------------------ */
.bo-instal { display: grid; gap: var(--space-4); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bo-instal { grid-template-columns: 7rem 1fr auto; } }
.bo-instal__quando { display: flex; flex-direction: column; }
.bo-instal__dia { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--accent); }
.bo-instal__hora { font-size: var(--text-xs); color: var(--text-muted); }
.bo-instal__quando--passou .bo-instal__dia { color: var(--danger); }
.bo-instal__data input { padding: var(--space-2) var(--space-3); background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); }
.bo-feito { opacity: .6; }

/* Três colunas de campo, para endereço e prazos. */
.adm-linha--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .adm-linha--3 { grid-template-columns: 2fr 1fr 1fr; } }

/* ==========================================================================
   O caminho do pedido — etapas, prazos, listas de conferência, cronograma.
   ========================================================================== */

/* --- Etapas do pedido, como passos clicáveis ----------------------------- */
.bo-passos { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .bo-passos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .bo-passos { grid-template-columns: repeat(7, 1fr); } }
.bo-passo-form { display: contents; }
.bo-passo {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bo-passo:hover { border-color: var(--accent-soft); }
.bo-passo__n {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-bottom: var(--space-2);
}
.bo-passo__rotulo { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; color: var(--text-soft); line-height: 1.3; }
.bo-passo__data { font-size: 0.625rem; color: var(--text-muted); }
.bo-passo__data--firme { color: var(--accent); }
.bo-passo--feita .bo-passo__n { background: var(--accent-soft); border-color: transparent; color: var(--forest-950); }
.bo-passo--atual { border-color: var(--accent); background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--accent); }
.bo-passo--atual .bo-passo__n { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-gold); }
.bo-passo--atual .bo-passo__rotulo { color: var(--accent); }
.bo-passo--futura { opacity: .7; }

/* Etiquetas das sete etapas: a cor acompanha o avanço, do frio ao dourado. */
.bo-etiqueta--entrada,
.bo-etiqueta--medicao,
.bo-etiqueta--projeto { border-color: var(--border-strong); color: var(--text-soft); }
.bo-etiqueta--material { border-color: var(--gold-500); color: var(--accent); }
.bo-etiqueta--fabricacao { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-gold); }

/* Número ao lado do nome da aba: pendência aberta pede atenção. */
.bo-aba__n {
  display: inline-block; min-width: 1.1rem; margin-left: 6px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--danger); color: #fff;
  font-size: 0.625rem; text-align: center; vertical-align: middle;
}

/* --- Prazos por etapa ---------------------------------------------------- */
.bo-prazos input[type="number"] { width: 4.5rem; }
.bo-prazos input { padding: 4px 8px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); }
.bo-prazos td { vertical-align: middle; }

/* --- Listas de conferência (checklist, pendências, material) -------------- */
.bo-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bo-check li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.bo-check li:last-child { border-bottom: 0; }
.bo-check__marca {
  flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 1px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--forest-1000);
  color: var(--accent); font-size: var(--text-sm); line-height: 1; cursor: pointer;
}
.bo-check__marca:hover { border-color: var(--accent); }
.bo-check__texto { flex: 1; font-size: var(--text-sm); color: var(--text-soft); }
.bo-check li.is-feito .bo-check__texto { color: var(--text-muted); text-decoration: line-through; }
.bo-check li.is-feito .bo-check__marca { background: var(--accent-soft); border-color: transparent; color: var(--forest-950); }
.bo-comprado td { opacity: .55; }

/* --- Histórico ----------------------------------------------------------- */
.bo-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-soft); }
.bo-hist li { padding-left: var(--space-4); border-left: 2px solid var(--border); }

.bo-barra--larga { width: 100%; height: 10px; }
.bo-numero--alerta { border-color: var(--danger); }
.bo-numero--alerta .bo-numero__n { color: var(--danger); }

/* --- Cronograma ----------------------------------------------------------
   Rola na horizontal em tela estreita; abaixo dele a mesma informação vive
   numa tabela, que é o que se lê no celular. */
.bo-crono { display: flex; flex-direction: column; gap: var(--space-3); min-width: 34rem; }
.bo-crono__regua, .bo-crono__linha { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); align-items: center; }
.bo-crono__nome { font-size: var(--text-xs); line-height: 1.3; }
.bo-crono__nome span { display: block; color: var(--text-muted); }
.bo-crono__faixa { position: relative; height: 1.6rem; border-radius: var(--radius); background: var(--bg); }
.bo-crono__regua .bo-crono__faixa { height: 1.1rem; background: none; border-bottom: 1px solid var(--border); }
.bo-crono__mes { position: absolute; bottom: 2px; font-size: 0.625rem; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; }
.bo-crono__hoje { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); opacity: .8; }
.bo-crono__barra {
  position: absolute; top: 6px; height: 10px; border-radius: 2px;
  background: var(--border-strong); border: 1px solid transparent;
}
.bo-crono__barra--medicao    { background: #4c6b5c; }
.bo-crono__barra--projeto    { background: #5f7f6c; }
.bo-crono__barra--material   { background: #8a7a53; }
.bo-crono__barra--fabricacao { background: var(--gold-500); }
.bo-crono__barra--instalacao { background: var(--accent-soft); }
.bo-crono__barra.is-atual { border-color: var(--cream); }
.bo-crono__fim { position: absolute; top: 3px; font-size: 0.625rem; color: var(--text-muted); transform: translateX(6px); white-space: nowrap; }
.bo-crono__fim--atraso { color: var(--danger); }

.bo-legenda { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); font-size: var(--text-xs); color: var(--text-muted); align-items: center; }
.bo-legenda i { display: inline-block; position: static; width: 1.4rem; height: 8px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.bo-legenda__nota { margin-left: auto; }

/* --- CRM: funil, conversas ------------------------------------------------ */

/* Etiquetas do funil: cinza enquanto é conversa, dourado quando há proposta
   na mesa, verde quando fecha, vermelho quando cai. */
.bo-etiqueta--funil-novo,
.bo-etiqueta--funil-contato,
.bo-etiqueta--funil-qualificado { border-color: var(--border-strong); color: var(--text-soft); }
.bo-etiqueta--funil-orcamento,
.bo-etiqueta--funil-negociacao { border-color: var(--gold-500); color: var(--accent); }
.bo-etiqueta--funil-ganho { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-gold); }
.bo-etiqueta--funil-perdido { border-color: var(--danger); color: var(--danger); }

.bo-cartao__wa { font-size: var(--text-xs); color: var(--accent); text-decoration: none; margin-top: 2px; }
.bo-cartao__wa:hover { text-decoration: underline; }
.bo-cartao__acoes { margin-top: var(--space-2); }
.bo-cartao__acoes > summary { width: 100%; text-align: center; }

/* Conversas: uma linha do tempo do que já foi dito. */
.bo-conversas { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.bo-conversas li { padding-left: var(--space-4); border-left: 2px solid var(--border); }
.bo-conversas__topo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.bo-conversas p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-soft); line-height: 1.6; white-space: pre-wrap; }

/* --- Abas do pedido -------------------------------------------------------
   Sem JavaScript os cinco painéis ficam empilhados, cada um com o próprio
   título; com ele, um por vez e o título some (a aba já diz onde se está). */
/* ==========================================================================
   AS TRÊS SEÇÕES DO ORÇAMENTO

   Eram três abas. Trabalhar num orçamento é ir e voltar entre elas o tempo
   todo — lançar item, ver o total, corrigir o prazo, lançar de novo —, e
   cada ida escondia o que se acabou de fazer.

   Numa página só, o que separava por esconder passa a separar por desenho:
   cada seção tem número, uma cor no fio da esquerda e o que ela trata dito
   em três palavras. Cor diferente por seção não é enfeite: é o que faz o
   olho achar o lugar depois de rolar.
   ========================================================================== */
.bo-secao { margin-bottom: var(--space-6); scroll-margin-top: var(--space-5); }

/* --- A ficha do cabeçalho -------------------------------------------------
   Cada dado com o nome por cima, em letra miúda. Em linha corrida, separados
   por ponto, todos tinham o mesmo peso e era preciso ler a frase inteira para
   achar o cliente. */
.bo-ficha {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6);
  margin: var(--space-3) 0 0; align-items: flex-start;
}
.bo-ficha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-ficha dt {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-ficha dd { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.bo-ficha dd small { color: var(--text-muted); font-size: var(--text-xs); }
/* O total é o número que se procura: ele tem o tamanho de número. */
.bo-ficha__total { margin-left: auto; text-align: right; }
.bo-ficha__total dd {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* --- O que está acontecendo -----------------------------------------------
   Quantos itens, em quantos ambientes, o que não tem preço, o que está fora
   da conta. Era tudo coisa que só se descobria somando com o olho, linha por
   linha — e item sem preço é a razão de um total zerado, que é a pergunta que
   mais se faz nesta tela.

   Fato bom em cinza; o que pede ação, no dourado. Nada pisca e nada é
   vermelho: não é erro, é o pé em que o trabalho está. */
.bo-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-xs); color: var(--text-muted);
}
.bo-estado__fato { display: inline-flex; align-items: center; gap: var(--space-2); }
/* O ponto antes de cada fato: é o que separa sem precisar de régua. */
.bo-estado__fato::before {
  content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
}
.bo-estado__fato strong { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bo-estado__fato--pede { color: var(--text-soft); }
.bo-estado__fato--pede::before { background: var(--accent); }
.bo-estado__fato--pede strong { color: var(--accent); }

/* --- O orçamento em duas colunas ------------------------------------------
   O trabalho à esquerda, a conta à direita. O total não é um passo DEPOIS
   dos itens: é a resposta que se quer ver enquanto se lança item. Em pé de
   página, obrigava a rolar para baixo para ver quanto deu e voltar para
   corrigir.

   A coluna gruda na tela e recolhe num clique — quem está conferindo medida
   de peça não precisa da conta na frente, e aí a tabela ganha a largura. */
/* Uma coluna só: o que era a coluna da direita virou o passo 3. */
.bo-orc { display: block; }
.bo-orc__principal { min-width: 0; }

/* O formulário do orçamento é de onze campos, e quase todos cabem em meia
   largura. Apertar o passo entre eles e a letra da dica tira duzentos pixels
   de rolagem sem tirar nada do que se lê. */
.bo-secao--dados .adm-form { gap: var(--space-4); }
.bo-secao--dados .adm-campo { gap: 4px; }
.bo-secao--dados .adm-campo__dica { font-size: 0.6875rem; line-height: 1.35; }
.bo-secao--dados .adm-linha { gap: var(--space-4); }
/* O bloco já tem o fio da seção acima dele: mais um padding de cinco
   espaços dentro faz o formulário começar longe do próprio título. */
.bo-secao .adm-bloco { padding: var(--space-4) var(--space-5); }
.bo-secao__cabeca {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4); padding-left: var(--space-4);
  border-left: 3px solid var(--secao);
}
.bo-secao__cabeca h2 {
  margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl);
  color: var(--text);
}
.bo-secao__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--secao); color: var(--secao);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  align-self: center;
}
.bo-secao__oque { font-size: var(--text-xs); color: var(--text-muted); }
/* A cabeça da seção que abre e recolhe: a seta do componente entra na linha,
   e o fio e o número continuam sendo os da seção. */
.bo-secao__dobra > .bo-secao__cabeca { margin-bottom: 0; }
.bo-secao__dobra[open] > .bo-secao__cabeca { margin-bottom: var(--space-4); }
.bo-secao__dobra > .bo-secao__cabeca::after { margin-left: auto; }
/* Explicação de seção é explicação: letra miúda, não texto de leitura. */
.bo-secao__nota {
  margin: 0 0 var(--space-4); max-width: 86ch;
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted);
}

/* --- As maneiras de pôr coisa num ambiente --------------------------------
   Desenhar é a principal: é dela que saem as peças, o plano de corte e o
   caderno executivo. Peça avulsa é a segunda: o que se corta sem ser móvel.
   As outras duas descem para uma dobra — o catálogo ainda não tem preço, e o
   arquivo exportado só serve quando o envio direto da banca não dá.

   Quatro botões iguais em linha diziam que os quatro caminhos valem o mesmo,
   e não valem. */
.bo-ambiente__lancar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3);
}
.bo-ambiente__lancar > .bo-avulsa-dobra { margin-top: 0; }
.bo-ambiente__lancar > .bo-avulsa-dobra[open] { flex: 1 1 100%; }
/* ACRESCENTAR: o único botão cheio da cesta é o que acrescenta. O menu é
   um <details> (abre sem script), ancorado embaixo do botão, com uma
   linha por maneira e um ícone do ofício em cada uma. Escala do canto
   do botão, e não do centro, para parecer que saiu dele. */
.bo-acrescentar { position: relative; margin: 0; }
.bo-acrescentar > summary { list-style: none; }
.bo-acrescentar > summary::-webkit-details-marker { display: none; }
.bo-acrescentar__botao { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.bo-acrescentar__botao svg { width: 15px; height: 15px; }
.bo-acrescentar[open] > .bo-acrescentar__botao { filter: brightness(1.06); }
.bo-acrescentar__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: min(22rem, calc(100vw - 2.5rem));
  padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 10px 28px -8px rgba(8, 24, 20, .7), 0 2px 6px rgba(8, 24, 20, .35);
  transform-origin: top left;
  animation: bo-acrescentar-abre .12s cubic-bezier(.2, .8, .2, 1);
}
.bo-acrescentar.is-acima > .bo-acrescentar__menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; animation-name: bo-acrescentar-abre-acima; }
@keyframes bo-acrescentar-abre { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
@keyframes bo-acrescentar-abre-acima { from { opacity: 0; transform: translateY(3px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .bo-acrescentar__menu { animation: none; } }
.bo-acrescentar__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius) - 2px);
  color: var(--text); text-decoration: none;
  transition: background-color .1s;
}
.bo-acrescentar__item + .bo-acrescentar__item { margin-top: 1px; }
.bo-acrescentar__item:hover { background: var(--surface-hover); }
.bo-acrescentar__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bo-acrescentar__item > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.bo-acrescentar__item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-acrescentar__item strong { font-size: var(--text-sm); font-weight: 600; }
.bo-acrescentar__item small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; }
/* A dobra da peça avulsa não tem mais botão próprio: quem a abre é o menu. */
.bo-avulsa-dobra > summary.bo-avulsa-dobra__nome { display: none; }
/* O link para o Projeto 3D na linha do desenho, com a cor do que se trabalha. */
.bo-doc.bo-doc--3d { color: var(--accent); border-color: var(--border-strong); }
.bo-doc.bo-doc--3d:hover { border-color: var(--accent); }
/* AS CORES DOS CINCO PASSOS.

   Verde da casa para o que se preenche, dourado para o que se trabalha,
   cobre para o que fecha. O passo do custo leva a sombra do dourado: ainda
   é oficina, mas já é conta. E o 4 e o 5 compartilham o cobre de propósito —
   decidir o preço e mandar são o mesmo momento, visto duas vezes. */
.bo-secao--dados      { --secao: #93bda4; }
.bo-secao--itens      { --secao: #e3c99a; }
.bo-secao--custo      { --secao: #c9a56b; }
.bo-secao--preco      { --secao: #cf9b86; }
.bo-secao--fechamento { --secao: #cf9b86; }

/* O que se leva do orçamento: a proposta, que vai para o cliente, e a lista
   de corte, que vai para a central. São DOCUMENTOS, e não botões de estado —
   por isso seção à parte na mesma coluna, com fundo e fio próprios, logo
   abaixo do total: é com a conta na frente que se decide mandar. */
.bo-orc__levar {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-5); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.bo-orc__levar h3 {
  margin: 0 0 var(--space-1, 4px); font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
/* Um por linha: são dois destinos diferentes, e lado a lado pareciam duas
   metades da mesma coisa. */
.bo-orc__levar-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-soft); text-decoration: none;
  font-size: var(--text-sm); line-height: 1.3;
  transition: border-color .15s, color .15s;
}
.bo-orc__levar-link:hover { border-color: var(--accent); color: var(--text); }
.bo-orc__levar-link svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.bo-orc__levar-link small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
/* Papel de dentro de casa: a borda tracejada diz, antes de clicar, que
   aquilo não é para mandar para ninguém. */
.bo-orc__levar-link--casa { border-style: dashed; }
/* A diferença entre a conta e o total de hoje: é o número que explica
   por que os dois não batem, e por isso ele se destaca. */
.bo-precif-dif dt, .bo-precif-dif dd { color: var(--accent) !important; }
.bo-orc__levar-link--casa small { color: var(--accent); }
/* O interruptor da seção: parece com os links, mas não é um — por isso a
   marca redonda à esquerda, no lugar do ícone. */
/* Instalação de um lado, transporte do outro: duas contas, lado a lado. */
.bo-servico__par { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: var(--space-5); }
.bo-servico__lado { margin: 0; padding: var(--space-4) var(--space-5) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); }
.bo-servico__lado legend { padding: 0 var(--space-2); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); }
.bo-servico__lado legend b { margin-left: var(--space-2); color: var(--accent); letter-spacing: 0;
  font-variant-numeric: tabular-nums; }
/* O jeito de cobrar, e logo abaixo só os campos do jeito escolhido. */
.bo-servico__modo { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) 0; font-size: var(--text-sm); cursor: pointer; }
.bo-servico__modo input { margin-top: .2rem; flex: none; accent-color: var(--accent); }
.bo-servico__modo small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
/*
 * OS MODOS, EM BOTÕES LADO A LADO.
 *
 * Eram listas verticais com um parágrafo por opção: sete opções somadas
 * entre instalação e transporte, meia tela para duas escolhas únicas.
 */
.bo-modos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.bo-modo {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--text-muted);
  text-align: center; white-space: nowrap; cursor: pointer; position: relative;
  transition: border-color .12s, color .12s, background-color .12s;
}
/* O rádio continua existindo — é ele que o formulário manda. Preso ao botão
   e do tamanho de um ponto: solto, ele herdava width 100% do .adm-campo e
   esticava 736px para fora da caixa. */
.bo-modo input {
  position: absolute; inset: 0 auto auto 0;
  width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.bo-modo:hover { border-color: var(--border-strong); color: var(--text); }
.bo-modo:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-modo.is-escolhido {
  border-color: var(--accent); color: var(--accent);
  background: rgba(227, 201, 154, 0.08);
}

/* A explicação do modo que está valendo: uma, e não quatro. */
/*
 * Coluna de grade nao encolhe abaixo do conteudo sem min-width: 0 — e por
 * isso que a dupla "quanto ele cobrou / transporte" furava a borda direita
 * do modal em 94px, abrindo barra de rolagem horizontal.
 */
.bo-modal .adm-linha > * { min-width: 0; }

/* Dentro de um modal a fileira nao pode empurrar a caixa: ela quebra. */
.bo-modal .bo-modo { flex: 0 1 auto; white-space: normal; }

.bo-modos__dica {
  margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-muted);
}

.bo-servico__modo-campos { display: none; }
.bo-servico__modo-campos.is-aberto {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-items: start;
  margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--accent);
}
/* Rótulos de alturas diferentes ("Diária do montador R$/dia" quebra, "Ajudantes" não)
   desalinhavam os campos da mesma fileira, e a dica embaixo de um empurrava o vizinho.
   Todo rótulo reserva duas linhas e encosta embaixo; o campo fica na mesma altura
   em toda a fileira, e a dica vem depois sem mexer em ninguém. */
.bo-servico__modo-campos .adm-campo { margin: 0; min-width: 0; }
/* O admin.css põe 20px entre campos vizinhos de um bloco; aqui a grade já espaça. */
.bo-servico .bo-servico__modo-campos .adm-campo + .adm-campo { margin-top: 0; }
.bo-servico__modo-campos .adm-campo > label { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0 .4em; min-height: 2.2em; line-height: 1.1; margin-bottom: 4px; }
.bo-servico__modo-campos .adm-campo > input { width: 100%; }
.bo-servico__modo-campos .adm-campo label small { color: var(--text-muted); font-weight: 400; }
.bo-servico__fecho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-top: var(--space-5); }
.bo-servico__fecho .adm-campo { max-width: 15rem; }
.bo-servico__fecho .adm-campo label small { color: var(--text-muted); font-weight: 400; }
.bo-servico__conta {
  margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.bo-servico__conta strong { color: var(--accent); }
.bo-servico__conta small { color: var(--text-soft); }
/* ------------------------------------------------------------------
   Retalhos: o lançamento de um lado, o que está guardado do outro.
   ------------------------------------------------------------------ */
.bo-ret-topo { margin-bottom: var(--space-5); }
/* minmax(0, 1fr), e não 1fr: com 1fr a coluna da lista não encolhe abaixo do
   conteúdo mínimo dela (a tabela) e a página ganhava 22 px de rolagem lateral. */
.bo-ret-colunas { display: grid; grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr); gap: var(--space-5);
  align-items: start; }
.bo-ret-colunas > * { min-width: 0; }
@media (max-width: 60rem) { .bo-ret-colunas { grid-template-columns: 1fr; } }
/* Os campos de uma linha nascem na mesma altura: sem a margem que o admin.css
   põe entre campos vizinhos (o segundo descia 20 px), e com todo rótulo
   reservando duas linhas e encostando embaixo — "De que orçamento sobrou nº"
   quebra, "Observação" não, e o campo ficava torto. Largura, altura e m² cabem
   numa linha só, que é como se lê a medida de um pedaço. */
.bo-ret-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: var(--space-3) var(--space-4);
  align-items: start; }
.bo-ret-novo .bo-ret-linha .adm-campo + .adm-campo { margin-top: 0; }
.bo-ret-linha .adm-campo { min-width: 0; }
.bo-ret-linha .adm-campo > label { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .4em;
  min-height: 2.2em; line-height: 1.1; margin-bottom: 4px; }
.bo-ret-linha .adm-campo > input { width: 100%; }
.bo-ret-novo .adm-campo label small { color: var(--text-muted); font-weight: 400; }
/* As ações de um pedaço numa linha só; a coluna tem lugar para isso. */
.bo-ret-acoes { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); white-space: nowrap; }
.bo-ret-acoes form { margin: 0; }
.bo-ret-aviso { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.bo-ret-sub { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bo-ret-resumo { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.bo-ret-resumo li { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.bo-ret-resumo li span:first-child { flex: 1 1 14rem; color: var(--text); }
.bo-ret-resumo b { color: var(--accent); font-weight: 600; }
/* O atalho que leva a sobra calculada para o estoque de retalhos. */
.bo-chapas__guardar { margin-left: var(--space-2); font-size: var(--text-xs); }
/* A conta de hoje contra o preço gravado: o aviso e o botão que o acerta. */
.bo-conta-hoje {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--accent); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.bo-conta-hoje p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); max-width: 34ch; }
.bo-conta-hoje b { color: var(--accent); font-variant-numeric: tabular-nums; }
.bo-conta-hoje form { margin: 0; }
.bo-orc__opcao { margin: 0; }
/*
 * O INTERRUPTOR DE REGRA ALINHA COM OS BLOCOS.
 *
 * Ele tinha teto de 32rem — herdado de quando morava na coluna estreita dos
 * documentos. Solto no meio da pagina virava uma caixa tracejada de meia
 * largura flutuando ao lado do nada, com a borda esquerda alinhada aos blocos
 * e a direita cortada no meio. Era o que estava estranho.
 *
 * Agora acompanha a largura do bloco, como tudo o mais na coluna.
 */
.bo-orc__opcao--itens { margin: 0 0 var(--space-3); }
/*
 * O INTERRUPTOR DE REGRA.
 *
 * Tracejado dizia "aqui falta alguma coisa" e a bolinha de rádio dizia
 * "escolha uma entre várias". Não é nem uma coisa nem outra: é um botão
 * que liga e desliga, independente dos outros dois.
 *
 * Numa linha só, com o ícone dizendo do que se trata e o estado no próprio
 * botão: apagado desligado, aceso com o dourado ligado.
 */
.bo-orc__opcao-botao {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer;
  transition: border-color .12s, color .12s, background-color .12s;
}
.bo-orc__opcao-botao svg { flex: none; width: 1.15rem; height: 1.15rem; }
/* O nome da chave não quebra: quem cede é a legenda, com reticências. */
.bo-orc__opcao-botao b { font-weight: 600; color: var(--text-soft); flex: none; white-space: nowrap; }
/* A explicação na mesma linha, e some antes de empurrar o botão para duas. */
.bo-orc__opcao-botao small {
  flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bo-orc__opcao-botao:hover { border-color: var(--accent); color: var(--text); }
.bo-orc__opcao-botao:hover b { color: var(--text); }

/* Ligado: o botão inteiro acende. */
.bo-orc__opcao-botao.is-ligado {
  border-color: var(--accent-soft); color: var(--text-soft);
  background: rgba(227, 201, 154, 0.07);
}
.bo-orc__opcao-botao.is-ligado svg,
.bo-orc__opcao-botao.is-ligado b { color: var(--accent); }
.bo-orc__opcao-botao small { display: block; font-size: var(--text-xs); color: var(--text-muted); }

/*
 * A DICA DAS CHAPAS, embaixo do interruptor da chapa inteira: a sugestão
 * em uma frase e, por chapa, o uso, quantas inteiras e o que dá cada jeito.
 * Quando a chave está contra a sugestão, a frase acende em âmbar.
 */
.bo-chapas-dica { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--border-strong); font-size: var(--text-xs); color: var(--text-muted); }
.bo-chapas-dica__veredito { margin: 0 0 var(--space-2); color: var(--text-soft); line-height: 1.45; }
.bo-chapas-dica__veredito b { color: var(--accent); font-weight: 600; }
.bo-chapas-dica.is-contra { border-left-color: var(--warning, #d9a441); }
.bo-chapas-dica.is-contra .bo-chapas-dica__veredito b { color: var(--warning, #d9a441); }
.bo-chapas-dica__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Duas fileiras por chapa: o nome e o uso em cima, inteiros; os três valores e os botões embaixo. Com os botões na mesma fileira do uso, o texto virava uma coluna de quatro linhas. */
.bo-chapas-dica__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: baseline; }
.bo-chapas-dica__lista li > span:not(.num) { grid-column: 1 / -1; }
/* A escolha de cada chapa: dois botões miúdos, o escolhido aceso; "sugere …" ao lado quando difere. */
.bo-item__chapas { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.bo-chapa-jeito { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.bo-chapa-jeito button { font: inherit; font-size: var(--text-xs); line-height: 1.4; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; transition: border-color .12s, color .12s; }
.bo-chapa-jeito button:hover { border-color: var(--accent); color: var(--text); }
.bo-chapa-jeito button.is-escolhido { border-color: var(--accent); color: var(--accent); background: rgba(227, 201, 154, 0.08); }
.bo-chapa-jeito__sugere, .bo-chapa-jeito__fixo { font-size: var(--text-xs); font-style: normal; color: var(--warning, #d9a441); margin-left: 4px; white-space: nowrap; }
.bo-chapa-jeito__fixo { color: var(--text-muted); }
.bo-chapas-dica__seguir { margin: 0 0 var(--space-2); }
.bo-chapas-dica__lista li b { grid-column: 1 / -1; font-weight: 600; color: var(--text-soft); }
.bo-chapas-dica__lista li .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-soft); }
@media (max-width: 640px) { .bo-chapas-dica__lista li { grid-template-columns: 1fr; } .bo-chapas-dica__lista li .num { white-space: normal; } .bo-chapa-jeito { margin-top: 2px; } }

.bo-painel + .bo-painel { margin-top: var(--space-8); }
.bo-painel__titulo {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--text-2xl);
  margin: 0 0 var(--space-5); color: var(--text);
}
.js .bo-painel__titulo { display: none; }

/* --- Filtro em chips ------------------------------------------------------
   Recorta a lista da tela em que se está. Deliberadamente diferente das abas
   de seção: duas barras iguais empilhadas fazem parecer hierarquia onde não
   há — uma escolhe a tela, a outra filtra o que ela mostra. */
.bo-chips-filtro { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.bo-chip {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--text-muted); text-decoration: none;
  font-size: var(--text-xs); white-space: nowrap; transition: border-color .15s, color .15s;
}
.bo-chip:hover { border-color: var(--accent-soft); color: var(--text-soft); }
.bo-chip.is-atual { border-color: var(--accent); color: var(--accent); }

/* A pílula que se marca: o campo existe (teclado, leitor de tela), mas
   quem aparece é a pílula. O is-atual do servidor pinta a primeira
   carga; o :has cuida do clique, sem recarregar. */
label.bo-chip { cursor: pointer; user-select: none; }
label.bo-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
label.bo-chip:has(input:checked) { border-color: var(--accent); color: var(--accent); }
label.bo-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Funil em lista: a planilha, dentro do sistema ------------------------
   Campo que parece célula: sem borda até receber o cursor. Uma tabela cheia
   de caixas desenhadas vira um formulário, e o que se quer aqui é a leitura
   corrida de quem confere dez linhas de uma vez. */
/* Larguras mínimas: a tabela rola dentro do bloco em vez de espremer as
   colunas. Nome quebrado em cinco linhas e ambiente cortado pela metade
   é o oposto do que uma planilha faz bem. */
.bo-funil-lista { min-width: 68rem; }
.bo-funil-lista td { vertical-align: middle; }
.bo-funil-lista td:first-child { min-width: 13rem; }
.bo-funil-lista td:first-child span { white-space: nowrap; }
.bo-funil-lista td:nth-child(2) { min-width: 12rem; }
.bo-funil-lista td:nth-child(7) { min-width: 9.5rem; }
.bo-celula {
  width: 100%; min-width: 6rem; padding: 4px 6px; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm);
}
.bo-celula:hover { border-color: var(--border); }
.bo-celula:focus { background: var(--forest-1000); border-color: var(--focus-ring); outline: none; }
.bo-celula--num { text-align: right; font-variant-numeric: tabular-nums; }
.bo-celula--alerta { color: var(--danger); }
.bo-funil-lista .bo-select-etapa { min-width: 9rem; }

/* ==========================================================================
   DENSIDADE — a diagramação do backoffice

   A tentativa anterior tratou "sufocante" como falta de espaço e aumentou o
   recheio de tudo. Ficou maior sem ficar mais claro: título de 36px com 60px
   de entrelinha, célula de tabela com 16px de recheio, campo de 44px de
   altura. Isso é escala de página que se lê uma vez, não de ferramenta que
   se opera o dia inteiro.

   O que sufoca numa tela de trabalho não é a falta de ar entre as coisas: é
   todo mundo pesar igual. Então aqui o ajuste é outro — tipografia menor e
   com hierarquia clara, controles compactos, e o espaço grande reservado
   para separar BLOCOS, que é a separação que a leitura usa.

   Vale só no backoffice: este arquivo não é carregado pelo painel do site
   nem pela gestão da área de membros.
   ========================================================================== */

/* --- O quadro da página --------------------------------------------------- */
.adm-main { padding: var(--space-6) var(--space-5) var(--space-16); max-width: 84rem; }
@media (min-width: 1024px) { .adm-main { padding: var(--space-7, 1.75rem) var(--space-8) var(--space-16); } }
@media (min-width: 1560px) { .adm-main { padding-inline: var(--space-10); } }

/* --- Cabeçalho da página --------------------------------------------------
   Título de ferramenta: continua na serifada da marca, mas no tamanho de um
   rótulo de tela, com entrelinha fechada. Os 60px de altura de linha para um
   texto de uma palavra eram um terço do primeiro quadro da tela. */
.adm-head { margin-bottom: var(--space-5); gap: var(--space-4); align-items: center; }
.adm-head h1 { font-size: 1.5rem; line-height: 1.2; }
.adm-head p { margin-top: 2px; font-size: var(--text-sm); line-height: 1.5; max-width: 64ch; }

/* --- Abas e filtros ------------------------------------------------------- */
.adm-abas { margin-bottom: var(--space-5); gap: var(--space-5); }
.adm-aba { padding-bottom: var(--space-3); font-size: var(--text-sm); }
.bo-chips-filtro { margin-bottom: var(--space-5); gap: var(--space-2); }
.bo-chip { padding: 4px 11px; font-size: var(--text-xs); }

/* --- Blocos ---------------------------------------------------------------
   Recheio menor por dentro, distância mantida por fora: é o que faz dois
   blocos se lerem como dois assuntos sem cada um virar um cômodo vazio. */
.adm-bloco { padding: var(--space-5); }
.adm-bloco + .adm-bloco { margin-top: var(--space-5); }
/* Lado a lado numa grade, os blocos nascem no mesmo topo: a margem de
   irmão acima é para blocos EMPILHADOS, e numa grade de duas colunas ela
   descia o bloco da direita 20 px ("A obra" × "O produto"). */
.bo-secao--oque > .adm-bloco, .bo-secao--preco > .adm-bloco, .bo-mandar-passo > .adm-bloco,
.adm-grid-2 > .adm-bloco, .adm-grid-detalhe > .adm-bloco, .bo-ret-colunas > .adm-bloco, .bo-preco__regras-grade > .adm-bloco { margin-top: 0; }
.adm-bloco h2 { margin-bottom: var(--space-4); }
.adm-bloco__intro { margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: 1.55; max-width: 68ch; }

/* --- Dobra: um bloco que abre e recolhe -----------------------------------
   O título é o botão: fechado fica só ele e a contagem, e o resto da página
   cabe na tela. É <details>, então abre e fecha sem script; o script só
   lembra como ficou. */
.bo-dobra__topo {
  display: flex; align-items: baseline; gap: var(--space-3);
  cursor: pointer; list-style: none;
}
.bo-dobra__topo::-webkit-details-marker { display: none; }
.bo-dobra__topo h2 { margin-bottom: 0; }
.bo-dobra__topo:hover h2 { color: var(--text-strong, inherit); }
.bo-dobra__topo:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius);
}
/* A seta: aponta para baixo fechada, para cima aberta. */
.bo-dobra__topo::after {
  content: ''; margin-left: auto; align-self: center; flex: none;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 120ms ease;
}
.bo-dobra[open] > .bo-dobra__topo::after { transform: rotate(225deg) translate(-2px, -2px); }
.bo-dobra__corpo { margin-top: var(--space-4); }

/* De que desenho o ambiente veio: um dado do ambiente, não um aviso. Uma
   linha miúda embaixo do título — a faixa com moldura que havia aqui pesava
   mais que a lista de itens que vem depois. */
/* A barra do ambiente: o desenho de onde ele veio e os dois documentos que
   saem dele. Três coisas que se clicam — por isso uma faixa, e não uma
   frase. */
.bo-ambiente__desenho {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  min-height: 2.75rem; border-radius: var(--radius);
  background: rgba(227, 201, 154, 0.04);
  border: 1px solid var(--border);
  font-size: var(--text-xs); color: var(--text-muted);
}
.bo-ambiente__rotulo {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
/* O nome do desenho é um botão: sublinhado no meio da frase ele parecia
   observação, e não o caminho para a página dele. */
.bo-doc.bo-doc--nome {
  width: auto; min-width: 0; height: 2rem; gap: var(--space-2); padding: 0 var(--space-3);
  font-size: var(--text-sm); color: var(--text-soft);
  background: var(--surface); white-space: nowrap;
}
.bo-doc.bo-doc--nome svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.bo-doc.bo-doc--nome span { overflow: hidden; text-overflow: ellipsis; }
/* Os dois documentos do ambiente ficam na ponta da linha do desenho: eles
   são do desenho, e é dele que se fala ali.

   Em ícone, e não em botão com nome: são duas ações que se repetem em cada
   ambiente, e o desenho delas já diz o que são — a chapa com as peças é o
   plano, a folha escrita é o caderno. Com o nome inteiro, a linha ficava
   apertada; o nome mora no title e no aria-label. */
.bo-ambiente__docs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
/* Com o nome ao lado do ícone: "Plano de corte", "Caderno", "Etiquetas".
   Três ícones sem nome eram adivinhação; com nome, cabem na linha e ainda
   sobram para o celular, onde o nome some e o ícone fica (o title segue). */
.bo-ambiente__docs .bo-doc { width: auto; gap: var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.bo-ambiente__docs .bo-doc svg { flex: none; }
@media (max-width: 720px) {
  .bo-ambiente__docs .bo-doc { width: 1.75rem; padding: 0; }
  .bo-ambiente__docs .bo-doc span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.bo-doc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); text-decoration: none;
  transition: color .12s, border-color .12s;
}
.bo-doc:hover, .bo-doc:focus-visible { color: var(--accent); border-color: var(--accent); }
/* Maior que o ícone de ação da linha: estes são destino, e não detalhe. */
.bo-doc svg { width: 18px; height: 18px; display: block; }

/* As peças avulsas, recolhidas: elas são produção, e uma tabela de cinco
   colunas ao lado da dos itens eram duas tabelas disputando o mesmo olhar. */
.bo-avulsas-dobra { margin-top: var(--space-3); }
.bo-avulsas-dobra__topo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  list-style: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--text-muted);
}
.bo-avulsas-dobra__topo::-webkit-details-marker { display: none; }
.bo-avulsas-dobra__topo::before { content: '›'; display: inline-block; transition: transform .12s ease; }
.bo-avulsas-dobra[open] > .bo-avulsas-dobra__topo::before { transform: rotate(90deg); }
.bo-avulsas-dobra__topo strong { color: var(--text-soft); }
.bo-avulsas-dobra .bo-avulsas { margin-top: var(--space-2); }

/* --- Peças avulsas --------------------------------------------------------
   A peça que não veio de módulo: lança-se nos campos da lista de corte, que
   são os mesmos da planilha do CorteCloud. Campo curto para o que é curto —
   um campo de 20rem para escrever "18" convida a escrever outra coisa. */
/* O formulário mora atrás do botão: nove campos abertos em cada ambiente
   afogavam a lista de itens, que é o que se vem ver. */
.bo-avulsa-dobra { margin-top: var(--space-5); }
.bo-avulsa-dobra > summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  list-style: none; cursor: pointer; user-select: none;
}
.bo-avulsa-dobra > summary::-webkit-details-marker { display: none; }
.bo-avulsa-dobra > summary::before { content: '+'; font-weight: 700; line-height: 1; }
.bo-avulsa-dobra[open] > summary::before { content: '–'; }
.bo-avulsa-nova {
  display: grid; gap: var(--space-3); align-items: end; margin-top: var(--space-4);
  padding-top: var(--space-4); border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  /* O que é medida tem a largura da medida; o que é nome, a do nome. */
  .bo-avulsa-nova {
    grid-template-columns: minmax(9rem, 1.3fr) 4rem 5.5rem 5.5rem 4.5rem minmax(10rem, 1.2fr) minmax(8rem, 1fr);
  }
  .bo-avulsa-nova .bo-avulsa__lados { grid-column: 1 / 6; }
  .bo-avulsa-nova .bo-avulsa__obs { grid-column: 6 / 8; }
  /* O botão na linha dele, encostado à direita: dividindo a coluna com a
     fita, ele saía cortado no meio da palavra. */
  .bo-avulsa-nova .adm-btn { grid-column: 1 / -1; justify-self: end; }
}
.bo-avulsa-nova .adm-btn { white-space: nowrap; }
.bo-avulsa-nova .adm-salvo { grid-column: 1 / -1; }
.bo-avulsa-nova input { width: 100%; }
/* Medida se lê pela direita: assim o 2700 de uma peça fica embaixo do 800
   da outra, e o olho compara sem contar casa. */
.bo-avulsa-nova .bo-avulsa__curto input { text-align: right; font-variant-numeric: tabular-nums; }
/* Um campo como os outros: o nome em cima, as marcas embaixo. Com moldura e
   legenda ele ficava mais alto que os vizinhos e desalinhava a linha. */
.bo-avulsa__lados {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  margin: 0; padding: 0; border: 0; min-width: 0;
  font-size: var(--text-xs); color: var(--text-muted);
}
.bo-avulsa__lados legend {
  float: left; width: 100%; padding: 0; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-avulsa__lados label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  height: 2.125rem;
}
.bo-avulsa__lados input { width: auto; }
.bo-avulsa__dica { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); max-width: 70ch; }
.bo-avulsa__dica strong { color: var(--text-soft); font-weight: 600; }
/* A tabela das avulsas vem depois da dos itens, e precisa de ar entre elas
   para não parecer continuação. */
.bo-avulsas { margin-top: var(--space-4); }

/* A função da peça: o nome, e embaixo como ela é usinada. Miúdo, porque
   numa tabela de medidas é conferência e não identificação. */
.bo-corte__funcao small {
  display: block; margin-top: 2px;
  font-size: 0.6875rem; line-height: 1.35; color: var(--text-muted);
  max-width: 26ch; white-space: normal;
}
.bo-dobra__corpo > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .bo-dobra__topo::after { transition: none; } }
.adm-grid-detalhe { gap: var(--space-5); }
.adm-grid-detalhe > * { min-width: 0; }

/* --- Tabelas --------------------------------------------------------------
   Linha de ~34px: cabe o dobro de linhas na tela e o olho ainda acompanha.
   O cabeçalho fica menor que o dado, porque o dado é o que se lê. */
.adm-tabela { font-size: var(--text-sm); }
.adm-tabela th, .adm-tabela td { padding: var(--space-2) var(--space-3); line-height: 1.45; }
.adm-tabela thead th { padding-block: var(--space-2); font-size: 0.6875rem; }
.adm-tabela-wrap + .adm-form,
.adm-tabela-wrap + form { margin-top: var(--space-5); }

/* --- Formulários ----------------------------------------------------------
   Campo de 34px em vez de 44px. Quarenta e quatro é alvo de dedo em celular;
   aqui se digita com teclado, e a altura extra só empurrava o botão para
   fora da tela. */
.adm-form { gap: var(--space-4); }
.adm-linha { gap: var(--space-3); }
.adm-campo label { font-size: 0.6875rem; margin-bottom: 3px; }
.adm-campo input, .adm-campo textarea,
.adm-codigo-painel input, .adm-codigo-painel textarea, .adm-chip-outro {
  padding: 6px var(--space-3);
  min-height: 2.125rem;
  font-size: var(--text-sm);
}
/* Select à parte: quem cuida do lado direito é o admin.css, por causa da seta. */
.adm-campo select {
  padding-block: 6px;
  padding-left: var(--space-3);
  min-height: 2.125rem;
  font-size: var(--text-sm);
}
.adm-campo textarea { min-height: 4.5rem; padding-block: var(--space-2); }
.adm-campo__dica { line-height: 1.45; margin-top: 3px; font-size: 0.6875rem; }
.adm-acoes { gap: var(--space-3); margin-top: 0; }
.adm-btn { padding: 7px var(--space-4); font-size: var(--text-xs); }
.adm-btn--mini { padding: 3px var(--space-2); font-size: 0.6875rem; }

/* --- Lateral --------------------------------------------------------------
   Sete itens não precisam de 264px nem de 44px de altura cada. O que sobra
   vai para a tabela, que é onde o trabalho acontece. */
:root { --side-largura: 14.5rem; }
.adm-item { padding: 7px var(--space-3); gap: var(--space-3); font-size: var(--text-sm); }
.adm-item svg { width: 17px; height: 17px; }
.adm-side { padding: var(--space-4) var(--space-3); }
.adm-side__nav { gap: 1px; }
.adm-side__marca { font-size: var(--text-lg); }

/* --- Cartões e quadros ----------------------------------------------------
   Os números do painel eram o elemento mais pesado de uma tela que existe
   para mostrar o que precisa de atenção. Agora eles informam sem gritar. */
.bo-numeros { gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.bo-numero { padding: var(--space-4); gap: 1px; }
.bo-numero__n { font-size: 1.45rem; }
.bo-numero__r { font-size: var(--text-xs); }
.bo-quadro { gap: var(--space-3); }
.bo-cartao { padding: var(--space-4); gap: 2px; }
.bo-passos { gap: var(--space-2); }
.bo-passo { padding: var(--space-4); }
.bo-lista { gap: var(--space-3); }
.bo-check li { padding: var(--space-2) 0; }
.bo-item-novo { gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); }
.bo-funil-lista th, .bo-funil-lista td { padding-block: var(--space-2); }

/* --- Painéis do pedido ---------------------------------------------------- */
.bo-painel + .bo-painel { margin-top: var(--space-8); }

/* A linha abaixo do título de um pedido, orçamento ou cliente não é texto
   corrido: é ficha. Ela não obedece à medida de leitura de 60ch e não deixa
   um número de documento quebrar no meio do hífen. */
.adm-head p.bo-meta {
  max-width: none;
  overflow-wrap: normal;
}
.adm-head p.bo-meta a { white-space: nowrap; }

/* A lista do funil é a tabela mais larga do sistema — nove colunas, quase
   todas editáveis. Aqui o respiro vem do espaço ENTRE as colunas, não da
   moldura: com o padding lateral da tabela geral ela estourava a largura do
   bloco e passava a rolar de lado, que é o oposto de folgado. */
.bo-funil-lista { min-width: 62rem; }
.bo-funil-lista th, .bo-funil-lista td { padding-inline: var(--space-3); }
.bo-funil-lista th:first-child, .bo-funil-lista td:first-child { padding-inline-start: var(--space-4); }
.bo-funil-lista th:last-child, .bo-funil-lista td:last-child { padding-inline-end: var(--space-4); }
.bo-funil-lista td:first-child { min-width: 12rem; }
.bo-funil-lista td:nth-child(2) { min-width: 9rem; }
.bo-funil-lista td:nth-child(7) { min-width: 8.5rem; }
.bo-funil-lista .bo-select-etapa { min-width: 8rem; }

/* ==========================================================================
   Catálogo e importação
   ========================================================================== */

/* Código do módulo: ele viaja em arquivo, então se lê caractere a
   caractere. Monoespaçado é o que evita confundir 0 com O na conferência. */
.bo-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--forest-1000, #08170f);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 6px;
  white-space: nowrap;
}

/* Blocos que ficam fechados até serem precisos. O formulário de digitar
   continua sendo o caminho à vista; estes dois são atalhos. */
.bo-atalho {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--forest-900);
}
.bo-atalho > summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display), sans-serif;
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.bo-atalho > summary:hover { color: var(--accent); }
.bo-atalho[open] > summary { border-bottom: 1px solid var(--border); }
.bo-atalho > *:not(summary) { padding-inline: var(--space-5); }
.bo-atalho > *:last-child { padding-bottom: var(--space-5); }
.bo-atalho .adm-bloco__intro { margin-top: var(--space-4); }

/* --- A linha do móvel ----------------------------------------------------
   Três perguntas, três colunas: o que é, o que tem de material e quanto
   custa. O código é o que se procura, então ele é o nome da linha; a medida
   vem embaixo, em número alinhado, e o acabamento é a terceira camada. */
.bo-item__oque { line-height: 1.35; }
.bo-item__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.bo-item__codigo {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: 0.02em; color: var(--text);
}
.bo-item__nome { color: var(--text-soft); }
/* Quantas vezes este móvel se repete. Fica junto do nome porque é dele. */
.bo-item__vezes {
  font-size: var(--text-xs); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bo-item__medida {
  display: block; margin-top: 2px;
  font-size: var(--text-sm); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* Medidas e acabamento embaixo da descrição do item: conferência, não
   proposta. O cliente nunca vê esta linha. */
.bo-item__ficha {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* O material e o valor: o número em cima, o que ele é embaixo. */
.bo-item__material, .bo-item__valor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-item__material span, .bo-item__valor span { display: block; color: var(--text-soft); }
.bo-item__valor span { font-size: var(--text-base); }
.bo-item__material small, .bo-item__valor small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
/* "—" e não "R$ 0,00": zero se lê como de graça, e o que há é falta de preço. */
.bo-item__vazio { color: var(--text-muted); }
/* A soma dos móveis de um desenho, no pé da tabela dele. */
.bo-itens__soma th, .bo-itens__soma td { padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }
.bo-itens__soma th { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.bo-itens__soma .bo-item__valor span { color: var(--accent); font-family: var(--font-display); }

/* Bordas com fita, girar e usinar: seis interruptores curtos que só fazem
   sentido lado a lado, como aparecem na lista da central. */
.bo-bordas { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Lista de peças: números conferidos em coluna, então tabulares e densos.
   Aqui a leitura é de conferência, não de proposta. */
.bo-corte { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.bo-corte th, .bo-corte td { padding: var(--space-2); white-space: nowrap; vertical-align: top; }

/* As duas frases compridas quebram em duas linhas em vez de esticar a
   tabela: a chapa e a fita se leem quebradas, e a ponta direita (C1, C2,
   L1, L2, Usinar) é o que não pode sair da tela. */
.bo-corte td:nth-child(4) { white-space: normal; max-width: 22ch; line-height: 1.3; }
.bo-corte td:nth-child(8) { white-space: normal; max-width: 16ch; line-height: 1.3; }
/* A funcao tambem tem teto: a etiqueta mais o nome mais o feitio nao podem
   comer a largura das colunas que a central confere. */
.bo-corte td:nth-child(1) { white-space: normal; max-width: 26ch; line-height: 1.35; }
.bo-corte th:nth-child(4), .bo-corte th:nth-child(8) { white-space: normal; }
/* O cliente é o mesmo em todas as linhas: ele está ali porque a central
   pede a coluna, não porque se lê dezenove vezes. */
.bo-corte td:nth-child(3) { color: var(--text-muted); }
/* As marcas de X: centradas e no dourado da casa, que é o que o olho
   procura quando confere fita. */
.bo-corte th:nth-child(7), .bo-corte td:nth-child(7),
.bo-corte th:nth-child(n+9), .bo-corte td:nth-child(n+9) { text-align: center; }
.bo-corte td:nth-child(7), .bo-corte td:nth-child(n+9) { color: var(--accent); font-weight: 700; }

/* A tabela rola DENTRO da moldura dela, e o cabeçalho fica: dezenove linhas
   adiante, "X" numa coluna sem nome não quer dizer nada. A moldura precisa
   ser a janela — é nela que o cabeçalho se apoia; pela página ele não
   grudava, porque quem tem overflow é ela. */
.bo-corte-moldura { max-height: 70vh; overflow: auto; }

/* De onde a lista vem: recado, não alarme. Fica no fio da esquerda, em
   letra miúda, acima do resumo. */
.bo-corte__origem {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--border-strong); border-radius: var(--radius);
  background: rgba(227, 201, 154, 0.05);
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); max-width: 86ch;
}
.bo-corte__origem strong { color: var(--text-soft); }

/* A barra: o que se mexe à esquerda, o que se leva à direita. */
.bo-corte__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.bo-corte__iniciais { display: flex; align-items: center; gap: var(--space-2); }
.bo-corte__iniciais label {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
/* Seis letras de campo para doze de limite: "CM" não precisa de 16rem. */
.bo-corte__iniciais input { width: 6rem; }
.bo-corte__levar { display: flex; align-items: center; gap: var(--space-2); }
.bo-corte__dica {
  margin: 0 0 var(--space-4); max-width: 86ch;
  font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted);
}
.bo-corte__dica strong { color: var(--text-soft); }
.bo-corte thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--forest-900); box-shadow: inset 0 -1px 0 var(--border-strong);
}
.bo-pecas td { vertical-align: middle; }

/* Coluna de grade não encolhe abaixo do conteúdo dela por padrão, então um
   campo com texto longo empurra a página inteira para o lado. Aqui as telas
   têm formulário e tabela lado a lado o tempo todo: min-width zero deixa a
   coluna caber, e quem rola de lado é a tabela, dentro da moldura dela. */
.adm-grid-detalhe > * { min-width: 0; }

/* Três medidas de mesmo peso. O .adm-linha--3 geral é 2fr 1fr 1fr, pensado
   para uma linha com um campo dominante; aqui os três são milímetros e o
   estreito não mostrava nem o próprio valor. */
.bo-linha-medidas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-linha-medidas input { width: 100%; }

/* --- Duas linhas de digitação em série que não cabem na grade do item --- */

/* Peça do módulo: função, quantidade, duas fórmulas, espessura e papel.
   As bordas e o botão ocupam a linha inteira embaixo — como chips espremidos
   numa coluna estreita, empilhavam um por linha e a tela virava uma escada. */
.bo-peca-nova {
  display: grid; gap: var(--space-3); align-items: end;
  padding-top: var(--space-5); border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .bo-peca-nova { grid-template-columns: minmax(9rem, 1.4fr) 5rem 7rem 7rem 7rem 7rem; }
}
.bo-peca-nova > .adm-campo:has(.bo-bordas),
.bo-peca-nova > .adm-btn,
.bo-peca-nova > button { grid-column: 1 / -1; }
.bo-peca-nova > button { justify-self: start; }

/* Lançar do catálogo: ambiente, módulo, três medidas, dois acabamentos e
   quantidade. São oito campos, então a grade quebra em duas faixas. */
.bo-catalogo-novo {
  display: grid; gap: var(--space-3); align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .bo-catalogo-novo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bo-catalogo-novo > button { justify-self: start; }
.bo-catalogo-novo .adm-salvo { grid-column: 1 / -1; }

/* Um campo e um botão, lado a lado, do tamanho do que carregam. */
.bo-inline { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.bo-inline .adm-campo { flex: 0 1 16rem; }
.bo-inline .adm-btn { flex: 0 0 auto; }

/* A linha em correção. O fundo mais claro é o que diz "você está mexendo
   nesta e não nas outras" numa tabela de vinte linhas parecidas. */
.bo-item-editando > td { background: var(--forest-1000, #08170f); padding: var(--space-5); }
.bo-item-editando .adm-form { margin: 0; }

/* ==========================================================================
   Modal de cadastro

   O <dialog> nativo é usado de propósito: ele já traz foco preso dentro,
   Esc para fechar e fundo inerte, que é trabalho que ninguém escreve bem
   à mão. Sem JavaScript ele aparece como um bloco comum no topo da
   página — feio, mas inteiro, que é o que importa.
   ========================================================================== */
.bo-modal {
  border: 0; padding: 0; background: transparent; color: inherit;
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  /* O navegador impoe um limite proprio de altura ao <dialog>, diferente do
     da caixa de dentro. Discordando os dois, quem cortava era o de fora. */
  max-height: calc(100vh - 4rem);
}
.bo-modal::backdrop { background: rgba(8, 24, 20, 0.74); }
.bo-modal__caixa {
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 4rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.bo-modal__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.bo-modal__topo h2 {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent);
}
.bo-modal__x {
  flex: 0 0 auto;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); text-decoration: none; font-size: 1.1rem; line-height: 1;
}
.bo-modal__x:hover { color: var(--accent); border-color: var(--accent); }
/*
 * O CORPO ROLA, E NAO TRANSBORDA.
 *
 * Num flex em coluna, um item so encolhe abaixo do tamanho do conteudo dele
 * se puder: sem min-height 0, o overflow-y nao tem efeito nenhum — a caixa
 * estoura o max-height e o fim do formulario, que e onde moram os botoes,
 * fica para fora. Em tela baixa isso lia como "o modal cortou".
 */
.bo-modal__corpo { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bo-modal__corpo > .adm-form { margin: 0; }

/* Sem script: o diálogo abre no fluxo da página. Sem fundo escuro e sem
   sombra flutuante, porque aqui ele é um bloco, não uma camada. */
.bo-modal[open]:not(:modal) { margin: 0 0 var(--space-5); width: 100%; }
.bo-modal[open]:not(:modal) .bo-modal__caixa { max-height: none; box-shadow: none; }

/* ==========================================================================
   A BARRA DOS CINCO PASSOS

   Grudada no alto: ela e o leme da tela. A esquerda os cinco passos, a
   direita o total — que e o que se procura depois de mexer em qualquer
   coisa, e por isso nao pode morar dentro de um passo.
   ========================================================================== */
.bo-passos {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; gap: var(--space-4);
  margin: 0 0 var(--space-4); padding: 0 var(--space-3);
  background: var(--forest-950, var(--bg));
  border-bottom: 1px solid var(--border);
}
.bo-passos__lista { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; }

.bo-passo {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  transition: border-color .12s, color .12s;
  /* Sem moldura: a regra geral de .bo-passo (as etapas do pedido) poe borda, fundo e canto
     em cada passo; aqui so a linha de baixo diz qual e o ativo. */
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted); text-decoration: none; cursor: pointer;
}
.bo-passo__n {
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
}
.bo-passo__nome { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-soft); }
/*
 * O dizer do passo QUEBRA, nao corta.
 *
 * Ele e o que distingue um passo do outro, e "margem, desconto, condiç…"
 * nao distingue nada. Texto essencial cortado com reticencias so para as
 * caixas ficarem iguais e defeito, nao arrumacao.
 */
.bo-passo small {
  font-size: var(--text-xs); color: var(--text-muted);
  white-space: normal; text-wrap: balance; line-height: 1.3;
}
.bo-passo:hover { color: var(--text); }
.bo-passo:hover .bo-passo__nome { color: var(--text); }
.bo-passo.is-ativa { border-bottom-color: var(--accent); }
.bo-passo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bo-passo.is-ativa .bo-passo__n,
.bo-passo.is-ativa .bo-passo__nome { color: var(--accent); }

/* Numa linha só: a barra tem a altura de um passo, não a de três linhas de total. */
.bo-passos__total {
  flex: none; display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-left: 1px solid var(--border);
}
.bo-passos__total span {
  font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.bo-passos__total strong {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Sem preço: a palavra no lugar do zero, e a conta de hoje em miúdo embaixo. */
.bo-passos__total strong.bo-passos__total--sem { font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; }
.bo-passos__hoje { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Em tela estreita o dizer de cada passo sai: ficam o número e o nome. */
@media (max-width: 980px) {
  .bo-passo small { display: none; }
}

/* ==========================================================================
   UM PASSO POR VEZ

   Sem JavaScript nada disto vale e a página continua inteira e rolável —
   os links da barra são âncoras de verdade. A classe entra pelo JS.
   ========================================================================== */
.bo-orc--abas.js-abas { display: block; }
/*
 * A aba ESCONDE o que nao esta ativo, e so isso.
 *
 * Dizer "display: block" no painel ativo parece inofensivo e nao e: esse
 * seletor vale (0,3,0) e atropela qualquer regra de layout com menos peso —
 * foi assim que ele engoliu o grid de duas colunas do passo 4, que vale
 * (0,1,0). Nao mandando no display do ativo, cada passo fica com o layout
 * que o proprio passo pediu.
 */
.bo-orc--abas.js-abas [data-passo]:not(.is-ativo) { display: none; }

/* O cabeçalho da seção repetia a aba, palavra por palavra, logo abaixo dela. */
.bo-orc--abas.js-abas .bo-secao__cabeca { display: none; }


/* ==========================================================================
   O SUBITEM: a ferragem e o terceiro, linhas da mesma tabela

   Eram uma faixa esticada por cima de todas as colunas, com o valor
   empurrado para a direita pelo flex — e o número caía num alinhamento
   diferente do custo do móvel logo acima. Agora são <tr> com as mesmas
   células: o número do filho cai exatamente embaixo do número do pai.

   A CÉLULA CONTINUA CÉLULA. display:flex num <td> o tira do modelo de
   tabela e o colspan deixa de valer — foi assim que o valor do filho foi
   parar na coluna do material. Quem alinha é o conteúdo, em linha.

   O que marca o filho é o recuo e o fio da primeira célula.
   ========================================================================== */
.bo-subitem > td { padding-top: 4px !important; padding-bottom: 4px !important; }
.bo-subitem__oque { padding-left: var(--space-5) !important; white-space: nowrap; }

/* O fio curto que diz "isto pertence ao móvel de cima". */
.bo-subitem__marca {
  display: inline-block; vertical-align: middle;
  width: 2px; height: 1.7em; margin-right: var(--space-2);
  background: var(--border); border-radius: 1px;
}
.bo-subitem__oque svg {
  display: inline-block; vertical-align: middle;
  width: 1rem; height: 1rem; margin-right: var(--space-2); color: var(--text-muted);
}
.bo-subitem__texto {
  display: inline-flex; flex-direction: column; gap: 1px;
  vertical-align: middle; min-width: 0; white-space: normal;
}
.bo-subitem__texto strong { font-weight: 600; color: var(--text-soft); font-size: var(--text-sm); }
.bo-subitem__texto small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-subitem__custo { font-variant-numeric: tabular-nums; color: var(--text-soft); white-space: nowrap; }
.bo-subitem__acao form { margin: 0; }
.bo-subitem__custo--falta { color: var(--danger); font-size: var(--text-xs); }
.bo-subitem--novo > td { padding-top: 2px !important; }

/* A COMPOSIÇÃO DOBRADA. O botão na linha do móvel traz o resumo (chapa ·
   fita · ferragem · fixação · mão de obra · terceiro, com os valores) e
   a seta; as linhas filhas só aparecem abertas. Sem script, ficam à vista. */
.bo-item__dobra {
  display: flex; align-items: flex-start; gap: var(--space-2); max-width: 100%;
  margin: var(--space-2) 0 0; padding: 2px 6px 2px 4px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--text-muted); font: inherit; font-size: var(--text-xs); text-align: left; line-height: 1.4;
  cursor: pointer; transition: color .12s, border-color .12s;
}
.bo-item__dobra:hover { color: var(--text-soft); border-color: var(--border); }
.bo-item__dobra:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-item__dobra-seta {
  flex: none; width: 0; height: 0; margin-top: .45em;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.bo-item__dobra[aria-expanded="true"] .bo-item__dobra-seta { transform: rotate(90deg); }
.bo-item__dobra[aria-expanded="true"] { color: var(--text-soft); }
.bo-item__resumo { min-width: 0; }
.bo-item__falta { display: block; font-size: var(--text-xs); color: var(--danger); font-weight: 400; }
/* Com script, as filhas nascem dobradas; a classe no tbody é quem diz que há script. */
.bo-itens.js-dobras tr.bo-subitem[data-de]:not(.is-aberta) { display: none; }
@media (prefers-reduced-motion: reduce) { .bo-item__dobra-seta { transition: none; } }

/* A coluna do custo do movel: mesmo peso e mesmo alinhamento do valor que a
   ferragem e o terceiro mostram embaixo dele. */
.bo-item__custo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-item__custo strong { color: var(--text); font-weight: 600; }
.bo-itens th.num, .bo-itens td.num { text-align: right; }

/* ==========================================================================
   O QUE UM TERCEIRO FAZ

   Pendurado embaixo do móvel a que pertence, recuado, para se ler como
   parte dele e não como outro item do orçamento.
   ========================================================================== */
.bo-terceiros > td { padding-top: 0 !important; }
.bo-terceiro {
  display: flex; align-items: center; gap: var(--space-2);
  margin-left: var(--space-4); padding: var(--space-2) 0;
  border-left: 2px solid var(--border); padding-left: var(--space-3);
  font-size: var(--text-sm);
}
.bo-terceiro svg { flex: none; width: 1rem; height: 1rem; color: var(--text-muted); }
.bo-terceiro__oque { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bo-terceiro__oque strong { font-weight: 600; color: var(--text-soft); }
.bo-terceiro__oque small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-terceiro__conta {
  margin-left: auto; font-size: var(--text-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bo-terceiro__cmv { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.bo-terceiro form { margin: 0; }

.bo-terceiro__novo {
  display: inline-flex; align-items: center; margin-left: var(--space-4); padding: 3px 10px;
  font-size: var(--text-xs); color: var(--text-soft); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: color .12s, border-color .12s;
}
.bo-terceiro__novo:hover { color: var(--accent); border-color: var(--accent); }
.bo-terceiro__novo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ==========================================================================
   AS REGRAS QUE FORMAM O PREÇO, NUMA FILEIRA

   Vieram da aba que deixou de existir. Soltas na grade de duas colunas do
   passo, a auto-colocação jogava cada uma num canto e a tabela perdia a
   largura; aqui elas ocupam a fileira inteira, acima dela.
   ========================================================================== */
.bo-preco__regras { margin-bottom: var(--space-3); }
.bo-preco__regras-grade { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); }
.bo-preco__regras-grade > * { flex: 1 1 18rem; margin: 0; }
/* A margem do serviço vinha como bloco dentro do bloco: sem a segunda moldura. */
.bo-preco__regras-grade > .adm-bloco { border: 0; padding: 0; background: transparent; box-shadow: none; }
/* O interruptor da chapa é de uma linha; o campo da margem tem três. */
.bo-preco__regras .bo-orc__opcao { display: flex; align-items: center; }
.bo-preco__regras .bo-orc__opcao-botao { height: 100%; }
.bo-regra-servico .bo-servico__fecho { margin: 0; }

/* Na grade de duas colunas do passo: o número, o botão que o grava e as
   regras na coluna da esquerda, de cima para baixo; as condições na direita,
   ao lado de tudo. */
@container coluna (min-width: 1000px) {
  .bo-secao--preco > .bo-preco__regras { grid-column: 1; grid-row: 2; }
  .bo-secao--preco > #fechamento      { grid-column: 1; grid-row: 3; }
  .bo-secao--preco > #conta-hoje      { grid-column: 1; grid-row: 4; }
  .bo-secao--preco > #cronograma      { grid-column: 1; grid-row: 5; }
  .bo-secao--preco > .bo-falta-aprovar { grid-column: 1; grid-row: 6; }
  .bo-secao--preco > #decisoes        { grid-column: 2; grid-row: 2 / span 5; }
}
.bo-preco__regras .bo-orc__opcao--itens { margin: 0; }
/* min-width 0: a legenda do botão é de uma linha, e sem isto o mínimo do formulário era a frase inteira — duas chaves não cabiam lado a lado. */
.bo-preco__regras-grade > .bo-orc__opcao { flex: 1 1 14rem; min-width: 0; }
.bo-preco__regras-grade > .bo-orc__opcao .bo-orc__opcao-botao { min-width: 0; }
.bo-preco__regras-grade > .bo-regra-servico { flex: 1 1 100%; }
/* O interruptor da chapa traz a dica das chapas embaixo: ocupa a fileira inteira e quebra a linha. */
.bo-preco__regras-grade > #opcao-chapa { flex: 1 1 100%; flex-wrap: wrap; }
.bo-preco__regras-grade > #opcao-chapa .bo-orc__opcao-botao { height: auto; }
.bo-preco__regras-grade > #opcao-chapa .bo-orc__opcao-form { flex: 1 1 100%; margin: 0; }
.bo-preco__regras-grade > #opcao-chapa .bo-chapas-dica { flex: 1 1 100%; }
.bo-regra-servico .bo-servico__fecho .adm-campo { max-width: 22rem; }

/* ==========================================================================
   A INSTALAÇÃO E O TRANSPORTE, UMA LINHA CADA

   Mesmo gesto do terceiro: a linha diz o que está definido e quanto dá, e o
   lápis abre o modal onde se mexe. Os dois quadros de meia tela com os modos
   e os campos saíram daqui e moram lá dentro.
   ========================================================================== */
.bo-servico__linhas { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-3); }

.bo-linha-servico {
  display: grid; align-items: center; gap: 0 var(--space-3);
  grid-template-columns: auto minmax(5.5rem, auto) 1fr auto auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--text-sm);
}
.bo-linha-servico__nome { font-weight: 600; color: var(--text-soft); }
/* De que jeito se cobra: o detalhe, que não disputa com o nome nem com o valor. */
.bo-linha-servico__como { color: var(--text-muted); font-size: var(--text-xs); min-width: 0; }
.bo-linha-servico__valor { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.bo-linha-servico .bo-chave { margin: 0; }

/* O que falta ocupa a linha inteira, embaixo: é aviso, não coluna. */
.bo-linha-servico__falta {
  grid-column: 2 / -1; margin-top: 2px;
  font-size: var(--text-xs); color: var(--danger);
}

/* Desligado continua legível e para de pedir atenção. */
.bo-linha-servico--off { opacity: .6; }
.bo-linha-servico--off:hover,
.bo-linha-servico--off:focus-within { opacity: 1; }

/* Dentro do modal o lado perde a borda: a caixa do modal já é a borda. */
.bo-servico__lado--modal { border: 0; padding: 0; margin: 0; }

/* ==========================================================================
   A CHAVINHA DO SERVIÇO

   Interruptor de verdade: o trilho mostra o estado sem precisar ler, e o
   texto ao lado diz o que o estado significa nesta obra. Desligado, o lado
   inteiro esmaece — o que está apagado não pede atenção.
   ========================================================================== */
.bo-chave { margin: 0 0 var(--space-3); }
.bo-chave__botao {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 0; border: 0; background: none;
  color: var(--text-muted); font: inherit; font-size: var(--text-xs);
  cursor: pointer; min-height: 24px;
}
.bo-chave__trilho {
  flex: none; position: relative; width: 30px; height: 17px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--forest-1000, transparent);
  transition: background-color .14s, border-color .14s;
}
.bo-chave__trilho::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--text-muted); transition: transform .14s, background-color .14s;
}
.bo-chave__botao.is-ligada { color: var(--text-soft); }
.bo-chave__botao.is-ligada .bo-chave__trilho {
  border-color: var(--accent); background: rgba(227, 201, 154, 0.18);
}
.bo-chave__botao.is-ligada .bo-chave__trilho::after {
  transform: translateX(13px); background: var(--accent);
}
.bo-chave__botao:hover { color: var(--text); }
.bo-chave__botao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* O lado desligado continua lá, e para de pedir atenção. */
.bo-servico__lado--off { opacity: .55; }
.bo-servico__lado--off:hover,
.bo-servico__lado--off:focus-within { opacity: 1; }

/* ==========================================================================
   O QUE FALTA PARA APROVAR

   Travar sem avisar é armadilha: a pendência aparece ao lado da chave que
   a criou e ao lado do botão que ela bloqueia.
   ========================================================================== */
.bo-falta-aprovar {
  margin: var(--space-3) 0 0; padding: var(--space-3);
  border: 1px solid var(--danger); border-radius: var(--radius);
  background: rgba(226, 145, 125, 0.07);
  font-size: var(--text-xs); color: var(--text-soft);
}
.bo-falta-aprovar strong { display: block; margin-bottom: 4px; color: var(--danger); }
.bo-falta-aprovar ul { margin: 0; padding-left: 1.1em; }
.bo-falta-aprovar li + li { margin-top: 2px; }

/* ==========================================================================
   O CABECALHO DEVOLVE A TELA

   Em 1366×768: aviso 30 + ficha 137 + estado 46 + abas 104 = 317px de
   enfeite antes do trabalho. 41% da tela para dizer de quem é o orçamento —
   uma informação que não muda enquanto se trabalha nele.

   Nada some: a ficha fica numa linha corrida, o estado entra nela, e a
   barra de passos põe o número ao lado do nome em vez de em cima.
   ========================================================================== */

/* --- O cabeçalho em um andar --- */
.bo-orc-topo {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.bo-orc-topo__quem { flex: 1 1 24rem; min-width: 0; }
.bo-orc-topo__volta {
  font-size: var(--text-xs); color: var(--text-muted); text-decoration: none;
  transition: color .12s;
}
.bo-orc-topo__volta:hover { color: var(--accent); }
.bo-orc-topo h1 {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: 2px 0 0; font-family: var(--font-serif); font-weight: 500;
  font-size: var(--text-xl); line-height: 1.1; color: var(--text);
}
.bo-orc-topo h1 small { font-size: .55em; color: var(--text-muted); }
.bo-orc-topo h1 .bo-etiqueta { transform: translateY(1px); }
/* A ficha é uma frase: o título em peso, o cliente como link, o resto em cinza. */
.bo-orc-topo__linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2);
  margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-soft);
}
.bo-orc-topo__linha strong { color: var(--text); font-weight: 600; }
.bo-orc-topo__linha a { color: var(--text-soft); }
.bo-orc-topo__linha a:hover { color: var(--accent); }
.bo-orc-topo__sep, .bo-orc-topo__miudo { color: var(--text-muted); }
.bo-orc-topo__editar {
  display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-1);
  padding: 2px 7px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--text-xs); color: var(--text-muted); text-decoration: none;
  transition: color .12s, border-color .12s;
}
.bo-orc-topo__editar:hover { color: var(--accent); border-color: var(--border-strong); }
.bo-orc-topo__editar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-orc-topo__editar svg { width: 13px; height: 13px; }
/* À direita: o botão principal e o "Mais". */
.bo-orc-topo__acoes { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.bo-orc-topo__acoes form { margin: 0; }
.bo-mais > .bo-mais__botao--texto {
  width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px;
}
.bo-mais__botao--texto svg { width: 15px; height: 15px; }
.bo-orc-topo__mais .bo-mais__menu { min-width: 16rem; }
@media (max-width: 720px) {
  .bo-orc-topo__acoes { width: 100%; }
  .bo-orc-topo__acoes > *:first-child { flex: 1 1 auto; }
  .bo-orc-topo__acoes > form:first-child .adm-btn,
  .bo-orc-topo__acoes > a:first-child { display: flex; justify-content: center; width: 100%; }
}
/* A ficha dobrada: sem botão próprio, quem a abre é o lápis (ou a URL). */
/* A ficha mora fora de .bo-orc, mas é da mesma tela: a mesma densidade. */
.bo-orc-dados { margin: 0 0 var(--space-4); --campo-y: 6px; }
.bo-orc-dados .adm-campo input, .bo-orc-dados .adm-campo select, .bo-orc-dados .adm-campo textarea { padding: 6px var(--space-3); }
.bo-orc-dados .adm-form { gap: var(--space-3); }
.bo-orc-dados .adm-linha { gap: var(--space-3); }
.bo-orc-dados > summary { display: none; }
.bo-orc-dados .adm-bloco { margin: 0; }

/* --- O estado perde a caixa e vira uma linha da ficha --- */
.bo-orc-estado {
  margin: 0 0 var(--space-3); padding: 0;
  border: 0; background: none;
}

/* --- Os botões do topo encolhem: eles não são o trabalho --- */
.bo-orc-topo .adm-acoes .adm-btn {
  padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
}

/* --- A barra de passos: número AO LADO do nome --- */
.bo-passo {
  flex-direction: row; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-start;
  gap: 0 var(--space-2); padding: var(--space-2) var(--space-3);
}
.bo-passo__n {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid currentColor; font-size: 0.625rem; line-height: 1;
}
.bo-passo__nome { font-size: var(--text-sm); }
/* O dizer ocupa a linha de baixo inteira, e por isso nunca empurra o nome. */
.bo-passo small { flex: 1 0 100%; }
.bo-passos__total { padding-top: var(--space-2); padding-bottom: var(--space-2); }

/* ==========================================================================
   O CHAO DA LETRA

   --text-xs vale 12px, e a cascata entregava menos: 11px nos rótulos e nas
   dicas, e 9,17px nas unidades dentro do rótulo ("R$/m²", "R$/dia") — ali o
   <small> pega 0,8em de um pai que já tinha encolhido.

   Numa tela que se opera o dia inteiro, nove pixels se lê forçando. O chão
   volta a ser o token, e a unidade fica um degrau abaixo dele: menor que o
   rótulo, porque é subordinada, mas ainda legível.
   ========================================================================== */
.bo-orc .adm-campo label,
.bo-orc .adm-campo__dica,
.bo-orc .bo-avulsa__lados legend { font-size: var(--text-xs); }

/* A unidade dentro do rótulo: um degrau abaixo, e nunca em cima do 0,8em. */
.bo-orc .adm-campo label small { font-size: 0.6875rem; }

/* ==========================================================================
   O CLIQUE PRECISA RESPONDER

   Quatro tipos de botão trocavam de cor em 0ms. Sem transição não dá para
   ter certeza de que o clique pegou — e é por isso que se clica duas vezes.
   120ms é o suficiente para o olho ver e curto para não atrapalhar.
   ========================================================================== */
.bo-orc .adm-btn,
.bo-orc .bo-acao,
.bo-orc .bo-terceiro__novo,
.bo-orc .bo-acrescentar__item,
.bo-orc .bo-fecha a,
.bo-orc .adm-campo__dica a {
  transition: background-color .12s, border-color .12s, color .12s;
}

/* Quem pediu menos movimento ao sistema não leva nenhum. */
@media (prefers-reduced-motion: reduce) {
  .bo-orc *, .bo-orc *::before, .bo-orc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   TAMANHO MINIMO DE ALVO

   WCAG 2.2 AA pede 24x24 px de area para o que se aponta e clica. Medindo
   a tela, oito alvos estavam abaixo: os botoes de acao com 22px de altura,
   o "+ o que um terceiro faz" com 22 e o abridor do calendario com 18.

   Links dentro de uma frase ficam de fora: a propria norma os excetua, e
   engorda-los quebraria a linha de texto.

   So nesta pagina: .adm-btn mora em admin.css, que e copia por sistema.
   ========================================================================== */
.bo-orc .adm-btn,
.bo-orc .bo-acao,
.bo-orc .bo-terceiro__novo,
.bo-orc .adm-cal__abrir {
  min-height: 24px; min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* O texto do link continua alinhado a esquerda, so a area cresce. */
.bo-orc .bo-terceiro__novo { justify-content: flex-start; }

/* ==========================================================================
   DENSIDADE DE FERRAMENTA

   Esta página não se lê, se opera. O que vale aqui é quanta coisa cabe na
   tela ao mesmo tempo — não o conforto de leitura de um texto corrido.

   Preso a .bo-orc de propósito: as medidas originais vêm de admin.css, que
   é cópia por sistema, e valem para as telas que se leem uma vez por mês.
   ========================================================================== */

/* A largura é desta página, e não do backoffice inteiro: .adm-main limita
   em 1344px, o que é bom para uma tela de cadastro que se lê de cima a
   baixo e aperta a que se opera o dia todo. */
.adm-main:has(.bo-orc) { max-width: 1760px; }

/* O PASSO 4 EM DUAS COLUNAS, QUANDO A COLUNA COUBER.

   A tabela do preço e as condições respondem a mesma pergunta — por quanto
   vai sair — e empilhadas custam 1.280px. Lado a lado, a margem fica à vista
   enquanto se mexe no desconto, que era a ideia desde o começo.

   Quem decide é a coluna de trabalho, e não a janela: entre uma e outra há a
   barra lateral, o recheio e a coluna dos documentos. Preso à janela, isto
   partiu a tabela em 458px e jogou a coluna "Margem" para fora da caixa. */
.bo-orc__principal { container: coluna / inline-size; }
@container coluna (min-width: 1000px) {
  .bo-secao--preco {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-4);
  }
  .bo-secao--preco > .bo-secao__cabeca { grid-column: 1 / -1; grid-row: 1; }

  /*
   * NA COLUNA ESTREITA, UM CAMPO POR LINHA.
   *
   * .adm-linha--2 e --3 se abrem a partir de 720px DE JANELA, e janela nao e
   * o espaco que o campo tem: aqui a coluna das condicoes mede uns 390, e
   * tres campos lado a lado viravam rotulos partidos ao meio ("CONDICOES DE
   * PAGAMENTO" em duas linhas, "PRAZO DE ENTREGA" em duas).
   */
  .bo-secao--preco > #decisoes .adm-linha { grid-template-columns: 1fr; }
}

/*
 * UMA TABELA SÓ. Cabeçalho, corpo e rodapé eram três tabelas (display: table
 * em cada um, para a tabela rolar na horizontal): cada um calculava as
 * colunas sozinho, e CUSTO ficava num lugar, R$ 933,87 noutro. Agora a
 * tabela é uma, de colunas fixas — as de número com largura certa, a
 * primeira com o resto — e quem rola, se faltar largura, é a caixa em volta.
 */
.bo-fecha { table-layout: fixed; min-width: 38rem; }
.bo-fecha col.bo-fecha__c-num { width: 6.5rem; }
.bo-fecha col.bo-fecha__c-valor { width: 7.25rem; }
.bo-fecha col.bo-fecha__c-margem { width: 10.5rem; }
.bo-fecha th[scope="row"] { min-width: 0; overflow-wrap: anywhere; }
/* A linha do lucro, embaixo do Total: o selo, a explicação e o link, numa fileira que quebra só quando precisa. */
.bo-fecha__linha-lucro td { border-top: 0 !important; padding-top: 0; }
.bo-fecha__lucro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bo-fecha__lucro .bo-lucro-faixa { margin-top: 0; }
.bo-fecha__lucro-diz { flex: 1 1 14rem; font-size: var(--text-xs); color: var(--text-muted); }
.bo-fecha__lucro .bo-fecha__abrir { margin-top: 0; margin-left: auto; }
/* O rodapé da tabela diz o que cada número é, em miúdo, embaixo dele. */
.bo-fecha tfoot td.num small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); white-space: normal; }
.bo-fecha__abrir { display: inline-block; margin-top: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.bo-fecha__abrir:hover { color: var(--text); border-bottom-style: solid; }
/* A conta aberta, no modal: uma linha por parcela, o forte onde a conta fecha. */
.bo-conta-aberta th[scope="row"] { font-weight: 500; }
.bo-conta-aberta th[scope="row"] small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.bo-conta-aberta .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-conta-aberta__forte th, .bo-conta-aberta__forte td { font-weight: 600; color: var(--text); border-top: 1px solid var(--border-strong); }
.bo-conta-aberta__liquido td.num:first-of-type { color: var(--accent); font-size: var(--text-lg); }
.bo-conta-aberta__nota th, .bo-conta-aberta__nota td { color: var(--text-muted); }
.bo-conta-aberta tfoot th, .bo-conta-aberta tfoot td { border-top: 1px solid var(--border); padding-top: var(--space-3); }
#conta-aberta .bo-modal__caixa { max-width: 44rem; }
/* O CRONOGRAMA INTERNO, dobrado embaixo do prazo: o resumo no título, as etapas dentro. */
.bo-cronograma { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 0 var(--space-3); }
.bo-cronograma > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-soft); }
.bo-cronograma > summary::-webkit-details-marker { display: none; }
.bo-cronograma > summary small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.bo-cronograma > summary b { font-weight: 600; color: var(--accent); white-space: nowrap; }
.bo-cronograma.is-apertado > summary b { color: var(--warning, #d9a441); }
.bo-cronograma__tabela { margin-top: var(--space-2); width: 100%; table-layout: fixed; min-width: 28rem; }
.bo-cronograma__tabela col.bo-cronograma__c-h { width: 5.5rem; }
.bo-cronograma__tabela col.bo-cronograma__c-d { width: 7.5rem; }
.bo-cronograma__tabela col.bo-cronograma__c-ate { width: 7rem; }
.bo-cronograma__tabela th[scope="row"] { overflow-wrap: anywhere; }
#prazo-fabricacao .bo-modal__caixa { max-width: 44rem; }
.bo-cronograma-bloco .adm-btn { margin-top: var(--space-2); }
.bo-cronograma__tabela th[scope="row"] { font-weight: 500; }
.bo-cronograma__tabela th[scope="row"] small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.bo-cronograma__tabela .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-cronograma__soma th, .bo-cronograma__soma td { font-weight: 600; color: var(--text); border-top: 1px solid var(--border-strong); }
.bo-cronograma > p { padding-bottom: var(--space-2); }
.bo-cronograma-pedido.is-apertado .adm-bloco__intro strong { color: var(--warning, #d9a441); }
.bo-cronograma-bloco h2 small { display: block; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-top: 2px; }
.bo-cronograma-bloco .adm-bloco__intro strong { color: var(--accent); }
.bo-cronograma-bloco.is-apertado .adm-bloco__intro strong { color: var(--warning, #d9a441); }

/* OS DOIS SINS: o aceite do cliente e a análise do financeiro, lado a lado. */
.bo-aprovacoes__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
.bo-aprovacao { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--bg); }
.bo-aprovacao h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.bo-aprovacao h3 i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.bo-aprovacao.is-sim { border-color: var(--success, #7fb58f); }
.bo-aprovacao.is-sim h3 i { background: var(--success, #7fb58f); border-color: var(--success, #7fb58f); }
.bo-aprovacao.is-nao { border-color: var(--warning, #d9a441); }
.bo-aprovacao.is-nao h3 i { background: var(--warning, #d9a441); border-color: var(--warning, #d9a441); }
.bo-aprovacao__fato { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-soft); }
.bo-aprovacao__form { margin: 0; }
.bo-aprovacao__form .adm-campo { margin-bottom: var(--space-3); }
/* A ANÁLISE: uma linha por verificação, a bolinha diz dentro ou fora. */
.bo-analise { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; }
.bo-analise__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); padding-left: 1.1rem; position: relative; }
.bo-analise__item::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.bo-analise__item.is-ok::before { background: var(--success, #7fb58f); }
.bo-analise__item.is-fora::before { background: var(--danger); }
.bo-analise__item b { font-weight: 600; color: var(--text-soft); }
.bo-analise__item span { color: var(--text-muted); }
.bo-analise__item.is-fora span { color: var(--danger); }
.bo-analise__veredito { margin: 0 0 var(--space-3); font-weight: 600; font-size: var(--text-sm); }
.bo-analise__veredito.is-ok { color: var(--success, #7fb58f); }
.bo-analise__veredito.is-fora { color: var(--danger); }
/* A fila de Enviados: um cartão por orçamento, os indicadores em chips. */
.bo-enviados { display: grid; gap: var(--space-3); }
.bo-enviado { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: var(--space-3) var(--space-5); align-items: start; padding: var(--space-4) var(--space-5); }
.bo-enviado__quem h2 { margin: 0 0 2px; font-size: var(--text-lg); }
.bo-enviado__quem p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.bo-enviado__valor { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent); font-variant-numeric: tabular-nums; }
.bo-enviado__sins { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.bo-enviado__sins span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); }
.bo-enviado__sins span i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.bo-enviado__sins span.is-sim { color: var(--success, #7fb58f); border-color: var(--success, #7fb58f); }
.bo-enviado__sins span.is-sim i { background: var(--success, #7fb58f); }
.bo-enviado__sins span.is-nao { color: var(--warning, #d9a441); border-color: var(--warning, #d9a441); }
.bo-enviado__sins span.is-nao i { background: var(--warning, #d9a441); }
.bo-enviado__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-enviado__chips span { font-size: var(--text-xs); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.bo-enviado__chips span i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; }
.bo-enviado__chips span.is-ok { color: var(--text-soft); }
.bo-enviado__chips span.is-ok i { background: var(--success, #7fb58f); }
.bo-enviado__chips span.is-fora { color: var(--danger); border-color: var(--danger); }
.bo-enviado__chips span.is-fora i { background: var(--danger); }
.bo-enviado__veredito { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 600; }
.bo-enviado__veredito.is-ok { color: var(--success, #7fb58f); }
.bo-enviado__veredito.is-fora { color: var(--danger); }
.bo-enviado__acoes { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; min-width: 11rem; }
.bo-enviado__acoes form { margin: 0; display: contents; }
.bo-enviado__acoes input[type="text"] { width: 100%; }
@media (max-width: 860px) { .bo-enviado { grid-template-columns: 1fr; } .bo-enviado__acoes { min-width: 0; } }

/* O INDICADOR DO LUCRO: uma pílula com a bolinha na cor da faixa. */
.bo-lucro-faixa { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; color: var(--text-soft); }
.bo-lucro-faixa i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bo-lucro-faixa--abaixo { color: var(--danger); border-color: var(--danger); }
.bo-lucro-faixa--minimo { color: var(--warning, #d9a441); border-color: var(--warning, #d9a441); }
.bo-lucro-faixa--saudavel { color: var(--success, #7fb58f); border-color: var(--success, #7fb58f); }
.bo-lucro-faixa--alto { color: var(--accent); border-color: var(--accent); background: rgba(227, 201, 154, 0.08); }
.bo-fecha tfoot td.num .bo-lucro-faixa { display: inline-flex; }
.bo-lucro-faixa__diz { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); white-space: normal; }

/* Bloco que se dobra: fechado, o próprio título responde a pergunta. */
.bo-dobra--bloco > summary { cursor: pointer; list-style: none; }
.bo-dobra--bloco > summary::-webkit-details-marker { display: none; }
.bo-dobra--bloco > summary::after {
  content: '⌄'; margin-left: auto; color: var(--text-muted); line-height: 1;
  transition: transform .15s;
}
.bo-dobra--bloco[open] > summary::after { transform: rotate(180deg); }
.bo-dobra--bloco > summary:hover h2 { color: var(--accent); }
.bo-dobra--bloco[open] > summary { margin-bottom: var(--space-3); }

/* O campo: o rótulo cola na caixa, e a caixa emagrece. São 24 deles. */
.bo-orc .adm-campo { gap: 3px; }
.bo-orc { --campo-y: 6px; }
.bo-orc .adm-campo input,
.bo-orc .adm-campo select,
.bo-orc .adm-campo textarea { padding: 6px var(--space-3); }
/* Oito rem de altura para três linhas de observação era meia tela. */
.bo-orc .adm-campo textarea { min-height: 4.5rem; }
.bo-orc .adm-campo__dica { line-height: 1.4; }

/* Entre linhas do formulário e entre blocos. */
.bo-orc .adm-form { gap: var(--space-3); }
.bo-orc .adm-linha { gap: var(--space-3); }
.bo-orc .adm-bloco { padding: var(--space-3) var(--space-4); }
.bo-orc .bo-secao .adm-bloco { padding: var(--space-3) var(--space-4); }
.bo-orc .adm-bloco .adm-campo + .adm-campo,
.bo-orc .adm-bloco .adm-campo + .adm-linha,
.bo-orc .adm-bloco .adm-linha + .adm-campo { margin-top: var(--space-3); }
.bo-orc .adm-bloco__intro { margin-bottom: var(--space-3); font-size: var(--text-xs); }
.bo-orc .adm-acoes { margin-top: var(--space-2); }

/* Entre um passo e o seguinte: o fio colorido já separa, o vão não precisa. */
.bo-orc .bo-secao { margin-bottom: var(--space-4); }
.bo-orc .bo-secao__cabeca { margin-bottom: var(--space-3); }

/* Os interruptores de regra: três deles, um por passo. */
.bo-orc .bo-orc__opcao-botao { padding: var(--space-2) var(--space-3); }
.bo-orc .bo-orc__opcao-marca { width: 1rem; height: 1rem; }

/* A tabela do preço respira pela coluna, não pela linha. */
.bo-orc .bo-fecha th, .bo-orc .bo-fecha td { padding: var(--space-2); }

/* ==========================================================================
   O preço deste orçamento: a conta fechada, no fim da página

   Uma linha por ambiente, uma para a instalação, o total embaixo. Ao lado
   de cada número, em letra miúda, de onde ele veio — porque a pergunta
   dele nunca é só "quanto deu".
   ========================================================================== */
.bo-preco-fechado { margin-top: 0; }

.bo-fecha { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bo-fecha th, .bo-fecha td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; }
.bo-fecha thead th {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.bo-fecha th.num, .bo-fecha td.num { text-align: right; white-space: nowrap; }
.bo-fecha tbody tr + tr td { border-top: 1px solid var(--border); }
.bo-fecha tbody td { color: var(--text); }
.bo-fecha td small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }

/* A conta, embaixo do nome: é o que ele quer ver sem abrir nada. */
.bo-fecha__conta {
  display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted);
  line-height: 1.5;
}
.bo-fecha__falta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--danger); }

/* Margem negativa é a única notícia ruim desta tabela: ela se veste de
   notícia ruim. Sem isto, -14,6% sai com a mesma cor de +54,3%. */
.bo-fecha td.bo-fecha--perda, .bo-fecha td.bo-fecha--perda strong,
.bo-fecha td.bo-fecha--perda small { color: var(--danger); }

/* Rascunho não entra na soma — e precisa parecer que não entra. */
.bo-fecha--fora td { opacity: .55; }

.bo-fecha tfoot td { border-top: 2px solid var(--border); padding-top: var(--space-3); }
.bo-fecha tfoot .num strong { font-size: var(--text-lg); color: var(--accent); }

.bo-fecha__rodape { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* ==========================================================================
   Contador: gente e dias

   Número pequeno e inteiro não se digita, se aponta. O campo continua no
   meio — dá para digitar, e o formulário envia o mesmo de sempre —, mas
   quem usa só aperta − e +.
   ========================================================================== */
/* O pai e uma grade de duas colunas; estes tres ocupam a largura inteira,
   senao a conta vai parar ao lado dos contadores, numa tira de tres letras. */
.bo-servico__modo-campos > .bo-contadores,
.bo-servico__modo-campos > .bo-diaria-conta,
.bo-servico__modo-campos > .bo-diaria-outra { grid-column: 1 / -1; }
.bo-contadores { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.bo-contador-campo { margin: 0; flex: 0 0 auto; width: auto; }
.bo-contador { align-self: flex-start; display: inline-flex; align-items: stretch; border: 1px solid var(--border);
               border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.bo-contador__btn {
  width: 34px; border: 0; background: transparent; color: var(--text-soft);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.bo-contador__btn:hover { background: var(--surface-hover); color: var(--text); }
.bo-contador__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-campo .bo-contador__n, .bo-contador__n {
  width: 3.2em; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: transparent; color: var(--text); text-align: center;
  font-variant-numeric: tabular-nums; font-size: var(--text-base);
}
.bo-contador__n:focus { outline: none; background: var(--surface-hover); }

/* A conta da diária, enquanto se preenche. */
.bo-diaria-conta {
  margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.bo-diaria-conta b { color: var(--accent); font-size: var(--text-base); }
.bo-diaria-outra { margin-top: var(--space-3); }
.bo-diaria-outra > summary { font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }
.bo-diaria-outra__campos { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }

/* ==========================================================================
   Sugestões como botão

   O <datalist> parecia a escolha certa — é nativo, é acessível, é uma linha
   de HTML. Mas o popup dele é do navegador: não respeita a caixa de um
   modal, não se estiliza e não se reposiciona. Em janela baixa ele abria
   cortado e empurrava os botões do formulário para fora da vista.

   Para um punhado de valores conhecidos, botão à vista é melhor: cabe
   sempre, se vê sem precisar clicar no campo, e não impede digitar outro.
   ========================================================================== */
.bo-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.bo-sugestao {
  font-family: var(--font-display); font-size: var(--text-xs); line-height: 1;
  color: var(--text-soft); background: transparent;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 11px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.bo-sugestao:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.bo-sugestao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Título do bloco com uma ação à direita. Botão de acrescentar mora no topo
   do que ele acrescenta, e não no fim de uma tabela de vinte linhas. */
.bo-bloco-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.bo-bloco-topo h2 { margin: 0; }

/* ==========================================================================
   Ambientes do orçamento

   Cada ambiente é uma seção que abre e fecha: o nome, quanto soma, e
   dentro dele os itens e o que precisa para lançar mais um. Um orçamento
   de seis ambientes não cabe na tela aberto, e rolar procurando o closet
   é pior que clicar para fechar a cozinha.

   É <details> nativo, não script: fechar continua funcionando com o
   JavaScript desligado, e o teclado já funciona sem ninguém escrever nada.
   ========================================================================== */
.bo-ambiente {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--forest-1000, #08170f);
}
.bo-ambiente + .bo-ambiente { margin-top: var(--space-4); }
.bo-ambiente__corpo > *:not(summary) { padding-inline: var(--space-4); }
.bo-ambiente__corpo > *:last-child { padding-bottom: var(--space-4); }

.bo-ambiente__topo {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bo-ambiente__topo::-webkit-details-marker { display: none; }
.bo-ambiente__topo:hover .bo-ambiente__seta { color: var(--accent); }
.bo-ambiente__corpo[open] > .bo-ambiente__topo { border-bottom: 1px solid var(--border); }

/* A seta é desenhada em CSS para girar sozinha com o estado do <details>. */
.bo-ambiente__seta {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--text-muted);
  transform: translateY(-1px);
  transition: transform .15s ease;
}
.bo-ambiente__corpo[open] > .bo-ambiente__topo .bo-ambiente__seta { transform: rotate(90deg) translateX(-1px); }
@media (prefers-reduced-motion: reduce) { .bo-ambiente__seta { transition: none; } }

.bo-ambiente__topo h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
}
.bo-ambiente__conta { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bo-ambiente__conta strong { color: var(--accent); font-weight: 600; }
/* O custo ao lado do preço é fato, em cinza; sem preço, ele é o número que
   se tem, e vem em branco. "Sem preço" é o que pede ação: dourado. */
.bo-ambiente__custo { color: var(--text-muted); }
.bo-ambiente__custo b { color: var(--text); font-weight: 600; }
.bo-ambiente__sem { color: var(--accent); }
.bo-ambiente--rascunho .bo-ambiente__topo .bo-ambiente__custo b,
.bo-ambiente--rascunho .bo-ambiente__topo .bo-ambiente__sem { color: var(--text-muted); }

/* Rascunho: está aqui, não está na conta. O apagado é o aviso — quem bate
   o olho no total precisa ver de onde ele NÃO vem. */
.bo-ambiente--rascunho { border-style: dashed; }
.bo-ambiente--rascunho .bo-ambiente__topo h3 { color: var(--text-muted); }
.bo-ambiente--rascunho .bo-ambiente__topo .bo-ambiente__conta strong { color: var(--text-muted); }
.bo-etiqueta--rascunho { border-color: var(--text-muted); color: var(--text-muted); }

/* As ações do ambiente moram na barra do topo, à direita, por
   posicionamento — não dentro do <summary>, onde um clique nelas também
   abriria e fecharia a seção.

   Todas do mesmo tamanho e do mesmo peso: antes eram duas setas quadradas
   miúdas ao lado de três botões de larguras diferentes, uma delas vermelha,
   e a faixa parecia um resto de outra tela. Aqui elas são discretas até o
   ponteiro chegar; só o Apagar fica vermelho, e só no hover. */
.bo-ambiente__acoes {
  position: absolute;
  top: 0; right: 0;
  height: 2.5rem;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px;
  padding-right: var(--space-4);
  pointer-events: none;
}
.bo-ambiente__acoes > * { pointer-events: auto; }
.bo-ambiente__acoes > form { display: flex; }

.bo-acao {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.5rem;
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.bo-acao:hover { color: var(--accent); border-color: var(--border-strong); }
.bo-acao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Só ícone: todas quadradas e do mesmo tamanho. O nome de cada uma
   vive no title e no aria-label — desenho sem nome é adivinhação para
   quem usa leitor de tela e para quem chega na tela pela primeira vez. */
.bo-acao { width: 1.5rem; padding: 0; }
.bo-acao svg { width: 15px; height: 15px; display: block; }

/* Discretas até o ponteiro chegar — só onde HÁ ponteiro. No toque não há
   hover, e os ícones ficavam apagados para sempre; ali eles nascem acesos.
   Os da linha competiam com o nome e com o preço, que é o que se vem ler;
   no teclado, acendem ao receber o foco. */
@media (hover: hover) and (pointer: fine) {
  .bo-ambiente__acoes .bo-acao,
  .bo-linha-acoes .bo-acao { opacity: .45; transition: opacity .12s ease; }
  .bo-ambiente:hover .bo-ambiente__acoes .bo-acao,
  .bo-ambiente:focus-within .bo-ambiente__acoes .bo-acao,
  .adm-tabela tr:hover .bo-linha-acoes .bo-acao,
  .adm-tabela tr:focus-within .bo-linha-acoes .bo-acao,
  .bo-acao:focus-visible { opacity: 1; }
}

/* O "⋯" DO AMBIENTE: as cinco ações com nome, num menu. Mesmo desenho
   do Acrescentar, ancorado à direita, saindo do canto do botão. */
.bo-mais { position: relative; margin: 0; }
.bo-mais > summary { list-style: none; }
.bo-mais > summary::-webkit-details-marker { display: none; }
.bo-mais__botao { width: 1.75rem; height: 1.75rem; cursor: pointer; }
.bo-mais__botao svg { width: 17px; height: 17px; }
.bo-mais[open] > .bo-mais__botao { color: var(--accent); border-color: var(--border-strong); opacity: 1; }
.bo-mais__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; /* acima da barra dos passos (30), que e grudada */
  min-width: 15rem;
  padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 10px 28px -8px rgba(8, 24, 20, .7), 0 2px 6px rgba(8, 24, 20, .35);
  transform-origin: top right;
  animation: bo-acrescentar-abre .12s cubic-bezier(.2, .8, .2, 1);
}
.bo-mais.is-acima > .bo-mais__menu { top: auto; bottom: calc(100% + 4px); transform-origin: bottom right; animation-name: bo-acrescentar-abre-acima; }
@media (prefers-reduced-motion: reduce) { .bo-mais__menu { animation: none; } }
.bo-mais__menu form { margin: 0; }
.bo-mais__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0; border-radius: calc(var(--radius) - 2px); background: none;
  color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none;
  cursor: pointer; transition: background-color .1s, color .1s;
}
.bo-mais__item:hover { background: var(--surface-hover); }
.bo-mais__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bo-mais__item svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.bo-mais__item:hover svg { color: var(--accent); }
.bo-mais__item--perigo { color: var(--text-soft); }
.bo-mais__item--perigo:hover { color: var(--danger); }
.bo-mais__item--perigo:hover svg { color: var(--danger); }
.bo-acao--perigo:hover { color: var(--danger); border-color: var(--danger); }
/* Olho apagado: o ambiente está fora da conta, e o botão diz isso sozinho. */
.bo-acao--apagado { color: var(--text-muted); opacity: .65; }
.bo-acao--apagado:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .bo-acao { transition: none; } }

/* Nome comprido não corre por baixo do "⋯". */
.bo-ambiente__topo { padding-right: 3.5rem; }

/* Dentro da seção a tabela não repete a moldura nem a faixa de cabeçalho
   que a seção já dá. Sem isso o rótulo da primeira coluna encostava na
   borda da faixa colorida, e as três colunas de texto da seção — o
   cabeçalho da tabela, o rótulo do formulário e o campo — começavam cada
   uma num lugar. Agora todas partem da mesma linha. */
.bo-ambiente .adm-tabela-wrap { border: 0; border-radius: 0; background: transparent; }
.bo-ambiente .adm-tabela thead th { background: transparent; color: var(--text-muted); }
.bo-ambiente .adm-tabela th:first-child,
.bo-ambiente .adm-tabela td:first-child { padding-left: 0; }
.bo-ambiente .adm-tabela th:last-child,
.bo-ambiente .adm-tabela td:last-child { padding-right: 0; }
.bo-ambiente .bo-item-novo { margin-top: var(--space-3); padding-top: var(--space-3); }
@media (min-width: 860px) {
  .bo-ambiente .bo-item-novo { grid-template-columns: 1fr 5rem 5rem 8rem auto; }
}


/* Ações de uma linha de tabela. Alinhadas à direita e juntas, para a
   coluna não crescer e o olho não ter que atravessar espaço vazio até
   chegar nelas. */
.bo-linha-acoes {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 2px;
}
.bo-linha-acoes > form { display: flex; }

/* Lugar reservado onde a ação não existe: sem isto o botão Abrir de uma
   linha fica alinhado num lugar e o da linha de baixo em outro. */
.bo-acao--vazia { cursor: default; pointer-events: none; }

/* Aba de fechamento: total e decisão numa coluna estreita, porque é uma
   lista curta de números e dois botões — esticada na largura da tela ela
   vira uma faixa vazia com um valor perdido no canto. */
.bo-fechamento { max-width: 34rem; display: flex; flex-direction: column; gap: var(--space-5); }

/* O total no cabeçalho da página. Ele acompanha a rolagem junto com o título:
   a conta fica à vista enquanto se lança item lá embaixo, sem ter de subir
   até a seção do total para conferir. */
#cabecalho-total { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Painel que é uma coluna de leitura, não uma tela cheia. Formulário e
   lista esticados em 1300px viram linha de horizonte: o olho perde de onde
   volta, e um campo de CPF com 600px de largura não ajuda ninguém. */
.bo-painel--estreito > .adm-bloco,
.bo-painel--estreito > form.adm-bloco { max-width: 58rem; }

/* Abas escondem painel com o atributo hidden do HTML, e o navegador aplica
   display:none com a mesma força de uma classe qualquer. Basta uma classe
   com display no mesmo elemento para o painel escondido continuar na tela —
   foi o que aconteceu ao reaproveitar um nome de classe já usado. Isto
   fecha a porta para a próxima vez. */
[hidden] { display: none !important; }

/* A negociação de agora, dentro do bloco do funil: dois campos curtos e um
   botão, na mesma linha. É um apontamento, não um formulário. */
.bo-negociacao {
  display: grid; gap: var(--space-3); align-items: end;
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 720px) {
  .bo-negociacao { grid-template-columns: 1fr 9rem auto; }
}
.bo-negociacao .adm-salvo { grid-column: 1 / -1; }

/* "Na mesa": o número que o funil usa, e de onde ele veio. Fica no topo do
   bloco porque é a pergunta que se faz primeiro ao abrir a ficha. */
.bo-namesa {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.bo-namesa__r {
  font-family: var(--font-display); font-size: 0.6875rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-namesa__v { font-size: var(--text-lg); color: var(--accent); font-variant-numeric: tabular-nums; }
.bo-namesa__d { font-size: var(--text-xs); color: var(--text-muted); }

/* Etiquetas dos tipos de cadastro. Quem se conquista puxa para o dourado;
   quem fornece fica neutro — a diferença que importa na lista é entre o
   lado de vender e o lado de comprar. */
.bo-etiqueta--profissional { border-color: var(--accent-soft); color: var(--accent-soft); }
.bo-etiqueta--prestador,
.bo-etiqueta--fornecedor,
.bo-etiqueta--servico { border-color: var(--border-strong); color: var(--text-muted); }

/* --- Placar da ficha ------------------------------------------------------
   Os números que resumem o que aquela pessoa é aqui dentro: quanto trouxe,
   quanto se deve a ela, quantas etapas estão na mão dela. Cada tipo de
   cadastro tem o seu, com os números que fazem sentido para a função. */
.bo-placar {
  display: grid; gap: var(--space-3); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.bo-placar > div {
  padding: var(--space-3);
  background: var(--forest-1000);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bo-placar dt {
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.bo-placar dd {
  margin: 2px 0 0;
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* Só o que cobra ação fica em cor: dívida em aberto e etapa atrasada. */
.bo-placar dd.bo-placar--devendo { color: var(--accent); }

/* O que sai para o parceiro, ao lado do campo do percentual. */
.bo-parceria__valor {
  margin: 0; padding: 6px 0;
  min-height: 2.125rem;
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* --- Formas de pagamento --------------------------------------------------
   O dado que se lê com o celular na mão para fazer o PIX: a chave grande,
   em fonte de código, e o botão de copiar ao lado. */
.bo-contas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bo-conta {
  padding: var(--space-4);
  background: var(--forest-1000);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* A principal é a que o olho procura primeiro. */
.bo-conta.is-principal { border-color: var(--border-strong); }
.bo-conta__topo { display: flex; align-items: center; gap: var(--space-2); position: relative; padding-right: 6rem; }
.bo-conta__topo .bo-linha-acoes { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.bo-conta__chave { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 0; }
.bo-conta__rotulo {
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-conta__chave code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--text-sm); color: var(--accent);
  word-break: break-all;
}
.bo-conta__dados { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-3) 0 0; }
.bo-conta__dados dt {
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-conta__dados dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.bo-conta__titular, .bo-conta__nota {
  margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted);
}
.bo-conta__nota { font-style: italic; }

/* --- Blocos do cadastro, v2: fecham, e dizem de que setor são ------------
   O formulário inteiro aberto era uma página de rolar. Fechado, cada bloco
   vira uma linha com o resumo do que tem dentro — que é o que se quer ler
   nove em cada dez vezes que a ficha é aberta.

   A cor continua sendo a função do dado; a tag ao lado diz o setor, que é
   outra pergunta: "quem cuida disso". */
.bo-grupo {
  --grupo: var(--accent);
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border);
  border-left: 2px solid var(--grupo);
  border-radius: var(--radius);
  background: var(--forest-1000);
  transition: border-color .16s ease, background-color .16s ease;
}
.bo-grupo:last-of-type { margin-bottom: var(--space-5); }
.bo-grupo[open] { border-color: var(--border-strong); border-left-color: var(--grupo); }

.bo-grupo__topo {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bo-grupo__topo::-webkit-details-marker { display: none; }
.bo-grupo__topo:hover { background: rgba(227, 201, 154, 0.04); }
.bo-grupo__topo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius); }

.bo-grupo__nome {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--grupo);
}
/* A tag do setor: quem cuida daquele dado. */
.bo-grupo__setor {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--grupo) 40%, transparent);
  border-radius: 999px;
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--grupo);
  background: color-mix(in srgb, var(--grupo) 10%, transparent);
  white-space: nowrap;
}
/* O resumo ocupa o resto da linha e some quando o bloco abre: aberto, o
   conteúdo é a resposta, e repetir vira ruído. */
.bo-grupo__resumo {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
  font-size: var(--text-xs); color: var(--text-muted);
  transition: opacity .16s ease;
}
.bo-grupo[open] .bo-grupo__resumo { opacity: 0; }

/* A setinha, desenhada em CSS: um chevron que gira ao abrir. */
.bo-grupo__topo::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid var(--grupo);
  border-bottom: 1.5px solid var(--grupo);
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .7;
  transition: transform .18s ease;
}
.bo-grupo[open] .bo-grupo__topo::after { transform: rotate(225deg) translate(-2px, -2px); }

.bo-grupo__corpo { padding: 0 var(--space-4) var(--space-4); }
.bo-grupo__corpo > *:last-child { margin-bottom: 0; }
.bo-grupo__link { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.bo-grupo__link strong { color: var(--text-soft); font-weight: 600; }

.bo-grupo--identidade { --grupo: #e3c99a; }   /* o dourado da casa */
.bo-grupo--contato    { --grupo: #93bda4; }   /* verde-sálvia */
.bo-grupo--fiscal     { --grupo: #cf9b86; }   /* cobre */
.bo-grupo--onde       { --grupo: #8fadc4; }   /* azul-aço */
.bo-grupo--perfil     { --grupo: #c9a3bd; }   /* rosa-antigo: quem é a pessoa */
.bo-grupo--marketing  { --grupo: #b3a3cc; }   /* lilás: por onde ela chegou */
.bo-grupo--notas      { --grupo: #9aa39d; }   /* neutro: anotação não é dado */

/* Uma insinuação do tom no fundo, fraca o bastante para não virar cor. */
@supports (background: color-mix(in srgb, red 5%, transparent)) {
  .bo-grupo { background: color-mix(in srgb, var(--grupo) 4%, var(--forest-1000)); }
  .bo-grupo[open] { background: color-mix(in srgb, var(--grupo) 7%, var(--forest-1000)); }
}

/* O bloco desliza ao abrir, onde o navegador sabe animar altura automática.
   Onde não sabe, abre seco — que é como sempre foi. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .bo-grupo::details-content {
    height: 0; overflow: hidden; opacity: 0;
    transition: height .22s ease, opacity .22s ease, content-visibility .22s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .bo-grupo[open]::details-content { height: auto; opacity: 1; }
  /*
   * Cortar é só enquanto desliza. Aberto, o bloco precisa deixar sair o
   * que é desenhado por cima: o calendário, a lista de sugestões. Sem
   * isso o calendário que abre para cima morre na borda de cima.
   *
   * A classe entra quando a transição acaba — se entrasse junto com o
   * open, o conteúdo inteiro apareceria fora da caixa durante o deslize.
   */
  .bo-grupo.is-aberto::details-content { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .bo-grupo, .bo-grupo__topo::after, .bo-grupo__resumo { transition: none; }
  @supports (interpolate-size: allow-keywords) {
    .bo-grupo::details-content { transition: none; }
  }
}

/* --- Quem compra ----------------------------------------------------------
   Lista com barra atrás do texto, e não gráfico ao lado: a barra é só a
   proporção, o que se lê é o nome e o número. */
.bo-perfil { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .bo-perfil { grid-template-columns: 1fr 1fr; } }
.bo-perfil__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bo-perfil__lista li {
  position: relative;
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: 1fr auto auto;
  padding: 5px var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.bo-perfil__barra {
  position: absolute; inset: 0 auto 0 0;
  width: var(--parte, 0%);
  background: rgba(227, 201, 154, 0.10);
  border-radius: var(--radius);
}
.bo-perfil__nome, .bo-perfil__n, .bo-perfil__v { position: relative; }
.bo-perfil__nome { color: var(--text); }
.bo-perfil__n { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.bo-perfil__v { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* --- O que falta ----------------------------------------------------------
   A fila do que preencher. Cada etiqueta é um link que abre a ficha já no
   bloco certo — clicar em "CPF ou CNPJ" tem que cair no campo, não na
   ficha inteira para procurar. */
.bo-falta { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.bo-falta--zero { color: var(--text-muted); font-size: var(--text-xs); }

.bo-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bo-fila__item {
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  padding: var(--space-3);
  border-radius: var(--radius);
  transition: background-color .12s ease;
}
.bo-fila__item:hover { background: var(--forest-1000); }
@media (max-width: 720px) { .bo-fila__item { grid-template-columns: 1fr; } }
.bo-fila__quem { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bo-fila__falta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* A etiqueta do que falta: cor de alerta discreta, porque falta não é erro. */
.bo-falta-tag {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, #cf9b86 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #cf9b86 10%, transparent);
  color: #cf9b86;
  font-size: 0.6875rem; text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease;
}
.bo-falta-tag:hover { background: color-mix(in srgb, #cf9b86 22%, transparent); text-decoration: none; }
/* O que serve só para campanha não trava trabalho: cor mais fria. */
.bo-falta-tag--perfil {
  border-color: color-mix(in srgb, #b3a3cc 40%, transparent);
  background: color-mix(in srgb, #b3a3cc 10%, transparent);
  color: #b3a3cc;
}
.bo-falta-tag--perfil:hover { background: color-mix(in srgb, #b3a3cc 22%, transparent); }

/* --- Obrigatório, sem travar ----------------------------------------------
   A etiqueta ao lado do rótulo. Discreta quando só informa ("obrigatório"),
   acesa quando cobra ("falta preencher") — a diferença entre lembrar e
   apontar. Só o obrigatório é marcado: sem etiqueta é opcional, e o olho
   aprende isso na primeira ficha. */
.adm-obrig {
  margin-left: var(--space-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-muted);
  vertical-align: middle;
}
.adm-obrig--falta {
  border-color: color-mix(in srgb, #cf9b86 45%, transparent);
  background: color-mix(in srgb, #cf9b86 12%, transparent);
  color: #cf9b86;
}

/* O alerta da ficha: acima das abas, porque o que falta pode estar em
   qualquer uma delas. */
.bo-alerta-falta {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, #cf9b86 30%, transparent);
  border-left: 2px solid #cf9b86;
  border-radius: var(--radius);
  background: color-mix(in srgb, #cf9b86 6%, var(--forest-1000));
  font-size: var(--text-sm);
}
.bo-alerta-falta strong { color: #cf9b86; font-weight: 600; }
.bo-alerta-falta span { color: var(--text-muted); font-size: var(--text-xs); }
.bo-alerta-falta__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }

/* ==========================================================================
   O CELULAR, O BARATO E GERAL

   Campo a 14 px no iPhone dá zoom a cada toque: a 16 px não dá. Vale para
   todo campo de texto do sistema abaixo de 720 px, e só ali — no desktop a
   densidade de ferramenta continua.

   O placeholder sem cor própria saía no cinza do navegador (#757575), a
   4,0:1 sobre o fundo; no token da casa passa a 6:1.
   ========================================================================== */
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px; }
}

/* Formulário que grava sozinho não precisa de botão de gravar: com script o
   botão some e fica só o "Salvo · hh:mm". Sem script, o botão continua lá. */
html.js form[data-autosave] .adm-acoes > button[type="submit"] { display: none; }

/* ==========================================================================
   O PASSO MANDAR

   À esquerda o total e o gesto (mandar, ou a resposta do cliente); à
   direita os papéis, separados por destino; a zona de perigo no fim.
   ========================================================================== */
.bo-mandar-passo { display: flex; flex-direction: column; gap: var(--space-4); }
.bo-mandar-passo .bo-fechamento { max-width: none; gap: var(--space-4); }
.bo-mandar-passo .bo-orc__levar { margin-top: 0; }
.bo-mandar-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
}
.bo-mandar-acoes form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.bo-mandar-acoes__dica { flex: 1 1 100%; max-width: 44ch; }
.bo-perigo { margin: var(--space-2) 0 0; }
.bo-perigo > summary {
  list-style: none; cursor: pointer; width: max-content;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-perigo > summary::-webkit-details-marker { display: none; }
.bo-perigo > summary::before { content: '▸ '; }
.bo-perigo[open] > summary::before { content: '▾ '; }
.bo-perigo > summary:hover { color: var(--text-soft); }
.bo-perigo form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; }
@container coluna (min-width: 1000px) {
  .bo-mandar-passo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .bo-mandar-passo > .bo-fechamento { grid-column: 1; grid-row: 1 / span 2; }
  .bo-mandar-passo > .bo-orc__levar--cliente { grid-column: 2; grid-row: 1; }
  .bo-mandar-passo > .bo-orc__levar--casa { grid-column: 2; grid-row: 2; }
  .bo-mandar-passo > .bo-perigo { grid-column: 1 / -1; grid-row: 3; }
}

/* ==========================================================================
   ACABAMENTO: O QUE A MÃO SENTE

   Botão que afunda no clique, anel de foco igual em todo botão e link de
   ação, o modal de cadastro entrando como o de perigo já entrava, e o foco
   visível nas células e no contador. Nada acima de 160 ms: a pessoa está
   no meio do trabalho.
   ========================================================================== */
.adm-btn {
  transition: background-color .12s, border-color .12s, color .12s, filter .12s,
              transform .16s cubic-bezier(.2, .8, .2, 1);
}
.adm-btn:active,
.bo-acao:active,
.bo-doc:active,
.bo-mais__item:active,
.bo-acrescentar__item:active,
.bo-orc__opcao-botao:active { transform: scale(.97); }
.adm-btn:focus-visible,
.adm-aba:focus-visible,
a.bo-chip:focus-visible,
.bo-numero:focus-visible,
.bo-doc:focus-visible,
.bo-orc__opcao-botao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Perigo no hover muda de estado, não só de brilho. */
.adm-btn--perigo:hover { background: var(--danger); border-color: var(--danger); color: var(--forest-1000); filter: none; }
/* O modal de cadastro entra como o diálogo de perigo: 160 ms, de leve, de cima. */
.bo-modal[open]:modal .bo-modal__caixa { animation: bo-modal-entra .16s cubic-bezier(.2, .8, .2, 1); }
.bo-modal[open]:modal::backdrop { animation: bo-fundo-entra .12s ease-out; }
@keyframes bo-modal-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes bo-fundo-entra { from { opacity: 0; } }
/* Foco que se vê numa tabela de nove colunas e no contador. */
.bo-celula:focus { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
.bo-contador__n:focus { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) {
  .adm-btn, .bo-acao, .bo-doc { transition: none; }
  .adm-btn:active, .bo-acao:active, .bo-doc:active, .bo-mais__item:active, .bo-acrescentar__item:active, .bo-orc__opcao-botao:active { transform: none; }
  .bo-modal[open]:modal .bo-modal__caixa, .bo-modal[open]:modal::backdrop { animation: none; }
}

/* ==========================================================================
   O PASSO "O QUE": A OBRA E O PRODUTO

   Duas colunas na coluna de trabalho larga: a obra (endereço, medidas) à
   esquerda; o produto (os desenhos do 3D com o retrato, e os anexos) à
   direita. No celular, uma embaixo da outra.
   ========================================================================== */
.bo-secao--oque { --secao: #9fb8a4; }
.bo-obra { margin: 0; }
.bo-obra__medidas { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bo-obra__chave {
  display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  font-size: var(--text-sm); color: var(--text-soft);
}
.bo-obra__chave input { margin-top: .2rem; flex: none; accent-color: var(--accent); width: 1rem; height: 1rem; }
.bo-obra__chave b { font-weight: 600; color: var(--text); }
.bo-obra__chave small { display: block; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.35; }
/* Quando, quem e o que se viu só aparecem com a chave ligada. */
.bo-obra__quando, .bo-obra__obs { margin-top: var(--space-3); }
.bo-obra__medidas:not(:has(input:checked)) .bo-obra__quando,
.bo-obra__medidas:not(:has(input:checked)) .bo-obra__obs { display: none; }
.bo-produto { margin: 0; }
.bo-desenhos { display: flex; flex-direction: column; gap: var(--space-3); }
.bo-desenho {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--forest-1000, #08170f);
}
/* O retrato: o móvel desenhado, que é o produto. Finalmente um pedaço de madeira no backoffice. */
.bo-desenho__retrato {
  flex: none; width: 9rem; aspect-ratio: 182 / 170; display: block;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--bg);
  overflow: hidden; transition: border-color .12s;
}
.bo-desenho__retrato:hover { border-color: var(--accent); }
.bo-desenho__retrato svg { width: 100%; height: 100%; display: block; }
.bo-desenho__texto { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bo-desenho__texto strong { font-size: var(--text-base); color: var(--text); }
.bo-desenho__texto small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-desenho__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.bo-desenho__tirar { margin: 0; display: contents; }
button.bo-doc--perigo { font: inherit; cursor: pointer; }
.bo-doc--perigo, .bo-doc--perigo:hover { color: var(--danger); border-color: transparent; }
.bo-doc--perigo:hover { border-color: var(--danger); }
.bo-produto .adm-acoes { margin-top: var(--space-4); }
.bo-produto .adm-acoes .adm-btn svg { width: 16px; height: 16px; }
.bo-produto-vazio { margin: 0; }
.bo-anexos { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bo-anexos h3 {
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-anexos .adm-form { margin: 0; }
.bo-anexos__lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.bo-anexo { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bo-anexo__abrir {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-soft); text-decoration: none; font-size: var(--text-sm); transition: border-color .12s, color .12s;
}
.bo-anexo__abrir:hover { border-color: var(--accent); color: var(--text); }
.bo-anexo__abrir img { flex: none; width: 3rem; height: 3rem; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--bg); }
.bo-anexo__pdf {
  flex: none; width: 3rem; height: 3rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--accent);
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; letter-spacing: .08em;
}
.bo-anexo__pdf svg { width: 16px; height: 16px; }
.bo-anexo__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-anexo__nome small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
@container coluna (min-width: 1000px) {
  .bo-secao--oque { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4); }
  .bo-secao--oque > .bo-secao__cabeca { grid-column: 1 / -1; }
}

/* A INSTALAÇÃO POR ITEM: a chave na linha do móvel, e o rótulo dos grupos do modal. */
.bo-item__instala { margin: var(--space-2) 0 0; }
.bo-chip-instala {
  display: inline-flex; align-items: center; padding: 1px 8px;
  border: 1px dashed var(--border-strong); border-radius: 999px;
  background: none; color: var(--text-muted); font: inherit; font-size: var(--text-xs);
  cursor: pointer; transition: color .12s, border-color .12s, background-color .12s;
}
.bo-chip-instala.is-ligada { border-style: solid; border-color: var(--accent-soft); color: var(--accent); background: rgba(227, 201, 154, 0.07); }
.bo-chip-instala:hover { color: var(--text); border-color: var(--accent); }
.bo-chip-instala:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-item__sem-inst { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.bo-modos__rotulo {
  margin: var(--space-3) 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-modos__rotulo:first-child { margin-top: 0; }
/* O botão escolhido acende também pelo próprio radio, sem depender de script. */
.bo-modo:has(input:checked) { border-color: var(--accent-soft); color: var(--text); }

/* A MEDIÇÃO NA OBRA, no passo O que: a planta baixa pequena, o ambiente, quando e quem. */
.bo-medicoes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bo-medicoes h3 {
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-medicao {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-3); margin-bottom: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--forest-1000, #08170f);
}
.bo-medicao__planta {
  flex: none; width: 11rem; display: block; padding: 4px;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--bg);
  transition: border-color .12s;
}
.bo-medicao__planta:hover { border-color: var(--accent); }
.bo-medicao__planta svg { width: 100%; height: auto; display: block; }
.bo-medicoes .adm-acoes { margin-top: var(--space-2); }
.bo-medicoes .adm-acoes .adm-btn svg { width: 16px; height: 16px; }
.bo-medicoes .adm-dica { max-width: 44ch; }

/* ==========================================================================
   A PÁGINA DO PEDIDO — ajuste de layout (hist 784)

   As etapas ganharam classe própria (.bo-etapas / .bo-etapa): .bo-passos é
   a barra do orçamento, e as regras dela (sticky, flex em linha, número ao
   lado do nome) vazavam para cá e deixavam os sete passos tortos — no
   celular, uns por cima dos outros.
   ========================================================================== */
.bo-etapas {
  display: grid; gap: var(--space-3) var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
}
.bo-etapa-form { display: contents; }
.bo-etapa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-width: 0; padding: var(--space-3) 0 var(--space-1);
  border: 0; border-top: 3px solid var(--border); border-radius: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, color .15s, transform .12s;
}
.bo-etapa:hover { border-top-color: var(--accent-soft); }
.bo-etapa:hover .bo-etapa__rotulo { color: var(--text); }
.bo-etapa:active { transform: translateY(1px); }
.bo-etapa:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.bo-etapa__n {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bo-etapa__rotulo {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  line-height: 1.25; color: var(--text-soft); text-wrap: balance;
}
.bo-etapa__data { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bo-etapa__data--firme { color: var(--accent); }
.bo-etapa--feita { border-top-color: var(--accent-soft); }
.bo-etapa--feita .bo-etapa__n { color: var(--accent-soft); }
.bo-etapa--atual { border-top-color: var(--gold-500); }
.bo-etapa--atual .bo-etapa__n, .bo-etapa--atual .bo-etapa__rotulo { color: var(--accent); }
.bo-etapa--futura .bo-etapa__rotulo { color: var(--text-muted); }
.bo-etapa--futura:hover .bo-etapa__rotulo { color: var(--text-soft); }

/* O resumo embaixo das etapas: dois ou três fatos, cada um com o nome em cima. */
.bo-etapas__resumo {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8);
  margin: var(--space-5) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.bo-etapas__resumo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-etapas__resumo dt {
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
}
.bo-etapas__resumo dd { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.bo-etapas__resumo dd strong {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.bo-etapas__resumo dd small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-etapas__resumo dd small.is-ok { color: var(--accent-soft); }
.bo-etapas__resumo dd small.is-fora { color: var(--danger); }
p.bo-etapas__resumo.is-conflito { display: block; font-size: var(--text-sm); color: var(--text-soft); }
p.bo-etapas__resumo.is-conflito strong { color: var(--danger); }

/* --- Campos de texto curtos: rows="2" não precisa de 8rem de caixa vazia --- */
.bo-painel[data-aba="ficha"] .adm-campo textarea[rows="2"],
.bo-painel[data-aba="instalacao"] .adm-campo textarea[rows="2"] { min-height: 4.25rem; }
.bo-painel[data-aba="instalacao"] .adm-campo textarea[rows="3"] { min-height: 5.5rem; }

/* --- "Onde é a obra": o fieldset com a cara dos grupos da ficha do cliente --- */
fieldset.bo-grupo { margin: 0; padding: var(--space-4) var(--space-4) var(--space-5); min-width: 0; }
fieldset.bo-grupo > legend {
  padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--grupo);
}
fieldset.bo-grupo > .adm-campo + .adm-linha,
fieldset.bo-grupo > .adm-linha + .adm-linha,
fieldset.bo-grupo > .adm-campo + .adm-campo { margin-top: var(--space-4); }

/* --- Prazos deste pedido --- */
.bo-prazos th:first-child, .bo-prazos td:first-child { white-space: nowrap; }
.bo-prazos__origem { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--accent); }
.bo-prazos input[type="date"] { width: 100%; min-width: 9.5rem; }

/* --- As linhas de "nova ordem" e "nova peça": cada uma com a própria grade.
   A grade geral (.bo-item-novo) é a do material, com seis colunas; com três
   ou cinco campos os de trás caíam em colunas de 5rem e cortavam a data e o
   botão. --- */
.bo-item-novo .adm-campo { min-width: 0; }
.bo-item-novo__nota { grid-column: 1 / -1; margin: 0; }
@media (min-width: 860px) {
  .bo-item-novo--ordem { grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr) 10rem auto; }
  .bo-item-novo--peca { grid-template-columns: 9rem minmax(10rem, 1fr) 4.5rem 10rem 8.5rem auto; }
}

/* --- O "Editar" de uma linha abre um cartão, alinhado à esquerda, dentro da tabela --- */
.adm-tabela td .adm-inline-novo { text-align: right; }
.adm-tabela td .adm-inline-novo > form { text-align: left; }
.adm-tabela td .adm-inline-novo[open] > .adm-form {
  padding: var(--space-4); border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--forest-1000);
}
.adm-tabela td .adm-inline-novo[open] > form + form { margin-top: var(--space-2); text-align: right; }

/* --- Miudezas que eram estilo inline --- */
.bo-linha-add { display: flex; gap: var(--space-3); }
.bo-linha-add .adm-btn { white-space: nowrap; }
.adm-bloco--alerta { border-color: var(--danger); }
.bo-em-aberto { margin-top: var(--space-6); }
.bo-visitas { margin-top: var(--space-6); }
.bo-visita__feito { margin: 0 0 var(--space-4); white-space: pre-wrap; line-height: 1.6; color: var(--text-soft); }

/* --- Em tela estreita as abas rolam de lado em vez de quebrar em duas fileiras --- */
@media (max-width: 719px) {
  .adm-abas { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .adm-abas::-webkit-scrollbar { display: none; }
  .adm-aba { flex: none; white-space: nowrap; }
  .bo-etapas { grid-template-columns: repeat(2, 1fr); }
}

/* --- As anotações do pedido, como um quadro (hist 785) ---------------------
   Um cartão por assunto. O texto se escreve no cartão, sem caixa dentro da
   caixa, e a altura acompanha o que está escrito. Com texto, o cartão acende
   (filete dourado, título em dourado); vazio, fica apagado, esperando. */
.bo-notas__topo { margin-bottom: var(--space-5); }
.bo-notas__quadro {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.bo-nota {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0; margin: 0; padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--forest-1000);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* Sem filete lateral: o cartão escrito se diz pelo título em dourado. */
.bo-nota:hover { border-color: var(--border-strong); }
.bo-nota:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--forest-900); }
.bo-nota__titulo {
  display: block; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted);
  cursor: text; transition: color .15s;
}
.bo-nota.is-escrita .bo-nota__titulo { color: var(--accent); }
.bo-nota__titulo--novo {
  width: 100%; padding: 0; border: 0; background: none; color: var(--text-soft); cursor: text;
}
.bo-nota__titulo--novo::placeholder { color: var(--text-muted); opacity: .8; }
.bo-nota__titulo--novo:focus { outline: none; color: var(--accent); }
.bo-nota__texto {
  display: block; width: 100%; min-height: 1.55em; padding: 0; margin: 0;
  border: 0; background: none; resize: none; overflow: hidden;
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55;
  field-sizing: content;
}
.bo-nota__texto::placeholder { color: var(--text-muted); opacity: .6; }
.bo-nota__texto:focus { outline: none; }
.bo-nota__estado { min-height: 0.9rem; font-size: 0.6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bo-nota__estado.adm-salvo--ok { color: var(--accent-soft); }
.bo-nota__estado.adm-salvo--erro { color: var(--danger); }
.bo-nota--nova { border-style: dashed; background: transparent; }
.bo-nota--nova:focus-within { border-style: solid; }
@media (max-width: 719px) { .bo-notas__quadro { grid-template-columns: 1fr; } }

/* ==========================================================================
   MEDIÇÕES — página própria, no menu (hist 788, refeita no 789)

   Uma agenda de trabalho: o filtro de três estados em cima, uma vista de
   cada vez; as agendadas por dia, cada uma numa LINHA de um painel só —
   sem cartão por item e sem filete lateral. A mensagem ao cliente é um
   balão de conversa, editável no lugar; os ajustes (dia, quem vai) ficam
   ao lado dela, dobrados enquanto o cliente já foi avisado.
   ========================================================================== */
.bo-med-filtro {
  display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%;
  margin: 0 0 var(--space-6); padding: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--forest-1000);
}
.bo-med-filtro__item {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.bo-med-filtro__item b { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.bo-med-filtro__item i { font-style: normal; font-size: var(--text-xs); font-weight: 500; color: var(--danger); }
.bo-med-filtro__item:hover { color: var(--text); }
.bo-med-filtro__item.is-pede b { color: var(--accent); }
.bo-med-filtro__item.is-atual { background: var(--gold-500); color: var(--ink-gold); }
.bo-med-filtro__item.is-atual b, .bo-med-filtro__item.is-atual i { color: inherit; }
.bo-med-filtro__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.bo-med-nota { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); max-width: 70ch; }
.bo-med-falta { color: var(--danger); }

/* O dia: um título por dia, e o painel dele embaixo. */
.bo-med-dia + .bo-med-dia { margin-top: var(--space-8); }
.bo-med-dia__titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text);
}
.bo-med-dia__titulo span { font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.bo-med-dia__titulo small { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.bo-med-dia.is-passou .bo-med-dia__titulo span,
.bo-med-dia.is-passou .bo-med-dia__titulo small { color: var(--danger); }

/* O painel e as linhas. */
.bo-med-painel { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); overflow: hidden; }
.bo-med-linha {
  display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: 1fr; align-items: center;
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border);
  transition: background-color .15s;
}
.bo-med-linha:first-child { border-top: 0; }
.bo-med-linha:hover { background: rgba(227, 201, 154, 0.03); }
@media (min-width: 900px) {
  .bo-med-linha { grid-template-columns: 6rem minmax(0, 1fr) auto auto; }
  .bo-med-linha--agendar { grid-template-columns: minmax(0, 1fr) auto; }
}
.bo-med-linha__hora b {
  display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.bo-med-linha__hora b.is-vaga { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.bo-med-linha__hora small { display: block; margin-top: 3px; font-size: var(--text-xs); color: var(--text-muted); }
.bo-med-linha__pedido { min-width: 0; }
.bo-med-linha__pedido h2 {
  margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.3;
}
.bo-med-linha__pedido h2 a { color: var(--accent); text-decoration: none; }
.bo-med-linha__pedido h2 a:hover { text-decoration: underline; }
.bo-med-linha__pedido h2 span { font-weight: 500; color: var(--text-soft); }
.bo-med-linha__cliente, .bo-med-linha__sins { margin: 3px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; }
.bo-med-linha__sins { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); }
.bo-med-linha__sins span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--border-strong); vertical-align: middle; }
.bo-med-linha__sins span.is-sim::before { background: var(--gold-500); }

/* O estado do aviso: só a palavra e o ponto, sem pílula. */
.bo-med-estado { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.bo-med-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.bo-med-estado.is-ok { color: var(--text-soft); }
.bo-med-estado.is-ok::before { background: var(--gold-500); }
.bo-med-estado.is-nao { color: var(--danger); }
.bo-med-estado.is-nao::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(226, 145, 125, 0.18); }

.bo-med-linha__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@media (min-width: 900px) { .bo-med-linha__acoes { justify-content: flex-end; } }
.bo-med-linha .adm-inline { display: inline; }

/* O que dobra: a mensagem (balão) e os ajustes, lado a lado. */
.bo-med-linha__dobra {
  grid-column: 1 / -1; display: grid; gap: var(--space-6); grid-template-columns: 1fr;
  margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .bo-med-linha__dobra { grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); } }
.bo-med-form { display: flex; flex-direction: column; gap: var(--space-4); }

.bo-med-msg { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.bo-med-msg__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bo-med-msg__topo label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-med-msg__repor { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-xs); color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bo-med-msg__repor:hover { color: var(--text); }
/* O balão: a mensagem como vai aparecer no telefone, e editável no lugar. */
.bo-med-balao {
  position: relative; padding: var(--space-4) var(--space-5);
  border-radius: 16px 16px 16px 4px; background: var(--forest-800);
  box-shadow: inset 0 1px 0 rgba(242, 236, 223, 0.05);
  transition: box-shadow .15s;
}
.bo-med-balao:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.bo-med-balao textarea {
  display: block; width: 100%; min-height: 3.2em; padding: 0; margin: 0;
  border: 0; background: none; resize: none; overflow: hidden;
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6;
  field-sizing: content;
}
.bo-med-balao textarea:focus { outline: none; }
.bo-med-msg__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bo-med-msg__nota { flex: 1 1 14rem; font-size: var(--text-xs); color: var(--text-muted); }

/* A linha de marcar, no "para agendar". */
.bo-med-linha__marcar { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .bo-med-linha__marcar { grid-template-columns: 13rem 11rem auto; } }
.bo-med-linha__marcar .adm-btn { white-space: nowrap; }

/* --- A mensagem como conversa do WhatsApp (hist 792) ----------------------
   O balão de quem manda: à direita, no verde do WhatsApp escurecido para o
   tom da casa, com a hora no canto. Mostra o texto como chega (negrito,
   listas, quebras); "Editar" troca pela caixa, no mesmo lugar. */
.bo-med-conversa {
  display: flex; justify-content: flex-end;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 20% 20%, rgba(227, 201, 154, 0.035) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--forest-1000);
}
.bo-med-conversa .bo-med-balao {
  position: relative; width: min(100%, 34rem);
  padding: var(--space-3) var(--space-4) var(--space-5);
  border-radius: 10px 2px 10px 10px;
  background: #1d4a3b;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.bo-med-conversa .bo-med-balao::after {
  content: ""; position: absolute; top: 0; right: -7px;
  border-top: 8px solid #1d4a3b; border-right: 8px solid transparent;
}
.bo-med-conversa .bo-med-balao:focus-within { box-shadow: 0 0 0 1px var(--accent); }
.bo-med-balao__ver {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: #e9ede4;
  overflow-wrap: anywhere;
}
.bo-med-balao__ver b { font-weight: 700; color: #fff; }
.bo-med-conversa .bo-med-balao textarea { color: #e9ede4; line-height: 1.5; min-height: 12em; }
.bo-med-balao__hora {
  position: absolute; right: var(--space-3); bottom: 6px;
  font-size: 0.6875rem; color: rgba(233, 237, 228, 0.55); font-variant-numeric: tabular-nums;
}
.bo-med-msg__opcoes { display: inline-flex; gap: var(--space-4); }/* A nota numa linha, os dois botões juntos à direita embaixo. */
.bo-med-msg__acoes { justify-content: flex-end; }
.bo-med-msg__nota { flex: 1 0 100%; }

/* --- Reagendar a medição (hist 793) ---------------------------------------
   Abre embaixo da linha: os motivos de sempre como opções de toque, um
   detalhe livre, a nova data e o botão. O motivo fica dito na linha. */
.bo-med-reag { margin: 4px 0 0; font-size: var(--text-xs); color: #e0b46a; }
.bo-med-reagendar {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-4);
  margin-top: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--forest-1000);
}
.bo-med-reagendar[hidden] { display: none; }
.bo-med-reagendar__motivos { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.bo-med-reagendar__motivos legend {
  width: 100%; margin-bottom: var(--space-3); padding: 0;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
.bo-med-opcao { position: relative; cursor: pointer; }
.bo-med-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.bo-med-opcao span {
  display: inline-block; padding: 6px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--text-xs); color: var(--text-soft); transition: border-color .15s, background-color .15s, color .15s;
}
.bo-med-opcao:hover span { border-color: var(--accent); color: var(--text); }
.bo-med-opcao input:checked + span { border-color: var(--gold-500); background: var(--gold-500); color: var(--ink-gold); }
.bo-med-opcao input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bo-med-reagendar__linha { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 860px) { .bo-med-reagendar__linha { grid-template-columns: minmax(0, 1fr) 14rem auto; } }
.bo-med-reagendar__linha .adm-btn { white-space: nowrap; }
.bo-med-reagendar__linha label small { margin-left: 6px; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

/* ==========================================================================
   A ABA MEDIÇÃO DO PEDIDO — a medida final (hist 794, desenho no 795)

   Em cima, a linha do tempo da medição e a ação principal. Embaixo, duas
   colunas: o trabalho (plantas, o que o projeto precisa saber) e o apoio
   (fotos, projeto 3D, a referência de antes da venda). Sem moldura dentro
   de moldura: as seções são superfícies; o que está dentro delas é solto.
   ========================================================================== */

/* --- A linha do tempo --- */
.bo-mf-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-8);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900);
}
.bo-mf-passos {
  list-style: none; margin: 0; padding: 0; flex: 1 1 36rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: passo;
}
.bo-mf-passos li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-right: var(--space-3); min-width: 0; }
/* O fio entre os passos: sai da marca e vai até a próxima. */
.bo-mf-passos li:not(:last-child)::after {
  content: ""; position: absolute; top: 11px; left: 30px; right: 8px; height: 2px; border-radius: 2px; background: var(--border);
}
.bo-mf-passos li.is-feito:not(:last-child)::after { background: var(--gold-600, #c9a56b); }
.bo-mf-passos__marca {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-bottom: var(--space-2); border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--forest-900);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
}
.bo-mf-passos li.is-feito .bo-mf-passos__marca { border-color: var(--gold-500); background: var(--gold-500); color: var(--ink-gold); }
.bo-mf-passos li.is-proximo .bo-mf-passos__marca { border-color: var(--gold-500); color: var(--accent); box-shadow: 0 0 0 4px rgba(227, 201, 154, 0.12); }
.bo-mf-passos__nome { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); line-height: 1.25; }
.bo-mf-passos li.is-feito .bo-mf-passos__nome, .bo-mf-passos li.is-proximo .bo-mf-passos__nome { color: var(--text); }
.bo-mf-passos__diz { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bo-mf-passos li.is-feito .bo-mf-passos__diz { color: var(--text-soft); }
@media (max-width: 640px) {
  .bo-mf-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .bo-mf-passos li:nth-child(2)::after { display: none; }
}
.bo-mf-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.bo-mf-link { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.bo-mf-link:hover { color: var(--accent); }

/* --- As duas colunas --- */
.bo-mf-corpo { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .bo-mf-corpo { grid-template-columns: minmax(0, 1fr) 21rem; } }
.bo-mf-corpo__principal, .bo-mf-corpo__lado { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* --- Uma seção --- */
.bo-mf-secao { margin: 0; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.bo-mf-corpo__lado .bo-mf-secao { padding: var(--space-5); }
.bo-mf-secao__topo { margin-bottom: var(--space-5); }
.bo-mf-secao__topo h2 {
  display: flex; align-items: baseline; gap: var(--space-2); margin: 0;
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
}
.bo-mf-secao__topo h2 label { cursor: text; }
.bo-mf-secao__topo h2 small { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bo-mf-secao__topo p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); max-width: 60ch; }

/* --- Vazio --- */
.bo-mf-vazio {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-card); background: var(--forest-1000);
}
.bo-mf-vazio p { margin: 0; flex: 1 1 22rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.bo-mf-vazio strong { color: var(--text-soft); font-weight: 600; }

/* --- As plantas --- */
.bo-mf__grade { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.bo-mf__ambiente { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--forest-1000); overflow: hidden; }
.bo-mf__planta { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #f4f1ea; }
.bo-mf__planta svg { width: 100%; height: 100%; display: block; }
.bo-mf__texto { padding: var(--space-4) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bo-mf__titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.bo-mf__titulo h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.bo-mf__alerta { font-size: var(--text-xs); color: var(--danger); }
.bo-mf__numeros { display: flex; gap: var(--space-5); margin: 0; }
.bo-mf__numeros > div { display: flex; flex-direction: column; }
.bo-mf__numeros dt { font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; }
.bo-mf__numeros dd { margin: 1px 0 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bo-mf__obs { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: rgba(227, 201, 154, 0.06); font-size: var(--text-sm); color: var(--text-soft); line-height: 1.5; white-space: pre-wrap; }
.bo-mf__quem { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.bo-mf__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.bo-mf-tirar { margin-left: auto; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }
.bo-mf-tirar:hover { color: var(--danger); }
.bo-mf__acoes .adm-inline { display: contents; }

/* --- O que o projeto precisa saber: uma caixa só, sem moldura dentro de moldura --- */
.bo-mf-notas { position: relative; }
.bo-mf-notas textarea {
  display: block; width: 100%; min-height: 6rem; padding: var(--space-4); border: 0; border-radius: var(--radius);
  background: var(--forest-1000); color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6;
  resize: none; overflow: hidden; field-sizing: content; transition: box-shadow .15s;
}
.bo-mf-notas textarea::placeholder { color: var(--text-muted); opacity: .7; }
.bo-mf-notas textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.bo-mf-notas__salvo { display: block; margin-top: var(--space-2); text-align: right; }

/* --- Fotos e arquivos --- */
.bo-mf-galeria { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-mf-corpo__principal .bo-mf-galeria { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.bo-mf-galeria li { position: relative; }
.bo-mf-galeria__item { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--forest-1000); transition: transform .15s; }
.bo-mf-galeria__item:hover { transform: translateY(-1px); }
.bo-mf-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-mf-galeria__pdf {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--space-2);
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--accent); background: var(--forest-800);
}
.bo-mf-galeria__pdf small { max-width: 100%; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: 0.625rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-mf-galeria form { position: absolute; top: 4px; right: 4px; margin: 0; }
.bo-mf-galeria__tirar {
  width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: rgba(8, 24, 20, 0.8); color: var(--text);
  font-size: var(--text-sm); line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.bo-mf-galeria li:hover .bo-mf-galeria__tirar, .bo-mf-galeria__tirar:focus-visible { opacity: 1; }
@media (hover: none) { .bo-mf-galeria__tirar { opacity: 1; } }
.bo-mf-solta {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.bo-mf-solta:hover, .bo-mf-solta.is-sobre { border-color: var(--accent); background: rgba(227, 201, 154, 0.04); }
.bo-mf-solta input { position: absolute; opacity: 0; width: 0; height: 0; }
.bo-mf-solta__mais {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--forest-800); color: var(--accent); font-size: var(--text-lg); line-height: 1;
}
.bo-mf-solta b { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.bo-mf-solta small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.bo-mf-solta:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Projeto 3D --- */
.bo-mf-lista { list-style: none; margin: 0; padding: 0; }
.bo-mf-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.bo-mf-lista li:first-child { border-top: 0; padding-top: 0; }
.bo-mf-lista__nome { min-width: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.bo-mf-lista__nome small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.bo-mf-lista__acoes { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }

/* --- De antes da venda --- */
.bo-mf-antes > summary { display: flex; flex-direction: column; gap: 2px; list-style: none; cursor: pointer; }
.bo-mf-antes > summary::-webkit-details-marker { display: none; }
.bo-mf-antes > summary span { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.bo-mf-antes > summary span::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .6; transition: transform .18s ease;
}
.bo-mf-antes[open] > summary span::after { transform: rotate(225deg) translate(-2px, -2px); }
.bo-mf-antes > summary small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-mf-antes[open] > summary { margin-bottom: var(--space-4); }
.bo-mf-antes__item { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.bo-mf__planta--mini { flex: none; width: 5.5rem; padding: var(--space-1); border-radius: var(--radius); }
.bo-mf-antes__item p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }
.bo-mf-antes__item small { display: block; font-size: var(--text-xs); color: var(--text-muted); }/* Os botões de cada planta no pé do cartão, alinhados entre os vizinhos. */
.bo-mf__texto { flex: 1; }
.bo-mf__acoes { margin-top: auto; }

/* Os pontos da obra num ambiente medido: o selo da ferramenta e o nome (hist 796). */
.bo-mf__pontos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bo-mf__pontos li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--forest-800); font-size: var(--text-xs); color: var(--text-soft); }
.bo-mf__pontos li span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px; border-radius: 5px; font-size: 0.625rem; font-weight: 800; color: #1c1f1e; }
.bo-mf__pontos li b { color: var(--accent); font-weight: 700; }

/* --- Pedidos enxuto (hist 802) --- */
.bo-acao-discreta { padding: var(--space-2) var(--space-1); border: 0; background: none; font: inherit; font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bo-acao-discreta:hover { color: var(--text); }
.bo-acao-discreta--perigo:hover { color: var(--danger); }
.bo-dobra-leve { margin-top: var(--space-4); }
.bo-dobra-leve > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: var(--text-sm); color: var(--accent); }
.bo-dobra-leve > summary::-webkit-details-marker { display: none; }
.bo-dobra-leve > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.bo-dobra-leve[open] > summary { margin-bottom: var(--space-3); }
.bo-dobra-leve[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.bo-painel[data-aba="producao"] > form#prazos, .bo-painel[data-aba="producao"] > .adm-bloco + .adm-bloco { margin-top: var(--space-6); }
.bo-mf-marcar { display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: 1fr; align-items: end; margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
@media (min-width: 860px) { .bo-mf-marcar { grid-template-columns: 16rem minmax(12rem, 20rem) 1fr; } }
.bo-mf-marcar .adm-salvo { align-self: center; }
.bo-instal-marcar { margin: var(--space-5) 0; max-width: 22rem; }
.bo-vista { display: inline-flex; gap: 2px; margin: 0 0 var(--space-5); padding: 3px; border-radius: var(--radius-pill); background: var(--forest-1000); border: 1px solid var(--border); }
.bo-vista a { padding: 6px 14px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-decoration: none; }
.bo-vista a:hover { color: var(--text); }
.bo-vista a.is-atual { background: var(--gold-500); color: var(--ink-gold); }
.bo-pend-faixa { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.bo-pend-faixa b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-soft); }
.bo-pend-faixa.is-pede { border-color: rgba(226, 145, 125, .5); }
.bo-pend-faixa.is-pede b { color: var(--danger); }
.bo-pend-faixa:hover { border-color: var(--accent); color: var(--text); }

/* --- Sem sub-abas em Pedidos (hist 803) --- */
.bo-vista-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-6); }
.bo-vista-linha .bo-vista { margin: 0; }
.bo-vista-atalho { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.bo-vista-atalho:hover { color: var(--accent); }
.bo-vista-atalho b { margin-left: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(226, 145, 125, .16); color: var(--danger); font-weight: 600; }
.bo-voltar { margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.bo-voltar a { color: var(--text-muted); text-decoration: none; }
.bo-voltar a:hover { color: var(--accent); }
.bo-secao-titulo { margin: var(--space-10) 0 var(--space-4); font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); color: var(--text); }

/* --- Pedido em três abas (hist 804) --- */
.bo-secao-titulo--primeiro { margin-top: 0; }

/* --- A aba Projeto do pedido (hist 806) --- */
.bo-pj-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.bo-pj-topo > div { display: flex; flex-direction: column; gap: 2px; }
.bo-pj-topo__rotulo { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-pj-topo strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.bo-pj-topo strong.is-ok { color: var(--accent); }
.bo-pj-topo small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-pj-obs { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius); background: rgba(227, 201, 154, 0.06); font-size: var(--text-sm); color: var(--text-soft); line-height: 1.6; white-space: pre-wrap; }
/* --- Prazos de volta na Ficha, na coluna estreita: a tabela cabe sem rolar (hist 807) --- */
.bo-prazos { table-layout: fixed; width: 100%; }
.bo-prazos th:nth-child(2) { width: 4.5rem; }
.bo-prazos th:nth-child(3) { width: 9.25rem; }
.bo-prazos th, .bo-prazos td { padding-inline: 10px; }
.bo-prazos th:first-child, .bo-prazos td:first-child { white-space: normal; overflow-wrap: anywhere; }
.bo-prazos input[type="number"] { width: 100%; }
.bo-prazos input[type="date"] { min-width: 0; width: 100%; }
.bo-prazos th:nth-child(2) { width: 3.75rem; }
.bo-prazos th:nth-child(3) { width: 10.5rem; }
.bo-prazos input { padding-left: 8px !important; padding-right: 6px !important; }

/* ==========================================================================
   O PEDIDO REDESENHADO (hist 808)

   Um topo único — quem e quanto, as etapas, o próximo passo com a ação e as
   datas que importam —, as abas de etapa com a mesma barra de situação, e
   os títulos das seções num estilo só (frase, não rótulo dourado).
   ========================================================================== */
.bo-pd-topo { margin: 0 0 var(--space-6); }
.bo-pd-topo__linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); }
.bo-pd-topo__quem h1 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: var(--text-3xl); color: var(--text); line-height: 1.1; }
.bo-pd-topo__quem .bo-meta { margin: 6px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.bo-pd-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: 6px; }
.bo-pd-topo__etapas { padding: var(--space-4) var(--space-5) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--forest-900); }
.bo-pd-topo__etapas .bo-etapas { gap: var(--space-2); }
.bo-pd-topo__etapas .bo-etapa { padding: var(--space-2) 0 0; border-top-width: 3px; }
.bo-pd-topo__etapas .bo-etapa__rotulo { font-size: var(--text-xs); }
.bo-pd-topo__baixo {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--forest-900); overflow: hidden;
}
@media (min-width: 1000px) { .bo-pd-topo__baixo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.bo-proximo { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "r a" "t a" "d a"; align-items: center; gap: 2px var(--space-5); padding: var(--space-5) var(--space-6); background: linear-gradient(180deg, rgba(227, 201, 154, .09), rgba(227, 201, 154, .03)); }
.bo-proximo--ok, .bo-proximo--calmo { background: rgba(255, 255, 255, .02); }
.bo-proximo__rotulo { grid-area: r; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.bo-proximo--ok .bo-proximo__rotulo, .bo-proximo--calmo .bo-proximo__rotulo { color: var(--text-muted); }
.bo-proximo strong { grid-area: t; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text); line-height: 1.25; }
.bo-proximo p { grid-area: d; margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-soft); max-width: 52ch; }
.bo-proximo > .adm-btn, .bo-proximo > form { grid-area: a; justify-self: end; }
@media (max-width: 640px) { .bo-proximo { grid-template-columns: 1fr; grid-template-areas: "r" "t" "d" "a"; } .bo-proximo > .adm-btn, .bo-proximo > form { justify-self: start; margin-top: var(--space-3); } }
.bo-pd-datas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); }
@media (min-width: 1000px) { .bo-pd-datas { border-top: 0; border-left: 1px solid var(--border); } }
.bo-pd-datas > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bo-pd-datas dt { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-pd-datas dd { margin: 0; display: flex; flex-direction: column; }
.bo-pd-datas dd strong { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.bo-pd-datas dd small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-pd-datas dd small.is-ok { color: var(--accent-soft); }
.bo-pd-datas dd small.is-fora { color: var(--danger); }

/* As abas, mais perto do topo */
.bo-pd .adm-abas { margin-bottom: var(--space-6); }

/* Os títulos das seções, num estilo só em todas as abas */
.bo-pd .adm-bloco { border-radius: var(--radius-card); }
.bo-pd .adm-bloco > h2,
.bo-pd .adm-bloco .adm-head h2,
.bo-pd .adm-bloco.adm-form > h2 {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text);
}
.bo-pd .bo-secao-titulo { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin: var(--space-10) 0 var(--space-4); }
.bo-pd .bo-pj-topo { margin-bottom: var(--space-6); }/* No celular, as etapas do topo numa faixa que rola de lado, em vez de sete linhas empilhadas. */
@media (max-width: 719px) {
  .bo-pd-topo__etapas { padding: var(--space-3) 0 var(--space-2); }
  .bo-pd-topo__etapas .bo-etapas { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--space-4) var(--space-2); scrollbar-width: none; }
  .bo-pd-topo__etapas .bo-etapas::-webkit-scrollbar { display: none; }
  .bo-pd-topo__etapas .bo-etapa { flex: 0 0 7.25rem; scroll-snap-align: start; }
}
@media (max-width: 719px) { .bo-pd-topo__etapas .bo-etapas { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } .bo-pd-topo__etapas .bo-etapa { padding-right: var(--space-2); } }

/* --- A aba Produção na ordem da fábrica (hist 809) --- */
.bo-fab-grade { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.bo-fab-grade--pedido { margin-top: var(--space-3); }
.bo-fab-doc { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--forest-1000); border: 1px solid var(--border); text-decoration: none; transition: border-color .15s, transform .15s; }
.bo-fab-doc:hover { border-color: var(--accent); transform: translateY(-1px); }
.bo-fab-doc__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: rgba(227, 201, 154, .1); color: var(--accent); }
.bo-fab-doc__ic svg { width: 1.25rem; height: 1.25rem; }
.bo-fab-doc__txt { display: flex; flex-direction: column; min-width: 0; }
.bo-fab-doc__txt b { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.bo-fab-doc__txt small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-fab-sub { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.bo-fab-amb { list-style: none; margin: 0; padding: 0; }
.bo-fab-amb li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.bo-fab-amb__nome { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.bo-fab-amb__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.bo-fab-amb__links a { color: var(--accent); text-decoration: none; }
.bo-fab-amb__links a:hover { text-decoration: underline; }
.bo-fab-tempo { margin-top: var(--space-10); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.bo-fab-tempo > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-6); list-style: none; cursor: pointer; }
.bo-fab-tempo > summary::-webkit-details-marker { display: none; }
.bo-fab-tempo > summary b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.bo-fab-tempo > summary small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-fab-tempo > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform .18s ease; }
.bo-fab-tempo[open] > summary::after { transform: rotate(225deg); }
.bo-fab-tempo[open] { padding-bottom: var(--space-5); }
.bo-fab-tempo > .adm-bloco { margin: var(--space-3) var(--space-5) 0; }
.bo-painel[data-aba="producao"] > .bo-pj-topo + .bo-fab { margin-top: 0; }
/* --- O material da Produção: a lista vem do projeto, o avulso fica dobrado (hist 810) --- */
.bo-fab-vazio { margin-bottom: var(--space-4); }
.bo-fab-avulso { margin-top: var(--space-5); }
.bo-fab-avulso > summary { display: inline-flex; align-items: center; gap: var(--space-2); list-style: none; cursor: pointer; font-size: var(--text-sm); color: var(--accent); }
.bo-fab-avulso > summary::-webkit-details-marker { display: none; }
.bo-fab-avulso > summary::before { content: "+"; font-size: 1.1em; line-height: 1; }
.bo-fab-avulso[open] > summary { margin-bottom: var(--space-4); color: var(--text-soft); }
.bo-fab-avulso[open] > summary::before { content: "−"; }
.bo-fab-avulso > summary:hover { text-decoration: underline; }

/* --- O PEDIDO GUIADO PELA ETAPA (hist 811) --- */
/* A régua só lê: corrigir a etapa é pelo menu "Mais". */
.bo-etapas--leitura { margin: 0; padding: 0; list-style: none; }
.bo-etapas--leitura .bo-etapa { cursor: default; }
.bo-etapas--leitura .bo-etapa:hover { border-top-color: var(--border); }
.bo-etapas--leitura .bo-etapa--feita:hover { border-top-color: var(--accent-soft); }
.bo-etapas--leitura .bo-etapa--atual:hover { border-top-color: var(--gold-500); }
.bo-etapas--leitura .bo-etapa:active { transform: none; }
.bo-pd-onde { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-soft); }
.bo-pd-onde a { color: var(--accent); }

/* O menu "Mais": Ficha em A4, corrigir a etapa, cancelar. */
.bo-pd-mais { position: relative; }
.bo-pd-mais > summary { list-style: none; cursor: pointer; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-xs); color: var(--text-muted); }
.bo-pd-mais > summary::-webkit-details-marker { display: none; }
.bo-pd-mais > summary:hover, .bo-pd-mais[open] > summary { color: var(--text); border-color: var(--accent-soft); }
.bo-pd-mais__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: var(--space-3); min-width: 16rem; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); box-shadow: 0 12px 32px rgba(4, 14, 10, .45); }
.bo-pd-mais__item { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--text-soft); text-align: left; text-decoration: none; cursor: pointer; }
.bo-pd-mais__item:hover { color: var(--text); }
.bo-pd-mais__item--perigo:hover { color: var(--danger); }
.bo-pd-mais__etapa { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-block: 1px solid var(--border); }
.bo-pd-mais__etapa label { font-size: var(--text-xs); color: var(--text-muted); }
.bo-pd-mais__linha { display: flex; gap: var(--space-2); }
.bo-pd-mais__linha select { flex: 1; min-width: 0; }

/* Os ambientes: medida, desenho e fábrica numa linha. */
.bo-amb { margin: 0 0 var(--space-6); }
.bo-amb h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.bo-amb__tabela th[scope="row"] { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.bo-amb__tabela a { color: var(--accent); }
.bo-amb__ok { color: var(--accent-soft); }
.bo-amb__falta { color: var(--text-muted); }

/* Uma seção por etapa: fechada, uma linha com o resumo; a da etapa atual, aberta. */
.bo-et { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.bo-et + .bo-et { margin-top: var(--space-3); }
.bo-et > .bo-et__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-4) var(--space-6); list-style: none; cursor: pointer; }
.bo-et > .bo-et__topo::-webkit-details-marker { display: none; }
.bo-et > .bo-et__topo::after { content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform .18s ease; }
.bo-et[open] > .bo-et__topo::after { transform: rotate(225deg); }
.bo-et > .bo-et__topo:hover .bo-et__nome { color: var(--accent); }
.bo-et__nome { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.bo-et__agora { padding: 1px 8px; border-radius: 999px; background: rgba(227, 201, 154, .14); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.bo-et__diz { font-size: var(--text-sm); color: var(--text-muted); }
.bo-et__diz.is-ok { color: var(--accent-soft); }
.bo-et__diz.is-pede { color: var(--text-soft); }
.bo-et.is-agora { border-color: rgba(227, 201, 154, .35); }
.bo-et[open] > .bo-et__topo { border-bottom: 1px solid var(--border); }
.bo-et__corpo { padding: var(--space-6); }
.bo-et__corpo > .adm-bloco:first-child, .bo-et__corpo > .bo-fab:first-child { margin-top: 0; }
.bo-et--consulta { margin-top: var(--space-8) !important; background: transparent; }
.bo-et .adm-bloco { background: var(--forest-1000); }
@media (max-width: 640px) {
  .bo-et > .bo-et__topo { padding: var(--space-4); }
  .bo-et__corpo { padding: var(--space-4); }
  .bo-et__diz { flex-basis: 100%; }
}
.bo-check__tirar { padding: 0 var(--space-2); border: 0; background: none; font-size: 1.1rem; line-height: 1; color: var(--text-muted); cursor: pointer; opacity: .5; }
.bo-check li:hover .bo-check__tirar, .bo-check__tirar:focus-visible { opacity: 1; }
.bo-check__tirar:hover { color: var(--danger); }

/* --- O item avulso da lista de compra: o item primeiro, a categoria vem do catálogo (hist 812) --- */
.bo-fab-avulso__diz { margin: 0 0 var(--space-4); max-width: 60ch; }
.bo-item-novo--avulso { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .bo-item-novo--avulso { grid-template-columns: minmax(14rem, 1fr) 5rem 6rem 8rem auto; }
}
.bo-item-novo.bo-item-novo--avulso { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- As etapas do pedido em ABAS na horizontal, cada uma com o resumo curto (hist 813) --- */
.bo-abas-etapa { gap: 0; margin: 0 0 var(--space-6); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; scroll-margin-top: var(--space-4); }
.bo-abas-etapa::-webkit-scrollbar { display: none; }
.bo-aba-etapa { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; min-width: 8.5rem; padding: var(--space-3) var(--space-4) var(--space-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.bo-aba-etapa__nome { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.bo-aba-etapa__diz { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.bo-aba-etapa__diz.is-ok { color: var(--accent-soft); }
.bo-aba-etapa__diz.is-pede { color: var(--text-soft); }
.bo-aba-etapa:hover .bo-aba-etapa__nome { color: var(--text); }
.bo-aba-etapa.is-atual { border-bottom-color: var(--accent); background: linear-gradient(to top, rgba(227, 201, 154, .06), transparent); }
.bo-aba-etapa.is-atual .bo-aba-etapa__nome { color: var(--accent); }
.bo-aba-etapa--consulta { flex-grow: 0; margin-left: auto; }
.bo-aba-etapa .bo-et__agora { padding: 0 6px; font-size: 0.625rem; }
.bo-et-painel__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-5); }
.bo-et-painel__topo h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.bo-et-painel__topo .bo-et__diz { margin: 0; }
.bo-et-painel > .adm-bloco:first-of-type, .bo-et-painel > .bo-fab:first-of-type { margin-top: 0; }
.js .bo-et-painel[hidden] { display: none; }
@media (max-width: 1023px) { .bo-abas-etapa { scroll-margin-top: 5.5rem; } }

/* --- A PRODUÇÃO: os pedidos em execução e cada ambiente para mover com um toque (hist 814) --- */
.bo-prod-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-6); }
.bo-prod-filtro { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--forest-1000); }
.bo-prod-filtro a { padding: var(--space-1) var(--space-4); border-radius: 999px; font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.bo-prod-filtro a:hover { color: var(--text); }
.bo-prod-filtro a.is-atual { background: rgba(227, 201, 154, .14); color: var(--accent); }
.bo-prod-contas { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-muted); }
.bo-prod-contas b { font-family: var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.bo-prod-contas .is-zero { opacity: .55; }
.bo-prod-contas .is-atraso, .bo-prod-contas .is-atraso b { color: var(--danger); }

.bo-prod-lista { display: flex; flex-direction: column; gap: var(--space-5); }
.bo-prod-ped { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.bo-prod-ped__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.bo-prod-ped__quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.bo-prod-ped__num { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); text-decoration: none; }
.bo-prod-ped__num:hover { color: var(--accent); }
.bo-prod-ped__quem span { font-size: var(--text-sm); color: var(--text-muted); }
.bo-prod-ped__fatos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-muted); }
.bo-prod-ped__fatos .is-ok { color: var(--accent-soft); }
.bo-prod-ped__fatos .is-atraso { color: var(--danger); }
.bo-prod-chip { padding: 1px 8px; border-radius: 999px; background: rgba(227, 201, 154, .12); color: var(--accent); font-family: var(--font-display); font-weight: 600; }
.bo-prod-ped__docs { display: flex; gap: var(--space-4); margin-left: auto; font-size: var(--text-sm); }
.bo-prod-ped__docs a { color: var(--accent); text-decoration: none; }
.bo-prod-ped__docs a:hover { text-decoration: underline; }
.bo-prod-ped > .bo-op { padding: var(--space-2) var(--space-5) var(--space-4); }

/* Uma linha por ambiente: nome · as seis etapas · quem, previsão, nota · tirar */
.bo-op__vazio { margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-muted); }
.bo-op__linha { display: grid; grid-template-columns: minmax(9rem, 12rem) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.bo-op__amb { display: flex; flex-direction: column; min-width: 0; }
.bo-op__amb strong { font-family: var(--font-display); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bo-op__amb small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-op__linha.is-atraso .bo-op__amb small { color: var(--danger); }
.bo-op__linha.is-pronto .bo-op__amb strong { color: var(--accent-soft); }

.bo-op__passos { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--forest-1000); border: 1px solid var(--border); }
.bo-op__passo { padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.bo-op__passo:hover { color: var(--text); background: rgba(227, 201, 154, .07); }
.bo-op__passo:active { transform: scale(.97); }
.bo-op__passo.is-feito { color: var(--accent-soft); }
.bo-op__passo.is-atual { background: var(--gold-500); color: var(--forest-1000); font-weight: 600; }
.bo-op__passo:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.bo-op__linha.is-pronto .bo-op__passo.is-atual { background: var(--accent-soft); }

.bo-op__dados { display: grid; grid-template-columns: minmax(7rem, 1fr) 9.5rem minmax(8rem, 1.4fr); gap: var(--space-2); align-items: center; min-width: 0; }
.bo-op__dados input { min-width: 0; padding: 6px 10px; font-size: var(--text-sm); }
.bo-op__dados .adm-salvo { grid-column: 1 / -1; font-size: var(--text-xs); }
.bo-op__dados .adm-salvo:empty { display: none; }

.bo-op__novo { display: flex; gap: var(--space-2); align-items: center; padding-top: var(--space-3); }
.bo-op__novo input { flex: 0 1 20rem; min-width: 0; padding: 6px 10px; font-size: var(--text-sm); }

@media (max-width: 1180px) {
  .bo-op__linha { grid-template-columns: minmax(0, 1fr) auto; }
  .bo-op__passos { grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; }
  .bo-op__dados { grid-column: 1 / -1; }
  .bo-op__tirar { grid-row: 1; grid-column: 2; }
}
@media (max-width: 640px) {
  .bo-op__passos { display: grid; grid-template-columns: repeat(3, 1fr); }
  .bo-op__passo { padding: 8px 4px; }
  .bo-op__dados { grid-template-columns: 1fr 1fr; }
  .bo-op__dados input[name="nota"] { grid-column: 1 / -1; }
  .bo-prod-ped__docs { margin-left: 0; }
}

/* --- PCP: tudo o que está rolando na marcenaria (hist 815) --- */
.pcp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-8); }
.pcp-numeros > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.pcp-numeros span { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pcp-numeros strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pcp-numeros small { font-size: var(--text-xs); color: var(--text-muted); }
.pcp-numeros .is-atraso strong { color: var(--danger); }
.pcp-numeros .is-ok strong { color: var(--accent-soft); }

.pcp-bloco { margin: 0 0 var(--space-8); }
.pcp-bloco > h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.pcp-bloco > h2 small { font-family: var(--font-body, inherit); font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
.pcp-n { padding: 0 8px; border-radius: 999px; background: rgba(227, 201, 154, .14); font-size: var(--text-xs); color: var(--accent); }
.pcp-vazio { margin: 0; padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--text-muted); }

.pcp-atencao { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); overflow: hidden; }
.pcp-atencao__item + .pcp-atencao__item { border-top: 1px solid var(--border); }
.pcp-atencao__item a { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); color: inherit; text-decoration: none; transition: background .15s; }
.pcp-atencao__item a:hover { background: rgba(227, 201, 154, .05); }
.pcp-atencao__ped { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.pcp-atencao__txt { font-size: var(--text-sm); color: var(--text-soft); }
.pcp-atencao__cli { font-size: var(--text-xs); color: var(--text-muted); }
.pcp-atencao__item.is-peso3 .pcp-atencao__txt { color: var(--danger); }
.pcp-atencao__item.is-peso1 .pcp-atencao__txt { color: var(--accent-soft); }

.pcp-funil { display: grid; grid-template-columns: repeat(6, minmax(9rem, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: 2px; }
.pcp-funil__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-card); background: var(--forest-900); border: 1px solid var(--border); }
.pcp-funil__col h3 { display: flex; justify-content: space-between; margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pcp-funil__col h3 span { color: var(--text); }
.pcp-funil__ped { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--forest-1000); border: 1px solid var(--border); text-decoration: none; transition: border-color .15s; }
.pcp-funil__ped:hover { border-color: var(--accent-soft); }
.pcp-funil__ped b { font-family: var(--font-display); font-size: var(--text-sm); color: var(--text); }
.pcp-funil__ped span { font-size: var(--text-xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcp-funil__ped small { font-size: var(--text-xs); color: var(--text-muted); }
.pcp-funil__ped small.is-atraso { color: var(--danger); }
.pcp-funil__vazio { margin: 0; font-size: var(--text-xs); color: var(--text-muted); opacity: .6; }

.pcp-crono { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.pcp-crono__prometido { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--danger); opacity: .8; }
.pcp-crono__prometido--legenda { position: static; display: inline-block; height: .9em; vertical-align: middle; margin-right: 4px; }

.pcp-duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pcp-agenda, .pcp-quem { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.pcp-agenda > li, .pcp-quem > li { padding: var(--space-3) var(--space-5); }
.pcp-agenda > li + li, .pcp-quem > li + li { border-top: 1px solid var(--border); }
.pcp-agenda__dia, .pcp-quem__nome { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); text-transform: capitalize; }
.pcp-agenda__dia b, .pcp-quem__nome { font-family: var(--font-display); font-weight: 600; color: var(--text); text-transform: none; }
.pcp-agenda__dia.is-hoje b { color: var(--accent); }
.pcp-quem__nome span { margin-left: var(--space-2); color: var(--text-muted); font-weight: 400; }
.pcp-quem__nome.is-sem { color: var(--text-muted); }
.pcp-agenda ul, .pcp-quem ul { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.pcp-agenda a, .pcp-quem a { color: var(--text-soft); text-decoration: none; }
.pcp-agenda a:hover, .pcp-quem a:hover { color: var(--accent); }
.pcp-quem ul span { font-size: var(--text-xs); color: var(--text-muted); }
.pcp-agenda__tipo { display: inline-block; min-width: 5.5rem; margin-right: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.pcp-agenda__tipo--instalação { color: var(--accent); }
.pcp-agenda__tipo--medição { color: var(--accent-soft); }
.pcp-agenda__tipo--entrega { color: var(--danger); }
.pcp-agenda__hora { margin-right: var(--space-1); font-variant-numeric: tabular-nums; color: var(--text); }

@media (max-width: 900px) {
  .pcp-duas { grid-template-columns: 1fr; }
  .pcp-atencao__item a { grid-template-columns: 1fr; gap: 2px; }
}
.pcp-bloco, .pcp-duas > * { min-width: 0; }
.pcp-funil { max-width: 100%; }
@media (max-width: 900px) { .pcp-funil { grid-template-columns: repeat(6, 10rem); } .pcp-crono { overflow-x: auto; } }
.pcp-crono-rolo { overflow-x: auto; border-radius: var(--radius-card); }
.bo-legenda .pcp-crono__prometido--legenda { width: 0; height: 14px; border-left: 2px dashed var(--danger); background: none; margin: 0 6px 0 4px; }

/* --- Produção: os campos da linha no estilo do sistema, com rótulo miúdo em cima (hist 816) --- */
.bo-op__dados { grid-template-columns: minmax(8rem, 1fr) 10rem minmax(9rem, 1.4fr); position: relative; }
.bo-op__campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.bo-op__campo > span { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-op input[type="text"], .bo-op input[type="date"] {
  box-sizing: border-box; width: 100%; height: 2.375rem; padding: 0 var(--space-3);
  background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.2;
  transition: border-color .15s;
}
.bo-op input::placeholder { color: var(--text-muted); opacity: .7; }
.bo-op input:hover { border-color: var(--accent-soft); }
.bo-op input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.bo-op input[type="date"] { font-variant-numeric: tabular-nums; }
.bo-op__linha.is-atraso input[name="previsao_em"] { border-color: var(--danger); color: var(--danger); }
/* "Salvo" não empurra a linha: aparece embaixo, por cima do respiro. */
.bo-op__dados .adm-salvo { position: absolute; right: 0; bottom: -1.15rem; grid-column: auto; }
.bo-op__linha { align-items: end; padding: var(--space-4) 0; }
.bo-op__amb { align-self: center; }
.bo-op__passos { align-self: end; }
.bo-op__passo { height: calc(2.375rem - 6px); }
.bo-op__tirar { align-self: end; padding-bottom: 6px; }
.bo-op__novo { padding-top: var(--space-4); }
.bo-op__novo input[type="text"] { flex: 0 1 20rem; }
@media (max-width: 640px) {
  .bo-op__dados { grid-template-columns: 1fr 1fr; }
  .bo-op__campo--nota { grid-column: 1 / -1; }
  .bo-op__passo { height: auto; }
}

/* --- O menu lateral em grupos: Vender, Obras, Base, Sistema (hist 817) --- */
.adm-side__grupo { margin: var(--space-4) 0 2px; padding: 0 var(--space-3); font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); opacity: .75; }
.adm-side__grupo--pe { margin-top: var(--space-5); }
.adm-side__nav .adm-item { padding-block: 9px; }
.adm-side__nav { overflow-y: auto; scrollbar-width: thin; }
/* Mais justo, para o menu inteiro caber sem rolar num notebook. */
.adm-side__nav .adm-item { padding-block: 7px; }
.adm-side__grupo { margin-top: var(--space-3); }
/* Configurações e Atualizações no pé, ao lado de sair; a novidade ganha um ponto dourado. */
.adm-user__acoes a[aria-current="page"] { color: var(--accent); }
.adm-user__atualizar { position: relative; }
.adm-user__atualizar.tem-novidade::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }
.adm-side__rodape { flex-wrap: wrap; row-gap: var(--space-2); }
.adm-side__rodape .adm-user { flex: 1 1 100%; }
.adm-side__rodape .adm-user__acoes { flex: 1 1 100%; justify-content: space-between; }

/* --- CONFIGURAÇÕES em abas: os padrões da casa num lugar só (hist 818) --- */
.cfg-abas .bo-aba-etapa { min-width: 10rem; }
.cfg-painel { max-width: 72rem; }
.cfg-titulo { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.cfg-intro { margin: 0 0 var(--space-5); max-width: 68ch; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.cfg-nota { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* Prazos: cinco campos com "dias" ao lado, e a soma no fim. */
.cfg-prazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); align-items: end; margin-bottom: var(--space-5); }
.cfg-dias { display: flex; align-items: center; gap: var(--space-2); }
.cfg-dias input { max-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.cfg-dias span { font-size: var(--text-sm); color: var(--text-muted); }
.cfg-prazos__soma { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: rgba(227, 201, 154, .08); }
.cfg-prazos__soma small { font-size: var(--text-xs); color: var(--text-muted); }
.cfg-prazos__soma strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent); }

/* Atalhos para as telas onde o resto é editado, com o valor em vigor. */
.cfg-atalhos { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0; }
.cfg-atalho { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.cfg-atalho:hover { border-color: var(--accent-soft); transform: translateY(-1px); }
.cfg-atalho__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-atalho__txt b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.cfg-atalho__txt small { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.cfg-atalho__vals { display: flex; gap: var(--space-5); }
.cfg-atalho__vals > span { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfg-atalho__vals small { font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cfg-atalho__ir { font-size: var(--text-lg); color: var(--accent); }

/* As listas: um cartão por lista, com quantos itens e se foi ajustada. */
.cfg-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--space-4); }
.cfg-lista { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.cfg-lista__topo { display: flex; justify-content: space-between; gap: var(--space-3); }
.cfg-lista__topo h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.cfg-lista__topo p { margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.cfg-lista__n { flex: none; align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: rgba(227, 201, 154, .1); font-size: var(--text-xs); color: var(--accent); white-space: nowrap; }
.cfg-lista textarea { width: 100%; padding: var(--space-3) var(--space-4); background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7; resize: vertical; }
.cfg-lista textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.cfg-lista__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); margin-top: auto; }
.cfg-lista__acoes .adm-campo__dica { margin-right: auto; }

.cfg-duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.cfg-pessoas { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-soft); }
.cfg-pessoas small { color: var(--text-muted); }
.cfg-pessoas a { color: inherit; text-decoration: none; }
.cfg-pessoas a:hover b { color: var(--accent); }
.cfg-pessoas .is-inativo { opacity: .55; }
.cfg-acesso p { margin: 0; font-size: var(--text-sm); color: var(--text-soft); line-height: 1.6; }
.cfg-acesso.is-aberto strong { color: var(--danger); }

@media (max-width: 820px) {
  .cfg-atalho { grid-template-columns: 1fr auto; }
  .cfg-atalho__vals { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .cfg-duas { grid-template-columns: 1fr; }
  .cfg-listas { grid-template-columns: 1fr; }
}
.cfg-duas > .adm-bloco { margin: 0; }
.cfg-repetido { color: var(--accent-soft) !important; }

/* --- PAINEL: hoje no alto; embaixo, Vender e Obras lado a lado (hist 819) --- */
.pn-topo h1 { font-size: var(--text-2xl); }
.pn-hoje { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border: 1px solid rgba(227, 201, 154, .3); border-radius: var(--radius-card); background: linear-gradient(to bottom right, rgba(227, 201, 154, .06), transparent 60%), var(--forest-900); }
.pn-hoje > h2, .pn-lado__topo h2 { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.pn-calmo { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.pn-lados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.pn-lado { padding: var(--space-5) var(--space-6) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); min-width: 0; }
.pn-lado__topo { display: flex; align-items: baseline; justify-content: space-between; }
.pn-lado__topo a { font-size: var(--text-sm); color: var(--accent); text-decoration: none; }
.pn-lado__topo a:hover { text-decoration: underline; }

.pn-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-5); }
.pn-nums a { display: flex; flex-direction: column; gap: 1px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--forest-1000); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color .15s; min-width: 0; }
.pn-nums a:hover { border-color: var(--accent-soft); }
.pn-nums b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pn-nums span { font-size: var(--text-sm); color: var(--text-soft); }
.pn-nums small { font-size: var(--text-xs); color: var(--text-muted); }
.pn-nums .is-pede b { color: var(--accent); }
.pn-nums .is-atraso b { color: var(--danger); }
.pn-nums .is-ok b { color: var(--accent-soft); }

.pn-sub { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.pn-sub span { font-weight: 400; color: var(--text-muted); }
.pn-explica { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.pn-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pn-lista > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.pn-lista > li > a, .pn-quem { flex: 1; min-width: 0; color: var(--text-soft); text-decoration: none; }
.pn-lista a:hover b { color: var(--accent); }
.pn-lista b { font-weight: 600; color: var(--text); }
.pn-quem { display: flex; flex-direction: column; gap: 1px; }
.pn-det { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.pn-quem .pn-det { white-space: normal; }
.pn-det.is-atraso, .pn-dias.is-atraso { color: var(--danger); }
.pn-dias { flex: none; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pn-lista > li.is-peso3 b { color: var(--danger); }
.pn-lista > li.is-peso1 b { color: var(--accent-soft); }
.pn-tag { flex: none; min-width: 5.5rem; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.pn-tag--medicao { color: var(--accent-soft); }
.pn-tag--instalacao { color: var(--accent); }
.pn-tag--retorno { color: var(--text-soft); }
.pn-mais { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.pn-mais a { color: var(--accent); text-decoration: none; }

@media (max-width: 1100px) { .pn-lados { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pn-nums { grid-template-columns: 1fr 1fr; }
  .pn-hoje, .pn-lado { padding: var(--space-4); }
  .pn-lista > li { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .pn-lista > li { flex-wrap: wrap; row-gap: 2px; }
  .pn-lista > li > a { flex: 1 1 calc(100% - 7rem); }
  .pn-lista > li > .pn-det { flex-basis: 100%; white-space: normal; padding-left: calc(5.5rem + var(--space-3)); }
  .pn-lista > li > .pn-quem + .pn-det { padding-left: 0; }
  .pn-tag { min-width: 5.5rem; }
}

/* --- FUNIL: a faixa das etapas, cartões compactos e ações de um toque (hist 820) --- */
.fn-busca input { box-sizing: border-box; width: 16rem; max-width: 100%; height: 2.5rem; padding: 0 var(--space-4); background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: var(--text-sm); }
.fn-busca input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.fn-faixa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: stretch; margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.fn-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.fn-etapas a { position: relative; display: flex; flex-direction: column; gap: 1px; height: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); background: var(--forest-1000); color: inherit; text-decoration: none; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); transition: background .15s; }
.fn-etapas li:first-child a { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: var(--radius) 0 0 var(--radius); padding-left: var(--space-4); }
.fn-etapas a:hover { background: rgba(227, 201, 154, .1); }
.fn-etapas__nome { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-etapas b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--text); line-height: 1.15; }
.fn-etapas small { font-size: var(--text-xs); color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.fn-resultado { display: flex; gap: var(--space-5); margin: 0; padding-left: var(--space-5); border-left: 1px solid var(--border); }
.fn-resultado > div { display: flex; flex-direction: column; justify-content: center; }
.fn-resultado dt { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.fn-resultado dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-resultado dd small { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
.fn-resultado .is-atraso dd { color: var(--danger); }

.fn-site { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border: 1px solid rgba(227, 201, 154, .3); border-radius: var(--radius-card); background: var(--forest-900); }
.fn-site > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.fn-site h2 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.fn-site header p { flex: 1; margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.fn-ver { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); }
.fn-filtro { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.fn-filtro a { color: var(--accent); }

.fn-quadro { display: grid; grid-template-columns: repeat(5, minmax(14rem, 1fr)); gap: var(--space-3); align-items: start; overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
.fn-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: var(--radius-card); background: rgba(227, 201, 154, .03); border: 1px solid var(--border); scroll-snap-align: start; }
.fn-col__topo { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--space-1) var(--space-1); }
.fn-col__topo h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.fn-col__topo span { font-size: var(--text-xs); color: var(--text-muted); }
.fn-col__vazia { margin: 0; padding: var(--space-4) 0; text-align: center; font-size: var(--text-xs); color: var(--text-muted); opacity: .6; }

.fn-cartao { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--forest-900); border: 1px solid var(--border); }
.fn-cartao.is-pede { border-color: rgba(214, 118, 98, .45); }
.fn-cartao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.fn-cartao__nome { font-family: var(--font-display); font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.fn-cartao__nome:hover { color: var(--accent); }
.fn-cartao__valor { flex: none; font-size: var(--text-xs); color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.fn-cartao__det { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.fn-cartao__quando { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-soft); }
.fn-cartao__quando.is-atraso { color: var(--danger); }
.fn-cartao__quando.is-hoje { color: var(--accent); }
.fn-cartao__acoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
.fn-acao { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: none; font: inherit; font-size: var(--text-xs); color: var(--text-soft); text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; transition: border-color .15s, color .15s; }
.fn-acao:hover { border-color: var(--accent-soft); color: var(--text); }
.fn-acao:active { transform: scale(.97); }
.fn-acao--zap { color: var(--accent-soft); }
.fn-acao--perigo { color: var(--danger); }
.fn-acao--perigo:hover { border-color: var(--danger); color: var(--danger); }
.fn-mais { position: relative; }
.fn-mais > summary::-webkit-details-marker { display: none; }
.fn-mais[open] > summary { border-color: var(--accent-soft); color: var(--text); }
.fn-mais__menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: var(--space-4); width: 17rem; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); box-shadow: 0 14px 34px rgba(4, 14, 10, .5); }
.fn-col:last-child .fn-mais__menu, .fn-col:nth-last-child(2) .fn-mais__menu { right: 0; }
.fn-col:first-child .fn-mais__menu { right: auto; left: 0; }
.fn-mais__menu form { display: flex; flex-direction: column; gap: var(--space-2); }
.fn-mais__menu form + form { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.fn-mais__menu label { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.fn-mais__menu input, .fn-mais__menu select { box-sizing: border-box; width: 100%; height: 2.25rem; padding: 0 var(--space-3); background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-size: var(--text-sm); }
.fn-mais__datas { display: flex; flex-wrap: wrap; gap: 4px; }

.fn-lista { padding: var(--space-2) var(--space-4); }
.fn-perdas { margin: var(--space-8) 0 0; max-width: 40rem; }
.fn-perdas h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.fn-perdas h2 small { font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.fn-perdas ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fn-perdas li { display: grid; grid-template-columns: 12rem 1fr 2rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-soft); }
.fn-perdas i { height: 6px; border-radius: 3px; background: var(--accent-soft); }
.fn-perdas b { text-align: right; color: var(--text); }
.fn-rodape { margin: var(--space-6) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

@media (max-width: 1100px) {
  .fn-faixa { grid-template-columns: 1fr; }
  .fn-resultado { padding: var(--space-3) 0 0; border-left: 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .fn-etapas { grid-template-columns: repeat(5, minmax(6.5rem, 1fr)); overflow-x: auto; }
  .fn-quadro { grid-template-columns: repeat(5, 82%); }
  .fn-busca input { width: 100%; }
  .fn-perdas li { grid-template-columns: 8rem 1fr 2rem; }
}
/* O menu do cartão abre dentro dele: a coluna rola de lado e cortaria um menu flutuante. */
.fn-mais[open] { flex-basis: 100%; }
.fn-mais__menu { position: static; width: auto; margin-top: var(--space-2); padding: var(--space-3); box-shadow: none; background: var(--forest-1000); }
.fn-mais__menu select { line-height: 1.2; padding-right: 2rem; font-size: var(--text-sm); }
/* Com o grupo Ferramentas (hist 821): um pouco mais justo, para o menu inteiro caber sem rolar. */
.adm-side__nav .adm-item { padding-block: 6px; }
.adm-side__grupo { margin-top: var(--space-3); margin-bottom: 0; }

/* --- Medições: a quarentena (hist 825) --- */
.bo-quar__tipo { padding: 1px 8px; border-radius: 999px; background: rgba(227, 201, 154, .12); color: var(--accent); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; }
.bo-quar__tipo.is-producao { background: rgba(143, 191, 155, .14); color: var(--accent-soft); }
.bo-quar__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.bo-quar__acoes a { color: var(--accent); }
.bo-quar__enviar { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .bo-quar__enviar { grid-template-columns: minmax(16rem, 22rem) auto; } }
.bo-quar__enviar .adm-btn { white-space: nowrap; }

/* --- FUNIL: o cartão como lugar de trabalho — registrar, editar, arrastar (hist 829) --- */
.fn-quadro { grid-template-columns: repeat(5, minmax(13rem, 1fr)); }
.fn-col { transition: background-color .15s, border-color .15s; }
.fn-col.is-alvo { border-color: var(--accent); background: rgba(227, 201, 154, .08); }
.fn-col__topo { flex-direction: column; align-items: stretch; gap: 1px; }
.fn-col__topo h2 { display: flex; justify-content: space-between; align-items: baseline; }
.fn-col__topo h2 span { font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.fn-col__topo small { min-height: 1em; font-size: var(--text-xs); color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.fn-col__vazia { padding: var(--space-5) var(--space-2); border: 1px dashed var(--border); border-radius: var(--radius); opacity: 1; }

.fn-cartao { gap: 6px; padding: var(--space-3); cursor: grab; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.fn-cartao:hover { border-color: rgba(227, 201, 154, .35); }
.fn-cartao[draggable="false"] { cursor: default; }
.fn-cartao.is-arrastando { opacity: .45; }
.fn-cartao__topo { align-items: center; gap: var(--space-2); }
.fn-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(227, 201, 154, .14); color: var(--accent); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: .02em; }
.fn-cartao__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fn-cartao__quem .fn-cartao__det { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-cartao__valor { align-self: flex-start; }
.fn-cartao__amb { margin: 0; padding: 2px 8px; align-self: flex-start; border-radius: 6px; background: rgba(255, 255, 255, .04); font-size: var(--text-xs); color: var(--text-soft); }
.fn-cartao__quando { margin: 0; }
.fn-cartao__ultima { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--forest-1000); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.fn-cartao__ultima b { color: var(--text-soft); font-weight: 600; }
.fn-cartao__acoes { align-items: flex-start; gap: 4px; margin-top: 4px; }
.fn-acao--forte { border-color: rgba(227, 201, 154, .5); color: var(--accent); }
.fn-avancar { margin-left: auto; }

/* os painéis do cartão: abrem dentro dele, um de cada vez */
.fn-painel { display: contents; }
.fn-painel > summary { list-style: none; }
.fn-painel > summary::-webkit-details-marker { display: none; }
.fn-painel[open] > summary { background: rgba(227, 201, 154, .14); border-color: var(--accent); color: var(--text); }
.fn-painel > .fn-form { order: 10; flex-basis: 100%; }
.fn-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--forest-1000); border: 1px solid var(--border); }
.fn-form textarea, .fn-form input[type="text"], .fn-form select { box-sizing: border-box; width: 100%; padding: 8px 10px; background: var(--forest-900); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.fn-form textarea { resize: vertical; min-height: 3.6rem; line-height: 1.45; }
.fn-form textarea:focus, .fn-form input:focus, .fn-form select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.fn-form .adm-btn { align-self: flex-start; }
.fn-rot, .fn-campos label > span { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.fn-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fn-chips label { position: relative; cursor: pointer; }
.fn-chips input { position: absolute; opacity: 0; pointer-events: none; }
.fn-chips span { display: inline-block; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: var(--text-xs); color: var(--text-soft); transition: background .12s, border-color .12s; }
.fn-chips input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--forest-1000); font-weight: 600; }
.fn-chips input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.fn-campos { display: flex; flex-direction: column; gap: var(--space-2); }
.fn-campos + .fn-campos { padding-top: var(--space-2); border-top: 1px solid var(--border); }
.fn-campos label { display: flex; flex-direction: column; gap: 3px; }

/* um contato novo, no pé da coluna */
.fn-novo > summary { list-style: none; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; text-align: center; }
.fn-novo > summary::-webkit-details-marker { display: none; }
.fn-novo > summary:hover, .fn-novo[open] > summary { color: var(--accent); border-color: var(--accent-soft); }
.fn-novo .fn-form { margin-top: var(--space-2); }

@media (max-width: 720px) { .fn-quadro { grid-template-columns: repeat(5, 86%); } .fn-cartao { cursor: default; } }
/* colunas estreitas: o valor desce para baixo do nome, e a caixa de texto tem altura para escrever */
.fn-cartao__topo { flex-wrap: wrap; }
.fn-cartao__valor { order: 3; flex-basis: 100%; padding-left: calc(2rem + var(--space-2)); margin-top: -2px; font-weight: 600; }
.fn-form textarea { min-height: 4.8rem; }

/* --- FUNIL: o quadro ocupa a tela toda (hist 830) ---
   A página do funil solta o limite de largura do conteúdo; a faixa do topo fica
   mais baixa, para o quadro subir; a coluna vazia encolhe e cede o espaço às
   outras; e as ações do cartão ficam numa linha, com o "passar para" embaixo. */
.adm-main:has(> .fn-quadro) { max-width: none; }
@media (min-width: 1024px) { .adm-main:has(> .fn-quadro) { padding-inline: var(--space-6); } }
.fn-faixa { margin-bottom: var(--space-4); padding: var(--space-3); }
.fn-etapas a { padding-block: var(--space-2); }
.fn-etapas b { font-size: var(--text-lg); }
.fn-ver { margin-bottom: var(--space-3); }
@media (min-width: 721px) {
  .fn-quadro { display: flex; gap: var(--space-3); }
  .fn-col { flex: 1 1 0; min-width: 15rem; padding: var(--space-2); }
  .fn-col:has(.fn-col__vazia) { flex: 0 0 12rem; min-width: 12rem; }
  .fn-col:has(.fn-col__vazia) .fn-col__vazia { padding: var(--space-4) var(--space-2); }
}
.fn-cartao { padding: var(--space-3) var(--space-3) var(--space-2); }
.fn-cartao__acoes { gap: 4px 5px; }
.fn-avancar { order: 5; flex-basis: 100%; margin: 2px 0 0; }
.fn-avancar .fn-acao { width: 100%; justify-content: center; border-style: dashed; color: var(--text-muted); }
.fn-avancar .fn-acao:hover { border-style: solid; color: var(--accent); }
@media (min-width: 1024px) { .adm-main:has(> .fn-quadro) { padding-inline: var(--space-5); } }
@media (min-width: 721px) { .fn-quadro { gap: var(--space-2); } }
.fn-col__topo small:empty { display: none; }
.fn-cartao__acoes > .fn-acao, .fn-cartao__acoes > .fn-painel > summary { flex: 1 1 auto; justify-content: center; padding: 4px 8px; }

/* --- FUNIL: a janela "Editar contato" (hist 831) --- */
.fn-modal { display: flex; flex-direction: column; gap: var(--space-3); }
.fn-modal .adm-campo { margin: 0; min-width: 0; }
.fn-modal__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); align-items: end; }
.fn-modal__acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.fn-modal__link { font-size: var(--text-sm); color: var(--accent); }
.fn-modal__bloco { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.fn-modal__bloco h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.fn-modal__bloco p { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.fn-modal__bloco select, .fn-modal__bloco input[type="text"] { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.fn-modal__bloco--perigo h3 { color: var(--danger); }
.fn-modal__linha--fim { grid-template-columns: 1fr auto; align-items: center; }
.fn-modal__linha--fim p { margin: 0; }
@media (max-width: 560px) { .fn-modal__linha--fim { grid-template-columns: 1fr; } }

/* --- FUNIL: a lixeira no cartão (hist 832) ---
   Discreta até a mão chegar no cartão; no celular, sem hover, fica sempre à vista. */
.fn-excluir { flex: none; align-self: flex-start; margin: -4px -4px 0 auto; }
.fn-excluir__bt { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; opacity: .55; transition: opacity .15s, color .15s, border-color .15s; }
.fn-excluir__bt svg { width: 16px; height: 16px; }
.fn-cartao:hover .fn-excluir__bt, .fn-excluir__bt:focus-visible { opacity: 1; }
.fn-excluir__bt:hover { color: var(--danger); border-color: rgba(224, 112, 96, .4); }
.fn-excluir__bt:active { transform: scale(.94); }
@media (hover: none) { .fn-excluir__bt { opacity: 1; } }

/* --- CONFIGURAÇÕES em três grupos: Padrões da casa, Sistema, Utilidades (hist 833) ---
   Uma coluna de assuntos à esquerda, com o nome do grupo em cima de cada
   bloco, e o assunto aberto à direita. No celular a coluna vira uma faixa
   que rola de lado. */
.cfg-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.cfg-nav { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.cfg-nav__grupo { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cfg-nav__grupo:first-child { margin-top: var(--space-1); }
.cfg-nav__item { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px var(--space-3); border-radius: var(--radius); color: var(--text-soft); text-decoration: none; transition: background-color .15s, color .15s; }
.cfg-nav__item span { font-size: var(--text-sm); font-weight: 500; }
.cfg-nav__item small { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-nav__item:hover { background: rgba(227, 201, 154, .06); color: var(--text); }
.cfg-nav__item.is-atual { background: rgba(227, 201, 154, .12); color: var(--text); }
.cfg-nav__item.is-atual::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
.cfg-nav__item.is-atual small { color: var(--accent-soft); }
.cfg-conteudo { min-width: 0; }
.cfg-conteudo > .cfg-painel { margin-top: 0; }
.cfg-grupo { margin: 0 0 4px; font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-soft); }
.cfg-sub { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
.cfg-sub + .cfg-atalhos { margin-top: 0; }

/* usuários */
.cfg-usuarios { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.cfg-usuario { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.cfg-usuario__linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); }
.cfg-usuario__quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cfg-usuario__quem b { font-weight: 600; color: var(--text); }
.cfg-usuario__quem > small { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.cfg-voce { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(227, 201, 154, .12); font-size: 0.6875rem; font-weight: 500; color: var(--accent); }
.cfg-usuario__quando { display: flex; flex-direction: column; text-align: right; font-size: var(--text-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cfg-usuario__quando small { font-size: 0.625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cfg-usuario__editar { display: contents; }
.cfg-usuario__editar > summary { list-style: none; }
.cfg-usuario__editar > summary::-webkit-details-marker { display: none; }
.cfg-usuario__forms { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cfg-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-3); align-items: end; }
.cfg-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cfg-form label > span { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cfg-form input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.cfg-form input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.cfg-form--novo { padding: var(--space-4) var(--space-5) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); }
.cfg-form--novo h3 { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.cfg-perigo { color: var(--danger); }

/* estados das integrações */
.cfg-estados { display: flex; flex-direction: column; margin: var(--space-5) 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.cfg-estados li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.cfg-estados li + li { border-top: 1px solid var(--border); }
.cfg-estados li > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.cfg-estados b { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.cfg-estados small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.cfg-estado { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.cfg-estado.is-ok { background: #8fbf9b; box-shadow: 0 0 0 3px rgba(143, 191, 155, .15); }
.cfg-estado.is-falta { background: #e0a46f; box-shadow: 0 0 0 3px rgba(224, 164, 111, .15); }

@media (max-width: 960px) {
  .cfg-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .cfg-nav { position: static; flex-direction: row; align-items: stretch; overflow-x: auto; padding: var(--space-2); }
  .cfg-nav__grupo { display: none; }
  .cfg-nav__item { flex: none; }
  .cfg-nav__item small { display: none; }
  .cfg-form { grid-template-columns: 1fr; }
  .cfg-usuario__linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cfg-usuario__quando { display: none; }
}
.cfg-nav { position: static; }
@media (min-width: 961px) and (min-height: 820px) { .cfg-nav { position: sticky; } }

/* --- Configurações, Sistema e Utilidades em páginas próprias (hist 834) --- */
.cfg-sub--primeiro { margin-top: 0; }
.cfg-abas { margin-bottom: var(--space-5); }
/* o ícone do pé da página em que se está fica aceso, como o item do menu */
.adm-user__acoes a[aria-current="page"] { background: rgba(227, 201, 154, .14); color: var(--accent); }

/* --- Configurações: o bloco de números de cada aba (hist 838) --- */
.cfg-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; margin-bottom: var(--space-4); }
.cfg-numeros .adm-campo { margin: 0; }
.cfg-numeros .cfg-dias input { max-width: 6.5rem; }
.cfg-lista--texto textarea { font-family: var(--font-body); line-height: 1.6; }
.cfg-painel > .adm-bloco + .cfg-listas, .cfg-painel > .cfg-listas + .cfg-atalhos { margin-top: var(--space-5); }
.cfg-numeros .adm-campo > label { min-height: 2.7em; display: flex; align-items: flex-end; }

/* --- Configurações › Proposta e empresa (hist 839) --- */
.cfg-empresa { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.cfg-empresa .adm-campo { margin: 0; }
.cfg-empresa__largo { grid-column: 1 / -1; }
.cfg-garantia { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cfg-garantia li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--forest-1000); }
.cfg-garantia b { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.cfg-garantia small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.cfg-empresa .adm-campo > label { min-height: 1.4em; }

/* --- Configurações: chaves de liga/desliga (hist 840) --- */
.cfg-chaves { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.cfg-chave { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--forest-1000); cursor: pointer; }
.cfg-chave:hover { border-color: var(--accent-soft); }
.cfg-chave input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.cfg-chave span { display: flex; flex-direction: column; gap: 2px; }
.cfg-chave b { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.cfg-chave small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

/* =====================================================================
   CONFIGURAÇÕES E SISTEMA, NO JEITO DAS CONFIGURAÇÕES DO CLAUDE (hist 841)
   Coluna de assuntos à esquerda; à direita, cada bloco é uma lista de
   linhas: o nome e a explicação à esquerda, o campo à direita, com um fio
   entre elas. Antes os campos eram uma grade de cartões: o nome comprido
   empurrava o campo para baixo e nada alinhava.
   ===================================================================== */
.cfg-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--space-8, 2.5rem); align-items: start; margin-top: var(--space-2); }
.cfg-nav { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; }
.cfg-nav__item { display: block; padding: 9px 12px; border-radius: var(--radius); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s; }
.cfg-nav__item::before { content: none !important; }
.cfg-nav__item:hover { background: rgba(227, 201, 154, .06); color: var(--text); }
.cfg-nav__item.is-atual { background: rgba(227, 201, 154, .12); color: var(--text); }
.cfg-conteudo { min-width: 0; max-width: 52rem; }
.cfg-conteudo > .cfg-painel { margin-top: 0; padding-top: 0; max-width: none; }
.cfg-conteudo .cfg-titulo { font-size: var(--text-xl); margin-bottom: var(--space-1); }

/* os blocos: sem caixa pesada, um título e as linhas */
.cfg-painel > .adm-bloco { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-5) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--forest-900); }
.cfg-painel > .adm-bloco > h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.cfg-painel > .adm-bloco > .adm-bloco__intro { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.cfg-painel > .adm-bloco > .adm-acoes { margin: 0; padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--border); justify-content: flex-end; }

/* as linhas */
.cfg-numeros, .cfg-empresa, .cfg-prazos { display: block; margin: 0; }
.cfg-numeros > .adm-campo, .cfg-empresa > .adm-campo, .cfg-prazos > .adm-campo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, 18rem); column-gap: var(--space-6); row-gap: 2px;
  align-items: center; margin: 0; padding: 14px 0; border-top: 1px solid var(--border);
}
.cfg-numeros > .adm-campo:first-child, .cfg-empresa > .adm-campo:first-child, .cfg-prazos > .adm-campo:first-child { border-top: 0; }
.cfg-numeros > .adm-campo > label, .cfg-empresa > .adm-campo > label, .cfg-prazos > .adm-campo > label {
  grid-column: 1; grid-row: 1; display: block; min-height: 0; margin: 0;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
}
.cfg-numeros > .adm-campo > .adm-campo__dica, .cfg-empresa > .adm-campo > .adm-campo__dica { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.cfg-numeros > .adm-campo > input, .cfg-numeros > .adm-campo > select, .cfg-numeros > .adm-campo > .cfg-dias,
.cfg-empresa > .adm-campo > input, .cfg-prazos > .adm-campo > .cfg-dias { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
.cfg-dias { justify-content: flex-end; }
.cfg-numeros .cfg-dias input, .cfg-prazos .cfg-dias input { width: 6rem; max-width: 6rem; text-align: right; }
.cfg-dias span { min-width: 2.2rem; }
.cfg-empresa__largo { grid-column: auto; }
.cfg-prazos__soma { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: var(--space-2) 0 var(--space-3); }

/* as chaves de liga/desliga, também em linhas */
.cfg-chaves { gap: 0; margin: 0; }
.cfg-chave { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.cfg-chave:first-child { border-top: 0; }
.cfg-chave:hover { border-color: var(--border); }
.cfg-chave input { grid-column: 2; grid-row: 1; justify-self: end; }
.cfg-chave span { grid-column: 1; grid-row: 1; }
.cfg-chave b { font-weight: 500; }

/* as listas: duas por linha no largo, uma no estreito */
.cfg-conteudo .cfg-listas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); margin-bottom: var(--space-6); }
.cfg-conteudo .cfg-atalhos { margin-top: 0; }

/* Sistema: os usuários e os estados, na mesma largura */
.cfg-conteudo .cfg-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-conteudo .cfg-form > button { grid-column: 1 / -1; justify-self: end; }
.cfg-conteudo .cfg-form--novo h3 { grid-column: 1 / -1; }

@media (max-width: 960px) {
  .cfg-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .cfg-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
  .cfg-nav__item { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) {
  .cfg-numeros > .adm-campo, .cfg-empresa > .adm-campo, .cfg-prazos > .adm-campo { grid-template-columns: 1fr; }
  .cfg-numeros > .adm-campo > input, .cfg-numeros > .adm-campo > .cfg-dias, .cfg-empresa > .adm-campo > input, .cfg-prazos > .adm-campo > .cfg-dias { grid-column: 1; grid-row: auto; }
  .cfg-dias { justify-content: flex-start; }
  .cfg-conteudo .cfg-form { grid-template-columns: 1fr; }
}/* o "campo + campo" do formulário dava 20px a mais entre as linhas; e linha sem explicação fica numa altura só */
.cfg-numeros > .adm-campo + .adm-campo, .cfg-empresa > .adm-campo + .adm-campo, .cfg-prazos > .adm-campo + .adm-campo { margin-top: 0; }
.cfg-numeros > .adm-campo, .cfg-empresa > .adm-campo, .cfg-prazos > .adm-campo { padding: 12px 0; }
.cfg-numeros > .adm-campo:not(:has(> .adm-campo__dica)) > *, .cfg-empresa > .adm-campo:not(:has(> .adm-campo__dica)) > *, .cfg-prazos > .adm-campo:not(:has(> .adm-campo__dica)) > * { grid-row: 1; }
@media (max-width: 960px) { .cfg-nav { scrollbar-width: none; } .cfg-nav::-webkit-scrollbar { display: none; } }

/* --- Configurações: a lista montada na tela (hist 842) --- */
.cfg-itens__lista { counter-reset: item; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cfg-item { counter-increment: item; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 6px; align-items: center; }
.cfg-item__n::before { content: counter(item); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(227, 201, 154, .12); font-size: var(--text-xs); font-weight: 600; color: var(--accent); }
.cfg-item input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 7px 10px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.cfg-item input:first-of-type { font-weight: 500; }
.cfg-item input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.cfg-item__acoes { display: flex; gap: 2px; }
.cfg-item__acoes button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.cfg-item__acoes button:hover { border-color: var(--border-strong); color: var(--text); }
.cfg-item__acoes .cfg-item__tirar:hover { border-color: rgba(224, 112, 96, .45); color: var(--danger); }
.cfg-item:first-child [data-item="subir"], .cfg-item:last-child [data-item="descer"] { visibility: hidden; }
.cfg-itens__mais { align-self: flex-start; margin-top: 2px; padding: 7px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: none; color: var(--text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.cfg-itens__mais:hover { border-color: var(--accent-soft); color: var(--accent); }
.cfg-itens.is-mexido .cfg-lista__acoes .adm-btn { border-color: var(--accent); color: var(--accent); }
/* a lista de etapas pede a largura toda */
.cfg-listas > .cfg-itens { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .cfg-item { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .cfg-item input[name="d[]"] { grid-column: 2 / -1; }
}
/* --- Configurações: todas as listas montadas na tela (hist 843) --- */
.cfg-item--um { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
.cfg-item--dia { grid-template-columns: 1.6rem 6.5rem minmax(0, 1fr) auto; }
.cfg-item select { box-sizing: border-box; width: 100%; min-height: 38px; padding: 7px 8px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.cfg-item:has(select) { grid-template-columns: 1.6rem minmax(0, 1fr) 5.5rem auto; }
.cfg-item input:first-of-type { font-weight: 400; }
.cfg-listas > .cfg-itens { grid-column: auto; }
.cfg-listas > .cfg-itens--largo { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .cfg-item--dia, .cfg-item:has(select) { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .cfg-item--dia > input[name="d[]"], .cfg-item > select { grid-column: 2 / -1; }
}.cfg-conteudo .cfg-listas { grid-template-columns: minmax(0, 1fr); }

/* --- Orçamento: a peça avulsa entra pelo menu "Acrescentar", e não por uma dobra a mais (hist 844) --- */
.bo-avulsa-dobra:not([open]) { display: none; }
/* --- Orçamento › Cesta: a barra da oficina, a cesta vazia e o novo ambiente (hist 845) --- */
.bo-oficina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--forest-1000); }
.bo-oficina__rot { margin-right: var(--space-2); font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-oficina a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-soft); text-decoration: none; }
.bo-oficina a svg { width: 15px; height: 15px; }
.bo-oficina a:hover { border-color: var(--accent-soft); color: var(--accent); }
.bo-oficina small { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.bo-cesta-vazia__acoes { justify-content: center; margin-top: var(--space-4); }
.bo-cesta-vazia__acoes .adm-btn svg { width: 16px; height: 16px; }
.bo-ambiente-novo { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--space-2) 0 var(--space-4); padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.bo-ambiente-novo svg { width: 15px; height: 15px; }
.bo-ambiente-novo:hover { border-color: var(--accent-soft); color: var(--accent); }
/* --- Orçamento › Mandar: as condições, o por-ambiente recolhido e o que falta (hist 846) --- */
.bo-fechamento > .bo-decisoes { margin-bottom: var(--space-5); }
.bo-por-ambiente__dobra { margin: 0 0 var(--space-3); }
.bo-por-ambiente__dobra > summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); }
.bo-por-ambiente__dobra[open] > summary { margin-bottom: var(--space-2); }
.bo-aprovacao__form .bo-falta-aprovar { margin: 0 0 var(--space-3); }
.bo-aprovacao__form button[disabled] { opacity: .45; cursor: not-allowed; }.bo-fechamento > .bo-decisoes + * , .bo-fechamento > .bo-decisoes ~ #totais { margin-top: 0; }

/* --- Orçamento › Preço em duas colunas, na ordem em que se decide (hist 846) ---
   As condições foram para o Mandar; a coluna da direita delas fica com o
   resultado. À esquerda, como cobrar; à direita, o preço e o prazo; o aviso
   de "aplicar a conta", quando há, atravessa por cima. */
.bo-orc .bo-secao--preco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }
.bo-orc .bo-secao--preco > #conta-hoje { grid-column: 1 / -1; grid-row: 2; }
.bo-orc .bo-secao--preco > #regras-do-preco { grid-column: 1; grid-row: 3 / span 2; }
.bo-orc .bo-secao--preco > #fechamento { grid-column: 2; grid-row: 3; }
.bo-orc .bo-secao--preco > #cronograma { grid-column: 2; grid-row: 4; }
@media (max-width: 1180px) {
  .bo-orc .bo-secao--preco { grid-template-columns: minmax(0, 1fr); }
  .bo-orc .bo-secao--preco > #conta-hoje, .bo-orc .bo-secao--preco > #regras-do-preco, .bo-orc .bo-secao--preco > #fechamento, .bo-orc .bo-secao--preco > #cronograma { grid-column: 1; grid-row: auto; }
}
/* duas colunas apertavam "Como cobrar" (o texto da chapa passava por cima dos botões): uma coluna só, na largura de leitura */
.bo-orc .bo-secao--preco { grid-template-columns: minmax(0, 60rem); }
.bo-orc .bo-secao--preco > #conta-hoje { grid-column: 1; grid-row: 2; }
.bo-orc .bo-secao--preco > #regras-do-preco { grid-column: 1; grid-row: 3; }
.bo-orc .bo-secao--preco > #fechamento { grid-column: 1; grid-row: 4; }
.bo-orc .bo-secao--preco > #cronograma { grid-column: 1; grid-row: 5; }

/* --- Orçamento: o sinal de cada passo (hist 848) --- */
.bo-passo { position: relative; }
.bo-passo__sinal { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; vertical-align: middle; }
.bo-passo__sinal.is-falta { background: var(--accent); box-shadow: 0 0 0 3px rgba(227, 201, 154, .18); }
.bo-passo__sinal.is-ok { background: #8fbf9b; box-shadow: 0 0 0 3px rgba(143, 191, 155, .18); }
/* --- Orçamento: endereço do cadastro, quem mediu e desconto em % (hist 849) --- */
.bo-obra__mesmo { margin-bottom: var(--space-3); }
.bo-obra__mesmo small { color: var(--text-soft); }
[data-endereco-outro][hidden] { display: none !important; }
[data-quem-outro] { margin-top: 6px; }
[data-quem-outro][hidden] { display: none !important; }
.bo-desconto { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.bo-desconto__un { font-size: var(--text-sm); color: var(--text-muted); }
.bo-desconto input { width: 100%; text-align: right; }
/* --- Orçamento › Cesta: a cesta travada explica por quê; o menu do ambiente aparece (hist 847) --- */
.bo-cesta-travada { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-soft); border-radius: var(--radius); background: rgba(227, 201, 154, .06); font-size: var(--text-sm); color: var(--text-soft); line-height: 1.6; }
.bo-cesta-travada a { color: var(--accent); }
.bo-ambiente__tirar svg { width: 14px; height: 14px; }
.bo-ambiente__acoes .bo-mais__botao { border: 1px solid var(--border-strong); color: var(--text-soft); opacity: 1; }
.bo-ambiente__acoes .bo-mais__botao:hover, .bo-ambiente__acoes .bo-mais[open] > .bo-mais__botao { border-color: var(--accent-soft); color: var(--accent); }
/* --- Orçamento: revisar o vendido (hist 849) --- */
.bo-cesta-travada__acao { display: inline-block; margin: 6px 0 0; }
.bo-cesta-travada__acao .adm-btn svg { width: 14px; height: 14px; }

/* --- Orçamento: concluir a revisão do vendido (hist 850) --- */
.bo-concluir-revisao { margin-left: 6px; vertical-align: middle; }
.bo-concluir__muda { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--forest-1000); }
.bo-concluir__muda > div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.bo-concluir__muda dt { color: var(--text-muted); }
.bo-concluir__muda dd { margin: 0; text-align: right; color: var(--text); }
.bo-concluir__muda small { color: var(--text-muted); }
/* --- Pedido › Instalação: o link da tela do instalador (hist 851) --- */
.bo-instalador-link__linha { display: flex; gap: 8px; align-items: center; margin-bottom: var(--space-3); }
.bo-instalador-link__linha input { flex: 1; min-width: 0; padding: 8px 10px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-soft); font: inherit; font-size: var(--text-sm); }
.bo-instalador-link .adm-acoes { flex-wrap: wrap; align-items: center; }

/* --- Pedido › Instalação: a equipe da instalação (hist 853) --- */
.bo-para-equipe__rot { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-para-equipe__quem { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* --- Pedido › Instalação no padrão de Configurações (hist 854) --- */
.bo-inst-bloco { display: flex; flex-direction: column; gap: var(--space-3); }
.bo-inst-bloco > .adm-bloco__intro { margin: 0; }
.bo-inst-bloco__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.bo-inst-bloco__topo h2 { margin: 0; }
.bo-inst-bloco__est { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bo-inst-bloco .bo-barra { margin: 0; }
.bo-inst-form { display: block; margin: 0; }
.bo-inst-form + .bo-inst-form .cfg-numeros > .adm-campo:first-child { border-top: 1px solid var(--border); }
.bo-inst-form .adm-salvo:empty { display: none; }
.bo-inst-form .cfg-numeros > .adm-campo > input, .bo-inst-form .cfg-numeros > .adm-campo > select { width: 100%; max-width: 17rem; justify-self: end; }
.bo-inst-rot { display: block; margin: 0 0 6px; font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bo-inst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-inst-pct { justify-content: flex-start; }
.bo-inst-pct input { width: 6rem; }

/* a lista montada linha a linha */
.bo-viva { display: flex; flex-direction: column; gap: 6px; }
.bo-viva__lista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bo-viva__lista:empty { display: none; }
.bo-viva__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.bo-viva__item input { box-sizing: border-box; width: 100%; min-height: 38px; padding: 7px 10px; background: var(--forest-1000); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); }
.bo-viva__item input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.bo-viva__tirar { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.bo-viva__tirar:hover { border-color: rgba(224, 112, 96, .45); color: var(--danger); }
.bo-viva .cfg-itens__mais { margin-top: 0; }

/* o que levar */
.bo-levar__grupo { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bo-levar__grupo > .adm-campo__dica { margin: 0; }
.bo-levar__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bo-levar__cab h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); }
.bo-levar__atalhos { display: flex; gap: var(--space-3); }
.bo-levar__marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 6px; }
.bo-levar__marca, .bo-levar__ins { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--forest-1000); font-size: var(--text-sm); color: var(--text-soft); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.bo-levar__marca:hover, .bo-levar__ins:hover { border-color: var(--border-strong); }
.bo-levar__marca:has(input:checked), .bo-levar__ins:has(input[type=checkbox]:checked) { border-color: var(--accent-soft); color: var(--text); }
.bo-levar__marca input, .bo-levar__ins input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.bo-levar__insumos { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.bo-levar__ins { cursor: default; padding-right: 6px; }
.bo-levar__ins label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.bo-levar__qtd { display: flex; align-items: center; gap: 6px; flex: none; }
.bo-levar__qtd input { box-sizing: border-box; width: 4.5rem; min-height: 30px; padding: 4px 8px; background: var(--forest-900); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.bo-levar__qtd input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.bo-levar__qtd small { min-width: 1.6rem; font-size: var(--text-xs); color: var(--text-muted); }
.bo-levar__ins:not(:has(input[type=checkbox]:checked)) .bo-levar__qtd input { opacity: .55; }
@media (max-width: 640px) {
  .bo-inst-form .cfg-numeros > .adm-campo > input, .bo-inst-form .cfg-numeros > .adm-campo > select { max-width: none; }
}
.adm-campo .bo-inst-chips .adm-chip { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; }

/* --- Pedido › Fabricação: a equipe da fábrica e os dias (hist 860) --- */
.bo-fab-papel { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.bo-fab-papel:first-of-type { padding-top: 0; border-top: 0; }
.bo-fab-dias { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bo-fab-dias li { padding: 12px 0; border-top: 1px solid var(--border); }
.bo-fab-dias li:first-child { border-top: 0; padding-top: 0; }
.bo-fab-dias__cab { display: flex; align-items: baseline; gap: 8px; }
.bo-fab-dias__cab span { color: var(--text-muted); font-size: var(--text-sm); }
.bo-fab-dias__cab form { margin-left: auto; }
.bo-fab-dias p { margin: 6px 0 0; font-size: var(--text-sm); color: var(--text-soft); }
.bo-fab-dias__pend { color: var(--accent) !important; }
/* --- Ferramentas › Equipe (hist 861) --- */
.bo-colab-lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bo-colab-lista > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.bo-colab-lista > li:first-child { border-top: 0; }
.bo-colab-lista > li.is-inativo .bo-colab-lista__txt { opacity: .55; }
.bo-colab-lista__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 22rem; }
.bo-colab-lista__txt > span { font-size: var(--text-sm); color: var(--text-soft); }
.bo-colab-lista__txt small { font-size: var(--text-xs); color: var(--text-muted); }
.bo-colab-papel { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 2px; background: rgba(227, 201, 154, .12); color: var(--accent); font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; vertical-align: 2px; }
.bo-colab-lista .adm-acoes { flex-wrap: wrap; align-items: center; margin: 0; }
.bo-colab-lista .adm-acoes form { margin: 0; }
.bo-colab-editar { flex-basis: 100%; }
.bo-colab-editar summary, .bo-colab-novo summary { cursor: pointer; font-size: var(--text-sm); color: var(--accent); }
.bo-colab-editar[open] summary, .bo-colab-novo[open] summary { margin-bottom: var(--space-3); }
.bo-colab-novo { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.bo-colab-form { margin: 0; }
/* ==========================================================================
   PEDIR MELHORIA (hist 871)

   O botão redondo do canto, em toda tela. Fica acima do conteúdo e abaixo
   do modal; o aviso de "guardado" sobe para não nascer em cima dele.
   ========================================================================== */
.bo-fab {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 40;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--gold-600);
  box-shadow: 0 10px 26px rgba(4, 14, 11, 0.5);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), filter .16s ease;
}
.bo-fab svg { width: 24px; height: 24px; stroke-width: 1.6; }
.bo-fab:hover { filter: brightness(1.06); transform: translateY(-2px); }
.bo-fab:active { transform: scale(.96); }
.bo-fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bo-fab ~ .adm-toast { bottom: calc(var(--space-5) + 64px); }
@media (prefers-reduced-motion: reduce) { .bo-fab { transition: none; } }
@media print { .bo-fab { display: none; } }

#bo-melhoria .bo-modal__caixa { max-width: 34rem; margin-inline: auto; }
#bo-melhoria textarea { width: 100%; resize: vertical; min-height: 7rem; }
.bo-melhoria-tipos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.bo-melhoria-tipos .bo-chip { cursor: pointer; }
.bo-melhoria-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.bo-melhoria-tipos .bo-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bo-melhoria-tipos .bo-chip:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* A lista em /melhorias */
.bo-melhorias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bo-melhoria {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.bo-melhoria--feita { border-left-color: var(--forest-600); opacity: .82; }
.bo-melhoria--descartada { border-left-color: var(--border-strong); opacity: .62; }
.bo-melhoria__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.bo-melhoria__num { font-family: var(--font-display); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.bo-melhoria__tipo--correcao { border-color: var(--danger); color: var(--danger); }
.bo-melhoria__texto { margin: var(--space-3) 0 0; max-width: 75ch; line-height: var(--leading-snug); white-space: normal; }
.bo-melhoria__resposta { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--border); font-size: var(--text-sm); color: var(--text-soft); max-width: 75ch; }
.bo-melhoria__acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-3); }
.bo-melhoria__acoes form { margin: 0; }
.bo-melhoria__fechar { flex: 1 1 22rem; }
.bo-melhoria__fechar > summary { list-style: none; display: inline-flex; cursor: pointer; }
.bo-melhoria__fechar > summary::-webkit-details-marker { display: none; }
.bo-melhoria__fechar[open] > summary { margin-bottom: var(--space-3); }
.bo-melhoria__fechar textarea { width: 100%; }
.bo-melhoria__apagar {
  background: none; border: 0; padding: var(--space-2) 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px;
}
.bo-melhoria__apagar:hover { color: var(--danger); }

/* Os prints do pedido de melhoria (hist 880): no modal e na lista. */
.melhoria-prints { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.melhoria-prints:empty { display: none; }
.melhoria-print { position: relative; }
.melhoria-print img { display: block; width: 112px; height: 72px; object-fit: cover; object-position: top left;
                      border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 6px; background: #fff; }
.melhoria-prints--lista .melhoria-print img { width: 160px; height: 100px; }
.melhoria-print__tirar { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
                         border: 0; background: var(--danger, #c0563d); color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; }
.melhoria-anexar { color: var(--gold-500, #d6b97f); text-decoration: underline; cursor: pointer; }
.melhoria-anexar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.melhoria-prints__diz kbd { font: inherit; font-size: .9em; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; }
.melhoria-prints__aviso:empty { display: none; }

/* ==========================================================================
   A LATERAL QUE RECOLHE (hist 881)

   Aberta, ícone e nome; recolhida, uma faixa de ícones — o botão ☰ do topo
   troca, como o menu do YouTube, e o navegador lembra a escolha. No celular
   nada muda: ela continua saindo da tela.

   E o tamanho: as sete ações do rodapé (30px cada) não cabiam nos 14,5rem e
   empurravam a coluna para o lado, com barra de rolagem horizontal. Agora
   elas dividem a largura que houver.
   ========================================================================== */
.adm-side { overflow-x: hidden; }
.adm-side__rodape .adm-user__acoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; justify-content: stretch;
}
.adm-side__rodape .adm-user__acoes a { width: auto; min-width: 0; }
.adm-side__recolher { display: none; }

@media (min-width: 1024px) {
  .adm-side__topo { justify-content: flex-start; padding-inline: var(--space-1); }
  .adm-side__recolher {
    display: grid; place-items: center; flex-shrink: 0;
    width: 34px; height: 34px; padding: 0;
    background: none; border: 0; border-radius: 50%;
    color: var(--text-soft); cursor: pointer;
    transition: background-color 160ms var(--ease-standard);
  }
  .adm-side__recolher:hover { background: rgba(227, 201, 154, 0.1); color: var(--cream); }
  .adm-side__recolher:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
  .adm-side__recolher svg { width: 20px; height: 20px; }

  html.lateral-pronta .adm-side { transition: width 200ms var(--ease-standard), padding 200ms var(--ease-standard); }
  html.lateral-pronta body.tem-lateral .adm-conteudo { transition: margin-left 200ms var(--ease-standard); }

  html.lateral-recolhida { --side-largura: 4.5rem; }
  html.lateral-recolhida .adm-side { padding-inline: var(--space-2); }
  html.lateral-recolhida .adm-side__topo { flex-direction: column; gap: var(--space-3); padding-inline: 0; }
  html.lateral-recolhida .adm-side__marca span,
  html.lateral-recolhida .adm-item__rotulo,
  html.lateral-recolhida .adm-user__nome { display: none; }
  /* Os grupos viram um fio entre os blocos de ícones. */
  html.lateral-recolhida .adm-side__grupo {
    font-size: 0; height: 1px; padding: 0; opacity: 1;
    margin: var(--space-3) var(--space-2); background: var(--border);
  }
  html.lateral-recolhida .adm-item { justify-content: center; padding-inline: 0; position: relative; }
  html.lateral-recolhida .adm-item svg { width: 20px; height: 20px; }
  /* O contador vira um selo no canto do ícone. */
  html.lateral-recolhida .adm-item__contador {
    position: absolute; top: 1px; right: 6px; min-width: 16px; padding: 0 4px;
    font-size: 0.5625rem; line-height: 16px;
  }
  html.lateral-recolhida .adm-side__rodape .adm-user { justify-content: center; }
  /* As ações do pé em duas colunas: empilhadas uma a uma, comiam o espaço do menu. */
  html.lateral-recolhida .adm-side__rodape { padding-top: var(--space-3); }
  html.lateral-recolhida .adm-side__rodape .adm-user__acoes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; justify-items: center; }
  html.lateral-recolhida .adm-side__rodape .adm-user__acoes a { width: 28px; height: 28px; }
  html.lateral-recolhida .adm-side__rodape .adm-user__acoes svg { width: 16px; height: 16px; }
}