/* =========================================================================
   style.css — Caderno Vitória

   O QUE FOI CORRIGIDO AQUI

   1. O EDITOR NÃO ROLAVA. O CSS estilizava `.area-trabalho` (com `flex: 1`
      e `overflow-y: auto`), mas o HTML usa `<main class="principal">`, e não
      existia nenhuma regra `.principal`. Com `body { overflow: hidden }`,
      uma página longa era simplesmente cortada — sem barra de rolagem,
      sem jeito de chegar ao fim do texto.
   2. `.lateral--flutuante` era ligada e desligada pelo JS e nunca existiu
      aqui: a barra que abre ao encostar o mouse na borda funcionava pela
      metade.
   3. `.drop-above`, `.drop-below` e `.drop-inside` estavam escritas e nunca
      eram aplicadas — o arrastar não tinha indicação nenhuma de onde a
      página ia cair. Agora o `app.js` as usa, e há uma quarta para o
      movimento proibido (pôr um caderno dentro da própria filha).
   4. Saíram as regras órfãs de uma versão anterior do HTML
      (`.area-trabalho`, `.lateral__cabecalho`, `.perfil`, `.secao__titulo`).

   Identidade preservada: fundo escuro, dourado da marca como único acento,
   serifada no corpo do texto.
   ========================================================================= */

:root {
  --breu: #0f1115;
  --superficie: #16181d;
  --painel: #1f2128;
  --ouro: #d8b871;
  --ouro-claro: #e8cf99;
  --texto: #e2e8f0;
  --texto-secundario: #94a3b8;
  --borda: #2c313c;
  --hover-bg: rgba(255, 255, 255, 0.05);
  --azul: #3b82f6;
  --vermelho: #ef4444;
  --verde: #34d399;
  --lateral-largura: 268px;

  font-family: 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--texto);
  background-color: var(--superficie);
  height: 100dvh;
  overflow: hidden;              /* a rolagem é da .rolagem, não da janela */
}

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.oculto { display: none !important; }

/* =====================================================================
   ESTRUTURA
   ===================================================================== */
.layout-app {
  display: flex;
  height: 100dvh;
}

/* A regra que faltava. `min-width: 0` impede que um bloco largo (tabela,
   bloco de código) empurre a coluna e estoure a janela. */
.principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--superficie);
  overflow: hidden;
}

.rolagem {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.conteudo-editor {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 60px 40dvh;      /* folga no fim: dá para escrever no meio da tela */
  width: 100%;
}

.conteudo-editor.largura-total {
  max-width: 100%;
  padding-left: 6%;
  padding-right: 6%;
}

@media (max-width: 720px) {
  .conteudo-editor { padding: 16px 20px 40dvh; }
  .lateral { position: absolute; z-index: 60; height: 100dvh; box-shadow: 0 0 40px rgba(0,0,0,.6); }
}

/* =====================================================================
   BARRA LATERAL
   ===================================================================== */
.lateral {
  width: var(--lateral-largura);
  flex: 0 0 var(--lateral-largura);
  background-color: var(--breu);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.25s;
}

.lateral--fechada {
  width: 0;
  flex-basis: 0;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
}

/* A barra que aparece ao encostar o mouse na borda: flutua POR CIMA do
   editor, sem empurrar o texto — empurrar faria a linha em que se está
   escrevendo saltar de lugar. */
.lateral--flutuante {
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: var(--lateral-largura);
  flex-basis: var(--lateral-largura);
  z-index: 80;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.workspace-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: 6px;
}
.workspace-header:hover { background-color: var(--hover-bg); }
.workspace-avatar {
  width: 24px; height: 24px;
  background-color: var(--ouro);
  color: #000;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.workspace-name { font-size: 14px; font-weight: 500; }
.workspace-seta { margin-left: auto; font-size: 10px; color: var(--texto-secundario); }

.lateral__secao { display: flex; flex-direction: column; margin-bottom: 14px; }
.lateral__secao--arvore { flex: 1; min-height: 0; }
.lateral__secao--lixeira { margin-top: auto; }

.lateral__titulo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--texto-secundario);
  padding: 0 14px; margin-bottom: 4px;
}

.btn-esvaziar {
  background: none; border: none; cursor: pointer;
  color: var(--vermelho); font-size: 11px; padding: 2px 4px; border-radius: 3px;
}
.btn-esvaziar:hover { background: rgba(239, 68, 68, 0.12); }

.lista-paginas { list-style: none; padding: 0; margin: 0; }
.lista-vazia { padding: 6px 14px; font-size: 13px; color: var(--texto-secundario); opacity: 0.6; }

.lista-paginas--arvore { min-height: 60px; padding-bottom: 20px; }
.lista-paginas--arvore.drop-raiz { background: rgba(59, 130, 246, 0.08); border-radius: 6px; }

.pagina-item {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 8px 5px 0;
  font-size: 14px; color: var(--texto-secundario);
  cursor: pointer; border-radius: 4px;
  margin: 1px 6px;
}
.pagina-item:hover { background-color: var(--hover-bg); color: var(--texto); }
.pagina-item--ativa { background-color: rgba(216, 184, 113, 0.12); color: var(--texto); font-weight: 500; }
.pagina-item.arrastando { opacity: 0.4; }

.pagina-alvo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden;
}
.pagina-rotulo { overflow: hidden; text-overflow: ellipsis; }
.pagina-icone { opacity: 0.8; font-size: 15px; flex-shrink: 0; }

.pagina-mais {
  background: none; border: none; cursor: pointer;
  color: var(--texto-secundario); font-size: 16px; line-height: 1;
  padding: 0 6px; border-radius: 3px;
  opacity: 0; transition: opacity 0.15s;
}
.pagina-item:hover .pagina-mais { opacity: 1; }
.pagina-mais:hover { background: rgba(255,255,255,0.1); color: var(--texto); }

