/* ═══════════════════════════════════════════════════════════════════════════
   TCSTelefones — lista de telefones no formulário (widget em shared/telefones.js)

   Arquivo PRÓPRIO, e não app.css, porque o `index.html` — onde o formulário de
   faturamento vive — NÃO carrega o app.css: ele carrega tokens.css +
   components.css. Só as páginas standalone usam o app.css. Escrever o CSS lá
   teria deixado o widget sem estilo nenhum na única tela que o usa hoje, sem
   erro em lugar nenhum.

   Toda página que adotar o widget precisa ligar ESTE arquivo, além do
   tokens.css (de onde vêm --color-* e --radius-*).

   Sem `style="..."` inline de propósito: a CSP de /renovacoes traz
   `style-src-attr 'none'`, que ignora estilo em atributo silenciosamente.
   ═══════════════════════════════════════════════════════════════════════════ */
.tel-box { display: block; }
.tel-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tel-cabeca > label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-60); }
.tel-add {
  border: 1px dashed var(--color-olive); background: transparent; color: var(--color-olive);
  border-radius: var(--radius-sm, 6px); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tel-add:hover { background: var(--color-olive-200); }

.tel-linhas { display: flex; flex-direction: column; gap: 6px; }
.tel-linha {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--color-line); border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-alt);
}
.tel-campo { display: flex; flex-direction: column; gap: 2px; }
.tel-campo > label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-50); }
.tel-campo > input {
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm, 6px);
  padding: 5px 8px; font-size: 13px; background: var(--color-card); color: var(--color-ink);
}
/* ── Larguras: medidas pelo USO, não pelo espaço disponível (28/08) ──────────
   Antes, num formulário de 1.122px, a linha saía Número 43% · Ramal 7% ·
   Finalidade 26,8% · controles 18,8% — porque os três campos tinham
   `flex-grow` e dividiam toda a sobra entre si. O resultado não tinha relação
   com o que a operação escreve:

     Número       preenchido em 439 de 439  (100%)   ocupava 482px
     Finalidade   preenchido em   1 de 439  (0,2%)   ocupava 301px
     Ramal        preenchido em   0 de 439  (0%)     ocupava  78px

   Ou seja: 301px de linha para um campo que quase ninguém usa, e 482px para um
   telefone de 15 caracteres que cabe em 230.

   Agora `flex-grow: 0` nos três — nenhum cresce para "aproveitar" a sobra. A
   sobra vai toda para o `margin-left:auto` do primeiro flag (logo abaixo), que
   empurra WhatsApp/Principal/Ativo para a direita. Campos à esquerda, controles
   à direita, e o espaço livre no meio, onde não engorda nada.
   ⚠️ `flex-shrink: 1` fica: em tela estreita eles precisam encolher antes de a
   linha quebrar. */
.tel-numero { flex: 0 1 230px; }
.tel-ramal  { flex: 0 1 78px; }
.tel-rotulo { flex: 0 1 190px; }
.tel-campo > input { width: 100%; box-sizing: border-box; }

/* Separa os CAMPOS (o que se digita) das PROPRIEDADES do número (o que se
   marca). Distância fixa, não `auto`: com `auto` a sobra da linha virava um vão
   que crescia junto com o formulário, e os três flags flutuavam longe do campo a
   que se referem. A sobra agora fica toda no fim da linha, onde não separa nada.
   Escrito como irmão adjacente (`.tel-campo + .tel-flag`) para não depender da
   ordem exata do markup nem obrigar o JS a marcar o primeiro flag com classe. */
.tel-linha .tel-campo + .tel-flag { margin-left: 22px; }

/* Respiro DENTRO do bloco de controles. O `gap: 8px` da linha serve bem para
   caixas de campo, que já têm borda própria a separá-las; entre três alvos de
   clique sem borda ele deixa "WhatsApp Principal Ativo" lendo como uma frase só.
   O ✕ ganha um pouco mais que os flags porque é o único destrutivo da linha —
   distância aqui é o que evita o clique errado, não enfeite. Somam ao gap:
   14px entre os flags, 20px antes do ✕. */
.tel-linha .tel-flag + .tel-flag   { margin-left: 6px; }
.tel-linha .tel-flag + .tel-remover { margin-left: 12px; }

/* ── As três marcas da linha (WhatsApp · Principal · Ativo) ──────────────────
   Escritas com `.tel-linha` na frente DE PROPÓSITO, e não como `.tel-flag`
   sozinha. A página que hospeda o widget costuma ter uma regra genérica de
   formulário, e ela ganha da nossa por especificidade sem que nada erre:
   no wizard do faturamento, `.wiz-content .edit-field input` (0,2,1) esticava
   os três controles para 100%×38px e `.edit-field label` (0,1,1) trocava o
   `display:flex` daqui por `block`, jogando o texto para baixo do quadrado.
   Resultado em 28/08: caixas gigantes com o rótulo atrás delas.

   O `input[type=…]` é o que devolve o tamanho nativo; o `accent-color` fica
   aqui (e não só no components.css) porque o `clientes.html` não carrega
   aquele arquivo — sem isto o MESMO widget sai oliva no Faturamento e azul do
   sistema no Cliente 360.

   ⚠️ Os campos de TEXTO (número/ramal/rótulo) continuam de fora: eles herdam
   o skin da página de propósito, para a linha parecer parte do formulário. */
.tel-linha .tel-flag { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-ink-60); cursor: pointer; padding-bottom: 5px; white-space: nowrap; }
.tel-linha .tel-flag input[type=checkbox],
.tel-linha .tel-flag input[type=radio] {
  width: 13px; height: 13px; min-height: 0; flex: none;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  accent-color: var(--color-olive); cursor: pointer; margin: 0;
}
.tel-linha .tel-principal { font-weight: 700; color: var(--color-olive); }

/* O ✕ acompanha os flags em vez de ir para a borda (`margin-left:auto`, até
   28/08). Com o auto ele abria um SEGUNDO vão, entre "Ativo" e o botão, e era
   ele que fazia os controles parecerem um bloco solto da linha. Continua
   alinhado entre as linhas porque campos e flags têm largura fixa. */
.tel-remover {
  border: 1px solid var(--color-line-strong); background: var(--color-card);
  color: var(--color-ink-50); border-radius: var(--radius-sm, 6px);
  width: 26px; height: 26px; line-height: 1; font-size: 13px; cursor: pointer;
}
.tel-remover:hover { color: var(--color-danger); border-color: var(--color-danger); }

.tel-vazio  { font-size: 12.5px; color: var(--color-ink-50); margin: 0; padding: 10px; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-sm, 6px); }
.tel-resumo { font-size: 12px; margin: 6px 0 0; padding: 6px 9px; border-radius: var(--radius-sm, 6px); }
.tel-resumo-ok     { color: var(--color-ink-60); background: var(--color-olive-200); }
.tel-resumo-alerta { color: #7d5a00; background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); }

/* Convite para aceitar a sugestão do servidor. Botão, não checkbox pré-marcada:
   o widget nunca elege sozinho — ver o comentário em `resumo()`. */
.tel-usar-sug {
  margin-left: 6px; padding: 2px 8px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: #7d5a00; background: #fff; cursor: pointer;
  border: 1px solid rgba(255, 193, 7, .55); border-radius: var(--radius-sm, 6px);
}
.tel-usar-sug:hover { background: rgba(255, 193, 7, .18); }
.tel-aviso-api     { font-size: 12px; margin: 6px 0 0; padding: 6px 9px; border-radius: var(--radius-sm, 6px);
                     color: #7d5a00; background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); }

@media (max-width: 620px) {
  .tel-numero, .tel-rotulo { flex: 1 1 100%; }
  /* Empilhado, os flags já caem numa linha própria — o recuo que os separa dos
     campos no desktop viraria só uma indentação torta. */
  .tel-linha .tel-campo + .tel-flag { margin-left: 0; }
}

/* Duas marcas de linha, mesmo desenho porque são o mesmo tipo de recado: algo
   sobre AQUELE número, não sobre o formulário. Ficam no rótulo, ao lado do
   campo do número.
     · `tel-inferido` — o DDD foi ADIVINHADO pelo município (migration 313).
       O número tem DDD; ele é que não veio de fonte nenhuma. Nunca é sugerido
       como principal.
     · `tel-sem-ddd`  — não há DDD (8 ou 9 dígitos). `telefoneValido()` recusa,
       então o número fica inerte na cadência.
   Nunca aparecem juntas: ou o número tem DDD, ou não tem. */
.tel-inferido,
.tel-sem-ddd {
  margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: #7d5a00; background: rgba(255, 193, 7, .18); border: 1px solid rgba(255, 193, 7, .45);
}