/* Financeiro - controle premium de mensalidades */
.finance-workspace {
  gap: 1rem;
}

/* [22.5 A/B] O CABEÇALHO: título 22px (o mesmo dos Contratos e dos Planos)
   e, na MESMA linha, à direita, a navegação de mês — seta · mês · seta, sem
   caixa nenhuma. A especificidade tripla vence o `.library-hero h2
   { !important }` do treinos.css e o empilhamento em coluna que o base.css
   impõe a todo `.library-hero.library-hero` abaixo de 30rem: aqui o mês fica
   ao lado do título em qualquer largura. */
.library-hero.financeiro-hero.financeiro-hero {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.library-hero.financeiro-hero.financeiro-hero h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.finance-mes-nav {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0;
  min-width: 0;
  margin-right: -0.5rem;
}

.finance-mes-seta {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--brand-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.finance-mes-seta svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finance-mes-seta:active {
  background: rgb(from var(--brand-soft) r g b / 0.12);
}

.finance-mes-nav-label {
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [22.5 C] "Nova cobrança": âmbar, a largura toda, logo abaixo do cabeçalho. */
.finance-workspace > .finance-nova-cobranca {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  border: 0;
  border-radius: 0.78rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: none;
}

/* Card-herói "Recebido": substitui a grade de 4 cards do topo por um único
   destaque com o total recebido no mês. */
.finance-recebido-hero {
  display: grid;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--borda);
  border-radius: 1.1rem;
  background: rgb(from var(--brand-soft) r g b / 0.05);
}

.frh-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
}

.frh-seal {
  display: inline-grid;
  width: clamp(3.1rem, 13vw, 3.6rem);
  height: clamp(3.1rem, 13vw, 3.6rem);
  place-items: center;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.frh-seal svg {
  width: 1.7rem;
  height: 1.7rem;
  stroke: currentColor;
}

.frh-info {
  min-width: 0;
}

.frh-label {
  display: block;
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.frh-value {
  display: block;
  margin-top: 0.12rem;
  color: var(--ink);
  font-size: var(--t-num-lg, 2.1rem);
  font-weight: var(--t-num-w, 800);
  line-height: 1.04;
}

/* [22.5 D] A BARRA (6px): quanto do faturado do mês já entrou. É o único
   elemento novo do cartão; o fio e as duas metades abaixo não mudam. */
.frh-barra {
  height: 6px;
  border-radius: 999px;
  background: rgb(from var(--brand) r g b / 0.16);
  overflow: hidden;
}

.frh-barra-cheia {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 240ms ease;
}

/* "de R$ 700,00 faturados no mês", com a variação contra o mês anterior na
   ponta direita. */
.frh-faturado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: -0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.frh-faturado-texto {
  min-width: 0;
}

.frh-delta {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 720;
  white-space: nowrap;
}

.frh-delta.is-up {
  color: var(--success);
}

.frh-delta.is-down {
  color: var(--danger);
}

/* Faixa dividida "A receber" / "Em atraso", separada do total por uma
   linha fina (hairline), reusando a mesma grade de 2 colunas. */
.frh-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.frh-split-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  margin: -0.35rem -0.4rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}

/* Filtro por toque (tarefa 9): tocar realça o rótulo/numero ativo e filtra a
   lista; tocar de novo (ou "Ver todas") limpa. Mesmo tom de --brand/--danger
   já usado nos pontos, sem cor nova. */
.frh-split-item.is-active {
  background: rgb(from var(--brand-soft) r g b / 0.1);
}

.frh-split-item.is-active .frh-split-label {
  color: var(--ink);
}

.frh-split-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--brand);
}

.frh-split-dot.is-danger {
  background: var(--danger);
}

.frh-split-info {
  display: grid;
  min-width: 0;
}

.frh-split-info strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.18;
}

.frh-split-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.frh-split-sub {
  color: var(--muted);
  font-size: 0.7rem;
}

