/**
 * Poupex Play 4.0 — Mini Apps
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-apps
 *
 * Sprint 11 do redesign visual.
 *
 * ------------------------------------------------------------------
 * COMPONENTE GENÉRICO
 * ------------------------------------------------------------------
 * `.pp4-app-card` não sabe o que é PouFit. Recebe ícone, título,
 * descrição, categoria, um selo de situação e um CTA. PouFit,
 * PouFinanças, Eloah Kids, Organizador Financeiro, Agenda, ferramentas
 * e IAs futuras entram na grade sem uma linha de CSS nova — basta um
 * item a mais no catálogo da página.
 *
 * A instrução do Sprint foi explícita: "Não criar componentes
 * exclusivos para PouFit ou PouFinanças."
 *
 * ------------------------------------------------------------------
 * REAPROVEITADOS, SEM CÓPIA LOCAL
 * ------------------------------------------------------------------
 *   section.css   .pp4-sec / __head / __title / __count / __sub
 *   tabs.css      .task-tabs / .task-tab       filtros de categoria
 *   activity.css  .pp4-act-empty               categoria sem apps
 *   activity.css  .pp4-act-skeleton            carregamento
 *   games.css     .pp4-game-card-skeleton      formato do esqueleto
 *
 * O herói e o cartão são próprios: o cartão de jogo tem capa 16/10 com
 * glifo grande e dois contadores ao vivo; o de mini app tem ícone
 * pequeno em linha, categoria e situação de assinatura. Forçar um a
 * servir ao outro deixaria os dois piores.
 *
 * ------------------------------------------------------------------
 * O QUE OS DADOS PERMITEM
 * ------------------------------------------------------------------
 * `poufit_acessos`, `poufinancas_acessos` e `trade_acessos` guardam
 * ASSINATURA (quem pagou, quanto, até quando), não uso. Não existe
 * nenhum registro de abertura de app em lugar nenhum do banco.
 *
 * Por isso o hub mostra situação de assinatura e vencimento — que são
 * reais e úteis — e NÃO mostra "mais utilizados", "recentes" nem
 * "último acesso". Esses exigiriam uma tabela nova e um ponto de
 * escrita, ou seja, backend.
 *
 * Os selos `--novo`, `--breve`, `--ativo`, `--expirado` e `--destaque`
 * existem todos aqui; cada um é aceso por um dado verificável.
 */

/* ============================================================
   1 · CONTÊINER
   ============================================================ */

.pp4-apps {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-6);
  width: 100%;
  min-width: 0;
  color: var(--pp4-color-text);
}

.pp4-apps [hidden] { display: none !important; }

/* `.shell--app p` = 0,1,1 (creme). Aqui 0,2,1. */
.pp4-apps p { color: var(--pp4-color-text-muted) !important; }

/* ============================================================
   2 · HERÓI
   ============================================================ */

.pp4-apps-hero {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-6);
  border: 1px solid rgba(91, 140, 255, 0.28);
  border-radius: var(--pp4-radius-lg);
  background: linear-gradient(135deg, #123bf9 0%, #0b1f8f 58%, #0a0e17 100%);
  overflow: hidden;
}

