/* =========================================================================
   NOEMA · El flujo del plan  (D3 a D6d)
   Hoja complementaria. Va SIEMPRE después de noema.css: no redeclara ni un
   color ni un espacio, solo usa las variables del sistema.

   ORDEN DEL ARCHIVO
   01 · Cuerpo del flujo
   02 · Chrome enfocado
   03 · Lienzo y pantallas
   04 · D3 · Rejilla de tipos
   04b · D3b · Entregables
   05 · D4 · Preguntas grandes
   06 · D5 · Descubrimiento
   07 · D6 · Rutas y reparto
   08 · D6b · Revisión
   09 · D6c · Espera
   10 · Pie de una sola acción
   11 · D6d · Salida
   12 · Puntos de corte
   ========================================================================= */


/* 01 · CUERPO DEL FLUJO =================================================== */
/* El chrome y el pie están fijos, así que el lienzo reserva su alto. Con
   scroll-padding, un ancla nunca queda debajo de la barra. */
.cuerpo-flujo {
  --alto-chrome: 118px;
  --alto-pie: 92px;
  scroll-padding-top: calc(var(--alto-chrome) + var(--e5));
}


/* 02 · CHROME ENFOCADO ==================================================== */
/* Aquí desaparece la navegación del sitio. Durante una tarea que exige
   pensar, la interfaz no puede ofrecer siete salidas laterales. */
.flujo-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--blanco);
  box-shadow: 0 1px 0 var(--borde-sutil);
}

/* La barra de progreso son 4 px al borde superior. No lleva número: el
   contador de al lado ya lo dice con palabras. */
.flujo-progreso { height: 4px; background: rgba(38, 38, 38, .08); }
.flujo-progreso-hecho {
  display: block; height: 100%; width: 0;
  background: var(--verde-pleno);        /* verde · el contexto y el avance */
  transition: width var(--dur-5) var(--curva);
}

.flujo-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5);
  height: 64px;
  padding-inline: var(--margen);
  max-width: calc(var(--contenido) + var(--margen) * 2);
  margin-inline: auto;
}
.flujo-lado { display: flex; align-items: center; gap: var(--e5); min-width: 0; }

/* El logotipo es la escotilla, y por eso lleva su etiqueta escrita: un
   logotipo que saca de un flujo sin avisar se siente como una trampa. */
.flujo-marca {
  display: inline-flex; align-items: baseline; gap: var(--e3);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.flujo-nota {
  font-family: var(--grot); font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--texto-secundario);
  white-space: nowrap;
}
.flujo-marca:hover .flujo-nota { color: var(--texto-principal); }

.flujo-atras, .flujo-salir {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--texto-secundario);
  padding: 8px 10px; border-radius: var(--r-boton);
}
.flujo-atras:hover, .flujo-salir:hover {
  color: var(--texto-principal);
  background: rgba(38, 38, 38, .05);
}
.flujo-atras[hidden] { display: none; }

.flujo-cuenta {
  margin: 0;
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
  white-space: nowrap;
}
.flujo-cuenta .dato { font-size: 13px; color: var(--texto-principal); }

/* El rastro nombra los pasos desde el primer momento: sin sorpresas de
   longitud. El paso hecho se marca en verde claro, el actual en grafito. */
.rastro {
  list-style: none; margin: 0;
  padding: 0 var(--margen) 12px;
  max-width: calc(var(--contenido) + var(--margen) * 2);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
}
.rastro li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 12px; font-weight: 500;
  color: var(--texto-secundario);
}
.rastro em {
  font-style: normal; font-size: 11px;
  color: var(--texto-secundario); opacity: .7;
}
.rastro .marca-rastro {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
  background: transparent;
}
.rastro li[data-condicional] .marca-rastro { border-style: dotted; }
.rastro li[data-estado="actual"] { color: var(--texto-principal); font-weight: 600; }
.rastro li[data-estado="actual"] .marca-rastro { background: var(--grafito); border-color: var(--grafito); }
.rastro li[data-estado="hecho"] .marca-rastro { background: var(--verde-claro); border-color: var(--verde-pleno); }
.rastro li[data-estado="omitido"] { opacity: .45; }


