/* ═══════════════════════════════════════ CONTA E PAINEL NA TELA LARGA ══
   Dono, 14/09/2026: Meu Painel, Minha Carteira e as telas da conta são PAINEL
   (ferramenta, dashboard) — ocupam SEMPRE a largura da tela, alinhados à
   esquerda, do notebook de 1.300px ao monitor de 2.600px. E tela larga não
   estica card: REORGANIZA — o que exigia rolar vai para o lado.

   Tudo aqui vive sob `html[data-trilho]` (só o desktop com o menu lateral):
   o celular não vê nada disto. Cada tela se identifica por `data-tela` no
   <body>, porque `main.ct-main` existe na carteira E nas contribuições.
   Respiros e degraus são os de `css/trilho-shell.css` (--pag-pad-l etc.). */


/* ─────────────────────────────────────────────────────────── carteira ── */

/* Sem teto de 1.200px centrado: encosta no trilho, com o respiro da home. */
html[data-trilho] body[data-tela="carteira"] main.ct-main {
  max-width: none;
  margin: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}

/* Pergunta do estágio × dinheiro em caixa: dois cartões curtos que, empilhados
   em 1.500px, eram duas faixas com o lado direito vazio. Lado a lado, o caixa
   vira coluna (valor em cima, ações embaixo) na altura da pergunta. Só quando
   os dois existem — o estágio de quem está começando é um destaque sozinho. */
