/* ============================================================================
   af-inicio.css: Início do Afiliados Automático (/client/afiliados). SC1, 01/10/2026.
   Componentes do ui-kit (ui-attn, ui-panel + ui-flow, ui-kpis, ui-chart, ui-seg,
   ui-splitbtn, ui-drawer, ui-steps, ui-empty.is-hero, ui-choice). Aqui só o que é
   da PÁGINA: a grade gráfico + para aprovar, a lista compacta, o desenho do
   primeiro uso e a gaveta "Como funciona". Namespace afi-*.
   Só tokens --ui-*; sem sombra, sem faixa de destaque, sem !important.
   Movimento só em transform/opacity e some com prefers-reduced-motion.
   Cabe em 360 px sem rolagem lateral.
   ============================================================================ */

/* ── Caminho vivo: links do cabeçalho do painel ─────────────────────────── */
.afi-flow-links { gap: var(--ui-space-1); }

/* ── Números: medidor fino do limite do plano ───────────────────────────── */
.afi-kpi-meter { margin: var(--ui-space-2) 0 0; }
.afi-kpi-foot2 { margin-top: var(--ui-space-1); }

/* ── Gráfico + Para aprovar ─────────────────────────────────────────────── */
.afi-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; }
.afi-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.afi-chart-legend { margin: 0 0 var(--ui-space-3); }
.afi-panel-foot { display: flex; justify-content: flex-end; }
.afi-panel-foot .ui-btn svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

.afi-ap-title { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.afi-ap-list { margin: 0; padding: var(--ui-space-1) 0; list-style: none; }
.afi-ap-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-3); min-height: 64px; padding: var(--ui-space-2) var(--ui-space-5); transition: opacity var(--ui-dur-2) var(--ui-ease-in), transform var(--ui-dur-2) var(--ui-ease-in); }
.afi-ap-row + .afi-ap-row { border-top: 1px solid var(--ui-border-subtle); }
.afi-ap-row.is-leaving { opacity: 0; transform: translateX(8px); }
.afi-ap-thumb { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--ui-r-sm); background: var(--ui-phone-bg); border: 1px solid var(--ui-border-subtle); }
.afi-ap-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.afi-ap-thumb img.is-logo { padding: 9px; opacity: .78; }
.afi-ap-thumb img.is-mlogo { padding: 4px; }
.afi-ap-thumb > .afi-ap-ini { --ui-av-size: 38px; border-radius: 0; }
.afi-ap-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.afi-ap-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-snug); color: var(--ui-ink); }
.afi-ap-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.afi-ap-act { flex: 0 0 auto; }
.afi-ap-empty { margin: 0; padding: var(--ui-space-4) var(--ui-space-5); font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-muted); }

/* ── Primeiro uso: Lojas → Regra → Seus grupos (peças do caminho vivo) ──── */
.afi-art { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-3); }
.afi-art-node { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 112px; min-height: 72px; padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-bg-card); }
.afi-art-node.is-rule { border-style: dashed; border-color: var(--ui-ctl-line); }
.afi-art-logos, .afi-art-groups { display: inline-flex; align-items: center; }
.afi-art-logo { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; overflow: hidden; border: 2px solid var(--ui-bg-card); border-radius: var(--ui-r-sm); background: var(--ui-phone-bg); font-size: var(--ui-fs-caption); font-weight: var(--ui-fw-semibold); color: var(--ui-phone-ink); }
.afi-art-logo:first-child { margin-left: 0; }
.afi-art-logo img { display: block; width: 16px; height: 16px; object-fit: contain; opacity: .78; }
.afi-art-groups .ui-avatar { border: 2px solid var(--ui-bg-card); }
.afi-art-groups .ui-avatar + .ui-avatar { margin-left: -8px; }
.afi-art-groups .ui-avatar svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
.afi-art-t { font-size: var(--ui-fs-body); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.afi-art-cap { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); white-space: nowrap; }
.afi-art-arrow { display: grid; place-items: center; flex: 0 0 auto; color: var(--ui-muted-2); }
.afi-art-arrow svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }

/* ── "Como funciona" ───────────────────────────────────────────────────── */
.afi-how-steps { margin: 0 0 var(--ui-space-6); }
.afi-how-t { margin: 0 0 var(--ui-space-3); }
.afi-gloss { display: flex; flex-direction: column; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-5); }
.afi-gloss dt { margin: 0; font-size: var(--ui-fs-label); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.afi-gloss dd { margin: 2px 0 0; font-size: var(--ui-fs-label); line-height: var(--ui-lh-body); color: var(--ui-ink-2); }
.afi-how-video { height: auto; min-width: 0; max-width: 100%; padding: 0; gap: var(--ui-space-2); white-space: normal; text-align: left; align-items: flex-start; }
.afi-how-video svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

/* ── Caminho no celular: 3 nós por etapa + "+N" (no computador, 5) ───────── */
.afi-show-sm { display: none; }
@media (max-width: 760px) {
    .afi-flow .afi-sm-hide, .afi-flow .afi-hide-sm { display: none; }
    .afi-flow .afi-show-sm { display: inline-flex; }
}

/* ── Larguras menores ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .afi-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .afi-ap-row { grid-template-columns: 40px minmax(0, 1fr); padding: var(--ui-space-3) var(--ui-space-4); row-gap: var(--ui-space-2); }
    .afi-ap-act { grid-column: 2; justify-self: start; }
    .afi-art { flex-direction: column; gap: var(--ui-space-2); }
    .afi-art-node { flex-direction: row; justify-content: flex-start; gap: var(--ui-space-3); width: 100%; min-height: 52px; }
    .afi-art-arrow { transform: rotate(90deg); }
    .afi-art-arrow svg { width: var(--ui-ic-sm); height: var(--ui-ic-sm); }
}
@media (prefers-reduced-motion: reduce) {
    .afi-ap-row { transition: none; }
}


/* Primeiro uso sem WhatsApp: a frase do pré-requisito, logo acima da primária. */
.afi-pre { max-width: 56ch; margin: 0 auto var(--ui-space-4); font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); line-height: var(--ui-lh-body); color: var(--ui-ink); }

