/* Catálogo de componentes da dashboard (docs/app-v3-componentes.md), para
   js/componentes.js. Carregado por ÚLTIMO no membro.html. Escopo .app-membro:
   as páginas públicas não são afetadas. Espaços só de 4·8·12·16·24·32·40·48.
   O ritmo mora no pai (gap); nenhum componente tem margem própria. */
.app-membro {
  --c-secao: 40px; --c-sec-head: 16px; --c-grade: 16px; --c-palco-lado: 16px;
}
@media (min-width: 900px) { .app-membro { --c-secao: 48px; --c-sec-head: 24px; --c-grade: 24px; --c-palco-lado: 32px; } }

/* ---------- Movimento: UM sistema para a dashboard (js/mov.js) ----------
   Tokens de duração e curva. Toda transição da área de membro usa estes
   nomes; o JS lê os mesmos números. Entrar e sair: ease-out forte (resposta
   imediata, nada de ease-in). Mover/crescer na tela: ease-in-out. Folha que
   sobe: a curva de gaveta do iOS. A saída é sempre mais curta que a entrada.
   Nada passa de 360 ms (a cascata de blocos), e menu/modal ficam em 150–240. */
:root {
  --mov-instante: 100ms;   /* toque/pressão, cor de hover */
  --mov-rapido: 150ms;     /* saídas: menu, modal, folha, toast, troca, aba que sai */
  --mov-medio: 240ms;      /* entradas: menu, modal, folha, toast; abrir/fechar acordeão */
  --mov-lento: 360ms;      /* blocos que entram em cascata */
  --mov-passo: 40ms;       /* degrau da cascata */
  --mov-ease: cubic-bezier(0.23, 1, 0.32, 1);          /* entrar e sair */
  --mov-ease-mover: cubic-bezier(0.65, 0, 0.35, 1);    /* altura, posição na tela */
  --mov-ease-folha: cubic-bezier(0.32, 0.72, 0, 1);    /* folha/gaveta */
  --mov-desloca: 8px;      /* quanto um bloco sobe ao entrar */
  --mov-escala: 0.97;      /* de onde modal/menu crescem (nunca de 0) */
}
@media (prefers-reduced-motion: reduce) {
  /* sem deslocamento nem escala: o que sobra é um fade curto */
  :root { --mov-desloca: 0px; --mov-escala: 1; --mov-medio: 120ms; --mov-lento: 120ms; --mov-passo: 0ms; }
}

/* os snippets do transitions.dev (toast, modal de compartilhar, aviso,
   dropdown) seguem a mesma escala dentro da área de membro */
.app-membro {
  --toast-open: var(--mov-medio); --toast-close: var(--mov-rapido); --toast-ease: var(--mov-ease);
  --modal-open-dur: var(--mov-medio); --modal-close-dur: var(--mov-rapido); --modal-ease: var(--mov-ease); --modal-scale: var(--mov-escala); --modal-scale-close: var(--mov-escala);
}

/* Expandir/recolher (ligarExpansao): o painel cresce de 0fr a 1fr (altura
   certa sem medir) e o miolo aparece por cima em fade + deslize curto; ao
   fechar, o miolo some primeiro (rápido) e a altura vem atrás. Vale para o
   Accordion, a revisão por questão, o "Sobre estas estimativas" e o "Ver 28
   dias". O padding do miolo mora num filho (padding no item do grid não
   colapsa em 0fr). */
.q-exp__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mov-medio) var(--mov-ease-mover); }
.q-exp[data-aberto="true"] > .q-exp__painel { grid-template-rows: 1fr; }
.q-exp__painel > * { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(calc(var(--mov-desloca) * -1));
  transition: opacity var(--mov-rapido) var(--mov-ease), transform var(--mov-rapido) var(--mov-ease); }
.q-exp[data-aberto="true"] > .q-exp__painel > * { opacity: 1; transform: none;
  transition: opacity var(--mov-medio) var(--mov-ease) 60ms, transform var(--mov-medio) var(--mov-ease) 60ms; }
