/* ---- The Initiating walk (JourneyNavigation.razor) -------------------- */
/* The strip of the six stages of the Initiating phase, drawn inside the project's own screen while the project is
   in that phase. It is the little brother of the phase strip (`layout.css`, `.phase-navigation`): the same surface,
   the same one-row-of-steps shape and the same treatment for the step being read — the owner asked for the walk to
   look like the bar of phases, one level down. It is a family of its own and it does not re-style the phase strip:
   what it adds is **the state of a step and its pendings**, which is what the walk exists to say.

   The four state modifiers come from the four words of `InitiatingJourneyStates`, in the server's vocabulary:
   `Waiting`, `In progress`, `Complete`, `Blocked`. */

/* **Las dos tiras del recorrido viven juntas en la tarjeta del proyecto**: la de etapas —tercera barra— y la de los
   artefactos de la etapa que se lee —cuarta barra, debajo de la tercera—. Es la instrucción del dueño del 2026-09-30:
   «la barra 4 va debajo de la barra 3». El envoltorio trae el hueco de arriba —el mismo (`--space-sm`) que separa la
   banda del proyecto de las fases— y cierra las esquinas de la tarjeta, porque es el último elemento suyo. */
.journey-bars {
  margin-top: var(--space-3xs);
  background: transparent;
  border-radius: 0;
}

.journey-navigation {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.journey-navigation__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  margin: 0;
  /* **A ras del borde de la tarjeta del proyecto**, que es la correccion del dueno del 2026-09-30: «la barra 2 (del
     nombre del proyecto) tiene una card ahi deben iniciar y finalizar todas las demas barras porque si no se ve una
     barra mas ancha que otra como un escalon». La tarjeta rellena 16 px por dentro para su texto, pero lo que manda es
     su borde: la primera etapa empieza donde empieza la tarjeta y la ultima acaba donde acaba. */
  padding: var(--space-3xs) 0;
  list-style: none;
}

.journey-navigation__step {
  display: block;
  flex: 1 0 132px;
  min-width: 132px;
}

.journey-navigation__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  /* **Su alto no es el de un control: es el de lo que dibuja.** Una fila para el número de la fase —en el tamaño de
     una pista— y otra para el icono con el nombre, más el relleno y el borde: unos 39px, por debajo de los 40px de la
     tira de fases, que es lo que el dueño pidió al revisar la tira del recorrido el 2026-09-30. Sin `min-height` de
     control el paso mide su contenido y se puede bajar sin tocar el alto de las otras tiras.
     **Y el relleno es de 4 px, no de 2**, que es la segunda mitad de esa instrucción —«barra 4 … ponerle 4 px mas de
     alto y centrar el contenido»—: los 4 px salen de aquí, dentro del propio boton, y el contenido sigue centrado. */
  min-height: 0;
  height: 100%;
  padding: var(--space-2xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

a.journey-navigation__tab:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong);
}

.journey-navigation__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* La primera fila de un paso: el número de la fase. Es la instrucción del dueño del 2026-09-30 — «lo que diga Phase va
   en una fila el otro texto con icono abajo»— y por eso el número vive solo, en el tamaño de una pista y sin competir
   con el nombre. */
.journey-navigation__phase {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-tight);
}

/* La segunda fila: el nombre de la etapa con su icono, centrados. */
.journey-navigation__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-width: 0;
}

/* ---- The fourth bar: the artefacts of the stage being read (JourneyNavigation.razor) ---- */
/* **Los botones de los artefactos de la etapa que se lee, repartidos a todo lo ancho.** Es la instrucción del dueño
   del 2026-09-30: «en la fase 2 de initiating dice Initial artefacts pero debe mostrar los botones de esos artefactos
   en la barra 4 … pero los botones deben distribuirse a lo ancho de la barra 4 … igual racionamiento con la fase 4».
   Cada botón lleva el mismo icono que la barra de artefactos del proyecto (`ArtefactIcons`) y lleva a la pantalla de
   su artefacto **leída desde el recorrido**; un artefacto cuya pantalla no existe todavía conserva su botón y no es un
   enlace, con su leyenda diciéndolo. La línea de arriba es lo que separa esta barra de la tercera, como la tira de
   fases se separa de la banda del proyecto. */
.journey-artifacts {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-top: var(--space-3xs);
  scrollbar-width: thin;
}

.journey-artifacts__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  /* **El alto de la barra, aunque no tenga botones.** El dueño pidió que el contenido de la pantalla empiece debajo de
     la altura de esta barra (2026-09-30), y una etapa sin opciones —la de los interesados, la del alcance, la del
     dinero— no puede dejar que lo de abajo suba: el alto es el de un botón más su relleno, tenga o no tenga piezas.
     El botón mide 26px desde el 2026-09-30 —icono de 16, su relleno de 4 a cada lado y su borde—, 4 px más de alto por
     la instrucción del dueño sobre esta barra. */
  min-height: calc(1rem + (2 * var(--space-2xs)) + (2 * var(--border-width)));
  margin: 0;
  /* **A ras del borde de la tarjeta del proyecto**, igual que las barras 3 y 4: las tres empiezan y acaban en la misma
     vertical, que es lo que impide que una se vea mas ancha que otra (2026-09-30). */
  padding: var(--space-3xs) 0;
  list-style: none;
}

/* **Una misma porción para cada botón**, que es lo que los reparte a lo ancho: con seis artefactos, seis porciones
   iguales; con cinco, cinco. `min-width: 0` para que un nombre largo se parta en vez de empujar a los demás. */
.journey-artifacts__item {
  flex: 1 1 0;
  min-width: 0;
}

.journey-artifacts__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  height: 100%;
  min-height: 0;
  /* 4 px de relleno: es lo que hace esta barra 4 px mas alta, y el contenido —el icono y el nombre— sigue centrado. */
  padding: var(--space-2xs);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

a.journey-artifacts__button:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

/* El artefacto que se está leyendo: el mismo relleno que el paso de la fase que se lee, para que las cuatro barras
   digan «estás aquí» de la misma manera. */
a.journey-artifacts__button[aria-current="page"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

.journey-artifacts__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

/* **La palabra del estado y el número de pendientes ya no se dibujan en el paso.** El dueño los quitó el 2026-09-30
   al pedir el paso de dos filas —«lo que diga Phase va en una fila el otro texto con icono abajo»—: las reglas
   `.journey-navigation__state` y `.journey-navigation__pending` se retiraron con ellos. El estado y lo que la etapa
   debe siguen viniendo del servidor y se leen en la pantalla de la etapa y en la lista de la fase 3, no en la tira. */

/* The step being read wears the filled treatment of the phase strip's own selected step. */
.journey-navigation__tab--selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-strong);
}

/* A stage whose previous one is not complete: it is the normal state of the back half of the walk while the walk
   has not reached it, and it is **not** a door — the step can still be opened (`REC-25`). */
.journey-navigation__tab--waiting {
  color: var(--color-text-muted);
  border-style: dashed;
}

/* **Los estados ya no pintan el paso.** Hasta el 2026-09-30 *En curso* y *Completa* llevaban relleno —el verde del
   sistema— y el dueño lo quitó: «la tercera barra tiene unos botones color verde quitar ese color y dejarlo sin color
   como los otros botones». Lo que queda es el mismo paso llano de la tira de fases, y lo que distingue a un estado de
   otro es **la forma del borde y la palabra**, nunca el color. */
.journey-navigation__tab--in-progress {
  border-color: var(--color-border-strong);
}

.journey-navigation__tab--complete {
  border-color: var(--color-border);
}

/* Blocked is «its condition is met and something behind changed»: nothing produces it yet — the mark of «old»
   arrives with the stored proposals — and it is the one state that keeps a colour, because it is a fault and not a
   state of the walk: the day it happens, the step has to shout. */
.journey-navigation__tab--blocked {
  border-color: var(--color-border-strong);
  background: var(--color-border);
  color: var(--color-text-muted); border-style: dashed;
}

/* The touch minimum the phase strip also serves at the end of its own sheet. */
@media (pointer: coarse) {
  .journey-navigation__tab {
    min-height: 44px;
  }
}

/* ---- One stage of the walk (JourneyStagePage.razor) ------------------ */
/* The screen of a stage: what the stage holds and what its analysis is waiting for, under its legend.
   **Es un marco de artefacto, no un marco propio.** El dueño pidió el 2026-10-01 que esta pantalla llevara la leyenda
   «en el mismo sitio» que la de los artefactos, y eso incluye el marco: por eso **no lleva relleno propio** —el del
   armazón de la aplicación es el mismo que alcanza a las pantallas de artefacto, y con un relleno de más la tarjeta
   caía 16 px adentro y 12 px más abajo que las demás— y separa sus dos piezas con **2 px**, como los catorce marcos de
   artefacto (`layout.css`). */

.journey-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* Lo que la etapa dice de sí misma y lo que su corrida produce, con el ritmo de siempre: el único hueco que el dueño
   pidió es el de arriba —los 2 px entre la leyenda y el contenido— y de dentro se encarga esta regla, para que la
   pantalla no se lea apretada. */
.journey-stage__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.journey-stage__recovery {
  display: flex;
  justify-content: flex-start;
}

/* El ancla del título de la etapa, que la pantalla pasa al `PageHeader` compartido como su `HeadingClass` —igual que
   hacen los catorce artefactos—: el título lo dibuja el head, y lo que esta hoja posee de él es el margen que la regla
   propia del head deja. */
.journey-stage__title {
  margin: 0;
}

/* The state of the stage and, when it has one, the server's reason: they travel together because a state without
   its reason is the defect the whole design avoids. */
.journey-stage__state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
}

.journey-stage__state-word {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.journey-stage__reason {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* **La puerta del acto se dice donde está el acto, y esa regla se fue de aquí el 2026-10-02.** La pantalla de etapa
   dibujaba su propia frase de puerta (`journey-stage__gate`), y una etapa con análisis es exactamente la que dibuja sus
   registros: los registros dicen la puerta —en la fila de su análisis o en su línea de siempre— y aquí quedaba dicha dos
   veces. Con **dos análisis** habría sido además la puerta de uno sola. La frase que se lee es la del servidor, en la
   hoja de los registros. */

.journey-stage__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.journey-stage__caption {
  padding-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  text-align: left;
}

.journey-stage__table th,
.journey-stage__table td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-default);
  text-align: left;
}

.journey-stage__row th {
  font-weight: var(--font-weight-semibold);
}

/* ---- Las habilidades de IA de la etapa 3 (JourneySkills.razor) -------------------
   Van **debajo de la leyenda y encima del paso de la etapa**, que es donde el dueño las quiso el 2026-10-02: la leyenda
   dice qué es la etapa, la barra dice desde qué especialidad se lee, y debajo está el paso con su acto.
   **Su separación es de 2 px** —la del ritmo de la pantalla, la misma que la leyenda tiene con el contenido—: el dueño
   lo pidió así el mismo día, porque con más espacio el control se veía descolgado de lo demás. */
.journey-skills {
  margin-bottom: var(--space-3xs);
}

/* ---- The records of a stage (JourneyRecords.razor) ------------------- */
/* Two drawers over one list: what is accepted or discarded and what is answered. They are drawn as one region with
   a subtitle per drawer, which is what keeps a decided proposal and an unanswered gap from being read as the same
   kind of thing. */

.journey-records {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.journey-records__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
}

.journey-records__title {
  margin: 0;
  font-size: var(--font-size-md);
}

/* What the model proposed and could not be stored, counted by reason. Nothing is filtered in silence. */
.journey-records__dropped {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

/* ---- Las secciones de la corrida: título grande, y pegado arriba mientras se recorre ----
   El dueño lo pidió el 2026-10-01 mirando los huecos: «los huecos tienen un titulo correcto las proposals tambien deben
   tener un titulo.. este titulo debe ser grande y debe permanecer que cuando haga scroll se vea el titulo como haga
   scroll mas abajo y lleguemos a Gaps entonces que ese titulo Gaps se vea del mismo tamaño que proposal y permanzca
   cuando este viendo Gaps».
   **Cada sección es un bloque dentro de la región que scrollea**, y eso es lo que hace posible lo que pidió: `sticky` se
   limita al bloque que contiene al título, así que el de las propuestas se queda arriba mientras se recorren las
   propuestas, y cuando la sección acaba se va y **el de los huecos toma su sitio** —al mismo tamaño— mientras se ven los
   huecos. Sin el bloque, los dos títulos se pegarían a la vez en el mismo borde. */
.journey-records__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.journey-records__section + .journey-records__section {
  margin-top: var(--space-md);
}

.journey-records__section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-2xs) 0;
  /* Opaco: por debajo pasan las cards, y un título translúcido se leería con ellas por detrás. */
  background: var(--color-surface-muted);
  border-bottom: var(--border-default);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.journey-records__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-records__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

/* ---- La lista de propuestas: la reja de cards de la casa ----
   Es `collection-cards` —cuatro por fila, la misma reja que la lista de cualquier artefacto— y **cada card con el alto
   de su contenido**, que es lo que el dueño pidió el 2026-10-01: «cada card puede tener diferentes altos ya que tienen
   diferente longitud de texto en el contenido…con eso no hay problema la regla es que se debe ver el contenido completo
   de cada campo». `align-items: start` es la salida que la propia anatomía de la casa tiene para las familias de texto
   largo —la misma que usa el background—; sin ella la reja estiraría todas las cards al alto de la más larga de la fila,
   y con ella cada una mide lo suyo y **nada se recorta**. */
.journey-records__cards {
  align-items: start;
}

/* **Los nombres de la card —el título y el nombre de cada dato— al mismo tamaño que el contenido, en negrita y en el
   mismo color.** Es la instrucción del dueño: «"Proposal to include" bajarle el tamaño de letra dejarlo en negrita…
   "Analysed from" y "Include to" del mismo nuevo tamaño de letra de proposal en negrita», y el 2026-10-02 lo cerró:
   **«con el mismo estilo de Proposal to include»**. Así la card entera lee a **un solo tamaño** —12 px— y lo que
   distingue un nombre de su valor no es ni el tamaño ni el color, sino **el peso**: el gris apagado de la anatomía
   compartida —que en los demás artefactos separa el nombre del dato— aquí hacía que los dos nombres se leyeran como
   una nota al pie del título. La misma regla alcanza a la card de un hueco, que es la misma card. */
