/* Área de membro (Carteira) — pedido do usuário em 2026-09: "uma
   plataforma sem o menu superior, com um painel esquerdo e o principal
   com o dashboard". As páginas de carteira NÃO usam get_header()/
   get_footer() do tema (ver templates/parts/carteira-doc-abre.php/
   carteira-doc-fecha.php — chamam wp_head()/wp_footer() diretamente,
   sem a marcação de header.php/footer.php), então esta folha precisa
   ser AUTOCONTIDA (não pode depender de `.fii-dados-layout` de outro
   arquivo pra ter as custom properties de cor — a sidebar fica FORA de
   qualquer `.fii-dados-layout`). Mesmo padrão de 3 estados (light/dark
   automático + toggle manual) já usado em todo o resto do site. */
.cfd-carteira-shell {
    --surface-1:      #fcfcfb;
    --page-plane:     #f4f4f2;
    --text-primary:   #0b0b0b;
    --text-secondary: #52514e;
    --text-muted:     #898781;
    --gridline:       #e1e0d9;
    --border:         #000000;
    --series-1:       #2a78d6;
    --series-1-wash:  #e8f0fb;
    --good:           #006300;
    --critical:       #d03b3b;
    --warn:           #a66a00;
    --card-shadow:    0 1px 3px rgba(11, 11, 11, 0.06);

    /* `height` (não `min-height`) + `overflow: hidden` — pedido do
       usuário em 2026-09: "o menu esquerdo não pode ter scrolling junto
       com o lado do conteúdo". Com `min-height`, o documento inteiro
       crescia com o conteúdo e ROLAVA JUNTO COM a sidebar (mesmo ela
       sendo `position: sticky`, uma página muito alta ainda dava a
       sensação de "menu andando"); travando o shell em exatamente
       100vh e deixando sidebar/conteúdo rolarem cada um por conta
       própria (ver `overflow-y: auto` nos dois abaixo) garante que a
       sidebar NUNCA se mexe, ponto. Revertido pra fluxo normal de
       documento no breakpoint mobile (sidebar vira barra superior). */
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--page-plane);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cfd-carteira-shell {
        --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;
        --warn:           #d9942e;
        --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] .cfd-carteira-shell {
    --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;
    --warn:           #d9942e;
    --card-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* body inteiro sem margem/rodapé do tema — a página vira só o shell. */
body.cfd-carteira-app {
    margin: 0;
    background: var(--page-plane, #f4f4f2);
}

.cfd-carteira-sidebar {
    display: flex;
    flex-direction: column;
    width: 268px;
    flex-shrink: 0;
    height: 100vh;
    /* Rolagem própria (só entra em ação se a navegação um dia crescer
       mais que a tela) — independente da rolagem do conteúdo ao lado. */
    overflow-y: auto;
    padding: 28px 20px;
    background: var(--surface-1);
    border-right: 1px solid var(--gridline);
    box-sizing: border-box;
}

.cfd-carteira-sidebar-topo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    text-align: center;
    border-bottom: 1px solid var(--gridline);
}
.cfd-carteira-sidebar-logo {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.cfd-carteira-sidebar-logo-imagem {
    line-height: 0;
}
.cfd-carteira-sidebar-logo-imagem .custom-logo-link {
    display: inline-block;
}
.cfd-carteira-sidebar-logo-imagem img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    width: auto;
    margin: 0 auto;
}
.cfd-carteira-sidebar-subtitulo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--series-1-wash);
    color: var(--series-1);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cfd-carteira-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.cfd-carteira-sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.cfd-carteira-sidebar-link:hover {
    background: var(--page-plane);
    color: var(--text-primary);
}
.cfd-carteira-sidebar-link.is-ativo {
    background: var(--series-1-wash);
    color: var(--series-1);
}
.cfd-carteira-sidebar-icone {
    display: flex;
    flex-shrink: 0;
}
.cfd-carteira-sidebar-icone svg {
    width: 18px;
    height: 18px;
}

