/* Black PAC — peças que o painel de agosto não tinha: selo ao vivo, origem, duplicados,
   lista de leads e barras de perfil. Mesmos tokens do dash.css. */

:root {
  --org: #b39bf5;      /* orgânico / direto */
  --wpp: #8fd14f;      /* WhatsApp da base */
  --outra: #f0a92e;    /* outra UTM */
}

.ao-vivo {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-num); font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase;
  color: var(--pos);
}
.ao-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 rgba(53,194,107,.6); animation: pulso 2s infinite; }
.ao-vivo.parado { color: var(--ink-3); }
.ao-vivo.parado i { background: var(--ink-3); animation: none; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(53,194,107,.55); } 70% { box-shadow: 0 0 0 7px rgba(53,194,107,0); } 100% { box-shadow: 0 0 0 0 rgba(53,194,107,0); } }

.tag-org { color: var(--org); }
.tag-wpp { color: var(--wpp); }
.tag-outra { color: var(--outra); }

.selo.pago { color: var(--meta); border-color: rgba(74,155,247,.4); background: rgba(74,155,247,.1); }
.selo.organico { color: var(--org); border-color: rgba(179,155,245,.4); background: rgba(179,155,245,.1); }
.selo.whatsapp { color: var(--wpp); border-color: rgba(143,209,79,.4); background: rgba(143,209,79,.1); }
.selo.outra { color: var(--outra); border-color: rgba(240,169,46,.4); background: rgba(240,169,46,.1); }

