/* Esteira de contratos: painel por etapa, fila e modal de mudanca de etapa. */

/* ---------- painel de contadores ---------- */

/*
 * Um botao por etapa, com o numero grande e o nome embaixo.
 *
 * Em grade auto-ajustavel, e nao em linha fixa: sao oito, e numa tela de 1280px
 * com a navegacao lateral eles nao cabem lado a lado sem encolher o numero -
 * que e justamente o que se le de longe.
 */
.esteira-contadores {
  display: grid;
  /*
   * 110px, e nao os 160px de quando o nome da etapa ficava no cartao.
   *
   * O conteudo agora e "20 PE" - com o minimo antigo, os oito cartoes so
   * cabiam lado a lado a partir de ~1400px de painel, e abaixo disso quebravam
   * em duas fileiras para exibir quatro caracteres por cartao. Com 110px eles
   * cabem numa fileira so em qualquer tela de trabalho, que e o formato que faz
   * o painel ser lido de relance.
   */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--esp-4);
  margin-bottom: var(--gutter);
}

.esteira-contador {
  /*
   * Uma LINHA, e nao duas.
   *
   * O cartao empilhava numero e nome da etapa e ocupava ~92px de altura para
   * dizer um numero. Com a sigla no lugar do nome - "20 PE" -, os dois cabem
   * lado a lado e o painel inteiro vira uma regua de ~48px no topo da tela. O
   * espaco que sobra e da tabela, que e onde o trabalho acontece.
   */
  display: flex;
  align-items: center;

  /*
   * Centralizado, e este foi o unico jeito que sobreviveu ao encolhimento.
   *
   * Alinhado a esquerda, "20 PE" deixava dois tercos do cartao vazios a
   * direita - e oito cartoes com um vazio identico do lado direito nao se leem
   * como oito medidas, e sim como oito caixas mal preenchidas.
   */
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
  background: var(--cor-superficie);

  /*
   * A fonte vem do reset de `button` em base.css, que passou a existir por
   * causa deste cartao: sem ele o <button> saia na fonte do navegador, e o
   * numero perdia as figuras tabulares no meio de uma interface em Inter.
   *
   * `color: inherit` continua aqui porque o reset trata so a fonte - e o que
   * impede o azul de controle nativo de vazar para o rotulo.
   */
  color: inherit;

  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.esteira-contador:hover {
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie-baixa);
}

.esteira-contador:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/*
 * A etapa selecionada ganha a borda da marca, e nao so um fundo.
 *
 * `aria-pressed` ja diz o estado para quem usa leitor de tela; a borda e para
 * quem esta olhando e precisa saber por que a lista abaixo encolheu.
 */
.esteira-contador--ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-superficie-baixa);
}

.esteira-contador-num {
  font-size: var(--txt-titulo-g);
  font-weight: 700;
  line-height: 1;
  color: var(--cor-titulo);

  /*
   * Tabular SIM, zero cortado NAO.
   *
   * A classe `.num` do base.css liga os dois de uma vez (`tnum` e `zero`), e o
   * zero cortado existe para coluna de CNPJ e de valor, onde 0 e O precisam se
   * distinguir num bloco de digitos. Num contador solto de 24px ele nao
   * desambigua nada - vira um simbolo riscado, e sao SETE deles lado a lado
   * numa esteira que esta comecando.
   *
   * O `tnum` fica, e e o que importa aqui: mantem a largura do numero estavel
   * quando a contagem passa de 9 para 10 e o cartao nao se mexe.
   */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
}

/*
 * O rotulo agora e SO a sigla, e por isso ele pesa mais do que pesava.
 *
 * Como legenda de duas palavras sob o numero, 12px fraco estava certo: era
 * apoio. Sozinha ao lado do numero, a sigla e a unica coisa que diz de qual
 * etapa aquele numero e - virou informacao, nao apoio, e em 12px fraco ela
 * sumia ao lado de um numero de 22px.
 *
 * O nome por extenso continua no documento, escondido em `.oculto-visual`, e
 * no `title` do botao para quem passa o mouse. Ver montarPainel.
 */
.esteira-contador-rotulo {
  font-size: var(--txt-corpo-p);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--cor-texto-fraco);
}