.finance-month-panel,
.finance-list-panel {
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

/* Painel do mes em COLUNA UNICA: titulo em cima e, abaixo, o corpo
   (grafico + KPIs) ocupando a largura toda. Sobrepoe uma regra legada de
   2 colunas no monolito styles.css (.finance-month-panel com
   grid-template-columns dentro de @media min-width:58rem) que espremia o
   grafico de barras numa faixa estreita. */
.finance-month-panel {
  grid-template-columns: 1fr;
}

.finance-record-amount span,
.finance-record-date span {
  color: var(--brand-strong);
}

.finance-record-amount svg,
.finance-record-date svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
}

/* [22.5 B] A navegação de mês em caixas (.finance-month-nav) saiu daqui:
   ela mora na linha do título (.finance-mes-nav, no topo deste arquivo). */

/* [22.5 F] O corpo do painel é só o gráfico — coluna única (a segunda
   coluna, dos KPIs que já não existem, sobrava vazia e espremia o desenho). */
.finance-month-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: stretch;
}

/* [22.5 F] A caixa com borda em volta do gráfico saiu: o desenho fica solto
   dentro do cartão. */
.finance-chart {
  min-height: 13rem;
  padding: 0.5rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.finance-chart svg {
  width: 100%;
  height: 11.5rem;
  overflow: visible;
}

.finance-chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

/* A linha pontilhada do mês mais alto, com o valor no canto esquerdo. */
.finance-chart-teto {
  fill: none;
  stroke: rgb(from var(--brand) r g b / 0.45);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}

.finance-chart-teto-valor {
  fill: var(--muted);
  stroke: none;
  font-size: 17px;
  font-weight: 700;
}

/* O valor sobre um ponto: só o do mês em exibição aparece de saída; tocar
   noutro ponto mostra o daquele mês (e esconde o anterior). */
.finance-chart-valor {
  display: none;
  fill: var(--ink);
  stroke: none;
  font-size: 19px;
  font-weight: 800;
  pointer-events: none;
}

.finance-chart-valor.is-visible {
  display: block;
}

/* Área de toque generosa em volta de cada ponto (o ponto em si tem 3px). */
.finance-chart-toque {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}

.finance-chart-area {
  fill: url(#financeChartGradient);
  stroke: none;
}

.finance-chart-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Os pontos: o do mês em exibição é cheio; os outros, vazados. */
.finance-chart-dot {
  fill: var(--card);
  stroke: var(--brand);
  stroke-width: 1.6;
  pointer-events: none;
}

.finance-chart-dot.is-active {
  fill: var(--brand);
  stroke: var(--brand);
}

.finance-chart-labels {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-align: center;
}

.finance-chart-labels .is-active {
  color: var(--brand);
}

.finance-record-list {
  display: grid;
  gap: 0;
}

.finance-record-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(8rem, 0.65fr) minmax(8.5rem, 0.65fr) minmax(12rem, auto);
  align-items: center;
  gap: 0.75rem;
  padding: 0.76rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

.finance-record-card.is-paid {
  border-color: rgba(72, 215, 100, 0.24);
}

/* Aguardando: cobrança de ativação em trânsito no Asaas (azul/info). */
.finance-record-card.is-awaiting {
  border-color: rgba(58, 134, 255, 0.28);
}

.finance-record-card.is-overdue {
  border-color: rgba(255, 90, 79, 0.28);
}

.finance-record-card .entity-avatar {
  width: 3.35rem;
  height: 3.35rem;
  border-color: rgb(from var(--brand-soft) r g b / 0.3);
}

.finance-record-student,
.finance-record-amount,
.finance-record-date,
.finance-record-actions {
  min-width: 0;
}

.finance-record-student {
  display: grid;
  gap: 0.12rem;
}

.finance-record-student strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
}

.finance-record-student span,
.finance-record-student small,
.finance-record-amount small,
.finance-record-date small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.18;
}

.finance-record-amount,
.finance-record-date {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.08rem 0.48rem;
  align-items: center;
}

.finance-record-amount span,
.finance-record-date span {
  grid-row: span 2;
}

.finance-record-amount strong,
.finance-record-date strong {
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.16;
}

