/* ==========================================================================
   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);
}
.filtros .btn { min-height: var(--alt-controle); }
.limpar { align-self: center; font-size: .85rem; }

/* ── 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: var(--brand-suave); 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);
}
/* Tintas sobre o escuro: fundo com 14% de cor e o texto na versão clara
   dela. Os tons pastéis do tema claro viravam manchas leitosas aqui. */
.etiqueta-movili { background: var(--brand-suave); color: var(--brand-texto); }
.etiqueta-ambas { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.etiqueta-dono { background: var(--signal-fundo); color: var(--signal); }

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

.acao > summary {
  cursor: pointer;
  color: var(--brand-texto);
  font-weight: 600;
  font-size: .85rem;
  list-style: none;
  min-height: var(--alt-controle-mini);
  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 { min-height: var(--alt-controle-mini); padding: 0 .7rem; font-size: .82rem; }

.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; }

/* ── 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);
}

.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 .6rem;
  font: inherit;
  font-size: .9rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  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; }

.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; }

/* ── 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); }

/* As já usadas, oferecidas abaixo do campo — etiquetar não deve exigir
   lembrar a grafia exata que alguém usou semana passada. */
.tags-sugeridas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.tags-sugeridas button {
  border: 1px solid var(--linha-forte);
  background: transparent;
  border-radius: var(--raio-pilula);
  padding: .15rem .55rem;
  font: inherit;
  font-size: .72rem;
  color: var(--suave);
  cursor: pointer;
}
.tags-sugeridas button:hover { border-color: var(--brand); color: var(--brand-texto); }

/* ── 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 ───────────────────────────── */

.btn-perigo {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-perigo:hover { background: var(--danger); color: #2a0707; }

/* 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; }
td.acoes-celula > *, th.acoes-celula > * { vertical-align: middle; margin-right: .3rem; }
td.acoes-celula > *:last-child, th.acoes-celula > *:last-child { margin-right: 0; }
.acoes-celula .btn { white-space: nowrap; }

.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%; }

/* A etiqueta em uso precisa saltar do cartão — e o cartão é feito do mesmo
   grafite que ela usava antes para se destacar. */
.tag-ativa { background: var(--brand); color: var(--brand-tinta); border-color: var(--brand); }

.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: 640px) {
  .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 {
  /* O verde da nossa ponta da conversa, na versão escura do próprio WhatsApp:
     o #dcf8c6 do tema claro brilhava como um holofote no meio da tela. */
  background: #005c4b;
  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: #005c4b; 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: 640px) {
  .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;
  }
}

/* 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; }

/* ── 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-controle-mini);
  padding: 0 .7rem;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  font-size: .82rem;
  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); }
.resumo-botao:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.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; }

.etiquetas-nova {
  min-height: var(--alt-controle-mini);
  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; }

/* 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: var(--brand-tinta);
  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 Movili. */
.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-movili { background-color: var(--brand-suave); color: var(--brand-texto); }
select.select-etiqueta.etiqueta-ambas { background-color: rgba(167, 139, 250, .16); color: #c4b5fd; }

/* 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); }