/* Notas — o espaco de ideias.
   Arquivo proprio porque a secao e grande: misturar isto no estilo.css
   dobraria o arquivo que todas as outras telas carregam.
   Usa os mesmos tokens de cor do estilo.css, entao muda junto com o tema. */

/* Duas colunas: a arvore de paginas e o editor. Em tela estreita a arvore
   vira uma faixa rolavel em cima, em vez de sumir — sem ela nao da para
   navegar entre paginas. */
.nota-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 120px); }
@media (max-width: 860px) { .nota-layout { grid-template-columns: 1fr; } }

.nota-lateral {
  border-right: 1px solid var(--linha); padding: 0 14px 14px 0;
  display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 860px) {
  .nota-lateral { border-right: 0; border-bottom: 1px solid var(--linha); padding: 0 0 12px; max-height: 240px; }
}
.nota-lateral-topo { display: flex; gap: 6px; }
.nota-lateral-topo input { flex: 1; min-width: 0; }
.nota-lateral-topo button { padding: 8px 12px; }
.nota-lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.nota-lateral-rodape button { justify-content: flex-start; text-align: left; }

.nota-arvore { overflow-y: auto; flex: 1; }
.nota-secao { margin: 12px 0 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); }
.nota-nada { color: var(--apagado); font-size: .88rem; }

.nota-ramo .nota-ramo { padding-left: 14px; }
.nota-item {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--raio-p);
  cursor: pointer; font-size: .92rem; color: var(--texto);
}
.nota-item:hover { background: rgba(17, 24, 39, .05); }
.nota-item.ativa { background: rgba(255, 90, 31, .1); color: var(--destaque); font-weight: 600; }
.nota-item .nota-titulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-mais { opacity: 0; background: transparent; box-shadow: none; color: var(--apagado); padding: 0 4px; }
.nota-item:hover .nota-mais { opacity: 1; }

.nota-achados { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 4px; }
.nota-achados button {
  display: block; width: 100%; text-align: left; background: transparent; box-shadow: none;
  color: var(--texto); padding: 6px 8px; border-radius: var(--raio-p); font-weight: 500;
}
.nota-achados button:hover { background: rgba(17, 24, 39, .05); }
.nota-achados small { display: block; color: var(--apagado); font-weight: 400; }

.nota-corpo { padding: 0 8px 80px 28px; min-width: 0; }
@media (max-width: 860px) { .nota-corpo { padding: 14px 0 60px; } }
.nota-trilha {
  display: flex; align-items: center; gap: 6px; font-size: .85rem;
  color: var(--apagado); margin-bottom: 18px; flex-wrap: wrap;
}
.nota-trilha a { color: var(--apagado); }
.nota-trilha a:hover { color: var(--destaque); }
.nota-trilha i { opacity: .5; font-style: normal; }
.nota-estado { font-size: .78rem; color: var(--apagado); min-width: 60px; text-align: right; }

.nota-cabecalho { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.nota-emoji { background: transparent; box-shadow: none; font-size: 2rem; padding: 0; line-height: 1; }
.nota-h1 { font-size: 2.1rem; font-weight: 700; margin: 0; flex: 1; outline: none; line-height: 1.2; }
.nota-layout [contenteditable]:empty::before { content: attr(data-vazio); color: var(--apagado); opacity: .6; }

/* ---------------- editor de blocos ---------------- */
.nota-editor { min-height: 300px; }
.nota-bloco { position: relative; }
.nota-linha { display: flex; align-items: flex-start; gap: 4px; padding: 1px 0; }
.nota-alca {
  opacity: 0; background: transparent; box-shadow: none; color: var(--apagado);
  cursor: grab; padding: 2px 4px; font-size: .8rem; line-height: 1.6; flex-shrink: 0;
}
.nota-bloco:hover > .nota-linha > .nota-alca { opacity: .6; }
.nota-texto { flex: 1; outline: none; padding: 3px 2px; line-height: 1.6; min-width: 0; word-break: break-word; }
.nota-filhos { padding-left: 26px; }
.nota-bloco.fechado > .nota-filhos { display: none; }
.nota-caixa { margin-top: 8px; flex-shrink: 0; }
.nota-seta { background: transparent; box-shadow: none; color: var(--apagado); padding: 2px 4px; flex-shrink: 0; }
.nota-bloco.feito > .nota-linha > .nota-texto { text-decoration: line-through; color: var(--apagado); }
.nota-hr { flex: 1; border: 0; border-top: 1px solid var(--linha); margin: 12px 0; }
.nota-img { max-width: 100%; border-radius: var(--raio-m); }
.nota-add-img {
  background: transparent; box-shadow: none; color: var(--apagado);
  border: 1px dashed var(--linha-forte); width: 100%;
}

.nota-bloco[data-tipo="titulo1"] .nota-texto { font-size: 1.7rem; font-weight: 700; margin-top: 20px; }
.nota-bloco[data-tipo="titulo2"] .nota-texto { font-size: 1.35rem; font-weight: 700; margin-top: 16px; }
.nota-bloco[data-tipo="titulo3"] .nota-texto { font-size: 1.1rem; font-weight: 600; margin-top: 12px; }
.nota-bloco[data-tipo="lista"] > .nota-linha > .nota-texto::before { content: "\2022"; margin-right: 8px; color: var(--apagado); }
.nota-bloco[data-tipo="numerada"] > .nota-linha > .nota-texto::before { content: "1."; margin-right: 8px; color: var(--apagado); }
.nota-bloco[data-tipo="citacao"] > .nota-linha { border-left: 3px solid var(--linha-forte); padding-left: 12px; }
.nota-bloco[data-tipo="destaque"] > .nota-linha {
  background: rgba(255, 90, 31, .07); border-radius: var(--raio-p); padding: 10px 12px;
}
.nota-bloco[data-tipo="codigo"] > .nota-linha > .nota-texto {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem;
  background: rgba(17, 24, 39, .05); border-radius: var(--raio-p); padding: 10px 12px; white-space: pre-wrap;
}
.nota-texto code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em;
  background: rgba(17, 24, 39, .07); padding: 1px 5px; border-radius: 5px;
}
.nota-mencao { background: rgba(255, 90, 31, .1); padding: 1px 5px; border-radius: 5px; font-weight: 500; }

.nota-menu {
  position: fixed; z-index: 60; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio-m); box-shadow: 0 10px 30px rgba(17, 24, 39, .14); padding: 5px;
  min-width: 210px; max-height: 320px; overflow-y: auto;
}
.nota-menu button {
  display: block; width: 100%; text-align: left; background: transparent; box-shadow: none;
  color: var(--texto); padding: 7px 10px; border-radius: var(--raio-p); font-weight: 500; font-size: .9rem;
}
.nota-menu button:hover { background: rgba(17, 24, 39, .06); }

.nota-filhas, .nota-retro { margin-top: 36px; }
.nota-cartao {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent;
  box-shadow: none; color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 9px 12px; margin-bottom: 6px; font-weight: 500;
}
.nota-cartao:hover { background: rgba(17, 24, 39, .04); }
.nota-cartao small { display: block; color: var(--apagado); font-weight: 400; }

/* ---------------- bancos de dados ---------------- */
.nota-visoes { display: flex; align-items: center; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.nota-visoes button { background: transparent; box-shadow: none; color: var(--apagado); font-weight: 500; }
.nota-visoes button.ativa { color: var(--destaque); background: rgba(255, 90, 31, .1); }
.nota-visoes #nota-nova-linha { background: var(--destaque); color: #fff; }
.nota-visoes input { max-width: 180px; }

.nota-tabela-caixa { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); }
.nota-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nota-tabela th, .nota-tabela td {
  padding: 8px 12px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap;
}
.nota-tabela th { color: var(--apagado); font-weight: 600; font-size: .8rem; }
.nota-tabela th small { opacity: .6; }
.nota-editavel { cursor: pointer; }
.nota-editavel:hover { background: rgba(255, 90, 31, .06); }
.nota-abrir-linha {
  background: transparent; box-shadow: none; color: var(--texto); padding: 0; font-weight: 600; text-align: left;
}
.nota-abrir-linha:hover { color: var(--destaque); }
.nota-erro-celula { color: var(--alerta, #d33); font-size: .8rem; }

.nota-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.nota-coluna { min-width: 230px; background: rgba(17, 24, 39, .03); border-radius: var(--raio-m); padding: 10px; }
.nota-coluna-topo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.nota-ficha {
  display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 9px 11px; margin-bottom: 6px; color: var(--texto);
  font-weight: 500; box-shadow: none;
}
.nota-ficha:hover { border-color: var(--linha-forte); }
.nota-ficha small { display: block; color: var(--apagado); font-weight: 400; margin-top: 3px; }
.nota-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.nota-ficha.grande { min-height: 92px; }

.nota-lista-simples { display: grid; gap: 6px; }
.nota-cartao-linha {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); padding: 9px 12px; font-size: .92rem;
}

.nota-etiqueta { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.cor-cinza { background: rgba(17, 24, 39, .08); color: #4b5563; }
.cor-marrom { background: rgba(120, 79, 45, .14); color: #78552d; }
.cor-laranja { background: rgba(255, 122, 26, .16); color: #b45309; }
.cor-amarelo { background: rgba(234, 179, 8, .18); color: #92700a; }
.cor-verde { background: rgba(22, 163, 74, .14); color: #15803d; }
.cor-azul { background: rgba(37, 99, 235, .14); color: #1d4ed8; }
.cor-roxo { background: rgba(147, 51, 234, .14); color: #7e22ce; }
.cor-rosa { background: rgba(236, 72, 153, .14); color: #be185d; }
.cor-vermelho { background: rgba(220, 38, 38, .14); color: #b91c1c; }

.nota-vazia { text-align: center; color: var(--apagado); padding: 80px 20px; }