/* O tema (News Magazine X) dá um padding maior que 5px ao wrapper padrão
   de post único (.newsx-single-content-wrap) em algum outro seletor mais
   específico que o `.site-content :where(...)` genérico dele — pedido do
   usuário em 2026-08: forçar 5px só nas páginas de ETF, não no blog em
   geral. `body.single-etf` é a classe que o WordPress já adiciona
   sozinho em toda página singular do CPT "etf". */
body.single-etf .newsx-single-content-wrap {
    padding: 5px !important;
}

/* Esconde só "Nenhum comentário | data" abaixo do título — pedido do
   usuário em 2026-08. .newsx-post-meta-inn-wrap é o bloco de comentários+
   data; os ícones de compartilhar (.newsx-static-sharing) são um <div>
   IRMÃO dentro do mesmo .newsx-post-meta e continuam aparecendo. */
body.single-etf .newsx-post-meta-inn-wrap {
    display: none !important;
}

/* Ícones de compartilhar (Facebook/LinkedIn/WhatsApp/Copiar link) — pedido
   do usuário em 2026-09: removidos em todas as páginas de tipo. Classe
   real conferida no HTML ao vivo: `.newsx-post-sharing` (não
   `.newsx-static-sharing`, suposição herdada de um CSS antigo que nunca
   existiu de fato nesse tema). */
body.single-etf .newsx-post-sharing {
    display: none !important;
}

.fii-dados-layout {
    --surface-1:      #fcfcfb;
    --page-plane:     #f9f9f7;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --gridline:       #e1e0d9;
    --baseline:       #c3c2b7;
    --border:         #000000;
    --series-1:       #2a78d6;
    --series-1-wash:  #e8f0fb;
    --good:           #006300;
    --critical:       #d03b3b;
    --card-shadow:    0 1px 3px rgba(11, 11, 11, 0.06);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 32px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 64px;
    color: var(--text-primary);
}
.fii-dados-layout * {
    box-sizing: border-box;
    font-family: inherit;
}

@media (max-width: 860px) {
    .fii-dados-layout {
        grid-template-columns: 1fr;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fii-dados-layout {
        --surface-1:      #1a1a19;
        --page-plane:     #0d0d0d;
        --text-primary:   #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted:     #898781;
        --gridline:       #2c2c2a;
        --baseline:       #383835;
        --border:         rgba(255, 255, 255, 0.10);
        --series-1:       #3987e5;
        --series-1-wash:  #12233a;
        --good:           #0ca30c;
        --critical:       #e66767;
        --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] .fii-dados-layout {
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --series-1:       #3987e5;
    --series-1-wash:  #12233a;
    --good:           #0ca30c;
    --critical:       #e66767;
    --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

.fii-dados-single {
    min-width: 0;
}

.fii-dados-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin-bottom: 4px;
}

.fii-dados-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--text-primary) !important;
}

.fii-dados-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--series-1);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--series-1);
    white-space: nowrap;
}

.fii-dados-section-title-wrap {
    margin: 32px 0 12px;
}

/* O tema aplica bastante espaço acima/abaixo do texto dentro da própria
   faixa do título — reduz esse respiro sem mexer no visual (borda,
   cor, peso da fonte etc), que vem do tema. */
.fii-dados-section-title-wrap.newsx-widget-title-wrap {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-top: none !important;
    border-bottom: 3px solid var(--border) !important;
}
.fii-dados-section-title-wrap .newsx-widget-title {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
}
.fii-dados-section-title-wrap .newsx-widget-title-text {
    border-bottom: none !important;
}

/* Seletor de período (1 semana/1 mês/.../Total) ao lado do título de
   Cotação, oposto ao texto — pedido do usuário em 2026-08. */
.fii-dados-titulo-com-seletor {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
}

/* Checkboxes pra ligar/desligar IFIX/IBOV/IPCA no gráfico de rentabilidade
   vs. índices (CDI vem sempre ligado) — pedido do usuário em 2026-09. */
.fii-dados-indices-mercado-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 4px;
    font-size: 0.9em;
    color: var(--text-muted);
}
.fii-dados-indices-mercado-toggles label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.fii-dados-indices-mercado-toggles input[type="checkbox"] {
    cursor: pointer;
}

