/* Camada visual do Neomatis. Tokens de cor, DOM e regras de estudo originais.
   Remover estes dois arquivos e suas referências devolve a apresentação antiga. */
/* DESTAQUE VISUAL — 16/09/2026 (Fase A de `docs/plano-material-e-ferramentas-
 * lado-a-lado.md`, a partir do exemplo do Ask Maeve que ela trouxe).
 *
 * O pedido dela (depois de esclarecer que NÃO era para tirar cor): "estamos
 * sempre no mesmo tom pastel... os nossos botões não têm destaque". A leitura
 * é HIERARQUIA, não menos cor: uma cor forte usada com força em poucos
 * lugares, sobre superfícies brancas, com botões que parecem clicáveis.
 *
 * Mudou nesta fase: o cabeçalho da tela de estudo virou cartão em degradê; o
 * cartão de leitura (resumo/ferramenta) ficou branco (`--surface-conteudo`),
 * mais claro que o `--card` marfim para saltar dele — a mesma lógica que já
 * fez `--card` saltar de `--paper`; as abas ganharam fundo tingido na
 * selecionada; os botões ganharam relevo por SOMBRA (ver o bloco no final de
 * `style.css`); e "Marcar como concluído" virou a ação cheia da tela (como o
 * "Continuar estudando" do Maeve), com o cheio migrando para "✓ Concluído"
 * porque, feito o gesto, ele já não é a ação a chamar atenção.
 *
 * NADA de comportamento mudou: nenhuma classe de estado, nenhum listener novo
 * (a única linha de JS da fase é `note-produzir-inicio` no `btnAI`, em
 * `app.js`, e ela só marca onde o traço divisório da barra entra).
 */