/* 03 · LIENZO Y PANTALLAS ================================================= */
.flujo-lienzo {
  padding-top: calc(var(--alto-chrome) + var(--e9));
  padding-bottom: calc(var(--alto-pie) + var(--e9));
}
/* La columna de 860 es la misma del artículo de fundamentos: leer y
   escribir usan el mismo ancho en todo el sitio. El margen va POR FUERA de
   los 860, igual que en .contenido: si se contara dentro, la columna real
   serían 732 y el botón del pie dejaría de caer sobre su mismo eje. */
.columna-flujo {
  max-width: calc(var(--lectura) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.texto-centrado { text-align: center; }
.texto-centrado .apoyo { max-width: 46ch; }

.pantalla[hidden] { display: none; }
/* Entrada corta y hacia arriba, una sola vez. No es una animación de
   celebración: solo evita el salto seco entre preguntas. */
.pantalla { animation: entra-pantalla var(--dur-3) var(--curva) both; }
@keyframes entra-pantalla {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pantalla { animation: none; }
}

.pregunta { margin: 0 0 var(--e4); }
.pregunta:focus { outline: none; }
.pregunta:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; }
.apoyo { margin: 0 0 var(--e7); max-width: 58ch; }
.antetitulo .sub-cuenta {
  font-style: normal; font-weight: 500;
  color: var(--texto-secundario);
  letter-spacing: .04em;
  margin-left: var(--e3);
}


/* 04 · D3 · REJILLA DE TIPOS ============================================== */
.rejilla-tipos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
}
.tarjeta-tipo {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2);
  text-align: left;
  padding: var(--e5) var(--e4) var(--e5);
  background: var(--fondo-superficie);
  /* 2 px, no 1,5: a 1x el navegador redondea 1,5 a 1 px y la tarjeta
     elegida se distingue menos que su propio sello. */
  border: 2px solid transparent;
  border-radius: var(--r-l);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.tarjeta-tipo:hover { transform: translateY(-2px); }

.icono-tipo {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papel);
  color: var(--texto-secundario);
  margin-bottom: var(--e2);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.nombre-tipo {
  font-family: var(--grot); font-size: 15px; font-weight: 600;
  color: var(--texto-principal); line-height: 1.25;
}
.glosa-tipo {
  font-family: var(--grot); font-size: 12px; line-height: 1.4;
  color: var(--texto-secundario);
}

/* Rojo: la intención y el problema a resolver. El color informa, no
   decora. Aquí es exactamente lo que se está declarando. */
.tarjeta-tipo[aria-checked="true"] {
  border-color: var(--carmin-pleno);
}
.tarjeta-tipo[aria-checked="true"] .icono-tipo {
  background: rgba(214, 30, 97, .10);
  color: var(--carmin-profundo);
}
.sello-elegido {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--carmin-pleno); color: var(--papel);
  display: none; align-items: center; justify-content: center;
}
[aria-checked="true"] > .sello-elegido,
[aria-checked="true"] .sello-elegido { display: inline-flex; }


/* 04b · D3b · ENTREGABLES ================================================= */
/* La rejilla va agrupada por etapa. Agrupada, la pantalla enseña de paso el
   orden del método mientras alguien hace su lista, y se ve solo qué etapas
   se están llenando. Suelta, eran diez tarjetas sin criterio visible. */
.grupo-etapa + .grupo-etapa { margin-top: var(--e6); }

.rotulo-grupo-etapa {
  display: flex; align-items: baseline; gap: var(--e3);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 var(--e3);
}
.num-grupo {
  font-variant-numeric: tabular-nums;
  color: var(--texto-principal);
}

/* --- El entregable escrito a mano --------------------------------------
   Va PRIMERO desde el 25-08-2026. Con la rejilla delante, quien llega con
   un enunciado en la mano tiene que buscar en las tarjetas a cuál se parece
   lo suyo antes de poder escribir nada, y eso es traducir su encargo al
   vocabulario del sistema. Escribiendo primero, el sistema es el que
   traduce. */