/* Dois gráficos lado a lado (VPA x cotação, P/VP x setor — ambos só do
   valor ATUAL, sem tabela) — pedido do usuário em 2026-09. Empilha em
   telas estreitas. */
.fii-dados-charts-lado-a-lado {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 8px 0 8px;
}

.fii-dados-charts-lado-a-lado-item {
    flex: 1 1 320px;
    min-width: 0;
}

.fii-dados-charts-lado-a-lado-item .fii-dados-chart {
    margin: 8px 0 0;
}
.fii-dados-seletores-cotacao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fii-dados-periodo-seletor,
.fii-dados-tipo-cotacao-seletor {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-1);
    color: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* 3 valores fixos (1 semana/1 mês/1 ano) abaixo do gráfico de Cotação,
   independentes do seletor de período (que só controla o que o gráfico
   plota). */
.fii-dados-cotacao-rentabilidades {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gridline);
}
.fii-dados-cotacao-rentabilidade-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fii-dados-cotacao-rentabilidade-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 700;
}
.fii-dados-cotacao-rentabilidade-item .fii-rent-dir {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Seta de tendência e cabeçalho verde na tabela de Fundamentos
   trimestrais — ver fii-style.css pra explicação completa. */
.fii-fundamentos-trend {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.78em;
}
.fii-fundamentos-trend[data-dir="up"] { color: var(--good); }
.fii-fundamentos-trend[data-dir="down"] { color: var(--critical); }
.fii-dados-tabela.fii-dados-tabela-fundamentos th {
    background: #2c5e3f !important;
}

@media (max-width: 600px) {
    /* Nesta tabela, só a 1ª coluna (INDICADOR) pode quebrar linha — as
       colunas de trimestre/valor ficam bagunçadas quebrando "R$ 44,75 mi"
       no meio — pedido do usuário em 2026-09. Sobrescreve o wrap geral
       liberado acima pra tabelas como a de rendimentos/DY. */
    .fii-dados-tabela-fundamentos th:not(:first-child),
    .fii-dados-tabela-fundamentos td:not(:first-child) {
        white-space: nowrap;
    }
}

/* Card com destaque visual (fundo + borda de acento) — mesmo padrão do
   card de Número mágico de FII/FIAGRO, usado aqui pro simulador
   "se tivesse investido" (pedido do usuário em 2026-08). */
.fii-dados-numero-magico-box {
    padding: 20px 24px;
    margin-bottom: 24px;
    background: var(--series-1-wash);
    border-left: 4px solid var(--series-1);
    border-radius: 8px;
}
.fii-dados-numero-magico-calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.fii-dados-numero-magico-calc label {
    font-weight: 600;
    font-size: 0.9rem;
}
.fii-dados-numero-magico-input {
    width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    background: #ffffff;
    color: var(--text-primary);
}

.fii-dados-cotacao-simulador-box {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    row-gap: 8px;
}
.fii-dados-cotacao-simulador-box .fii-dados-numero-magico-calc {
    justify-content: center;
    margin: 0;
}
.fii-dados-cotacao-simulador-box .fii-dados-cotacao-simulador-resultados {
    flex: 1 1 auto;
    margin-top: 0;
}
.fii-dados-cotacao-simulador-box .fii-dados-nota {
    flex-basis: 100%;
    margin-top: 8px;
    padding: 12px 0 0;
    background: none;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid var(--border);
}

.fii-dados-numero-magico-box > .fii-dados-nota {
    margin-top: 4px;
    padding: 12px 0 0;
    background: none;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid var(--border);
}
.fii-dados-cotacao-simulador-resultados {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.fii-dados-cotacao-simulador-resultado-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fii-dados-cotacao-simulador-resultado-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    font-weight: 700;
}
.fii-dados-cotacao-simulado {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--series-1);
}

.fii-dados-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}

.fii-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 16px;
    background: var(--surface-1);
    background-clip: padding-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    /* Bug conhecido de navegadores baseados em Chrome: um ancestral com
       overflow:hidden (aqui, .fii-dados-inline, necessário pra conter a
       largura do bloco dentro da coluna do tema) pode serrilhar/cortar a
       curva do border-radius de um descendente, mais visível embaixo.
       Forçar este elemento pra sua própria camada de composição evita o
       artefato. */
    transform: translateZ(0);
}