/* A setinha só abre e fecha o caderno. Aninhar é o arrastar. */
.seta-toggle {
  width: 16px; flex-shrink: 0;
  text-align: center; font-size: 10px;
  color: var(--texto-secundario); cursor: pointer; border-radius: 3px;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.pagina-item:hover > .seta-toggle { opacity: 1; }
.pagina-item--ativa > .seta-toggle { opacity: 1; }
.seta-toggle:hover { background: rgba(255,255,255,0.1); color: var(--texto); }
.seta-toggle.vazia { cursor: default; opacity: 0 !important; }

.pagina-item-lixeira { color: var(--vermelho); opacity: 0.75; }
.pagina-item-lixeira:hover { opacity: 1; }

.btn-nova-pagina {
  background: none; border: none;
  color: var(--texto-secundario);
  padding: 7px 14px; margin-top: 4px;
  width: 100%; text-align: left; cursor: pointer; font-size: 14px;
}
.btn-nova-pagina:hover { background-color: var(--hover-bg); color: var(--texto); }

/* Onde a página vai cair. Sem estas três linhas, arrastar é adivinhação. */
.drop-above { box-shadow: inset 0 2px 0 0 var(--azul); }
.drop-below { box-shadow: inset 0 -2px 0 0 var(--azul); }
.drop-inside { background-color: rgba(59, 130, 246, 0.22) !important; }
/* Movimento proibido (um caderno dentro da própria filha): o aviso é visual
   e vem antes de soltar. */
.drop-proibido { background-color: rgba(239, 68, 68, 0.18) !important; cursor: not-allowed; }

/* =====================================================================
   TOPO
   ===================================================================== */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
}
.topo__esquerda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topo__direita { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.topo__caminho {
  font-size: 13px; color: var(--texto-secundario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 44vw;
}
.migalha-separador { opacity: 0.35; margin: 0 5px; }
.migalha-atual { color: var(--texto); font-weight: 500; }
.migalha-clicavel { cursor: pointer; padding: 2px 5px; border-radius: 4px; }
.migalha-clicavel:hover { background-color: var(--hover-bg); color: var(--ouro); }

.btn-icone {
  background: transparent; border: none; color: var(--texto-secundario);
  font-size: 17px; line-height: 1; cursor: pointer;
  padding: 5px 8px; border-radius: 4px;
}
.btn-icone:hover { background-color: var(--hover-bg); color: var(--texto); }

.btn-barra {
  background: transparent; color: var(--texto-secundario);
  border: 1px solid var(--borda); padding: 5px 12px;
  border-radius: 5px; cursor: pointer; font-size: 13px;
}
.btn-barra:hover { color: var(--ouro); border-color: var(--ouro); }
.btn-barra:disabled { opacity: 0.5; cursor: progress; }
.btn-barra--destaque { color: var(--texto); }
.btn--ligado { color: var(--verde); border-color: rgba(52, 211, 153, 0.5); }

/* O indicador de gravação. Ele existe porque a versão anterior salvava em
   silêncio: o aluno não tinha como saber se o trabalho estava guardado, e
   quando a cota do navegador estourava ninguém avisava nada. */
.estado { font-size: 12px; color: var(--texto-secundario); min-width: 0; }
.estado--ok { color: var(--verde); }
.estado--erro { color: var(--vermelho); font-weight: 500; }

/* =====================================================================
   MENUS FLUTUANTES
   ===================================================================== */
.menu-popover {
  position: absolute; top: 52px; right: 24px; width: 272px;
  background-color: var(--painel);
  border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  padding: 10px 0; z-index: 100; color: var(--texto);
}
.menu-popover--lateral { top: 48px; left: 10px; right: auto; width: 248px; }

.menu-conta { padding: 6px 18px; font-size: 12px; color: var(--texto); word-break: break-all; }
.menu-conta.sem-conta { color: var(--texto-secundario); }

.menu-fontes { display: flex; justify-content: space-around; padding: 0 12px 8px; }
.fonte-opcao {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--texto-secundario);
  cursor: pointer; padding: 8px 10px; border-radius: 6px;
}
.fonte-opcao:hover { background-color: var(--hover-bg); }
.fonte-opcao.ativa { color: var(--ouro); }
.font-preview { font-size: 22px; color: var(--texto); }
.fonte-opcao.ativa .font-preview { color: var(--ouro); }

.separador-menu { border: none; border-top: 1px solid var(--borda); margin: 7px 0; }

.menu-item { padding: 8px 18px; font-size: 14px; cursor: pointer; }
.menu-item:hover { background-color: var(--hover-bg); }
.menu-item--perigo { color: var(--vermelho); }

.menu-item-toggle {
  padding: 7px 18px; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center;
}

.historico-texto { padding: 8px 18px 0; font-size: 12px; color: var(--texto-secundario); line-height: 1.5; }

.switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background-color: #4b5563; transition: .25s; border-radius: 34px;
}
.slider:before {
  position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px;
  background-color: #fff; transition: .25s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--ouro); }
input:checked + .slider:before { transform: translateX(16px); }

/* =====================================================================
   PÁGINA: CAPA, ÍCONE, TÍTULO
   ===================================================================== */
.area-capa { position: relative; width: 100%; height: 24dvh; min-height: 140px; margin-bottom: 8px; }
.area-capa img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }

.controles-capa {
  position: absolute; bottom: 10px; right: 14px;
  display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s;
}
.area-capa:hover .controles-capa,
.area-capa:focus-within .controles-capa { opacity: 1; }
.controles-capa button {
  background: rgba(15, 17, 21, 0.85); color: #fff;
  border: 1px solid var(--borda); padding: 4px 10px;
  border-radius: 4px; cursor: pointer; font-size: 12px;
}
.controles-capa button:hover { background: var(--breu); }