.q-exp__chev { display: inline-flex; flex: none; transition: transform var(--mov-medio) var(--mov-ease-mover); }
.q-exp[data-aberto="true"] > button .q-exp__chev, .q-exp[data-aberto="true"] > .q-exp__cab .q-exp__chev { transform: rotate(180deg); }
@media print { .q-exp__painel { grid-template-rows: 1fr !important; } .q-exp__painel > * { opacity: 1 !important; transform: none !important; } }

/* Dobra: a mesma expansão em forma de link ("Sobre estas estimativas",
   "Ver os últimos 28 dias"), para dentro de um cartão. Alvo de 44. */
.q-dobra__botao { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px/20px var(--fonte-corpo); color: var(--q-prim); text-align: left; border-radius: 8px; }
.q-dobra__botao svg { width: 16px; height: 16px; }
.q-dobra__botao:focus-visible { outline: 2px solid var(--q-prim); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .q-dobra__botao:hover { text-decoration: underline; text-underline-offset: 3px; } }
[data-tema="noite"] .q-dobra__botao, .q-card--noite .q-dobra__botao { color: var(--q-prim-noite); }
[data-tema="noite"] .q-dobra__botao:focus-visible, .q-card--noite .q-dobra__botao:focus-visible { outline-color: var(--q-prim-noite); }
.q-dobra__dentro > * { margin: 0 0 8px; }
.q-dobra__dentro > :first-child { margin-top: 4px; }

/* Esqueleto (placeholder com a forma do conteúdo). Traço cinza no claro e
   translúcido claro no noite (nunca branco chapado). O brilho é um ::after
   que desliza por transform (compositor; o background-position animado
   repintava a cada quadro). Reduced motion: traço parado.
   --w: largura; q-esq--txt ocupa uma linha de texto do pai; q-esq--linha é
   uma linha de parágrafo (24 px de passo). */
.q-esq { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; width: var(--w, 100%); max-width: 100%; height: 1em; border-radius: 6px; background: var(--q-sup-2); }
.q-esq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 60%), transparent); animation: q-esq-brilho 1.6s var(--mov-ease-mover) infinite; }
@keyframes q-esq-brilho { 60%, 100% { transform: translateX(100%); } }
.q-esq--txt { height: .72em; }
.q-esq--linha { display: block; height: 14px; margin: 5px 0; }
.q-esq--noite { background: rgb(255 255 255 / 10%); }
.q-esq--noite::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 9%), transparent); }
@media (prefers-reduced-motion: reduce) { .q-esq::after { animation: none; opacity: 0; } }
/* texto-fantasma: a frase do mesmo tamanho, invisível, com o traço por linha
   (box-decoration clone); quebra como o texto real, então a altura bate */
.q-esq-t { color: transparent !important; background: var(--q-sup-2); border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: q-esq-pulso 1.6s var(--mov-ease-mover) infinite alternate; user-select: none; }
.q-esq-t--noite { background: rgb(255 255 255 / 10%); }
@keyframes q-esq-pulso { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .q-esq-t { animation: none; } }
/* conteúdo que chega no lugar do esqueleto acende em fade */
@keyframes q-revela { from { opacity: 0; } }

/* Troca de aba: a foto da tela que sai (mov.js sairTela), presa na janela */
.q-saindo { position: fixed; z-index: 2; margin: 0; pointer-events: none; }
.q-saindo > h1:first-child { display: none; }

/* ---------- largura: toda a área até 1440 de conteúdo; acima, centraliza ---------- */
@media (min-width: 900px) {
  .app-membro .app-v3 .membro-palco, .app-membro .app-v3 .membro-palco:has(.relatorio) {
    max-width: calc(1440px + 2 * var(--c-palco-lado)); margin-inline: auto; padding: 32px var(--c-palco-lado) 48px;
  }
}
.app-membro .app-v3 .membro-palco p { max-width: none; }

/* ---------- Page / Section / Grid ---------- */
.app-membro .q-page { display: flex; flex-direction: column; gap: var(--c-secao); }
.app-membro .q-page > * { margin: 0; min-width: 0; }
.app-membro .q-section { display: flex; flex-direction: column; gap: var(--c-sec-head); min-width: 0; margin: 0; }
.app-membro .q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--c-grade); align-items: start; }
.app-membro .q-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .app-membro .q-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .app-membro .q-span-12 { grid-column: span 12; } .app-membro .q-span-8 { grid-column: span 8; } .app-membro .q-span-7 { grid-column: span 7; }
  .app-membro .q-span-6 { grid-column: span 6; } .app-membro .q-span-5 { grid-column: span 5; } .app-membro .q-span-4 { grid-column: span 4; }
  .app-membro .q-grid--esticar { align-items: stretch; }
}
@media (min-width: 900px) and (max-width: 1099px) { .app-membro .q-span-4 { grid-column: span 6; } }