@media (min-width: 1600px) {
  html[data-trilho] body[data-tela="carteira"] #ct-content:has(> .ct-estagio-topo + .ct-caixa-card) {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: 14px;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-content:has(> .ct-estagio-topo + .ct-caixa-card) > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo:has(+ .ct-caixa-card) { grid-column: 1; margin-bottom: 18px; }
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo + .ct-caixa-card {
    grid-column: 2;
    margin-bottom: 18px;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo + .ct-caixa-card .ct-caixa-actions { justify-content: flex-start; }
  /* A base de 200px do valor era largura na linha; na coluna virava altura. */
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo + .ct-caixa-card .ct-caixa-info { flex: 0 0 auto; }
  /* A pergunta abre em duas colunas (o porquê | o próximo passo): empilhada, ela
     ficava com o dobro da altura do caixa e o cartão dele, um vão no meio. */
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo:not(.ct-estagio-topo--destaque):has(+ .ct-caixa-card):has(> .ct-estagio-proximo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-content: start;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo:has(+ .ct-caixa-card) > * { grid-column: 1; }
  html[data-trilho] body[data-tela="carteira"] #ct-content > .ct-estagio-topo:not(.ct-estagio-topo--destaque):has(+ .ct-caixa-card) > .ct-estagio-proximo {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

/* A partir de 2.300px o cabeçalho do patrimônio divide a linha com o convite
   da extensão (quando ele está na tela): cada um no tamanho do que tem a dizer. */
@media (min-width: 2300px) {
  html[data-trilho] body[data-tela="carteira"] main.ct-main:has(> #rap-extb3) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 14px;
    align-content: start;
  }
  html[data-trilho] body[data-tela="carteira"] main.ct-main:has(> #rap-extb3) > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] main.ct-main > .ct-hero:has(~ #rap-extb3) { grid-column: 1; margin-bottom: 18px; }
  html[data-trilho] body[data-tela="carteira"] main.ct-main > #rap-extb3 { grid-column: 2; grid-row: 1; margin-bottom: 18px; }
}

/* ── aba Meu patrimônio (desempenho + o que você tem) ──
   Desde 13/10/2026 o desenho dela mora no CSS da própria página
   (minha-conta/carteira/index.html § "Meu patrimônio em duas colunas"), com
   container queries: a largura que manda é a da COLUNA, não a da tela. */

/* ── aba Rendimentos ──
   A partir de 1.900px (dono, 21/09/2026):
     linha 1: recebido mês a mês · de onde veio · calendário do mês
     linha 2: já contratado · nota
   O calendário na largura da tela tinha dias de 300px; na terceira coluna
   ele volta a ter cara de calendário. O "já contratado" (o que ainda vai
   cair) desce para a linha de baixo. */
@media (min-width: 1900px) {
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .rd-grid { display: contents; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .rd-grid > * { margin-bottom: 14px; min-width: 0; align-self: stretch; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .rd-grid > .rd-card-chart { grid-column: 1; grid-row: 2; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .rd-grid > .rd-card-fontes { grid-column: 2; grid-row: 2; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .ct-bloco:has(.rd-cal) { grid-column: 3; grid-row: 2; margin-bottom: 14px; align-self: stretch; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos .rd-cal { max-width: none; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > .rd-grid + .ct-bloco { grid-column: 1; grid-row: 3; margin-bottom: 14px; }
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos > p.rd-nota { grid-column: 2 / -1; grid-row: 3; max-width: var(--pag-texto-max); margin-top: 0; }
  /* Sem "já contratado", a nota fica na coluna da esquerda. */
  html[data-trilho] body[data-tela="carteira"] #ct-rendimentos:not(:has(> .rd-grid + .ct-bloco:not(:has(.rd-cal)))) > p.rd-nota { grid-column: 1 / -1; }
}

/* ── aba Giro e IR ──
   O mês a mês (46 linhas de três números) numa faixa de 2.100px espalhava
   comprou / vendeu / resultado a 700px um do outro, e "o que essa carteira te
   deu" punha o rótulo num canto e o valor no outro (dono, 21/09/2026). A
   regra antiga pedia `#ct-giro-wrap + #ct-giro-historico` e nunca casou: o
   card da sincronia B3 nasce ENTRE os dois.
     ≥1.100px (dono, 24/10/2026: no Mac de ~1.300px os cards viravam 100%):
               coluna 1 = mês a mês e, LOGO ABAIXO dele, a movimentação;
               coluna 2 = `.gr-col-dir` (herói, prejuízo acumulado, DARFs, IRPF),
               sincronia B3 e a nota. Cada coluna é independente: a altura de
               uma não empurra os cards da outra (a linha 2 é `1fr`).
     ≥2.300px: três colunas; a movimentação ganha a terceira, do topo. */
@media (min-width: 1100px) {
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    column-gap: 14px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap { display: contents; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .ct-bloco:has(> .gr-mes) { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  /* Mês a mês + "Seu contador e o IRPF" numa caixa só: o card fica colado embaixo
     do histórico, sem herdar a altura da coluna vizinha (dono, 27/10/2026). */
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-esq { grid-column: 1; grid-row: 1; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-esq > .ct-bloco { margin-bottom: 0; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-esq > .gr-declarar { margin-top: 14px; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-historico { grid-column: 1; grid-row: 2; min-width: 0; margin-top: 14px; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-dir { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #rap-b3-card { grid-column: 2; grid-row: 3; min-width: 0; margin: 14px 0 0; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-nota { grid-column: 2; grid-row: 4; min-width: 0; margin: 14px 0 0; }
  /* Prejuízo acumulado: quatro números em 500px ficavam apertados; viram 2 por linha. */
  html[data-trilho] body[data-tela="carteira"] .gr-prej-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 2300px) {
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .ct-bloco:has(> .gr-mes),
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-esq { grid-row: 1 / -1; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-col-dir { grid-row: 1; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #rap-b3-card { grid-row: 2; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-wrap > .gr-nota { grid-row: 3; }
  html[data-trilho] body[data-tela="carteira"] .gr-prej-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Três cards INTEIROS: mês a mês · isenção, o que te deu e sincronia ·
     movimentação. O mês a mês já correu em duas colunas de jornal e foi
     recusado (dono, 21/09/2026): card de leitura não se parte, cada mês é
     uma linha. */
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> #ct-giro-wrap .gr-mes) > #ct-giro-historico { grid-column: 3; grid-row: 1 / -1; margin-top: 0; }
}

/* ── aba Consumo ──
   A tabela mês a mês em 2.100px punha 200px de vão entre um número e o
   próximo, e os seis cartões de média ocupavam a metade esquerda de uma faixa
   vazia (dono, 21/09/2026). A partir de 1.600px: tabela à esquerda, com teto,
   e os cartões empilhados em grade na coluna do lado. */
@media (min-width: 1600px) {
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) {
    display: grid;
    grid-template-columns: minmax(0, 1500px) clamp(360px, 26vw, 640px);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 18px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-head { grid-row: 1; margin-bottom: 12px; }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-tblwrap { grid-column: 1; grid-row: 2; margin: 0; }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-hint { grid-column: 1; grid-row: 3; }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-drop { grid-column: 1; grid-row: 4; }
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-cards { grid-column: 2; grid-row: 2 / -1; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 0; }
  /* A tabela é longa e os cartões são o resumo dela: acompanham a rolagem. */
  html[data-trilho] body[data-tela="carteira"] #ct-consumo-wrap:has(> .cs-tblwrap):has(> .cs-cards) > .cs-cards { position: sticky; top: 16px; align-self: start; }
}

/* ─────────────────────────────────────────────────────────── meu painel ── */

/* O `main` e o `.mp` tinham teto de 1.200px centrado (a coluna do cabeçalho
   antigo). Com o trilho, o painel encosta nele e vai até a borda direita. */
html[data-trilho] body[data-tela="painel"] .page-wrapper > main.main-content {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
html[data-trilho] body[data-tela="painel"] .mp {
  max-width: none;
  margin: 0;
  padding: 20px var(--pag-pad-r) 56px var(--pag-pad-l);
}

/* Atalhos do rodapé: três cartões de uma linha não se esticam até 700px cada. */
html[data-trilho] body[data-tela="painel"] .mp-access { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* A partir de 1.100px o painel vira duas colunas (dono, 24/10/2026: no Mac de
   ~1.300px a coluna da direita se desfazia e o painel ficava desorganizado). Entre
   1.100 e 1.599px a coluna de apoio é uma fila de cartões de largura cheia; a
   grade interna de 2 colunas dela (mensal | fluxo) só vem a partir de 1.600px.
   Layout: a lista (notícias + ativos,
   com a barra de visão grudada) à esquerda, e os blocos de apoio à direita,
   onde antes esperavam no fim da rolagem — nesta ordem (dono, 21/09/2026):
   fluxo estrangeiro, resumo do dia JÁ ABERTO, inflação, Selic, juros EUA e,
   por último, a análise da carteira. A lista de ativos é UMA coluna em
   qualquer largura: partida em colunas de jornal ela foi recusada. Os invólucros `.mp-corpo`
   e `.mp-lado` são `display: contents` no celular (regra no <style> da página). */
@media (min-width: 1100px) {
  html[data-trilho] body[data-tela="painel"] .mp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 24vw, 560px);
    column-gap: var(--pag-gap);
    row-gap: 11px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="painel"] .mp > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="painel"] .mp > .mp-corpo {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  /* Grade de 2 colunas: tudo ocupa a linha inteira, menos "Resultado mensal"
     e "Fluxo estrangeiro", que dividem uma linha (dono, 22/09/2026: largos
     demais sozinhos). Sem o fluxo, o mensal volta à linha inteira. */
  html[data-trilho] body[data-tela="painel"] .mp > .mp-lado {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 11px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="painel"] .mp-lado > *,
  html[data-trilho] body[data-tela="painel"] .mp-lado > .mp-duo > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec,
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpFluxoSec:not([hidden]) { grid-column: auto; align-self: stretch; }
  html[data-trilho] body[data-tela="painel"] .mp-lado:not(:has(#mpFluxoSec:not([hidden]))) #mpMesSec { grid-column: 1 / -1; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec > .mp-hero,
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpFluxoSec > a { height: 100%; box-sizing: border-box; }
  /* alturas do conteúdo final reservadas desde o esqueleto (medido em 22/09/2026) */
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec > .mp-hero,
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpFluxoSec > a { min-height: 179px; }
  html[data-trilho] body[data-tela="painel"] .mp-lado .mp-macro-card { min-height: 169px; box-sizing: border-box; }
  /* Na coluna estreita, cada bloco numa linha e sem o respiro de "nova seção". */
  html[data-trilho] body[data-tela="painel"] .mp-lado > *,
  html[data-trilho] body[data-tela="painel"] .mp-lado > .mp-duo > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  html[data-trilho] body[data-tela="painel"] .mp-lado .mp-duo { display: contents; }
  /* "Minha carteira" e "Resultado mensal" abrem a coluna (o JS os traz do topo). */
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec { order: -2; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpFluxoSec { order: -1; }
  html[data-trilho] body[data-tela="painel"] .mp-lado .mp-hero-mes { padding: 12px 14px; cursor: pointer; }
  /* "Minha carteira" e "Resultado mensal" abrem a coluna da direita; a tira
     do dia abre a da esquerda — já no HTML, nenhum JS move nó. */
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpSumSec { order: -3; }
  /* altura do card preenchido (% + valor + total + chips + rodapé do dia), reservada
     desde o esqueleto: sem ela a coluna descia 59px quando o dado chegava */
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpSumSec > .mp-hero { min-height: 187px; box-sizing: border-box; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec > .mp-hero { min-height: 179px; }
  html[data-trilho] body[data-tela="painel"] .mp-corpo > #secPulso { margin-top: 0; }
  html[data-trilho] body[data-tela="painel"] .mp-lado > .rap-plano-card { order: 0; }
  html[data-trilho] body[data-tela="painel"] .mp > *, html[data-trilho] body[data-tela="painel"] .mp-corpo > *, html[data-trilho] body[data-tela="painel"] .mp-lado > *, html[data-trilho] body[data-tela="painel"] .mp-duo { flex: none; }
  html[data-trilho] body[data-tela="painel"] .mp-toprow:not(:has(> *)) { display: none; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpDiaSec { order: 2; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMacroSec { order: 3; }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpRecoSec { order: 4; }
  /* Resumo do dia aberto no lugar (o JS traz a navegação e o corpo da gaveta
     para dentro da seção): um card, com a lista do dia inteira. */
  html[data-trilho] body[data-tela="painel"] #mpDiaSec.is-aberto { background: var(--mp-card); border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 12px 14px 14px; }
  html[data-trilho] body[data-tela="painel"] #mpDiaSec.is-aberto > .mp-dia-strip { display: none; }
  html[data-trilho] body[data-tela="painel"] #mpDiaSec.is-aberto > .mp-dia-ihead { display: block; font-weight: 800; font-size: 0.95rem; margin-bottom: 8px; }
  html[data-trilho] body[data-tela="painel"] #mpDiaSec.is-aberto .mp-dia-item:last-child { margin-bottom: 0; }
  html[data-trilho] body[data-tela="painel"] .mp-lado .mp-macro { grid-template-columns: minmax(0, 1fr); }
  /* Seção escondida da coluna fica escondida. Esta linha terminava em VÍRGULA e
     herdava o bloco seguinte (display:grid de 2 colunas): o macro ainda sem dado
     pintava como uma grade estreita e virava coluna larga ~0,7 s depois — a
     "piscada" do painel ao recarregar (medido em 22/09/2026). */
  html[data-trilho] body[data-tela="painel"] .mp-lado > [hidden] { display: none !important; }

}

/* 1.100–1.599px: a coluna da direita (360px) é estreita para dois cartões por linha. */
@media (min-width: 1100px) and (max-width: 1599px) {
  html[data-trilho] body[data-tela="painel"] .mp > .mp-lado { grid-template-columns: minmax(0, 1fr); }
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpMesSec,
  html[data-trilho] body[data-tela="painel"] .mp-lado #mpFluxoSec:not([hidden]) { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {
  /* Carteira de hoje × plano de partida: lado a lado, na mesma altura. */
  html[data-trilho] body[data-tela="painel"] .mp-toprow:has(> #mpSumSec + .rap-plano-card):not(:has(> #mpDivMes:not([hidden]))):not(:has(> #secPulso)) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 11px;
    align-items: stretch;
  }
  html[data-trilho] body[data-tela="painel"] .mp-toprow > #mpSumSec + .rap-plano-card { margin: 0; }
  html[data-trilho] body[data-tela="painel"] .mp-toprow:has(> .rap-plano-card) #mpHero { height: 100%; }
}

/* ── aba Meu plano ──
   Enquanto não há plano salvo, a aba é uma pergunta com três respostas: um
   formulário curto, com a largura de quem lê a opção inteira. */
html[data-trilho] body[data-tela="carteira"] .cp-jornada-intro { max-width: 1100px; }
/* Meu plano: o plano (projeção) à esquerda, a cobrança mês a mês (performance
   e tabela) à direita. Em largura total os dois gráficos paravam no
   `max-width: 760px` do .cp-chart e deixavam 1.400px vazios ao lado (dono,
   21/09/2026). Na coluna o gráfico ocupa a largura dela — cresce a ÁREA de
   plotagem, régua de docs/PLANO_DA_META.md. */
@media (min-width: 1600px) {
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > * { grid-column: 1 / -1; min-width: 0; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a { grid-column: 1; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-b { grid-column: 2; padding-left: 32px; border-left: 1px dashed var(--border); align-self: stretch; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-b > .cp-perf:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-b > .cp-acomp:first-child { margin-top: 0; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) .cp-chart { max-width: none; }
}
/* ≥1.900px: três colunas — o RESUMO do plano (quanto, até quando, o recado e
   a premissa), o gráfico da projeção e a cobrança mês a mês. Em duas colunas
   de 1.000px os gráficos cresciam até 450px de altura com fonte de cartaz
   (dono, 21/09/2026: "espichado"). */
@media (min-width: 1900px) {
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 28px;
  }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a { display: contents; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-head { grid-column: 1; grid-row: 1; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a > .cp-hero-row { grid-column: 1; grid-row: 2; flex-wrap: wrap; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a > .cp-meta-linha { grid-column: 1; grid-row: 3; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a > .cp-premissa { grid-column: 1; grid-row: 4; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a > .cp-jn-chart-wrap { grid-column: 2; grid-row: 1 / -1; margin: 0; padding-left: 28px; border-left: 1px dashed var(--border); align-self: stretch; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-b { grid-column: 3; grid-row: 1 / -1; padding-left: 28px; }
  html[data-trilho] body[data-tela="carteira"] .cp-jornada-dash:has(> .cp-jn-col-b > *) > .cp-jn-col-a > * { min-width: 0; }
}

/* ── aba Análise IA ──
   O resumo da análise é texto corrido e segue o teto da linha.
   A partir de 1.900px (dono, 21/09/2026): o perfil do investidor era um card
   de cinco números ilhado no alto de uma coluna vazia, e a análise corria
   numa tira de 2.500px. Agora o perfil vira uma FAIXA no topo (os cinco
   números numa linha) e a análise se abre em três colunas, pela natureza do
   que cada bloco responde:
     1 · a FOTO da carteira: raio-x, a parte em bolsa e reserva
     2 · o que FAZER: pontos de atenção, dois por linha
     3 · a LEITURA: o texto do analista
   e o simulador de cenários embaixo das duas primeiras.
   Quem ocupa a coluna inteira atravessa até a última linha (`1fr`), para a
   sobra não virar vão entre os blocos da coluna 1. */
html[data-trilho] body[data-tela="carteira"] .ct-analise-resumo { max-width: var(--pag-texto-max); }
@media (min-width: 1900px) {
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> .ct-bloco > .ct-perfil-grid):has(> .ct-analise) > .ct-bloco:has(> .ct-perfil-grid) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> .ct-bloco > .ct-perfil-grid):has(> .ct-analise) > .ct-bloco:has(> .ct-perfil-grid) > .ct-bloco-title { margin: 0; gap: 16px; }
  html[data-trilho] body[data-tela="carteira"] .ct-mobsec:has(> .ct-bloco > .ct-perfil-grid):has(> .ct-analise) > .ct-bloco:has(> .ct-perfil-grid) > .ct-perfil-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
  }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > * { grid-column: 1 / -1; min-width: 0; margin: 0 0 16px; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-hero { grid-row: 1; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-block:has(.av-pat-grid) { grid-column: 1; grid-row: 2; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-block:has(.av-b3-list) { grid-column: 1; grid-row: 3; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-reserva { grid-column: 1; grid-row: 4; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-block:has(.av-sug-grid) { grid-column: 2; grid-row: 2 / 6; }
  /* O simulador (gráfico + leitura de cada classe) espremido numa coluna
     tinha gráfico de 250px: ele fecha a página nas duas primeiras. */
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-sim { grid-column: 1 / 3; grid-row: 6; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root > .av-leitura { grid-column: 3; grid-row: 2 / -1; }
  html[data-trilho] body[data-tela="carteira"] .ct-analise .av-root .av-sug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ───────────────────────────────────────────────────────── contribuições ── */

/* Lista de 820px centrada → a tela inteira, à esquerda, com os cartões em
   grade: cada relato é curto, e empilhado ocupava três telas de rolagem. A
   linha estica os cartões à mesma altura (a resposta da equipe fica alinhada). */
html[data-trilho] body[data-tela="contribuicoes"] main.ct-main {
  max-width: none;
  margin: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}
html[data-trilho] body[data-tela="contribuicoes"] .ct-head p { max-width: var(--pag-texto-max); }
html[data-trilho] body[data-tela="contribuicoes"] .ct-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 12px;
  align-items: stretch;
}
/* Sem login, vazio ou erro: um aviso só, do tamanho de um convite. */
html[data-trilho] body[data-tela="contribuicoes"] .ct-list > :is(.ct-empty, .ct-gate) { grid-column: 1 / -1; max-width: 760px; }


/* ───────────────────────────────────────────────────────────── conversas ── */

/* As conversas são linhas curtas (ticker, prévia, hora): em grade elas cabem
   numa tela só em vez de uma coluna de 800px no meio do monitor. */
html[data-trilho] body[data-tela="conversas"] main.mc-main {
  max-width: none;
  margin: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}
html[data-trilho] body[data-tela="conversas"] .mc-hero p { max-width: var(--pag-texto-max); }
html[data-trilho] body[data-tela="conversas"] .conv-tabs,
html[data-trilho] body[data-tela="conversas"] .conv-anon { max-width: 820px; }
html[data-trilho] body[data-tela="conversas"] .conv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 8px;
  align-items: stretch;
}
html[data-trilho] body[data-tela="conversas"] .conv-state { max-width: 760px; }

/* ─────────────────────────────────────────────────────── meu consumo ── */
/* Ferramenta própria (12/11/2026): mesma largura de tela inteira da carteira. */
html[data-trilho] body[data-tela="consumo"] main.ct-main {
  max-width: none;
  margin: 0;
  padding-left: var(--pag-pad-l);
  padding-right: var(--pag-pad-r);
}