/* ==========================================================================
   F38 — Números de WhatsApp do gabinete
   --------------------------------------------------------------------------
   A tela virou mestre-detalhe no esqueleto único (14_tela_mestre.css) porque o
   gabinete passou a ter N aparelhos: a pergunta deixou de ser "está ligado?" e
   virou "QUAL está ligado, qual é o padrão e o que passa por cada um?".

   Aqui só entra o que é DESTA tela — o ponto de estado, a ficha do aparelho e a
   coluna de tráfego. Lista, chip, cartão, campo e botão vêm do design system;
   reescrevê-los aqui seria criar um segundo desenho para a mesma coisa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O ponto de estado — "no ar" tem de ser legível SEM ler.
   Cor sozinha não basta (daltonismo, monitor ruim): o ponto vazado x preenchido
   dá a diferença de forma, e o `title` dá o texto para quem usa leitor de tela.
   -------------------------------------------------------------------------- */
.numeros-whatsapp__ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  align-self: flex-start;
  border: 2px solid var(--cor-texto-fraco);
  border-radius: 50%;
  background: transparent;
}

.numeros-whatsapp__ponto--no-ar {
  border-color: var(--sgp-sucesso);
  background: var(--sgp-sucesso);
}

/* As ações da barra de filtros ficam encostadas na direita: a barra é a linha
   `auto` do grid, então o que cresce aqui empurra a barra, não o esqueleto. */
.numeros-whatsapp__barra-acoes {
  display: flex;
  flex: none;
  gap: var(--esp-2);
  align-items: center;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   A ficha do aparelho (área central do esqueleto)
   -------------------------------------------------------------------------- */
.ficha-numero {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  min-width: 0;
}

.ficha-numero__topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: flex-start;
  justify-content: space-between;
}

.ficha-numero__titulo {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.ficha-numero__chave {
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.ficha-numero__estado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

.ficha-numero__qr {
  text-align: center;
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
}

.ficha-numero__qr img {
  border: 1px solid var(--cor-borda);
  background: #fff;
}

/* Cada `button_to` é um <form>: sem zerar a margem eles empilham um por linha e
   a fileira de ações vira três alturas de botão. */
.ficha-numero__acoes,
.ficha-numero__form-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

.ficha-numero__acoes form,
.ficha-numero__form-acoes form {
  margin: 0;
}

.ficha-numero__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-3);
  align-items: start;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

/* Item de grid nasce com `min-width: auto` e se recusa a encolher: um campo
   largo "corta" o vizinho — a mesma causa raiz do recorte das Listas (F05). */
.ficha-numero__form > * { min-width: 0; }

/* A fileira de ações do formulário atravessa as colunas: senão "Salvar" e
   "Remover" caem em colunas diferentes e parecem pertencer a campos. */
.ficha-numero__form-acoes {
  grid-column: 1 / -1;
  justify-content: space-between;
}

/* Remover não é ação de rotina: fantasma, na cor de perigo, longe do "Salvar". */
.numeros-whatsapp__remover button,
.numeros-whatsapp__remover { color: var(--sgp-perigo); }

.ficha-numero__novo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

/* --------------------------------------------------------------------------
   O tráfego do número (coluna da direita)
   -------------------------------------------------------------------------- */
.trafego-numero {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  padding: var(--esp-4);
  min-width: 0;
}

.trafego-numero__bloco { min-width: 0; }

.trafego-numero__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-suave);
}

.trafego-numero__contagem { color: var(--cor-texto-fraco); }

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

.trafego-numero__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Nome de eleitor e nome de campanha são compridos: reticências em vez de
   esticar a coluna e devolver rolagem horizontal para o esqueleto inteiro. */
.trafego-numero__link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--texto-sm);
}

.trafego-numero__meta {
  font-size: var(--texto-2xs);
  color: var(--cor-texto-fraco);
}

.trafego-numero__mais {
  display: inline-block;
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
}

/* --------------------------------------------------------------------------
   O seletor "Enviar por" do compositor de campanha (F38, tela de campanhas)
   -------------------------------------------------------------------------- */
.envio-por__aviso {
  margin-top: var(--esp-2);
  color: var(--sgp-perigo);
}