/* Onisne | extras, parte 1: Sobre a escola e Caderno digital */

/* ---- Sobre a escola ---- */
.sobre-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.sobre-topo .cartao { margin: 0; }
.foto-escola { display: grid; place-items: center; min-height: 220px; text-align: center; color: var(--texto-suave); background: #fff; border: 3px dashed var(--botao); }
.foto-escola img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.linha-tempo { margin: .6rem 0 0 .5rem; padding-left: 1.6rem; border-left: 4px solid var(--apoio); list-style: none; }
.linha-tempo li { position: relative; margin-bottom: 1.2rem; }
.linha-tempo li:last-child { margin-bottom: 0; }
.linha-tempo li::before {
  content: ''; position: absolute; left: calc(-1.6rem - 10px); top: .3rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--destaque); border: 3px solid var(--principal);
}
.linha-tempo strong { display: block; color: var(--principal); font-size: 1.1rem; }

.a-completar { padding: 1.2rem; background: #fff; border: 2px dashed var(--destaque); border-radius: 12px; margin-bottom: 1.25rem; }
.a-completar h3 { margin-bottom: .4rem; }
.fonte { font-size: .88rem; color: var(--texto-suave); }
.fonte a { color: var(--principal); }

/* ---- Caderno digital ---- */
.caderno { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.caderno .cartao { margin: 0; }
.caderno-lista { display: flex; flex-direction: column; gap: .7rem; }
.caderno-lista .lista { max-height: 60vh; overflow-y: auto; }
.caderno-lista .lista > li { padding: .3rem 0; border: 0; }

.nota-item {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; padding: .7rem .8rem; text-align: left;
  color: var(--texto); background: #fff;
  border: 2px solid var(--borda); border-radius: 8px;
}
.nota-item:hover { border-color: var(--botao); }
.nota-item.ativa { border-color: var(--principal); box-shadow: 0 0 0 3px var(--destaque); }
.nota-item small { color: var(--texto-suave); }
.nota-item span { font-size: .88rem; color: var(--texto-suave); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.editor .form-linha > select { flex: 1 1 150px; }
.folha {
  min-height: 420px; padding: 0 1rem 0 3.2rem;
  font-size: 1rem; line-height: 2rem;
  background-attachment: local;
  background-image:
    linear-gradient(90deg, transparent 2.5rem, #E8C66A 2.5rem, #E8C66A calc(2.5rem + 2px), transparent calc(2.5rem + 2px)),
    repeating-linear-gradient(transparent 0, transparent calc(2rem - 1px), rgba(60, 147, 250, .35) calc(2rem - 1px), rgba(60, 147, 250, .35) 2rem);
}
#nota-titulo { font-size: 1.15rem; font-weight: 700; }
.editor-rodape { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.editor-rodape small { color: var(--texto-suave); }

@media (max-width: 860px) {
  .sobre-topo, .caderno { grid-template-columns: 1fr; }
  .caderno-lista .lista { max-height: 240px; }
}
/* ============ Onisne | parte 3: Mapa de domínio e Mapas mentais ============ */

/* ---- Mapa de domínio ---- */
.dom-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.dom-tile { display: flex; flex-direction: column; gap: .1rem; padding: .8rem; border-radius: 10px; }
.dom-tile span { font-weight: 700; font-size: .92rem; }
.dom-tile strong { font-size: 1.8rem; line-height: 1.1; }
.dom-tile small { font-size: .8rem; }
.n-forte { background: var(--principal); color: #fff; }
.n-bom { background: var(--apoio); color: var(--texto); }
.n-atencao { background: var(--destaque); color: var(--texto); }
.n-foco { background: #a3202d; color: #fff; }
.dom-lista small { display: block; }
.dom-lista .tag { align-self: flex-start; }

/* ---- Mapas mentais ---- */
.mm-barra { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.mm-barra select, .mm-barra input { flex: 1 1 180px; width: auto; }
.mm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.mm-palco {
  position: relative; height: min(72vh, 660px); overflow: hidden;
  background: #fff; border: 2px solid var(--borda); border-radius: 12px;
  background-image: radial-gradient(rgba(75, 52, 127, .2) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mm-palco svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.mm-palco svg:focus-visible { outline-offset: -4px; }
.mm-zoom { position: absolute; right: .7rem; bottom: .7rem; display: flex; gap: .3rem; }
.mm-zoom .btn { padding: .4rem .8rem; }
.mm-painel { margin: 0; }
.mm-painel .btn { width: 100%; margin-top: .5rem; }
.mm-cores { display: flex; flex-wrap: wrap; gap: .5rem; }
.mm-cor { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--borda); }
.mm-cor.ativa { box-shadow: 0 0 0 3px var(--principal); }

@media (max-width: 960px) {
  .mm-layout { grid-template-columns: 1fr; }
}