/* Telas do grupo A: Leads, Calls, Inbox e o detalhe do lead. So' variaveis de
   tokens.css, para os dois temas. Prefixo a- em tudo que e' daqui. */

.a-pagina { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.a-pagina .cab { padding-left: 0; padding-right: 0; }
.a-leads, .a-inbox { padding: 0 16px; }
.a-rolagem { flex: 1; min-height: 0; overflow: auto; }
.a-dot { margin: 0 .3em; color: var(--text-2); }
.a-vazio-t { color: var(--text); margin-bottom: 2px; }
.a-vazio-b { margin-top: 12px; }
.a-busca .campo { height: 32px; }
.a-busca { margin-bottom: 12px; }

/* ─── Cartao "Proximo lead" ─────────────────────────────────────────── */
.a-fila { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 12px; }
.a-fila-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-fila-r { color: var(--text-2); font-size: 12px; font-weight: 500; }
.a-fila-n { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.a-fila-d { color: var(--text-2); font-size: 13px; }

/* ─── Grupos (Todos | New Leads | Follow-up) ────────────────────────── */
.a-grupos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--chrome); }
.a-grupos button { height: 32px; border: 0; border-radius: var(--r-control); background: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 500; }
.a-grupos button:hover { background: var(--hover); }
.a-grupos button[aria-selected="true"] { background: var(--focus); color: #fff; }
.a-grupos .cont { font: 500 12px var(--mono); min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--raised); color: var(--text); text-align: center; }
.a-grupos [data-grupo="new"] .cont { background: var(--ok-bg); color: var(--text-ok); }
.a-grupos button[aria-selected="true"] .cont { background: rgba(255,255,255,.25); color: #fff; }

/* ─── Filtros e ordem ───────────────────────────────────────────────── */
.a-facetas { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.a-facetas .chip { height: 28px; cursor: pointer; }
.a-facet-wrap { position: relative; display: inline-block; }
.a-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 230px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.a-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-control); cursor: pointer; }
.a-opt:hover { background: var(--hover); }
.a-opt input { accent-color: var(--focus); width: 16px; height: 16px; margin: 0; }
.a-opt-l { flex: 1; white-space: nowrap; }
.a-opt-n { color: var(--text-2); font-size: 12px; }
.a-opt-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.a-limpar, .a-limpar-tudo { border: 0; background: none; color: var(--text-2); padding: 6px 8px; font-size: 13px; }
.a-limpar:hover, .a-limpar-tudo:hover { color: var(--text); }
.a-ordem { display: flex; align-items: center; gap: 4px; margin: 6px 0 8px; color: var(--text-2); font-size: 13px; }
.a-ordem span { margin-right: 4px; }
.a-ordem button { height: 26px; padding: 0 8px; border: 0; border-radius: var(--r-control); background: none; color: var(--text-2); }
.a-ordem button:hover { color: var(--text); }
.a-ordem button[aria-pressed="true"] { background: var(--raised); color: var(--text); }

/* ─── Linha de lead ─────────────────────────────────────────────────── */
.a-lead { position: relative; }
.a-lead.sla {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, transparent) 0, transparent calc(var(--f) * 100%));
  box-shadow: inset 3px 0 0 var(--c);
}
[data-tema="claro"] .a-lead.sla { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent) 0, transparent calc(var(--f) * 100%)); }
.a-lead.sla:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 36%, transparent) 0, transparent calc(var(--f) * 100%)); }
.a-lead-l { flex: 1; min-width: 0; }
.a-lead .sub { gap: 8px; }
.a-emp { max-width: 55%; }
.a-sla { font-size: 12px; font-weight: 500; white-space: nowrap; }
.a-sla.s0 { color: var(--text-ok); } .a-sla.s1 { color: var(--text-warn); } .a-sla.s2 { color: var(--text-bad); }
.a-acessando { color: var(--text-warn); font-size: 12px; font-weight: 500; }
.a-contato { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.a-contato .num { font-size: 12px; }
.a-copiar { display: none; color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.a-copiar:hover { color: var(--text); text-decoration: underline; }
.a-lead:hover .a-copiar { display: inline; }

.a-pil { --c: var(--neutral); display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text-2);
  background: color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
[data-tema="claro"] .a-pil { background: color-mix(in srgb, var(--c) 22%, transparent); }
.a-pil.ok { --c: var(--ok); color: var(--text-ok); }
.a-pil.info { --c: var(--caller); color: var(--text-info); }
.a-pil.warn { --c: var(--warn); color: var(--text-warn); }

.a-origem { --c: var(--neutral); width: 20px; height: 20px; border-radius: var(--r-kbd); display: inline-grid; place-items: center; flex: none; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-2); background: var(--raised); border: 1px solid var(--line); }
.a-origem[data-o="f"], .a-origem[data-o="G"], .a-origem[data-o="R"], .a-origem[data-o="web"] {
  background: color-mix(in srgb, var(--c) 24%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); color: color-mix(in srgb, var(--c) 75%, white); }
[data-tema="claro"] .a-origem[data-o="f"], [data-tema="claro"] .a-origem[data-o="G"], [data-tema="claro"] .a-origem[data-o="R"], [data-tema="claro"] .a-origem[data-o="web"] {
  background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 70%, black); }
