/* ============================================================
   Flujos de decisión
   ------------------------------------------------------------
   Capa: componente

   Para el contenido del tipo "tengo esto delante, ¿por dónde
   empiezo?": criterios de convergencia, límites dobles, estudio
   de funciones, métodos de integración.

   HERMANO DE `.paso`, NO REEMPLAZO
   `.paso` (96 apuntes) es una secuencia LINEAL: hacé esto, después
   esto. Comparte el lenguaje visual —tarjeta, número en círculo,
   conector vertical, hover— y a propósito: los dos tienen que
   leerse como la misma familia. Lo que agrega este componente es
   lo único que a `.paso` le falta: BIFURCARSE.

   EL PROBLEMA QUE VINO A RESOLVER
   Hasta ahora un árbol de decisión se escribía dentro de un
   `.formula-box`, que trae `text-align: center`. Un flujo centrado
   no tiene borde izquierdo que seguir y se lee como un párrafo
   largo. Peor: adentro de esa caja una PREGUNTA, una ACCIÓN y un
   RESULTADO salían las tres como `<strong>` de acento dentro de un
   `<p>`, así que "diverge y terminaste" —el final del camino— se
   veía igual que "aplicá Leibniz" —seguí—. Y la bifurcación se
   marcaba con `style="margin-left:1.2em"`: la sangría sola no dice
   que dos ramas son excluyentes.

   FUNCIONA SIN JAVASCRIPT
   La numeración es un `counter` de CSS y los conectores son
   pseudo-elementos. El JS agrega SOLO el resaltado del camino.
   Sin él, el flujo se lee entero igual — que es lo que pasa al
   imprimir y en el PDF.

   SOLO TOKENS DEL CONTRATO. Ni un literal.
   ============================================================ */

.flujo {
  counter-reset: flujo-paso;
  margin: 1.8rem 0;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ⚠️ El titulo es un ELEMENTO del marcado, no un `data-titulo` con
   content: attr(). La primera version lo hacia asi y estaba mal: el
   titulo lleva LaTeX —"Decidir la convergencia de \(\sum a_n\)"— y
   MathJax no puede tipografiar el contenido de un pseudo-elemento.
   Habria salido el codigo crudo, o nada. */
.flujo-titulo {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   EL NODO
   El badge se apoya sobre el borde superior izquierdo,
   como una tarjeta numerada, y deja todo el ancho de la
   tarjeta para el contenido.
═══════════════════════════════════════════════════ */
.flujo-nodo {
  position: relative;
  margin-top: 26px;
  padding: 1rem 1.1rem .95rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t), opacity var(--t), transform .2s, box-shadow .2s;
}
.flujo-nodo:first-of-type { margin-top: 0; }

/* ── El badge ──
   Numeración por counter de CSS: sobrevive sin JS y se renumera
   sola si se agrega o se saca un nodo. Los resultados NO cuentan:
   son salidas del flujo, no pasos de él. */
/* ⚠️ `:not([data-num])` es parte de la regla, no un adorno. Un nodo
   que fija su propio rotulo —"3a", "3b"— NO tiene que consumir un
   numero del contador: si lo consume, el paso siguiente salta. En el
   arbol de series eso daba 1, 2, 3, "3a", "3b", **6** en vez de 4. */
.flujo-nodo:not([data-tipo="resultado"]):not([data-num]) { counter-increment: flujo-paso; }

.flujo-nodo::after {
  content: counter(flujo-paso);
  position: absolute;
  left: 12px; top: -13px;
  width: 32px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--on-accent-2);
  border: 2px solid var(--card2);
  transition: background var(--t), transform .2s;
}
/* Un nodo puede fijar su rótulo: "3a", "3b", "4". */
.flujo-nodo[data-num]::after { content: attr(data-num); }

/* ── Conector del tronco ──
   Rellena exactamente el hueco del margin-top. Mismo mecanismo que
   `.paso + .paso::before`, que ya funciona en 96 apuntes: no hay
   coordenadas fijas, así que el conector no se rompe cuando MathJax
   renderiza una fórmula y cambia el alto de la tarjeta. Un flowchart
   en SVG sí se rompería, y acá casi todos los nodos llevan LaTeX. */