.finance-record-actions {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.42rem;
  align-items: center;
  justify-content: end;
}

/* ── Item de mensalidade (Seção 7) ─────────────────────────────────────────
   LINHA enxuta — sem o card pesado (.aluno-card): nenhuma borda/fundo/raio
   próprios, só a pílula .aluno-card-status reusada (mesmos tons semânticos do
   aluno). Itens da lista são separados por hairline (var(--borda)); a linha
   inteira é tocável (abre o bottom-sheet de ações, Seção 8). Layout: avatar |
   nome+sub (cresce e ganha o espaço sobrando) | valor+pílula empilhados à
   direita — empilhar em vez de tudo numa linha só é o que devolve espaço
   horizontal pro nome (hierarquia: nome > valor > plano/status). */
.finance-mensalidade-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.1rem;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.finance-record-list .finance-mensalidade-row:last-child {
  border-bottom: 0;
}

/* [22.6 C] As iniciais: 40px, todas no MESMO âmbar fraco (sem cor por
   aluno — o !important vence o estilo inline que avatarHtml escreve na foto
   não, nas iniciais sim); o aluno removido fica cinza. */
.finance-mensalidade-row .finance-mensalidade-avatar {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: rgb(from var(--brand) r g b / 0.14) !important;
  color: var(--brand-strong) !important;
  font-size: 0.8rem;
  font-weight: 800;
}

.finance-mensalidade-row .finance-mensalidade-avatar.is-removido {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--muted) !important;
}

.finance-mensalidade-row:active {
  background: rgb(from var(--brand-soft) r g b / 0.06);
}