.pp4-apps-hero__kicker,
html[data-theme] .pp4-apps-hero__kicker {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pp4-apps-hero__title,
html[data-theme] .pp4-apps-hero__title {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: var(--pp4-text-2xl);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: -0.01em;
}

.pp4-apps-hero__count {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--pp4-space-3);
  border-radius: var(--pp4-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-apps-hero__desc,
html[data-theme] .pp4-apps-hero__desc {
  max-width: 62ch;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--pp4-text-md);
  line-height: var(--pp4-leading-normal);
}

/* O link para Jogos precisa vencer a regra genérica de links do shell
   (`brand-theme.css:808` = 0,8,1 !important). Cadeia completa → 0,10,1. */
.pp4-shell .content .pp4-apps .pp4-apps-hero__desc a:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: #ffffff !important;
  font-weight: var(--pp4-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   3 · CARTÃO DE MINI APP — o componente reutilizável
   ============================================================

   Marcação esperada:

     <a class="pp4-app-card pp4-app-card--<accent>" href="…">
       <span class="pp4-app-card__top">
         <span class="pp4-app-card__icon">…svg…</span>
         <span class="pp4-app-badge pp4-app-badge--<estado>">…</span>
       </span>
       <span class="pp4-app-card__title">…</span>
       <span class="pp4-app-card__desc">…</span>
       <span class="pp4-app-card__foot">
         <span class="pp4-app-card__cat">…</span>
         <span class="pp4-app-card__cta">Abrir</span>
       </span>
     </a>

   O cartão inteiro é o alvo do clique — não há botão separado, então
   não existe alvo de toque aninhado. */

.pp4-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--pp4-space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.pp4-apps-grid > li { display: flex; min-width: 0; }
.pp4-apps-grid > li > .pp4-app-card { width: 100%; }

.pp4-app-card,
html[data-theme] .pp4-app-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-5) !important;
  margin: 0 !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition:
    border-color var(--pp4-duration) var(--pp4-ease),
    background var(--pp4-duration) var(--pp4-ease),
    transform var(--pp4-duration-fast) var(--pp4-ease);
}

.pp4-app-card:hover,
html[data-theme] .pp4-app-card:hover {
  border-color: var(--pp4-color-blue-bright) !important;
  background: var(--pp4-color-surface-2) !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

.pp4-app-card:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* App ainda não lançado: o cartão continua visível e legível, mas não
   promete interação. */
.pp4-app-card--soon { opacity: 0.72; }
.pp4-app-card--soon:hover { transform: none; }

.pp4-app-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp4-space-3);
}

/* --- Ícone -----------------------------------------------------------
   O antigo era dourado (`#c4a85e` sobre `rgba(196,168,94,.15)`). Cada
   acento agora deriva do Azul Royal ou do Verde Neon. */

.pp4-app-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--pp4-color-surface-3);
  color: var(--pp4-color-text) !important;
}

.pp4-app-card__icon svg {
  width: 22px;
  height: 22px;
  color: inherit !important;
  stroke: currentColor;
}

.pp4-app-card--blue  .pp4-app-card__icon { background: rgba(18, 59, 249, 0.18);  border-color: rgba(91, 140, 255, 0.35); color: var(--pp4-color-blue-bright) !important; }
.pp4-app-card--green .pp4-app-card__icon { background: rgba(0, 230, 118, 0.14);  border-color: rgba(0, 230, 118, 0.32);  color: var(--pp4-color-success) !important; }
/* `gold` é um valor herdado do catálogo. O nome fica; a cor não. */
.pp4-app-card--gold  .pp4-app-card__icon { background: rgba(91, 140, 255, 0.16); border-color: rgba(91, 140, 255, 0.3);  color: var(--pp4-color-blue-bright) !important; }

/* --- Selos ----------------------------------------------------------- */

.pp4-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 3px var(--pp4-space-2);
  border-radius: var(--pp4-radius-pill);
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Assinatura em dia — o único estado que ganha a cor de sucesso. */
.pp4-app-badge--ativo {
  background: var(--pp4-color-success);
  color: var(--pp4-color-success-ink) !important;
}

.pp4-app-badge--ativo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pp4-app-badge--expirado {
  background: var(--pp4-color-warning-soft);
  color: var(--pp4-color-warning) !important;
}

.pp4-app-badge--novo {
  background: var(--pp4-color-blue);
  color: #ffffff !important;
}

.pp4-app-badge--destaque {
  background: rgba(18, 59, 249, 0.2);
  color: var(--pp4-color-blue-bright) !important;
}

.pp4-app-badge--breve,
.pp4-app-badge--neutro {
  background: var(--pp4-color-surface-3);
  color: var(--pp4-color-text-muted) !important;
}

/* --- Texto ----------------------------------------------------------- */

.pp4-app-card__title,
html[data-theme] .pp4-app-card__title {
  display: block;
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-lg);
  font-weight: var(--pp4-weight-bold);
  line-height: 1.25;
}

.pp4-app-card__desc,
html[data-theme] .pp4-app-card__desc {
  display: block;
  flex: 1 1 auto;
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
}

/* Vencimento da assinatura, quando existe. */
.pp4-app-card__note {
  display: block;
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-xs);
}