.entregable-libre {
  padding: var(--e5);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
}
.separador-entregables {
  margin: var(--e6) 0 var(--e5);
  max-width: 62ch;
}
.entregable-libre > .micro { display: block; margin: 0 0 var(--e3); }
.libre-fila { display: flex; gap: var(--e3); align-items: stretch; }
.libre-fila .campo-corto {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--grot); line-height: 1.4;
  color: var(--texto-principal);
  background: var(--blanco);
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--r-m);
  padding: var(--e3) var(--e4);
}
.libre-fila .campo-corto:focus { outline: none; border-color: var(--grafito); }
.libre-fila .campo-corto:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
.libre-fila .boton { flex: 0 0 auto; }
.libre-pista { margin: var(--e3) 0 0; min-height: 1.2em; }

/* El selector de etapa. Existe en TODOS los entregables, no solo en los
   escritos a mano: poder mover uno de etapa es lo que evita que alguien
   abandone el paso porque «aquí no encaja lo mío». */
.campo-etapa {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-secundario) 50%),
                    linear-gradient(135deg, var(--texto-secundario) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--e6) !important;
  cursor: pointer;
}

/* Las tarjetas de tipo son más chicas que las de proyecto y es a propósito.
   Elegir el tipo de proyecto es UNA decisión y ocupa la pantalla; agregar
   entregables es un gesto que se repite, y una rejilla de tarjetas grandes
   convertiría cinco gestos en cinco pantallazos de scroll. */
.rejilla-entregables {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e2);
}
.tarjeta-entregable {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  padding: var(--e4) var(--e4) var(--e4);
  padding-right: var(--e7);
  background: var(--fondo-superficie);
  border: 1.5px solid transparent;
  border-radius: var(--r-l);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.tarjeta-entregable:hover { transform: translateY(-2px); border-color: var(--borde-sutil); }
.tarjeta-entregable:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 3px; }

/* La etapa de destino va ARRIBA del nombre, no debajo. Es el dato que
   convierte «agregar un moodboard» en «agregar trabajo a la etapa 01», y
   quien no lo lea antes de tocar no está decidiendo, está eligiendo. */
.etapa-entregable {
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-secundario);
}
.nombre-entregable {
  font-family: var(--grot); font-size: 14px; font-weight: 600;
  color: var(--texto-principal); line-height: 1.25;
}
.glosa-entregable {
  font-family: var(--grot); font-size: 12px; line-height: 1.4;
  color: var(--texto-secundario);
}
.mas-entregable {
  position: absolute; top: 50%; right: var(--e4); transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--papel); color: var(--texto-secundario);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.tarjeta-entregable:hover .mas-entregable {
  background: var(--grafito); color: var(--papel);
}

/* Lo declarado ---------------------------------------------------------- */
.declarados { margin-top: var(--e7); }
.nota-agrupar { margin: 0 0 var(--e4); max-width: 62ch; }
.lista-declarados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }

.declarado {
  position: relative;
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center; gap: var(--e4);
  padding: var(--e4);
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
}
.declarado-cabeza { display: flex; flex-direction: column; gap: 2px; align-self: center; }
.declarado-nombre {
  font-family: var(--grot); font-size: 14px; font-weight: 600;
  color: var(--texto-principal);
}
.declarado-etapa {
  font-family: var(--grot); font-size: 11px; color: var(--texto-secundario);
  letter-spacing: .04em;
}
.declarado-campos { display: flex; gap: var(--e3); align-items: flex-end; }
.campo-envoltura { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* Las dos van con la clase base repetida para ganarle en especificidad, que
   si no el `flex: 1 1 auto` de arriba las estira: la de cantidad acababa
   midiendo lo mismo que el nombre del entregable, y la de etapa se comía
   media fila cuando el entregable no llevaba campo de detalle. */
.campo-envoltura.campo-envoltura-corta { flex: 0 0 96px; }
/* El selector de etapa se pega a la derecha aunque la fila no lleve campo de
   detalle, que es el caso del entregable escrito a mano. Así los seis
   selectores quedan en columna y la etapa de cada cosa se lee de un barrido
   vertical, en vez de saltando de un sitio a otro. */
.campo-envoltura.campo-envoltura-etapa { flex: 0 0 210px; margin-left: auto; }
.campo-envoltura .micro { margin: 0; }
.campo-envoltura .campo-corto {
  width: 100%;
  font-family: var(--grot); line-height: 1.4;
  color: var(--texto-principal);
  background: var(--blanco);
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--r-m, 10px);
}
.campo-envoltura .campo-corto:focus { outline: none; border-color: var(--grafito); }
.campo-envoltura .campo-corto:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }

.quitar-declarado {
  align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--texto-secundario);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.quitar-declarado:hover { background: var(--papel); color: var(--texto-principal); }

/* --- Las instrucciones del encargo -------------------------------------
   En su propia fila y plegadas. Es texto largo y no cabe en una fila con
   el nombre y la etapa; y plegadas, seis entregables no convierten la
   pantalla en seis párrafos abiertos que hay que pasar de largo. */
.campo-instrucciones { grid-column: 1 / -1; margin-top: var(--e2); }

.abrir-instrucciones {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 4px 0;
  font-family: var(--grot); font-size: 12px; font-weight: 500;
  color: var(--texto-secundario);
  cursor: pointer;
}
.abrir-instrucciones:hover { color: var(--texto-principal); }
.abrir-instrucciones:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
/* Verde cuando ya hay algo pegado: el verde es el contexto en este sistema,
   y esto es literalmente el contexto del encargo. */
.abrir-instrucciones[data-lleno="si"] { color: var(--verde-pleno); font-weight: 600; }

.campo-encargo {
  margin-top: var(--e3);
  font-size: 14px !important;
  line-height: 1.55;
  padding: var(--e4) !important;
}
.campo-encargo[hidden] { display: none; }

/* --- Lo que el enunciado menciona y no declaraste ----------------------- */
.sugerencias {
  margin-top: var(--e5);
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: var(--superficie-tenue);
}
.sugerencias[hidden] { display: none; }
.sugerencias > .micro { margin: 0 0 var(--e3); }
.sugerencias-botones { display: flex; gap: var(--e2); flex-wrap: wrap; }
.sugerencia {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px var(--e4);
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  color: var(--texto-principal);
  background: var(--blanco);
  border: 1.5px solid var(--borde-sutil);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-1) ease;
}
.sugerencia:hover { border-color: var(--grafito); }

.suma-tareas { margin-top: var(--e4); }
.sin-entregables { margin-top: var(--e6); max-width: 62ch; }


/* 04c · EL AVISO DE BRIEF FLOJO ==========================================
   Rojo, que en este sistema es la intención y el problema a resolver. Es
   exactamente lo que este bloque señala: que la intención declarada todavía
   no aguanta.

   No lleva icono de alerta ni fondo rojo lleno. Esto no es un error del
   usuario ni un fallo del sistema: es una observación, y una observación
   gritada deja de leerse como tal. */
.aviso-brief {
  margin-top: var(--e7);
  padding: var(--e6);
  border-radius: var(--r-l);
  background: var(--fondo-superficie);
  box-shadow: inset 3px 0 0 var(--carmin-pleno);
}
.aviso-brief[hidden] { display: none; }

.lista-senales { margin-top: var(--e4); display: grid; gap: var(--e3); }
.lista-senales li { display: flex; gap: var(--e3); align-items: flex-start; }
.marca-punto-rojo {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--carmin-pleno);
  flex: 0 0 auto; margin-top: 9px;
}
.acciones-aviso {
  display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap;
  margin-top: var(--e5);
}
/* El botón fantasma también vive aquí, porque «seguir sin añadirlo» tiene
   que existir y no puede competir con la acción que sí ayuda. */
.acciones-aviso .boton-fantasma {
  min-height: 46px;
  display: inline-flex; align-items: center;
  padding: 0 var(--e4);
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--texto-secundario);
  background: none; border: none; border-radius: var(--r-m);
  cursor: pointer;
}
.acciones-aviso .boton-fantasma:hover {
  color: var(--texto-principal); background: var(--superficie-tenue);
}


/* 05 · D4 · PREGUNTAS GRANDES ============================================= */
/* El campo es grande porque la respuesta es grande. Un input de una línea
   pide una palabra; esta pregunta no se contesta con una palabra. */
