/* =========================================================================
   single-etf › base do contexto: fundo, numeração por aba, blocos e faixas.
   Mobile-first (min-width). Tokens em base/tokens.css.
   ========================================================================= */
.single-etf { background: var(--leto-paper); color: var(--leto-ink); }

/* O global põe 100px de respiro em todo .stage abaixo de 1280px (compensa o
   header fixo). Aqui só o hero precisa disso. */
@media (max-width: 1280px) {
	.single-etf .stage:not(.ipage-hero__inner) { padding-top: 0; }
}

/* Numeração 01, 02... reinicia em cada aba (o Figma numera por aba). */
.single-etf .etf-painel { counter-reset: leto-secao; }
.single-etf .idx { counter-increment: leto-secao; }
.single-etf .idx::before { content: counter(leto-secao, decimal-leading-zero); }

.single-etf .etf-bloco--faixa { background: rgba(45, 45, 45, .06); }
.single-etf .etf-bloco__cab { padding-bottom: 1.25rem; }
.single-etf .block-2col__body > * + * { margin-top: 1rem; }
.single-etf .block-2col__body p { max-width: 560px; }

/* Traço de dado ausente (produção). */
/* Tons locais (revisão de acessibilidade 24/09): o --leto-green-deep dá 4,4:1 no paper e
   3,97:1 na faixa, e o --leto-gray dá 4,4:1 sobre o card verde; estes passam de 5,5:1. */
.single-etf { --etf-link-escuro: #4a5530; --etf-texto-suave: #4a4a4a; }
.single-etf .etf-na { color: var(--etf-texto-suave); }

.single-etf .etf-nota p { font-size: 15px; line-height: 1.45; color: var(--leto-gray); }
.single-etf .section-dark .etf-nota p { color: rgba(255, 255, 255, .72); }

.single-etf .etf-itens { display: grid; gap: .9rem; list-style: none; padding: 0; }
.single-etf .etf-itens li { font-size: 16.5px; line-height: 1.45; max-width: 560px; }
.single-etf .etf-itens strong { font-weight: 600; }

/* ---- Blocos de dados, compartilhados pelas abas Performance e Cestas ---- */
.single-etf .etf-dados { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 64px); }
.single-etf .etf-dados__cab { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.single-etf .etf-dados__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

.single-etf .etf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 13px; color: var(--leto-gray); }
.single-etf .etf-meta__rel { font-weight: 600; color: var(--etf-link-escuro); text-decoration: underline; text-underline-offset: 3px; }
.single-etf .etf-meta__rel.is-inactive { color: var(--leto-gray-soft); text-decoration: none; cursor: default; }

.single-etf .etf-filtros { display: flex; flex-wrap: wrap; gap: .6rem; }
.single-etf .etf-filtros__campo, .single-etf .etf-periodo__campo { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; }
.single-etf .etf-filtros select, .single-etf .etf-periodo input { min-height: 40px; padding: .35rem .7rem; border: 1px solid rgba(45, 45, 45, .4); border-radius: 10px; background: rgba(255, 255, 255, .4); color: var(--leto-ink); font: inherit; font-size: 13.5px; }
.single-etf .etf-filtros select:disabled, .single-etf .etf-periodo input:disabled { opacity: .55; }
.single-etf .etf-periodo__btn { height: 42px; padding-inline: 1.4rem; }
.single-etf .etf-periodo__btn:disabled { opacity: .55; cursor: not-allowed; }

.single-etf .etf-tabela__scroll { overflow-x: auto; border-radius: 12px; }
.single-etf .etf-tabela__scroll:focus-visible { outline: 2px solid var(--leto-green-deep); outline-offset: 2px; }
.single-etf .etf-tabela__t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; }
.single-etf .etf-tabela__t thead th { padding: .85rem 1rem; text-align: left; vertical-align: bottom; font-weight: 600; border-bottom: 1px solid rgba(45, 45, 45, .35); }
.single-etf .etf-tabela__t tbody th, .single-etf .etf-tabela__t tbody td { padding: .8rem 1rem; text-align: left; font-weight: 400; font-variant-numeric: tabular-nums; }
.single-etf .etf-tabela__t tbody tr:nth-child(even) { background: rgba(45, 45, 45, .06); }
/* Atalho da CVM sob a evolução diária (Res. CVM 175, art. 31, §1º, II). */
.single-etf .etf-cvm-atalho { margin-top: 1rem; font-size: 14.4px; line-height: 1.5; color: var(--leto-ink); }
.single-etf .etf-cvm-atalho a { color: var(--leto-ink); text-decoration: underline; text-underline-offset: 3px; }
.single-etf .etf-tabela__vazia { margin-top: .9rem; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(45, 45, 45, .06); font-size: 14px; color: var(--leto-gray); }
.single-etf #etf-t-evolucao { min-width: 980px; }

.single-etf .etf-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
.single-etf .etf-chip { min-height: 32px; padding: .2rem .9rem; border: 1px solid rgba(45, 45, 45, .5); border-radius: 999px; background: transparent; color: var(--leto-ink); font: inherit; font-size: 13px; }
.single-etf .etf-chip.is-on { background: var(--leto-charcoal); border-color: var(--leto-charcoal); color: #fff; }
.single-etf .etf-chip:disabled { cursor: not-allowed; opacity: .6; }

.single-etf .etf-grafico { display: grid; place-items: center; gap: .5rem; min-height: 260px; padding: 2rem 1rem; border-radius: 12px; background: rgba(45, 45, 45, .06); text-align: center; color: var(--leto-gray); }

@media (min-width: 900px) {
	.single-etf .etf-dados__cab { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.single-etf .etf-dados__ctl { justify-content: flex-end; }
}