/* barra empilhada de origem */
.barra-origem { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.barra-origem i { display: block; height: 100%; }
.leg-origem { display: grid; gap: 6px; margin-top: 12px; }
.leg-origem .lo {
  display: grid; grid-template-columns: 10px 1fr auto auto auto; align-items: center; gap: 10px;
  font-size: var(--t-mini); padding: 6px 8px; border-radius: var(--r-ctl); background: var(--surface-2);
}
.leg-origem .lo b { width: 10px; height: 10px; border-radius: 2px; }
.leg-origem .lo .n { color: var(--ink-2); }
.leg-origem .lo .q { font-family: var(--font-num); color: var(--ink); min-width: 32px; text-align: right; }
.leg-origem .lo .p { font-family: var(--font-num); color: var(--ink-3); min-width: 48px; text-align: right; }
.leg-origem .lo .d { font-family: var(--font-num); color: var(--warn); min-width: 70px; text-align: right; font-size: var(--t-micro); }

/* duplicados */
.dup-lista { display: grid; gap: 8px; }
.dup {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr minmax(120px, auto); gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2);
}
.dup .quem { min-width: 0; }
.dup .quem strong { display: block; font-size: var(--t-body); font-weight: 600; }
.dup .quem span { display: block; font-family: var(--font-num); font-size: var(--t-micro); color: var(--ink-3); margin-top: 2px; }
.dup .linhas { display: flex; flex-wrap: wrap; gap: 6px; }
.dup .linhas .l {
  font-family: var(--font-num); font-size: var(--t-micro); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; background: var(--surface);
}
.dup .linhas .l.primeiro { border-color: rgba(30,200,165,.45); color: #bff3e6; }
.dup .meta-dup { text-align: right; font-family: var(--font-num); font-size: var(--t-mini); color: var(--ink-2); }
.dup .meta-dup .grande { font-size: 18px; color: var(--warn); display: block; }

/* lista de leads */
.lead-lista { display: grid; }
.lead {
  display: grid; grid-template-columns: 92px minmax(90px, 140px) 86px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--t-mini);
}
.lead:last-child { border-bottom: 0; }
.lead .h { font-family: var(--font-num); color: var(--ink-3); }
.lead .n { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead .o { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead .x { font-family: var(--font-num); font-size: var(--t-micro); color: var(--warn); }
.lead.novo { animation: brilho 2.4s var(--ease); }
@keyframes brilho { from { background: rgba(30,200,165,.18); } to { background: transparent; } }

/* perfil */
.perfil-bloco + .perfil-bloco { margin-top: 14px; }
.perfil-bloco h4 {
  font-family: var(--font-num); font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.pf { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr 70px; gap: 10px; align-items: center; font-size: var(--t-mini); margin-bottom: 5px; }
.pf .n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .b { display: flex; height: 14px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pf .b i { display: block; height: 100%; }
.pf .b i.pg { background: rgba(74,155,247,.75); }
.pf .b i.np { background: rgba(179,155,245,.7); }
.pf .q { font-family: var(--font-num); color: var(--ink); text-align: right; }
.pf .q small { color: var(--ink-3); }

@media (max-width: 720px) {
  .dup { grid-template-columns: 1fr; }
  .dup .meta-dup { text-align: left; }
  .lead { grid-template-columns: 70px 1fr auto; }
  .lead .o, .lead .cr { display: none; }
  .pf { grid-template-columns: 1fr 1.4fr 56px; }
  .leg-origem .lo { grid-template-columns: 10px 1fr auto auto; }
  .leg-origem .lo .d { display: none; }
}

/* ===================== TEMA CLARO =====================
   Mesmos papéis de cor do escuro: Meta azul, UTM turquesa, heatmap dentro da célula.
   O tema escolhido fica em localStorage ('bp-tema') e é aplicado no <head> antes do primeiro pinte. */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e7ecf4;
  --line: #d7dee9;
  --line-soft: #e6ebf2;
  --ink: #142033;
  --ink-2: #44546b;
  --ink-3: #6a7a90;
  --meta: #1f6fd6;
  --meta-soft: rgba(31,111,214,.10);
  --utm: #0e9a7f;
  --utm-soft: rgba(14,154,127,.10);
  --pos: #1e9a52;
  --warn: #b97708;
  --neg: #d33a43;
  --accent: #1f6fd6;
  --accent-ink: #ffffff;
  --org: #7a5cd6;
  --wpp: #4f9a1c;
  --outra: #b97708;
  --sh-card: 0 1px 0 rgba(20,32,51,.04), 0 6px 18px rgba(20,32,51,.07);
  --sh-pop: 0 2px 6px rgba(20,32,51,.08), 0 14px 32px rgba(20,32,51,.12);
}
html[data-theme="light"], html[data-theme="light"] body { background-color: var(--bg); color: var(--ink); }
:root[data-theme="light"] body {
  background-image:
    radial-gradient(1100px 520px at 12% -12%, rgba(31,111,214,.06), transparent 62%),
    radial-gradient(900px 480px at 92% -4%, rgba(14,154,127,.05), transparent 60%);
}
:root[data-theme="light"] .topo { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92)); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c3ccd9; }
:root[data-theme="light"] .chip:hover,
:root[data-theme="light"] .campo-data:hover,
:root[data-theme="light"] .cri:hover { border-color: #b9c4d4; }
:root[data-theme="light"] .chip[aria-pressed="true"] { background: rgba(31,111,214,.1); color: #164f9c; border-color: rgba(31,111,214,.45); }
:root[data-theme="light"] .aviso { color: #7a5203; }
:root[data-theme="light"] .aviso.grave { color: #9b222a; }
:root[data-theme="light"] .selo.video { color: #6b4fcf; }
:root[data-theme="light"] .selo.imagem { color: #137a93; }
:root[data-theme="light"] .ao-vivo i { box-shadow: none; }

/* textos fixos dentro dos SVGs (desenhados para fundo escuro) */
:root[data-theme="light"] .svg-bloco text[fill="#e8eef7"],
:root[data-theme="light"] svg text[fill="#e8eef7"] { fill: var(--ink); }
:root[data-theme="light"] .svg-bloco text[fill="#8fc3ff"],
:root[data-theme="light"] .svg-bloco text[fill="#7cc0ff"] { fill: var(--meta); }
:root[data-theme="light"] .svg-bloco text[fill="#6fe0c6"] { fill: var(--utm); }
:root[data-theme="light"] .svg-bloco circle[fill="#0a0d12"] { fill: var(--surface); }
:root[data-theme="light"] .svg-bloco text[fill="#f0a92e"] { fill: var(--warn); }

/* botão de tema */
.bt-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; padding: 0; cursor: pointer;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bt-tema:hover { background: var(--surface-3); color: var(--ink); }
.bt-tema svg { width: 15px; height: 15px; }
.bt-tema .i-sol { display: none; }
:root[data-theme="light"] .bt-tema .i-sol { display: block; }
:root[data-theme="light"] .bt-tema .i-lua { display: none; }