.cfd-carteira-sidebar-rodape {
    padding-top: 16px;
    border-top: 1px solid var(--gridline);
}
.cfd-carteira-sidebar-usuario-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 10px;
    min-width: 0;
}
.cfd-carteira-sidebar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--series-1);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}
.cfd-carteira-sidebar-usuario {
    display: block;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfd-carteira-sidebar-sair {
    color: var(--critical);
}
.cfd-carteira-sidebar-sair:hover {
    background: rgba(208, 59, 59, 0.1);
    color: var(--critical);
}

.cfd-carteira-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 20px clamp(16px, 2vw, 32px);
    box-sizing: border-box;
}
/* `.fii-dados-layout` normalmente vira um grid de 2 colunas — aqui o
   shell já resolve o layout de página inteira (sidebar + conteúdo), o
   conteúdo principal só precisa ficar em coluna única.
   IMPORTANTE: não declarar `padding` aqui — este seletor de 2 classes
   tem especificidade maior que `.cfd-carteira-main` sozinho e cancelava
   silenciosamente o padding lateral definido ali (bug reportado pelo
   usuário: conteúdo colado na sidebar e na borda direita). */
.cfd-carteira-main.fii-dados-layout {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* "vs. CDI" fixo (comparação-base, sempre ligada — só IBOV/IPCA são
   toggle) ao lado dos checkboxes opcionais do comparador de benchmark,
   mesmo padrão visual do "Rentabilidade vs. Índices" de cada ativo. */
.cfd-carteira-benchmark-legenda-fixa {
    font-weight: 700;
    color: var(--text-secondary);
}
/* Título "Evolução do patrimônio" + seletor de período + comparador de
   índices numa linha só — pedido do usuário em 2026-09 ("colocar estes
   seletores dos índices na frente do título"), antes cada um ficava numa
   linha separada abaixo do título. `.fii-dados-titulo-com-seletor`/
   `.fii-dados-periodo-seletor` (usadas nas folhas de tipo de ativo) não
   estão disponíveis aqui (ver nota "autocontida" no topo deste arquivo),
   então o layout é garantido por conta própria, não emprestado de outra
   folha que talvez nem esteja carregada nesta página. */
.cfd-carteira-titulo-com-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}
.cfd-carteira-patrimonio-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Toggles do comparador de índices — cópia self-contained do padrão já
   usado no dashboard da carteira real (`.fii-dados-indices-mercado-
   toggles`, definido só nas folhas de tipo de ativo, que as páginas de
   carteira não carregam — ver nota "autocontida" no topo deste arquivo).
   Reaproveitado no Cérebro (`.cfd-cerebro-benchmark-toggle`) — pedido do
   usuário em 2026-09: "dá pra colocar também comparador com índices?". */
.fii-dados-indices-mercado-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 0.85rem;
    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;
    accent-color: var(--series-1);
}
/* Botões R$/% do gráfico de capital do Cérebro — pedido do usuário em
   2026-09: ver evolução em dinheiro ou em % de crescimento. */