.fii-card-label {
    font-size: 0.78rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #000000;
    font-weight: 700;
}

.fii-card-value {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
}

.fii-card-delta {
    font-size: 0.85rem;
    font-weight: 600;
}
.fii-card-delta[data-dir="up"] { color: var(--good); }
.fii-card-delta[data-dir="down"] { color: var(--critical); }

.fii-rent-dir[data-dir="up"] { color: var(--good); }
.fii-rent-dir[data-dir="down"] { color: var(--critical); }

/* Última cotação + variação vs. dia anterior, ao lado do título "Cotação
   do TICKER" — pedido do usuário em 2026-08. */
.fii-dados-cotacao-variacao-dia {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}
.fii-dados-cotacao-variacao-dia[data-dir="up"] { color: var(--good); }
.fii-dados-cotacao-variacao-dia[data-dir="down"] { color: var(--critical); }

.fii-dados-sobre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
    min-width: 0;
}

.fii-dados-sobre-card {
    padding: 20px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}

.fii-dados-sobre dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #000000;
    font-weight: 700;
    margin: 0 0 2px;
}

.fii-dados-sobre dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.fii-dados-chart {
    margin: 8px 0 32px;
    padding: 16px;
}

@media (max-width: 600px) {
    /* Menos respiro nas laterais no mobile — pedido do usuário em 2026-09:
       sobra mais largura útil pro gráfico numa tela estreita. */
    .fii-dados-chart {
        padding: 16px 0;
    }
}

.fii-dados-rendimentos-layout {
    display: flex;
    flex-direction: column;
    margin: 8px 0 32px;
    overflow: hidden;
}

.fii-dados-rendimentos-layout .fii-dados-chart {
    margin: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gridline);
    border-radius: 0;
    box-shadow: none;
}

.fii-dados-rendimentos-layout .fii-dados-tabela,
.fii-dados-rendimentos-layout .fii-dados-chart-vazio {
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.fii-dados-chart-pizza {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fii-dados-chart-pizza canvas {
    max-height: 320px;
}

.fii-dados-chart-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}
.fii-dados-chart .fii-dados-chart-vazio {
    border: none;
    box-shadow: none;
    padding: 0;
}

.fii-dados-tabela {
    max-width: 100%;
    overflow-x: auto;
}

.fii-dados-tabela table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    /* Deixa o cabeçalho quebrar linha no mobile em vez de forçar rolagem
       horizontal — pedido do usuário em 2026-09: sem o min-width fixo, a
       tabela encolhe pra largura da tela e o texto do th quebra sozinho. */
    .fii-dados-tabela table {
        min-width: 100%;
    }
}

.fii-dados-tabela-imoveis {
    max-height: 420px;
    overflow-y: auto;
}

/* Imóveis e Outros investimentos (compartilham esta classe): largura fixa
   por coluna, pra Imóvel/Endereço/Emissor quebrarem em várias linhas em
   vez de forçar a tabela inteira a ficar larga demais. */
.fii-dados-tabela-imoveis table {
    table-layout: fixed;
    min-width: 100%;
}

.fii-dados-tabela-imoveis td:nth-child(1),
.fii-dados-tabela-imoveis td:nth-child(2) {
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
}

.fii-dados-tabela-imoveis th:nth-child(1),
.fii-dados-tabela-imoveis td:nth-child(1) {
    width: 22%;
}

.fii-dados-tabela-imoveis th:nth-child(2),
.fii-dados-tabela-imoveis td:nth-child(2) {
    width: 38%;
}

.fii-dados-tabela-imoveis th:nth-child(3),
.fii-dados-tabela-imoveis td:nth-child(3),
.fii-dados-tabela-imoveis th:nth-child(4),
.fii-dados-tabela-imoveis td:nth-child(4) {
    width: 20%;
}

/* Informações Relevantes: só Data + Comunicado (a coluna já carrega o
   botão "Abrir" que substituiu a coluna de ícone e a de Assunto — pedido
   do usuário em 2026-08). table-layout:fixed garante que a coluna
   Comunicado realmente ocupe o resto da largura da tabela. O flex fica
   numa <div> DENTRO da <td> (não na própria <td>) — display:flex direto
   num elemento de tabela tem bugs de suporte inconsistentes entre
   navegadores; uma div comum sempre estica pra largura cheia do pai, sem
   essa ambiguidade. */
