/* /setter-ia · «Por dentro»: un setter IA típico frente a Helix, dos árboles de nodos (docs/plans/web-funciones/
   herramientas/arbol_setter.py). Solo tokens de helix-web.css. Sin JS o con «reducir movimiento» todo sale encendido;
   con movimiento, helix-arbol.js pone .ax2-vivo y enciende los nodos al paso del pulso. */

.ax2 { padding-top: clamp(4px, 1.5vw, 18px); }
.ax2-cabecera { text-align: center; max-width: 760px; margin: 0 auto; }
.ax2-cabecera h2 { margin-top: 10px; }
.ax2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 28px); max-width: 1040px;
  margin: clamp(20px, 3vw, 34px) auto 0; }

.ax2-lado { margin: 0; padding: clamp(16px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(14px, 1.8vw, 20px);
  border-radius: var(--hx-r-seccion); display: flex; flex-direction: column; }
.ax2-lado--tipico { background: var(--hx-sunken); box-shadow: inset 0 0 0 .5px var(--v5-edge); }
.ax2-lado--helix { background: var(--v5-card);
  box-shadow: 0 0 0 .5px var(--v5-edge), var(--v5-sh1), 0 30px 70px -40px color-mix(in srgb, var(--v5-acc) 60%, transparent); }
.ax2-cab { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-size: 15px; color: var(--v5-t1); }
.ax2-lado--tipico .ax2-cab { color: var(--v5-t2); }
.ax2-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--v5-t3); }
.ax2-lado--helix .ax2-punto { background: var(--v5-acc); box-shadow: 0 0 0 4px var(--hx-acc-bg); }
.ax2-pie { margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--v5-t2); }
.ax2-lado--helix .ax2-pie { color: var(--v5-t1); font-weight: 600; }

/* El árbol: SVG (aristas y pulsos) y nodos HTML en el mismo sistema de coordenadas (400 × 500) */
.ax2-arbol { position: relative; aspect-ratio: 400 / 500; margin: 14px 0 26px; }
.ax2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ax2-a { fill: none; stroke: var(--v5-line); stroke-width: 1.6; stroke-linecap: round; }
.ax2-lado--helix .ax2-a { stroke: color-mix(in srgb, var(--v5-acc) 26%, var(--v5-line)); }
.ax2-a--lateral, .ax2-a--vuelta { stroke-dasharray: 3 5; }
.ax2-luz { fill: none; stroke: var(--v5-acc); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--v5-acc) 75%, transparent)); }
.ax2-luz.ax2-a--vuelta { stroke-dasharray: 3 5; filter: none; opacity: .85; }
.ax2-lado--tipico .ax2-luz { stroke: var(--v5-t3); filter: none; stroke-width: 2; }
.ax2-nota { font-size: 11px; fill: var(--v5-t3); font-family: inherit; }
.ax2-pulso { fill: var(--v5-acc); filter: drop-shadow(0 0 5px var(--v5-acc)); }
.ax2-lado--tipico .ax2-pulso { fill: var(--v5-t2); filter: none; }

.ax2-nodos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ax2-n { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: 14px; background: var(--v5-card); white-space: nowrap; text-align: left;
  font-size: 13.5px; line-height: 1.2; color: var(--v5-t1); box-shadow: 0 0 0 .5px var(--v5-edge), var(--v5-sh1);
  transition: box-shadow .45s var(--v5-eo), color .45s var(--v5-eo); }
.ax2-n b { display: block; font-weight: 650; }
.ax2-n small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--v5-t2); }
.ax2-n i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--v5-t3); }
.ax2-n--ia i { width: 13px; height: 13px;
  background: radial-gradient(circle at 34% 30%, #ffd9cc 0, var(--v5-acc) 55%, color-mix(in srgb, var(--v5-acc) 55%, #000) 100%); }
.ax2-n--codigo i, .ax2-n--dato i { border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 2px var(--hx-acc-text); }
.ax2-n--fin i { background: var(--v5-acc); }
.ax2-n--gris i { background: var(--v5-t3); }
.ax2-n--hueco { box-shadow: none; outline: 1.5px dashed var(--v5-line); outline-offset: -1.5px;
  color: var(--v5-t2); font-weight: 600; }  /* t2: con t3 no pasaba el contraste AA */
.ax2-n--hueco i { display: none; }
/* Los nodos sin relleno tapan la arista con el color de su tarjeta (si no, la línea les cruza el texto) */
.ax2-lado--tipico .ax2-n--hueco { background: var(--v5-card); }  /* opaco: el fondo hundido es translúcido */
.ax2-lado--helix .ax2-n--lateral { background: var(--v5-card); }
.ax2-n--lateral { padding: 5px 10px; font-size: 12px; color: var(--v5-t2);
  box-shadow: inset 0 0 0 1px var(--v5-line); }
.ax2-n--lateral i { display: none; }
.ax2-n--lateral b { font-weight: 600; }

/* Encendido: sin JS todo lo está; con .ax2-vivo, solo lo que ya recorrió el pulso (.on) */
.ax2-lado--helix .ax2-n:not(.ax2-n--hueco):not(.ax2-n--lateral) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-acc) 60%, transparent),
  0 0 26px -6px color-mix(in srgb, var(--v5-acc) 70%, transparent), var(--v5-sh1); }
.ax2-vivo .ax2-lado--helix .ax2-n:not(.on):not(.ax2-n--hueco):not(.ax2-n--lateral) { box-shadow: 0 0 0 .5px var(--v5-edge), var(--v5-sh1); }
.ax2-vivo .ax2-lado--tipico .ax2-n.on { box-shadow: 0 0 0 1px var(--v5-t3), var(--v5-sh1); }

/* «Enviado» bajo el último nodo */
.ax2-n[data-n="sale"]::after { content: "Enviado"; position: absolute; left: 50%; top: calc(100% + 7px);
  transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  background: var(--hx-acc-bg); color: var(--hx-acc-text); transition: opacity .35s var(--v5-eo), transform .35s var(--v5-eo); }
.ax2-lado--tipico .ax2-n[data-n="sale"]::after { content: "Enviado sin revisar"; background: var(--hx-sunken);
  color: var(--v5-t2); box-shadow: inset 0 0 0 1px var(--v5-line); }
.ax2-vivo .ax2-n[data-n="sale"]:not(.enviado)::after { opacity: 0; transform: translate(-50%, -4px); }

.ax2-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 18px 0 0; font-size: 13px;
  color: var(--v5-t2); }
.ax2-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.ax2-l { display: inline-block; width: 11px; height: 11px; }
.ax2-l--ia { border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffd9cc 0, var(--v5-acc) 55%, color-mix(in srgb, var(--v5-acc) 55%, #000) 100%); }
.ax2-l--codigo { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--hx-acc-text); }
.ax2-l--hueco { border-radius: 3px; outline: 1.5px dashed var(--v5-t3); outline-offset: -1.5px; }
.ax2-fuente { text-align: center; margin: 8px auto 0; max-width: 640px; }

@media (max-width: 860px) {
  .ax2-duo { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 520px) {
  .ax2-n { font-size: 12px; padding: 6px 9px 6px 8px; gap: 6px; border-radius: 12px; }
  .ax2-n small { font-size: 10.5px; }
  .ax2-n--dato small { display: none; }
  .ax2-n--lateral { font-size: 10.5px; padding: 4px 7px; }
  .ax2-nota { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax2-n, .ax2-n[data-n="sale"]::after { transition: none; }
}

/* /setter-ia: hero más compacto para que «Por dentro» entre en la primera pantalla (Alex: «que sea lo primero que se vea») */
.hx-hero2--compacto { padding: clamp(30px, 4.2vw, 54px) 0 0; }  /* arriba, aire bajo la cabecera (en producción la
   pastilla quedaba pegada a ella: este hero no tenía relleno superior) */
.hx-hero2--compacto .hx-h1 { font-size: clamp(38px, 5.4vw, 70px); }
.hx-hero2--compacto .hx-riesgo { margin-bottom: 0; }