/* Gmail → leads (plan/24 §4.5 e §10 Parte B): a tela `#/email` de cada pessoa
 * (web/email-gmail.js), a lista de conexões do admin em `#/integracoes`
 * (web/integracoes-gmail.js) e a fila `#/leads/conferir` (web/leads-conferir.js).
 *
 * Celular primeiro (piso de 360 px), alvos de toque ≥ 44 px. Cores do app
 * (`app.css`) quando o papel é o mesmo — cartão, linha, texto, ação — e tokens
 * `--gm-*` abaixo para o que ele não tinha (faixa de aviso, chip marcado, o
 * "ok" da conta). ⚠️ Nenhuma cor fora dos dois blocos de token (CLAUDE.md §4):
 * `tests/test_gmail_ui.py` reprova cor solta e token sem par no escuro.
 */
:root {
  --gm-aviso-s: #fdf3de;       --gm-aviso-borda: #f6dfae;   --gm-aviso-fg: #7a4a06;
  --gm-ok: #117a5c;            --gm-ok-s: #e4f7ef;
  --gm-erro: #a61621;          --gm-erro-s: #fde2e2;
  --gm-chip: #f2f4f6;          --gm-chip-on: #117a5c;       --gm-chip-on-fg: #ffffff;
  --gm-sombra: 0 14px 30px -18px rgba(17, 24, 39, .32);
}

:root[data-tema="escuro"] {
  --gm-aviso-s: #3a2c10;       --gm-aviso-borda: #5c4516;   --gm-aviso-fg: #f5c77a;
  --gm-ok: #34d399;            --gm-ok-s: #12302a;
  --gm-erro: #ff9aa1;          --gm-erro-s: #3d1a1d;
  --gm-chip: #1c232c;          --gm-chip-on: #0d9488;       --gm-chip-on-fg: #04231f;
  --gm-sombra: 0 14px 30px -18px rgba(0, 0, 0, .7);
}

/* ── o card ─────────────────────────────────────────────────────────────── */
.gm-card { margin-bottom: 14px; box-shadow: var(--gm-sombra); overflow-wrap: anywhere; }
.gm-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.gm-cab h3 { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gm-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.gm-conta { margin: 12px 0 0; font-size: 14px; }
.gm-conta strong { word-break: break-all; }
.gm-estado { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.gm-estado.ok { background: var(--gm-ok-s); color: var(--gm-ok); }
.gm-estado.aviso { background: var(--gm-aviso-s); color: var(--gm-aviso-fg); }
.gm-estado.erro { background: var(--gm-erro-s); color: var(--gm-erro); }
.gm-estado.off { background: var(--bg3); color: var(--muted); }
.gm-faixa { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.45;
  background: var(--gm-aviso-s); border: 1px solid var(--gm-aviso-borda); color: var(--gm-aviso-fg); }
.gm-faixa.erro { background: var(--gm-erro-s); border-color: var(--gm-erro); color: var(--gm-erro); }
.gm-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gm-botoes button, .gm-card button, .gm-conf button { min-height: 44px; }
.gm-botoes .gm-direita { margin-left: auto; }
.gm-botoes.gm-topo { margin-top: 0; }
.gm-link { align-self: center; min-height: 44px; display: inline-flex; align-items: center; }
.gm-secao { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.gm-secao h4 { margin: 0 0 6px; font-size: 15px; }

/* regras */
.gm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.gm-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--gm-chip); color: var(--fg); font-size: 14px; }
.gm-chip:hover { background: var(--gm-chip); border-color: var(--gm-chip-on); }
.gm-chip[aria-pressed="true"] { background: var(--gm-chip-on); border-color: var(--gm-chip-on); color: var(--gm-chip-on-fg); }
.gm-campo { display: block; margin: 12px 0 0; font-size: 14px; }
.gm-campo span { display: block; margin-bottom: 4px; font-weight: 600; }
.gm-campo small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.gm-campo textarea, .gm-campo input[type="number"], .gm-campo input[type="text"], .gm-campo input[type="tel"],
.gm-campo input[type="email"], .gm-campo select {
  width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
.gm-campo textarea { min-height: 72px; resize: vertical; }
.gm-marca { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 14px; min-height: 44px; }
.gm-marca input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.gm-erro-campo { color: var(--gm-erro); font-size: 13px; margin: 8px 0 0; min-height: 1em; }

/* buscar agora / contagens */
.gm-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.gm-numero { background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.gm-numero b { display: block; font-size: 20px; color: var(--fg); }
.gm-numero span { font-size: 12px; color: var(--muted); }
.gm-numero a { color: inherit; }
.gm-resumo { margin: 12px 0 0; padding: 12px; border-radius: var(--radius-sm); background: var(--bg3);
  border: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.gm-resumo p { margin: 0 0 8px; }

/* ── a fila "A conferir" ────────────────────────────────────────────────── */
.gm-conf .gm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gm-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  box-shadow: var(--gm-sombra); }
.gm-item-txt { min-width: 0; flex: 1 1 180px; }
.gm-item-txt b { display: block; font-size: 15px; }
.gm-item-txt span { color: var(--muted); font-size: 13px; }
/* F3-01 (22/10): por que não virou lead sozinho, e o resumo da equipe para a gestão */
.gm-motivos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gm-motivo { padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; background: var(--bg3);
  color: var(--muted); border: 1px solid var(--line); overflow-wrap: anywhere; }
.gm-porque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-porque .gm-motivos { margin-top: 0; }
.gm-equipe { margin-top: 22px; }
.gm-equipe-t { margin: 0 0 4px; font-size: 15px; }
.gm-equipe .gm-lista { margin-top: 10px; }
.gm-proposta .gm-campo:first-of-type { margin-top: 6px; }
.gm-proposta .ld-chip { min-height: 44px; }
.gm-mensagem { margin: 10px 0 0; padding: 10px; border-left: 3px solid var(--line); color: var(--muted);
  font-size: 13px; line-height: 1.45; }

/* ── a tela E-mail (Gmail), `#/email` ───────────────────────────────────── */
.em-tela .gm-card { overflow-wrap: anywhere; }
.em-titulo { margin: 0; font-size: 17px; }
.em-janela { max-width: 420px; margin: 24px auto; text-align: center; }
.em-link { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg); font-weight: 600; }
.em-itens, .em-fontes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.em-item { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.em-item-marca { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.em-item-marca input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.em-sem-marca { width: 22px; flex: none; }
.em-item-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.em-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.em-item-topo b { font-size: 15px; }
.em-item-linha { color: var(--fg); }
.em-item-meta { color: var(--muted); font-size: 12px; }
.em-importar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.em-fonte { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; }
.em-fonte-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); min-width: 0; }
.em-fonte-txt b { font-size: 15px; color: var(--fg); }
.em-fonte-rem { color: var(--fg); word-break: break-all; }
.em-fonte-acoes .gm-marca { margin-top: 4px; }
.em-fonte-botoes { margin-top: 6px; }
.em-renomear { margin-top: 4px; }
/* a lista de conexões do admin (`#/integracoes`) */
.gm-conexoes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gm-conexao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--bg3); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.gm-conexao-txt { min-width: 0; flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-size: 13px;
  color: var(--muted); }
.gm-conexao-txt b { color: var(--fg); font-size: 15px; }

@media (min-width: 720px) {
  .gm-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gm-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .em-fonte { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .em-fonte-txt { flex: 1 1 260px; }
}
.em-so-confere { margin: 6px 0 0; }