.cfd-cerebro-capital-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0;
}
.cfd-cerebro-modo-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.cfd-cerebro-modo-btn {
    padding: 5px 14px;
    border: none;
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.cfd-cerebro-modo-btn + .cfd-cerebro-modo-btn {
    border-left: 1px solid var(--border);
}
.cfd-cerebro-modo-btn.is-ativo {
    background: var(--series-1);
    color: #fff;
}

/* Gráficos de patrimônio/dividendos lado a lado (não empilhados) —
   pedido do usuário em 2026-09. Empilha de volta em telas estreitas. */
.cfd-carteira-graficos-lado-a-lado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.cfd-carteira-graficos-lado-a-lado > div {
    min-width: 0;
}
@media (max-width: 900px) {
    .cfd-carteira-graficos-lado-a-lado {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cfd-carteira-shell {
        flex-direction: column;
        /* Mobile volta a ser rolagem única de documento normal — sidebar
           vira barra superior fixa no fluxo, não faz sentido ter 2
           painéis com rolagem própria numa tela estreita e empilhada. */
        height: auto;
        overflow: visible;
    }
    .cfd-carteira-sidebar {
        position: static;
        width: 100%;
        height: auto;
        overflow: visible;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }
    .cfd-carteira-sidebar-topo {
        flex-direction: row;
        margin-bottom: 0;
        margin-right: auto;
        padding-bottom: 0;
        border-bottom: none;
    }
    .cfd-carteira-sidebar-nav {
        flex-direction: row;
        flex: 0;
    }
    .cfd-carteira-sidebar-rodape {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-top: 0;
        border-top: none;
        margin-left: auto;
    }
    .cfd-carteira-sidebar-usuario-linha {
        display: none;
    }
    .cfd-carteira-main {
        height: auto;
        overflow: visible;
        padding: 20px 16px;
    }
}

/* Telas de login/cadastro — sem sidebar (nada de navegação relevante
   antes de entrar), card centralizado na tela inteira. */
.cfd-carteira-tela-auth.fii-dados-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--page-plane);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
}
.cfd-carteira-auth-conteudo {
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-sizing: border-box;
}
.cfd-carteira-auth-logo {
    display: block;
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.cfd-carteira-auth-titulo {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1.3rem;
}

.cfd-carteira-form-box {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
}

.cfd-carteira-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cfd-carteira-form label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.cfd-carteira-form input[type="text"],
.cfd-carteira-form input[type="email"],
.cfd-carteira-form input[type="password"],
.cfd-carteira-form input[type="number"],
.cfd-carteira-form input[type="date"],
.cfd-carteira-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}

/* wp_login_form() gera sua própria estrutura (form-row/login-remember/
   login-submit) — estiliza o wrapper genérico dela pra herdar a mesma
   aparência dos outros inputs, sem reescrever o form nativo do WP. */
.cfd-carteira-form-box #loginform p {
    margin: 0 0 12px;
}
.cfd-carteira-form-box #loginform label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.cfd-carteira-form-box #loginform input[type="text"],
.cfd-carteira-form-box #loginform input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.cfd-carteira-form-box #loginform .login-remember label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}
.cfd-carteira-form-box #loginform .login-submit {
    margin-top: 4px;
}

.cfd-carteira-form-rodape {
    margin: 16px 0 0;
    font-size: 0.88rem;
    text-align: center;
    color: var(--text-secondary);
}
.cfd-carteira-form-rodape a {
    color: var(--series-1);
}

.cfd-carteira-erro {
    background: rgba(208, 59, 59, 0.1);
    border-left-color: var(--critical);
    color: var(--critical);
}
.cfd-carteira-sucesso {
    background: rgba(0, 99, 0, 0.1);
    border-left-color: var(--good);
    color: var(--good);
}

/* Ganho/perda de capital na tabela "Posição atual" do dashboard — pedido
   do usuário em 2026-09. Só cor de texto (não banner como as 2 classes
   acima), pra caber numa célula de tabela sem destacar demais. */
.cfd-carteira-ganho-positivo {
    color: var(--good);
}
.cfd-carteira-ganho-negativo {
    color: var(--critical);
}

/* Formulário de transação — grid responsivo, não um card centralizado
   como login/cadastro (tem mais campos, precisa de mais largura). */
.cfd-carteira-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}

.cfd-carteira-campo {
    position: relative;
    min-width: 0;
}
.cfd-carteira-campo-ticker,
.cfd-carteira-campo-observacao {
    grid-column: span 2;
}
@media (max-width: 480px) {
    .cfd-carteira-campo-ticker,
    .cfd-carteira-campo-observacao {
        grid-column: span 1;
    }
}

.cfd-carteira-autocomplete-lista {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}
.cfd-carteira-autocomplete-item {
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}
.cfd-carteira-autocomplete-item:hover {
    background: var(--series-1-wash);
}

/* Botão de submit dos formulários da área de carteira — antes só tinha
   `display:inline-block`/`margin-top`, esperando que a classe do TEMA
   (`fii-dados-btn-abrir`/`newsx-btn`, dependendo do form) desse a
   aparência real. Como estas páginas só carregam `carteira-style.css`
   (autocontida, ver nota do topo do arquivo — nenhuma folha do tema é
   enqueued aqui), o botão ficava sem cor/padding de verdade. Pedido do
   usuário em 2026-09 ("melhorar o layout do botão"): estilo PRÓPRIO,
   completo, usando o azul (--series-1) já usado no resto da página
   (slider, checkboxes, badges) em vez de depender de uma classe externa.
*/
.cfd-carteira-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 11px 26px;
    border: none;
    border-radius: 8px;
    background: var(--series-1);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