.a-origem[data-o="f"] { --c: #1877F2; } .a-origem[data-o="G"] { --c: #4285F4; }
.a-origem[data-o="R"] { --c: #8B5CF6; } .a-origem[data-o="web"] { --c: #14B8A6; }

/* categorias de status (ponto e barra do grafico) */
.a-c-ok { --c: var(--ok); background: var(--ok); }
.a-c-warn { --c: var(--warn); background: var(--warn); }
.a-c-bad { --c: var(--bad); background: var(--bad); }
.a-c-atendida { --c: #9A9AA3; background: #9A9AA3; }
.a-c-neutro { --c: #52525B; background: #52525B; }
[data-tema="claro"] .a-c-atendida { --c: #8E8E98; background: #8E8E98; }
[data-tema="claro"] .a-c-neutro { --c: #CFCFD6; background: #CFCFD6; }

/* ─── Detalhe do lead ───────────────────────────────────────────────── */
.a-ld { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 16px; padding: 16px; height: 100%; min-height: 0; }
.a-ld.compacto { grid-template-columns: 280px minmax(0, 1fr); }
.a-detalhe .a-ld { height: 100%; }
.a-lat { overflow: auto; padding: 16px; min-height: 0; }
.a-voltar { display: inline-block; color: var(--text-2); font-size: 13px; text-decoration: none; margin-bottom: 8px; }
.a-voltar:hover { color: var(--text); }
.a-nome { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.a-sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.a-acess { display: flex; align-items: center; gap: 6px; color: var(--text-warn); font-size: 13px; margin-top: 8px; }
.a-div { height: 1px; background: var(--line); margin: 12px 0; }
.a-sec { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.a-f { display: block; margin-bottom: 10px; }
.a-f > span { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 4px; }
.a-f .campo { height: 32px; font-size: 14px; }
.a-tel { font-size: 14px; user-select: text; }
.a-orig { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.a-zip { display: flex; align-items: center; gap: 8px; }
.a-zip .campo { width: 110px; }
.a-zipb { width: 28px; height: 28px; border-radius: var(--r-control); display: inline-grid; place-items: center; font-weight: 700; color: var(--on-status); }
.a-zipb.ok { background: var(--ok); } .a-zipb.fora { background: var(--bad); }
.a-salvar { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.a-nota { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.a-nota.ok { color: var(--text-ok); }
.a-sel { cursor: pointer; }

.a-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.a-conv-cab { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; flex-wrap: wrap; }
.a-conv-cab h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-right: 8px; }
.a-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: var(--r-panel); color: var(--text-warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); font-size: 13px; }
.a-msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 0 8px 8px 0; }
.a-dia { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; color: var(--text-2); font-size: 12px; }
.a-dia::before, .a-dia::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.a-m { display: flex; flex-direction: column; max-width: 80%; margin-bottom: 8px; }
.a-m.in { align-self: flex-start; align-items: flex-start; }
.a-m.out { align-self: flex-end; align-items: flex-end; }
.a-bolha { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 7px 12px; line-height: 1.4; overflow-wrap: anywhere; }
.a-hora { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.a-call { min-width: 230px; text-align: left; }
.a-call.dest { border-color: var(--focus); }
.a-call-t { display: flex; align-items: center; gap: 8px; }
.a-call-t .ico { width: 16px; height: 16px; }
.a-call-s { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.a-call-d { margin-top: 5px; font-size: 13px; }
.a-resumo { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.a-resumo b { font-weight: 500; color: var(--text); }
.a-call-acoes { display: flex; gap: 14px; margin-top: 6px; }
.a-link { border: 0; background: none; padding: 0; color: var(--text-2); font-size: 13px; }
.a-link:hover { color: var(--text); text-decoration: underline; }
.a-trans { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.a-tl { display: grid; grid-template-columns: 42px 52px minmax(0, 1fr); gap: 6px; font-size: 13px; line-height: 1.35; }
.a-tl-h, .a-tl-v { color: var(--text-2); font-size: 12px; }

.a-comp { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-panel); }
.a-comp:focus-within { border-color: var(--focus); }
.a-comp-t { flex: 1; min-width: 0; border: 0; background: none; outline: none; resize: none; font: inherit; line-height: 1.4; padding: 6px 0; max-height: 120px; color: var(--text); }
.a-comp-t::placeholder { color: var(--text-ph); }
.a-comp-meta { align-self: center; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.a-env { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--text-off); display: grid; place-items: center; }
.a-env.on { background: var(--ok); color: var(--on-status); }
.a-toast { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 5; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; }

/* ─── Calls ─────────────────────────────────────────────────────────── */
.a-calls { flex-direction: row; }
.a-hist { width: 400px; flex: none; display: flex; flex-direction: column; min-height: 0; padding: 16px 0 0 16px; border-right: 1px solid var(--line); }
.a-hist-cab { display: flex; align-items: center; padding-right: 16px; margin-bottom: 12px; }
.a-hist-cab h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.a-busca-i { display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 16px 8px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--raised); color: var(--text-2); }
.a-busca-i input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
.a-busca-i input::placeholder { color: var(--text-ph); }
.a-hist .a-rolagem { padding-right: 0; }
.a-hist-l > li { padding-right: 16px; }
.a-h-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a-h-1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.a-h-q { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.a-h-2 { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; min-width: 0; }
.a-h-perd { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--text-bad); font-size: 12px; white-space: nowrap; }
.a-dir { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px; }
.a-dir.com-detalhe { padding: 0; overflow: hidden; }
.a-per-cab { display: flex; align-items: baseline; gap: 10px; }
.a-per-cab h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.a-per-n { color: var(--text-2); font-size: 13px; }
.a-per-ctl { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; flex-wrap: wrap; }
.a-graf { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin-top: 4px; }
.a-graf.fino { gap: 2px; }
.a-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 6px 2px 4px; border-radius: var(--r-control); }
.a-col.hoje { background: var(--raised); }
.a-barra { width: 70%; max-width: 30px; display: flex; flex-direction: column-reverse; gap: 1px; }
.a-barra i { display: block; border-radius: 2px; }
.a-rot { margin-top: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.a-graf.fino .a-rot { font-size: 10px; }
.a-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 4px; color: var(--text-2); font-size: 13px; }
.a-timeline { margin-top: 6px; }
.a-grp { color: var(--text-2); font-size: 13px; padding: 14px 4px 6px; }
.a-cl { display: grid; grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1fr) 56px 150px; gap: 12px; align-items: center; min-height: 42px; padding: 0 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.a-cl:hover { background: var(--panel); }
.a-cl-n { font-weight: 600; }
.a-cl-e { color: var(--text-2); }
.a-cl-t, .a-cl-q { color: var(--text-2); text-align: right; font-size: 13px; white-space: nowrap; }
.a-mais { text-align: center; color: var(--text-2); font-size: 13px; padding: 12px; }

/* ─── Inbox ─────────────────────────────────────────────────────────── */
.a-inb-lista { display: flex; flex-direction: column; min-height: 0; flex: 1; min-width: 0; }
.a-inbox.com-detalhe { flex-direction: row; padding: 0; }
.a-inbox.com-detalhe .a-inb-lista { flex: none; width: 420px; padding: 0 16px; border-right: 1px solid var(--line); }
.a-inb > li { gap: 12px; }
.a-inb-p { width: 8px; height: 8px; border-radius: var(--r-mark); flex: none; }
.a-inb-p.on { background: var(--focus); }
.a-inb-c { flex: 1; min-width: 0; }
.a-inb-1 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.a-inb-n { font-weight: 400; max-width: 60%; }
.a-inb-n.nao { font-weight: 600; }
.a-inb-e { color: var(--text-2); }
.a-inb-2 { display: flex; align-items: baseline; min-width: 0; font-size: 13px; color: var(--text-2); }
.a-inb-q { white-space: nowrap; flex: none; }
.a-inb-2.nao { color: var(--text); }
.a-inb-b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }