.arbol-head { margin-bottom: var(--space-3); }
.arbol-head h1 { margin: 0; }
.arbol-head .eyebrow { margin-bottom: var(--space-1); }

/* ===== Leyenda ===== */
.arbol-leyenda {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-medium);
}
.arbol-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.arbol-leyenda .ic { width: 18px; height: 18px; color: var(--color-primary); }
.ley { width: 26px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 3px; }
.ley--familia { border-top-color: var(--color-primary); }
.ley--pareja { border-top-color: var(--color-gold-deep); border-top-style: dashed; }

/* ===== Contenedor del árbol ===== */
#arbol-wrap { position: relative; }
#tree {
  width: 100%;
  height: 72vh;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(224,164,88,.10), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  touch-action: none;            /* el pan/zoom táctil lo gestiona la librería */
}

/* Controles flotantes (arriba a la derecha del árbol) */
.arbol-controles { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 5; display: flex; gap: var(--space-2); }
.arbol-ctrl {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  color: var(--color-primary-dark); font: inherit; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm);
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), background var(--transition-base);
}
.arbol-ctrl:hover { background: #fff; transform: translateY(-1px); }
.arbol-ctrl .ic { width: 18px; height: 18px; }
.ic-fs-cerrar { display: none; }

/* ===== Enlaces del árbol ===== */
.f3 .link { stroke: var(--color-border-strong); stroke-width: 1.8px; fill: none; }
.f3 .link.link--familia { stroke: var(--color-primary); stroke-width: 1.9px; }
.f3 .link.link--pareja  { stroke: var(--color-gold-deep); stroke-width: 3.2px; stroke-dasharray: 7 6; }
.f3 .link.f3-path-to-main { stroke-width: 3.4px; }

/* ===== Pantalla completa (capa CSS, válida también en iPhone) ===== */
body.arbol-fs-activo { overflow: hidden; }
#arbol-wrap.arbol-fs {
  position: fixed; inset: 0; z-index: 100;
  width: 100vw; height: 100dvh;
  background: var(--color-bg);
}
#arbol-wrap.arbol-fs #tree { height: 100%; border-radius: 0; border: none; box-shadow: none; }
#arbol-wrap.arbol-fs .arbol-controles { top: calc(var(--safe-top) + var(--space-3)); }
#arbol-wrap.arbol-fs .ic-fs-abrir { display: none; }
#arbol-wrap.arbol-fs .ic-fs-cerrar { display: inline-block; }

/* ===== Ficha (panel lateral en escritorio, hoja inferior en móvil) ===== */
.ficha {
  position: fixed; right: var(--space-4); bottom: var(--space-4);
  width: 320px; max-width: calc(100% - var(--space-8));
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated);
  padding: var(--space-6);
  z-index: 60;
  transform: translateY(16px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
}
.ficha--abierta { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.ficha h2 { font-family: var(--font-display); margin-bottom: var(--space-2); }
.ficha-cerrar {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.ficha-cerrar:hover { background: var(--color-surface-2); color: var(--color-primary-dark); }

@media (max-width: 600px) {
  #tree { height: 64vh; }
  .arbol-ctrl { padding: 0 var(--space-3); }
  .ficha {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(var(--safe-bottom) + var(--space-6));
    transform: translateY(100%);
  }
  .ficha--abierta { transform: translateY(0); }
}