.campo-largo {
  width: 100%;
  font-family: var(--grot); font-size: 18px; line-height: 1.6;
  color: var(--texto-principal);
  background: var(--fondo-superficie);
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--r-l);
  padding: var(--e5);
  resize: vertical;
}
.campo-largo::placeholder { color: rgba(85, 80, 73, .55); }
.campo-largo:focus {
  outline: none;
  border-color: var(--grafito);
}
.campo-largo:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 3px; }
.campo-corto { font-size: 16px; padding: var(--e4); }

/* Los ejemplos van cerrados: abiertos, la primera respuesta que escribe
   la persona es una variante del ejemplo. */
.ejemplos { margin-top: var(--e4); }
.ejemplos summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--azul-profundo);
  padding: 6px 0;
}
.ejemplos summary::-webkit-details-marker { display: none; }
.ejemplos[open] summary .ms { transform: rotate(180deg); }
.ejemplos .lista-limpia {
  margin-top: var(--e3);
  padding: var(--e4) var(--e5);
  background: var(--fondo-superficie);
  border-radius: var(--r-m);
}
.ejemplos li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--azul-claro);
  flex: 0 0 5px; margin-top: 11px;
}

/* «No sé todavía» no es saltar. Es una respuesta que enciende el paso de
   descubrimiento, y por eso no se ve como un enlace de escape. */
.no-se {
  margin-top: var(--e6);
  display: inline-flex; align-items: center;
  background: none; cursor: pointer;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--texto-secundario);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-boton);
  padding: 10px var(--e5);
}
.no-se:hover { color: var(--texto-principal); border-color: var(--grafito); }
.no-se[aria-pressed="true"] {
  background: var(--ambar-pleno);       /* ámbar · la construcción hecha a mano */
  border-style: solid; border-color: var(--ambar-pleno);
  color: var(--grafito);
}


/* 06 · D5 · DESCUBRIMIENTO ================================================ */
.menores { display: grid; gap: var(--e6); }
.menor label { display: block; margin-bottom: var(--e3); }

/* Azul: la estructura y el sistema. Lo que hay que ir a buscar fuera
   antes de poder decidir dentro. */
.bloque-cliente {
  margin-top: var(--e8);
  padding: var(--e6);
  border-radius: var(--r-l);
  background: rgba(168, 225, 233, .16);
}
.bloque-cliente .lista-limpia li { align-items: flex-start; }
.marca-punto-azul {
  width: 7px; height: 7px; flex: 0 0 7px;
  margin-top: 9px; border-radius: 50%;
  background: var(--azul-pleno);
}


/* 07 · D6 · RUTAS Y REPARTO =============================================== */
.rutas { display: grid; gap: var(--e3); }
.ruta {
  position: relative;
  display: flex; flex-direction: column; gap: var(--e3);
  text-align: left;
  padding: var(--e5) var(--e6);
  background: var(--fondo-superficie);
  /* 2 px, no 1,5: a 1x el navegador redondea 1,5 a 1 px y la tarjeta
     elegida se distingue menos que su propio sello. */
  border: 2px solid transparent;
  border-radius: var(--r-l);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.ruta:hover { }
.ruta[aria-checked="true"] { border-color: var(--grafito); }
.ruta .sello-elegido { position: static; background: var(--grafito); }

.ruta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.ruta-nombre { font-family: var(--grot); font-size: 17px; font-weight: 600; }
.ruta-glosa {
  font-family: var(--grot); font-size: 15px; line-height: 1.55;
  color: var(--texto-secundario);
  max-width: 54ch;
}
/* --- La gráfica del reparto ---------------------------------------------
   Dos lecturas en un solo dibujo: los seis tramos SON las seis etapas del
   plan, y el porcentaje sale de contarlos. Antes el 62% no salía de ningún
   lado y era indefendible; ahora se puede señalar con el dedo qué etapa es
   cada tramo. Grafito la tuya, naranja donde entra la IA, igual que en el
   resto del sistema. */
.grafica { display: block; margin-top: var(--e3); }
.tramos { display: flex; gap: 2px; height: 34px; }
.tramo {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--grafito); color: var(--papel);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.tramo:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.tramo:last-child  { border-radius: 0 var(--r-s) var(--r-s) 0; }
.tramo.t-ia { background: var(--purpura-pleno); color: var(--papel); }

.lectura {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e3);
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
}
.lectura span { display: inline-flex; align-items: center; gap: 7px; }
.lectura b { color: var(--texto-principal); font-weight: 600; }
.pun { width: 9px; height: 9px; border-radius: 2px; }
.pun-tu { background: var(--grafito); }
.pun-ia { background: var(--purpura-pleno); }