/*
 * A cor mora na SIGLA do rotulo, e nao no cartao inteiro.
 *
 * Oito cartoes chapados de cor competiriam entre si e com a tabela logo abaixo,
 * e o painel viraria um arco-iris onde nada se destaca. Colorindo so a sigla, o
 * verde de "Loja ativa" e o vermelho de "Perdida" saltam - que sao os dois
 * numeros que alguem procura ao abrir a tela.
 */
.esteira-contador--sucesso .mono {
  color: var(--cor-sucesso-texto);
}

.esteira-contador--erro .mono {
  color: var(--cor-erro-texto);
}

.esteira-contador--info .mono {
  color: var(--cor-info-texto);
}

/* ---------- a barra acima da fila ---------- */

/*
 * So o botao de filtros, encostado a direita.
 *
 * Esta tela nao tem cabecalho visivel - o titulo e o subtitulo sairam para
 * devolver 90px ao painel de etapas -, entao nao ha `.pagina-acoes` onde
 * pendurar o botao como nas outras duas listas. A direita, e nao a esquerda:
 * e ajuste de vista, e nao o comeco da leitura, que aqui sao os contadores.
 */
.esteira-barra {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gutter);
}

/* ---------- a fila ---------- */

/*
 * A linha INTEIRA abre o fluxo da agencia, entao ela precisa parecer clicavel.
 *
 * Antes a acao morava num botao "Mover" numa coluna propria e o cursor de
 * texto sobre o resto da linha estava certo - nada ali respondia. Agora
 * responde, e uma area de 1200px que reage ao clique sem avisar antes e um
 * clique acidental esperando acontecer.
 *
 * O fundo do hover ja vem da classe compartilhada com a lista de leads, onde a
 * linha tambem abre o cadastro.
 *
 * A linha tem UM alvo so. A razao social ja abriu uma ficha propria; desde que
 * a ficha virou a primeira aba do fluxo, os dois caminhos levam ao mesmo lugar
 * e ela voltou a ser texto.
 */
.esteira-tabela tbody tr {
  cursor: pointer;
}

.esteira-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

/* A sigla e o vocabulario de quem opera: pesa mais que o nome por extenso. */
.esteira-sigla {
  font-weight: 700;
}

.esteira-etapa {
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

/*
 * O motivo da perda, sob o nome da agencia.
 *
 * Visivel, e nao escondido num title: e a unica informacao da tela que nao se
 * deduz de nenhuma outra coluna, e e exatamente o que alguem procura ao rever
 * uma agencia perdida.
 */
.esteira-motivo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  max-width: 32ch;
  font-size: var(--txt-rotulo);
  color: var(--cor-erro-texto);
}

.esteira-motivo .icone {
  font-size: 14px;
}

/*
 * "Desconsiderada pelo Bradesco", embaixo do nome da loja.
 *
 * ALERTA e nao ERRO, e a diferenca com `.esteira-motivo` logo acima e
 * deliberada: o vermelho ali e a perda, uma decisao NOSSA e o fim da linha.
 * Este e um fato de fora que a operacao ainda vai decidir o que fazer com - a
 * esteira continua andando -, e pintar os dois da mesma cor diria que a agencia
 * ja acabou quando ela nao acabou.
 */
.esteira-recusa {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  max-width: 32ch;
  font-size: var(--txt-rotulo);
  color: var(--cor-alerta-texto);
}

.esteira-recusa .icone {
  font-size: 14px;
}

/* O mesmo aviso no topo do modal, onde ele e a primeira coisa a ler. */
.esteira-recusa-aviso {
  margin: 0 0 var(--esp-3);
}

/*
 * "Doc. solicitados: sim/não", embaixo da pill da etapa.
 *
 * `block` para cair na linha de baixo sem um <br>, e `white-space: nowrap` para
 * a frase curta nao quebrar entre o rotulo e a resposta - "Doc. solicitados:"
 * numa linha e "não" na seguinte se leria como duas informacoes.
 *
 * CINZA POR PADRAO, inclusive no "não": a agencia que acabou de entrar em II
 * ainda nao teve a documentacao pedida, e isso e o curso normal. Vermelho aqui
 * pintaria metade da tabela de alerta e gastaria a cor que marca a perda.
 */
