/* ════════════════════════════════════════════════
   MAPA CONCEPTUAL INTERACTIVO
   ════════════════════════════════════════════════ */
.mapa-conceptual {
  max-width: 1500px;
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-lg);
}

.mapa-conceptual__shell {
  border: 1px solid var(--c-border-green);
  background: var(--c-surface-a);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mapa-conceptual__header {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--c-border-green);
}

.mapa-conceptual__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-orange);
  margin-bottom: var(--space-sm);
}

.mapa-conceptual__linea {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--c-orange);
}

.mapa-conceptual__titulo {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--c-cream);
  margin-bottom: 0.4rem;
}

.mapa-conceptual__autor {
  color: var(--c-gray);
  font-size: var(--fs-small);
  font-style: italic;
}

.mapa-conceptual__sep { color: var(--c-gray); opacity: 0.5; }

.mapa-conceptual__body {
  display: grid;
  grid-template-columns: 2.8fr 1fr;
}

.mapa-conceptual__canvas-wrap {
  position: relative;
  border-right: 1px solid var(--c-border-green);
}

.mapa-conceptual__svg {
  width: 100%;
  height: 720px;
  display: block;
  background: var(--c-bg-deep);
  cursor: grab;
}

.mapa-conceptual__svg.dragging { cursor: grabbing; }

.mapa-conceptual__controles {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mapa-conceptual__controles button {
  width: 34px;
  height: 34px;
  background: var(--c-bg-warm);
  border: 1px solid var(--c-border-green);
  color: var(--c-cream);
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: border-color 0.3s, color 0.3s;
}

.mapa-conceptual__controles button:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
}

.mapa-conceptual__panel {
  padding: var(--space-md);
  max-height: 720px;
  overflow-y: auto;
}

.mapa-conceptual__panel h4 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-bottom: 0.85rem;
  color: var(--c-cream);
}

.mapa-conceptual__panel p {
  color: var(--c-gray);
  font-size: var(--fs-small);
  line-height: 1.75;
  white-space: pre-line;
  margin-bottom: 1rem;
}

.mapa-conceptual__panel-img-wrap img {
  width: 100%;
  border: 1px solid var(--c-border-green);
  border-radius: var(--radius-xs);
  margin-bottom: 0.5rem;
}

.mapa-conceptual__panel-img-wrap p {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--c-gray);
  opacity: 0.9;
}

.mapa-conceptual__panel-hint {
  font-size: 0.88rem !important;
  color: var(--c-gray) !important;
  opacity: 0.7;
  border-top: 1px solid var(--c-border-green);
  padding-top: var(--space-sm);
  font-style: italic;
}

.mn-node { cursor: pointer; }
.mn-node text { font-family: var(--ff-body); user-select: none; }
.mn-toggle { cursor: pointer; }

@media (max-width: 900px) {
  .mapa-conceptual__body { grid-template-columns: 1fr; }
  .mapa-conceptual__canvas-wrap { border-right: none; border-bottom: 1px solid var(--c-border-green); }
  .mapa-conceptual__svg { height: 540px; }
  .mapa-conceptual__panel { max-height: none; }
}

/* ══════════════════════════════════════════════════════════════
   ÍNDICE NAVEGABLE
   Segunda puerta de entrada al mismo marco conceptual. El grafo
   sigue siendo la vista principal, pero deja de ser la única:
   este árbol se recorre entero con el teclado y lo anuncia un
   lector de pantalla, cosa que un SVG de nodos no hace.
   ══════════════════════════════════════════════════════════════ */
.mapa-vistas { display: flex; gap: 2px; margin-top: var(--space-sm); }
.mapa-vista {
  font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; cursor: pointer; padding: 0.45rem 0.85rem;
  background: transparent; color: var(--c-gray);
  border: 1px solid var(--c-border-green); border-radius: 3px;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.mapa-vista:hover { color: var(--c-cream); border-color: var(--c-green-light); }
.mapa-vista:focus-visible { outline: 2px solid var(--c-green-light); outline-offset: 2px; }
.mapa-vista.on { background: var(--c-green-light); color: var(--c-bg-deep); border-color: var(--c-green-light); }

.mapa-arbol { position: absolute; inset: 0; overflow: auto; padding: var(--space-md); background: var(--c-bg-deep); }
.mapa-arbol[hidden] { display: none; }
.mapa-arbol__ayuda {
  font-family: var(--ff-mono); font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.04em;
  color: var(--c-gray); border-left: 2px solid var(--c-green-light);
  padding: 0.4rem 0 0.4rem 0.7rem; margin: 0 0 var(--space-md);
}
.mapa-arbol__ayuda b { color: var(--c-cream); font-weight: 600; }
.mapa-arbol ul { list-style: none; margin: 0; padding-left: 1.05rem; border-left: 1px solid var(--c-border-green); }
.mapa-arbol > .mapa-arbol__host > ul { padding-left: 0; border-left: 0; }
.mapa-arbol li { margin: 1px 0; }
.mapa-arbol__nodo {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--c-cream);
  font-family: var(--ff-body); font-size: 0.92rem; line-height: 1.35;
  padding: 0.4rem 0.6rem; border-radius: 3px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mapa-arbol__nodo:hover { background: rgba(63, 138, 53, 0.12); }
.mapa-arbol__nodo:focus-visible { outline: 2px solid var(--c-green-light); outline-offset: -1px; }
.mapa-arbol__nodo[aria-selected="true"] { background: rgba(63, 138, 53, 0.2); box-shadow: inset 2px 0 0 var(--c-green-light); }
.mapa-arbol__nodo .tw { font-family: var(--ff-mono); font-size: 0.62rem; color: var(--c-green-light); width: 0.75rem; flex: 0 0 auto; }
.mapa-arbol__nodo.raiz { font-family: var(--ff-display); font-size: 1.12rem; font-weight: 600; }
.mapa-arbol__nodo .nkids { font-family: var(--ff-mono); font-size: 0.62rem; color: var(--c-gray); margin-left: auto; flex: 0 0 auto; opacity: 0.7; }

@media (max-width: 900px) {
  .mapa-arbol { position: static; inset: auto; max-height: 540px; }
}

/* ───── enlace citable por concepto ───── */
.mapa-conceptual__panel-cita {
  border-top: 1px solid var(--c-border-green);
  padding-top: var(--space-sm); margin-top: var(--space-sm);
}
.mapa-conceptual__cita-lbl {
  display: block; font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-gray); margin-bottom: 0.45rem;
}
.mapa-conceptual__cita-url {
  display: block; font-family: var(--ff-mono); font-size: 0.68rem; line-height: 1.5;
  color: var(--c-gray); word-break: break-all; background: var(--c-bg-deep);
  border: 1px solid var(--c-border-green); border-radius: 3px;
  padding: 0.45rem 0.6rem; margin-bottom: 0.5rem;
}
.mapa-conceptual__cita-btn {
  font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.09em;
  text-transform: uppercase; cursor: pointer; background: transparent;
  color: var(--c-gray); border: 1px solid var(--c-border-green);
  border-radius: 3px; padding: 0.35rem 0.7rem; transition: color 0.18s, border-color 0.18s;
}
.mapa-conceptual__cita-btn:hover { color: var(--c-green-light); border-color: var(--c-green-light); }