.fii-dados-tabela-documentos table {
    table-layout: fixed;
}

.fii-dados-tabela-documentos th:nth-child(1),
.fii-dados-tabela-documentos td:nth-child(1) {
    width: 104px;
    text-align: center;
}

.fii-dados-tabela-documentos th {
    text-align: center;
}

.fii-dados-col-categoria {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
}

.fii-dados-btn-abrir {
    flex-shrink: 0;
    padding: 5px 14px;
    border-radius: 6px;
    /* Mesmo verde dos gráficos de barra (#2c5e3f) — pedido do usuário em
       2026-09, em vez do botão neutro/outline anterior. */
    border: 1px solid #2c5e3f;
    background: #2c5e3f;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.fii-dados-btn-abrir:hover {
    background: #1f4630;
    border-color: #1f4630;
    color: #ffffff;
}

.fii-dados-link-visualizar {
    display: inline-block;
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    color: var(--series-1);
}

.fii-dados-link-visualizar:hover {
    color: var(--text-primary);
}

.fii-dados-tabela th,
.fii-dados-tabela td {
    text-align: center;
    padding: 10px 16px;
}

@media (max-width: 600px) {
    /* Menos respiro nas linhas no mobile — pedido do usuário em 2026-09:
       sobra mais espaço útil de conteúdo numa tela estreita. */
    .fii-dados-tabela th,
    .fii-dados-tabela td {
        padding: 6px 8px;
    }
}

.fii-dados-tabela th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff !important;
    font-weight: 700 !important;
    background: #000000 !important;
    border-bottom: 1px solid var(--gridline);
    position: sticky;
    top: 0;
    z-index: 1;
}

.fii-dados-tabela tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--gridline);
}

.fii-dados-tabela tbody tr:nth-child(even) {
    background: var(--page-plane);
}

.fii-dados-nota {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--series-1-wash);
    border-radius: 8px;
    border-left: 3px solid var(--series-1);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.fii-dados-educativo {
    margin-bottom: 8px;
}

.fii-dados-educativo p {
    margin: 0 0 14px;
    line-height: 1.65;
    color: var(--text-primary);
}

.fii-dados-educativo ul {
    margin: 0 0 14px;
    padding-left: 20px;
    line-height: 1.65;
}

.fii-dados-educativo li {
    margin-bottom: 6px;
}

.fii-dados-educativo-categoria {
    margin-bottom: 16px;
}

.fii-dados-educativo-categoria h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.fii-dados-educativo-categoria p {
    margin: 0 0 10px;
}

.fii-dados-educativo-categoria p:last-child {
    margin-bottom: 0;
}

.fii-dados-archive-layout {
    grid-template-columns: 1fr;
}

/* Usado quando o bloco do FII é injetado dentro de `the_content` do tema
   (ver Fii_Dados_Content) — vira um bloco simples que flui na coluna de
   conteúdo do tema, em vez de montar seu próprio grid de página inteira.
   Mantém `.fii-dados-layout` como host das custom properties de cor. */
/* Fix da coluna de conteúdo real do tema (classes newsx-*, confirmadas no
   HTML ao vivo): o item flex #primary não tem `min-width: 0`, então
   qualquer conteúdo largo lá dentro (nossas tabelas/gráficos) força essa
   coluna a crescer além do espaço reservado, empurrando a sidebar real pra
   fora da tela. Como esta folha de estilo carrega DEPOIS da do tema
   (prioridade 100 no enqueue), esta regra vence. Seguro pra qualquer
   página do tema, não só FII — só corrige o mesmo bug que qualquer post
   com tabela/imagem larga teria. */
#primary.content-area,
.newsx-single-inner,
.newsx-post-content {
    min-width: 0;
}

.fii-dados-inline {
    display: block;
    grid-template-columns: unset;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Sem isso, o cálculo de "largura mínima automática" do item flex/grid
       do TEMA (que hospeda este bloco) considera o max-content de todo o
       conteúdo lá dentro (tabelas largas, grids de cards) e infla a coluna
       além do espaço disponível, empurrando a sidebar real pra fora.
       `overflow-x: hidden` faz este bloco contribuir pro cálculo do pai só
       com sua própria largura (100%), não com o max-content dos filhos —
       cada elemento largo lá dentro (tabelas) já tem seu próprio scroll
       horizontal (.fii-dados-tabela), então nada relevante é cortado aqui. */
    overflow-x: hidden;
}