.finance-mensalidade-info {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

/* Nome nunca corta: quebra pra segunda linha quando não cabe. */
.finance-mensalidade-name {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* Sub-linha: no Financeiro do professor é só a data ([22.6 B]); nas
   cobranças do Corefy ainda vem "plano · data" — o plano é o único que encolhe
   (ellipsis só quando realmente falta espaço); a data não encolhe nem corta. */
.finance-mensalidade-sub {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
  color: var(--txt2);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.15;
}

.finance-mensalidade-plan {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-mensalidade-due {
  flex: 0 0 auto;
  white-space: nowrap;
}

.finance-mensalidade-row.is-overdue .finance-mensalidade-sub {
  color: var(--danger);
}

.finance-mensalidade-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.32rem;
  flex: 0 0 auto;
}

.finance-mensalidade-value {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.finance-detail,
.finance-receipt {
  display: grid;
  gap: 0.9rem;
}

.finance-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.finance-detail-hero h3,
.finance-receipt-card h3 {
  margin: 0.1rem 0;
  color: var(--ink);
  font-size: 1.5rem;
}

.finance-detail-hero p {
  margin: 0;
  color: var(--muted);
}

.finance-receipt-card {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

.finance-receipt-grid {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: 0.42rem 0.75rem;
}

.finance-receipt-grid span {
  color: var(--muted);
}

.finance-receipt-grid strong {
  color: var(--ink);
}

.finance-receipt-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 68rem) {
  .finance-month-body {
    grid-template-columns: 1fr;
  }

  .finance-record-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .finance-record-amount,
  .finance-record-date,
  .finance-record-actions {
    grid-column: 2 / -1;
  }

  .finance-record-actions {
    justify-content: start;
  }
}

@media (max-width: 57.99rem) {
  .finance-hero {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .finance-record-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .finance-record-amount,
  .finance-record-date,
  .finance-record-actions {
    grid-column: 1 / -1;
  }

  .finance-record-actions {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .finance-detail-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .finance-detail-hero .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 29.99rem) {
  .finance-chart {
    min-height: 12.5rem;
  }

  .finance-chart svg {
    height: 9.5rem;
  }
}

@media (max-width: 22.5rem) {
  .finance-hero {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .finance-hero .btn-action-header {
    width: 100% !important;
    justify-content: center;
    padding-inline: 0.75rem;
  }
}

/* [F1.5] .finance-demo-banner saiu junto com os dados de exemplo do
   Financeiro: nao existe mais tela que mostre cobranca ficticia. */

/* ── Sheet: Registrar pagamento ─────────────────────────────────────────── */
.pf-form {
  padding: 1rem 1.1rem 1.5rem;
}

.pf-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.38rem;
}

.pf-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding-top: 0.25rem;
}

/* ── Sheet: Detalhe da mensalidade ──────────────────────────────────────── */
.pd-content {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1.5rem;
}

.pd-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.pd-hero strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
}

.pd-hero span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.pd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.pd-grid article {
  display: grid;
  gap: 0.18rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.03);
}

.pd-grid article span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.18;
}

.pd-grid article strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.pd-section-title {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pd-history {
  display: grid;
  gap: 0.1rem;
  padding: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
}

.pd-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pd-history-row:last-child {
  border-bottom: 0;
}

.pd-history-month {
  color: var(--ink);
  font-size: 0.88rem;
}

.pd-history-date {
  color: var(--muted);
  font-size: 0.75rem;
}

.pd-history-row strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.pd-actions {
  display: grid;
  gap: 0.55rem;
}

.pd-actions .primary-action,
.pd-actions .secondary-action {
  width: 100%;
}

.pd-actions .secondary-action[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Sheet: Ações da mensalidade — cresce com o conteúdo ──────────────────
   O sheet reusa .aluno-acoes-panel (alunos.css), que já cresce com o
   conteúdo (sem altura fixa) e rola por dentro depois de um teto. Aqui
   escalamos esse teto e o respiro para o financeiro, que ganha mais seções
   (identificação, status, fidelidade, histórico) que o sheet de ações do
   aluno. Handle e botão X vêm do markup compartilhado (.sheet-handle +
   .aluno-acoes-close), nada a redefinir aqui. */
#financeAcoesSheet .aluno-acoes-panel {
  max-height: 94dvh;
  gap: 0.9rem;
  padding-bottom: calc(1.5rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ── Sheet: Ações da mensalidade — identificação no topo ─────────────────
   Extensão do .aluno-acoes-* (ver alunos.css): perfil VERTICAL centralizado
   (foto grande com anel --brand → nome → plano → pílula do valor) + fidelidade
   (quando houver), separados da lista de ações por uma hairline no rodapé
   do bloco (não mais no id sozinho, pra fidelidade caber dentro). */
.finance-acoes-top {
  padding: 0.3rem 0.1rem 1rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid var(--line);
}

.finance-acoes-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}

.finance-acoes-id:empty {
  display: none;
}

/* Extra: foto+nome são um botão que abre a ficha do aluno. Sem chrome de
   botão — herda o empilhamento centrado do .finance-acoes-id (os seletores
   descendentes de avatar/copy seguem valendo através dele). */
.finance-acoes-perfil-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.finance-acoes-perfil-btn:active {
  opacity: 0.72;
}

/* Fidelidade: linha discreta "até MM/AAAA" + "X de Y pagas" e uma barrinha
   fina na cor --brand mostrando o progresso. Só aparece quando o plano do
   aluno tem fidelidade (bloco fica vazio/oculto quando não tem). */
.finance-acoes-fidelidade {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.75rem;
}

.finance-acoes-fidelidade:empty {
  display: none;
  margin-top: 0;
}

.finance-acoes-fidelidade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.finance-acoes-fidelidade-bar {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(from var(--brand-soft) r g b / 0.18);
}

.finance-acoes-fidelidade-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

/* Faixa de status (Seção 7 do tarefas.txt): faixa colorida semântica no
   mesmo desenho de .aluno-card-status (alunos.css), mas success/danger usam
   var(--success)/var(--danger) — os tokens que o resto de financeiro.css já
   usa (ex.: linhas 112-116, 324-330) — em vez dos hex fixos que
   .aluno-card-status ainda tem, pra a faixa acompanhar o tema. Fundo suave +
   hairline no tom, rótulo forte com o pontinho (.aluno-status-dot,
   background:currentColor herda o tom) e a sub-linha "Mensalidade de <mês> ·
   vence/venceu/pago em DD/MM (via <forma>)" embaixo. O tom neutro (Aguardando
   só-gerada) é o próprio bloco base. */
.finance-acoes-status {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.75rem;
  padding: 0.62rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
}

.finance-acoes-status:empty {
  display: none;
  margin-top: 0;
}

.finance-acoes-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
}

.finance-acoes-status--success {
  border-color: rgb(from var(--success) r g b / 0.34);
  background: rgb(from var(--success) r g b / 0.12);
}

.finance-acoes-status--success .finance-acoes-status-label {
  color: var(--success);
}

.finance-acoes-status--success .aluno-status-dot {
  box-shadow: 0 0 0 3px rgb(from var(--success) r g b / 0.16);
}

.finance-acoes-status--warning {
  border-color: rgba(var(--brand-rgb), 0.34);
  background: rgba(var(--brand-rgb), 0.12);
}

.finance-acoes-status--warning .finance-acoes-status-label {
  color: var(--dourado);
}

.finance-acoes-status--warning .aluno-status-dot {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

.finance-acoes-status--danger {
  border-color: rgb(from var(--danger) r g b / 0.32);
  background: rgb(from var(--danger) r g b / 0.1);
}

.finance-acoes-status--danger .finance-acoes-status-label {
  color: var(--danger);
}

.finance-acoes-status--danger .aluno-status-dot {
  box-shadow: 0 0 0 3px rgb(from var(--danger) r g b / 0.16);
}

.finance-acoes-status-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Histórico recolhível (Seção 8): <details>/<summary> nativo, escopado aqui
   em financeiro.css (o painel "Filtrar" de Contratos, que usava o mesmo
   padrão, saiu no [21.1]). Começa fechado por padrão (sem o atributo
   "open") e a seta gira via o .filter-chevron de contratos.css. */
/* Lista de ações com um pouco mais de ar entre os botões que no sheet do
   aluno (gap 0.4rem em alunos.css). */
#financeAcoesSheet .aluno-acoes-list {
  gap: 0.5rem;
}

.finance-acoes-historico {
  margin-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.finance-acoes-historico-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.1rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.finance-acoes-historico-toggle::-webkit-details-marker {
  display: none;
}

.finance-acoes-historico-toggle .filter-chevron {
  margin-left: auto;
}

/* Contador do título recolhido: tom apagado (o desenho da folha da
   cobrança, abaixo, o leva para a direita). */
.finance-acoes-historico-count {
  color: var(--muted);
  font-weight: 600;
}

.finance-acoes-historico[open] .filter-chevron {
  transform: rotate(180deg);
}

.finance-acoes-historico-list {
  display: grid;
  padding-bottom: 0.3rem;
}

.finance-acoes-historico-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.1rem;
  border-top: 1px solid var(--line);
}

.finance-acoes-historico-item:first-child {
  border-top: none;
}

.finance-acoes-historico-info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.finance-acoes-historico-info strong {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.finance-acoes-historico-info span {
  color: var(--muted);
  font-size: 0.78rem;
}

.finance-acoes-historico-empty {
  padding: 0.3rem 0.1rem 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Foto grande (~78px) com anel na cor da marca; sobrepõe o flex-basis fixo
   do .entity-avatar (base.css) que valeria como altura no eixo de coluna. */
.finance-acoes-id .entity-avatar {
  flex: 0 0 auto;
  width: 4.9rem;
  height: 4.9rem;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgb(from var(--brand-soft) r g b / 0.16);
  font-size: 1.35rem;
}

/* Sem foto (Seção 4): iniciais centralizadas num tom da marca — fundo suave
   derivado de --brand-soft e texto em --brand — no lugar do fundo neutro
   herdado de .entity-avatar (base.css). */
.finance-acoes-id .finance-acoes-avatar-iniciais {
  background: rgb(from var(--brand-soft) r g b / 0.18);
  color: var(--brand);
}

.finance-acoes-id-copy {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 0;
  max-width: 100%;
}

.finance-acoes-id-copy strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-acoes-id-copy span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Valor da mensalidade em pílula centralizada: "R$ 200" + "/mês" menor. */
.finance-acoes-id-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  margin-top: 0.15rem;
  padding: 0.32rem 0.95rem;
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.45);
  border-radius: 999px;
  background: rgb(from var(--brand-soft) r g b / 0.12);
}

.finance-acoes-id-value strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.finance-acoes-id-value span {
  color: var(--muted);
  font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   [22.7] A FOLHA DA COBRANÇA (a folha de ações do professor). A casca
   `.is-folha-da-cobranca` entra no #financeAcoesSheet só quando é o
   professor abrindo uma mensalidade; a folha do Corefy usa os mesmos nós
   sem ela, e segue com o desenho de cima.
   ═══════════════════════════════════════════════════════════════════════ */
/* A) A cabeça em LINHA: 44px de iniciais/foto, o nome 20px/700 e, abaixo,
   "Plano · R$/mês" 13px apagado. O anel e o círculo gigante saíram. */
.is-folha-da-cobranca .finance-acoes-id,
.is-folha-da-cobranca .finance-acoes-perfil-btn {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}

.is-folha-da-cobranca .finance-acoes-id .entity-avatar {
  width: 44px;
  height: 44px;
  border: 0;
  box-shadow: none;
  font-size: 0.9rem;
}

.is-folha-da-cobranca .finance-acoes-id-copy {
  justify-items: start;
  gap: 0.1rem;
  flex: 1 1 auto;
}

.is-folha-da-cobranca .finance-acoes-id-copy strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.is-folha-da-cobranca .finance-acoes-id-copy span {
  color: var(--dim);
  font-size: 13px;
}

/* B) Os dados como LINHAS de 52px com fio (o componente .det-linhas da
   ficha do aluno); a faixa colorida de status saiu, o selo mora na linha
   "situação". */
.is-folha-da-cobranca .finance-acoes-dados {
  margin-top: 0.6rem;
}

.is-folha-da-cobranca .finance-acoes-dados .det-linha {
  min-height: 52px;
}

.is-folha-da-cobranca .finance-acoes-dados .det-linha:first-child {
  border-top: 1px solid var(--borda);
}

.is-folha-da-cobranca .finance-acoes-top {
  padding-bottom: 0;
  border-bottom: 0;
}

/* C/D) UM âmbar (52px, largura toda) e as outras ações como linhas de 60px
   com ícone — o componente das folhas do [12.2]. Com um âmbar na folha, os
   ícones das linhas não vêm na cor do tema. */
.is-folha-da-cobranca #financeAcoesList {
  display: grid;
  gap: 0.35rem;
}

.is-folha-da-cobranca #financeAcoesList .det-principal {
  margin-top: 0.25rem;
}

.is-folha-da-cobranca .acao-icone {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* E) O histórico: rótulo de seção em caixa alta, a contagem à direita. */
#financeAcoesSheet .finance-acoes-historico-rotulo {
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#financeAcoesSheet .finance-acoes-historico-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

#financeAcoesSheet .finance-acoes-historico-toggle .filter-chevron {
  margin-left: 0;
}