.flujo-nodo:not(:first-of-type)::before {
  content: '';
  position: absolute;
  left: 27px; top: -26px;
  width: 2px; height: 26px;
  background: var(--border-2);
}

/* ═══════════════════════════════════════════════════
   TIPOS DE NODO
   Es la distinción que en el formato viejo no existía.
═══════════════════════════════════════════════════ */

/* PREGUNTA · una decisión. Estructura, por eso --accent-2. */
.flujo-nodo[data-tipo="pregunta"] {
  border-color: var(--border-2);
}

/* ACCIÓN · "hacé esto y seguí".
   Comparte el badge con la pregunta a propósito: las dos son PASOS del
   flujo y las dos van numeradas. Lo que las distingue es lo que de
   verdad importa —la pregunta trae ramas visibles, la acción no— más
   el borde teñido de la pregunta.

   La primera versión le daba a la acción un badge --accent con
   --on-accent encima. Se descartó al medir: en Atlas claro ese par del
   CONTRATO da 3,74:1 (blanco #ffffff sobre teal #0d9488), por debajo
   de AA 4,5 para un glifo de 11,5 px. Es un defecto preexistente de
   Atlas —los otros cuatro layouts dan entre 6,44 y 15,75— y afecta a
   cualquier componente que use ese par, incluido el `.paso-num` en
   hover. No se arregla acá: se esquiva, y queda anotado. */

/* RESULTADO · el camino termina acá.
   Va indentado y colgado de un codo: la mirada tiene que ver que
   el tronco sigue bajando y que esto es una SALIDA lateral, no el
   paso siguiente. */
.flujo-nodo[data-tipo="resultado"] {
  margin-left: 46px;
  background: var(--bg3);
}
.flujo-nodo[data-tipo="resultado"]:not(:first-of-type)::before {
  left: -25px; top: -26px;
  width: 24px; height: 36px;
  background: none;
  border-left: 2px solid var(--border-2);
  border-bottom: 2px solid var(--border-2);
  border-bottom-left-radius: 10px;
}
/* El badge de un resultado no es un número: es un signo de cómo
   terminó. Se define por estado, más abajo. */
.flujo-nodo[data-tipo="resultado"]::after {
  content: '•';
  left: -13px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  font-size: .8rem;
  border-color: var(--bg2);
}

/* ── Estados del resultado ──
   --estado-* está en los cinco layouts, en claro y oscuro, y cada
   uno lo trae en su propio tono. --on-estado lo define cada firma
   para el modo oscuro. */
.flujo-nodo[data-estado="ok"]      { border-color: var(--estado-ok); }
.flujo-nodo[data-estado="aviso"]   { border-color: var(--estado-aviso); }
.flujo-nodo[data-estado="critico"] { border-color: var(--estado-critico); }

/* El glifo va DEL COLOR del estado sobre fondo neutro, no al revés.
   La primera versión pintaba la pastilla con --estado-* y el glifo con
   --on-estado: medido en Premium oscuro daba 3,82:1 para el crítico,
   con AA en 4,5 para un glifo de 12,8 px. El problema era de origen —
   cada firma define --on-estado como --on-accent, o sea un color
   elegido para el ACENTO, no para el estado.
   Sobre --bg2 el par sí está garantizado: es exactamente el que la
   auditoría del semáforo (1.7.1 / 1.7.2) midió y corrigió en los cinco
   layouts. Y a este tamaño un anillo de color se lee mejor que una
   pastilla llena. */
.flujo-nodo[data-tipo="resultado"]::after {
  background: var(--bg2);
  border-width: 2px;
  border-style: solid;
}
.flujo-nodo[data-estado="ok"]::after {
  content: '\2713';                       /* ✓ */
  color: var(--estado-ok); border-color: var(--estado-ok);
}
.flujo-nodo[data-estado="aviso"]::after {
  content: '\0021';                       /* ! */
  color: var(--estado-aviso); border-color: var(--estado-aviso);
}
.flujo-nodo[data-estado="critico"]::after {
  content: '\2715';                       /* ✕ */
  color: var(--estado-critico); border-color: var(--estado-critico);
}

/* ═══════════════════════════════════════════════════
   CONTENIDO DEL NODO
═══════════════════════════════════════════════════ */
.flujo-consigna {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}
.flujo-consigna strong { color: var(--text); }