.design-estudo .sidebar { background: var(--side-bg); padding-top: 24px; }
.design-estudo .side-brand > strong { font-size: 24px; color: var(--card); margin-bottom: 16px; }
.design-estudo .side-brand { border-bottom-color: rgba(255,255,255,.13); padding-bottom: 20px; }
.design-estudo .sidebar .contest-add { color: var(--bronze-soft); }
.design-estudo .side-item { min-height: 40px; margin: 2px 0; border-radius: 7px; }
.design-estudo .side-item.is-active { background: var(--petrol); color: #fff; box-shadow: inset 3px 0 var(--bronze); }
.design-estudo .side-item.is-active .side-dot { background: #fff !important; }
/* Relevo do único botão cheio que sobra no menu escuro (ver o inventário no
   final de `style.css`): mesma sombra --relevo-cheio, e o mesmo afundar ao
   clicar que qualquer outro botão cheio do app. */
.design-estudo .side-action { background: var(--petrol); border-color: var(--petrol); color: #fff; box-shadow: var(--relevo-cheio); }
.design-estudo .side-action:active { transform: translateY(2px); box-shadow: none; }
.design-estudo .side-foot { position: sticky; bottom: 0; flex-shrink: 0; margin-top: auto; padding: 18px 20px; background: var(--side-bg); color: var(--side-ink); border-top: 1px solid rgba(255,255,255,.16); }
.design-estudo .side-foot b { font-size: 17px; color: #fff; }
/* O contador e TODOS os controles permanecem no mesmo componente. */
.design-estudo .cronometro { margin: 14px 12px; padding: 12px; border-color: rgba(255,255,255,.16); border-radius: 9px; }
.design-estudo .crono-display { font-size: 30px; margin: 4px 0; }
.design-estudo .crono-fase { margin: 9px 0 0; }
.design-estudo .crono-medido { margin: 4px 0 10px; }
.design-estudo .crono-botoes { gap: 6px; }
.estudo-preview { background: var(--petrol); color: #fff; padding: 9px 20px; font: 12px/1.6 var(--sans); }
.design-estudo .masthead-inner { max-width: 1440px; padding-top: 15px; padding-bottom: 15px; }
.design-estudo .masthead { border-bottom: 2px solid var(--bronze); }
.design-estudo .view-header, .design-estudo .search-bar { max-width: 1440px; }
.design-estudo .view-header { margin-top: 24px; }
.design-estudo .view-header-box { background: none; border-left: 0; padding-left: 0; box-shadow: none; }
.design-estudo .view-header h2 { font-size: clamp(26px, 3vw, 36px); }
.design-estudo .search-bar { gap: 10px; }
.design-estudo #disciplines { max-width: 1440px; margin-top: 20px; }
.design-estudo .discipline { border: 0; border-left: 4px solid var(--petrol); border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 0 var(--card-edge); }
.design-estudo .discipline > summary { padding: 20px; gap: 16px; }
.design-estudo .disc-name { font-family: var(--sans); font-size: 17px; line-height: 1.5; }
.design-estudo .disc-code { border: 0; font-size: 12px; padding: 4px; }
.design-estudo .disc-body { padding: 20px; }
.design-estudo .node-row { padding: 8px 6px; }
.design-estudo .tree li.done > .node-row .node-text { text-decoration: none; }
.design-estudo .note-toggle { width: 32px; height: 32px; }
.design-estudo .note-toggle:hover { background: var(--petrol-soft); }
.design-estudo .note-toggle.has-note:hover { background: var(--bronze-ink); color: #fff; }
.design-estudo .note-toggle.tem-anotacao:hover { background: var(--petrol); color: #fff; }

/* Modo de estudo: índice + documento. Nenhum editor é movido ou clonado. */
.design-estudo.estudando-assunto .view-header,
.design-estudo.estudando-assunto .search-bar { display: none; }
body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr;
  gap: 0; margin: 0; padding: 0; max-width: none; min-height: calc(100vh - 110px);
  background: var(--card); animation: none;
}
/* A coluna do material (Fase C) é filha direta de #disciplines como o índice:
   sem o `:not(.estudo-direita)` esta regra a escondia, e a coluna "abria" com
   o PDF carregado e 0px de largura (visto no navegador, 16/09/2026). */
#disciplines.estudo-aberto > :not(.estudo-caminho):not(.estudo-cabecalho):not(.estudo-indice):not(.estudo-direita) { display: none; }
#disciplines.estudo-aberto .estudo-caminho { display: contents; }
#disciplines.estudo-aberto .estudo-caminho > :not(.estudo-caminho):not(.estudo-assunto-ativo) { display: none; }
#disciplines.estudo-aberto .estudo-assunto-ativo {
  display: block; grid-column: 2; grid-row: 2; margin: 0; min-width: 0;
  padding: 0 clamp(20px, 3vw, 52px) 28px; list-style: none;
}
#disciplines.estudo-aberto .estudo-assunto-ativo > .node-row { display: none; }
/* CARTÃO EM DEGRADÊ (era faixa com borda inferior). O ângulo e os dois pontos
   de parada imitam o cartão de visão geral do Maeve (pêssego→branco): aqui é
   teal→cobre-claro→branco, as duas cores de acento da paleta, nunca uma cor
   nova. `--petrol-wash-forte` é o teal a 20% sobre o card — ver a conta e os
   contrastes medidos no comentário do :root, em `style.css`. */
.estudo-cabecalho {
  grid-column: 1 / -1; margin: 16px; padding: 22px 30px 26px; border-radius: 12px;
  border: 1px solid var(--petrol-accent);
  background: linear-gradient(120deg, var(--petrol-wash-forte) 0%, var(--bronze-wash) 70%, var(--card) 100%);
}
.estudo-contexto-acoes { display: flex; align-items: center; gap: 20px; }
/* --petrol como TEXTO sobre o degradê cai para 4,37:1 (abaixo de AA) — por
   isso a trilha usa --petrol-hover (5,94:1 sobre a parte mais escura do
   degradê), o mesmo tom que já serve de hover/pressão do botão principal. */
.estudo-voltar { border: 0; background: none; color: var(--petrol-hover); padding: 6px 0; font: 13px var(--sans); }
.estudo-contexto { color: var(--ink-soft); font: 12px/1.6 var(--sans); margin: 0; }
.estudo-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; }
.estudo-titulo { margin: 0; font: 600 clamp(25px, 2.6vw, 40px)/1.2 var(--serif); overflow-wrap: anywhere; }
.estudo-titulo:focus { outline: none; }
/* INVERTIDO (16/09/2026): antes do gesto, "Marcar como concluído" É a ação
   principal da tela — como o "Continuar estudando" cheio do Maeve — e por
   isso nasce CHEIA. Depois do clique ela já fez o trabalho: "✓ Concluído"
   não precisa mais chamar atenção, e volta a ser clara. */
.estudo-concluir {
  border: 1px solid var(--petrol); background: var(--petrol); color: #fff;
  font: 500 13px var(--sans); border-radius: 7px; padding: 11px 15px; flex: none;
  box-shadow: var(--relevo-cheio);
}
.estudo-concluir:hover { background: var(--petrol-hover); }
.estudo-concluir[aria-pressed="true"] {
  background: var(--card); color: var(--petrol); box-shadow: var(--relevo);
}
.estudo-concluir[aria-pressed="true"]:hover { background: var(--petrol-soft); border-color: var(--petrol-accent); }
.estudo-concluir:active { transform: translateY(2px); box-shadow: none; }
.estudo-indice { grid-column: 1; grid-row: 2; padding: 25px 16px; background: var(--paper); border-right: 1px solid var(--rule); min-width: 0; }
.estudo-disciplina { margin: 0 8px 16px; font: 600 15px/1.5 var(--sans); }
.estudo-busca { width: 100%; min-width: 0; border: 1px solid var(--card-edge); background: var(--card); padding: 10px; border-radius: 7px; color: var(--ink); font: 13px var(--sans); }
.estudo-assuntos { margin-top: 20px; }
.estudo-grupo { margin: 18px 8px 8px; color: var(--bronze-ink); font: 600 12px/1.6 var(--sans); }
.estudo-assunto { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 10px; border: 0; border-left: 3px solid transparent; background: none; border-radius: 5px; font: 13px/1.55 var(--sans); color: var(--ink); }
.estudo-assunto:hover { background: var(--petrol-soft); }
.estudo-assunto[aria-current="true"] { background: var(--petrol); color: #fff; border-left-color: var(--bronze); }
.estudo-assunto-status { width: 16px; flex: none; }
.estudo-assunto-texto { overflow-wrap: anywhere; }
.estudo-sem-resultado { font: 13px/1.6 var(--sans); color: var(--ink-soft); }
.estudo-ferramentas { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 0; }
/* SEIS ABAS (Fase B) nem sempre cabem na largura do conteúdo: rola a FAIXA
   das abas, nunca a página — `overflow-x` aqui, e cada aba com `flex: none`
   (acima) para não ser espremida antes de rolar. */
.estudo-abas { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
/* FUNDO TINGIDO na aba ativa (era só um traço fino) — o mesmo "abas com
   ícone" do Maeve. NA FASE A o ícone era emoji, por `::before`, porque as
   três abas de então (Resumo/Questões/Anotações) não precisavam de nenhuma
   linha de JS nova. NA FASE B (16/09/2026), com Flashcards/Treinar em
   níveis/Mapa mental entrando como aba, o JS já precisa tocar em cada botão
   de qualquer jeito (`estudo-layout.js` monta as seis) — e nesse ponto o
   ícone virou Tabler de traço, `<i class="ti ti-…">` no marcado, o mesmo
   padrão do resto do app (`app.js`, `mapa-mental-tela.js`). */
.estudo-aba {
  font: 500 14px var(--sans); border: 0; border-radius: 8px 8px 0 0; background: none;
  padding: 18px 14px 15px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: none;
}
.estudo-aba i { font-size: 15px; line-height: 1; }
.estudo-aba:hover { background: var(--rule); }
.estudo-aba[aria-selected="true"] {
  background: var(--petrol-soft); color: var(--petrol); box-shadow: inset 0 -3px 0 var(--petrol);
}
.estudo-aba[aria-selected="true"]:hover { background: var(--petrol-soft); }
.estudo-mostrar-indice { display: none; }
/* CARTÃO BRANCO (era fundo/borda/sombra ZERADOS — a queixa dela era
   justamente "conteúdo no mesmo tom do fundo"). SUBSTITUI a regra antiga, não
   empilha por cima: `--surface-conteudo` é branco puro, mais claro que o
   `--card` marfim do resto do app, para o resumo SALTAR do índice e da
   página — o mesmo raciocínio que já fez `--card` saltar de `--paper`.
   `border-top: 0` porque a aba ativa (acima) já fecha essa borda com o
   próprio `box-shadow` inset; repetir aqui viraria um traço dobrado. */
#disciplines.estudo-aberto .estudo-assunto-ativo > .note-panel {
  display: flex; flex-direction: column; margin: 0; animation: none;
  background: var(--surface-conteudo); border: 1px solid var(--card-edge); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 20px 24px; box-shadow: var(--elev-conteudo);
}
#disciplines.estudo-aberto .estudo-assunto-ativo > .note-panel > .painel-cabecalho { order: -2; }
#disciplines.estudo-aberto .estudo-assunto-ativo > .note-panel > .note-actions { order: -1; padding: 0 0 20px; margin: 0; }
#disciplines.estudo-aberto .estudo-assunto-ativo > .note-panel > .painel-cabecalho { border: 0; margin-bottom: 16px; padding: 0; }
#disciplines.estudo-aberto .painel-cabecalho-titulo { font-family: var(--sans); color: var(--ink-soft); }
#disciplines.estudo-aberto .note-view { font: 16px/1.85 var(--sans); }
#disciplines.estudo-aberto .note-view h2 { font-family: var(--serif); font-size: 26px; margin-top: 28px; }
#disciplines.estudo-aberto .note-view h3 { font-family: var(--sans); font-size: 19px; color: var(--petrol); }
/* O cobre entra como ACENTO (borda), nunca como texto — a mesma regra que
   `--bronze-ink` existe para cumprir em qualquer outro lugar do app. */
#disciplines.estudo-aberto .note-view blockquote { margin: 12px 0; padding: 4px 16px; border-left: 3px solid var(--bronze); }
#disciplines.estudo-aberto .note-panel > textarea { min-height: 280px; font-size: 16px; line-height: 1.8; border-radius: 6px; padding: 18px; }
#disciplines.estudo-aberto .note-actions { gap: 8px; padding-top: 16px; flex-wrap: wrap; }
#disciplines.estudo-aberto .note-actions button { min-height: 36px; border-radius: 6px; font-family: var(--sans); }
/* NENHUM botão cheio sobrou na barra (era .note-flashcards/.note-trilha em
   teal): com "Marcar como concluído" já cheio no cabeçalho, dois cheios na
   mesma tela brigariam pela atenção. Os dois voltam ao estilo claro
   compartilhado (ver o inventário no final de `style.css`). */
/* DOIS GRUPOS NA BARRA: "ler" (Editar, Ouvir) e "produzir" (Resumir o meu
   material e o resto). O traço marca onde o segundo começa —
   `note-produzir-inicio` é a classe que `app.js` dá ao botão "Resumir o meu
   material"; aqui só o CSS do traço. */
.note-actions .note-produzir-inicio { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--rule); }
/* OS TRÊS BOTÕES SAEM DA BARRA (Fase B, 16/09/2026): Flashcards, Treinar em
   níveis e Mapa mental viraram aba (ver `estudo-layout.js`) e o botão
   original — que continua no DOM, é ele que a aba clica "por dentro" — não
   tem mais o que fazer na barra de dentro do espaço de estudo. Fora dele
   (resumo aberto na árvore, fora do modo de estudo) eles continuam à vista e
   abrindo modal, como sempre. */
#disciplines.estudo-aberto .note-actions :is(.note-flashcards, .note-trilha, .note-mapa-mental) { display: none; }
/* O CONTÊINER DE UMA FERRAMENTA EM ABA (Fase B) leva o MESMO tratamento do
   cartão do resumo (bloco acima): branco, saltando do marfim, mesma borda e
   mesma sombra — a aba troca o CONTEÚDO, nunca a moldura. */
#disciplines.estudo-aberto .estudo-assunto-ativo > .estudo-aba-ferramenta {
  display: block; margin: 0;
  background: var(--surface-conteudo); border: 1px solid var(--card-edge); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 20px 24px; box-shadow: var(--elev-conteudo);
}
/* O RESUMO ESCONDIDO ATRÁS DE UMA ABA DE FERRAMENTA (Fase B) usa CLASSE, não
   o atributo `hidden` — o observador de `estudo-layout.js` sai do modo de
   estudo quando o painel da aba ATUAL fica `hidden`, e o Resumo escondido
   assim continuaria sendo lido como "ela saiu". `!important` pela mesma razão
   do `[hidden]` global (`style.css` ~141): a regra do cartão, acima, tem uma
   especificidade que só um `!important` vence de forma previsível. */
.estudo-oculto-pela-aba { display: none !important; }
/* AS FERRAMENTAS EM ABA (Fase B): o MESMO `<dialog>` de sempre, só que
   ANEXADO ao cartão da aba em vez do `<body>`, aberto com `show()` — nunca
   `showModal()`, que empilharia outro top layer sobre o espaço de estudo e
   traria de volta o Escape fechando o que ela está treinando ou escrevendo.
   Sair é trocar de aba, não apertar uma tecla. O botão "Fechar" some porque
   não há para onde ele fecharia — a aba É a saída. */
/* SEM `display` aqui — de propósito. As três molduras (`.fc-modal`,
   `.trl-modal`, `.mm-modal`) já são `display: flex; flex-direction: column`
   por si mesmas (barra / corpo / rodapé), e essa regra, com elemento+classe,
   teria especificidade MAIOR que a delas (classe só) — declarar `block` aqui
   quebraria o layout interno do mapa (o palco depende de `flex: 1` dentro de
   um pai flex para medir a própria altura). */
dialog.em-aba {
  position: static; inset: auto; margin: 0; padding: 0;
  width: 100%; max-width: none; max-height: none; border: 0; background: transparent;
}
dialog.em-aba .fc-fechar, dialog.em-aba .trl-fechar, dialog.em-aba .mm-fechar, dialog.em-aba [data-fechar] { display: none; }
/* SÓ O MAPA tem altura FIXA na moldura original (flashcards e trilha usam
   `max-height`, que já respeita o conteúdo). Sem uma altura própria aqui, o
   SVG do mapa mede um palco de 0px de altura e nasce colapsado. */
.estudo-aba-ferramenta[data-ferramenta="mapa"] dialog.em-aba { height: min(75vh, 760px); }
#disciplines.estudo-aberto .links-box, #disciplines.estudo-aberto .materiais-box { background: none; border: 0; border-top: 1px solid var(--rule); padding: 16px 0; }
.estudo-paginacao { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--rule); }
.estudo-paginacao button { border: 0; background: none; color: var(--petrol); font: 13px var(--sans); padding: 10px 0; }
.estudo-paginacao button:disabled { color: var(--ink-soft); opacity: .6; }
.estudo-aberto button:focus-visible, .estudo-aberto input:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.estudo-assunto[aria-current="true"]:focus-visible { outline-color: var(--bronze-ink); }

/* ---------- FASE C (16/09/2026): o PDF fica na disciplina, à direita ---------- */
/*
 * A leitura completa do desenho mora no cabeçalho de `estudo-layout.js`
 * (`iniciarEspacoDeEstudo`). Aqui só o CSS: a grade ganha uma terceira
 * coluna quando `.estudo-com-material` está na `main`, o índice encolhe
 * para uma faixa fina nesse estado (a largura sobrando vai para o conteúdo
 * e para o PDF, não para uma navegação que ela já usou para chegar aqui), e
 * a coluna em si é um cartão branco — a MESMA linguagem visual do cartão de
 * conteúdo da Fase A (`--surface-conteudo`, `--card-edge`, `--elev-conteudo`).
 */
body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto.estudo-com-material {
  grid-template-columns: 36px minmax(0, 1fr) var(--estudo-material-w, 38%);
}
/* FAIXA DO ÍNDICE (D6): reaproveita o MESMO par índice/botão que já existe
 * para o celular e para o dock lateral aberto — `.estudo-mostrar-indice`
 * já é o botão certo, só precisa aparecer também neste estado. */
.estudo-com-material .estudo-mostrar-indice { display: inline-flex; flex: none; border: 0; background: var(--paper); color: var(--petrol); border-radius: 5px; font: 13px var(--sans); padding: 10px; }
.estudo-com-material .estudo-indice { overflow: hidden; padding: 25px 4px; }
.estudo-com-material .estudo-indice > * { visibility: hidden; }
/* Abrindo por cima do conteúdo — fecha ao escolher um assunto (`entrar()` já
 * tira `estudo-indice-aberto`, o mesmo caminho do celular). */
.estudo-com-material.estudo-indice-aberto .estudo-indice {
  position: absolute; z-index: 20; width: 280px; max-height: 70vh; overflow-y: auto;
  padding: 25px 16px; box-shadow: var(--elev-conteudo); background: var(--paper); border-right: 0; border-radius: 0 8px 8px 0;
}
.estudo-com-material.estudo-indice-aberto .estudo-indice > * { visibility: visible; }

/* O CONTEÚDO (coluna do meio) some quando o PDF está AMPLIADO — a coluna do
 * PDF passa a ocupar o espaço todo. */
.estudo-material-ampliada .estudo-assunto-ativo { display: none; }
body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto.estudo-material-ampliada { grid-template-columns: 36px minmax(0, 1fr); }
.estudo-material-ampliada .estudo-direita { grid-column: 2 / -1; }

/* O BOTÃO "📄 Material" NUNCA SOME (ver o cabeçalho de `estudo-layout.js`):
 * mesma família visual dos outros botões auxiliares da barra, empurrado para
 * o fim da faixa por `margin-left: auto` — ele não é uma ferramenta como as
 * seis abas, é o controle da coluna. */
.estudo-mostrar-material {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none;
  min-height: 36px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink-soft);
  border-radius: 6px; font: 500 13px var(--sans); padding: 9px 12px; box-shadow: var(--relevo);
}
.estudo-mostrar-material:hover { border-color: var(--petrol-accent); background: var(--petrol-soft); }
.estudo-mostrar-material[aria-pressed="true"] { color: var(--petrol); border-color: var(--petrol-accent); background: var(--petrol-soft); }
.estudo-mostrar-material:active { transform: translateY(2px); box-shadow: none; }

/* A COLUNA em si: cartão branco fixo enquanto o conteúdo rola — mesma
 * linguagem do cartão de conteúdo (Fase A). `position: sticky` (não
 * `fixed`) porque ela é parte da GRADE: `fixed` a arrancaria do fluxo e
 * quebraria a terceira coluna. */
.estudo-direita {
  grid-column: 3; grid-row: 2; align-self: start; position: sticky; top: 16px;
  height: calc(100vh - 32px); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-conteudo); border: 1px solid var(--card-edge); border-radius: 12px;
  box-shadow: var(--elev-conteudo); overflow: hidden; margin: 16px 16px 16px 0;
}
.estudo-direita-alca {
  position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 5;
}
.estudo-direita-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); padding: 8px 8px 0; flex: none; }
.estudo-direita-aba {
  font: 500 13px var(--sans); border: 0; border-radius: 6px 6px 0 0; background: none;
  padding: 9px 12px; color: var(--ink-soft);
}
.estudo-direita-aba[aria-selected="true"] { background: var(--petrol-soft); color: var(--petrol); box-shadow: inset 0 -3px 0 var(--petrol); }
.estudo-direita-pdf { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px; }
.estudo-material-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.estudo-material-barra select { border: 1px solid var(--card-edge); border-radius: 6px; padding: 6px 8px; font: 13px var(--sans); background: var(--card); color: var(--ink); min-width: 0; max-width: 160px; }
.estudo-material-barra button { min-height: 32px; border: 1px solid var(--card-edge); background: var(--card); color: var(--ink-soft); border-radius: 6px; font: 500 12px var(--sans); padding: 7px 10px; box-shadow: var(--relevo); }
.estudo-material-barra button:hover { border-color: var(--petrol-accent); background: var(--petrol-soft); }
.estudo-material-barra button:active { transform: translateY(2px); box-shadow: none; }
.estudo-material-barra button[aria-pressed="true"] { color: var(--petrol); border-color: var(--petrol-accent); background: var(--petrol-soft); }
.estudo-material-marcar { display: inline-flex; align-items: center; gap: 5px; font: 12px var(--sans); color: var(--ink-soft); }
/* A ÁREA abaixo das abas da coluna contém o painel do PDF e o placeholder do
 * dock, fica visível com qualquer aba ativa e é ELA que `estudo-layout.js`
 * mede para posicionar a explicação (medir o corpo do PDF dava 0×0 com a aba
 * Explicação ativa, porque o painel do PDF fica escondido). */