.pp4-app-card__note--ativo { color: var(--pp4-color-success) !important; }
.pp4-app-card__note--alerta { color: var(--pp4-color-warning) !important; }

/* --- Rodapé ---------------------------------------------------------- */

.pp4-app-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  padding-top: var(--pp4-space-3);
  border-top: 1px solid var(--pp4-color-border);
}

.pp4-app-card__cat {
  display: inline-flex;
  align-items: center;
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Não é um botão: o alvo de clique é o cartão inteiro. É a affordância
   visual de que ali se entra. */
.pp4-app-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pp4-color-blue-bright) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-app-card__cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--pp4-duration) var(--pp4-ease);
}

.pp4-app-card:hover .pp4-app-card__cta svg { transform: translateX(2px); }

.pp4-app-card--soon .pp4-app-card__cta { color: var(--pp4-color-text-subtle) !important; }

/* ============================================================
   4 · FAIXA DE ASSINATURAS
   ============================================================

   Compacta, para o que o usuário já paga. Reaproveita os acentos do
   `.pp4-app-card`, então qualquer app futuro entra sem CSS novo. */

.pp4-apps-subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--pp4-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.pp4-apps-subs > li { display: flex; min-width: 0; }
.pp4-apps-subs > li > .pp4-apps-subs__item { width: 100%; }

.pp4-apps-subs__item,
html[data-theme] .pp4-apps-subs__item {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-3) var(--pp4-space-4) !important;
  border: 1px solid rgba(0, 230, 118, 0.28) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-apps-subs__item:hover { background: var(--pp4-color-surface-2) !important; }

.pp4-apps-subs__item:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-apps-subs__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.pp4-apps-subs__name {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-apps-subs__until {
  color: var(--pp4-color-success) !important;
  font-size: var(--pp4-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-apps-subs__until--alerta { color: var(--pp4-color-warning) !important; }

.pp4-apps-subs__chev {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--pp4-color-text-subtle) !important;
}

/* ============================================================
   5 · COR DOS LINKS — espelhos das regras genéricas
   ============================================================

   Todo cartão aqui é um `<a>`, e `brand-theme.css:644` (0,7,1) e
   `:808` (0,8,1) pintam qualquer `<a>` do conteúdo de dourado. Repetir
   a cadeia `:not()` leva a 0,10,1. */

.pp4-shell .content .pp4-apps a.pp4-app-card:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab),
.pp4-shell .content .pp4-apps a.pp4-apps-subs__item:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   6 · ESQUELETO DE CARREGAMENTO
   ============================================================

   `.pp4-act-skeleton` (activity.css) traz animação e cor. */

.pp4-app-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-app-card-skeleton__icon { width: 46px; height: 46px; border-radius: 14px; }
.pp4-app-card-skeleton__line { height: 12px; border-radius: var(--pp4-radius-sm); }
.pp4-app-card-skeleton__line--title { width: 52%; height: 18px; }
.pp4-app-card-skeleton__line--sm { width: 70%; }

/* ============================================================
   7 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-apps-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-apps { gap: var(--pp4-space-5); }

  .pp4-apps-hero { padding: var(--pp4-space-5); }
  .pp4-apps-hero__title { font-size: var(--pp4-text-xl); }

  .pp4-apps-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pp4-space-3); }
  .pp4-app-card { padding: var(--pp4-space-4) !important; }

  .pp4-apps-subs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .pp4-app-card__icon { width: 40px; height: 40px; }
  .pp4-app-card__icon svg { width: 19px; height: 19px; }
  .pp4-app-card__title { font-size: var(--pp4-text-md); }

  /* Categoria e CTA não cabem lado a lado; a categoria some antes do
     CTA porque o CTA é a ação. */
  .pp4-app-card__cat { display: none; }
  .pp4-app-card__foot { justify-content: flex-end; }
}

/* ============================================================
   8 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-app-card,
  .pp4-apps-subs__item,
  .pp4-app-card__cta svg { transition: none !important; }

  .pp4-app-card:hover { transform: none; }
  .pp4-app-card:hover .pp4-app-card__cta svg { transform: none; }
}