.nota-fija {
  margin: var(--e5) 0 0;
  padding-left: var(--e5);
  border-left: 3px solid var(--carmin-pleno);   /* carmin · la intención, lo que no se delega */
}
.nota-fija b { color: var(--texto-principal); font-weight: 600; }

/* Naranja: donde entra la IA. Mismo color en toda la pieza y en todo el
   sistema, así la codificación se enseña sola. */
.limite-ia {
  margin-top: var(--e6);
  padding: var(--e5) var(--e6);
  border-radius: var(--r-l);
  background: rgba(93, 103, 226, .12);
}
.limite-ia[hidden] { display: none; }
.sello-naranja {
  display: block; margin-bottom: var(--e2);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--purpura-profundo);
}


/* 08 · D6b · REVISIÓN ===================================================== */
.resumen { margin: 0; }
.fila-resumen {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--e5);
  align-items: baseline;
  padding-block: var(--e5);
  border-top: 1px solid var(--borde-sutil);
}
.resumen .fila-resumen:last-of-type { border-bottom: 1px solid var(--borde-sutil); }
.fila-resumen dt {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-secundario);
}
.fila-resumen dd {
  margin: 0;
  font-family: var(--grot); font-size: 17px; line-height: 1.55;
  color: var(--texto-principal);
}
/* Lo que quedó sin responder se dice, no se esconde ni se rellena. */
.fila-resumen dd.pendiente { color: var(--texto-secundario); font-style: italic; }
.editar {
  background: none; border: 0; cursor: pointer;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--azul-profundo);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--r-s);
}
.editar:hover { background: rgba(37, 41, 103, .08); }

.acciones-generar {
  margin-top: var(--e8);
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
}


/* 09 · D6c · ESPERA ======================================================= */
.pantalla-quieta { padding-top: var(--e9); }
.espera, .espera-lista { display: grid; justify-items: center; gap: var(--e4); }
.espera-lista[hidden], .espera[hidden] { display: none; }

/* Un indicador quieto que respira, no una barra que finge avanzar. */
.pulso {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--verde-claro);
  margin-bottom: var(--e3);
  animation: respira var(--dur-respiro) ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.12); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .pulso { animation: none; opacity: .85; }
}
.sello-listo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--verde-profundo);
}
.espera-lista .boton { margin-top: var(--e4); }


/* 10 · PIE DE UNA SOLA ACCIÓN ============================================= */
/* Una acción por pantalla. Anclado abajo para no tener que buscarlo
   después de escribir un párrafo largo. */
.flujo-pie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--blanco);
  box-shadow: 0 -1px 0 var(--borde-sutil);
}
.flujo-pie[hidden] { display: none; }
.flujo-pie-interior {
  max-width: calc(var(--lectura) + var(--margen) * 2);
  margin-inline: auto;
  padding: var(--e4) var(--margen);
  min-height: var(--alto-pie);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
}
#aviso { margin: 0; max-width: 42ch; }
/* El botón apagado vive en el sistema, no aquí. Ver `.boton[disabled]` en
   noema.css, bloque 05 · COMPONENTES. */


/* 11 · D6d · SALIDA ======================================================= */
.velo {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(38, 38, 38, .44);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e5);
}
.velo[hidden] { display: none; }
.hoja-salida {
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  box-shadow: var(--elev-flotante);
  padding: var(--e7);
  width: 100%; max-width: 520px;
}
.opciones-salida { display: grid; gap: var(--e3); }
.opcion-salida {
  display: grid; gap: 4px; text-align: left;
  padding: var(--e5);
  background: var(--papel);
  border: 1.5px solid transparent;
  border-radius: var(--r-m);
  cursor: pointer;
}
.opcion-salida:hover { border-color: var(--borde-fuerte); }
.opcion-titulo { font-family: var(--grot); font-size: 16px; font-weight: 600; }
.opcion-glosa { font-family: var(--grot); font-size: 14px; color: var(--texto-secundario); }
/* La opción que pierde el trabajo no está resaltada, pero tampoco
   escondida. Obligar a quedarse sería el patrón oscuro que este proyecto
   no puede usar sin contradecirse. */