/* O tema (News Magazine X) tem uma regra genérica —
   `.newsx-single-content-wrap div:last-of-type { border-bottom: 0; }` —
   que remove a borda de baixo do último <div> dentro de qualquer
   container do conteúdo do post. Como nosso bloco vive dentro do content
   do tema (ver Fii_Dados_Content), isso zera a borda de baixo sempre que
   uma dessas caixas calha de ser a última <div> filha do seu container
   (ex: o último card de cada linha de indicadores) — achado inspecionando
   ao vivo no DevTools. A especificidade do tema é maior que a nossa
   (0,2,1 vs 0,1,0), por isso reforçamos com !important. */
.fii-card,
.fii-dados-sobre-card,
.fii-dados-categoria-box,
.fii-dados-relacionado-box {
    border-bottom: 1px solid var(--border) !important;
}

/* Gráficos (cotação, histórico de rendimentos) e TODAS as tabelas
   (informações relevantes etc) não devem ter NENHUMA borda/fundo — pedido
   do usuário em 2026-08. Precisa de !important pelo mesmo motivo do bloco
   acima: o tema zera a borda de baixo do último <div> filho, mas aqui o
   zero É o que queremos, então isso na verdade ajuda; ainda assim
   reforçamos pra não depender de qual <div> calha de ser o último. */
.fii-dados-chart,
.fii-dados-chart-vazio,
.fii-dados-rendimentos-layout,
.fii-dados-tabela,
.fii-dados-numero-magico-box {
    border-bottom: 0 !important;
}

.fii-dados-categoria-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}

.fii-dados-ticker-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--series-1);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--series-1);
    background: var(--series-1-wash);
    text-decoration: none;
    white-space: nowrap;
}

.fii-dados-ticker-chip:hover {
    background: var(--series-1);
    color: #ffffff;
}

.fii-dados-relacionados {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* FAQ (accordion nativo via <details>/<summary>) — pedido do usuário em
   2026-08 pra virar um FAQPage bem formado pro Google. Sem card/fundo, só
   separadores finos entre perguntas, no mesmo espírito "sem caixa" do
   resto da página. */
.fii-dados-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fii-dados-faq-item {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.fii-dados-faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-primary);
    list-style: none;
    transition: background-color 0.15s ease;
}
.fii-dados-faq-pergunta:hover {
    background: var(--series-1-wash);
}
.fii-dados-faq-item[open] .fii-dados-faq-pergunta {
    background: var(--series-1-wash);
    border-bottom: 1px solid var(--border);
}
.fii-dados-faq-pergunta::-webkit-details-marker {
    display: none;
}
.fii-dados-faq-pergunta::after {
    content: '+';
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-1);
    border: 1px solid var(--border);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
    color: var(--series-1);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.fii-dados-faq-item[open] .fii-dados-faq-pergunta::after {
    content: '\2212';
    background: var(--series-1);
    border-color: var(--series-1);
    color: #fff;
}
.fii-dados-faq-resposta {
    padding: 2px 20px 18px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.fii-dados-faq-resposta p {
    margin: 0;
}

/* Notícias relacionadas (posts de resumo de relatório gerencial) — cards
   com capa, título e um trecho curto, 1 ou 2 por linha dependendo do
   espaço (só mostramos as 2 mais recentes por fundo). */
.fii-dados-posts-relacionados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.fii-dados-post-relacionado {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
}
.fii-dados-post-relacionado:hover {
    border-color: var(--series-1);
}
.fii-dados-post-relacionado:hover .fii-dados-post-relacionado-titulo {
    color: var(--series-1);
}

.fii-dados-post-relacionado-img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}