/* Ação em destaque (Seção 6): mesmos tokens do .primary-action (brand cheio),
   dentro do formato de linha do .aluno-acoes-item — só na ação principal de
   cada status (Cobrar pelo WhatsApp / Pagar agora / Pagar para ativar). */
.aluno-acoes-item.is-primary {
  border-color: transparent;
  background: var(--brand);
  color: var(--brand-ink);
}

.aluno-acoes-item.is-primary svg {
  color: var(--brand-ink);
}

.aluno-acoes-item.is-primary:hover {
  background: var(--brand);
  border-color: transparent;
  opacity: 0.92;
}

/* Registrar pagamento manual (Seção 9): seletor inline que substitui a lista
   de ações do sheet — chips de forma reusados do form de pagamento
   (.radio-chip/.pf-method-chips) + data (padrão hoje) e Voltar/Confirmar com
   os botões padrão do app. Nada de cor nova. */
.finance-acoes-manual {
  display: grid;
  gap: 0.95rem;
}

/* Item 5: com o topo do sheet (perfil + faixa de fidelidade + status) mais o
   histórico recolhido acima/abaixo do formulário, o painel (max-height: 88dvh
   herdado de .aluno-acoes-panel) já fica no limite em contas com fidelidade —
   o histórico recolhido chega a cortar/ficar colado na borda inferior. Sobe
   o teto só nesta subtela (:has, escopado a #financeAcoesSheet — não mexe no
   sheet de ações do aluno nem no sheet de ações padrão da mensalidade) pra
   tudo, incluindo a nota de rodapé, caber com folga. */