/* ---------- PageHeader / SectionHeader ---------- */
.app-membro .q-page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.app-membro .q-page-head h1 { font: 700 28px/34px var(--fonte-titulo); letter-spacing: -.02em; text-wrap: balance; margin: 0; color: var(--q-tinta); }
.app-membro .q-page-head__sub { margin: 4px 0 0; font: 400 16px/24px var(--fonte-corpo); color: var(--q-suave); max-width: 64ch; overflow: hidden; text-overflow: ellipsis; }
.app-membro .q-page-head--sem-h1 .q-page-head__sub { margin-top: 0; }
.app-membro .q-page-head__acoes { display: flex; gap: 12px; }
@media (max-width: 899px) { .app-membro .q-page-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } }
@media (min-width: 900px) { .app-membro .q-page-head h1 { font-size: 32px; line-height: 40px; } }
.app-membro .q-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 24px; row-gap: 4px; }
.app-membro .q-sec-head h2 { font: 700 22px/28px var(--fonte-titulo); letter-spacing: -.02em; margin: 0; color: var(--q-tinta); }
.app-membro .q-sec-head__txt p { margin: 4px 0 0; font: 400 15px/22px var(--fonte-corpo); color: var(--q-suave); max-width: 64ch; }
.app-membro .q-sec-head__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 15px/1 var(--fonte-corpo); color: var(--q-prim); text-decoration: none; }
.app-membro .q-sec-head__link svg { width: 16px; height: 16px; }

/* ---------- Card ---------- */
.app-membro .q-card { position: relative; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; min-width: 0; margin: 0;
  padding: 24px; border-radius: 16px; border: 1px solid var(--q-borda); background: var(--q-sup); box-shadow: none; color: var(--q-texto); }
@media (max-width: 359px) { .app-membro .q-card { padding: 20px; } }
.app-membro .q-card > * { margin: 0; }
.app-membro .q-card__titulo { font: 600 17px/24px var(--fonte-titulo) !important; letter-spacing: -.01em; color: var(--q-tinta); margin: 0; }
.app-membro .q-card > .q-actions-wrap, .app-membro .q-card > .q-bloco { margin-top: 16px; } /* corpo → ActionBar = 24 (8 do gap + 16) */
.app-membro .q-card--noite { background: var(--q-noite); border-color: var(--q-noite); color: var(--q-noite-texto); }
.app-membro .q-card--noite .q-card__titulo { color: var(--q-noite-texto); }
.app-membro .q-card--destaque { background: var(--q-prim-100); border-color: var(--q-prim-200); }
.app-membro .q-card--aviso { background: var(--q-aviso-100); border-color: #F1D9A8; }
.app-membro .q-card--lista { padding: 8px 24px; }
.app-membro .q-card--lista > .q-card__titulo { padding-top: 16px; }
.app-membro .q-card--midia { padding: 0; overflow: hidden; gap: 0; }
.app-membro .q-card--midia .q-card__faixa { display: grid; place-items: center; height: 112px; background: var(--tinta-jogo, var(--q-prim-100)); border-bottom: 1px solid var(--q-borda); }
.app-membro .q-card--midia .q-card__faixa .jogo-mini { --mini: 96px; background: transparent; }
.app-membro .q-card--midia .q-card__corpo { display: flex; flex-direction: column; gap: 8px; padding: 24px; flex: 1; }
.app-membro .q-card--midia .q-card__corpo > .q-actions-wrap { margin-top: auto; padding-top: 16px; }
.app-membro .q-card--midia .q-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; }
.app-membro .q-grid--esticar > .q-card--midia { height: 100%; }
.app-membro .q-well { background: var(--q-sup-2); border-radius: 12px; padding: 16px; }
.app-membro .q-text { font: 400 16px/24px var(--fonte-corpo); color: var(--q-texto); max-width: 64ch; margin: 0; }
.app-membro .q-card--noite .q-text { color: var(--q-noite-texto); }
.app-membro .q-meta { font: 400 14px/20px var(--fonte-corpo); color: var(--q-suave); margin: 0; }
.app-membro .q-note { font: 400 13px/18px var(--fonte-corpo); color: var(--q-suave); margin: 0; }
.app-membro .q-card--noite .q-note, .app-membro .q-card--noite .q-meta { color: var(--q-noite-suave); }