#salir-sin-guardar .opcion-glosa { color: var(--carmin-profundo); }
.opcion-seguir { margin-top: var(--e5); width: 100%; }

.enlace-guardado {
  font-family: var(--grot); font-size: 17px; font-weight: 500;
  background: var(--papel);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-m);
  padding: var(--e4) var(--e5);
  margin: 0 0 var(--e3);
  word-break: break-all;
}
.acciones-enlace { display: flex; gap: var(--e3); flex-wrap: wrap; }


/* 12 · PUNTOS DE CORTE ==================================================== */

/* Portátil · 1200 */
@media (max-width: 1279px) {
  .rejilla-tipos { gap: var(--e2); }
}

/* Tableta · 834 */
@media (max-width: 1023px) {
  .cuerpo-flujo { --alto-chrome: 112px; }
  .rejilla-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-entregables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La cabecera del entregable sube a su propia fila: con 190 px fijos y
     dos campos al lado, el de rótulo se quedaba en menos de veinte
     caracteres visibles justo donde hay que escribir el nombre. */
  .declarado { grid-template-columns: minmax(0, 1fr) auto; }
  .declarado-cabeza { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: var(--e3); }
  .fila-resumen { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-resumen dt { grid-column: 1 / -1; margin-bottom: -12px; }
}

/* Móvil · 390 */
@media (max-width: 767px) {
  .cuerpo-flujo { --alto-chrome: 132px; --alto-pie: 84px; }

  /* La etiqueta del logotipo no cabe sin apretar el resto de la fila. El
     logotipo sigue siendo la escotilla y sigue preguntando antes de salir. */
  .flujo-nota { display: none; }
  .flujo-fila { height: 60px; gap: var(--e3); }
  /* «Guardar y salir» se queda solo con la cruz, pero se queda: la salida
     tiene que estar disponible en todos los anchos. Su etiqueta la da el
     aria-label, no el ancho de la pantalla. */
  .flujo-salir span:first-child { display: none; }
  .flujo-salir { padding: 8px; flex: 0 0 auto; min-width: 44px; min-height: 44px; justify-content: center; }
  .flujo-cuenta { flex: 0 0 auto; font-size: 12px; }
  .flujo-lado { flex: 0 1 auto; }
  .rastro { gap: var(--e2) var(--e4); }
  .rastro em { display: none; }

  .rejilla-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Una sola columna, no dos. La tarjeta de entregable lleva tres renglones
     de texto y el botón de agregar a la derecha; en media pantalla de 390
     el nombre se parte en tres líneas y deja de escanearse. */
  .rejilla-entregables { grid-template-columns: 1fr; }
  .declarado-campos { flex-direction: column; align-items: stretch; gap: var(--e2); }
  .campo-envoltura-corta, .campo-envoltura-etapa { flex: 1 1 auto; }
  /* El botón de agregar el libre baja a su propia fila: en 390 no cabe
     junto al campo sin dejar el campo en quince caracteres. */
  .libre-fila { flex-direction: column; }
  .libre-fila .boton { width: 100%; justify-content: center; }
  .campo-largo { font-size: 16px; padding: var(--e4); }

  .flujo-pie-interior { padding: var(--e3) var(--margen); }
  /* Con la mitad del ancho, el aviso y el botón no caben en una fila. El
     botón se queda solo y a lo ancho: es la única acción de la pantalla. */
  #aviso { display: none; }
  .flujo-pie-interior .boton { width: 100%; }

  .hoja-salida { padding: var(--e6) var(--e5); }
}

/* Zona de toque mínima de 44 × 44 en cualquier corte táctil */
@media (pointer: coarse) {
  .flujo-atras, .flujo-salir, .editar, .no-se, .ejemplos summary { min-height: 44px; }
}