/* CSS dos mockups do modulo Sucesso do cliente.
   Compartilhado entre modulos/sucesso.html (pagina do modulo) e
   modulos/sucesso/*.html (paginas de funcionalidade: clube, parceiros,
   indicacoes, carteirinha, retencao).
   Depende de css/site.css (tokens) + css/modulos.css (padrao das paginas de modulo). */

/* ficha do membro do clube */
/* .mock-app e flex, entao o filho precisa esticar */
.mem { flex: 1; min-width: 0; text-align: left; padding: 16px; }
.mem-top { display: flex; align-items: center; gap: 12px; }
.mem-av { width: 46px; height: 46px; border-radius: 50%; background: var(--blue-050); flex: none; }
.mem-nm { font-weight: 600; }
.mem-lv { font-size: 0.72rem; color: var(--ink-3); }
.mem-coins { display: flex; gap: 10px; margin-top: 13px; }
.mem-coin { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.mem-coin .n { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.mem-coin .l { font-size: 0.62rem; color: var(--ink-3); }
.mem-prog { height: 7px; border-radius: 4px; background: var(--bg-2); margin-top: 13px; overflow: hidden; }
.mem-prog i { display: block; height: 100%; width: 68%; background: var(--blue); }
.mem-pl { font-size: 0.62rem; color: var(--ink-3); margin-top: 5px; }
.mem-m { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.76rem; }
.mem-m:first-of-type { margin-top: 8px; }
.mem-m .r { font-size: 0.6rem; font-weight: 700; color: var(--blue-600); background: var(--blue-050); border-radius: 5px; padding: 2px 7px; }
.mem-m .r.ok { color: var(--ok); background: var(--ok-050); }

/* catalogo de cupons de parceiro */
.cup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; text-align: left; padding: 14px; }
.cupc { border: 1px solid var(--line); border-radius: 10px; padding: 13px; background: #fff; }
.cupc .cat { font-size: 0.58rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.cupc .ti { font-weight: 600; font-size: 0.86rem; margin-top: 3px; }
.cupc .meta { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.cupc .m { font-size: 0.58rem; font-weight: 700; border-radius: 5px; padding: 2px 7px; color: var(--ink-3); background: var(--bg-2); }
.cupc .m.pt { color: var(--blue-600); background: var(--blue-050); }
.cupc .m.ok { color: var(--ok); background: var(--ok-050); }
@media (max-width: 40rem) { .cup { grid-template-columns: 1fr; } }

/* carteirinha digital */
.card-id { max-width: 380px; margin: 0 auto; border-radius: 14px; padding: 20px; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); text-align: left; box-shadow: var(--sh); }
.card-id .cbrand { font-size: 0.66rem; opacity: 0.85; letter-spacing: 0.1em; text-transform: uppercase; }
.card-id .nm { font-size: 1.25rem; font-weight: 600; margin-top: 16px; }
.card-id .rw { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; }
.card-id .k { font-size: 0.56rem; opacity: 0.82; text-transform: uppercase; letter-spacing: 0.04em; }
.card-id .v { font-weight: 600; }
.card-id .qr { width: 54px; height: 54px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); }

/* indice das funcionalidades do modulo (terceiro nivel da navegacao) */
.fnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(2.4rem, 4vw, 3.4rem); background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.fnav.c2 { grid-template-columns: repeat(2, 1fr); }
.fnav a { background: #fff; padding: 1.5rem 1.5rem 1.4rem; display: block; color: inherit; transition: background 0.15s ease; }
.fnav a:hover { background: var(--bg-2); }
.fnav .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-050); color: var(--blue); display: grid; place-items: center; margin-bottom: 0.85rem; }
.fnav h4 { font-size: 0.98rem; font-weight: 600; }
.fnav p { color: var(--ink-3); font-size: 0.86rem; margin-top: 0.25rem; line-height: 1.45; }
.fnav .go { display: inline-block; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--blue); }
@media (max-width: 62rem) { .fnav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .fnav { grid-template-columns: 1fr; } }

/* lista chave/valor pros mockups de configuracao */
.kv { text-align: left; padding: 4px 0; }
.kv-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
.kv-r:last-child { border-bottom: 0; }
.kv-r .k { color: var(--ink-3); }
.kv-r .v { font-weight: 600; }
.kv-r .v.b { color: var(--blue-600); }

/* variantes de risco pro .sic do modulos.css (alerta e recusa) */
.sic.bad { background: #fdecea; color: #a3341f; }
.sic.warn { background: #fdf0dd; color: #955510; }

/* card do aibento clicavel (leva pra pagina da funcionalidade) */
/* flex column pro "Ver" alinhar na base, textos tem alturas diferentes */
a.acard { display: flex; flex-direction: column; color: inherit; transition: background 0.15s ease; }
a.acard:hover { background: var(--bg-2); }
.acard .go { display: inline-block; margin-top: auto; padding-top: 0.9rem; font-size: 0.78rem; font-weight: 600; color: var(--blue); }