/* ============================================================================
   af-casca.css: casca compartilhada do Afiliados Automático (/client/afiliados/*).
   SC1, 01/10/2026. Contrato em scratchpad/sc-ui/CASCA.md.
   Só o que TODA página da área usa: migalha, cabeçalho, ritmo entre blocos e a
   linha compacta de "acesso expirado". Namespace af-*. Componentes são do
   ui-kit (ui-page-head, ui-attn, ui-callout); só tokens --ui-*; sem sombra,
   sem faixa de destaque, sem !important. Cabe em 360 px sem rolagem lateral.
   ============================================================================ */

.af-page { min-width: 0; }
.af-top .dsh-breadcrumb { margin: 0 0 var(--ui-space-4); }
.af-head { align-items: center; }
.af-meta { font-variant-numeric: tabular-nums; }
.af-meta > span { white-space: nowrap; }
.af-sep { margin: 0 2px; color: var(--ui-muted-2); }
.af-actions { justify-content: flex-end; }
.af-actions .ui-btn svg { flex-shrink: 0; width: var(--ui-ic-sm); height: var(--ui-ic-sm); }

/* Ritmo entre blocos: seção 24 (como Redes de grupos). */
.af-block { margin-bottom: var(--ui-space-6); }

/* Linha compacta de "acesso expirado" (Ofertas, Regras): ui-attn sem cabeçalho. */
.af-alerta .ui-attn-list { padding: var(--ui-space-1); }
.af-alerta .ui-attn-item { min-height: 44px; }

/* ── Tile na COR DA MARCA (AfCasca::marca; mesmo padrão do hub .sc-mk-*) ─────
   O logotipo é currentColor: o tile dá o fundo da loja e a tinta que contrasta.
   Cores fixas de propósito (identidade da loja), no claro e no escuro. */
.ui-tile.af-mk { background: var(--af-mk-bg); color: var(--af-mk-ink); border-color: transparent; }
/* No caminho vivo (ui-flow): tile de 28 na cor da marca com borda sutil (no escuro separa o grafite
   da Amazon do card; no claro assenta o amarelo do ML) e o logotipo em 60 % do tile. */
.ui-flow-media.af-mk { background: var(--af-mk-bg); color: var(--af-mk-ink); border: 1px solid var(--ui-border-subtle); }
.ui-flow-media > .af-mk-logo { width: 60%; height: 60%; }
/* O logotipo é MÁSCARA (o SVG do site é currentColor; em <img> sairia preto):
   o span leva a tinta no background e o desenho recorta. Caminho relativo ao /assets/css/. */
.af-mk-logo { display: block; background: var(--af-mk-ink); -webkit-mask: var(--af-mk-logo) center / contain no-repeat; mask: var(--af-mk-logo) center / contain no-repeat; }
.af-mk-ml     { --af-mk-bg: #FFE600; --af-mk-ink: #2D3277; --af-mk-logo: url(/vendor/mercadolivre.svg); }
.af-mk-shopee { --af-mk-bg: #EE4D2D; --af-mk-ink: #FFFFFF; --af-mk-logo: url(/vendor/shopee.svg); }
.af-mk-magalu { --af-mk-bg: #0F6DFF; --af-mk-ink: #FFFFFF; --af-mk-logo: url(/vendor/magalu-simbolo.svg); }
.af-mk-amazon { --af-mk-bg: #232F3E; --af-mk-ink: #FFFFFF; --af-mk-logo: url(/vendor/amazon.svg); }
/* Rakuten (05/10): carmim da marca com o "R" branco (6,6:1). Só o símbolo, nunca o letreiro. */
.af-mk-rakuten { --af-mk-bg: #BF0000; --af-mk-ink: #FFFFFF; --af-mk-logo: url(/vendor/rakuten.svg); }
/* Awin (06/10): o laranja cheio da marca ficaria colado no da Shopee na mesma grade (D-ux DX-5): tile
   CLARO fixo com a chama laranja (3,5:1 no branco) e borda sutil nos dois temas. Só o símbolo. */
.af-mk-awin { --af-mk-bg: #FFFFFF; --af-mk-ink: #E85A00; --af-mk-logo: url(/vendor/awin.svg); }
.ui-tile.af-mk.af-mk-awin { border: 1px solid var(--ui-border-subtle); }
/* No escuro o tile cheio ganha borda sutil (D-ux 7.1): separa o carmim e o grafite da Amazon do card escuro.
   A variante CLARA da Rakuten (fundo claro, "R" carmim, borda sutil) fica em cada página, só onde as
   outras 4 lojas usam tile neutro: af-fontes.css (passo 1 e cabeçalho), af-comecar.css e af-gerar-link.css. */
[data-theme="dark"] .ui-tile.af-mk { border: 1px solid var(--ui-border-subtle); }

/* Botão só com ícone no celular (ex.: "Como funciona"): .af-act-ico + .af-act-txt. */
@media (max-width: 560px) {
    .af-act-ico { flex: 0 0 auto; width: var(--ui-target-touch); height: var(--ui-target-touch); padding: 0; gap: 0; }
    .af-act-ico svg { width: var(--ui-ic-md); height: var(--ui-ic-md); }
    .af-act-ico .af-act-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .af-hide-sm { display: none; }
}

/* ── "Como chega no WhatsApp" (escolha da conta: prévia do link ou imagem; _wa_formato.php) ── */
.af-waf-seg { align-self: flex-start; max-width: 100%; }
.af-waf[hidden] { display: none; }
/* Faixa do link embaixo da foto na prévia do celular: só no formato "Prévia do link" (como o cartão real). */
.af-waf-bar { display: block; margin: -4px 0 4px; padding: 5px 8px; border-radius: 0 0 6px 6px; background: rgba(17, 27, 33, .06); font-size: 11px; line-height: 16px; color: var(--ui-wa-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-waf-bar[hidden] { display: none; }
@media (max-width: 560px) {
    .af-waf-seg { display: flex; width: 100%; }
    .af-waf-seg > .ui-seg-btn { flex: 1 1 0; justify-content: center; }
}