/* ==========================================================================
 *  ABAS "BÔNUS" E "TAREFAS" DE PROMOÇÕES (D-154/D-155, 10/10/2026)
 * ==========================================================================
 *  Montadas por assets/site/promo-abas.js dentro do <div class="pp-aba"> que o
 *  bundle desenha. As variáveis de cor (--brand, --bg-*) vêm do index.php:
 *  as duas cores originais do tema ativo (admin/services/promo_tema.php).
 *  O dourado e o verde são semânticos (dinheiro / concluído) e não mudam.
 * ========================================================================== */
/* Padrões com especificidade zero: o <style id="pp-tema"> do index.php
   (promo_tema.php, inclusive a variante clara) sempre vence. */
:where(.pp-aba, .pp-md, .pp-aviso) { --tx: #fff; --tx-rgb: 255,255,255; --gold: #ffd25e; --gold-deep: #e39a17; }
.pp-aba, .pp-md, .pp-aviso {
  --gold-rgb: 255,210,94; --ok: #3ee48a; --ok-rgb: 62,228,138;
  --w80: rgba(var(--tx-rgb),.82); --w60: rgba(var(--tx-rgb),.62); --w40: rgba(var(--tx-rgb),.42); --w06: rgba(var(--tx-rgb),.06);
  --pp-r: .875rem; --pp-ease: cubic-bezier(.16,1,.3,1);
  font-family: Prompt, "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.pp-aba { display: block; padding: .75rem .75rem 2rem; color: var(--tx); }
.pp-aba *, .pp-md * { box-sizing: border-box; }
.pp-vazio { padding: 2.5rem 1rem; text-align: center; font-size: .875rem; color: var(--w60); }
.pp-link { background: none; border: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Botões no formato dos popups nativos do app (pedido do dono, 11/10/2026;
   bundle: .leftBtn/.rightBtn data-v-23c77edc): cantos de .3125rem, chapados,
   sem brilho nem pulso. A cor é a MESMA do botão do popup do tema ativo
   (--color-bg-btn-popup-cancel, que pode ser um degradê do tema); tema que
   não define a variável cai na cor da marca. */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.5rem; padding: 0 1.125rem;
  border: 0; border-radius: .3125rem; font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  color: var(--color-text-btn-basic, var(--on-brand, #fff)); background: var(--color-bg-btn-popup-cancel, var(--brand, #7041f3));
  box-shadow: none; transition: opacity .2s; }
.pp-btn:active { opacity: .85; }
.pp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pp-btn:disabled { cursor: default; opacity: .5; }
.pp-btn-sec { color: var(--tx); background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-popup-confirm, var(--brand, #7041f3)); }
.pp-btn-feito { color: var(--ok); background: rgba(var(--ok-rgb),.12); box-shadow: none; }
.pp-btn-feito:disabled { opacity: 1; }

.pp-regras { margin-top: 1.25rem; }
.pp-regras h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--tx); }
.pp-regras p { margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.55; color: var(--w60); }

/* Tarefas */
.pp-banner { display: block; width: 100%; height: auto; border-radius: var(--pp-r); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.3); }
.pp-tarefas { margin-top: .75rem; padding: .5rem; border-radius: var(--pp-r); background: var(--bg-400, #12141a); box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.1)); }
.pp-tarefa { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: .75rem; background: var(--bg-300, #1d2028); }
.pp-tarefa + .pp-tarefa { margin-top: .5rem; }
.pp-tarefa-ic { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: #2a1700;
  background: radial-gradient(circle at 35% 30%, #ffe9a6, #f3a521 70%); box-shadow: 0 .25rem .625rem rgba(var(--gold-rgb),.3); }
.pp-tarefa-ic svg { width: 1.375rem; height: 1.375rem; }
.pp-tarefa-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.pp-tarefa-tx b { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--tx); }
.pp-tarefa-tx em { font-style: normal; font-size: 1rem; font-weight: 700; color: var(--gold); }
.pp-tarefa-tx small { font-size: .75rem; color: var(--w60); }

/* Bônus diário */
/* Topo como o da referência: arte dourada grande e o "Coletável" sobreposto
   embaixo. A arte é a do próprio app (porquinho do registerReward style_17). */
.pp-bonus-topo { position: relative; display: flex; flex-direction: column; align-items: center; padding: .75rem 1rem 1rem;
  border-radius: var(--pp-r); overflow: hidden;
  background: radial-gradient(70% 80% at 50% 40%, rgba(var(--gold-rgb),.22), transparent 70%), var(--bg-400, #12141a);
  box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.1)); }
.pp-bonus-topo img { width: min(78%, 17rem); height: auto; aspect-ratio: 728/488; filter: drop-shadow(0 .5rem .875rem rgba(0,0,0,.45)); }
.pp-coletavel { display: flex; flex-direction: column; align-items: center; margin-top: -1.75rem; padding: .375rem 2rem; border-radius: 999px;
  background: linear-gradient(180deg, #3a2a05, #1d1503); box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb),.75), 0 .5rem 1rem rgba(0,0,0,.4); }
.pp-coletavel small { font-size: .8125rem; color: rgba(255,255,255,.82); }
.pp-coletavel b { font-size: 1.875rem; line-height: 1.1; font-weight: 800; color: #ffd25e; }
.pp-faixas { margin-top: .75rem; padding: .625rem; border-radius: var(--pp-r); background: var(--bg-400, #12141a); box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.1)); }
.pp-faixas-cab { display: flex; justify-content: space-between; padding: .25rem .375rem .625rem; font-size: .8125rem; font-weight: 600; color: var(--w80); }
.pp-faixa { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 3rem; border-radius: .75rem; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.35); }
.pp-faixa + .pp-faixa { margin-top: .5rem; }
.pp-faixa-dep { display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; font-weight: 700; color: #fff; background: var(--brand-lo, #3b1f8a); }
.pp-faixa-dep img { width: 1.75rem; height: auto; aspect-ratio: 70/40; flex: none; }
.pp-faixa-val { display: flex; align-items: center; justify-content: flex-end; gap: .375rem; padding: 0 1rem; font-size: 1.0625rem; font-weight: 800;
  color: #2a1700; background: linear-gradient(90deg, #f3c84c, #ffe07a); }
.pp-faixa.bloqueada .pp-faixa-val { filter: saturate(.55) brightness(.85); }
.pp-faixa.liberada { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(var(--gold-rgb),.2); }
.pp-faixa.resgatada .pp-faixa-val { color: #06210f; background: linear-gradient(90deg, #36d27e, #7cf0ad); }
.pp-dica { margin: .75rem .25rem 0; font-size: .8125rem; line-height: 1.5; color: var(--w60); }
.pp-dica b { color: var(--w80); }
.pp-acao { margin-top: .75rem; }
.pp-acao .pp-btn { width: 100%; min-height: 2.75rem; font-size: .9375rem; }

/* Acabamento por estilo de tema (classe do <body> do app) */
body.first .pp-tarefa, body.first .pp-faixa { border-radius: .5rem; }
body.second .pp-tarefa, body.second .pp-faixa { border-radius: 1rem; }

/* Popup de prêmio e aviso */
.pp-md { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; padding: 1.5rem; background: rgba(0,0,0,.66);
  opacity: 0; transition: opacity .25s var(--pp-ease); }
.pp-md.on { opacity: 1; }
.pp-md-cx { width: min(22rem,100%); margin-top: 2.5rem; border-radius: 1.125rem; background: var(--bg-300, #1d2028);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.55); scale: .92; transition: scale .45s var(--pp-ease); }
.pp-md.on .pp-md-cx { scale: 1; }
.pp-md-arte { position: relative; height: 7rem; border-radius: 1.125rem 1.125rem 0 0; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.pp-md-arte img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 10rem; max-width: none; }
.pp-md-txt { padding: 1.25rem 1.5rem 1.5rem; text-align: center; color: var(--tx); }
.pp-md-txt p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--w80); }
.pp-md-txt strong { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.pp-md-txt small { display: block; margin-top: .5rem; font-size: .75rem; color: var(--w40); }
.pp-md-txt .pp-btn { margin-top: 1.25rem; min-width: 8.5rem; }
.pp-aviso { position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 20001; translate: -50% 1rem;
  max-width: min(26rem, calc(100% - 2rem)); padding: .75rem 1rem; border-radius: .75rem; background: #16181f; color: #fff;
  font-size: .875rem; line-height: 1.4; box-shadow: 0 .75rem 2rem rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--pp-ease), translate .35s var(--pp-ease); }
.pp-aviso.on { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: reduce) {
  .pp-aba *, .pp-md, .pp-md *, .pp-aviso { animation: none !important; transition: none !important; }
}