/* Imagem privada do Drive que ainda não pôde ser buscada (sem token). */
.imagem-trancada {
  min-height: 90px;
  background: repeating-linear-gradient(45deg, #1b1e25, #1b1e25 10px, #22262e 10px, #22262e 20px);
  border: 1px dashed var(--borda); border-radius: 6px;
}

.cabecalho-pagina { position: relative; display: flex; flex-direction: column; }

.icone-pagina {
  font-size: 72px; line-height: 1;
  margin-top: -52px; margin-bottom: 6px;
  cursor: pointer; width: fit-content; border-radius: 8px;
  position: relative; z-index: 10;
}
.icone-pagina:hover { background: var(--hover-bg); }
.area-capa.oculto + .cabecalho-pagina .icone-pagina { margin-top: 12px; }

.botoes-estetica {
  display: flex; gap: 12px; margin-bottom: 10px;
  opacity: 0; transition: opacity 0.2s; position: relative; z-index: 10;
}
.cabecalho-pagina:hover .botoes-estetica,
.cabecalho-pagina:focus-within .botoes-estetica { opacity: 1; }
.botoes-estetica button {
  background: transparent; border: none; color: var(--texto-secundario);
  cursor: pointer; font-size: 13px; padding: 4px 8px; border-radius: 4px;
}
.botoes-estetica button:hover { color: var(--texto); background: var(--hover-bg); }

.titulo-gigante {
  background: transparent; border: none; color: var(--texto);
  font-size: 40px; font-weight: 700; line-height: 1.15;
  width: 100%; margin-bottom: 22px; outline: none;
  font-family: 'Spectral', serif;
}
.titulo-gigante::placeholder { color: var(--borda); }
.texto-pequeno .titulo-gigante { font-size: 31px; }

/* =====================================================================
   SUBPÁGINAS NO CORPO
   ===================================================================== */
.subpaginas-container { display: flex; flex-direction: column; margin-bottom: 24px; }

.link-subpagina {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 6px; color: var(--texto);
  font-size: 16px; font-weight: 500; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: 'Spectral', serif;
  border-radius: 4px;
}
.link-subpagina:hover { background-color: var(--hover-bg); }
.link-subpagina .pagina-icone { font-size: 18px; }

/* =====================================================================
   EDITOR.JS
   ===================================================================== */
.ce-block__content, .ce-toolbar__content { max-width: 100%; }
.cdx-block { padding: 4px 0; }
.ce-paragraph { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.82); }
::selection { background: rgba(216, 184, 113, 0.3); }

.conteudo-editor.fonte-serif .ce-paragraph,
.conteudo-editor.fonte-serif .cdx-block { font-family: 'Spectral', serif; }
.conteudo-editor.fonte-mono .ce-paragraph,
.conteudo-editor.fonte-mono .cdx-block { font-family: 'Fira Code', monospace; }
.conteudo-editor.texto-pequeno .ce-paragraph { font-size: 14.5px; }

.ce-toolbar__plus, .ce-toolbar__settings-btn { color: var(--texto-secundario); }
.ce-toolbar__plus:hover, .ce-toolbar__settings-btn:hover { background-color: var(--hover-bg); }
.ce-popover { background-color: var(--breu); border: 1px solid var(--borda); color: var(--texto); }
.ce-popover__item:hover { background-color: var(--hover-bg) !important; }
.ce-popover__item-icon { background-color: var(--superficie); border: 1px solid var(--borda); color: var(--texto); }

/* O campo de busca do menu "/" nascia com texto escuro sobre fundo escuro. */
.ce-popover__search, .cdx-search-field, .cdx-search-field__input {
  color: var(--texto) !important;
  background-color: var(--breu) !important;
}
.ce-popover__search::placeholder, .cdx-search-field__input::placeholder { color: var(--texto-secundario) !important; }

.cdx-marker {
  background: rgba(216, 184, 113, 0.35) !important;
  color: #fff !important;
  padding: 2px 4px !important; border-radius: 4px !important;
}
.inline-code {
  background: var(--breu) !important; color: var(--ouro) !important;
  border: 1px solid var(--borda) !important;
  padding: 2px 5px !important; border-radius: 4px !important;
  font-family: 'Fira Code', monospace !important;
}

.cdx-warning { background: rgba(216, 184, 113, 0.1); border-left: 3px solid var(--ouro); border-radius: 4px; }
.cdx-quote { border-left: 3px solid var(--azul); font-style: italic; }
.tc-table { border-color: var(--borda) !important; }

.ce-popover-item__icon--pagina,
.ce-popover-item__icon--carta {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: 5px;
}
.ce-popover-item__icon--pagina { background-color: rgba(59,130,246,0.12); }
.ce-popover-item__icon--carta { background-color: rgba(216,184,113,0.15); }

/* =====================================================================
   BLOCO "PÁGINA"
   ===================================================================== */