.journey-records__cards .collection-card__title,
.journey-records__cards .collection-card__fact dt {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* La caja de la respuesta de un hueco, dentro de las acciones de la card: **ocupa el ancho que sobra** y deja el botón
   a su derecha, que es como se lee «escribe aquí y pulsa Responder». */
.journey-records__input--card {
  flex: 1 1 auto;
  min-width: 0;
}

/* **El aviso de una reescritura más corta** (2026-10-03): la única línea de esta pantalla que no es un dato ni un acto,
   sino una advertencia, así que lleva **el color de aviso de la casa** —el mismo que el aviso de las líneas que la
   corrida no pudo usar, unas líneas más arriba— y **el mismo tamaño que el contenido**: se lee dentro de la card y
   dentro de la fila de la tabla —por eso el nombre no dice «card»—, sin separarse del texto que advierte. */
.journey-records__shorter {
  display: block;
  margin: var(--space-3xs) 0 0;
  font-size: var(--font-size-base);
  color: var(--color-accent);
}

/* **El rótulo de la fila**: en la tabla, la primera columna ya no dice siempre lo mismo —una fila propone un ítem y otra
   completa uno que ya está—, así que cada fila lleva encima de su texto el nombre que en la card es el título. Va en
   negrita y en el color del texto, **como el título de la card**, y en su propia línea. */
.journey-records__table-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* **La frase que había, dentro de la fila**: es el dato *Was* de la card, aquí como una línea propia y apagada, para que
   se distinga del texto que la reemplaza sin salir de la tabla. */
.journey-records__table-was {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* ---- La misma lista, leída como tabla (la segunda vista del interruptor) ----
   Lleva la anatomía de las tablas de los artefactos (`collections.css`): la cabecera apagada, el mismo relleno, la
   misma línea de abajo, el mismo desplazamiento lateral cuando no cabe y el mismo realce de la fila al pasar el
   puntero. Lo que cambia es lo que dice cada columna: la propuesta, a qué artefacto va —con el destino que la persona
   puede cambiar antes de aceptar—, su porqué y los dos actos, que van en la última como en las demás tablas. */
.journey-records__table-wrap {
  overflow-x: auto;
}

/* **La tabla lee al mismo tamaño que las cards**, 12 px, para que las dos vistas de la misma lista se lean igual: el
   dueño lo pidió el 2026-10-01 —«que se vean iguales con 12»— después de que la card normalizara su contenido a ese
   tamaño. Es la única tabla del producto que no lee al tamaño pequeño de las tablas, y es a propósito: no es la tabla
   de un artefacto, es **la otra vista de estas mismas propuestas**. */
.journey-records__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

.journey-records__table th,
.journey-records__table td {
  padding: var(--space-sm);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.journey-records__table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.journey-records__table tbody tr:hover {
  background: var(--color-surface-muted);
}

/* El texto de la propuesta es una frase: sin un suelo, el navegador la aprieta a una palabra por línea. */
.journey-records__table-text {
  min-width: 12rem;
  overflow-wrap: anywhere;
}

.journey-records__table-why {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.journey-records__text {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* The why of a proposal, which is what makes it judgeable: an unjudgeable proposal is the defect the walk removes. */
.journey-records__why {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* **La línea del «posiblemente viejo» se retiró el 2026-10-02**, con su regla: el dueño la quitó al verla salir en
   cada card con cada aceptación —«quitemos esa leyenda»—. El mecanismo de debajo (los hashes por sección, `REC-35`) se
   queda donde está: es el que usa la corrida para saber si algo se ha movido desde la última vez. */

.journey-records__where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* The word the server published for the record; it is painted, never interpreted. */
.journey-records__state {
  padding: 0 var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: var(--font-size-xs);
}

.journey-records__actions,
.journey-records__answer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.journey-records__input {
  flex: 1 1 20rem;
  min-width: 12rem;
  height: var(--button-height);
  padding: 0 var(--space-xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* The three exits of a money doubt, as the server published them. */
.journey-records__select {
  height: var(--button-height);
  padding: 0 var(--space-2xs);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.journey-records__answered {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-secondary-strong);
}

.journey-records__run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* The gate of the act, said where the act is. */
.journey-records__gate {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

/* ---- El paso de la etapa, en una sola fila ----
   AI suggestion son **dos análisis** (dueño, 2026-10-02) y la etapa dice **el paso que tiene delante**, no un listado:
   el que puede correr y no está cerrado. La fila lleva **la prueba** —cuántas veces se ha corrido y qué añadió la
   última, números del servidor— y lo que toca ahora: **la pregunta del cierre** con su botón, o **la puerta** cuando
   ningún análisis puede correr. La pregunta va a 12 px, como el texto de las cards.
   **La fila se parte en dos cuando hay acto**: el texto a la izquierda —con `flex: 1` para que el botón no se pelee con
   él— y el acto a la derecha, que es como se lee «esto es lo que hay, y esto es lo que puedes hacer». */
.journey-records__step {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

.journey-records__step-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.journey-records__step-act {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

/* La prueba —cuando la hay— a 10 px y en gris: es la evidencia que la persona lee antes de decidir, no el titular. */
.journey-records__analysis-facts {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.journey-records__closing-question {
  margin: 0;
  font-size: var(--font-size-base);
}

/* ---- La pantalla del analisis (JourneyRecords.razor) ------------------ */
/* **La estadistica ya no se dibuja**: el dueno la retiro el 2026-10-01 con las otras frases que solo anunciaban que no
   hay nada —«AI has suggested 0: 0 accepted, 0 discarded and 0 waiting for a decision. nada de esas leyendas las
   necesito»—. Lo que propuso la corrida se lee en la lista, lo descartado en su cuenta y lo aceptado en su artefacto,
   asi que la linea no decia nada que no estuviera ya a la vista. */
/* La leyenda de lo que impide pasar a las fases siguientes, con las cantidades del servidor, **y solo cuando hay algo
   en el camino**: la frase de que nada estorba se retiro con las demas el 2026-10-01. */
.journey-records__blockers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-xs) 0 0;
}

.journey-records__blockers-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.journey-records__blockers-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-records__blocker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--font-size-sm);
}

/* El numero primero, que es lo que el dueno pidio: «hay que explicar pero en cantidades». */
.journey-records__blocker-count {
  min-width: 1.25rem;
  padding: 0 var(--space-3xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.journey-records__blocker-text {
  color: var(--color-text-muted);
}

/* Los descartes: cerrados al entrar, con su cuenta en el boton que los despliega. */
.journey-records__discards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: var(--border-default);
}

/* El mensaje de bloqueo de una etapa: «Fase 4 bloqueada por…» con las razones contadas por el servidor. */
.journey-stage__blocked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: var(--border-default);
  border-left: var(--border-width) solid var(--color-error-border);
  border-radius: var(--radius-lg);
}

.journey-stage__blocked-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.journey-stage__blocked-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-stage__blocker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--font-size-sm);
}

.journey-stage__blocker-count {
  min-width: 1.25rem;
  padding: 0 var(--space-3xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.journey-stage__blocker-text {
  color: var(--color-text-muted);
}

/* **Un boton bloqueado**: se ve, dice por que no se puede —la razon del servidor, con su cuenta— y no es un enlace.
   Es lo que el dueno pidio para la barra 4 de una etapa bloqueada: los botones se despliegan y quedan bloqueados. */
.journey-artifacts__button--blocked {
  border-color: var(--color-border);
  border-style: dashed; background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ---- Las dos columnas de una fase que analiza (JourneyAnalysisColumn) ---- */
/* **50/50, y el boton de cada columna arriba y a la derecha de la suya.** Es la instruccion del dueno del 2026-09-30
   para las fases 5 y 6: a la izquierda lo que la fase tiene —el alcance aceptado, el listado de inversion— y a la
   derecha su analisis. La columna del analisis es la misma pieza del listado que analiza, asi que no trae estilo propio
   de listado: solo su sitio. Se apila en pantallas estrechas, donde dos columnas no caben. */
.journey-analysis {
  min-width: 0;
}

.scope-page__columns,
.investment-page__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  min-width: 0;
}

@media (max-width: 1080px) {
  .scope-page__columns,
  .investment-page__columns {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Aviso local de definiciones pendientes del análisis secuencial. */
.ais-definitions {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
    color: var(--color-accent);
}

/* Indicador compacto exclusivo del análisis secuencial de fase 3. */
.ais-status {
    position: sticky;
    top: var(--ais-status-top, var(--layout-header-height));
    z-index: 89;
    margin-top: calc(var(--space-3xs) - var(--space-md));
    padding: var(--space-xs);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--font-size-base);
}

.ais-status__steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ais-status__step {
    display: flex;
    flex: 1 1 15rem;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
}

.ais-status__step--complete {
    color: var(--color-success);
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
}

.ais-status__step--ongoing {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
}

.ais-status__step--blocked {
    color: var(--color-error);
    background: var(--color-error-soft);
    border-color: var(--color-error-border);
}

.ais-status + .page-header .page-header__subtitle--card {
    margin-top: 0;
}

.ais-status__name {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.ais-status__state {
    margin-left: auto;
}

.ais-status__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-sm);
    margin-top: var(--space-2xs);
    color: var(--color-text-muted);
}

.ais-status__gate {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.ais-status__gate--open {
    color: var(--color-success);
}


/* La superficie compartida de sugerencias de los cinco artefactos de fase 4. */
.built-suggestions {
    min-width: 0;
    font-size: var(--font-size-base);
}
.built-suggestions__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}
.built-suggestions__cards {
    align-items: start;
    margin: var(--space-2xs) 0;
}
.built-suggestion {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
}
.built-suggestion .collection-card__fact dt {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.built-suggestion__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-xs);
}