/* ---------- StatTile / chip ---------- */
.app-membro .q-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-membro .q-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-membro .q-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-membro .q-stat { display: grid; align-content: space-between; gap: 4px; min-height: 72px; padding: 12px 16px; border-radius: 12px; background: var(--q-sup-2); min-width: 0; }
.app-membro .q-card--noite .q-stat { background: var(--q-noite-3); }
.app-membro .q-stat__rotulo { display: flex; align-items: center; gap: 4px; font: 600 12px/16px var(--fonte-corpo); letter-spacing: .06em; text-transform: uppercase; color: var(--q-suave); white-space: nowrap; }
.app-membro .q-card--noite .q-stat__rotulo { color: var(--q-noite-suave); }
.app-membro .q-stat__valor { font: 700 22px/28px var(--fonte-titulo); font-variant-numeric: tabular-nums; color: var(--q-tinta); white-space: nowrap; }
.app-membro .q-card--noite .q-stat__valor { color: var(--q-noite-texto); }
.app-membro .q-stat__valor small { margin-left: 4px; font: 600 14px/1 var(--fonte-corpo); color: var(--q-suave); }
@media (max-width: 380px) { .app-membro .q-stat { padding: 12px; } .app-membro .q-stat__valor { font-size: 20px; } }
.app-membro .q-stat__info { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; background: none; color: inherit; cursor: help; }
.app-membro .q-stat__info::after { content: ""; position: absolute; inset: -14px; }
.app-membro .q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-membro .q-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--q-noite-3); color: var(--q-noite-suave); font: 500 13px/1 var(--fonte-corpo); }
.app-membro .q-chip b { font-weight: 700; color: var(--q-noite-texto); }