.fii-dados-post-relacionado-titulo {
    padding: 14px 16px 0;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.fii-dados-post-relacionado-excerpt {
    padding: 6px 16px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.fii-dados-relacionado-box {
    display: flex;
    flex: 1 1 220px;
    align-items: stretch;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.fii-dados-relacionado-box:hover {
    border-color: var(--series-1);
}

/* Painel do ícone ocupa a altura INTEIRA do card (topo a fundo), lado
   esquerdo, quadrado — pedido do usuário em 2026-09 (mockup: ícone maior,
   colado nas bordas, não mais um selo redondo pequeno). O `overflow:
   hidden` do card (acima) arredonda os cantos esquerdos desse painel
   junto com o card, sem precisar de border-radius próprio aqui. */
.fii-dados-relacionado-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    flex-shrink: 0;
    /* Mesmo verde usado nos gráficos de barra (#2c5e3f) — pedido do
       usuário em 2026-09, em vez do azul padrão de --series-1. */
    background: #2c5e3f1a;
    color: #2c5e3f;
}

.fii-dados-relacionado-icone svg {
    width: 34px;
    height: 34px;
}

.fii-dados-relacionado-conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

.fii-dados-relacionado-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.fii-dados-relacionado-box:hover .fii-dados-relacionado-titulo {
    color: var(--series-1);
}

/* Sem sublinhado em nada dentro do card (o tema aplica underline padrão
   em texto dentro de link) e com cor de verdade nos valores, em vez do
   estilo de link cru — pedido do usuário em 2026-09. */
.fii-dados-relacionado-box,
.fii-dados-relacionado-box * {
    text-decoration: none !important;
}

.fii-dados-relacionado-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c5e3f !important;
}

/* Ao lado do título "Informações Relevantes", oposto ao texto — mesmo
   padrão do seletor de período da Cotação (pedido do usuário em 2026-08).
   Sem <label> visível (só aria-label) pra caber numa linha só com o
   título. */
.fii-dados-filtro-documentos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    /* Filtros de categoria/ano escondidos no mobile — pedido do usuário em
       2026-09: a tabela de documentos já cabe justa numa tela estreita. */
    .fii-dados-filtro-documentos {
        display: none;
    }
}

.fii-dados-filtro-documentos select {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-1);
    color: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.fii-dados-filtro-documentos button {
    flex-shrink: 0;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page-plane);
    color: inherit;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.fii-dados-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 0.85rem;
}

.fii-dados-paginacao a {
    color: var(--text-muted);
    text-decoration: underline;
}

/* Widgets de shortcode (ex: [fii_ultimas_noticias], [fii_maiores_dy]) —
   pensados pra colar em qualquer página (a home, uma barra lateral etc.),
   por isso declaram as mesmas variáveis de cor/tema de .fii-dados-layout
   só que num wrapper leve, sem o grid de 2 colunas da página de fundo. */
.fii-dados-widget {
    --surface-1:      #fcfcfb;
    --page-plane:     #f9f9f7;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --gridline:       #e1e0d9;
    --border:         #000000;
    --series-1:       #2a78d6;
    --series-1-wash:  #e8f0fb;
    --good:           #006300;
    --critical:       #d03b3b;
    --card-shadow:    0 1px 3px rgba(11, 11, 11, 0.06);

    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
    max-width: 480px;
    padding: 20px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
}
.fii-dados-widget * {
    box-sizing: border-box;
    font-family: inherit;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fii-dados-widget {
        --surface-1:      #1a1a19;
        --page-plane:     #0d0d0d;
        --text-primary:   #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted:     #898781;
        --gridline:       #2c2c2a;
        --border:         rgba(255, 255, 255, 0.10);
        --series-1:       #3987e5;
        --series-1-wash:  #12233a;
        --good:           #0ca30c;
        --critical:       #e66767;
        --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] .fii-dados-widget {
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255, 255, 255, 0.10);
    --series-1:       #3987e5;
    --series-1-wash:  #12233a;
    --good:           #0ca30c;
    --critical:       #e66767;
    --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

.fii-dados-widget-titulo {
    margin: 0 0 14px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fii-dados-widget-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fii-dados-widget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gridline);
}
.fii-dados-widget-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fii-dados-widget-item-principal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* Item de notícia: 2 linhas fixas (data + ticker + link em cima, assunto
   embaixo, podendo quebrar em quantas linhas precisar) — mesma estrutura em
   todo item, não importa o tamanho do assunto, pra nunca ficar desalinhado
   entre um item e outro. */