.bloco-pagina {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 5px; cursor: pointer;
  font-family: 'Spectral', serif; font-size: 16px; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bloco-pagina:hover { background-color: var(--hover-bg); }
.bloco-pagina__icone { font-size: 18px; opacity: 0.85; }
.bloco-pagina--criando { color: var(--texto-secundario); font-style: italic; cursor: progress; }
.bloco-pagina--morto { color: var(--texto-secundario); text-decoration: line-through; cursor: default; }
.bloco-pagina--lixeira { opacity: 0.6; }

/* =====================================================================
   BLOCO "FLASHCARD"
   ===================================================================== */
.carta {
  border: 1px solid var(--borda); border-left: 3px solid var(--ouro);
  border-radius: 6px; padding: 12px 14px; background: rgba(216,184,113,0.04);
}
.carta--enviada { border-left-color: var(--verde); }

.carta__campo { outline: none; padding: 4px 0; font-size: 15.5px; line-height: 1.5; }
.carta__campo:empty:before {
  content: attr(data-rotulo);
  color: var(--texto-secundario); opacity: 0.6;
}
.carta__frente { font-weight: 600; }
.carta__verso {
  border-top: 1px dashed var(--borda); margin-top: 8px; padding-top: 8px;
  color: rgba(255,255,255,0.8);
}

.carta__rodape { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.carta__botao {
  background: transparent; border: 1px solid var(--borda); color: var(--texto-secundario);
  border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.carta__botao:hover:not(:disabled) { color: var(--ouro); border-color: var(--ouro); }
.carta__botao:disabled { color: var(--verde); border-color: rgba(52,211,153,0.4); cursor: default; }
.carta__recado { font-size: 12px; color: var(--vermelho); }

/* =====================================================================
   AVISOS E MODAL
   ===================================================================== */
/* No lugar do `alert()`, que trava a aba, rouba o foco do editor e some sem
   deixar o aluno reler o que aconteceu. */
.avisos {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 300; max-width: min(380px, calc(100vw - 40px));
}
.aviso {
  position: relative;
  background: var(--painel); border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-secundario);
  border-radius: 6px; padding: 11px 34px 11px 14px;
  font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
}
.aviso--ok { border-left-color: var(--verde); }
.aviso--erro { border-left-color: var(--vermelho); }
.aviso--info { border-left-color: var(--ouro); }
.aviso__fechar {
  position: absolute; top: 4px; right: 6px;
  background: none; border: none; color: var(--texto-secundario);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 5px;
}
.aviso__fechar:hover { color: var(--texto); }

.modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal__caixa {
  width: min(400px, 100%);
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 10px; padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal__caixa h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.modal__ajuda { margin: 0 0 18px; font-size: 13px; color: var(--texto-secundario); }
.modal__erro { margin: 10px 0 0; font-size: 13px; color: var(--vermelho); min-height: 18px; }
.modal__acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 12px; color: var(--texto-secundario); margin-bottom: 4px; }
.campo input {
  width: 100%; background: var(--breu); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 5px;
  padding: 9px 11px; font-size: 14px;
}
.campo input:focus { border-color: var(--ouro); outline: none; }

/* =========================================================================
   V3 — busca, emoji, versões, modelos, blocos novos, tema claro e impressão
   ========================================================================= */

/* ---------------------------------------------------------------------
   TEMA CLARO

   Os tokens já viviam em variáveis desde a V2, então o tema claro é só o
   segundo conjunto de valores. Nada mais no arquivo precisou mudar — é o
   que a variável existe para permitir.

   Não é o escuro invertido: no claro o papel é branco e a régua some quase
   toda, senão a tela vira uma grade de linhas cinzas. O dourado escurece um
   pouco, porque o mesmo tom que brilha no preto some no branco.
   --------------------------------------------------------------------- */
[data-tema="claro"] {
  --breu: #f7f6f3;
  --superficie: #ffffff;
  --painel: #ffffff;
  --ouro: #a37f2c;
  --ouro-claro: #8a6a20;
  --texto: #1f2328;
  --texto-secundario: #6b7280;
  --borda: #e5e3de;
  --hover-bg: rgba(0, 0, 0, 0.045);
  color-scheme: light;
}
[data-tema="claro"] .ce-paragraph { color: #2b2f36; }
[data-tema="claro"] .cdx-marker { color: #1f2328 !important; }
[data-tema="claro"] .modal { background: rgba(30, 32, 38, 0.35); }
[data-tema="claro"] .aviso,
[data-tema="claro"] .menu-popover,
[data-tema="claro"] .modal__caixa { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); }
[data-tema="claro"] .imagem-trancada {
  background: repeating-linear-gradient(45deg, #f1efeb, #f1efeb 10px, #e8e5df 10px, #e8e5df 20px);
}
[data-tema="claro"] .slider { background-color: #c9c6c0; }

/* ---------------------------------------------------------------------
   BUSCA (Ctrl+K)
   --------------------------------------------------------------------- */
.btn-busca-lateral {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 10px 12px; padding: 7px 10px;
  background: transparent; border: 1px solid var(--borda); border-radius: 6px;
  color: var(--texto-secundario); font-size: 13px; cursor: pointer; width: calc(100% - 20px);
}
.btn-busca-lateral:hover { color: var(--texto); border-color: var(--ouro); }
.btn-busca-lateral kbd {
  font-family: inherit; font-size: 11px; opacity: 0.7;
  border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px;
}

/* O modal da busca encosta no topo, e não no meio: a lista cresce para
   baixo e os olhos não precisam reencontrar o campo a cada tecla. */
.modal--alto { align-items: flex-start; padding-top: 12vh; }
.modal__caixa--busca { width: min(620px, 100%); padding: 0; overflow: hidden; }
.modal__caixa--media { width: min(560px, 100%); }

.busca-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
}
.busca-lupa { font-size: 19px; color: var(--texto-secundario); }
.busca-topo input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 16px;
}
.busca-topo input::placeholder { color: var(--texto-secundario); opacity: 0.8; }

.busca-resultados { max-height: 52vh; overflow-y: auto; padding: 6px; }

.busca-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
}
.busca-item:hover, .busca-item--ativo { background: var(--hover-bg); }
.busca-item--ativo { box-shadow: inset 2px 0 0 var(--ouro); }
.busca-icone { font-size: 17px; line-height: 1.4; flex-shrink: 0; }
.busca-texto { min-width: 0; flex: 1; }
.busca-titulo { font-size: 15px; color: var(--texto); font-weight: 500; }
.busca-caminho { font-size: 11.5px; color: var(--texto-secundario); margin-top: 1px; }
.busca-trecho {
  font-size: 12.5px; color: var(--texto-secundario); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.busca-vazio { padding: 26px 16px; text-align: center; color: var(--texto-secundario); font-size: 14px; }
.busca-rodape {
  padding: 9px 16px; border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--texto-secundario);
}

/* ---------------------------------------------------------------------
   SELETOR DE EMOJI
   --------------------------------------------------------------------- */
.emoji-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 4px; padding: 12px; max-height: 46vh; overflow-y: auto;
}
.emoji-item {
  background: transparent; border: none; cursor: pointer;
  font-size: 23px; line-height: 1; padding: 7px; border-radius: 6px;
}
.emoji-item:hover { background: var(--hover-bg); transform: scale(1.12); }

/* ---------------------------------------------------------------------
   HISTÓRICO, MODELOS E ATALHOS
   --------------------------------------------------------------------- */
.versoes-lista, .modelos-lista, .atalhos-lista { max-height: 46vh; overflow-y: auto; margin-top: 6px; }

.versao-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--borda);
}
.versao-dia { font-size: 14px; color: var(--texto); }
.versao-detalhe { font-size: 12px; color: var(--texto-secundario); margin-top: 2px; }