#financeAcoesSheet .aluno-acoes-panel:has(.finance-acoes-manual) {
  max-height: 96dvh;
}

/* Item 4: mais respiro entre o rótulo do campo ("Forma de pagamento" /
   "Data do pagamento") e o grupo de chips abaixo dele. */
.finance-acoes-manual .field {
  gap: 0.55rem;
}

/* Item 4: chips de forma de pagamento com ícone próprio, sempre lado a lado
   (sem quebrar linha) e largura igual entre os três. O destaque do selecionado
   (borda + fundo var(--brand)) já vem do .radio-chip base — aqui só o layout
   do ícone + texto dentro do chip. */
.finance-acoes-manual .pf-method-chips {
  flex-wrap: nowrap;
}

.finance-acoes-manual .finance-method-chip {
  flex: 1 1 0;
  min-width: 0;
}

.finance-acoes-manual .finance-method-chip span {
  position: relative;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
}

.finance-acoes-manual .finance-method-chip svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

/* Item 5: chips de data (Hoje/Ontem/Outra), mesmo layout dos chips de forma
   acima — lado a lado, largura igual. O input type="date" (#financeManualDate)
   fica oculto (atributo hidden) e só aparece quando "Outra" é marcado; quando
   aparece, ganha o mesmo espaçamento de um campo normal do sheet.
   Item 4: .finance-date-chips não herdava display/gap de lugar nenhum
   (.chip-group não é uma classe estilizada) — os chips ficavam colados,
   sem nenhum respiro entre si. Declarando o flex aqui, com gap próprio. */