.fii-dados-widget-item-noticia {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gridline);
}
.fii-dados-widget-item-noticia:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fii-dados-widget-item-linha1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fii-dados-widget-item-data {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Ticker como link de texto simples (sem aparência de botão/chip) — só
   nesta lista; outros lugares (ranking, fundos relacionados) continuam
   usando .fii-dados-ticker-chip normalmente. */
.fii-dados-widget-item-ticker {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--series-1);
    text-decoration: none;
}
.fii-dados-widget-item-ticker:hover {
    text-decoration: underline;
}

.fii-dados-widget-item-linha1 .fii-dados-link-visualizar {
    margin-left: auto;
}

.fii-dados-widget-item-assunto {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.fii-dados-widget-item-valor {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    color: var(--text-primary);
}
.fii-dados-widget-item-valor[data-dir="up"] { color: var(--good); }
.fii-dados-widget-item-valor[data-dir="down"] { color: var(--critical); }

.fii-dados-widget-rodape {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--gridline);
    text-align: right;
}
.fii-dados-widget-rodape a {
    font-size: 0.82rem;
    color: var(--series-1);
    text-decoration: none;
}
.fii-dados-widget-rodape a:hover {
    text-decoration: underline;
}

.fii-dados-widget-vazio {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Trava defensiva pro bloco de anúncios "Fim do post" (AdSense/Advanced
   Ads) — achado em 2026-08: o widget de anúncio vem com width:1200px
   !important fixo no próprio HTML do Google, sem respeitar o contêiner
   real, e estoura a barra lateral em telas menores. Não é nada nosso (é
   config. do plugin de anúncios), mas como nosso CSS já carrega em toda
   página do site, contemos o vazamento aqui — sem isso não tem como
   corrigir sem mexer nas configurações do Advanced Ads. */
.capit-fim-do-post,
.capit-entity-placement {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Logo da ação (brapi.dev) ao lado do título — injetado via filtro
   `the_title` em Acoes_Dados_Content::titulo_com_logo(), fora da
   `.fii-dados-layout` (o título é renderizado pelo tema, não pelo bloco
   injetado), por isso a regra é autocontida sem depender das variáveis
   CSS definidas ali. */
.acoes-dados-logo-titulo {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    border-radius: 4px;
    object-fit: contain;
}

/* Logo grande do tamanho do card "Sobre a ação", ao lado dele (não dentro
   do grid CNPJ/Setor/Subsetor) — esta regra fica dentro de
   `.fii-dados-layout` (o bloco injetado), diferente da do título, que
   fica fora (título é renderizado pelo tema). Duas tentativas anteriores
   (logo inline no texto do CNPJ, logo como 4ª coluna do grid com rótulo
   "LOGO") ficaram estranhas — pedido final do usuário foi um logo do
   tamanho do card, do lado, não dentro dele. `align-self: stretch` (herdado
   do flex do wrapper) faz a altura acompanhar o card automaticamente. */
.acoes-dados-sobre-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.acoes-dados-sobre-wrapper .fii-dados-sobre-card {
    flex: 1;
    min-width: 0;
}

.acoes-dados-logo-grande {
    /* Altura FIXA em vez de "stretch"/100% — testado ao vivo em 2026-08 e
       constatado que altura percentual não resolve aqui: o container flex
       (.acoes-dados-sobre-wrapper) não tem altura definida (cresce pelo
       conteúdo, que inclui o próprio logo), então "height: 100%" vira
       "auto" na prática (percentual contra altura indefinida = auto, regra
       do CSS) e a imagem volta a usar a proporção intrínseca — resultado:
       o logo ficava mais alto que o card ao lado sempre que a proporção
       largura/altura do SVG era "quadrada" (ex: Vulcabras, Ambev) em vez
       de bem larga (ex: Brava). Altura fixa evita esse problema de raiz. */
    width: 140px;
    height: 96px;
    flex-shrink: 0;
    object-fit: contain;
    /* Gruda na borda esquerda em vez de centralizar — evita a faixa de
       espaço vazio à esquerda que "object-fit: contain" (centralizado por
       padrão) deixava quando a proporção do SVG é mais estreita que a
       caixa 140x96 (ex: YDUQS, um logo quase quadrado). */
    object-position: left center;
}

@media (max-width: 480px) {
    .acoes-dados-sobre-wrapper {
        flex-direction: column;
    }
    .acoes-dados-logo-grande {
        width: 100%;
        max-width: 140px;
    }
}