.cfd-carteira-btn:hover {
    opacity: 0.9;
}
.cfd-carteira-btn:active {
    transform: translateY(1px);
}
.cfd-carteira-btn-secundario {
    margin-left: 10px;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.cfd-carteira-form-mensagem {
    margin: 4px 0 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* Indicador de carregamento do Cérebro — pedido do usuário em 2026-09:
   "remover o console que fica abaixo do botão" (a versão anterior
   reaproveitava `.fii-dados-chart-vazio`, um card grande com borda e
   min-height:120px — pesado demais só pra um texto de "calculando").
   Linha compacta com spinner, só aparece durante o cálculo (JS liga/
   desliga via `hidden`, ver carteira-cerebro.js). `:not([hidden])` em vez
   de `display:flex` direto na classe — garante que o `display` só é
   aplicado quando NÃO está oculto, sem brigar com o `[hidden]` do
   navegador (um `display` incondicional na classe pode vencer o
   `[hidden]` padrão do navegador dependendo da folha de estilo do tema). */
.cfd-cerebro-carregando:not([hidden]) {
    display: flex;
}
.cfd-cerebro-carregando {
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.cfd-cerebro-spinner {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gridline);
    border-top-color: var(--series-1);
    border-radius: 50%;
    animation: cfd-cerebro-girar 0.7s linear infinite;
}
@keyframes cfd-cerebro-girar {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cfd-cerebro-spinner {
        animation: none;
    }
}

.cfd-carteira-tabela-transacoes tbody tr {
    text-transform: uppercase;
}
.cfd-carteira-tabela-transacoes button.cfd-carteira-excluir-transacao {
    padding: 4px 9px;
    border: 1px solid var(--critical);
    border-radius: 6px;
    background: transparent;
    color: var(--critical);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.cfd-carteira-tabela-transacoes button.cfd-carteira-excluir-transacao:hover {
    background: var(--critical);
    color: #fff;
}

/* Cérebro — form de aporte/slider e estado de carregamento. O resto
   (tabela de alocação, gráficos do backtest, disclaimer) reaproveita
   .fii-dados-tabela/.fii-dados-cards/.fii-dados-chart/.fii-dados-nota
   já existentes, sem duplicar classes. */
.cfd-cerebro-campo-slider input[type="range"] {
    width: 100%;
    accent-color: var(--series-1);
    cursor: pointer;
}
#cfd-cerebro-slider-valor {
    font-weight: 700;
    color: var(--series-1);
}
/* Checkbox "sou investidor comum" — pedido do usuário em 2026-09 (filtro
   de fundos restritos a investidor qualificado/profissional). */
.cfd-cerebro-campo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.cfd-cerebro-campo-checkbox input[type="checkbox"] {
    accent-color: var(--series-1);
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Título de cada mês na lista "Carteira de [mês]" (últimos N meses do
   backtest) — mais leve que .fii-dados-section-title (essa tem borda
   grossa embaixo, pesada demais repetida várias vezes seguidas). */
.cfd-cerebro-mes-titulo {
    margin: 28px 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* O 1º bloco do resultado (h4 do mês atual OU <details> de um mês
   anterior, se o backtest só devolver meses anteriores) não deve ter a
   margem superior de separação entre blocos — só entre um bloco e o
   próximo. Escopado ao contêiner que o AJAX substitui (ver
   carteira-cerebro.js), não a `:first-child` solto: <summary> é sempre
   o 1º filho do seu <details>, então um seletor genérico bateria em
   TODOS os meses recolhidos, não só no 1º bloco da página. */
#cfd-cerebro-resultado-wrap > .cfd-cerebro-mes-titulo:first-child,
#cfd-cerebro-resultado-wrap > .cfd-cerebro-mes-detalhe:first-child > .cfd-cerebro-mes-titulo {
    margin-top: 8px;
}
/* Meses anteriores (não o atual) ficam num <details> fechado por
   padrão — pedido do usuário em 2026-09: "colocar nos dois meses
   anteriores um ocultar para economizar tela". Marcador nativo trocado
   por uma seta própria porque `display:flex` do título (herdado de
   .cfd-cerebro-mes-titulo) já desliga o `::marker` nativo do <summary>. */
.cfd-cerebro-mes-detalhe summary.cfd-cerebro-mes-titulo {
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.cfd-cerebro-mes-detalhe summary.cfd-cerebro-mes-titulo::-webkit-details-marker {
    display: none;
}
.cfd-cerebro-mes-detalhe summary.cfd-cerebro-mes-titulo::before {
    content: '▸';
    display: inline-block;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.cfd-cerebro-mes-detalhe[open] summary.cfd-cerebro-mes-titulo::before {
    transform: rotate(90deg);
}
/* Texto de fluxo ("vendemos X, esse valor foi pra Y") acima da tabela,
   nos meses em que houve venda — pedido do usuário em 2026-09. */
.cfd-cerebro-fluxo {
    margin: 4px 0 12px;
    padding: 10px 14px;
    background: var(--series-1-wash);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}
/* Nota inline na célula de quantidade quando a fatia do aporte/dividendo
   pra esse ativo, sozinha, não fecha nem 1 ação/cota — pedido do usuário
   em 2026-09 ("está pedindo pra investir mas não dá uma ação pra
   comprar"): deixa claro que "Aportando" + "0" não é contraditório, o
   valor só ainda não é grande o bastante, some pro caixa do mês seguinte. */
.cfd-cerebro-nota-acumula {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
}
.cfd-cerebro-linha-mantida {
    opacity: 0.65;
}
.cfd-cerebro-linha-mantida td {
    font-style: italic;
}
.cfd-cerebro-linha-vendida {
    opacity: 0.65;
}
.cfd-cerebro-linha-vendida td {
    font-style: italic;
}
.cfd-cerebro-badge-vendido {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(208, 59, 59, 0.1);
    color: var(--critical);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Importar nota de corretagem (PDF) — pedido do usuário em 2026-09. Botão
   de upload reaproveita `.cfd-carteira-btn` (label envolve o <input
   type="file" hidden>, clique no label abre o seletor de arquivo nativo,
   sem JS pra isso). */
.cfd-carteira-nota-upload-label {
    cursor: pointer;
    margin-bottom: 12px;
}

.cfd-carteira-tabela-revisao {
    width: 100%;
    border-collapse: collapse;
}
.cfd-carteira-tabela-revisao th,
.cfd-carteira-tabela-revisao td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--gridline);
    vertical-align: top;
}
.cfd-carteira-tabela-revisao th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 700;
}
.cfd-carteira-tabela-revisao input[type="text"],
.cfd-carteira-tabela-revisao input[type="number"],
.cfd-carteira-tabela-revisao input[type="date"],
.cfd-carteira-tabela-revisao select {
    width: 100%;
    min-width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.88rem;
    box-sizing: border-box;
}
/* `position: relative` só na célula do ticker — é onde a lista de
   autocomplete (`position: absolute`) precisa se ancorar. */
.cfd-carteira-nota-col-ticker {
    position: relative;
    min-width: 140px;
}
.cfd-carteira-nota-col-status {
    min-width: 130px;
}

.cfd-carteira-nota-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cfd-carteira-nota-status-ok {
    background: rgba(0, 99, 0, 0.1);
    color: var(--good);
}
.cfd-carteira-nota-status-ambiguo,
.cfd-carteira-nota-status-buscando {
    background: rgba(166, 106, 0, 0.12);
    color: var(--warn);
}
.cfd-carteira-nota-status-nao-encontrado {
    background: rgba(208, 59, 59, 0.1);
    color: var(--critical);
}
.cfd-carteira-nota-linha-erro {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--critical);
}
.cfd-carteira-nota-retry {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
}
.cfd-carteira-nota-linha-importada td {
    opacity: 0.6;
}