/* As telas da regua de WhatsApp no painel (14/10, entrega 2; spec
   docs/superpowers/specs/2026-10-13-regua-debitos-veiculares-design.md,
   secao 16).

   Nenhum componente novo de verdade aqui: a tabela e `.painel__tabela`, os
   numeros grandes sao `.inicio__estado`, os avisos sao `.inicio__aviso`, as
   etiquetas sao `.convites__estado`, o campo do teto e `.convites__form`, e
   os modais sao exatamente os `.conversa__encerrar-*` do "Encerrar todas".
   So mora aqui o que a regua tem a mais: as cores de cada situacao, o
   alerta, o filtro por situacao e o espaco entre os blocos. */

/* ── avisos e alertas ─────────────────────────────────────────────────── */

/* "Envio real desligado neste ambiente": em destaque, mas e estado, nao
   erro -- a cor de atencao, e nao a de perigo. */
.reguas__aviso { border-left-color: var(--bc-warn); }
.reguas__aviso strong { color: var(--bc-ink); }

.reguas__alertas {
  display: grid;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.reguas__alertas .inicio__aviso { margin-bottom: 0; }
.reguas__alerta { border-left-color: var(--bc-danger); }
.reguas__alerta strong { color: var(--bc-ink); }

/* ── situacao da regua e do contato ───────────────────────────────────── */

.reguas__situacao,
.reguas__contato {
  display: inline-block;
  color: var(--bc-ink-mut);
  background: color-mix(in srgb, var(--bc-ink-faint) 14%, transparent);
  white-space: nowrap;
}

.reguas__situacao--ativa,
.reguas__contato--ativa,
.reguas__contato--respondeu {
  color: var(--bc-ok);
  background: color-mix(in srgb, var(--bc-ok) 14%, transparent);
}

.reguas__situacao--pausada,
.reguas__situacao--simulacao,
.reguas__contato--aguardando_decisao {
  color: var(--bc-warn);
  background: color-mix(in srgb, var(--bc-warn) 16%, transparent);
}

.reguas__situacao--parada,
.reguas__contato--falhou {
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 12%, transparent);
}

/* O motivo vai na linha de baixo da etiqueta (ou do numero): ao lado, ele
   empurrava a coluna e quebrava o nome do cliente em duas linhas. */
.reguas__motivo {
  display: block;
  margin-top: .2rem;
  color: var(--bc-ink-mut);
  font-size: .78rem;
}

.reguas__sem-quebra { white-space: nowrap; }

/* ── numeros ──────────────────────────────────────────────────────────── */

.reguas__numero { font-variant-numeric: tabular-nums; }
.reguas__numero--zero { color: var(--bc-ink-faint); }
.reguas__celula-numero { text-align: right; }

.reguas__passos,
.reguas__codigos {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  line-height: 1.6;
}

.reguas__codigos { color: var(--bc-ink-mut); font-size: .78rem; }

/* O selo "Aguardando decisao" da lista: o mesmo desenho da contagem ao lado
   de "Conversas" na barra lateral. */
.reguas__selo {
  display: inline-block;
  min-width: 1.6rem;
  padding: .1rem .5rem;
  color: var(--bc-primary-ink);
  background: var(--bc-danger);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* ── controles e blocos ───────────────────────────────────────────────── */

.reguas__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.5rem;
}

.reguas__controle { display: inline-flex; }

/* As duas decisoes de um item, uma embaixo da outra: lado a lado, a celula
   pedia a largura das duas e espremia o nome do cliente. */
.reguas__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}

.reguas__tabela { margin-bottom: .5rem; }
/* Depois do campo do teto, e nao colado nele: `.painel .inicio__estado`
   (z_refinamento.css) zera a margem de cima. */
.painel .inicio__estado.reguas__teto { margin-top: 1.5rem; }
.reguas__subtitulo-menor { font-size: 1rem; }

/* O total dos lotes reais, separado das linhas que ele soma. */
.reguas__tabela tfoot td { border-top: 1px solid var(--bc-line); }

/* "Por que nao esta saindo" e uma lista de motivo e numero: na largura toda,
   o numero ficava longe demais do motivo para ler na mesma linha. */
.painel .painel__tabela.reguas__tabela--motivos { width: min(100%, 560px); }

