/* ═══════════════════════════════════════════════════════════════════════════
   TCSEmails — lista de e-mails do faturamento (widget em shared/emails.js)

   Arquivo PRÓPRIO, e não app.css, pela mesma razão do telefones.css: o
   `index.html` — onde o formulário de faturamento vive — NÃO carrega o app.css
   (carrega tokens.css + components.css). Escrever o CSS lá deixaria o widget
   sem estilo nenhum na única tela que o usa, 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.
   ═══════════════════════════════════════════════════════════════════════════ */
.eml-box { display: block; }
.eml-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.eml-cabeca > label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink-60); }
.eml-req { color: var(--color-danger); margin-left: 2px; }
.eml-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;
}
.eml-add:hover { background: var(--color-olive-200); }

.eml-linhas { display: flex; flex-direction: column; gap: 6px; }
.eml-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);
}
.eml-campo { display: flex; flex-direction: column; gap: 2px; }
.eml-campo > label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-50); }
.eml-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);
  width: 100%; box-sizing: border-box;
}

/* Larguras pelo USO, como no telefone (28/08): `flex-grow: 0` nos três, para que
   nenhum campo engorde com a sobra da linha. O e-mail é o mais largo porque é o
   dado principal e o mais longo; responsável é um nome; finalidade é uma
   palavra. A sobra vai para o recuo do flag, no fim. */
.eml-email  { flex: 0 1 290px; }
.eml-resp   { flex: 0 1 170px; }
.eml-rotulo { flex: 0 1 170px; }

/* ── A marca da linha ────────────────────────────────────────────────────────
   Escrita com `.eml-linha` na frente DE PROPÓSITO, e não como `.eml-flag`
   sozinha. É a lição do INC de 28/08 no widget de telefone: a página que
   hospeda costuma ter uma regra genérica de formulário que ganha da nossa por
   especificidade — no wizard, `.wiz-content .edit-field input` (0,2,1) esticava
   o controle para 100%×38px e `.edit-field label` (0,1,1) trocava o
   `display:flex` por `block`, jogando o texto para baixo do quadrado.

   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 sairia
   oliva no Faturamento e azul do sistema no Cliente 360. */
.eml-linha .eml-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; margin-left: 22px; }
.eml-linha .eml-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;
}
.eml-linha .eml-principal { font-weight: 700; color: var(--color-olive); }

/* O ✕ acompanha o flag em vez de ir para a borda: com `margin-left:auto` ele
   abria um segundo vão e os controles pareciam um bloco solto da linha. */
.eml-remover {
  margin-left: 12px; 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;
}
.eml-remover:hover { color: var(--color-danger); border-color: var(--color-danger); }

.eml-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); }
.eml-resumo { font-size: 12px; margin: 6px 0 0; padding: 6px 9px; border-radius: var(--radius-sm, 6px); }
.eml-resumo-ok     { color: var(--color-ink-60); background: var(--color-olive-200); }
.eml-resumo-alerta { color: #7d5a00; background: rgba(255, 193, 7, .12); border: 1px solid rgba(255, 193, 7, .35); }
.eml-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) {
  .eml-email, .eml-resp, .eml-rotulo { flex: 1 1 100%; }
  /* Empilhado, o flag já cai numa linha própria — o recuo viraria indentação torta. */
  .eml-linha .eml-flag { margin-left: 0; }
  .eml-remover { margin-left: 0; }
}