.esteira-doc-solicitada {
  display: block;
  margin-top: 4px;
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

/* Marcada, so o "sim" ganha peso - e a diferenca que se procura de relance. */
.esteira-doc-solicitada--sim strong {
  color: var(--cor-sucesso-texto);
}

/*
 * "Documentos 4/10", embaixo do pedido - os dois se leem como um par: pedimos?
 * e quanto voltou?
 *
 * Herda a mesma medida e a mesma cor do irmao de cima, de proposito. Sao duas
 * linhas da mesma frase sobre a papelada, e pesos diferentes fariam uma delas
 * parecer mais importante que a outra sem que isso seja verdade.
 */
.esteira-documentos {
  display: block;
  margin-top: 2px;
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

/* Tudo APROVADO - nao "tudo enviado". Ver `montarDocumentos`. */
.esteira-documentos--completo strong {
  color: var(--cor-sucesso-texto);
}

/*
 * O interruptor na aba II, acima do dossie.
 *
 * Separado dos slots por uma borda inferior, e nao por um card: ele e o passo
 * ANTERIOR ao dossie - pedir acontece antes de receber -, e uma caixa propria o
 * leria como assunto a parte em vez de como o comeco da mesma sequencia.
 */
.esteira-doc-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

/*
 * O "Contato realizado?" da aba SC, acima das atividades - a mesma medida do
 * interruptor de II, pela mesma razao: e o passo que vem antes do relato.
 */
.esteira-contato-campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

/* A observacao em leitura preserva as quebras de linha que o analista digitou. */
.esteira-contato-observacao {
  margin: 0;
  white-space: pre-line;
}

/*
 * A classificacao: um selo colorido com o nome, e o intervalo em R$ embaixo.
 *
 * Empilhados e nao lado a lado - o intervalo e uma frase inteira
 * ("R$ 150.001 a R$ 300.000") e ao lado do selo empurraria a coluna para o
 * dobro da largura numa tabela que ja e larga. Quem nao recebe os limites
 * (analista) fica so com o selo, e a celula encolhe sozinha.
 */
.esteira-col-classificacao {
  white-space: nowrap;
}

/*
 * O selo. A COR E APOIO E NUNCA O DADO: dentro dele ja estao as estrelas e o
 * nome escritos, e a cor so reforca um degrau que a pessoa esta lendo. Em
 * preto e branco, ou para quem nao distingue as cores, nada se perde.
 */
.esteira-faixa {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 100%;
  padding: 2px var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--cor-superficie-baixa);
  color: var(--cor-texto);
  font-size: var(--txt-rotulo);
}

.esteira-estrelas {
  /* Sem a fonte do sistema para simbolo, o ★ herda a metrica da Inter e as
     cinco estrelas ficam com largura irregular entre uma linha e outra. */
  font-family: system-ui, 'Segoe UI Symbol', sans-serif;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* As vazias sao o fundo da escala, e nao um segundo dado: ficam apagadas. */
.esteira-estrelas-vazias {
  opacity: 0.35;
}

.esteira-faixa-nome {
  font-weight: 600;
}

/*
 * Uma regra por ordem, e a ordem e a chave - o nome e editavel. Ver os tokens
 * `--faixa-N-*`, que tambem trazem os tons do tema escuro.
 *
 * `.esteira-faixa--0` nao existe de proposito: ordem fora de 1..5 fica com o
 * selo neutro declarado acima, em vez de cair sem estilo nenhum.
 */
.esteira-faixa--1 {
  background: var(--faixa-1-tint);
  border-color: var(--faixa-1-borda);
  color: var(--faixa-1-texto);
}

.esteira-faixa--2 {
  background: var(--faixa-2-tint);
  border-color: var(--faixa-2-borda);
  color: var(--faixa-2-texto);
}

.esteira-faixa--3 {
  background: var(--faixa-3-tint);
  border-color: var(--faixa-3-borda);
  color: var(--faixa-3-texto);
}

.esteira-faixa--4 {
  background: var(--faixa-4-tint);
  border-color: var(--faixa-4-borda);
  color: var(--faixa-4-texto);
}

.esteira-faixa--5 {
  background: var(--faixa-5-tint);
  border-color: var(--faixa-5-borda);
  color: var(--faixa-5-texto);
}

.esteira-faixa-intervalo {
  display: block;
  max-width: 22ch;
  margin-top: 2px;
  font-size: var(--txt-rotulo-p);
}

/* ---------- aba da agencia (a antiga ficha) ---------- */

/*
 * Duas colunas, e nao uma lista.
 *
 * Sao dez pares curtos - rotulo de uma palavra, valor de duas. Empilhados, a
 * ficha viraria uma tira de dez linhas com o modal vazio a direita; em duas
 * colunas ela cabe de uma olhada. `auto-fit` volta para uma coluna no celular
 * sem media query.
 */
.esteira-ficha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.esteira-ficha-campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/*
 * O bloco do Bradesco NAO tem regra aqui.
 *
 * Ele e desenhado por pages/leads/bradesco.js, que abre nesta aba e na aba
 * "Bancos" do cadastro da loja, e traz o proprio vocabulario - `bradesco-bloco`,
 * `bradesco-grade`, `bradesco-campo`. A folha dele e leads.css. Uma copia das
 * regras aqui faria a mesma camada ter dois desenhos em duas telas.
 */

/* ---------- modal de mudanca de etapa ---------- */

.esteira-dialogo {
  --width: 34rem;
}

/* ---------- o modal de etapas, em abas ---------- */

/*
 * Largura em PORCENTAGEM DA TELA, com teto.
 *
 * 92vw e o que foi pedido: o modal acompanha o monitor em vez de ficar preso
 * numa medida boa para um tamanho so. O teto existe porque a partir de certa
 * largura o formulario para de ganhar - os campos nao ficam mais legiveis, so
 * mais distantes uns dos outros, e a linha de leitura fica longa demais para
 * o olho voltar sem se perder. Num monitor de 1440px o teto nem entra na
 * conta; num ultrawide ele evita um modal de um metro.
 */
.esteira-fluxo {
  --width: min(1140px, 92vw);
}

.esteira-fluxo-abas {
  width: 100%;
}

/*
 * A aba tem duas linhas: sigla em cima, rotulo embaixo.
 *
 * So a sigla seria oito enigmas de duas letras para quem chegou esta semana;
 * so o rotulo faria "Identificação de interesse" disputar largura com outras
 * sete. Juntas, a sigla e o apoio de quem opera e o rotulo e a traducao de
 * quem ainda nao decorou - a mesma escolha da pill na lista.
 */
/*
 * O padrao do componente e `padding: 1em 1.5em` com `white-space: nowrap`.
 * Com oito abas e rotulos como "Identificação de interesse", isso passa da
 * largura do modal e o grupo cai nos botoes de rolagem - um fluxo que precisa
 * ser rolado para ser visto por inteiro perde a razao de ser abas. Aqui o
 * rotulo passa a quebrar em duas linhas e o respiro diminui, e as oito cabem.
 */
.esteira-fluxo-aba::part(base) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  white-space: normal;
  padding: var(--esp-2) var(--esp-3);
  min-width: 96px;
}

.esteira-fluxo-aba-sigla {
  font-size: var(--txt-rotulo);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.esteira-fluxo-aba-rotulo {
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  line-height: 1.2;
}

/* A etapa onde a agencia esta: ponto na aba, alem do estado de selecionada. */
.esteira-fluxo-aba-marca {
  position: absolute;
  top: var(--esp-2);
  inset-inline-end: var(--esp-2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-primaria);
}

.esteira-fluxo-aba--atual {
  position: relative;
}

.esteira-fluxo-aba--atual .esteira-fluxo-aba-sigla {
  color: var(--cor-primaria);
}

/*
 * Percorrida e um estado DISCRETO: a aba fica em tom cheio em vez do apagado
 * das etapas que nunca aconteceram. Nao ganha cor propria - seriam tres cores
 * de aba competindo com as cores das pills logo abaixo, e a informacao "ja
 * passou por aqui" esta escrita por extenso dentro do painel.
 */
.esteira-fluxo-aba--percorrida .esteira-fluxo-aba-rotulo {
  color: var(--cor-texto);
}

/*
 * NAO DAR `display` AO PAINEL.
 *
 * O componente esconde os inativos com `:host { display: none }` e mostra o
 * ativo com `:host([active]) { display: block }` - conferido no bundle
 * 3.12.0. Um `display: flex` nesta regra venceria os dois e o modal abriria
 * com as OITO etapas empilhadas de uma vez.
 *
 * O empilhamento vai no part `base`, que e o <slot> de dentro, e o respiro
 * vai na variavel `--padding`, que e a API que o proprio componente expoe.
 */
/*
 * As abas de CONTEXTO - a da loja e a do banco: icone e rotulo lado a lado,
 * e nao empilhados.
 *
 * As oito abas de etapa empilham sigla e nome porque as duas coisas sao texto.
 * Estas nao tem sigla - nao sao degraus -, e o icone ao lado do rotulo e o que
 * as separa das outras antes de qualquer leitura. Sem isso, a regua pareceria
 * ter dez etapas.
 */
.esteira-fluxo-aba--contexto::part(base) {
  flex-direction: row;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

.esteira-fluxo-aba--contexto .esteira-fluxo-aba-rotulo {
  font-size: var(--txt-rotulo);
  font-weight: 600;
  color: inherit;
}

/*
 * O botao de mover some na aba da agencia, e o `hidden` precisa de ajuda.
 *
 * O <wa-button> declara o proprio `display` numa regra `:host` do shadow DOM, e
 * regra de autor do documento vence regra de autor do shadow - mas a do
 * NAVEGADOR para [hidden] perde. Sem esta linha, esconder o botao nao o
 * esconde. Mesmo caso do spinner da busca no cabecalho.
 */
.esteira-dialogo-rodape wa-button[hidden] {
  display: none;
}

.esteira-fluxo-painel {
  --padding: var(--esp-4) 0 0;
}

.esteira-fluxo-painel::part(base) {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.esteira-fluxo-situacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2);
  font-size: var(--txt-rotulo);
}

/*
 * Telas estreitas: as abas empilham o rotulo e ficam roláveis na horizontal,
 * que e o comportamento proprio do <wa-tab-group>. O que muda aqui e so a
 * largura do modal, que passa a ser quase a janela inteira - num celular nao
 * ha margem a preservar.
 */
@media (max-width: 900px) {
  .esteira-fluxo {
    --width: 96vw;
  }
}

.esteira-dialogo-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.esteira-dialogo-agencia {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.esteira-dialogo-dica {
  margin: 0;
  font-size: var(--txt-rotulo);
}

.esteira-dialogo-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
}

/* ---------- historico ---------- */

/*
 * A trilha e uma lista, e nao uma tabela.
 *
 * Sao quatro campos curtos por linha e nunca mais que algumas dezenas de
 * linhas; uma tabela dentro de um modal de 34rem obrigaria a rolar na
 * horizontal para ler o autor.
 */
.esteira-historico {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
}

.esteira-historico ul {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}

/*
 * Tres colunas desde que a passagem virou corrigivel: data, texto e a acao.
 *
 * A terceira e `auto`, entao ela nao ocupa nada para quem nao pode editar - a
 * trilha de um analista continua com o mesmo desenho de antes.
 */
.esteira-historico li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px var(--esp-3);
  font-size: var(--txt-rotulo);
  align-items: baseline;
}

.esteira-historico-meta {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-width: 0;
}

/* A acao atravessa as linhas da celula e fica centrada ao lado da passagem. */
.esteira-historico-acao {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
}

/* O formulario ocupa a linha inteira, e nao a primeira coluna do grid. */
.esteira-historico-editando {
  grid-column: 1 / -1;
}

.esteira-historico-quando {
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

.esteira-historico-passo {
  color: var(--cor-texto);
}

.esteira-historico-motivo {
  grid-column: 2;
  color: var(--cor-erro-texto);
}

.esteira-historico li .fraco {
  grid-column: 2;
}

@media (max-width: 900px) {
  /*
   * Menor que o minimo de cima, e nao maior - o valor de 120px vinha de quando
   * o cartao carregava o nome da etapa. Mantido, ele faria os cartoes
   * ENGORDAREM justamente onde ha menos espaco.
   */
  .esteira-contadores {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }
}

/* ---------- atividades: as interacoes de cada etapa ---------- */

.atividade-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
}

.atividade-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.atividade-vazio {
  margin: 0;
  font-size: var(--txt-rotulo);
}

.atividade-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/*
 * A interacao e uma LINHA, e nao um cartao.
 *
 * Sao muitas por etapa e todas curtas; cartoes com borda e sombra dariam a
 * cada ligacao o peso visual de um bloco de conteudo, e quinze delas
 * transformariam a aba numa parede. A regua de icone a esquerda ja separa uma
 * da outra sem desenhar caixa nenhuma.
 */
.atividade-item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-container);
  background: var(--cor-superficie-baixa);
}

