/* =========================================================
   MANUAL — MAPA
   Solo la página del mapa del Manual.
   Se carga después de `v4-manual.css`.
   ========================================================= */


/* =========================================================
   01) INTRODUCCIÓN DEL MAPA
   El icono, el texto de entrada y el retorno al Manual.
   ========================================================= */

.manual-map {
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.manual-map-intro {
  display: grid;
  justify-items: center;
  width: min(100%, 50rem);
  margin: 0 auto clamp(5rem, 10vw, 8rem);
  text-align: center;
}

.manual-map-icon {
  width: clamp(6rem, 10vw, 8.5rem);
  height: auto;
  margin-bottom: 1.25rem;
}

.manual-map-intro .section-lead {
  margin-bottom: 2rem;
}


/* =========================================================
   02) EL ÁRBOL
   Las ramas del Manual, sus filetes de unión y el color de cada tipo de nodo.
   ========================================================= */

.manual-map-forest {
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--v4-petrol-border);
}

.manual-tree,
.manual-tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.manual-tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(3rem, 6vw, 6rem);
}

.manual-tree-node {
  min-width: 0;
}

.manual-tree-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  overflow-wrap: anywhere;
  text-underline-offset: 0.2em;
}

.manual-tree > .manual-tree-node > .manual-tree-link {
  display: flex;
  color: var(--v4-petrol-link);
  font-family: var(--v4-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}

.manual-tree-link .manual-node-icon {
  margin-top: 0.05em;
}

.manual-tree ul {
  position: relative;
  margin-top: 1.25rem;
  margin-left: 0.45rem;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid color-mix(in srgb, var(--v4-ochre) 48%, transparent);
}

.manual-tree ul > .manual-tree-node {
  position: relative;
  padding-block: 0.48rem;
}

/* El filete que une cada rama con su tronco se dibuja con contenido generado, para no añadir marcado al árbol. */
.manual-tree ul > .manual-tree-node::before {
  position: absolute;
  top: 1.15em;
  left: calc(clamp(1.25rem, 2.5vw, 2rem) * -1);
  width: clamp(0.85rem, 1.8vw, 1.35rem);
  border-top: 1px solid color-mix(in srgb, var(--v4-ochre) 48%, transparent);
  content: "";
}

/* La última rama tapa con el color del fondo el tramo sobrante del tronco vertical: así la línea termina en el último nodo y no sigue hasta abajo. */
.manual-tree ul > .manual-tree-node:last-child::after {
  position: absolute;
  top: calc(1.15em + 1px);
  bottom: -0.55rem;
  left: calc(clamp(1.25rem, 2.5vw, 2rem) * -1 - 1px);
  width: 3px;
  background: var(--v4-bg);
  content: "";
}

.manual-tree-node-subblock > .manual-tree-link {
  color: var(--v4-petrol-hover);
  font-family: var(--v4-font-heading);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
}

.manual-tree-node-article > .manual-tree-link {
  color: var(--v4-petrol-link);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
  line-height: 1.45;
}


/* =========================================================
   03) ALTERNATIVA SIN COLOR-MIX
   El filete del árbol en navegadores que no calculan mezclas de color.
   ========================================================= */

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {

  .manual-tree ul,
  .manual-tree ul > .manual-tree-node::before {
    border-color: #66583f;
  }

}


/* =========================================================
   04) ADAPTACIÓN A PANTALLAS ESTRECHAS
   La sangría del árbol en pantallas estrechas.
   ========================================================= */

@media (max-width: 50rem) {

  .manual-map-intro {
    margin-bottom: 4rem;
  }

  .manual-tree {
    grid-template-columns: 1fr;
  }

}