.estudo-direita-area { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.estudo-direita-corpo { position: relative; flex: 1; min-height: 0; }
.estudo-material-visor { width: 100%; height: 100%; border: 0; display: block; }
.estudo-material-vazio { margin: 0; padding: 20px; text-align: center; color: var(--ink-soft); font: 13px/1.6 var(--sans); }
.estudo-material-status { margin: 8px 0 0; font: 12px var(--sans); color: var(--ink-soft); }
.estudo-direita-dock { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .estudo-mostrar-material:active, .estudo-material-barra button:active { transform: none; }
}
/* ≤1050px e celular: SEM coluna — o botão "📄 Material" abre o PDF em nova
 * aba direto (`estudo-layout.js`, `aoClicarMaterial`); um iframe de PDF não
 * rola de forma confiável no Safari/iOS. */
@media (max-width: 1050px) {
  body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto.estudo-com-material { grid-template-columns: none; }
  .estudo-direita { display: none; }
}
@media print {
  .estudo-direita, .estudo-mostrar-material { display: none !important; }
}

@media (max-width: 1200px) {
  body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto { grid-template-columns: 220px minmax(0, 1fr); }
  .estudo-cabecalho { padding-left: 22px; padding-right: 22px; }
  .design-estudo .discipline > summary { flex-wrap: wrap; }
  .design-estudo .disc-meta { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 1050px) {
  body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto { display: block; }
  .estudo-indice { display: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .estudo-indice-aberto .estudo-indice { display: block; }
  .estudo-mostrar-indice { display: inline-flex; flex: none; border: 0; background: var(--paper); color: var(--petrol); border-radius: 5px; font: 13px var(--sans); padding: 10px; }
  /* SEIS ABAS não cabem lado a lado no celular: a faixa rola na horizontal
     (`.estudo-abas` acima) em vez de quebrar linha — quebrar empurraria o
     conteúdo para baixo a cada assunto aberto. */
  .estudo-ferramentas { flex-wrap: nowrap; gap: 10px; }
}
/* O tutor/explicador ocupa parte do monitor. O índice também se recolhe nesse
   caso: largura da janela sozinha não representa o espaço que sobrou ao texto. */
body.design-estudo.side-open[data-view="disciplinas"] #disciplines.estudo-aberto { display: block; }
.side-open .estudo-indice { display: none; }
.side-open .estudo-indice-aberto .estudo-indice { display: block; }
.side-open .estudo-mostrar-indice { display: inline-flex; }
.side-open .estudo-titulo-linha { flex-wrap: wrap; }
@media (max-width: 640px) {
  .design-estudo .masthead-inner { padding-left: 60px; padding-right: 12px; }
  .design-estudo .discipline > summary { padding: 14px 12px; gap: 10px; }
  .design-estudo .disc-body { padding: 12px; }
  .design-estudo .disc-name { font-size: 15px; }
  .design-estudo .disc-meta { width: 100%; }
  .design-estudo .note-toggle { width: 36px; height: 36px; }
  .estudo-cabecalho { margin: 10px; padding: 16px; }
  .estudo-contexto-acoes, .estudo-titulo-linha { align-items: flex-start; flex-direction: column; gap: 10px; }
  .estudo-titulo-linha { padding: 18px 0; }
  .estudo-concluir { padding: 9px 12px; }
  #disciplines.estudo-aberto .estudo-assunto-ativo { padding: 0 16px 22px; }
  .estudo-abas { gap: 18px; }
  .estudo-aba { font-size: 13px; min-height: 44px; }
  .estudo-mostrar-indice { margin-top: 12px; }
  #disciplines.estudo-aberto .note-panel > textarea { padding: 12px; }
  #disciplines.estudo-aberto .note-view { font-size: 16px; }
}
/* Movimento respeita a preferência do sistema — mesma regra do resto do app
   (ver `style.css`), só que estes dois botões cheios moram aqui porque a
   cor deles também mora aqui. */
@media (prefers-reduced-motion: reduce) {
  .estudo-concluir:active, .design-estudo .side-action:active { transform: none; }
}
@media print {
  .estudo-indice, .estudo-ferramentas, .estudo-paginacao, .estudo-concluir, .estudo-voltar { display: none !important; }
  body.design-estudo[data-view="disciplinas"] #disciplines.estudo-aberto { display: block; }
  /* O degradê é tinta gasta em quem vai imprimir texto preto e branco. */
  .estudo-cabecalho { background: none; }
}