/* ============================================================================
   AS PEÇAS DE RENTABILIDADE, EM HTML.

   Mesma estrutura da arte que ele mandou em imagem: cabeçalho escuro, o razão,
   a faixa do "investidos → liberado", a posição mensal e a barra do resultado.
   Em HTML e não em PNG por três motivos: o texto é lido pelo buscador e pelo
   leitor de tela, a tabela rola no celular em vez de virar borrão, e trocar um
   número não exige refazer arte nenhuma.
   As cores são as da casa, pelas variáveis que o site já define.
   ========================================================================= */

/* .ras NA FRENTE DOS <p>: a página declara .sec p { font-size:15px; color:var(--ink); margin-top:8px } (0,1,1), e qualquer classe sozinha (0,1,0) perde — as notas saíam em 15px e o selo do cabeçalho escuro saía em tinta escura. Dois nomes (0,2,0) resolvem. */
.ras { margin-top: 14px; }

.ra {
  background: var(--card, #fff);
  border: 1px solid var(--line, #e6e0da);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(20, 22, 30, .07);
  text-align: left;
  margin: 0 0 18px;
}

.ra__cab {
  background: var(--char, #2A2A30);
  border-left: 6px solid var(--red, #6E1423);
  padding: 14px 20px;
}
.ras .ra__eyebrow {
  margin: 0;
  font-weight: 800; font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: #D94A56;
}
.ra__tit { margin: 5px 0 0; font-size: 18px; font-weight: 800; color: #fff; line-height: 1.25; }

.ra__sec { padding: 16px 20px 4px; }
.ras .ra__secn {
  margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--gray, #6D6763);
  display: flex; align-items: center; gap: 8px;
}
.ra__secn span {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red, #6E1423); color: #fff;
  font-size: 11px; line-height: 20px; text-align: center;
}

/* O EXTRATO DOBRADO. O razão de um caso tem 25 lançamentos; quatro casos
   empilhados abertos são quatro páginas de tabela antes de a pessoa chegar no
   resultado. Então o resultado fica à vista e a prova fica a um toque — quem
   quiser conferir linha por linha abre, e quem não quiser não precisa rolar
   por cima dela. Fechado por padrão, e o <details> abre sozinho na impressão
   (regra no fim deste arquivo): no papel não há o que clicar. */
.ra__det { margin: 0; }
.ra__det > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 13px;
  border: 1px solid var(--line, #e6e0da);
  border-radius: 9px;
  background: var(--paper, #F6F3EF);
  font-size: 12.5px; font-weight: 700;
  color: var(--red, #6E1423);
  display: flex; align-items: center; gap: 8px;
}
.ra__det > summary::-webkit-details-marker { display: none; }
.ra__det > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform .15s ease;
}
.ra__det[open] > summary::before { transform: rotate(90deg); }
.ra__det[open] > summary {
  border-radius: 9px 9px 0 0;
  border-bottom: 0;
}
.ra__det > summary:hover { background: var(--red-s, #F2E8E4); }
.ra__det > summary:focus-visible { outline: 2px solid var(--red, #6E1423); outline-offset: 2px; }
.ra__det[open] .ra__rol { border-radius: 0 0 9px 9px; }

/* a tabela rola no celular em vez de espremer: seis colunas de razão não
   cabem em 375px, e encolher a fonte até caber é o mesmo que esconder */
.ra__rol { overflow-x: auto; border: 1px solid var(--line, #e6e0da); border-radius: 9px; }
/* A TABELA DA CORREÇÃO TEM ALTURA FIXA. Ela vai de 2 a 14 linhas conforme o
   caso, e era isso que fazia o carrossel esticar as peças curtas até a mais
   alta (~300px de cartão branco vazio embaixo). Seis linhas à vista e o resto
   rolando dentro: as quatro peças ficam quase da mesma altura, e a peça de 14
   meses continua inteira para quem quiser rolar. */
.ras .ra__rol--cor { max-height: 214px; overflow-y: auto; }
@media print { .ras .ra__rol--cor { max-height: none; overflow: visible; } }
.ra__tab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ra__tab th, .ra__tab td { padding: 6px 10px; white-space: nowrap; text-align: left; }
.ra__tab thead th {
  background: var(--paper, #F6F3EF); color: var(--gray, #6D6763);
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  border-bottom: 1px solid var(--line, #e6e0da);
}
.ra__tab tbody tr + tr td { border-top: 1px solid var(--line, #e6e0da); }
.ra__tab td { color: var(--ink, #2B2523); }
/* `ra__n`/`ra__b` e não `n`/`b`: a página tem `.sec .n`, que é o selo do
   número da seção, e ele pinta qualquer `.n` de vermelho com display
   inline-block. Nome curto dentro de página alheia é colisão marcada. */
.ra__tab .ra__n { text-align: right; }
.ra__tab .ra__b { font-weight: 800; }

.ra__tot {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid var(--line, #e6e0da); border-radius: 9px;
  background: var(--paper, #F6F3EF);
}
.ra__tot div { display: flex; flex-direction: column; }
.ra__tot dt { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gray, #6D6763); }
.ra__tot dd { margin: 2px 0 0; font-size: 19px; font-weight: 800; color: var(--red, #6E1423); font-variant-numeric: tabular-nums; }

.ras .ra__nota { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--mut, #8D857F); }

.ras .ra__faixa {
  margin: 14px 20px; padding: 13px 16px; border-radius: 10px;
  background: var(--char, #2A2A30); color: #fff; text-align: center;
}
/* `.ras` na frente não é enfeite: a página declara `.sec p b { color: var(--ink) }`
   num <style> no corpo, e um seletor de 0,1,2 batia o meu 0,1,1 — o branco da
   faixa virava tinta escura sobre fundo escuro, e a linha sumia. Dois nomes de
   classe (0,2,1) resolvem sem !important e sem tocar na regra da página, que
   está certa para o resto dela. */
.ras .ra__faixa b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #fff; }
.ras .ra__faixa span { display: block; margin-top: 3px; font-size: 11.5px; color: #b9b9c2; }

.ras .ra__res {
  margin: 6px 20px 0; padding: 12px 16px;
  border-left: 4px solid var(--red, #6E1423); border-radius: 0 9px 9px 0;
  background: var(--red-s, #F2E8E4);
}
.ras .ra__res b { font-size: 17px; color: var(--red-d, #58101C); }
.ras .ra__res span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--gray, #6D6763); }

.ras .ra__disc {
  margin: 10px 20px 18px; font-size: 11px; font-style: italic;
  line-height: 1.5; color: var(--mut, #8D857F);
}

@media (max-width: 560px) {
  .ra__tit { font-size: 16px; }
  .ra__sec { padding: 14px 14px 4px; }
  .ras .ra__faixa, .ras .ra__res { margin-left: 14px; margin-right: 14px; }
  .ras .ra__disc { margin-left: 14px; margin-right: 14px; }
  .ra__tot dd { font-size: 17px; }
  /* NO CELULAR A COLUNA QUE IMPORTA FICAVA FORA DA TELA: o extrato cortava em
     "Vl. crédito | Vl." e a correção em "IR | Rend…", e nada avisava que rola.
     Saem as colunas que não sustentam o argumento — vencimento (o pagamento
     está do lado) e o IR (zero em todas as linhas) —, e o resto cabe. */
  .ras .ra__tab th:nth-child(2), .ras .ra__tab td:nth-child(2) { display: none; }
  .ras .ra__rol--cor .ra__tab th:nth-child(2), .ras .ra__rol--cor .ra__tab td:nth-child(2) { display: table-cell; }
  .ras .ra__rol--cor .ra__tab th:nth-child(3), .ras .ra__rol--cor .ra__tab td:nth-child(3) { display: none; }
  /* e o "Vl. devido" do extrato (o pago está ao lado e é o que conta) */
  .ras .ra__tab th:nth-child(5), .ras .ra__tab td:nth-child(5) { display: none; }
  .ras .ra__tab th, .ras .ra__tab td { padding: 6px 7px; }
}

/* NO PAPEL não existe clique: o extrato abre sozinho, a rolagem lateral vira
   quebra de linha, e a peça não se parte no meio de uma tabela. */
@media print {
  .ra { break-inside: avoid; box-shadow: none; }
  .ra__det > summary { display: none; }
  .ra__det > .ra__rol { border-radius: 9px; }
  .ra__rol { overflow: visible; }
  .ra__tab th, .ra__tab td { white-space: normal; }
  .ra__cab, .ra__faixa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}