.flujo-detalle {
  margin: .5rem 0 0;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════
   LAS RAMAS
   Dos alternativas EXCLUYENTES, y se tiene que ver que
   lo son. Por eso son botones lado a lado y no dos
   párrafos sangrados.
═══════════════════════════════════════════════════ */
.flujo-ramas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.flujo-rama {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .35rem .85rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.3;
  text-align: left;
  color: var(--text-2);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t), color var(--t), background var(--t), transform .15s;
}

/* La etiqueta SÍ/NO va en un pseudo-elemento y no en el marcado:
   así el apunte escribe data-via="si" y no puede escribirla mal ni
   olvidarse de traducirla.

   La COMA es parte de la etiqueta y no es cosmética: la rama se lee de
   corrido, y sin coma la etiqueta se pega al texto y cambia el sentido
   —«NO hay indeterminación» dice lo CONTRARIO que «NO, hay
   indeterminación»—. Va acá por lo mismo que la etiqueta: dos líneas
   cubren las 94 ramas sí/no del sistema y todo flujo nuevo la hereda.
   Ver REFERENCIA-flujos.md §4. */
.flujo-rama::before {
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.flujo-rama[data-via="si"]::before  { content: 'SÍ,'; color: var(--estado-ok); }
.flujo-rama[data-via="no"]::before  { content: 'NO,'; color: var(--estado-critico); }
/* Una tercera salida, para cuando la pregunta no es binaria. */
.flujo-rama[data-via="otro"]::before { content: '↳'; color: var(--accent); }

.flujo-rama:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}
.flujo-rama:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   CAMINO ELEGIDO
   Sutil a propósito: no cambia colores de marca ni mueve
   nada de lugar. Solo BAJA todo lo que no es el camino,
   y sube apenas lo que sí. La página no se reorganiza.
   Las clases las pone nucleo/flujo.js.
═══════════════════════════════════════════════════ */
.flujo.hay-camino .flujo-nodo { opacity: .34; }
.flujo.hay-camino .flujo-nodo.en-camino { opacity: 1; }

.flujo-nodo.en-camino {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow-sm);
}
/* El origen del salto se marca más suave que el destino: lo que
   interesa mostrar es a DÓNDE se llega. */
.flujo-nodo.en-camino-origen { box-shadow: none; }

.flujo.hay-camino .flujo-rama { opacity: .5; }
.flujo.hay-camino .flujo-rama.elegida { opacity: 1; }
.flujo-rama.elegida {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text);
}

/* Volver a ver todo. Lo inyecta el JS solo si hay algo que
   limpiar, así no ocupa lugar mientras no se usó. */
.flujo-limpiar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  margin-top: 1.1rem;
  padding: .3rem .85rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.flujo-limpiar:hover { border-color: var(--accent); color: var(--accent); }
.flujo-limpiar[hidden] { display: none; }

/* ═══════════════════════════════════════════════════
   MÓVIL
   El tronco se angosta y el resultado deja de colgar de
   un codo largo: con 375 px de ancho, 46 px de sangría
   se comen una palabra por línea.
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .flujo { padding: 1.1rem .75rem 1.2rem; }
  .flujo-nodo { padding: .9rem .8rem .85rem; margin-top: 24px; }
  .flujo-nodo[data-tipo="resultado"] { margin-left: 22px; }
  .flujo-nodo[data-tipo="resultado"]:not(:first-of-type)::before {
    left: -15px; width: 14px;
  }
  .flujo-consigna { font-size: .9rem; }
  /* Las ramas pasan a ocupar el ancho: son el objetivo táctil del
     componente y con `flex-wrap` quedaban de 90 px. */
  .flujo-ramas { flex-direction: column; align-items: stretch; }
  .flujo-rama { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════
   IMPRESIÓN
   Todo desplegado y sin atenuar: en papel no hay camino
   elegido, están todos.
═══════════════════════════════════════════════════ */
@media print {
  .flujo.hay-camino .flujo-nodo,
  .flujo.hay-camino .flujo-rama { opacity: 1 !important; }
  .flujo-nodo.en-camino { box-shadow: none !important; }
  .flujo-limpiar { display: none !important; }
  .flujo-nodo { break-inside: avoid; }
  .flujo { break-inside: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .flujo-nodo, .flujo-rama { transition: none; }
  .flujo-rama:hover { transform: none; }
}