/* ── no computador ────────────────────────────────────────────────────── */

@media (min-width: 761px) {
  /* A lista de reguas tem nove colunas: com o espaco das outras tabelas
     (24px de cada lado) ela passava da tela no notebook do dono (janela de
     1283px, a largura mais apertada: logo acima dela a barra lateral volta
     a ter 242px). Os contatos do lote e a lista de decisao, com sete,
     quebravam o nome do cliente em duas linhas. */
  .painel .painel__tabela.reguas__tabela--compacta th,
  .painel .painel__tabela.reguas__tabela--compacta td { padding: 16px 10px; }
  .painel .painel__tabela.reguas__tabela--compacta th:first-child,
  .painel .painel__tabela.reguas__tabela--compacta td:first-child { padding-left: 16px; }
  .painel .painel__tabela.reguas__tabela--compacta th:last-child,
  .painel .painel__tabela.reguas__tabela--compacta td:last-child { padding-right: 16px; }

  .painel .painel__tabela.reguas__tabela--motivos td { padding-block: 12px; }

  /* "Agora" tem seis numeros: tres por linha, em vez de cinco e um sobrando. */
  .painel .inicio__estado.reguas__agora { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── no celular ───────────────────────────────────────────────────────── *
 * As tabelas do painel rolam de lado no celular (z_refinamento.css), e numa
 * tabela de numeros isso esconde justamente a coluna que se quer ver -- e o
 * "ver contatos" do lote. Nas tabelas `--cartoes` da regua cada linha vira
 * um cartao, como no app (zz_nativo.css): a primeira celula em cima, na
 * largura toda, e as outras embaixo, lado a lado, cada uma com o nome da
 * coluna em cima (`data-rotulo`), porque sem cabecalho um numero solto nao
 * diz nada. As outras tabelas da regua sao estreitas e continuam tabela. */
@media (max-width: 760px) {
  .painel .painel__tabela.reguas__tabela { display: table; overflow: hidden; }

  .painel .painel__tabela.reguas__tabela--cartoes,
  .painel .reguas__tabela--cartoes tbody,
  .painel .reguas__tabela--cartoes tfoot { display: block; }

  .painel .reguas__tabela--cartoes thead { display: none; }

  .painel .reguas__tabela--cartoes tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem 1.25rem;
    padding: 16px;
    border-bottom: 1px solid var(--bc-line-soft);
  }

  .painel .reguas__tabela--cartoes tbody tr:last-child { border-bottom: 0; }
  .painel .reguas__tabela--cartoes tfoot tr { border-top: 1px solid var(--bc-line); border-bottom: 0; }

  .painel .painel__tabela.reguas__tabela--cartoes td { display: block; padding: 0; border: 0; }
  .painel .reguas__tabela--cartoes td:first-child { flex: 1 0 100%; }
  .painel .reguas__tabela--cartoes td:empty { display: none; }

  .painel .reguas__tabela--cartoes td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: .2rem;
    color: var(--bc-ink-mut);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }

  /* A primeira celula e o titulo do cartao: "LINHA 4", "PASSO 2", numa
     linha so. */
  .painel .reguas__tabela--cartoes td:first-child[data-rotulo] { font-weight: 700; }
  .painel .reguas__tabela--cartoes td:first-child[data-rotulo]::before { display: inline; margin-right: .4rem; }
}

/* ── filtro por situacao, no detalhe do lote ──────────────────────────── */

.reguas__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}

.reguas__filtro {
  padding: .3rem .75rem;
  color: var(--bc-ink-mut);
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  font-size: .8rem;
  text-decoration: none;
}

.reguas__filtro b { margin-left: .3rem; color: var(--bc-ink); }
.reguas__filtro:hover { background: var(--bc-surface-2); }

.reguas__filtro--atual {
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-color: var(--bc-primary);
}

.reguas__filtro--atual b { color: inherit; }

/* ── busca por telefone, na tela da regua (entrega 3) ─────────────────── */

/* O resultado (ou a mensagem de vazio) embaixo do campo, e nao colado nele:
   `.painel .convites__form` (z_refinamento.css) nao tem margem. */
.painel .convites__form.reguas__busca { margin-bottom: 1.5rem; }