vira um card empilhado.
Os | são dispostos via CSS Grid, e o thead some. */
.ap-class-body { overflow-x: visible; padding: 12px 12px 16px; }
.ap-table { display: block; min-width: 0; width: 100%; }
.ap-table thead { display: none; }
.ap-table tbody {
display: flex;
flex-direction: column;
gap: 10px;
}
.ap-table tr {
position: relative; /* anchor para o checkbox absolute */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
background: #fff;
border: 0.5px solid var(--private-border);
border-radius: 16px;
padding: 14px;
transition: transform .2s var(--private-ease), box-shadow .2s var(--private-ease);
}
.ap-table tr:hover { transform: none; box-shadow: var(--private-shadow-sm); }
.ap-table td,
.ap-table tbody tr + tr td {
display: block;
padding: 0;
border: none; /* zera border-top que separa rows na desktop */
text-align: left;
background: transparent !important;
white-space: normal;
}
/* Checkbox de seleção: posicionado À ESQUERDA DO NOME, com o nome
começando depois dele. Usa absolute pra não ocupar célula do grid.
!important zera o padding do td desktop (18px+6px) que empurraria
o filho pra dentro do nome. */
.ap-table .ap-td-select {
position: absolute;
top: 14px;
left: 12px;
z-index: 1;
width: auto !important;
padding: 0 !important;
margin: 0;
}
.ap-table .ap-td-select .ap-row-select { width: 18px; height: 18px; }
/* Nome do fundo: full-width, com padding-left abrindo espaço pro checkbox
(12 left + 18 width + 6 gap = 36px). Inclui divisória embaixo separando
do bloco de retornos. !important pra ganhar do padding base do desktop. */
.ap-table .ap-fund-cell {
grid-column: 1 / -1;
padding: 0 0 10px 36px !important;
min-width: 0 !important;
border-bottom: 0.5px solid var(--private-divider);
}
.ap-table .ap-fund-name { font-size: 14px; }
.ap-table .ap-fund-cnpj { font-size: 11px; }
.ap-table .ap-fund-meta { gap: 6px; flex-wrap: wrap; }
.ap-table .ap-fund-meta .ap-fund-prazo { font-size: 11px; }
.ap-table .ap-fund-lamina { font-size: 11px; padding: 3px 8px; }
/* 5 pills de retorno em grid 2-cols. Dentro de cada pill: label em cima
(full width) e na linha de baixo, % CDI/Ibov na frente do retorno. */
.ap-table .ap-num-cell {
background: var(--private-bg) !important;
border-radius: 10px;
padding: 8px 10px !important;
text-align: left;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"label label"
"num pill";
column-gap: 8px;
row-gap: 2px;
align-items: center;
}
.ap-table .ap-num-cell .ap-num-period {
grid-area: label;
display: block;
font-size: 10px;
font-weight: 600;
color: var(--private-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0;
line-height: 1.2;
}
.ap-table .ap-num-cell .ap-cdi-pill {
grid-area: pill;
margin: 0;
justify-self: end;
flex-shrink: 0;
}
.ap-table .ap-num-cell .ap-num {
grid-area: num;
display: block;
font-size: 14px;
font-weight: 600;
margin: 0;
text-align: left;
}
/* O 5º pill (24 meses, nth-child=8) ocupa toda a linha pra ficar simétrico */
.ap-table .ap-num-cell:nth-child(8) {
grid-column: 1 / -1;
}
/* Footer do card: cota (data) à esquerda + patrimônio à direita,
compartilhando uma única linha com divisória superior.
`order` força ambos a virem DEPOIS dos pills no auto-flow do grid
(no DOM a data-cell vem antes dos pills, mas visualmente queremos
ela junto do patrimônio no rodapé). */
.ap-table .ap-data-cell {
grid-column: 1 / 2;
order: 99;
margin-top: -2px; /* puxa pra perto do último pill */
padding-top: 6px;
border-top: 0.5px solid var(--private-divider);
text-align: left;
font-size: 12px;
color: var(--private-text);
font-weight: 500;
}
.ap-table .ap-data-cell::before {
content: 'Cota: ';
color: var(--private-muted2);
font-weight: 500;
}
.ap-table .ap-muted {
grid-column: 2 / -1;
order: 99;
margin-top: -2px;
padding-top: 6px;
border-top: 0.5px solid var(--private-divider);
font-size: 13px;
text-align: right;
font-weight: 600;
color: var(--private-text);
}
.ap-table .ap-muted::before {
content: 'Patrimônio: ';
color: var(--private-muted2);
font-weight: 500;
}
}
|