/* Cobrança: /assinar, /conta/faturas e /admin/faturas.
 * Classes com prefixo cbr-. Cor só por token do app.css (nenhum hex aqui). */

/* ── vitrine de planos (/assinar) ─────────────────────────────────────────── */

.cbr-planos { align-items: stretch; }
.cbr-plano { display: flex; flex-direction: column; gap: 12px; }
.cbr-plano-nome { font: 650 18px/1.2 var(--titulo); }
.cbr-plano-preco { font: 700 34px/1 var(--titulo); letter-spacing: -.02em; }
.cbr-plano-preco small { margin-left: 4px; font: 500 13px/1 var(--corpo); color: var(--tinta-3); }
.cbr-plano-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  font-size: 13.5px; color: var(--tinta-2); }
.cbr-plano-itens li { position: relative; padding-left: 16px; }
.cbr-plano-itens li::before { content: ""; position: absolute; left: 2px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ouro-brilho); }
.cbr-plano .btn { margin-top: auto; }

/* honeypot: fora da tela para o olho humano, mas presente no HTML */
.cbr-oculto { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap; }

/* ── faturas do cliente (/conta/faturas) ─────────────────────────────────── */

.cbr-fatura { display: grid; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--linha-2); }
.cbr-fatura:first-of-type { border-top: 0; }
.cbr-fatura-cab { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.cbr-fatura-situacao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cbr-fatura-dados { display: flex; gap: 26px; flex-wrap: wrap; }
.cbr-fatura-dados > div { display: grid; gap: 2px; }
.cbr-fatura-dados .rotulo { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-3); }
.cbr-fatura-dados b { font: 650 15px/1.2 var(--titulo); }
.cbr-pix { max-width: 620px; }
.cbr-pix textarea { min-height: 62px; font-size: 12.5px; }
.cbr-pix .btn { justify-self: start; }
.cbr-fatura .aviso { margin: 0; }
.cbr-acoes-fatura { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── faturas do dono (/admin/faturas) ────────────────────────────────────── */

.cbr-resumo { margin-bottom: 16px; }
.cbr-tabela td { vertical-align: top; }
.cbr-tabela .cbr-conta { white-space: nowrap; }
.cbr-tabela details > summary { cursor: pointer; display: inline-block; list-style: none; }
.cbr-tabela details > summary::-webkit-details-marker { display: none; }
.cbr-tabela details[open] > summary { margin-bottom: 8px; }
.cbr-form-baixa { display: grid; gap: 8px; min-width: 260px; padding: 10px;
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--cartao-2); }
.cbr-form-baixa .campo input, .cbr-form-baixa .campo select { min-height: 36px; font-size: 13px; }
.cbr-form-baixa .btn { justify-self: start; }
.cbr-eventos { font-size: 12px; color: var(--tinta-3); max-width: 260px; }
.cbr-eventos ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; }
.cbr-eventos summary { cursor: pointer; color: var(--tinta-2); }
.cbr-aviso-pago { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

@media (max-width: 720px) {
  .cbr-fatura { padding: 14px 16px; }
  .cbr-fatura-dados { gap: 16px; }
  .cbr-form-baixa { min-width: 220px; }
  .cbr-eventos { max-width: 200px; }
}