.finance-acoes-manual .finance-date-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
}

.finance-acoes-manual .finance-date-chip {
  flex: 1 1 0;
  min-width: 0;
}

.finance-acoes-manual .finance-date-chip span {
  position: relative;
  justify-content: center;
  width: 100%;
}

/* Item 7: micro-check no chip selecionado (forma e data) — reforça a escolha
   além do destaque de cor já herdado do .radio-chip base. Selo discreto no
   canto superior direito do chip, mesmo par --brand/--brand-ink usado nos
   ícones "is-primary" desta folha, com anel --card só pra separar do fundo. */
.finance-acoes-manual .finance-method-chip input:checked + span::after,
.finance-acoes-manual .finance-date-chip input:checked + span::after {
  content: "\2713";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid var(--card);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
}

.finance-acoes-manual .finance-date-custom {
  margin-top: 0.55rem;
}

/* Item 8: sem margin-top extra — o grid gap de .finance-acoes-manual (0.95rem)
   já separa esta linha da anterior; a margem redundante quebrava o ritmo
   uniforme entre as seções (forma/data/ações/nota). */
.finance-acoes-manual-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.finance-acoes-manual-actions .primary-action,
.finance-acoes-manual-actions .secondary-action {
  width: 100%;
  justify-content: center;
}

/* Item 6: "Confirmar pagamento" usa a cor positiva/verde do app (var(--success)),
   pra se distinguir do dourado padrão do .primary-action e reforçar a ação de
   dar baixa na mensalidade. Item 3: var(--success) puro (#48d764) é claro
   demais para texto branco (~1.9:1 de contraste) — o fundo usa uma variação
   mais escura do mesmo verde (color-mix, sem cor fixa nova) pra passar de
   4.5:1 com o texto branco; o glow do box-shadow mantém o verde original.
   Item 5: sem min-height/line-height próprios — herda o mesmo tamanho/
   formato/raio do .primary-action padrão (igual ao botão Voltar ao lado),
   só muda fundo, conteúdo (ícone + texto) e contraste. */