/* ---------- ProgressBar / DomainRow ---------- */
.app-membro .q-bar { height: 8px; border-radius: 999px; background: var(--q-sup-2); overflow: hidden; }
.app-membro .q-card--noite .q-bar { background: var(--q-noite-3); }
.app-membro .q-bar i { display: block; height: 100%; width: var(--v); border-radius: 999px; background: var(--q-prim); transform-origin: left; animation: q-bar-in 500ms var(--ease-smooth-out) both; }
@keyframes q-bar-in { from { transform: scaleX(0); } }
.app-membro .q-domains { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .app-membro .q-domains { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.app-membro .q-domain__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.app-membro .q-domain__rot { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 600 15px/22px var(--fonte-corpo); color: var(--q-tinta); }
.app-membro .q-domain__val { font: 500 14px/20px var(--fonte-corpo); color: var(--q-suave); white-space: nowrap; }

/* ---------- ListRow ---------- */
.app-membro .q-rows { list-style: none; margin: 0; padding: 0; }
.app-membro .q-rows > :not(:first-child) { border-top: 1px solid var(--q-borda); }
.app-membro .q-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 0;
  box-sizing: border-box; background: none; border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.app-membro a.q-row, .app-membro button.q-row { cursor: pointer; }
.app-membro .q-row:not(:has(.q-row__lead)) { grid-template-columns: minmax(0, 1fr) auto; }
/* Estados da linha (regra única do app, pedido do dono 28/set): o fundo mora
   num ::before que passa 12 px do conteúdo dos dois lados (o texto não se
   mexe), raio 12. Hover só com mouse; no toque, o mesmo fundo enquanto
   pressiona. Com a linha em hover/foco, os divisores vizinhos somem para não
   cortar o fundo. O foco de teclado é o anel do DS no mesmo contorno. */
.app-membro .q-row::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: 12px; transition: background-color 150ms var(--ease-smooth-out), box-shadow 150ms var(--ease-smooth-out); }
.app-membro .q-card { isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  .app-membro a.q-row:hover::before, .app-membro button.q-row:hover::before, .app-membro .q-row--ajuste:hover::before { background: var(--q-sup-2); }
  .app-membro .q-rows > :has(> a.q-row:hover, > button.q-row:hover, > .q-row--ajuste:hover),
  .app-membro .q-rows > :has(> a.q-row:hover, > button.q-row:hover, > .q-row--ajuste:hover) + * { border-top-color: transparent; }
}
@media (hover: none), (pointer: coarse) {
  .app-membro a.q-row:active::before, .app-membro button.q-row:active::before, .app-membro .q-row--ajuste:active::before { background: var(--q-sup-2); transition-duration: 0ms; }
  .app-membro a.q-row::before, .app-membro button.q-row::before, .app-membro .q-row--ajuste::before { transition-duration: 100ms; }
}
.app-membro .q-row:focus-visible { outline: none; }
.app-membro .q-row:focus-visible::before { box-shadow: 0 0 0 2px var(--q-sup), 0 0 0 4px var(--q-prim); }
.app-membro .q-rows > :has(> .q-row:focus-visible), .app-membro .q-rows > :has(> .q-row:focus-visible) + * { border-top-color: transparent; }
.app-membro .q-rows > * { transition: border-color 150ms var(--ease-smooth-out); }
.app-membro .q-card--noite a.q-row:hover::before, .app-membro .q-card--noite button.q-row:hover::before, .app-membro .q-card--noite a.q-row:active::before { background: rgb(255 255 255 / 6%); }
.app-membro .q-row__lead { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tinta-jogo, var(--q-sup-2)); color: var(--q-prim); flex: none; }
.app-membro .q-row__lead svg { width: 24px; height: 24px; }
.app-membro .q-row__lead .jogo-mini { --mini: 40px; background: transparent; }
.app-membro .q-row__txt { display: grid; gap: 2px; min-width: 0; }
.app-membro .q-row__titulo { font: 600 16px/22px var(--fonte-corpo); color: var(--q-tinta); }
.app-membro .q-row__meta { font: 400 14px/20px var(--fonte-corpo); color: var(--q-suave); }
.app-membro .q-row__fim { display: inline-flex; align-items: center; gap: 8px; color: var(--q-apagado); }
.app-membro .q-row__fim svg { width: 20px; height: 20px; }
.app-membro .q-row--dado { grid-template-columns: auto minmax(0, 1fr) !important; min-height: 56px; margin: 0; }
.app-membro .q-row--dado dt { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/22px var(--fonte-corpo); color: var(--q-suave); }
.app-membro .q-row--dado dd { margin: 0; text-align: right; font: 600 15px/22px var(--fonte-corpo); color: var(--q-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-membro .q-row--ajuste { min-height: 56px; cursor: pointer; }
.app-membro .q-row--ajuste .q-row__meta { font-size: 13px; line-height: 18px; }
.app-membro .q-row--perigo .q-row__titulo { color: var(--q-erro); }
.app-membro .q-row--perigo .q-row__lead { background: #FBE9E6; color: var(--q-erro); }
.app-membro .q-card--noite .q-row__titulo { color: var(--q-noite-texto); }
.app-membro .q-card--noite .q-rows > * + * { border-color: rgb(255 255 255 / 10%); }

/* ---------- Button / ActionBar ---------- */
.app-membro .q-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; max-width: 360px; padding: 0 24px; border: 0; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: pointer; box-shadow: none; box-sizing: border-box;
  transition: transform var(--mov-instante) var(--mov-ease), background-color var(--mov-instante) var(--mov-ease), box-shadow var(--mov-instante) var(--mov-ease); }
.app-membro .q-b:active:not(:disabled) { transform: scale(var(--mov-escala)); }
.app-membro .q-b:focus-visible { outline: 2px solid var(--q-prim); outline-offset: 2px; }
.app-membro .q-b--sm { height: 40px; font: 600 14px/1 var(--fonte-titulo); padding: 0 16px; min-width: 0; }
.app-membro .q-b--md { height: 48px; font: 700 15px/1 var(--fonte-titulo); }
.app-membro .q-b--lg { height: 56px; font: 700 17px/1 var(--fonte-titulo); }
.app-membro .q-b--primario { background: var(--q-prim); color: #fff; }
@media (hover: hover) { .app-membro .q-b--primario:hover { background: var(--q-prim-hover, #2F29AE); } }
.app-membro .q-b--secundario { background: var(--q-sup); color: var(--q-tinta); box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); }
.app-membro .q-b--linha { background: var(--q-sup); color: var(--q-prim); box-shadow: inset 0 0 0 1.5px var(--q-prim-200); }
.app-membro .q-b--noite { background: var(--q-noite-texto); color: var(--q-noite); }
.app-membro .q-b--perigo { background: var(--q-sup); color: var(--q-erro); box-shadow: inset 0 0 0 1.5px #F1C9C1; }
/* confirmação de ação irreversível (cancelar, reembolso): cheio, vermelho */
.app-membro .q-b--perigo-cheio { background: var(--q-erro); color: #fff; }
.app-membro .q-b--texto { background: none; color: var(--q-prim); min-width: 0; padding: 0 8px; }
.app-membro .q-b:disabled { opacity: .5; cursor: default; }
/* hover de todas as variantes (antes só o primário tinha), só com mouse */
@media (hover: hover) and (pointer: fine) {
  .app-membro .q-b--secundario:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--q-tinta); }
  .app-membro .q-b--linha:not(:disabled):hover { background: var(--q-prim-100); }
  .app-membro .q-b--perigo:not(:disabled):hover { background: #FBE9E6; }
  .app-membro .q-b--perigo-cheio:not(:disabled):hover { background: #9A2F1E; }
  .app-membro .q-b--noite:not(:disabled):hover { background: #fff; }
  .app-membro .q-b--texto:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
}
.app-membro .q-card--noite .q-b:focus-visible, .app-membro [data-tema="noite"] .q-b:focus-visible { outline-color: var(--q-prim-noite); }
.app-membro .q-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.app-membro .q-actions__apoio { margin: 8px 0 0; font: 400 13px/18px var(--fonte-corpo); color: var(--q-suave); max-width: 64ch; }
.app-membro .q-card--midia .q-actions .q-b { width: 100%; max-width: none; }
@media (max-width: 899px) {
  .app-membro .q-b--lg { width: 100%; max-width: none; }
  .app-membro .q-actions:has(> :nth-child(2)) { flex-direction: column; align-items: stretch; }
  .app-membro .q-actions:has(> :nth-child(2)) .q-b { width: 100%; max-width: none; }
}

/* ---------- EmptyState ---------- */
.app-membro .q-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px; }
.app-membro .q-empty__ico { color: var(--q-apagado); }
.app-membro .q-empty__ico svg { width: 40px; height: 40px; stroke-width: 1.6; }
.app-membro .q-empty__titulo { margin: 0; font: 600 17px/24px var(--fonte-titulo); color: var(--q-tinta); }
.app-membro .q-empty__frase { margin: 0; font: 400 15px/22px var(--fonte-corpo); color: var(--q-suave); max-width: 40ch; }
.app-membro .q-empty > .q-b { margin-top: 8px; }
.app-membro .q-card--noite .q-empty__ico { color: var(--q-noite-suave); opacity: .7; }
.app-membro .q-card--noite .q-empty__titulo { color: var(--q-noite-texto); }
.app-membro .q-card--noite .q-empty__frase { color: var(--q-noite-suave); }
.app-membro .q-card:has(> .q-empty):not(:has(> .q-card__titulo)) { padding-block: 0; }
.app-membro .q-card:has(> .q-card__titulo) > .q-empty { padding: 24px 0 8px; }

/* ---------- Accordion (o painel e o chevron são os do .q-exp acima) ---------- */
.app-membro .q-acc { border: 1px solid var(--q-borda); border-radius: 16px; background: var(--q-sup); overflow: hidden; }
.app-membro .q-acc + .q-acc { margin-top: 8px; }
.app-membro .q-acc__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 16px 24px; border: 0; background: none; cursor: pointer;
  font: 600 16px/22px var(--fonte-corpo); color: var(--q-tinta); text-align: left; transition: background-color var(--mov-instante) var(--mov-ease); }
@media (hover: hover) and (pointer: fine) { .app-membro .q-acc__cab:hover { background: var(--q-sup-2); } }
.app-membro .q-acc__cab:active { background: var(--q-sup-2); }
.app-membro .q-acc__cab:focus-visible { outline: 2px solid var(--q-prim); outline-offset: -2px; border-radius: 16px; }
.app-membro .q-acc__chev { color: var(--q-suave); }
.app-membro .q-acc__corpo > * { max-width: 68ch; margin: 0 24px 16px; font: 400 15px/24px var(--fonte-corpo); color: var(--q-texto); }
.app-membro .q-acc__corpo > :first-child { margin-top: 4px; }
.app-membro .q-acc__corpo > :last-child { margin-bottom: 24px; }
.app-membro .q-acc__corpo ul { padding-left: 20px; box-sizing: border-box; }
.app-membro .q-acc__corpo .q-acc__div { max-width: 68ch; height: 1px; border: 0; background: var(--q-borda); }

@media (prefers-reduced-motion: reduce) {
  .app-membro .q-b, .app-membro .q-row::before, .app-membro .q-rows > *, .q-exp__chev, .q-exp__painel { transition: none; }
  .app-membro .q-bar i { animation: none; }
  .app-membro .q-b:active { transform: none; }
}

/* ---------- utilitários e acréscimos ao catálogo (pedidos dos forks) ---------- */
/* mesmo dado, um layout por largura (jogos: Card--midia no desktop, ListRow no celular) */
.app-membro .q-so-desktop { display: none !important; }
@media (min-width: 900px) { .app-membro .q-so-desktop { display: grid !important; } .app-membro .q-so-celular { display: none !important; } }
/* poço em destaque (comparação com o teste anterior) */
.app-membro .q-well--destaque { background: var(--q-prim-100); }
/* trailing com selo + chevron (Testes: "Concluído ›") */
.app-membro .q-row__fim .app-selo + svg { margin-left: 4px; }

/* cartões com layout interno próprio (herói do QI): a grade deles vence o flex do Card */
.app-membro .q-card.res-hero, .app-membro .q-card.inicio-heroi, .app-membro .q-card.fig { display: grid; gap: 24px; }
@media (min-width: 900px) { .app-membro .q-card.res-hero, .app-membro .q-card.inicio-heroi { gap: 32px; } }
/* situação da assinatura com a cor do estado */
.app-membro .q-row--dado dd.status-ativa { color: var(--q-ok); }
.app-membro .q-row--dado dd.status-cancelada { color: var(--q-erro); }
.app-membro .q-card .q-card__titulo, .app-membro .q-card--midia .q-card__titulo { margin: 0 !important; } /* o h3 do palco tinha margem 0 0 4px */
.app-membro .app-v3 .membro-palco .q-acc__corpo > * { max-width: 68ch; } /* vence o "p { max-width: none }" do palco: tudo numa largura de leitura */
/* botão-texto sobre o noite (herói): índigo claro, contraste AA */
.app-membro .q-card--noite .q-b--texto { color: var(--q-prim-noite); }
/* ActionBar em cartão estreito (certificado do Início): os botões dividem a
   linha quando cabem e ocupam a linha toda quando empilham, nunca estreitos */
.app-membro .q-card { container-type: inline-size; }
@container (max-width: 480px) {
  .app-membro .q-actions:has(> :nth-child(2)) > .q-b { flex: 1 1 140px; min-width: 0; max-width: none; }
}
/* M1: na pilha em coluna (<900) a base de 140px virava ALTURA; ali o botão
   tem a altura do tamanho (sm/md/lg), nunca a do flex */
@media (max-width: 899px) {
  .app-membro .q-actions:has(> :nth-child(2)) > .q-b { flex: 0 0 auto; }
}

/* ---------- Jogo: Card--midia e ListRow de jogo (docs/app-v3-jogos-mobile.md §1) ---------- */
/* recorde: com valor, troféu + --q-suave; sem valor, só o texto em --q-apagado */
.app-membro .q-rec { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--fonte-corpo); color: var(--q-suave); font-variant-numeric: tabular-nums; }
.app-membro .q-rec--vazio { color: var(--q-suave); font-weight: 400; }
.app-membro .q-rec__ico { width: 14px; height: 14px; color: var(--q-ouro); flex: none; display: block; }
/* ListRow de jogo: mín. 80, tile 56 com a miniatura de 44 (#1), meta
   "habilidade" + recorde na linha de baixo */
.app-membro .q-row--jogo { min-height: 80px; }
.app-membro .q-row--jogo .q-row__lead { width: 56px; height: 56px; }
.app-membro .q-row--jogo .q-row__lead .jogo-mini { --mini: 44px; }
/* a regra do ícone de linha (svg 24) encolhia a miniatura para ~20 (#1) */
.app-membro .q-row__lead .jogo-mini svg { width: 100%; height: 100%; }
.app-membro .q-jogo__meta { display: grid; gap: 2px; }
/* aba Jogos: <600 a lista; ≥600 a grade (2 compactas até 899, 2 até 1279, 3
   a partir de 1280). Os spans do cartão não valem aqui: a grade define as
   colunas. */
.app-membro .q-grid--jogos { display: none; }
@media (min-width: 600px) {
  .app-membro .q-grid--jogos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .app-membro .q-grid--jogos > .q-card { grid-column: auto; }
  .app-membro .q-jogos-lista { display: none; }
}
@media (min-width: 1280px) { .app-membro .q-grid--jogos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 600–899 (tablet, shell de celular): cartão compacto, faixa 96, miniatura
   80, sem descrição (#17) */
@media (min-width: 600px) and (max-width: 899px) {
  .app-membro .q-grid--jogos .q-card__faixa { height: 96px; }
  .app-membro .q-grid--jogos .q-card__faixa .jogo-mini { --mini: 80px; }
  .app-membro .q-grid--jogos .q-card__desc { display: none; }
  .app-membro .q-grid--jogos .q-card__corpo { padding: 16px; }
}

/* ---------- Conta: 8+4 (docs/app-v3-componentes.md §3.6) ---------- */
/* Bloco: subseção dentro de um cartão (h3 15/22), separada do anterior por
   uma linha. */
.app-membro .q-bloco { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--q-borda); }
.app-membro .q-bloco > * { margin: 0; }
.app-membro .q-bloco__titulo { font: 600 15px/22px var(--fonte-titulo); color: var(--q-tinta); }
.app-membro .q-bloco > .q-actions-wrap { margin-top: 8px; }
/* a coluna da esquerda empilha os seus cartões com o gap da grade; as
   listas não passam de ~720 quando a coluna é mais larga (empilhado, 900–1279) */
.app-membro .conta-principal { display: grid; gap: var(--c-grade); align-content: start; min-width: 0; }
.app-membro .conta-principal .q-rows, .app-membro .conta-lado .q-rows { max-width: 720px; }
@media (min-width: 900px) and (max-width: 1279px) {
  .app-membro .q-grid--conta > * { grid-column: span 12; }
}

/* Continuar (aba Jogos, §1.3): cartão horizontal onde há grade; no celular
   a partida sobe como 1ª linha em destaque, com o selo */
.app-membro .q-continuar { display: none; }
@media (min-width: 600px) {
  .app-membro .q-continuar { display: flex; margin-bottom: 24px; }
  .app-membro .q-continuar__linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .app-membro .q-continuar__tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--tinta-jogo, var(--q-prim-100)); flex: none; }
  .app-membro .q-continuar__tile .jogo-mini { --mini: 52px; background: transparent; }
  .app-membro .q-continuar__txt { flex: 1 1 200px; display: grid; gap: 4px; }
  .app-membro .q-continuar .q-actions-wrap { margin: 0; }
}
/* "Em andamento": sem fundo cheio (o fundo é do hover). O destaque é o selo +
   um anel primário na miniatura: não desloca nada, não disputa com o fundo
   do hover e aponta direto para o jogo. */
.app-membro .q-row--andamento .q-row__lead { box-shadow: 0 0 0 2px var(--q-sup), 0 0 0 4px var(--q-prim); }
.app-membro .q-selo { justify-self: start; align-self: start; width: max-content; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font: 600 13px/18px var(--fonte-corpo); }
.app-membro .q-selo--andamento { background: var(--q-sup); color: var(--q-prim); box-shadow: inset 0 0 0 1px var(--q-prim-200); }