.modelo-cartao {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid var(--borda); border-radius: 8px;
  padding: 13px 15px; margin-bottom: 9px; cursor: pointer; color: var(--texto);
}
.modelo-cartao:hover { border-color: var(--ouro); background: var(--hover-bg); }
.modelo-topo { display: flex; align-items: center; gap: 10px; }
.modelo-emoji { font-size: 20px; }
.modelo-nome { font-size: 15px; font-weight: 600; }
.modelo-desc { font-size: 12.5px; color: var(--texto-secundario); margin-top: 5px; line-height: 1.45; }

.atalho-linha {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 4px; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.atalho-linha code {
  font-family: 'Fira Code', monospace; font-size: 12.5px;
  background: var(--breu); border: 1px solid var(--borda); border-radius: 4px;
  padding: 3px 8px; min-width: 74px; text-align: center; color: var(--ouro);
}

/* ---------------------------------------------------------------------
   BARRA LATERAL: o "•••" e o "+" de cada linha
   --------------------------------------------------------------------- */
.pagina-acao {
  background: none; border: none; cursor: pointer;
  color: var(--texto-secundario); font-size: 13px; line-height: 1;
  padding: 3px 5px; border-radius: 3px;
  opacity: 0; transition: opacity 0.15s;
}
.pagina-mais { font-size: 16px; }
.pagina-item:hover .pagina-acao { opacity: 1; }
.pagina-acao:hover { background: rgba(255, 255, 255, 0.1); color: var(--texto); }
[data-tema="claro"] .pagina-acao:hover { background: rgba(0, 0, 0, 0.07); }

.menu-popover--contexto { position: fixed; width: 226px; top: 0; left: 0; }
.menu-item--fraco { color: var(--texto-secundario); font-size: 13px; }

/* ---------------------------------------------------------------------
   VADE MECUM: a citação vira link

   O seletor vai pelo DESTINO, e não por uma classe. O Editor.js higieniza o
   HTML ao salvar e pode tirar `class` de dentro de um `<a>` — o `href` ele
   nunca tira. Amarrar o estilo à classe daria um link dourado que some na
   segunda vez que a página é aberta.
   --------------------------------------------------------------------- */
.ce-block a[href*="planalto.gov.br"],
.ce-block a[href*="jurisprudencia.stf.jus.br"],
.ce-block a[href*="scon.stj.jus.br"],
.vj-lei {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted var(--ouro);
  cursor: pointer;
}
.ce-block a[href*="planalto.gov.br"]:hover,
.vj-lei:hover { background: rgba(216, 184, 113, 0.14); border-bottom-style: solid; }

/* ---------------------------------------------------------------------
   BLOCO: DESTAQUE
   --------------------------------------------------------------------- */
.destaque {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 6px;
  border-left: 3px solid var(--cor-destaque, var(--ouro));
  background: var(--fundo-destaque, rgba(216, 184, 113, 0.09));
}
.destaque--ouro     { --cor-destaque: #d8b871; --fundo-destaque: rgba(216, 184, 113, 0.09); }
.destaque--vermelho { --cor-destaque: #ef4444; --fundo-destaque: rgba(239, 68, 68, 0.09); }
.destaque--azul     { --cor-destaque: #3b82f6; --fundo-destaque: rgba(59, 130, 246, 0.09); }
.destaque--verde    { --cor-destaque: #10b981; --fundo-destaque: rgba(16, 185, 129, 0.09); }
.destaque--cinza    { --cor-destaque: #9ca3af; --fundo-destaque: rgba(156, 163, 175, 0.09); }

.destaque__emoji {
  font-size: 20px; line-height: 1.3; cursor: pointer;
  border-radius: 4px; padding: 1px 3px; flex-shrink: 0;
}
.destaque__emoji:hover { background: var(--hover-bg); }
.destaque__texto { flex: 1; outline: none; font-size: 15.5px; line-height: 1.55; }
.destaque__texto:empty:before { content: attr(data-rotulo); color: var(--texto-secundario); opacity: 0.6; }

.ponto-cor {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2);
}
.ponto-cor--ouro { background: #d8b871; }
.ponto-cor--vermelho { background: #ef4444; }
.ponto-cor--azul { background: #3b82f6; }
.ponto-cor--verde { background: #10b981; }
.ponto-cor--cinza { background: #9ca3af; }

/* ---------------------------------------------------------------------
   BLOCO: QUESTÃO
   --------------------------------------------------------------------- */
.questao {
  border: 1px solid var(--borda); border-left: 3px solid var(--azul);
  border-radius: 6px; padding: 13px 15px;
}
.questao__enunciado { outline: none; font-size: 15.5px; line-height: 1.55; }
.questao__enunciado:empty:before,
.questao__comentario:empty:before,
.questao__alt-texto:empty:before {
  content: attr(data-rotulo); color: var(--texto-secundario); opacity: 0.6;
}
.questao__alternativas { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }

.questao__alt {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; cursor: pointer;
}
.questao__alt:hover { background: var(--hover-bg); }
.questao__alt-texto { flex: 1; outline: none; font-size: 14.5px; line-height: 1.5; }
.questao__alt--simples { cursor: default; }
.questao__alt--escolhida { border-color: var(--borda); background: var(--hover-bg); }
.questao__alt--gabarito { border-color: rgba(16, 185, 129, 0.55); }
.questao__alt--certa { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.55); }

.questao__resposta { margin-top: 11px; }
.questao__veredito { font-size: 14px; font-weight: 600; color: #10b981; }
.questao__veredito--errado { color: var(--vermelho); }
.questao__veredito--neutro { color: var(--texto-secundario); }
.questao__comentario {
  outline: none; margin-top: 6px; font-size: 14px; line-height: 1.55;
  color: var(--texto-secundario);
}
.questao__rodape { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.questao__acoes { display: flex; gap: 8px; margin-left: auto; }

/* ---------------------------------------------------------------------
   BLOCO: TRECHO DO MATERIAL
   --------------------------------------------------------------------- */
.trecho {
  border: 1px solid var(--borda); border-left: 3px solid var(--ouro);
  border-radius: 6px; padding: 12px 14px;
  background: rgba(216, 184, 113, 0.04);
}
.trecho__texto {
  outline: none; font-family: 'Spectral', serif;
  font-size: 15.5px; line-height: 1.6; font-style: italic;
}
.trecho__texto:empty:before, .trecho__campo:empty:before {
  content: attr(data-rotulo); color: var(--texto-secundario); opacity: 0.6; font-style: normal;
}
.trecho__campo { outline: none; font-size: 13px; }
.trecho__rodape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--texto-secundario);
}
.trecho__abrir {
  background: transparent; border: 1px solid var(--borda); color: var(--texto-secundario);
  border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer; text-decoration: none;
}
.trecho__abrir:hover { color: var(--ouro); border-color: var(--ouro); }

/* Ícones do menu "/" dos blocos novos */
.ce-popover-item__icon--destaque { background-color: rgba(216, 184, 113, 0.15); }
.ce-popover-item__icon--questao { background-color: rgba(59, 130, 246, 0.12); }
.ce-popover-item__icon--trecho { background-color: rgba(216, 184, 113, 0.12); }
.ce-popover-item__icon--destaque,
.ce-popover-item__icon--questao,
.ce-popover-item__icon--trecho {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; border-radius: 5px;
}

.bloco-pagina__titulo { flex: 1; }

/* ---------------------------------------------------------------------
   IMPRESSÃO / SALVAR EM PDF

   Sem biblioteca: a página é montada em `#area-impressao`, que fica fora da
   tela o tempo todo e só existe no papel. Tudo o mais desaparece — barra
   lateral, menus, avisos — e as cores voltam a ser tinta preta sobre papel
   branco, senão o fundo escuro sai como uma mancha de toner.
   --------------------------------------------------------------------- */
.area-impressao { display: none; }

@media print {
  html, body { height: auto; overflow: visible; background: #fff !important; color: #000 !important; }
  .layout-app, .avisos, .modal, .menu-popover { display: none !important; }
  .area-impressao { display: block !important; }

  .imp-pagina { max-width: 100%; font-family: 'Spectral', Georgia, serif; font-size: 11.5pt; line-height: 1.5; color: #000; }
  .imp-cabecalho { border-bottom: 1.5pt solid #000; padding-bottom: 8pt; margin-bottom: 14pt; }
  .imp-cabecalho h1 { font-size: 19pt; margin: 4pt 0 0; }
  .imp-caminho { font-size: 8.5pt; color: #555; font-family: 'Inter', Arial, sans-serif; }

  .imp-pagina h2 { font-size: 14pt; margin: 14pt 0 5pt; page-break-after: avoid; }
  .imp-pagina h3 { font-size: 12pt; margin: 11pt 0 4pt; page-break-after: avoid; }
  .imp-pagina p { margin: 0 0 7pt; orphans: 3; widows: 3; }
  .imp-pagina ul, .imp-pagina ol { margin: 0 0 7pt 16pt; }
  .imp-pagina img { max-width: 100%; }
  .imp-pagina table { width: 100%; border-collapse: collapse; margin: 8pt 0; font-size: 10pt; }
  .imp-pagina td, .imp-pagina th { border: 0.5pt solid #999; padding: 4pt 6pt; }

  /* Uma caixa cortada no fim da folha é ilegível: o bloco inteiro pula. */
  .imp-destaque, .imp-aviso, .imp-carta, .imp-questao, .imp-trecho {
    border: 0.5pt solid #999; border-left: 2.5pt solid #333;
    padding: 7pt 9pt; margin: 8pt 0; page-break-inside: avoid;
  }
  .imp-destaque__emoji { font-size: 12pt; margin-right: 5pt; }
  .imp-carta__frente { font-weight: 700; }
  .imp-carta__verso { border-top: 0.5pt dashed #999; margin-top: 5pt; padding-top: 5pt; }
  .imp-questao__enunciado { font-weight: 600; }
  .imp-questao__comentario { font-size: 10pt; color: #333; margin-top: 5pt; }
  .imp-alternativas { list-style: none; margin: 5pt 0 0; padding: 0; }
  .imp-alternativas li { margin: 2pt 0; }
  .imp-certa { font-weight: 700; }
  .imp-check { margin-right: 4pt; }
  .imp-toggle { margin: 7pt 0; }
  .imp-subpagina { font-style: italic; color: #333; }
  .imp-ausente { color: #777; font-style: italic; }
  .imp-trecho { font-style: italic; }

  .imp-leis { margin-top: 16pt; page-break-inside: avoid; }
  .imp-leis h2 { font-size: 11pt; border-top: 0.5pt solid #999; padding-top: 6pt; }
  .imp-leis ul { columns: 2; font-size: 9.5pt; }

  .imp-rodape { margin-top: 18pt; border-top: 0.5pt solid #999; padding-top: 5pt; font-size: 8.5pt; color: #555; }

  a { color: #000; text-decoration: none; }
  /* O endereço da lei entra impresso: no papel, o link não clica. */
  .imp-pagina a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }

  @page { margin: 1.6cm; }
}

/* Complemento do bloco Questão: botões pequenos e campos editáveis.
   Eles não estavam no bloco de cima porque só aparecem quando a questão é
   de múltipla escolha — e é fácil esquecer de estilizar o que só nasce
   depois de dois cliques. */
.questao__campo { outline: none; }
.questao__botao, .questao__marcar, .questao__gabarito, .questao__letra, .questao__tirar {
  background: transparent; border: 1px solid var(--borda); color: var(--texto-secundario);
  border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer; line-height: 1.3;
}
.questao__botao:hover, .questao__marcar:hover, .questao__gabarito:hover,
.questao__letra:hover, .questao__tirar:hover { color: var(--ouro); border-color: var(--ouro); }
.questao__letra {
  min-width: 28px; font-weight: 600; flex-shrink: 0; border-radius: 50%;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.questao__marcar { min-width: 84px; }
.questao__gabarito, .questao__tirar { font-size: 11px; padding: 3px 7px; align-self: center; }
.questao__gabarito.ativo, .questao__botao.ativo {
  color: #10b981; border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.08);
}
.questao__tirar:hover { color: var(--vermelho); border-color: var(--vermelho); }
/* "Virar flashcard" é a ação que liga a questão ao outro app: destacada do
   resto, porque é ela que fecha o circuito caderno → baralho. */
.questao__botao--carta { color: var(--ouro); border-color: rgba(216, 184, 113, 0.45); }
.questao__botao--carta:disabled { color: var(--verde); border-color: rgba(52, 211, 153, 0.4); cursor: default; }

/* =========================================================================
   V4 — animação, interação e layout

   A régua das animações é o próprio Notion: quase nada passa de 150 ms, e
   nada "quica". Animação longa, numa ferramenta de escrever, vira espera.
   Tudo aqui está entre 90 ms e 200 ms, e todo o conjunto já é desligado por
   `prefers-reduced-motion`, que o arquivo respeita desde a V2.
   ========================================================================= */

/* ---------------------------------------------------------------------
   MENUS E MODAIS QUE ABREM E FECHAM

   Antes era `display: none` — um corte seco, impossível de animar, porque
   um elemento que não é desenhado não tem o que transicionar. A troca é
   esconder por `opacity` + `visibility`: `visibility` retira do caminho do
   teclado e do clique (é o que `display:none` fazia de certo), e `opacity`
   é o que a transição consegue acompanhar.
   --------------------------------------------------------------------- */
.menu-popover, .painel-mencao, .achar {
  transition: opacity 0.13s ease, transform 0.13s ease, visibility 0.13s;
  transform-origin: top right;
}
.menu-popover--lateral, .menu-popover--contexto, .painel-mencao { transform-origin: top left; }

.menu-popover.oculto, .painel-mencao.oculto, .achar.oculto {
  display: block !important;          /* vence o `.oculto { display:none }` */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97) translateY(-4px);
}
.achar.oculto { transform: translateY(-8px); }

.modal {
  transition: opacity 0.14s ease, visibility 0.14s;
}
.modal.oculto {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.modal__caixa { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); }
.modal.oculto .modal__caixa { transform: translateY(10px) scale(0.985); }

/* A setinha dos cadernos: um caractere só, girando. */
.seta-toggle { transition: opacity 0.15s, background 0.15s, transform 0.14s ease; }
.seta-toggle--aberta { transform: rotate(90deg); }

/* A troca de página entra com um fade curto, que esconde o instante em que
   o Editor.js está remontando os blocos. */
@keyframes vj-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.conteudo-editor.entrando { animation: vj-entrar 0.16s ease-out; }

/* O bloco que acabou de ser alcançado por link ou pelo Ctrl+F. */
@keyframes vj-piscar {
  0%, 100% { background: transparent; }
  25%, 60% { background: rgba(216, 184, 113, 0.22); }
}
.bloco-piscando { animation: vj-piscar 2s ease-in-out; border-radius: 5px; }

/* A caixa de marcar, com a marca aparecendo em vez de surgindo pronta. */
.cdx-checklist__item-checkbox-check { transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.1s; }
.cdx-checklist__item--checked .cdx-checklist__item-checkbox-check { transform: scale(1); }

/* O fantasma que segue o cursor ao arrastar uma página. */
.fantasma-arrasto {
  position: fixed; top: -1000px; left: -1000px;
  background: var(--painel); color: var(--texto);
  border: 1px solid var(--ouro); border-radius: 6px;
  padding: 7px 13px; font-size: 13.5px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  pointer-events: none; white-space: nowrap;
}

.pagina-item, .busca-item, .menu-item, .link-subpagina, .modelo-cartao {
  transition: background 0.12s ease, color 0.12s ease;
}
.btn-barra, .btn-icone, .emoji-item, .capa-opcao {
  transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.12s;
}
.emoji-item:hover, .capa-opcao:hover { transform: scale(1.08); }

/* ---------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------- */
/* 720px no lugar de 860. Material jurídico é denso; linha longa cansa e faz
   o olho perder a volta. É perto da medida que o Notion usa. */
.conteudo-editor { max-width: 720px; }

/* A borda arrastável da lateral. 5px de alvo: menos que isso só pega com o
   cursor parado em cima, e a pessoa desiste antes de achar. */
.alca-lateral {
  position: absolute; top: 0; right: -2px; width: 5px; height: 100%;
  cursor: col-resize; z-index: 20;
}
.alca-lateral:hover { background: var(--ouro); opacity: 0.45; }
.lateral { position: relative; }
.lateral.sem-transicao { transition: none; }

/* Seções que recolhem. `grid-template-rows: 0fr → 1fr` anima altura sem
   precisar saber a altura — que é o motivo de isso nunca ter sido feito
   com `height` no CSS antigo. */
.lateral__secao > .lista-paginas,
.lateral__secao > .btn-nova-pagina {
  transition: opacity 0.14s ease;
}
.secao--fechada > .lista-paginas,
.secao--fechada > .btn-nova-pagina { display: none; }
.lateral__titulo { cursor: pointer; user-select: none; gap: 6px; }
.lateral__titulo > span:first-child { flex: 1; }
.secao-seta {
  font-size: 9px; opacity: 0.45;
  transform: rotate(90deg); transition: transform 0.14s ease;
}
.secao--fechada .secao-seta { transform: rotate(0deg); }

/* ---------------------------------------------------------------------
   MENÇÕES  [[ ]]
   --------------------------------------------------------------------- */
.painel-mencao {
  position: fixed; z-index: 250; width: 312px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.mencao-lista { max-height: 212px; overflow-y: auto; padding: 5px; }
.mencao-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 5px; cursor: pointer; font-size: 14px;
}
.mencao-item--ativo, .mencao-item:hover { background: var(--hover-bg); }
.mencao-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mencao-caminho { font-size: 11px; color: var(--texto-secundario); flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.mencao-item--criar { color: var(--ouro); }
.mencao-rodape {
  padding: 6px 12px; border-top: 1px solid var(--borda);
  font-size: 11px; color: var(--texto-secundario);
}

/* A menção dentro do texto: diferente do link de lei (pontilhado dourado) e
   diferente de um link externo. Fundo discreto, como no Notion. */
.ce-block a[href^="#p="], .ce-block a[href*="/#p="] {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--borda);
  background: var(--hover-bg);
  border-radius: 3px; padding: 0 3px;
}
.ce-block a[href^="#p="]:hover { background: rgba(216, 184, 113, 0.16); border-bottom-color: var(--ouro); }

/* ---------------------------------------------------------------------
   BACKLINKS
   --------------------------------------------------------------------- */
.backlinks { margin-top: 42px; padding-top: 16px; border-top: 1px solid var(--borda); }
.backlinks__titulo {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--texto-secundario); margin-bottom: 7px;
}
.backlinks__item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 7px; border-radius: 5px; cursor: pointer;
  font-size: 14px; color: var(--texto-secundario);
}
.backlinks__item:hover { background: var(--hover-bg); color: var(--texto); }

/* ---------------------------------------------------------------------
   ACHAR NA PÁGINA (Ctrl+F)
   --------------------------------------------------------------------- */
.achar {
  position: fixed; top: 64px; right: 28px; z-index: 240;
  display: flex; align-items: center; gap: 6px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  padding: 6px 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.achar input {
  background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 14px; width: 190px;
}
.achar-conta { font-size: 11.5px; color: var(--texto-secundario); min-width: 62px; text-align: right; }
.achar--vazio { border-color: var(--vermelho); }

/* ---------------------------------------------------------------------
   TELA DE BOAS-VINDAS
   --------------------------------------------------------------------- */
.boas-vindas {
  margin-top: 26px; padding: 18px 20px;
  border: 1px dashed var(--borda); border-radius: 8px;
}
.boas-vindas__titulo { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.boas-vindas__lista { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.75; color: var(--texto-secundario); }
.boas-vindas__lista code {
  font-family: 'Fira Code', monospace; font-size: 12px;
  background: var(--breu); border: 1px solid var(--borda);
  border-radius: 4px; padding: 1px 5px; color: var(--ouro);
}
.boas-vindas__acoes { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   CAPAS E ÍCONE POR IMAGEM
   --------------------------------------------------------------------- */
.capas-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px; margin-top: 10px; max-height: 44vh; overflow-y: auto;
}
.capa-opcao {
  height: 62px; border: 1px solid var(--borda); border-radius: 6px; cursor: pointer;
}
.capa-opcao:hover { border-color: var(--ouro); }
.icone-imagem { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.area-capa { background-size: cover; }
.area-capa img.oculto { display: none !important; }

/* ---------------------------------------------------------------------
   BLOCOS: fundo colorido (tune) e colunas
   --------------------------------------------------------------------- */
.bloco-fundo { border-radius: 5px; transition: background 0.15s ease; }
.bloco-fundo--ouro     { background: rgba(216, 184, 113, 0.14); padding: 2px 9px; }
.bloco-fundo--vermelho { background: rgba(239, 68, 68, 0.13); padding: 2px 9px; }
.bloco-fundo--azul     { background: rgba(59, 130, 246, 0.13); padding: 2px 9px; }
.bloco-fundo--verde    { background: rgba(16, 185, 129, 0.13); padding: 2px 9px; }
.bloco-fundo--cinza    { background: rgba(156, 163, 175, 0.13); padding: 2px 9px; }

.ponto-fundo { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }

.colunas__grade { display: grid; gap: 16px; }
.colunas[data-quantas="2"] .colunas__grade { grid-template-columns: 1fr 1fr; }
.colunas[data-quantas="3"] .colunas__grade { grid-template-columns: 1fr 1fr 1fr; }
.colunas__coluna {
  border-left: 2px solid var(--borda); padding-left: 12px; min-width: 0;
}
.colunas__titulo {
  outline: none; font-weight: 600; font-size: 15px; margin-bottom: 5px;
}
.colunas__texto { outline: none; font-size: 14.5px; line-height: 1.55; }
.colunas__titulo:empty:before, .colunas__texto:empty:before {
  content: attr(data-rotulo); color: var(--texto-secundario); opacity: 0.55;
}
.colunas__rodape { display: flex; gap: 8px; margin-top: 9px; }
.colunas__botao {
  background: transparent; border: 1px solid var(--borda); color: var(--texto-secundario);
  border-radius: 5px; padding: 3px 9px; font-size: 11.5px; cursor: pointer;
}
.colunas__botao:hover { color: var(--ouro); border-color: var(--ouro); }

/* Celular: três colunas de 110px são ilegíveis. Empilhar é pior que lado a
   lado, e muito melhor que não dar para ler. */
@media (max-width: 680px) {
  .colunas[data-quantas="2"] .colunas__grade,
  .colunas[data-quantas="3"] .colunas__grade { grid-template-columns: 1fr; }
  .achar { right: 10px; left: 10px; top: 58px; }
  .achar input { width: auto; flex: 1; }
}

.ce-popover-item__icon--colunas {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; border-radius: 5px; background: rgba(156, 163, 175, 0.14);
}

/* Arrastar uma imagem de fora para dentro do texto. */
#editorjs.recebendo-arquivo {
  outline: 2px dashed var(--ouro); outline-offset: 10px; border-radius: 6px;
}

/* O rótulo da busca quando ela está escolhendo um destino. */
.busca-rotulo {
  padding: 10px 16px 0; font-size: 12.5px; color: var(--ouro);
}

@media print {
  /* Os painéis novos não existem no papel. */
  .painel-mencao, .achar, .boas-vindas, .backlinks, .alca-lateral { display: none !important; }
  .imp-colunas { display: flex; gap: 14pt; page-break-inside: avoid; }
  .imp-colunas > div { flex: 1; border-left: 0.5pt solid #999; padding-left: 8pt; }
}