.atividade-item--editando {
  background: transparent;
  padding: 0;
}

.atividade-icone {
  color: var(--cor-texto-fraco);
  margin-top: 2px;
  flex-shrink: 0;
}

.atividade-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atividade-cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.atividade-tipo-rotulo {
  font-size: var(--txt-rotulo);
  font-weight: 600;
  color: var(--cor-titulo);
}

.atividade-quando {
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
}

/*
 * `pre-wrap`: o relato foi digitado numa textarea, e quem escreveu em tres
 * linhas escreveu em tres linhas de proposito. Colapsar tudo numa so entrega
 * um paragrafo que o autor nao escreveu.
 */
.atividade-descricao-texto {
  margin: 0;
  font-size: var(--txt-corpo-p);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.atividade-rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--txt-rotulo-p);
}

/*
 * A marca de edicao e discreta e SEMPRE visivel.
 *
 * Discreta porque quase toda linha sera original e um aviso forte em cada
 * excecao viraria alarme. Sempre visivel porque e o que separa o registro do
 * que a ultima pessoa quis que estivesse escrito - escondida num hover, ela
 * nao existiria para quem le a lista de relance, que e como se le uma lista.
 */
.atividade-editada {
  font-size: var(--txt-rotulo-p);
  font-style: italic;
  color: var(--cor-texto-fraco);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.atividade-acoes,
.atividade-confirmar {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-shrink: 0;
}

.atividade-confirmar {
  gap: var(--esp-2);
  font-size: var(--txt-rotulo-p);
}

/* ---------- formularios embutidos ---------- */

/*
 * O formulario abre DENTRO do painel, e nao num segundo modal.
 *
 * Um <wa-dialog> sobre outro empilha duas camadas de foco e duas de Escape, e
 * o de cima esconde a lista que da contexto ao que se esta escrevendo - "qual
 * foi mesmo a ultima ligacao?" e uma pergunta que se responde olhando, e nao
 * fechando a janela.
 */
.atividade-form,
.passagem-form {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
  background: var(--cor-superficie);
}

.atividade-form-linha,
.passagem-form-linha {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.atividade-form-linha > *,
.passagem-form-linha > * {
  flex: 1 1 180px;
  min-width: 0;
}

.atividade-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
}

/* ---------- historico editavel ---------- */

.esteira-historico-topo {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-2);
}

/*
 * O aviso diz PARA QUE a edicao existe.
 *
 * Sem ele, um lapis ao lado de cada passagem parece uma funcionalidade
 * permanente da tela - e nao a ferramenta de um periodo de carga, que e o que
 * ela e. Ver 0020.
 */
.esteira-historico-aviso {
  font-size: var(--txt-rotulo-p);
  flex: 1 1 240px;
}

.esteira-historico-editando {
  padding-block: var(--esp-2);
}

/*
 * O prazo da 1a producao, na coluna "Bradesco", embaixo da pendencia.
 *
 * `flex` com `width: fit-content` para cair na linha de baixo sem um <br> e
 * sem esticar ate a largura da celula - a pill continua do tamanho do texto.
 * So existe quando pede acao (vencendo ou vencida): ver montarPrazoProducao.
 */
.esteira-col-bradesco .prazo-producao {
  display: flex;
  width: fit-content;
  margin-top: var(--esp-1);
}