/* ==========================================================================
   Estilos das telas — carregado depois de estilo.css.

   Separado do base de propósito: o base traz cores, tipografia e a casca, que
   raramente mudam; aqui ficam os componentes de cada tela, que mudam a cada
   funcionalidade nova. Separar evita reescrever um arquivo grande a cada
   ajuste pequeno.
   ========================================================================== */

/* ── Cabeçalho de tela ───────────────────────────────────────────────────── */

.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.cabeca.sem-espaco { margin-bottom: .6rem; }
.sem-topo { margin-top: 0; }
.cabeca .apoio { margin-bottom: 0; }

.migalha { margin: 0 0 .75rem; font-size: .88rem; }
.migalha a { text-decoration: none; }
.migalha a:hover { text-decoration: underline; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.filtros label { font-size: .74rem; font-weight: 600; color: var(--suave); }
/* O campo de busca cresce até um limite. Sem ele, numa janela de 1920px a
   caixa de busca de Empresas media 1.472px — uma faixa vazia atravessando a
   tela para caber uma palavra. O que sobra fica para o espaço em branco à
   direita, que separa os filtros do resto. */
.filtros .cresce { flex: 1 1 16rem; max-width: 30rem; }
.filtros input,
.filtros select {
  display: block;
  width: 100%;
  margin-top: .25rem;
  min-height: var(--alt-controle);
  padding: 0 .6rem;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
}
/*
 * A única exceção à altura única do botão, e por um motivo visível.
 *
 * Aqui o botão fica encostado num campo de texto da mesma linha, e campo
 * continua com --alt-controle porque se lê e se corrige. Um botão de 28px ao
 * lado de um campo de 38px não parece padronizado: parece torto — que é
 * exatamente o defeito que a padronização veio resolver. Então nesta barra ele
 * acompanha o vizinho.
 */
.filtros .btn { min-height: var(--alt-controle); font-size: .9rem; }
.limpar { align-self: center; font-size: .85rem; }

/*
 * ── A linha de etiquetas embaixo dos filtros ──────────────────────────────
 * Ela continua a barra de filtros — é mais um jeito de filtrar —, e por isso
 * fica colada nela e não abre uma seção nova.
 *
 * Antes cada tela puxava esse parágrafo para cima com `margin-top: -.75rem`
 * escrito na marra no HTML: três telas repetindo o mesmo número, todas
 * dependendo de o respiro de baixo da barra continuar valendo 1.25rem. É a
 * barra que fecha o próprio espaço quando a linha vem logo depois — o valor
 * mora num lugar só, e ninguém precisa empurrar nada.
 */
.filtros:has(+ .filtros-tags) { margin-bottom: .5rem; }
.filtros-tags { margin-top: 0; }

/* ── Cartões e listas ────────────────────────────────────────────────────── */

.cartao + .cartao,
.cartao + .paginas,
.quadro + .cartao,
.indicadores + .duas-colunas { margin-top: .9rem; }

.cartao.sem-espaco { padding: 0; }
.cartao.vazio { text-align: center; padding: 1.75rem 1.25rem; }

.pilha { display: flex; flex-direction: column; gap: .9rem; }
.pilha > .cartao + .cartao { margin-top: 0; }

/*
 * ── min-width zero nas colunas ────────────────────────────────────────────
 * Coluna de grid nasce com min-width automático: ela se recusa a ficar menor
 * que o conteúdo mais largo que tem dentro. Basta um select com o nome de uma
 * empresa comprida para a coluna crescer, a grade passar da tela e a página
 * inteira ganhar barra de rolagem lateral — num layout que caberia.
 */
.duas-colunas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.duas-colunas > * { min-width: 0; }

/*
 * Campo não passa da largura de onde mora. Um select mede pelo texto da maior
 * opção, e uma razão social comprida empurrava a tela.
 */
input, select, textarea { max-width: 100%; }

/*
 * ── Seletor do tamanho do que está escolhido ──────────────────────────────
 * Um <select> nasce com a largura da opção mais comprida da lista. Escolhido
 * "Só contato", ele continua reservando o espaço de "Cliente e fornecedor", e
 * sobra um vão morto antes da seta — em toda linha da tabela.
 *
 * `field-sizing: content` faz o campo medir o que está escolhido, e
 * acompanha a troca sozinho. Onde a propriedade ainda não existe, o
 * select-justo.js faz a mesma conta — e se cala onde ela existe.
 */
select:not([multiple]):not([size]) { field-sizing: content; }

/*
 * Campo de arquivo do tamanho do que ele mostra.
 *
 * As regras de formulário dão largura total a todo campo — certo para um
 * campo de texto, exagero para um botão que diz "Escolher arquivo" e o nome
 * do que foi escolhido. Aqui ele mede o próprio conteúdo, e cresce só se o
 * nome do arquivo for comprido.
 */
.campo-anexo input[type="file"] {
  width: auto;
  max-width: 100%;
  field-sizing: content;
  padding: .25rem .4rem;
  font-size: .82rem;
}

@media (min-width: 58rem) {
  /* 3 para 2 é o desenho de "conteúdo mais lateral" — o painel e a
     negociação. Ali as colunas não são pares: uma carrega a lista, a outra
     os controles. */
  .duas-colunas { grid-template-columns: 3fr 2fr; }

  /*
   * Quando os dois cartões são pares — as duas empresas emissoras, os dois
   * jeitos de criar proposta — as colunas precisam ser iguais.
   *
   * minmax(0, 1fr) e não 1fr: `1fr` é `minmax(auto, 1fr)`, e o piso `auto` é
   * o tamanho mínimo do conteúdo. Um parágrafo de aviso mais comprido num dos
   * cartões empurrava a coluna dele para 804px contra 536px do outro — foi o
   * que a medição mostrou na tela de Emissoras.
   */
  .duas-colunas.iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dentro de uma coluna, a coluna já é o limite. O teto de 40rem do formulário
   sobrava como faixa morta à direita, dentro do próprio cartão. */
.duas-colunas .formulario,
.pilha .formulario { max-width: none; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.lista li { display: flex; flex-direction: column; gap: .1rem; }

.forte { color: var(--tinta); font-weight: 600; }
/*
 * ── Por que a exceção para células ─────────────────────────────────────────
 * .sutil nasceu para a segunda linha de um cartão — nome em cima, telefone
 * embaixo — e por isso é display:block. Numa <td> isso é destrutivo: a célula
 * deixa de ser table-cell, sai do desenho da tabela e empilha em cima da
 * anterior. Foi o que quebrou a lista de contatos quando ganhou a coluna
 * "Criado por": duas células sutis seguidas viraram uma pilha, e o cabeçalho
 * passou a apontar para o lugar errado.
 *
 * A célula continua célula; o que está dentro dela é que fica discreto.
 */
.sutil { display: block; color: var(--suave); font-size: .82rem; }
td.sutil, th.sutil { display: table-cell; }

.dados { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.dados div { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; }
.dados dt { color: var(--suave); font-size: .82rem; }
.dados dd { margin: 0; color: var(--tinta); }

.acoes-linha { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ── Selos e etiquetas ───────────────────────────────────────────────────── */

.selo {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: var(--raio-pilula);
  font-size: .72rem;
  font-weight: 600;
}
.selo-novo { background: #fff1dc; color: var(--brand-texto); }
.selo-ok   { background: var(--signal-fundo); color: var(--signal); }
.selo-frio { background: var(--superficie-3); color: var(--suave); }

.etiqueta {
  display: inline-block;
  margin-top: .2rem;
  padding: .05rem .45rem;
  border-radius: var(--raio-botao);
  font-size: .68rem;
  font-weight: 600;
  background: var(--superficie-3);
  color: var(--suave);
}
.etiqueta-volpe { background: #e8eef7; color: #1f4f8f; }
.etiqueta-ambas { background: #efe8f7; color: #5b3f8f; }
.etiqueta-dono { background: #e9f5ee; color: #1f6b43; }

/* ── Ações dentro da tabela ──────────────────────────────────────────────── */

.acao > summary {
  cursor: pointer;
  color: var(--brand-texto);
  font-weight: 600;
  font-size: var(--fonte-botao);
  list-style: none;
  min-height: var(--alt-botao);
  display: inline-flex;
  align-items: center;
}
.acao > summary::-webkit-details-marker { display: none; }
.acao[open] > summary { margin-bottom: .5rem; }

.mini { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.mini label { font-size: .72rem; font-weight: 600; color: var(--suave); }
.mini input,
.mini select {
  display: block;
  width: 100%;
  min-height: var(--alt-controle-mini);
  margin-top: .2rem;
  padding: 0 .5rem;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/*
 * `.btn-pequeno` deixou de ser um tamanho e virou só um nome antigo.
 *
 * Agora todo botão tem a medida do seletor pequeno, então "pequeno" é o
 * padrão. A classe fica porque está escrita em centenas de lugares, e
 * removê-la à mão de todas as telas é muito risco para nenhum ganho — mas ela
 * não muda mais nada, e por isso não pode reintroduzir a diferença que este
 * bloco veio acabar.
 */
.btn-pequeno { min-height: var(--alt-botao); padding: 0 .7rem; font-size: var(--fonte-botao); }

.botao-texto {
  background: none;
  border: 0;
  padding: .2rem .3rem;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  color: var(--suave);
  text-decoration: underline;
}
.botao-texto:hover { color: var(--danger); }

.paginas { display: flex; align-items: center; gap: 1rem; justify-content: center; padding: 1rem 0; }

/*
 * O contador entre os dois botões vinha com o respiro de baixo do `.apoio`, e
 * num flex centrado a margem entra na conta: o texto subia meio passo e ficava
 * mais alto que "Anterior" e "Próxima". Numa lista ele estava certo (usa
 * `.sutil`, que não tem margem) e em duas, torto — o mesmo rodapé de paginação
 * com dois alinhamentos diferentes conforme a tela.
 */
.paginas > * { margin-bottom: 0; }

/* ── Quadro do pipeline ──────────────────────────────────────────────────── */

.quadro {
  display: grid;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
}

.coluna {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: .9rem;
  min-width: 0;
}
.coluna-ganho { border-color: rgba(15, 122, 61, .35); }
.coluna-perda { border-color: var(--linha-forte); background: var(--superficie-2); }

.coluna-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.coluna-topo h2 { font-size: .88rem; color: var(--tinta); margin: 0; }

.conta {
  background: var(--superficie-3);
  color: var(--suave);
  border-radius: var(--raio-pilula);
  padding: 0 .5rem;
  font-size: .74rem;
  font-weight: 600;
}
.coluna-soma { margin: .2rem 0 .8rem; font-size: .78rem; color: var(--suave); }
.coluna-vazia { font-size: .8rem; color: var(--suave); margin: 0; }

.cartao-negocio {
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: .7rem;
  margin-bottom: .6rem;
}
.cartao-titulo { display: block; color: var(--tinta); font-weight: 600; font-size: .88rem; text-decoration: none; }
.cartao-titulo:hover { text-decoration: underline; }
.cartao-valor { margin: .3rem 0; font-weight: 700; color: var(--tinta); font-size: .9rem; }

.avatar-pequeno { width: 20px; height: 20px; font-size: .6rem; display: inline-grid; vertical-align: middle; }

.mover select {
  width: 100%;
  margin-top: .5rem;
  min-height: var(--alt-controle-mini);
  padding: 0 .4rem;
  font: inherit;
  font-size: .8rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--corpo);
}

.troca-funil label { font-size: .74rem; font-weight: 600; color: var(--suave); }
.troca-funil select {
  display: block;
  margin-top: .25rem;
  min-height: var(--alt-controle);
  padding: 0 .6rem;
  font: inherit;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
}

/* ── Indicadores do painel ───────────────────────────────────────────────── */

.indicadores {
  display: grid;
  gap: .7rem;
  margin: 0 0 .9rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.indicador {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
}
.indicador-atencao { border-color: var(--brand); }
.indicador dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.indicador dd { margin: .2rem 0 0; }

.numero { display: block; font-size: 1.4rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.numero-ok { color: var(--signal); }

/* ── Etapas do funil ─────────────────────────────────────────────────────── */

.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.etapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.etapa-ganho { border-color: rgba(15, 122, 61, .35); }
.etapa-perda { border-color: var(--linha-forte); }

.etapa-linha { display: flex; gap: .4rem; align-items: center; flex: 1 1 18rem; }
.etapa-linha input {
  flex: 1;
  min-height: var(--alt-controle-mini);
  padding: 0 .5rem;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/*
 * O campo de nova etapa fica logo abaixo da lista de etapas, e é o mesmo
 * controle que o de renomear: um nome de etapa, com um botão ao lado. Só que
 * nascera com outra medida — .6rem de recuo contra .5rem, .9rem de texto
 * contra .88rem e o raio grande no lugar do raio de botão. Empilhados, os
 * cantos do de baixo eram visivelmente mais redondos que os de cima.
 *
 * Agora ele copia `.etapa-linha input`, que é o que se repete na tela.
 */
.linha-add { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.linha-add input {
  flex: 1 1 14rem;
  min-height: var(--alt-controle-mini);
  padding: 0 .5rem;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/* ── Histórico ───────────────────────────────────────────────────────────── */

.historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.historico li { border-left: 2px solid var(--linha-forte); padding-left: .8rem; }
.historico-texto { margin: 0; color: var(--tinta); font-size: .9rem; }
.historico-detalhe {
  margin: .3rem 0 0;
  padding: .5rem .6rem;
  background: var(--superficie-2);
  border-radius: var(--raio-botao);
  font-size: .86rem;
}

/* ── Abas ────────────────────────────────────────────────────────────────── */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--linha);
}
.abas a {
  padding: .55rem .9rem;
  text-decoration: none;
  color: var(--suave);
  font-size: .9rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--brand-texto); border-bottom-color: var(--brand); }

/* ── Tarefas ─────────────────────────────────────────────────────────────── */

.tarefas { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }

.tarefa-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: .9rem 1rem;
}
.tarefa-vencida { border-color: var(--danger); background: var(--danger-fundo); }

.tarefa-corpo { min-width: 0; flex: 1 1 20rem; }
.tarefa-titulo { margin: 0 0 .2rem; color: var(--tinta); font-weight: 600; font-size: .95rem; }
.tarefa-acao { flex: none; }

.selo-alta { background: var(--danger-fundo); color: var(--danger); margin-left: .35rem; }

/* ── Equipe ──────────────────────────────────────────────────────────────── */

.pessoa { display: flex; align-items: center; gap: .7rem; }
.pessoa .avatar { background: var(--grafite-500); }

.linha-inativa { opacity: .55; }

/* ── O cliente que se prometeu procurar e não se procurou ─────────────────
 *
 * Pinta as células, e não o <tr>: célula de tabela tem fundo próprio, e um
 * background no <tr> fica atrás dele, invisível. É a mesma razão que faz
 * `.linha-mes-atual`, no fechamento do mês, repetir th e td.
 *
 * Fundo, e não borda vermelha: a linha vizinha também tem borda, e duas
 * bordas coladas viram uma listra que não se sabe de quem é. O tom é o mesmo
 * `--danger-fundo` da tarefa vencida — é o mesmo aviso, em outra tela.
 */
.linha-atrasada > th,
.linha-atrasada > td { background: var(--danger-fundo); }

/* ── O calendário dentro da célula ────────────────────────────────────────
 *
 * Ocupa a linha de baixo da célula, sob o "em 12 dias": ao lado, o campo
 * empurraria a coluna para o dobro da largura em toda a tabela.
 */
.quando-editor {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
}

.quando-editor input[type="date"] {
  min-height: var(--alt-controle-mini);
  padding: 0 .4rem;
  font: inherit;
  font-size: .82rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/* Com JavaScript o campo se envia sozinho e o botão é ruído — mas ele existe
   no HTML, e continua sendo o que salva quando o script não roda. */
.quando-editor.salva-na-hora button { display: none; }

.em-linha select {
  min-height: var(--alt-controle-mini);
  padding: 0 .5rem;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/* ── Marcadores do modelo de proposta ────────────────────────────────────── */

.marcadores { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.marcadores div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.marcadores dt { margin: 0; }
.marcadores dd { margin: 0; font-size: .8rem; color: var(--suave); text-align: right; }

/* Rodapé de tabela — o total da proposta. */
tfoot th, tfoot td {
  border-top: 2px solid var(--linha-forte);
  padding: .75rem;
  text-align: left;
  color: var(--tinta);
}

/* ── Financeiro: gráfico de fluxo ────────────────────────────────────────── */

.grafico-fluxo { width: 100%; height: 250px; display: block; }

.grafico-linha { stroke: var(--linha); stroke-width: 1; }
.grafico-rotulo { fill: var(--suave); font-size: 9px; }
.grafico-zero { stroke: var(--linha-forte); stroke-width: 1.5; }
.grafico-mes-atual { fill: var(--superficie-2); }
.grafico-mes-rotulo { fill: var(--suave); font-size: 10px; }
.grafico-mes-rotulo-atual { fill: var(--brand-texto); font-size: 10px; font-weight: 700; }

.grafico-receber-prev { fill: color-mix(in srgb, var(--brand) 30%, transparent); }
.grafico-receber-real { fill: var(--signal); }
.grafico-pagar-prev { fill: color-mix(in srgb, var(--grafite-500) 30%, transparent); }
.grafico-pagar-real { fill: var(--grafite-500); }

.grafico-legenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .9rem 0 0;
  padding: 0; list-style: none; font-size: .78rem; color: var(--suave);
}
.grafico-legenda li { display: flex; align-items: center; gap: .4rem; }
.grafico-chave { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.grafico-chave-receber-prev { background: color-mix(in srgb, var(--brand) 30%, transparent); }
.grafico-chave-receber-real { background: var(--signal); }
.grafico-chave-pagar-prev { background: color-mix(in srgb, var(--grafite-500) 30%, transparent); }
.grafico-chave-pagar-real { background: var(--grafite-500); }

.linha-mes-atual { background: var(--superficie-2); }
.linha-mes-atual th, .linha-mes-atual td { background: var(--superficie-2); }

/* "Ver mais" do fluxo — revelação nativa, sem JavaScript. */
.fluxo-mais { margin-top: .75rem; }
.fluxo-mais summary {
  cursor: pointer; color: var(--brand-texto); font-weight: 600; font-size: .88rem;
  list-style: none; min-height: var(--alt-controle); display: inline-flex; align-items: center;
}
.fluxo-mais summary::-webkit-details-marker { display: none; }
.fluxo-mais summary::before { content: "▾ "; }
.fluxo-mais[open] summary::before { content: "▴ "; }

/* ── Financeiro: responsivo ──────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .grafico-fluxo { height: 200px; }
  .grafico-legenda { font-size: .72rem; gap: .4rem .9rem; }
}

/* ── Documentos ──────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros label { width: 100%; }
  /* Em coluna, o flex-grow do campo de busca esticaria VERTICALMENTE e abriria
     um vão de 200px no meio do cartão. Aqui ele volta ao tamanho do conteúdo. */
  .filtros .cresce { flex: 0 0 auto; }
  .filtros .btn, .filtros .btn-secundario { width: 100%; }
  .em-linha { flex-direction: column; align-items: stretch; gap: .4rem; }
  .em-linha select, .em-linha input { width: 100%; }
  .abas { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .abas a { white-space: nowrap; }
}

.em-linha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── Gerar comissão para mais de uma pessoa ──────────────────────────────────
 *
 * A célula tem duas partes que se comportam diferente: a lista de pessoas, que
 * cresce para baixo a cada "+ pessoa", e os botões, que ficam onde estão.
 * `.em-linha` não servia porque ele põe tudo na mesma faixa e a segunda pessoa
 * entraria ao lado da primeira, alargando a coluna em vez de empilhar.
 */
.gerar-comissao { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }

/* Comissões: consulta compacta e cadastro separado, com leitura em cartões no celular. */
.comissao-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.comissao-indicadores .cartao { margin: 0; }
.comissao-indicadores dt { color: var(--corpo); font-weight: 600; }
.comissao-indicadores dd { margin: .5rem 0 0; font-size: 1.7rem; font-weight: 750; color: var(--tinta); }
.comissoes-ui summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 600; }
.comissoes-ui details[open] > summary { margin-bottom: .75rem; }
.comissao-opcional { border: 1px solid var(--linha); padding: .75rem; border-radius: var(--raio); }
.comissao-exportar .btn { margin: .25rem; }
.comissao-acoes-conteudo { display: flex; flex-direction: column; gap: .5rem; min-width: 10rem; white-space: normal; }
.comissao-lista { width: 100%; }
.comissao-lista th { max-width: 22rem; overflow-wrap: anywhere; }
.comissao-lista th[scope="row"] { text-align: left; }
.comissao-lista th .sutil { display: block; margin-top: .25rem; }
.comissao-indicadores dd .sutil { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 400; color: var(--corpo); }
.comissao-lista td { vertical-align: top; }
.comissao-lista .acoes-celula { white-space: normal; }
.comissao-lista .comissao-conta { white-space: normal; min-width: 8rem; }
.comissao-lista .em-linha { flex-wrap: wrap; }
.comissoes-ui .btn, .comissoes-ui select, .comissoes-ui input { min-height: 44px; }
.comissoes-ui .comissionado { display: grid; grid-template-columns: minmax(10rem, 1fr) 6rem; align-items: end; gap: .4rem .75rem; }
.comissoes-ui .comissionado > label { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: .82rem; white-space: normal; }
.comissoes-ui .comissionado > label:first-child { grid-column: 1; grid-row: 1; }
.comissoes-ui .comissionado > select { grid-column: 1; grid-row: 2; width: 100%; }
.comissoes-ui .comissionado > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.comissoes-ui .comissionado > input { grid-column: 2; grid-row: 2; width: 100%; }
.comissoes-ui .comissionado > output { grid-column: 1 / -1; color: var(--tinta); font-weight: 600; }
.comissoes-ui [data-comissionados] { width: 100%; }
.comissoes-ui .tabela-gerar td, .comissoes-ui .tabela-gerar th { white-space: normal; overflow-wrap: anywhere; }
.comissoes-ui [data-remover-comissionado] { grid-column: 1 / -1; justify-self: start; }
.comissoes-ui .gerar-acoes { margin-top: .5rem; }
.comissao-visoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.comissao-visoes [aria-current="page"] { border-color: var(--brand-texto); color: var(--brand-texto); background: var(--superficie); }
.comissao-cadastro-cartao { max-width: 44rem; }
.comissoes-ui .comissao-cadastro { align-items: stretch; gap: .75rem; }
.comissao-venda-resumo { padding: .75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); overflow-wrap: anywhere; }
.comissao-venda-resumo p { margin: .25rem 0; }
.comissoes-ui [hidden] { display: none !important; }
.comissao-modo { border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem; }
.comissao-modo label { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1rem; }
.comissao-modo input[type="radio"] { width: 1.2rem; min-height: 1.2rem; }
@media (max-width: 50rem) {
  .comissao-indicadores { grid-template-columns: 1fr; gap: .5rem; }
  .comissao-lista, .comissao-lista tbody, .comissao-lista tr, .comissao-lista th, .comissao-lista td { display: block; width: auto; }
  .comissao-lista thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .comissao-lista tr { border-bottom: 1px solid var(--linha); padding: 1rem; }
  .comissao-lista th, .comissao-lista td { border: 0; padding: .4rem 0; text-align: left; max-width: none; }
  .comissao-lista td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .82rem; color: var(--corpo); font-weight: 600; margin-bottom: .3rem; }
  .comissao-lista .acoes-celula { display: block; }
  .comissoes-ui .comissionado { grid-template-columns: minmax(0, 1fr) 6rem; }
  .comissoes-ui .filtros { align-items: stretch; }
}

.comissionado { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.comissionado + .comissionado { margin-top: .4rem; }

.gerar-acoes { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ── As filas de gerar comissão no celular ───────────────────────────────────
 *
 * Quatro colunas, sendo uma delas um formulário inteiro, não cabem em 375px: a
 * tabela ganhava rolagem lateral e, para ver o seletor de pessoa, a coluna do
 * nome da negociação saía da tela. Quem gerava ficava escolhendo percentual
 * sem ver de qual venda — que é a única informação que a decisão precisa.
 *
 * Cada linha vira um cartão: nome em cima, valor embaixo dele, formulário por
 * último. Nada é escondido e nada muda de lugar na ordem de leitura; o que
 * some é o cabeçalho, que num cartão não tem o que alinhar — e o rótulo dele
 * volta no `data-rotulo` da célula do valor.
 *
 * Só estas duas tabelas. A lista de comissões continua tabela porque ali se
 * compara linha com linha, e é para isso que a coluna serve.
 */
@media (max-width: 40rem) {
  .tabela-gerar,
  .tabela-gerar tbody,
  .tabela-gerar tr,
  .tabela-gerar th,
  .tabela-gerar td { display: block; width: auto; }

  /* O cabeçalho sai da tela mas continua no documento: é ele que dá nome às
     colunas para quem ouve a página. */
  .tabela-gerar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .tabela-gerar tr {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: .8rem;
    margin-bottom: .6rem;
    background: var(--superficie);
  }
  .tabela-gerar tr:last-child { margin-bottom: 0; }

  /* Sem a borda de baixo de cada célula: dentro do cartão ela vira uma régua
     entre o nome e o valor, e o cartão já é a separação. */
  .tabela-gerar th,
  .tabela-gerar td {
    border-bottom: 0;
    padding: 0;
    text-align: left;
  }

  .tabela-gerar td + td,
  .tabela-gerar th + td { margin-top: .5rem; }

  /* O valor recupera o rótulo que estava no cabeçalho. */
  .tabela-gerar td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    color: var(--suave);
    font-size: .82rem;
    font-weight: 600;
  }
  .tabela-gerar td.numerico { text-align: left; }

  /* Em cartão o formulário tem a largura toda, e os controles a aproveitam:
     um seletor de nomes espremido em 40% da tela é onde se erra a pessoa. */
  .tabela-gerar .gerar-comissao { align-items: stretch; }
  .tabela-gerar .comissionado { flex-direction: column; align-items: stretch; }
  .tabela-gerar .comissionado select,
  .tabela-gerar .campo-percentual { width: 100%; }
  .tabela-gerar .gerar-acoes .btn { flex: 1 1 auto; }
}

/* O campo do percentual cabe "100" e mais nada: solto, ele herdaria a largura
   total do formulário e ficaria uma faixa vazia ao lado de um seletor de
   nomes. Era um style="width:5rem" repetido em três lugares. */
.campo-percentual {
  width: 5rem;
  min-height: var(--alt-controle-mini);
  padding: 0 .5rem;
  font: inherit;
  font-size: .88rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
}

/* ── Histórico global ────────────────────────────────────────────────────── */

.historico-global li { border-left-width: 3px; }
.historico-global .historico-item-ganho { border-left-color: var(--signal); }
.historico-global .historico-item-perda { border-left-color: var(--danger); }
.historico-global .historico-item-etapa { border-left-color: var(--brand); }
.historico-global .historico-texto { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ── Grades que sabem encolher ───────────────────────────────────────────── */

/*
 * `1fr` é, na verdade, `minmax(auto, 1fr)` — e esse `auto` respeita a largura
 * mínima do conteúdo, então a coluna se recusa a encolher e estoura a tela no
 * celular (media 381px numa janela de 375px, na tela de negociação).
 *
 * `minmax(0, 1fr)` autoriza a coluna a ir abaixo do conteúdo mínimo, e o
 * `min-width: 0` nos filhos faz o mesmo pelo lado de dentro. Os dois juntos
 * são o que impede o vazamento; um sozinho não basta.
 */
.duas-colunas { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 58rem) {
  .duas-colunas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.duas-colunas > *,
.pilha > * { min-width: 0; }

.dupla { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) {
  .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Rótulo e valor empilham no celular: 8rem fixos numa tela de 375px deixavam
   o valor espremido em duas ou três palavras por linha. */
@media (max-width: 30rem) {
  .dados div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Palavra sem espaço — e-mail longo, URL — quebra em vez de empurrar a tela. */
.dados dd, .historico-texto, .cartao-titulo, .tarefa-titulo { overflow-wrap: anywhere; }

/* ── Tarefas dentro da negociação ────────────────────────────────────────── */

.tarefas-embutidas { margin-bottom: 0; }
.tarefas-embutidas .tarefa-item { padding: .7rem .8rem; }
.tarefa-feita { opacity: .6; }
.tarefa-feita .tarefa-titulo { text-decoration: line-through; text-decoration-color: var(--linha-forte); }

/* ── Etiquetas ───────────────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }

.tag {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--raio-pilula);
  background: var(--superficie-3);
  color: var(--corpo);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
}
a.tag:hover { background: var(--brand); color: var(--brand-tinta); }

/* `.tags-sugeridas` morava aqui: as etiquetas já usadas, oferecidas abaixo do
   campo. Quem faz isso hoje é o seletor de chips do etiquetas-picker.js, e
   nenhum template emitia mais essa classe — só o CSS dela tinha sobrado, com
   uma pílula meio ponto maior que a `.tag`, que ninguém via. */

/* ── Arrastar no kanban ──────────────────────────────────────────────────── */

.cartao-negocio { position: relative; }

/* A alça: discreta até o cartão ser apontado, sempre visível ao receber foco
   por teclado — quem navega por tabulação precisa ver onde está. */
.alca-cartao {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--suave);
  cursor: grab;
  opacity: 0;
  transition: opacity .12s ease;
  /* Sem isto o navegador rola a coluna em vez de deixar o dedo arrastar. */
  touch-action: none;
}
.cartao-negocio:hover .alca-cartao,
.alca-cartao:focus-visible { opacity: 1; }
.alca-cartao:focus-visible { outline: 2px solid var(--grafite-700); outline-offset: 1px; }

/* No toque não há "apontar": a alça precisa estar visível o tempo todo. */
@media (hover: none) {
  .alca-cartao { opacity: .65; }
}

.quadro-arrastavel .cartao-negocio { cursor: grab; }
.quadro-arrastavel .cartao-travado { cursor: default; }

/* Com o arrasto disponível, o seletor de etapa vira redundante — some da
   tela mas continua no formulário, que é o que grava o movimento. */
.quadro-arrastavel .mover { display: none; }

.cartao-puxando {
  position: fixed;
  z-index: 40;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  transform: rotate(1.2deg);
  opacity: .96;
  cursor: grabbing;
}

.vao-cartao {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie-3);
  margin-bottom: .6rem;
}

/* Enquanto a página recarrega com a nova posição. */
.cartao-gravando { opacity: .5; }

.pilha-cartoes { min-height: 2.5rem; }

/* Durante o arrasto, nada de seleção de texto: o gesto começa com o botão
   pressionado sobre um parágrafo, que é como se seleciona texto — sem isto o
   quadro inteiro fica azul enquanto o cartão viaja. Fora do gesto a seleção
   volta, porque copiar o telefone do cliente daqui é rotina. */
body.arrastando-cartao {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* ── Clientes, etiquetas e pedidos de exclusão ───────────────────────────── */

/*
 * A borda acompanha a do `.btn-secundario`, que é 1.5px.
 *
 * Os dois são o mesmo botão de contorno em cores diferentes, e vivem lado a
 * lado: "Recusar" e "Aprovar e excluir" na fila de exclusões, "Enviar pedido"
 * e "Excluir mesmo assim" no painel de excluir. Com 1px aqui e 1.5px ali, o
 * vermelho parecia mais fino que o vizinho na mesma linha. O `.resumo-botao`
 * em vermelho já usava 1.5px — este era o único fora do combinado.
 */
.btn-perigo {
  background: transparent;
  border: 1.5px solid var(--danger);
  color: var(--danger);
}
.btn-perigo:hover { background: var(--danger); color: #fff; }

/* O summary já é o botão: sem isto o navegador desenha a setinha do details
   dentro dele e o alinhamento do texto sai torto. */
summary.btn-perigo { list-style: none; cursor: pointer; display: inline-flex; }
summary.btn-perigo::-webkit-details-marker { display: none; }
summary.btn-perigo::marker { content: ""; }

.excluir { display: inline-block; }
.excluir-corpo {
  margin-top: .5rem;
  padding: .7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie-2);
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.excluir-corpo p { margin: 0; }
.excluir-corpo form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.excluir-corpo input[type="text"], .excluir-corpo input:not([type]) { flex: 1 1 14rem; }

.celula-numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* As ações da linha ficam numa faixa só. Quebrando em duas, elas dobravam a
   altura de TODAS as linhas da tabela — inclusive as de conteúdo curto, que
   passavam a ocupar 81px para mostrar dezoito caracteres. A tabela já rola na
   horizontal quando falta largura. */
/*
 * ── Por que passou a quebrar linha ─────────────────────────────────────────
 * Em nowrap a célula não podia encolher: os três controles somavam mais que a
 * largura disponível e empurravam a tabela inteira para fora da tela, com
 * barra de rolagem lateral numa lista que cabe. Quebrando, "Assumir ou
 * designar" desce para a segunda linha quando falta espaço — a linha fica um
 * pouco mais alta, e a tabela cabe.
 */
.acoes-celula { display: flex; gap: .35rem .4rem; flex-wrap: wrap; align-items: center; }

/*
 * ── A mesma armadilha da .sutil ────────────────────────────────────────────
 * .acoes-celula é usada de dois jeitos: numa <div> dentro da célula, onde
 * flex é o certo, e direto na <td>, em sete telas. No segundo caso a célula
 * deixa de ser table-cell e sai do desenho da tabela — hoje ninguém vê
 * porque ela é sempre a última coluna, e no dia em que entrar uma coluna
 * depois dela a tabela quebra sem ninguém entender por quê. Foi exatamente
 * assim que a lista de contatos quebrou.
 *
 * A célula volta a ser célula; os controles dentro dela continuam lado a
 * lado por serem inline-block, que é o que os botões já são.
 */
td.acoes-celula, th.acoes-celula { display: table-cell; }
/*
 * Margem simétrica, e não só à direita.
 *
 * A célula centraliza o conteúdo, e centralizar leva em conta a margem: com
 * ela só de um lado, cada controle era empurrado meia margem para a esquerda
 * do vizinho — três pixels que, empilhados um sobre o outro, é exatamente o
 * degrau que se via entre "Editar" e "Duplicar".
 */
td.acoes-celula > *, th.acoes-celula > * { vertical-align: middle; margin: .12rem .15rem; }
.acoes-celula .btn { white-space: nowrap; }

/*
 * ── Por que "Editar" e "Duplicar" saíam tortos ─────────────────────────────
 * Um <form> continua sendo caixa de bloco mesmo com `display: flex`. Numa
 * coluna estreita ele quebrava a linha e, por ser bloco, ocupava a largura
 * inteira da célula — e aí o botão dentro dele encostava à esquerda, enquanto
 * o "Editar" ao lado, que é inline-block, era centralizado pela regra de
 * `tbody td`. Um centralizado e o outro não: é essa a desalinhamento que
 * aparecia na lista, sempre com o de baixo deslocado.
 *
 * `inline-flex` devolve o formulário à linha: ele passa a ocupar só o que o
 * botão ocupa, e a célula centraliza os dois do mesmo jeito.
 */
td.acoes-celula > .em-linha, th.acoes-celula > .em-linha {
  display: inline-flex;
  justify-content: center;
}

/*
 * E o mesmo para o <details> usado como ação da linha.
 *
 * `<details>` é bloco: solto entre dois botões inline, ele desce para uma
 * linha só dele e empurra a altura da célula. É a mesma razão do
 * `.excluir { display: inline-block }` logo acima — ali já se tinha esbarrado
 * nisto. Fora da célula de ações o `.mini-editor` continua bloco, que é o
 * certo quando ele é o único conteúdo da coluna.
 */
td.acoes-celula > .mini-editor, th.acoes-celula > .mini-editor {
  display: inline-block;
  text-align: left;
}

/*
 * E a mesma largura para os botões de texto. Empilhados numa coluna estreita,
 * larguras diferentes deixam a pilha irregular mesmo já centralizada — são as
 * bordas que o olho usa para ler a coluna como uma coluna. O mínimo só cresce
 * o que é curto; rótulo maior continua mandando na largura.
 *
 * O botão de ícone fica de fora: ele é quadrado por definição, e um mínimo em
 * rem o estica num retângulo vazio com o desenho perdido no meio.
 */
.acoes-celula .btn:not(.btn-icone) { min-width: 5rem; }

.mini-editor > summary {
  cursor: pointer;
  font-size: .74rem;
  color: var(--suave);
}
.mini-editor[open] > summary { margin-bottom: .4rem; }
.mini-editor-corpo { display: flex; flex-direction: column; gap: .6rem; }

/*
 * ── O editor aberto dentro da célula ──────────────────────────────────────
 * O campo de etiquetas pede a largura do que tem escrito, e a coluna cresce
 * junto. Preso aqui, ele quebra em mais linhas em vez de esticar a coluna.
 *
 * Isto reduz, mas não zera: o resto da largura vem do próprio algoritmo de
 * tabela, que dimensiona colunas pelo conteúdo. Zerar exigiria
 * `table-layout: fixed` em todas as tabelas, que muda a largura de todas as
 * colunas de todas as telas — caro demais para uma rolagem de 76px que não
 * esconde nada.
 */
/*
 * ── Por que o painel flutua ───────────────────────────────────────────────
 * Dentro do fluxo da célula ele empurrava a coluna: tabela dimensiona coluna
 * pelo conteúdo, e o editor aberto engordava a largura da tabela inteira —
 * até a página ganhar rolagem lateral. Fora do fluxo, a coluna não sabe que
 * ele existe.
 *
 * De quebra a linha para de dobrar de altura ao abrir: quem estava lendo a
 * lista não perde o lugar por causa de um editor aberto três linhas acima.
 *
 * Sobrepõe o que está embaixo, que é o comportamento normal deste tipo de
 * editor — e por isso ganha fundo e sombra: sem eles o texto de baixo
 * apareceria através do painel.
 */
td .mini-editor { position: relative; }
td .mini-editor[open] > *:not(summary) {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 20rem;
  padding: .7rem;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
td .mini-editor input, td .mini-editor select { max-width: 100%; }

/*
 * ── E a caixa abre espaço para ele ────────────────────────────────────────
 * A caixa que rola a tabela corta nos dois eixos — é o que o CSS faz quando
 * se pede rolagem num eixo só. Um painel flutuante na última linha ficava
 * cortado pela metade, e o editor virava inútil justamente onde mais se usa.
 *
 * O :has() resolve sem JavaScript: enquanto houver um editor aberto lá
 * dentro, a caixa ganha um rodapé do tamanho do painel. Fechado o editor, o
 * espaço some — nada de vão permanente embaixo da tabela.
 */
.rolagem:has(td .mini-editor[open]) { padding-bottom: 13rem; }

/* A caixa de rolagem nunca é maior que onde ela mora. */
.rolagem { max-width: 100%; }

.tag-ativa { background: var(--grafite-700); color: #fff; border-color: var(--grafite-700); }

.lista-etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.lista-etiquetas > li { border-bottom: 1px solid var(--linha); padding-bottom: .8rem; }
.lista-etiquetas > li:last-child { border-bottom: 0; padding-bottom: 0; }
.etiqueta-cabeca { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

.marcador { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--corpo); }

.lista-pedidos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.pedido { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.pedido-corpo { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.pedido-titulo { margin: 0; color: var(--tinta); }
.pedido-acoes { flex: 0 1 20rem; display: flex; flex-direction: column; gap: .5rem; }
.pedido-acoes input { width: 100%; }
.pedido-pendente { border-left: 3px solid var(--danger); }

.selo-pendente { background: var(--danger-fundo); color: var(--danger); }
.selo-aprovada { background: var(--superficie-3); color: var(--suave); }
.selo-recusada { background: var(--superficie-3); color: var(--suave); }

/* A exclusão mora no rodapé da tela, separada das ações do dia. */
.rodape-perigoso { border-color: var(--danger); border-style: dashed; }

/* No cabeçalho, a confirmação de exclusão flutua em vez de empurrar a tela
   para baixo — abrir o painel não pode reorganizar o que está sendo lido. */
.cabeca .excluir { position: relative; }
.cabeca .excluir[open] > .excluir-corpo {
  position: absolute;
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  background: var(--superficie);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

@media (max-width: 40rem) {
  .cabeca .excluir[open] > .excluir-corpo { position: static; box-shadow: none; }
}

/* ── Conversas ───────────────────────────────────────────────────────────── */

.conversas {
  display: grid;
  gap: .9rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}

.lista-conversas ul { list-style: none; margin: 0; padding: 0; }
.lista-conversas li { border-bottom: 1px solid var(--linha); }
.lista-conversas li:last-child { border-bottom: 0; }

.lista-conversas a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem .8rem;
  text-decoration: none;
  color: var(--corpo);
}
.lista-conversas a:hover { background: var(--superficie-2); }
.conversa-aberta > a { background: var(--superficie-3); }
.conversa-topo { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.conversa-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fita-mensagens {
  list-style: none;
  margin: .8rem 0;
  /* O fundo levemente acinzentado é o que separa os balões brancos do papel
     da página — sem ele a mensagem recebida some no cartão. */
  padding: .7rem .8rem;
  border-radius: var(--raio);
  background: var(--superficie-2);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  /* Conversa longa não pode empurrar o campo de resposta para fora da tela:
     o vendedor abriria a conversa e teria de rolar até o fim para responder. */
  max-height: 26rem;
  overflow-y: auto;
}

/*
 * ── A fita, com cara de conversa ──────────────────────────────────────────
 * Balão de recebida à esquerda, de enviada à direita, com o cantinho do
 * lado de quem falou. Não é enfeite: numa fita longa, o lado responde
 * "quem disse isso" antes de a pessoa ler o nome — e é assim que todo mundo
 * já lê uma conversa, porque é assim que o WhatsApp faz.
 */
.msg {
  position: relative;
  max-width: 78%;
  min-width: 5rem;
  border-radius: .7rem;
  padding: .45rem .65rem .3rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
}
.msg p { margin: 0; }
.msg-texto { color: var(--tinta); font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }

/* A hora fica pequena e no canto de baixo, como num balão de verdade. */
.msg > .sutil { font-size: .68rem; margin-top: .15rem; text-align: right; }

.msg-entrada {
  background: var(--superficie);
  align-self: flex-start;
  border-top-left-radius: .15rem;
}
.msg-saida {
  background: #dcf8c6;
  align-self: flex-end;
  border-top-right-radius: .15rem;
}
.msg-falha { background: var(--danger-fundo); }

/* O cantinho do balão, do lado de quem falou. */
.msg-entrada::before, .msg-saida::before {
  content: '';
  position: absolute;
  top: 0;
  border: .4rem solid transparent;
}
.msg-entrada::before { left: -.38rem; border-top-color: var(--superficie); border-right-width: 0; }
.msg-saida::before { right: -.38rem; border-top-color: #dcf8c6; border-left-width: 0; }

/* Imagem, áudio e vídeo ocupam a largura do balão, sem estourá-lo. */
.msg-midia {
  display: block;
  max-width: 100%;
  margin: .1rem 0 .3rem;
  border-radius: .45rem;
}
img.msg-midia, .msg-midia img { max-height: 17rem; object-fit: cover; }
audio.msg-midia { width: 15rem; max-width: 100%; }
video.msg-midia { max-height: 17rem; }
.msg-arquivo {
  display: inline-block;
  margin: .15rem 0 .3rem;
  padding: .3rem .55rem;
  border-radius: .4rem;
  background: rgba(0, 0, 0, .05);
  font-size: .84rem;
  word-break: break-word;
}

@media (max-width: 900px) {
  .conversas { grid-template-columns: minmax(0, 1fr); }
  .fita-mensagens { max-height: none; }
}

/* O que falta preencher na proposta: em destaque, porque sairia impresso
   assim se ninguém mexer. */
.cartao-pendencias { border-color: var(--brand); border-left-width: 3px; }
.cartao-pendencias code {
  background: var(--superficie-3);
  padding: .05rem .35rem;
  border-radius: var(--raio-botao);
  font-size: .82rem;
}

/* O título da negociação e o "renomear" logo abaixo, sem empurrar o cabeçalho. */
.titulo-editavel .mini-editor { margin-top: .2rem; }
.titulo-editavel .mini-editor > summary { font-size: .72rem; }
.titulo-editavel .em-linha input { min-width: 18rem; flex: 1 1 18rem; }

/* ── Busca fixa no alto ──────────────────────────────────────────────────── */

.barra-busca {
  position: sticky;
  top: 0;
  z-index: 15;
  /* Estende-se até as bordas do conteúdo, cancelando o recheio do <main>,
     para a faixa cobrir a largura toda ao grudar no alto. */
  margin: -1rem -1.15rem 1rem;
  padding: .55rem 1.15rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
}

.barra-busca form {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  max-width: 46rem;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  /* Sem folga à direita: o botão encosta na moldura.
     Com .35rem sobrando, a borda do botão, a fresta branca e a borda do
     formulário viravam três linhas verticais quase coladas — o olho lê isso
     como defeito de renderização, não como espaçamento. */
  padding: 0 0 0 .6rem;
}

/* O botão vira parte da moldura: altura cheia, cantos direitos acompanhando o
   raio de dentro (o de fora menos a borda de 1px), e uma linha só à esquerda
   separando do campo. */
.barra-busca .btn {
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: var(--linha);
  border-radius: 0 calc(var(--raio-botao) - 1px) calc(var(--raio-botao) - 1px) 0;
}

.barra-busca .btn:hover { border-color: var(--linha); background: var(--superficie-2); }

/* A lupa tem altura fixa, então o stretch do pai a jogaria para o topo. */
.barra-busca svg {
  width: 16px; height: 16px; flex: none; align-self: center; color: var(--suave);
}

.barra-busca input {
  flex: 1;
  min-width: 0;
  min-height: var(--alt-controle-mini);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  color: var(--tinta);
}
/* O anel sai do campo e vai para a moldura inteira, que é o que o olho lê
   como "a busca está ativa". Tirar o anel e deixar só a borda mudando de cor
   não serve: cor sozinha não é indicação de foco. */
.barra-busca input:focus { outline: none; }
.barra-busca form:focus-within {
  border-color: var(--brand);
  outline: 3px solid var(--brand-forte);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .barra-busca { margin: -1rem -1.15rem .8rem; }
  .barra-busca .btn { display: none; }
}

/* A alça do cartão no toque.
 *
 * Fica aqui, e não no estilo.css, por causa da ordem das folhas: a regra base
 * de .alca-cartao mora neste arquivo, que carrega depois — a mesma regra
 * escrita lá não venceria a cascata, e a auditoria mediu a alça continuando
 * com 26px no celular emulado. É o alvo mais crítico do kanban ali: é por ele
 * que se arrasta, e 26px é menos que a ponta de um dedo. */
@media (pointer: coarse) {
  .alca-cartao {
    width: 44px;
    height: 44px;
    top: .1rem;
    right: .1rem;
    opacity: .8;
  }

  /*
   * E o botão de ícone volta a ser quadrado.
   *
   * A altura dele já crescia sozinha — o `min-height` de 44px do `.btn` vence
   * o `height` fixo —, mas a largura continuava em 1.9rem. O resultado era um
   * retângulo de 44 por 30 com a lixeira perdida no meio, na última coluna de
   * toda tabela, e um alvo mais estreito que o dedo justamente na ação que
   * não se quer errar.
   */
  .btn-icone { width: var(--alt-botao); height: var(--alt-botao); }
}

/* Tarefa vencida no painel: a borda diz "isto aqui é o atrasado" antes de
   qualquer leitura, e o painel tem outros três cartões competindo. */
.cartao-atraso { border-left: 3px solid var(--danger); }

/* O follow-up fora da janela: separado do resto da conversa por uma faixa,
   porque ali a regra muda — o envio sai por fora da API. */
.fora-da-janela {
  margin-top: .8rem;
  padding: .8rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.fora-da-janela .formulario { max-width: none; }

/* A mensagem enviada à mão pelo WhatsApp do vendedor não é igual à que saiu
   pela API: o contorno tracejado diz isso sem precisar de legenda. */
.msg-manual { border: 1px dashed var(--signal); background: transparent; }

/* ── Teto de largura para campos de texto curto ──────────────────────────────
 *
 * "Novo lead" não precisa de um campo de 1.380px. Numa tela larga, `flex: 1`
 * sem teto produz exatamente isso: uma faixa vazia atravessando o cartão para
 * abrigar nove caracteres, e o botão ao lado a um palmo de distância do texto
 * que ele altera.
 *
 * O teto vale para os campos cujo conteúdo é curto por natureza — nome de
 * etapa, nome de item. Campo de texto corrido continua ocupando a coluna.
 */
.etapa,
.linha-add {
  max-width: none;
}

/* A lista de etapas fica alinhada à esquerda dentro do cartão, em vez de
   centralizada, para o olho descer por uma coluna só. */
.etapas { max-width: none; }

/* ── Os funis, lado a lado ───────────────────────────────────────────────────
 *
 * Empilhados, cada cartão ocupava a largura toda para mostrar uma coluna de
 * etapas de 40rem — a outra metade ficava vazia, e oito funis viravam oito
 * telas de rolagem. Em duas colunas o vão some e a lista cabe em duas telas.
 *
 * O ponto de quebra é 68rem porque abaixo disso as duas colunas apertariam a
 * linha da etapa (campo + renomear + excluir) a ponto de ela quebrar em duas.
 */
.grade-funis {
  display: grid;
  gap: .9rem;
  grid-template-columns: minmax(0, 1fr);
  /* Uma coluna só, com teto. Duas colunas foram tentadas e ficaram visualmente
     ruins: os cartões têm alturas diferentes conforme o número de etapas, e a
     grade abria degraus entre eles. Uma coluna estreita lê melhor — o vão à
     direita é margem de leitura, não buraco.
     O teto vale também para o formulário de criar, que abre a tela: sem isso
     ele esticaria sozinho e a coluna nasceria torta. */
  max-width: 52rem;
}

#novo-funil { max-width: 52rem; }

.grade-funis > .cartao + .cartao { margin-top: 0; }

/* ── Avisos na negociação ────────────────────────────────────────────────────
 *
 * Uma faixa de cor à esquerda, não um cartão colorido inteiro: o aviso precisa
 * ser notado sem competir com o conteúdo que ele comenta. Três negociações
 * abertas lado a lado com cartão vermelho viram ruído, e o olho para de ver.
 */
.avisos {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.aviso {
  padding: .45rem .7rem;
  border-left: 3px solid var(--linha-forte);
  background: var(--superficie);
  font-size: .88rem;
  color: var(--corpo);
}

.aviso-alto  { border-left-color: var(--danger); background: var(--danger-fundo); }
.aviso-medio { border-left-color: var(--brand); }
.aviso-baixo { border-left-color: var(--linha-forte); color: var(--suave); }

/* A cobrança do motivo da perda: é o único dado desta tela que se perde com o
   tempo, então ela vem antes de tudo e com peso de coisa a resolver. */
.cartao-cobranca {
  border: 2px solid var(--danger);
  margin-bottom: .9rem;
}

/* ── Motivos de perda ─────────────────────────────────────────────────────── */

.motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.motivos li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: baseline; }
.motivos .barra {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--superficie-3);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.motivos .barra span { display: block; height: 100%; background: var(--danger); }
.motivos .conta { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; font-size: .88rem; }

/* Cartão do pipeline sem movimento há tempo demais. */
.cartao-frio { border-left: 3px solid var(--brand); }
.cartao-gelado { border-left: 3px solid var(--danger); }
.cartao-negocio .idade {
  display: block;
  font-size: .72rem;
  color: var(--suave);
  margin-top: .25rem;
}

/* O indicador virou link: precisa parecer um. O <dl> continua sendo a
   estrutura certa — cada cartão é um termo e sua definição —, e o <a> por
   fora não muda isso. */
a.indicador {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
a.indicador:hover {
  border-color: var(--grafite-300);
  transform: translateY(-1px);
}
a.indicador:focus-visible {
  outline: 3px solid var(--brand-forte);
  outline-offset: 2px;
}
/* O sublinhado só no apontar. Fixo, ele parecia um link dentro de outro — e
   piorava quando o texto quebrava em duas linhas. O cartão inteiro já é o
   alvo, e a borda que acende no hover diz isso. */
a.indicador:hover .sutil { text-decoration: underline; text-decoration-color: var(--linha-forte); }

@media (prefers-reduced-motion: reduce) {
  a.indicador { transition: none; }
  a.indicador:hover { transform: none; }
}

/* ── Quadro de avisos ────────────────────────────────────────────────────────
 *
 * Uma lista de linhas clicáveis, ordenada por urgência. A faixa de cor à
 * esquerda diz o nível sem precisar de legenda, e é fina de propósito: com
 * quinze avisos, tarja larga vira parede.
 *
 * As três colunas — quando, o quê, onde — em grade e não em flex, para o
 * "quando" alinhar entre as linhas. É o que permite varrer a coluna da
 * esquerda e achar o mais urgente sem ler o resto.
 */
.quadro-avisos {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.aviso-linha {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 .9rem;
  align-items: baseline;
  padding: .55rem .8rem .55rem .65rem;
  background: var(--superficie);
  text-decoration: none;
  color: var(--corpo);
  border-left: 3px solid var(--linha-forte);
}

.aviso-linha:hover { background: var(--superficie-2); }
.aviso-linha:focus-visible { outline: 3px solid var(--brand-forte); outline-offset: -3px; }

.aviso-linha.aviso-alto  { border-left-color: var(--danger); }
.aviso-linha.aviso-medio { border-left-color: var(--brand); }
.aviso-linha.aviso-baixo { border-left-color: var(--linha-forte); }

.aviso-quando {
  font-size: .76rem;
  font-weight: 600;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.aviso-alto .aviso-quando { color: var(--danger); }

.aviso-titulo { color: var(--tinta); font-weight: 600; font-size: .9rem; }

.aviso-detalhe {
  grid-column: 2;
  font-size: .8rem;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* No celular o "quando" vai para cima do título: 9,5rem de coluna fixa não
   cabem ao lado de um nome de negociação em 375px. */
@media (max-width: 34rem) {
  .aviso-linha { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .aviso-detalhe { grid-column: 1; }
}

/* ── Importar: as escolhas que não são conferência ─────────────────────────
 *
 * A empresa dona da lista e a abertura de negociação ficavam no meio dos oito
 * seletores de mapeamento de coluna — e a segunda ainda dentro de um <details>
 * fechado. Oito controles idênticos em sequência viram uma parede: o olho
 * passa por cima, e as duas decisões da tela ficaram invisíveis.
 *
 * Aqui elas são um passo próprio, com moldura e a faixa da marca, imediatamente
 * acima do botão que grava.
 */
.escolhas-import {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .9rem 1rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--brand);
  border-radius: var(--raio-botao);
}

.escolha-negociacao {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linha-forte);
}

.escolha-negociacao > p { margin: 0; }

/* A caixa de marcar é a decisão; merece o peso de um rótulo de campo. */
.marcador-forte { font-size: .85rem; font-weight: 600; color: var(--tinta); }

/* Enquanto não estiver marcada, o funil não vale de nada — e a tela diz isso
 * sem esconder o controle, que some é pior que apagado. */
.escolhas-import:has(#abrir-negociacao:not(:checked)) .escolha-negociacao > label:not(.marcador) {
  opacity: .55;
}

/* ── Histórico de importações ──────────────────────────────────────────────
 *
 * Cada planilha é um cartão: o nome do arquivo em cima, os números embaixo, e
 * o desfazer recolhido — recolhido aqui é o certo, ao contrário da escolha na
 * tela de importar. Ali era uma opção que se procura; aqui é um gatilho que
 * apaga centenas de contatos, e abrir dá o segundo de pausa que a operação
 * merece.
 */
.importacao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

/* Desfeita continua na lista: é registro do que aconteceu, não lixo. Mas
 * recua para o fundo, porque não há mais nada a fazer com ela. */
.importacao-desfeita { opacity: .72; }

.mini-editor-perigo > summary { color: var(--danger); }

/* ── Relatórios ────────────────────────────────────────────────────────────
 *
 * Coluna de número alinha à direita e usa algarismo de largura fixa: é o que
 * deixa comparar duas linhas de cima a baixo sem ler cada uma. Sem
 * tabular-nums, "1.180" e "9.999" ocupam larguras diferentes e a coluna
 * serrilha.
 */
.numerica { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── O gráfico mês a mês ───────────────────────────────────────────────────
 *
 * Barras em CSS puro, sem biblioteca: são doze valores, e carregar um gráfico
 * inteiro para isso custaria mais que a página toda. A altura vem do valor
 * relativo ao maior mês, calculada no PHP.
 */
.barras-mes {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin: 0;
  padding: 0 0 .25rem;
  list-style: none;
  min-height: 190px;
  min-width: 32rem;
}

.barras-mes li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
  height: 190px;
}

.barra {
  width: 100%;
  max-width: 2.6rem;
  background: var(--brand);
  border-radius: var(--raio-botao) var(--raio-botao) 0 0;
  /* A barra cresce de baixo; o flex-end do pai é quem ancora. */
  min-height: 3px;
}

.barra-valor {
  font-size: .68rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  /* Valor em cima da barra, mas empurrado para o alto da coluna para as
   * doze etiquetas ficarem na mesma linha. */
  margin-top: auto;
}

.barra-rotulo { font-size: .72rem; font-weight: 600; color: var(--corpo); }
.barra-conta { font-size: .68rem; color: var(--suave); font-variant-numeric: tabular-nums; }

/* ── O que mais saiu: ranking em barras horizontais ─────────────────────────
 *
 * Uma empresa por coluna quando a visão é "Todas"; empilha no celular. A barra
 * tem espessura fixa e pequena, ponta arredondada só do lado do valor e base
 * reta no início do trilho — cresce de um ponto só, como todo gráfico de barra.
 * Nome e valor ficam escritos: a laranja da marca, sozinha, tem pouco contraste
 * para ser lida como número.
 */
.rankings { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .rankings-duplos { grid-template-columns: 1fr 1fr; }
}

.ranking-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--tinta);
}
.ranking-titulo .sutil { display: inline; }

.ranking-itens { margin: 0; padding: 0; list-style: none; }

.ranking-linha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  /* Área de toque maior que a barra: o alvo é a linha inteira. */
  padding: .35rem .25rem;
  border-radius: var(--raio-botao);
  outline: none;
}
.ranking-linha:hover,
.ranking-linha:focus-visible { background: var(--superficie-2); }

.ranking-nome {
  font-size: .82rem;
  font-weight: 600;
  color: var(--corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-trilho { display: block; height: 14px; }
.ranking-barra {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--brand);
  border-radius: 0 4px 4px 0;
}
.ranking-sem-item .ranking-barra { background: var(--grafite-300); }
.ranking-sem-item .ranking-nome { font-weight: 400; font-style: italic; }

.ranking-valor {
  font-size: .82rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A dica: quantas vendas e que parte do total, ao passar o mouse ou focar. */
.ranking-linha[data-dica]:hover::after,
.ranking-linha[data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute;
  right: .25rem;
  bottom: calc(100% - .15rem);
  z-index: 2;
  padding: .3rem .55rem;
  font-size: .74rem;
  color: #fff;
  background: var(--grafite-900);
  border-radius: var(--raio-botao);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 520px) {
  .ranking-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .ranking-trilho { grid-column: 1 / -1; order: 3; }
}

/* Perda não é a série da marca: barra cinza, para não parecer conquista. */
.barras-perda .ranking-barra { background: var(--grafite-500); }
.barras-perda .ranking-sem-item .ranking-barra { background: var(--grafite-200); }

/* ── Relatório como painel ─────────────────────────────────────────────────
 *
 * Os números do período em cartões, cada um com a variação contra o período
 * anterior. A cor da variação diz se a mudança é boa — e vem sempre com seta
 * e texto, nunca sozinha.
 */
.kpis {
  display: grid;
  gap: .7rem;
  margin: 0 0 .9rem;
  /* Contagem fixa por largura — 2, 3 ou 6 —, para nunca sobrar um cartão
     sozinho na segunda linha. O valor vem compacto (R$ 448 mil) e cabe. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  min-width: 0;
}
.kpi-destaque { border-color: var(--brand); }
.kpi-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); }
.kpi-valor { font-size: 1.45rem; font-weight: 700; color: var(--tinta); line-height: 1.15; white-space: nowrap; }
.kpi-destaque .kpi-valor { font-size: 1.75rem; }
.kpi-delta { font-size: .78rem; font-weight: 600; }
.kpi-delta .sutil { display: inline; font-weight: 400; }
.kpi-apoio { font-size: .78rem; color: var(--suave); }
.delta-bom { color: var(--signal); }
.delta-ruim { color: var(--danger); }
.delta-igual { color: var(--suave); }

.faisca { display: block; width: 100%; max-width: 9rem; height: 2rem; margin-top: .3rem; overflow: visible; }
.faisca polyline { fill: none; stroke: var(--grafite-300); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.faisca circle { fill: var(--brand); stroke: var(--superficie); stroke-width: 2; }

.navega-mes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* ── A grade do painel ─────────────────────────────────────────────────────
 *
 * Doze colunas em tela larga; os cartões dizem quantas ocupam. O espaço entre
 * eles é o gap da grade — a margem de ".cartao + .cartao" sai daqui, senão o
 * cartão da direita de cada par descia .9rem em relação ao da esquerda. Os
 * dois de um par esticam até a mesma altura.
 */
.painel-grade { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.painel-grade > .cartao { margin: 0; min-width: 0; container-type: inline-size; }
@media (min-width: 1100px) {
  .painel-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .painel-grade > .bloco-12,
  .painel-grade > .bloco-8,
  .painel-grade > .bloco-4 { grid-column: span 12; }
  .painel-grade > .bloco-6 { grid-column: span 6; }
}
/* O mês a mês ao lado das propostas só quando o gráfico ainda fica largo. */
@media (min-width: 1320px) {
  .painel-grade > .bloco-8 { grid-column: span 8; }
  .painel-grade > .bloco-4 { grid-column: span 4; }
}

/* Ranking em cartão estreito: o nome em cima, a barra embaixo — pela largura
   do cartão, não da tela, porque meio cartão numa tela larga é estreito. */
@container (max-width: 30rem) {
  .ranking-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .ranking-trilho { grid-column: 1 / -1; order: 3; }
}

.ver-tabela { margin-top: .8rem; }
.ver-tabela > summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-texto);
  width: fit-content;
}
.ver-tabela > summary.subtitulo { font-size: 1rem; color: var(--tinta); }
.ver-tabela[open] > summary { margin-bottom: .6rem; }

/* ── Legenda ────────────────────────────────────────────────────────────── */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--corpo);
}
.legenda li { display: inline-flex; align-items: center; gap: .4rem; }
.legenda-barra { width: 10px; height: 12px; background: var(--brand); border-radius: 2px 2px 0 0; }
.legenda-meta { width: 16px; height: 2px; background: var(--tinta); }
.legenda-aceita { width: 12px; height: 12px; background: var(--signal); border-radius: 2px; }
.legenda-recusada { width: 12px; height: 12px; background: var(--grafite-200); border-radius: 2px; }

/* ── O gráfico de colunas (SVG) ────────────────────────────────────────────
 *
 * Grade em linha fina e cinza, contínua; coluna fina com a ponta arredondada
 * e a base reta; o traço escuro é a meta. O texto usa a tinta do sistema,
 * nunca a laranja — que como texto não se lê.
 */
.grafico { position: relative; }
.grafico-svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.grafico-grade { stroke: var(--linha); stroke-width: 1; }
.grafico-base { stroke: var(--grafite-200); stroke-width: 1; }
.grafico-eixo { font-size: 11px; fill: var(--suave); font-variant-numeric: tabular-nums; }
.grafico-valor { font-size: 11px; font-weight: 600; fill: var(--tinta); }
.grafico-barra { fill: var(--brand); }
.grafico-meta { stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.grafico-toque { fill: transparent; }
.grafico-alvo { outline: none; cursor: default; }
.grafico-alvo:hover .grafico-toque,
.grafico-alvo:focus-visible .grafico-toque { fill: var(--superficie-2); }
.grafico-alvo:focus-visible .grafico-toque { stroke: var(--brand-texto); stroke-width: 1.5; }

/* A dica que o graficos.js posiciona sobre a coluna. */
.grafico-dica {
  position: fixed;
  z-index: 50;
  max-width: 18rem;
  padding: .35rem .6rem;
  font-size: .76rem;
  line-height: 1.35;
  color: #fff;
  background: var(--grafite-900);
  border-radius: var(--raio-botao);
  pointer-events: none;
}

/* ── Propostas ──────────────────────────────────────────────────────────── */
.mini-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .6rem;
  margin: 0 0 .8rem;
}
.mini-kpis div { padding: .55rem .7rem; background: var(--superficie-2); border-radius: var(--raio-botao); }
.mini-kpis dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.mini-kpis dd { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--tinta); }
.mini-kpis dd .sutil { display: block; font-size: .76rem; font-weight: 400; }
.mini-kpi-largo { grid-column: 1 / -1; }

/* Aceitas e recusadas numa barra só, com o vão da superfície entre as duas. */
.proporcao { display: flex; gap: 2px; height: 12px; margin-bottom: .5rem; }
.proporcao span { display: block; min-width: 2px; }
.proporcao-aceita { background: var(--signal); border-radius: 4px 0 0 4px; }
.proporcao-recusada { background: var(--grafite-200); border-radius: 0 4px 4px 0; }

/* ── Metas: o placar ───────────────────────────────────────────────────────
 *
 * O medidor tem o trilho num tom claro da mesma cor do preenchimento: laranja
 * enquanto corre, verde quando a meta é batida. O degrau vem em selo, com
 * ícone e nome — a cor do selo nunca é a única pista.
 */
.medidor {
  display: block;
  height: 10px;
  background: #ffe7c4;
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.medidor-feito { display: block; height: 100%; min-width: 3px; background: var(--brand); border-radius: var(--raio-pilula); }
.medidor-batido { background: #d3eadb; }
.medidor-batido .medidor-feito { background: var(--signal); }

.equipe-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  align-items: center;
  margin: .4rem 0 1rem;
  padding: .8rem 1rem;
  background: var(--superficie-2);
  border-radius: var(--raio);
}
.equipe-meta-numeros { display: flex; flex-direction: column; }
.equipe-meta-numeros .sutil { display: block; }
.equipe-meta .medidor { height: 14px; }
.equipe-meta-bateram { margin: 0; font-size: .88rem; color: var(--corpo); }
@media (max-width: 640px) {
  .equipe-meta { grid-template-columns: 1fr; }
}

.placar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.placar-linha {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1.2fr) minmax(0, 1fr) 3.4rem;
  grid-template-areas:
    "pos pessoa medida pct"
    "pos premio premio premio";
  gap: .35rem .9rem;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}
.placar-eu { border-left: 4px solid var(--brand); }
.placar-pos { grid-area: pos; font-size: 1.05rem; font-weight: 700; color: var(--suave); text-align: center; }
.placar-pessoa { grid-area: pessoa; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.placar-pessoa .sutil { display: inline; font-size: .76rem; }
.placar-nome { font-weight: 700; color: var(--tinta); }
.placar-medida { grid-area: medida; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.placar-numeros { font-size: .76rem; color: var(--corpo); font-variant-numeric: tabular-nums; }
.placar-pct { grid-area: pct; font-size: 1.1rem; font-weight: 700; color: var(--tinta); text-align: right; }
.placar-premio { grid-area: premio; font-size: .82rem; color: var(--corpo); }
.premio .sutil { display: inline; }
.premio-liberado { color: var(--signal); font-weight: 600; }
.premio-liberado strong { color: var(--tinta); }

@media (max-width: 640px) {
  .placar-linha {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "pos pessoa pct"
      "pos medida medida"
      "pos premio premio";
  }
}

.selo-nivel {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--raio-pilula);
  background: var(--superficie-2);
  color: var(--corpo);
  white-space: nowrap;
}
.nivel-bronze .selo-nivel { background: #f6e7da; color: #7a4a1e; }
.nivel-prata .selo-nivel { background: #eceff1; color: #455a64; }
.nivel-ouro .selo-nivel { background: #fff1c9; color: #6e5100; }
.nivel-diamante .selo-nivel { background: #e3f1fa; color: #0b5c8a; }
.nivel-ouro, .nivel-diamante { border-color: #e9c46a; }

.conquista {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .1rem .45rem;
  font-size: .72rem;
  color: var(--corpo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

.legenda-niveis { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .8rem 0 0; }

/* A comemoração de quem bateu a própria meta. */
.festa {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .4rem 0 1rem;
  padding: .8rem 1rem;
  background: #fff6e0;
  border: 1px solid #e9c46a;
  border-radius: var(--raio);
  color: var(--tinta);
}
.festa-icone { font-size: 1.8rem; line-height: 1; }
.festa .sutil { display: inline; }

.confete { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.confete i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confete-cai var(--dur, 2.6s) cubic-bezier(.25, .6, .4, 1) var(--atraso, 0s) forwards;
}
@keyframes confete-cai {
  to { transform: translate3d(var(--deriva, 0), 105vh, 0) rotate(var(--giro, 540deg)); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .confete { display: none; }
}

/* ── Definir metas ──────────────────────────────────────────────────────── */
/* Os campos da tabela com a mesma cara dos formulários, um pouco mais baixos. */
.tabela-metas input,
.tabela-metas select {
  width: 100%;
  min-width: 7rem;
  min-height: var(--alt-controle-mini);
  padding: 0 .6rem;
  font: inherit;
  font-size: .88rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
}
.tabela-metas input:focus,
.tabela-metas select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px var(--brand); }
.tabela-metas td.numerica input { text-align: right; }
.tabela-metas td:last-child input { min-width: 14rem; }
.tabela-metas .campo-curto { min-width: 4.5rem; max-width: 6rem; }
.tabela-metas th[scope="row"] { text-align: left; white-space: nowrap; }

/* ── Um <details> cujo resumo é a própria ação ─────────────────────────────
 *
 * "excluir esta importação em massa" em texto miúdo cinza não é achado por
 * ninguém — foi relatado duas vezes, aqui e na tela de importar. Um resumo que
 * parece botão diz que ali se clica, e o disclosure continua dando o segundo de
 * pausa que uma ação destrutiva merece.
 */
.resumo-botao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--alt-botao);
  padding: 0 .7rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  font-size: var(--fonte-botao);
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}

.resumo-botao::marker, .resumo-botao::-webkit-details-marker { content: ""; display: none; }
.resumo-botao:hover { border-color: var(--grafite-500); background: var(--superficie-2); }
/* O anel de foco vem do :focus-visible global. Aqui havia uma cópia dele com
   --brand no lugar de --brand-forte: mesmo desenho, laranja mais claro, só
   neste controle. */

.mini-editor-perigo > .resumo-botao { color: var(--danger); border-color: var(--danger); }
.mini-editor-perigo > .resumo-botao:hover { background: var(--danger-fundo); border-color: var(--danger); }

/* ── A logo da emissora ────────────────────────────────────────────────────
 *
 * O quadro tem tamanho fixo e fundo xadrez claro: logo de proposta costuma ser
 * PNG com fundo transparente, e sobre branco não dá para saber se o fundo é
 * transparente ou branco de verdade — a diferença aparece quando o documento é
 * impresso sobre outra cor.
 */
.logo-emissora {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: .9rem 1rem;
  margin-bottom: .9rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
}

.logo-quadro {
  flex: none;
  display: grid;
  place-items: center;
  width: 11rem;
  height: 5.5rem;
  padding: .4rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background-color: var(--superficie);
  background-image:
    linear-gradient(45deg, var(--superficie-3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--superficie-3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--superficie-3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--superficie-3) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.logo-quadro img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.logo-acoes { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .6rem; }
.logo-acoes .formulario { gap: .5rem; }

/* ── Crédito de quem fez ───────────────────────────────────────────────────
 *
 * Assinatura, não anúncio: fica no fim da coluna de conteúdo, no menor
 * tamanho legível, separado por um fio. O link ganha cor da marca só no
 * hover — parado, ele não disputa atenção com nada da tela.
 */
/*
 * O rodapé cola no fim da página, e não no fim do conteúdo.
 *
 * A .casca já tem altura mínima de tela inteira e estica o <main>. Faltava o
 * <main> ser uma coluna flexível para o "margin-top: auto" do crédito empurrá-lo
 * até embaixo — sem isso, numa tela curta como Etiquetas o crédito ficava
 * grudado no último cartão, com meia tela em branco depois dele.
 *
 * Só dentro da casca: a tela de login tem <main> centralizado por outra regra,
 * e virar coluna flexível ali desmontaria o alinhamento.
 */
.casca > main { display: flex; flex-direction: column; }
.casca > main > .credito { margin-top: auto; }

.credito {
  margin: 2.5rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linha);
  font-size: .74rem;
  color: var(--suave);
  text-align: center;
}

.credito a { color: var(--suave); text-decoration: none; border-bottom: 1px solid var(--linha-forte); }
.credito a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.credito a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Grade de campos ───────────────────────────────────────────────────────
 *
 * Formulário de cadastro longo — quinze campos da emissora — numa coluna só
 * vira um rolo de mil e duzentos pixels. Aqui os campos se distribuem sozinhos
 * pela largura: três por linha numa tela grande, dois no meio, um no telefone.
 *
 * O teto de 40rem do .formulario existe porque numa linha mais larga que isso
 * o olho perde o caminho do rótulo até o campo. Numa grade a distância volta a
 * ser curta — cada campo tem 14rem — então o teto sai, e só aqui.
 */
.formulario-largo { max-width: none; }

.campos-grade {
  display: grid;
  gap: .85rem 1rem;
  /*
   * 9.5rem é medida, não gosto.
   *
   * A 1100px de tela com a barra lateral aberta, a coluna tem 380px e o
   * recheio do cartão come 35 — sobram 345 úteis. Dois campos de 11rem
   * precisavam de 368 e a grade colapsava para um por linha, deixando o cartão
   * MAIS alto do que antes desta grade existir. Com 9.5rem cabem dois em 320,
   * que é a mesma largura que o .dupla antigo já entregava ali.
   */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  align-items: start;
}

/* Endereço e razão social não cabem em 11rem sem cortar o que a pessoa
   digitou; ocupam a linha inteira. O mesmo para o título da seção. */
.campos-grade > .largo,
.campos-grade > h3 { grid-column: 1 / -1; }

/* Mas "linha inteira" não pode virar um campo de setecentos pixels para
   escrever o nome de uma empresa — é o mesmo excesso que a medição de
   controles largos demais existe para pegar. */
.campos-grade > .largo { max-width: 40rem; }
.campos-grade > h3 { margin: .5rem 0 0; }
.campos-grade > label { margin: 0; }

/* ── Cartão que segue cartão dentro de uma grade ───────────────────────────
 *
 * `.cartao + .cartao` dá margem de topo para separar cartões empilhados. Numa
 * grade de duas colunas, o segundo cartão é irmão adjacente do primeiro e
 * herdava a margem sem precisar: nascia 14px abaixo do vizinho, e o
 * desalinhamento aparecia em toda tela de duas colunas.
 */
.duas-colunas > .cartao + .cartao { margin-top: 0; }

/* ── Seletor de etiquetas por clique ─────────────────────────────────────────
 *
 * Substitui visualmente o campo de texto original (que continua no DOM,
 * como hidden, sendo quem o formulário de fato envia). As etiquetas já
 * escolhidas viram chips com "×"; as sugeridas ainda não usadas ficam numa
 * segunda fileira, clicáveis para entrar. Digitar continua funcionando, para
 * uma etiqueta nova que ainda não existe em lugar nenhum.
 */
.etiquetas-picker {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .3rem;
}

.etiquetas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 1.6rem;
}

.chip-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .3rem .1rem .55rem;
  border-radius: var(--raio-pilula);
  background: var(--superficie-3);
  color: var(--tinta);
  font-size: .72rem;
  font-weight: 600;
}

.chip-etiqueta-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--suave);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.chip-etiqueta-x:hover { background: var(--danger-fundo); color: var(--danger); }
.chip-etiqueta-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/*
 * `.formulario .etiquetas-nova`, e não `.etiquetas-nova` sozinho.
 *
 * O campo é criado pelo JavaScript dentro de um <form class="formulario">, e
 * ali vale `.formulario input { min-height: var(--alt-controle) }` — uma
 * classe mais um elemento, que ganha de uma classe só. O resultado era um
 * campo com a altura dos campos grandes do formulário, ao lado de chips
 * pequenos, parecendo desalinhado sem que a regra daqui explicasse por quê.
 */
.etiquetas-nova,
.formulario .etiquetas-nova {
  width: auto;
  min-height: var(--alt-controle-mini);
  margin-top: 0;
  padding: 0 .6rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: .82rem;
  max-width: 16rem;
}
.etiquetas-nova:focus { outline: none; border-color: var(--brand); }

.etiquetas-sugestoes { display: flex; flex-wrap: wrap; gap: .3rem; }

.chip-sugestao {
  padding: .1rem .55rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--suave);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.chip-sugestao:hover { border-color: var(--brand); border-style: solid; color: var(--brand-texto); }
.chip-sugestao:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── Grupo de caixas de marcar dentro de um formulário ─────────────────────
 *
 * <fieldset> some do fluxo de .formulario porque não é um <label> — sem isto
 * ficaria sem borda nem espaçamento nenhum, colado no campo anterior.
 */
.campo-marcadores {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
}

.campo-marcadores legend {
  padding: 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--suave);
}

.campo-marcadores .marcador { font-size: .85rem; color: var(--corpo); }

/* ── Envolvidos: escolher um a um ────────────────────────────────────────────
   Reaproveita os chips das etiquetas — é o mesmo gesto, "juntar vários sem
   digitar", e dois desenhos diferentes para o mesmo gesto só dariam trabalho
   de aprender duas vezes. O que muda é a origem: ali texto livre, aqui uma
   lista fechada de gente, então no lugar do campo de digitar vem um seletor. */
.envolvidos-picker {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .3rem;
}

.envolvidos-escolher {
  min-height: var(--alt-controle);
  max-width: 22rem;
  padding: 0 .6rem;
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
}
.envolvidos-escolher:disabled { color: var(--suave); background: var(--superficie-2); }

.envolvidos-vazio:empty { display: none; }
.envolvidos-vazio { margin: 0; }

/* ── Manual do usuário ───────────────────────────────────────────────────────
 *
 * Documento para ler, e não painel para operar: coluna de texto estreita, com
 * o índice fixo ao lado em tela grande. A largura é limitada de propósito —
 * linha de texto que atravessa um monitor inteiro se perde no retorno.
 */
.manual { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }

@media (min-width: 62rem) {
  .manual { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; }
  /* Acompanha a rolagem: num texto de dezesseis seções, voltar ao topo para
     trocar de assunto é o que faz alguém desistir de procurar. */
  .manual-indice { position: sticky; top: 1rem; }
}

.manual-indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.manual-indice a {
  display: block;
  padding: .3rem .5rem;
  border-radius: var(--raio-botao);
  color: var(--corpo);
  text-decoration: none;
  font-size: .88rem;
}
.manual-indice a:hover { background: var(--superficie-2); color: var(--tinta); }
.manual-indice a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.manual-corpo { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.manual-corpo p, .manual-corpo ul, .manual-corpo ol { max-width: 70ch; }
.manual-corpo h3 {
  margin: 1.4rem 0 .3rem;
  font-size: .95rem;
  color: var(--tinta);
}
.manual-corpo ul, .manual-corpo ol { padding-left: 1.1rem; }
.manual-corpo li { margin: .25rem 0; }

/* O aviso não vira cartão: dentro de um cartão, outro cartão só embaralha a
   hierarquia. Uma barra à esquerda basta para dizer "leia isto com atenção". */
.manual-nota {
  max-width: 70ch;
  padding: .7rem .9rem;
  border-left: 3px solid var(--linha-forte);
  background: var(--superficie-2);
  border-radius: 0 var(--raio-botao) var(--raio-botao) 0;
  font-size: .92rem;
}
.manual-nota-atencao { border-left-color: var(--danger); background: var(--danger-fundo); }

/* ── O histórico de mudanças ─────────────────────────────────────────────────
   A data à esquerda, fixa, para a leitura correr pela coluna das datas — que é
   como se procura "o que mudou desde que eu vi isto". */
.manual-mudancas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.manual-mudancas > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linha);
}
.manual-mudancas > li:last-child { border-bottom: 0; }

@media (min-width: 34rem) {
  .manual-mudancas > li { grid-template-columns: 6.5rem 1fr; }
}

.manual-mudancas time {
  font-size: .78rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}
.manual-mudancas strong { color: var(--tinta); font-size: .95rem; }
.manual-mudancas p { margin: .15rem 0 0; font-size: .9rem; max-width: 62ch; }

/* ── Balanço por situação, no topo das propostas ─────────────────────────────
 * Cada bloco é um link que aplica aquela situação ao filtro; o ativo fica
 * marcado pela borda, não por cor de fundo — o selo dentro já tem cor, e duas
 * cores brigando na mesma peça deixam de significar coisa alguma.
 */
.balanco-situacao {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: -.5rem 0 1rem;
}

.balanco-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 7rem;
  padding: .5rem .7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
}
.balanco-item:hover { border-color: var(--linha-forte); }
.balanco-item-ativo { border-color: var(--brand); border-width: 2px; padding: calc(.5rem - 1px) calc(.7rem - 1px); }
.balanco-item strong { font-size: 1.35rem; line-height: 1.1; color: var(--tinta); }
.balanco-item .sutil { font-size: .75rem; }

/* ── Imagens anexadas à proposta ─────────────────────────────────────────────
 * Miniaturas em grade: são de conferência, não de leitura — quem quiser ver
 * grande abre o documento impresso, que é onde elas de fato importam.
 */
.imagens-proposta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.imagem-proposta {
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie-2);
}

/*
 * `contain`, e não `cover`: a miniatura serve para conferir qual imagem é, e
 * `cover` recortava as bordas para preencher o quadro — numa foto de
 * equipamento na vertical, sumia justamente o aparelho. Aqui ela cabe inteira,
 * com o fundo aparecendo nas sobras.
 *
 * A altura é a mesma em todas para a grade ficar alinhada; mudar o teto é
 * mexer só nesta variável.
 */
.imagens-proposta { --imagem-proposta-altura: 240px; }

.imagem-proposta img {
  display: block;
  width: 100%;
  height: var(--imagem-proposta-altura, 240px);
  object-fit: contain;
  border-radius: var(--raio-botao);
  background: var(--superficie-3);
}

.imagem-proposta figcaption {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .4rem;
  font-size: .78rem;
  color: var(--suave);
  overflow-wrap: anywhere;
}

/* ── Campo de busca "dentro" do select ───────────────────────────────────────
 * Visualmente substitui o <select> original (que continua no DOM, escondido,
 * sendo quem o formulário de fato envia). A lista batida flutua por baixo do
 * campo, do mesmo jeito que o mini-editor da tabela flutua sobre a linha —
 * mesma sombra, mesmo raio, para ler como a mesma família de painel.
 */
.select-busca { position: relative; }

.select-busca-lista {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: .3rem;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.select-busca-opcao {
  padding: .4rem .6rem;
  border-radius: var(--raio-botao);
  font-size: .9rem;
  line-height: 1.3;
  cursor: pointer;
}
.select-busca-opcao.ativa,
.select-busca-opcao:hover { background: var(--superficie-3); }
.select-busca-opcao.selecionada { font-weight: 600; color: var(--brand-texto); }

.select-busca-vazio {
  padding: .4rem .6rem;
  font-size: .85rem;
  color: var(--suave);
}

.select-busca-mais {
  margin-top: .2rem;
  padding: .35rem .6rem 0;
  border-top: 1px solid var(--linha);
  font-size: .75rem;
  color: var(--suave);
  cursor: default;
}

/* Coluna de marcar, na seleção em massa. Estreita e centrada: é um alvo de
   clique, não uma coluna de dado. */
.col-marcar { width: 2rem; text-align: center; }

/* O comando do cron, para copiar. Rola dentro da caixa: linha longa não pode
   empurrar a página inteira para o lado. */
.codigo {
  margin: 0;
  padding: .7rem .8rem;
  overflow-x: auto;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre;
}
.codigo code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Prévia do e-mail de alerta, na tela de edição. Não é o e-mail: é uma
   miniatura fiel o bastante para julgar o texto sem precisar mandar um. */
.previa-alerta {
  margin: .75rem 0 1rem;
  padding: .9rem 1rem;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--brand);
  border-radius: var(--raio);
}
.previa-etiqueta {
  margin: 0 0 .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--suave);
}
.previa-titulo { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--tinta); }
.previa-resumo { margin: 0 0 .6rem; font-size: .88rem; color: var(--corpo); }
.previa-botao {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: var(--raio);
  background: var(--brand);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
}

/* ── Orçamento: o desenho da planilha ────────────────────────────────────────
   Preenchimento à esquerda, fórmula à direita, na mesma ordem do arquivo que
   a casa já usava. Linhas apertadas e fio fino de propósito: é uma grade de
   conferência, não um formulário de cadastro — o gesto é correr o olho pela
   coluna de números, e espaçamento generoso atrapalharia isso. */
.planilha-topo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem 1rem;
  margin-bottom: 1.1rem;
}
.planilha-topo label { display: flex; flex-direction: column; gap: .2rem;
                       font-size: .74rem; text-transform: uppercase;
                       letter-spacing: .07em; color: var(--suave); }
/* Mais específico que a regra de cima de propósito: `display: flex` ali venceria
   o atributo `hidden`, e Área continuaria aparecendo na Ponto 1. */
.planilha-topo label[hidden] { display: none; }
/* Fora de .formulario nada é estilizado, e estes campos ficam fora dela. */
.planilha-topo input,
.planilha-topo select,
.planilha-obs textarea {
  width: 100%;
  min-height: var(--alt-controle);
  padding: 0 .6rem;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
}
/* Escolha fechada vai em caixa alta, como as etiquetas: o que está escolhido
   tem de se distinguir do que foi digitado, e a linha de rótulos acima já é
   assim. Vale também para as opções abertas, senão a lista muda de forma. */
.planilha-topo select,
.planilha-topo select option { text-transform: uppercase; letter-spacing: .04em; }
.planilha-obs textarea { padding: .5rem .6rem; line-height: 1.45; }
.planilha-topo input:focus,
.planilha-topo select:focus,
.planilha-obs textarea:focus { border-color: var(--brand); }

.planilha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.planilha-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

@media (max-width: 63.99rem) {
  .planilha { grid-template-columns: minmax(0, 1fr); }
}

.planilha-bloco {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 8px;
  overflow: hidden;
  font-size: .84rem;
}
.planilha-bloco caption {
  caption-side: top;
  text-align: left;
  padding: .5rem .7rem;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--suave);
}
.planilha-bloco th,
.planilha-bloco td {
  padding: .22rem .7rem;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.planilha-bloco tr:last-child th,
.planilha-bloco tr:last-child td { border-bottom: 0; }
.planilha-bloco th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--corpo);
}
.planilha-bloco th label { display: block; cursor: pointer; }
.planilha-bloco td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--corpo);
  white-space: nowrap;
}
/* A caixa some dentro da célula: só o número, alinhado com os calculados. */
.planilha-bloco td input {
  width: 100%;
  min-width: 5rem;
  padding: .2rem .35rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.planilha-bloco td input:hover { border-color: var(--linha); }
.planilha-bloco td input:focus {
  border-color: var(--brand);
  background: var(--superficie);
  outline: 2px solid transparent;
}
.planilha-bloco td input::placeholder { color: var(--suave); opacity: .65; }
.planilha-pct { width: 3.5rem; color: var(--suave); }

.planilha-soma th,
.planilha-soma td {
  border-top: 1px solid var(--linha-forte);
  font-weight: 700;
  color: var(--tinta);
}

/* O bloco que vira o documento: é o único que o cliente vê. */
.planilha-final { border-color: var(--linha-forte); }
.planilha-final caption { background: var(--brand); color: var(--brand-tinta); }
.planilha-preco th,
.planilha-preco td {
  border-top: 2px solid var(--linha-forte);
  padding-top: .45rem;
  padding-bottom: .45rem;
  font-weight: 700;
  color: var(--tinta);
}
.planilha-preco td { font-size: 1.25rem; }

/* Excluir fica fora do formulário do orçamento — e longe do resto, porque não
   tem volta. A grade é filha do formulário, então o irmão é ele, não ela. */
[data-orcamento] + .em-linha { margin-top: 1.75rem; }

.planilha-obs { display: flex; flex-direction: column; gap: .25rem;
                font-size: .74rem; text-transform: uppercase;
                letter-spacing: .07em; color: var(--suave); }

/* O <select multiple> real fica escondido pelo JavaScript, que usa estilo
   inline. Esta regra é a rede de segurança para o caso de o inline ser
   perdido numa reordenação de DOM — sem ela, a lista nativa reaparece ao lado
   das etiquetas e a tela mostra a mesma escolha duas vezes. */
select[data-picker="envolvidos"][aria-hidden="true"] { display: none !important; }

/* ── Parear o WhatsApp ───────────────────────────────────────────────────────
   O código ao lado da instrução, e não acima: quem está com o celular na mão
   precisa ler o passo a passo e mirar a câmera ao mesmo tempo. No celular
   empilha, porque aí o próprio aparelho é o que está lendo. */
.conectar-whats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.conectar-whats > div { flex: 1 1 16rem; min-width: 0; }

/* Fundo branco fixo: o QR é preto sobre branco e some no tema escuro se
   herdar a cor da superfície. */
.qrcode-whats {
  width: 232px;
  height: auto;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
@media (max-width: 30rem) {
  .qrcode-whats { width: 100%; max-width: 232px; }
}

/* A pessoa vira link na lista de Usuários: a linha inteira leva à ficha, como
   o nome do contato leva à dele. Sem sublinhado porque o alvo é o bloco todo,
   não uma palavra no meio de um texto. */
a.pessoa { text-decoration: none; color: inherit; }
a.pessoa:hover .forte { text-decoration: underline; }

/* Permissões em leitura, para quem não pode alterá-las. */
.lista-permissoes { list-style: none; margin: .5rem 0 0; padding: 0; }
.lista-permissoes li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: .9rem;
}
.lista-permissoes li:last-child { border-bottom: 0; }

/* ── A nota da planilha, dentro do campo ─────────────────────────────────────
   Os comentários de célula do arquivo original viraram estes ícones. Abrem no
   lugar em vez de balão de mouse: balão não existe no celular, e some quando
   se tenta lê-lo. <details> resolve os dois sem JavaScript. */
.planilha-bloco th label { display: inline; }
.dica { display: inline-block; position: relative; margin-left: .35rem; vertical-align: middle; }
.dica > summary {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--suave);
  font-size: .68rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  list-style: none;
  user-select: none;
}
.dica > summary::-webkit-details-marker { display: none; }
.dica > summary:hover { border-color: var(--brand); color: var(--brand-texto); }
.dica[open] > summary { background: var(--brand); border-color: var(--brand); color: var(--brand-tinta); }
/* Fora do fluxo da célula: a linha não pode saltar de altura ao abrir. */
.dica > p {
  position: absolute;
  top: 1.4rem;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: 20rem;
  margin: 0;
  padding: .5rem .7rem;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  color: var(--corpo);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}

/* ── O veredito da casa sobre o peso do custo ────────────────────────────────
   As faixas são da própria planilha (comentário da célula E35). Cor porque
   dizer "impraticável" em cinza, entre vinte números cinzas, é não dizer. */
.peso-top td, .peso-top th { color: var(--signal); }
.peso-ok td, .peso-ok th { color: var(--signal); }
.peso-atencao td, .peso-atencao th { color: var(--brand-texto); }
.peso-alerta td, .peso-alerta th { color: var(--brand-texto); }
.peso-ruim td, .peso-ruim th { color: var(--danger); }
[data-faixa-rotulo] { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; }

/* A marca de mensagem editada: discreta, mas com o texto antigo no title —
   quem precisa conferir "o que estava escrito antes" passa o mouse. */
.msg-editada { font-style: italic; border-bottom: 1px dotted var(--linha-forte); cursor: help; }

/* ── Seleção em massa no funil ───────────────────────────────────────────────
   A caixinha fica no canto do cartão, fora do caminho do título e da alça de
   arrastar: marcar não pode virar arrastar sem querer. A barra gruda no fim
   da tela porque a seleção atravessa as colunas — some quando não há o que
   marcar, e não quando se rola. */
/*
 * Caixinha de marcar é caixinha, em qualquer lugar.
 *
 * As regras de formulário dão width:100% e altura mínima de controle a todo
 * input, o que é certo para um campo de texto e absurdo para uma caixa de
 * marcar: ela virava um quadrado enorme ao lado do rótulo. Aqui ela volta ao
 * tamanho de sempre — e como isto vale para a página inteira, nenhuma tela
 * nova precisa lembrar de consertar de novo.
 */
input[type="checkbox"],
input[type="radio"] {
  width: .85rem;
  height: .85rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--brand);
  vertical-align: middle;
  cursor: pointer;
}

/* Some de verdade: [hidden] perde para qualquer display de autor. */
.escondida { display: none !important; }

/*
 * Controles de linha de tabela.
 *
 * ── Por que tão apertados ──────────────────────────────────────────────────
 * A célula de ação tem três coisas lado a lado, e cada palavra a mais empurra
 * a tabela para fora da tela — foi assim que a linha do contato quebrou. Aqui
 * eles têm o tamanho do que precisam mostrar, e não o tamanho padrão de um
 * campo de formulário.
 */
/*
 * ── Por que o padding da direita encolheu ─────────────────────────────────
 * 1,3rem à direita reservavam lugar para uma seta que o navegador já desenha
 * — e já reserva. Eram duas reservas para uma seta só, e o vão morto que
 * sobrava antes dela era isso.
 */
select.select-pequeno {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  max-width: 8.5rem;
  min-height: 1.75rem;
  padding: 0 1.05rem 0 .4rem;
  font-size: .78rem;
  /* A mesma seta miúda da etiqueta: a do navegador reserva quase o dobro de
     espaço, e as duas convivem na mesma linha da tabela. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .5rem center, right .32rem center;
  background-size: .18rem .18rem, .18rem .18rem;
  background-repeat: no-repeat;
}

/* Botão que é só ícone: quadrado, do tamanho do desenho. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  min-width: 0;
  height: 1.75rem;
  padding: 0;
}
.btn-icone svg { width: 1rem; height: 1rem; }

/*
 * Data de uma linha só. "28/08/2026 16:13" quebrando ao meio dobra a altura
 * de toda a linha e faz a coluna seguinte parecer deslocada.
 */
.col-quando { white-space: nowrap; }

.cartao-marca { position: absolute; top: .4rem; right: .5rem; z-index: 2; }
.cartao-negocio { position: relative; }
.barra-massa {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
}

/*
 * ── Uma etiqueta que se troca ─────────────────────────────────────────────
 *
 * Mora no fim do arquivo de propósito: `.em-linha select` tem exatamente a
 * mesma força que este seletor, e num empate vence quem vem depois. Subir
 * este bloco para junto das outras etiquetas o faria perder em silêncio.
 * Era etiqueta e virou seletor para poder mudar, mas o seletor comum tinha
 * cara de campo de formulário no meio de uma lista — moldura, altura de
 * controle, peso visual de coisa que se preenche. Aqui ele volta a parecer
 * o que é: uma marca pequena ao lado do nome, que por acaso também se muda.
 *
 * A seta fica, discreta: sem nenhuma pista de que dá para clicar, a troca
 * volta a ser um segredo — que é exatamente o problema que este campo veio
 * resolver.
 */
select.select-etiqueta {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .05rem 1.05rem .05rem .45rem;
  border: 1px solid transparent;
  border-radius: var(--raio-botao);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  background-color: var(--superficie-3);
  color: var(--suave);
  cursor: pointer;
  /* A setinha, desenhada no próprio fundo: sem imagem externa e do tamanho
     certo para uma etiqueta. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .5rem center, right .32rem center;
  background-size: .18rem .18rem, .18rem .18rem;
  background-repeat: no-repeat;
}
select.select-etiqueta:hover { border-color: var(--linha-forte); }
select.select-etiqueta:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* A cor sai do que está escolhido, como saía da etiqueta. */
select.select-etiqueta.etiqueta-volpe { background-color: #e8eef7; color: #1f4f8f; }
select.select-etiqueta.etiqueta-ambas { background-color: #efe8f7; color: #5b3f8f; }

/* Na lista aberta, o texto volta ao normal: pílula é só o campo fechado. */
select.select-etiqueta option { font-size: .82rem; font-weight: 400; color: var(--tinta); background: var(--superficie); }

/* A meta de quem está olhando, no Painel. */
.minha-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .4rem .9rem;
  align-items: center;
  margin: .3rem 0 .6rem;
}
.minha-meta .medidor { height: 12px; }
.minha-meta .placar-pct { grid-area: auto; }
.minha-meta-texto { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: var(--corpo); }

/* A dica do filtro ocupa a linha inteira, embaixo dos controles: sob um campo
   ela o levantaria em relação aos vizinhos (os filtros alinham por baixo). */
.filtros .dica-filtro {
  flex: 1 0 100%;
  margin: 0;
  font-size: .78rem;
  color: var(--suave);
}

/* Proposta: como o interessado sai no documento (só leitura, com o atalho
   para corrigir a empresa no contato). */
.campo-leitura {
  display: grid;
  gap: .15rem;
  padding: .6rem .75rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  font-size: .8rem;
  color: var(--suave);
}
.campo-leitura strong { font-size: .95rem; color: var(--tinta); }
.campo-leitura small { color: var(--suave); }

/* Textos da proposta: a caixa cresce com o que se escreve (um cronograma
   inteiro cabe à vista). Navegador sem suporte fica com as linhas fixas. */
textarea.cresce { field-sizing: content; min-height: 4.5rem; max-height: 70vh; }