/* Medidor de "Encontradas hoje" sem style= (o ui-kit poria --ui-meter-p inline): passos de 2%. */
.afi-kpi-meter.is-p-0 { --ui-meter-p: 0; } .afi-kpi-meter.is-p-1 { --ui-meter-p: 0.02; } .afi-kpi-meter.is-p-2 { --ui-meter-p: 0.04; } .afi-kpi-meter.is-p-3 { --ui-meter-p: 0.06; } .afi-kpi-meter.is-p-4 { --ui-meter-p: 0.08; } .afi-kpi-meter.is-p-5 { --ui-meter-p: 0.1; } .afi-kpi-meter.is-p-6 { --ui-meter-p: 0.12; } .afi-kpi-meter.is-p-7 { --ui-meter-p: 0.14; } .afi-kpi-meter.is-p-8 { --ui-meter-p: 0.16; } .afi-kpi-meter.is-p-9 { --ui-meter-p: 0.18; } .afi-kpi-meter.is-p-10 { --ui-meter-p: 0.2; } .afi-kpi-meter.is-p-11 { --ui-meter-p: 0.22; } .afi-kpi-meter.is-p-12 { --ui-meter-p: 0.24; } .afi-kpi-meter.is-p-13 { --ui-meter-p: 0.26; } .afi-kpi-meter.is-p-14 { --ui-meter-p: 0.28; } .afi-kpi-meter.is-p-15 { --ui-meter-p: 0.3; } .afi-kpi-meter.is-p-16 { --ui-meter-p: 0.32; } .afi-kpi-meter.is-p-17 { --ui-meter-p: 0.34; } .afi-kpi-meter.is-p-18 { --ui-meter-p: 0.36; } .afi-kpi-meter.is-p-19 { --ui-meter-p: 0.38; } .afi-kpi-meter.is-p-20 { --ui-meter-p: 0.4; } .afi-kpi-meter.is-p-21 { --ui-meter-p: 0.42; } .afi-kpi-meter.is-p-22 { --ui-meter-p: 0.44; } .afi-kpi-meter.is-p-23 { --ui-meter-p: 0.46; } .afi-kpi-meter.is-p-24 { --ui-meter-p: 0.48; } .afi-kpi-meter.is-p-25 { --ui-meter-p: 0.5; } .afi-kpi-meter.is-p-26 { --ui-meter-p: 0.52; } .afi-kpi-meter.is-p-27 { --ui-meter-p: 0.54; } .afi-kpi-meter.is-p-28 { --ui-meter-p: 0.56; } .afi-kpi-meter.is-p-29 { --ui-meter-p: 0.58; } .afi-kpi-meter.is-p-30 { --ui-meter-p: 0.6; } .afi-kpi-meter.is-p-31 { --ui-meter-p: 0.62; } .afi-kpi-meter.is-p-32 { --ui-meter-p: 0.64; } .afi-kpi-meter.is-p-33 { --ui-meter-p: 0.66; } .afi-kpi-meter.is-p-34 { --ui-meter-p: 0.68; } .afi-kpi-meter.is-p-35 { --ui-meter-p: 0.7; } .afi-kpi-meter.is-p-36 { --ui-meter-p: 0.72; } .afi-kpi-meter.is-p-37 { --ui-meter-p: 0.74; } .afi-kpi-meter.is-p-38 { --ui-meter-p: 0.76; } .afi-kpi-meter.is-p-39 { --ui-meter-p: 0.78; } .afi-kpi-meter.is-p-40 { --ui-meter-p: 0.8; } .afi-kpi-meter.is-p-41 { --ui-meter-p: 0.82; } .afi-kpi-meter.is-p-42 { --ui-meter-p: 0.84; } .afi-kpi-meter.is-p-43 { --ui-meter-p: 0.86; } .afi-kpi-meter.is-p-44 { --ui-meter-p: 0.88; } .afi-kpi-meter.is-p-45 { --ui-meter-p: 0.9; } .afi-kpi-meter.is-p-46 { --ui-meter-p: 0.92; } .afi-kpi-meter.is-p-47 { --ui-meter-p: 0.94; } .afi-kpi-meter.is-p-48 { --ui-meter-p: 0.96; } .afi-kpi-meter.is-p-49 { --ui-meter-p: 0.98; } .afi-kpi-meter.is-p-50 { --ui-meter-p: 1; }
/* Gráfico sem style= (o Chart.js poria largura/altura inline; o af-inicio.js tira): o CSS dá o tamanho. */
.afi-chart > canvas { width: 100%; height: 100%; box-sizing: border-box; }
/* "Para aprovar": a regra já pôs na fila (corrida, reason_code already_queued): o lugar do botão diz quando sai. */
.afi-ap-quando { justify-self: end; font-size: var(--ui-fs-help); color: var(--ui-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.afi-ap-act[hidden] { display: none; }
@media (max-width: 560px) { .afi-ap-quando { grid-column: 2; justify-self: start; } }