.finance-acoes-manual-confirm {
  background: color-mix(in srgb, var(--success) 55%, black);
  color: #fff;
  box-shadow: 0 12px 24px rgb(from var(--success) r g b / 0.22);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.finance-acoes-manual-confirm-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.finance-acoes-manual-confirm-label {
  font-size: inherit;
  font-weight: inherit;
}

/* Item 6: nota vira um selo discreto — ícone (cor --brand) + texto, com leve
   destaque (mesmo fundo/borda sutil já usado em .cobrar-msg/.pd-grid article
   nesta folha), pra não ficar um texto cinza perdido no fim da tela. */
.finance-acoes-manual-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.finance-acoes-manual-note svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--brand);
}

/* ── Pop-up: Gerar próxima cobrança (item 9, fase 5A-fechamento) ──────────
   CENTRAL em qualquer largura (mobile e desktop) — o botão já vem de dentro
   do sheet de ações da mensalidade (financeAcoesSheet, z-index 1090), então
   um bottom-sheet aqui empilharia sheet-dentro-de-sheet; o painel fica ACIMA
   dele (financeAcoesSheet continua aberto atrás). Reusa a mesma animação
   fade+scale do modal genérico (modal-backdrop-in/out, modal-panel-in/out,
   base.css) e, no corpo, o mesmo miolo do "Registrar pagamento manual"
   (.finance-acoes-manual*) — chip de data, ações Cancelar/Confirmar e nota
   de rodapé, já com o verde de var(--success) no confirmar. Só o invólucro
   (fundo #141519) é novo, conforme o visual aprovado. */
.next-charge-popup {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.next-charge-popup[hidden] { display: none; }

.next-charge-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
}

.next-charge-popup.is-open .next-charge-popup-backdrop {
  animation: modal-backdrop-in 200ms ease both;
}

.next-charge-popup.is-closing .next-charge-popup-backdrop {
  animation: modal-backdrop-out 160ms ease both;
}

.next-charge-popup-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  max-height: 88dvh;
  overflow-y: auto;
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.1rem calc(1.25rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  border-radius: 20px;
  background: #141519;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  scrollbar-width: none;
}

.next-charge-popup-panel::-webkit-scrollbar { display: none; }

.next-charge-popup.is-open .next-charge-popup-panel {
  animation: modal-panel-in 220ms cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

.next-charge-popup.is-closing .next-charge-popup-panel {
  animation: modal-panel-out 160ms ease both;
}

.next-charge-popup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.next-charge-popup-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.18rem);
  font-weight: 700;
  line-height: 1.1;
}

/* ── Sheet: Cobrar ──────────────────────────────────────────────────────── */
.cobrar-content {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1.5rem;
}

.cobrar-student {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.cobrar-student strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.cobrar-student span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.cobrar-msg {
  width: 100%;
  min-height: 7rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.cobrar-msg:focus-visible {
  outline: none;
  border-color: rgb(from var(--brand-soft) r g b / 0.5);
  background: rgb(from var(--brand-soft) r g b / 0.04);
  box-shadow: 0 0 0 3px rgb(from var(--brand-soft) r g b / 0.3);
}

.cobrar-actions {
  display: grid;
  gap: 0.55rem;
}

.cobrar-wa-btn,
.cobrar-email-btn {
  width: 100%;
  justify-content: center;
  gap: 0.6rem;
}

.cobrar-wa-btn svg,
.cobrar-email-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.cobrar-no-contact {
  padding: 0.72rem;
  border-radius: 0.72rem;
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
  font-size: 0.82rem;
  text-align: center;
}

/* [22.5 E] Cabeça do cartão "Recebido por mês": título à esquerda, o
   período ("últimos 6 meses") à direita. */
.finance-visao-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.finance-visao-periodo {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Item 5: empty state da lista (sem mensalidade no mes). Texto discreto,
   mesmos tokens de cor/fonte. */
.finance-list-empty {
  padding: 1.1rem 0.5rem;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}