/* =========================================================================
   NOEMA · El modo guiado  (D7b)
   Hoja complementaria. Va SIEMPRE después de noema.css, plan.css y
   tu-plan.css: reusa el chrome enfocado del flujo y las etapas del plan, y
   no redeclara ni un color ni un espacio.

   ORDEN DEL ARCHIVO
   01 · Cuerpo y chrome
   02 · El riel de las seis etapas
   03 · El paso
   04 · La evidencia
   05 · Los cinco momentos del moodboard
   06 · El pie y el cierre
   07 · Agregar alcance
   08 · Puntos de corte
   ========================================================================= */


/* 01 · CUERPO Y CHROME ==================================================== */
/* El chrome de aquí es más alto que el del flujo del plan porque lleva el
   riel de seis etapas y no el rastro de cinco pasos. El alto se declara
   como variable, igual que allí, para que el lienzo reserve su sitio. */
.cuerpo-trabajo { --alto-chrome: 128px; --alto-pie: 84px; }

.trabajo-chrome .flujo-fila { height: 60px; }

.lienzo-trabajo {
  padding-top: calc(var(--alto-chrome) + var(--e7));
  padding-bottom: calc(var(--alto-pie) + var(--e8));
}
.pantalla-paso[hidden], .pantalla-final[hidden] { display: none; }

/* La salida es un enlace, no un botón: lleva a otra página de verdad. Se
   ve igual que «Guardar y salir» del flujo porque hace lo mismo. */
.trabajo-chrome .flujo-salir { text-decoration: none; }


/* 02 · EL RIEL DE LAS SEIS ETAPAS ========================================= */
/* Dice en cuál estás y cuánto lleva cada una. Una barra sola diría «vas por
   el 40%»; esto dice «bocetaje va por la mitad y producción no ha empezado»,
   que es lo que sirve para decidir qué haces esta tarde.

   La fracción de cada etapa NO es una barra: es un número. Seis barritas
   dentro de un chrome de 128 px se leen como un tablero de métricas, y este
   sitio no tiene tableros. */
.riel-etapas {
  display: flex; align-items: center; gap: var(--e2) var(--e5);
  flex-wrap: wrap;
  list-style: none; margin: 0;
  padding: 0 var(--margen) var(--e3);
  max-width: calc(var(--contenido) + var(--margen) * 2);
  margin-inline: auto;
}
.riel-etapas li { display: inline-flex; }

/* El riel se puede tocar: cada etapa lleva a su primera tarea sin marcar.
   Sin esto había que recorrer el plan entero para llegar a producción, y
   nadie trabaja así: se avanza en bocetaje un día y en producción otro. El
   orden de las etapas es la recomendación del método, no una cárcel. */
.riel-salto {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 12px; line-height: 1;
  color: var(--texto-secundario);
  white-space: nowrap;
  background: none; border: none;
  padding: 6px 8px; margin: -6px -8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.riel-salto:hover { background: var(--papel); color: var(--texto-principal); }
.riel-salto:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
.riel-etapas .marca-rastro {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--borde-fuerte);
  flex: 0 0 auto;
}
.riel-etapas li[data-estado="actual"] .riel-salto {
  color: var(--texto-principal); font-weight: 600;
}
.riel-etapas li[data-estado="actual"] .marca-rastro { background: var(--tono); }
.riel-etapas li[data-estado="hecho"] .marca-rastro { background: var(--verde-pleno); }
.riel-etapas em {
  font-style: normal;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}
.riel-etapas li[data-estado="hecho"] em { color: var(--verde-pleno); }


/* 03 · EL PASO ============================================================ */
/* La etapa va encima de la tarea y no debajo. Sin ella, una tarea suelta
   pierde el motivo por el que existe, que es exactamente lo que este
   proyecto dice que pasa cuando se trabaja sin método. */
.cabeza-paso {
  display: flex; align-items: center; gap: var(--e3);
  margin-bottom: var(--e6);
  flex-wrap: wrap;
}
.cabeza-paso .marca-etapa {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tono);
  flex: 0 0 auto;
}
.cabeza-paso .num-etapa {
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--tono);
  font-variant-numeric: tabular-nums;
}
.nombre-etapa {
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-secundario);
}

.texto-tarea { margin: var(--e2) 0 var(--e4); max-width: 30ch; }
.texto-tarea b { font-weight: 600; }

/* El título de la tarea recibe el foco al cambiar de paso, para que un
   lector de pantalla anuncie la tarea nueva. Pero NO lleva anillo: no es un
   control, nadie navegó hasta él con el teclado, y en esta pantalla el foco
   cae ahí en cada paso. Con anillo, el recuadro queda dibujado alrededor del
   titular todo el rato y se lee como si el texto fuera un campo editable.

   Es la excepción de siempre para los destinos de foco programático. Los
   controles de verdad de esta página conservan el suyo intacto. */
.texto-tarea:focus, .texto-tarea:focus-visible { outline: none; }
.pantalla-final .pregunta:focus,
.pantalla-final .pregunta:focus-visible { outline: none; }

/* De dónde sale la tarea, siempre. La del método lleva escrito que no se la
   pidió nadie: es la frase que sostiene el argumento entero del proyecto,
   puesta en el sitio donde alguien está a punto de saltársela. */
.origen-tarea { margin: 0 0 var(--e6); max-width: 62ch; }

/* El sello de descartada. Va en la rampa neutra y no en rojo: descartar una
   tarea que no aplica no es un error ni un fallo, es una decisión sobre el
   alcance, y la misma persona la puede deshacer. */
.sello-descartada {
  margin: 0 0 var(--e6);
  padding: var(--e3) var(--e5);
  max-width: 62ch;
  border-radius: var(--r-m);
  border: 1px dashed var(--borde-fuerte);
  font-family: var(--grot); font-size: 13px; line-height: 1.55;
  color: var(--texto-secundario);
}

/* Recuperar se ve distinto de descartar: es la acción contraria y no puede
   parecer la misma. */
#no-aplica[data-fuera="si"] { color: var(--verde-pleno); font-weight: 600; }

.antes-paso { margin-bottom: var(--e7); }

/* --- El enunciado, con sus palabras -------------------------------------
   Plegado, y con marca de cita: no es texto del sitio, es de quien hizo el
   encargo. Distinguirlo importa porque todo lo demás de esta pantalla sí
   está escrito por el método. */
.encargo { margin: calc(var(--e7) * -1 + var(--e5)) 0 var(--e7); max-width: 62ch; }
.encargo summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  color: var(--texto-secundario);
  min-height: 34px;
}
.encargo summary::-webkit-details-marker { display: none; }
.encargo summary:hover { color: var(--texto-principal); }
.encargo[open] summary .ms { transform: rotate(180deg); }
.texto-encargo {
  margin: var(--e3) 0 0;
  padding: var(--e4) var(--e5);
  border-left: 2px solid var(--borde-fuerte);
  background: var(--fondo-superficie);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-family: var(--grot); font-size: 14px; line-height: 1.6;
  color: var(--texto-secundario);
  white-space: pre-wrap;      /* respeta los saltos del enunciado pegado */
  overflow-wrap: anywhere;    /* y una palabra larguísima no desborda */
}


/* 04 · LA EVIDENCIA ======================================================= */
.evidencia { margin-top: var(--e6); }
.etiqueta-evidencia { display: block; margin-bottom: var(--e3); max-width: 62ch; }

/* El prompt propio de la tarea va separado del campo donde se escribe, para
   que se lea como lo que es: una salida si te trabas, no el siguiente paso. */
.prompt-tarea { margin-top: var(--e6); }

.subir { margin-bottom: var(--e4); }
.subir-fila { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.subir-campo {
  font-family: var(--grot); font-size: 14px;
  color: var(--texto-secundario);
  max-width: 100%;
}
.subir-campo::file-selector-button {
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--texto-principal);
  background: var(--fondo-superficie);
  border: 1.5px solid var(--borde-sutil);
  border-radius: var(--r-m);
  padding: 9px var(--e4);
  margin-right: var(--e4);
  cursor: pointer;
}

/* La miniatura se limita en alto y no en ancho: una foto de una serie de
   bocetos es apaisada y una captura de un tablero es cuadrada, y las dos
   tienen que caber sin empujar el pie fuera de la pantalla. */
.vista-imagen {
  margin: var(--e4) 0 0;
  padding: var(--e3);
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  display: inline-block;
  max-width: 100%;
}
.vista-imagen img {
  display: block;
  max-height: 260px; max-width: 100%;
  border-radius: var(--r-m);
}
.vista-imagen figcaption { margin-top: var(--e3); }
.nota-sin-imagen { margin-top: var(--e3); color: var(--ambar-profundo); }


/* 05 · LOS CINCO MOMENTOS DEL MOODBOARD =================================== */
/* El orden no es decorativo y por eso está numerado a la vista: primero
   escribes qué querías, después lees lo que vio la herramienta. Al revés,
   lo que la herramienta diga se convierte en lo que creías querer.

   Los momentos que todavía no tocan se atenúan y siguen visibles. Ocultarlos
   habría hecho crecer la pantalla sola, que es la sorpresa de longitud que
   el principio 3 prohíbe: aquí se ve desde el minuto uno que son cinco. */
.momentos {
  list-style: none; margin: 0; padding: 0;
  counter-reset: momento;
  display: grid; gap: var(--e6);
}
.momento {
  counter-increment: momento;
  position: relative;
  padding: var(--e6) var(--e6) var(--e6) calc(var(--e6) + 38px);
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
}
.momento::before {
  content: counter(momento);
  position: absolute; left: var(--e6); top: var(--e6);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--papel);
  color: var(--texto-secundario);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.momento .titular-xs {
  font-family: var(--grot); font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--texto-principal);
  margin: 0 0 var(--e3);
}
.momento .campo-largo { margin-top: var(--e3); }

/* Atenuado, no escondido, y no deshabilitado: se puede leer para saber qué
   viene. Lo único que hace el cerrojo es decir por qué todavía no toca. */
.momento-bloqueado { opacity: .48; }
.momento-bloqueado .campo-largo,
.momento-bloqueado .veredicto,
.momento-bloqueado .copiar-prompt { pointer-events: none; }
.cerrojo { display: none; margin-top: var(--e4); }
.momento-bloqueado .cerrojo { display: block; }
.momento:not(.momento-bloqueado) .cerrojo { display: none; }

/* La comparación. Las dos columnas miden lo mismo a propósito: darle más
   espacio a cualquiera de las dos diría cuál manda, y la que manda la
   decide la persona. */
.lado-a-lado {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5);
  margin-top: var(--e4);
}
.lado {
  padding: var(--e5);
  background: var(--papel);
  border-radius: var(--r-m);
}
/* Púrpura en la columna de la herramienta, que es el color que este sistema
   le tiene asignado a la intervención de la IA. El color informa. */
.lado-ia { box-shadow: inset 3px 0 0 var(--purpura-pleno); }
.lado .parrafo { margin: var(--e3) 0 0; }

.veredictos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
}
.veredicto {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: var(--e4);
  background: var(--papel);
  border: 2px solid transparent;
  border-radius: var(--r-m);
  cursor: pointer;
  font-family: var(--grot);
  transition: border-color var(--dur-1) ease;
}
.veredicto b { font-size: 14px; font-weight: 600; color: var(--texto-principal); }
.veredicto span { font-size: 12px; line-height: 1.4; color: var(--texto-secundario); }
.veredicto:hover { border-color: var(--borde-fuerte); }
/* Rojo, que en este sistema es la intención: aquí se está declarando qué
   se quería, no puntuando un resultado. */
.veredicto[aria-checked="true"] { border-color: var(--carmin-pleno); }


/* 06 · EL PIE Y EL CIERRE ================================================= */
.acciones-pie { display: flex; align-items: center; gap: var(--e3); }

/* El botón fantasma es la salida secundaria: existe siempre, y nunca compite
   con la acción principal. Saltar tiene que poder hacerse sin sentir que se
   está haciendo trampa. */
.boton-fantasma {
  min-height: 46px;
  display: inline-flex; align-items: center; gap: var(--e2);
  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;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.boton-fantasma:hover { color: var(--texto-principal); background: var(--superficie-tenue); }

.aviso-pie { margin: 0; flex: 1 1 auto; text-align: right; }

/* Dos etiquetas completas para el mismo botón, y se enseña una según el
   ancho. La corta vive escondida hasta el corte de móvil. */
.saltar-corto { display: none; }

.acciones-finales {
  display: flex; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e7);
}

/* Mandarlo va cerrado, como los ejemplos del flujo. Abierto, una pantalla
   que existe para cerrar el trabajo acabaría pareciendo un formulario de
   envío, y aquí no se envía nada. */
.mandarlo { margin-top: var(--e6); max-width: 62ch; }
.mandarlo 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(--texto-secundario);
  min-height: 44px;
}
.mandarlo summary::-webkit-details-marker { display: none; }
.mandarlo summary:hover { color: var(--texto-principal); }
.mandarlo[open] summary .ms { transform: rotate(180deg); }


/* 07 · AGREGAR ALCANCE ==================================================== */
/* El botón vive en el chrome y está disponible en todo momento, porque el
   alcance no crece cuando a uno le viene bien. */
.boton-agregar-alcance {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px var(--e4);
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  color: var(--texto-secundario);
  background: none;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.boton-agregar-alcance:hover {
  color: var(--texto-principal); border-color: var(--grafito);
}

/* LA HOJA TIENE QUE PODER DESPLAZARSE POR DENTRO.
   Al pasar de diez tipos de entregable a dieciséis, la rejilla creció y el
   botón de confirmar se salió por abajo de la pantalla: la hoja se hacía
   más alta que la ventana y no había forma de llegar a él. Se descubrió
   automatizando, porque a ojo en una pantalla grande seguía cabiendo.

   El tope es la altura de la ventana menos un margen, y lo que se desplaza
   es solo la lista de tipos: el título y las acciones se quedan siempre a
   la vista, que es justo lo que hace falta cuando el contenido crece. */
.hoja-agregar {
  max-width: 680px;
  /* 100% del velo, que ya lleva su propio margen interior. Con `100vh` menos
     un número a mano habría que acertar ese número dos veces, aquí y en el
     padding del velo. */
  max-height: 100%;
  display: flex; flex-direction: column;
}
.hoja-agregar .rejilla-entregables {
  overflow-y: auto;
  min-height: 0;
  /* Un pelo de espacio a la derecha para que la barra no tape el borde de
     las tarjetas ni su anillo de foco. */
  padding-right: var(--e2);
}
.hoja-agregar .rejilla-entregables { margin: var(--e5) 0; }
.hoja-agregar .tarjeta-entregable { background: var(--papel); }
.hoja-agregar .tarjeta-entregable[data-elegido="si"] { border-color: var(--carmin-pleno); }
/* Lo que no se desplaza: se queda fijo arriba y abajo de la hoja. */
.hoja-agregar > h2,
.hoja-agregar > .parrafo,
.hoja-agregar > .campo-envoltura,
.hoja-agregar > .costo-agregar,
.hoja-agregar > .acciones-hoja,
.hoja-agregar > .micro { flex: 0 0 auto; }

.hoja-agregar .campo-envoltura { margin-bottom: var(--e4); }
.hoja-agregar .campo-envoltura .campo-corto { padding: var(--e3) var(--e4); }

/* El costo va en ámbar y no en rojo, por lo mismo que la caducidad del
   enlace: que el avance baje no es un error. Es lo que cuesta, y la persona
   lo está eligiendo a sabiendas. */
.costo-agregar {
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: var(--ambar-claro);
  color: var(--grafito);
  margin: 0 0 var(--e5);
}
.acciones-hoja { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }


/* 08 · PUNTOS DE CORTE ==================================================== */
@media (max-width: 1023px) {
  .cuerpo-trabajo { --alto-chrome: 140px; }
  .veredictos { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* El pie sube porque ahora son dos filas. Si el número no coincide, el
     lienzo reserva de menos y la última tarea queda debajo del pie fijo. */
  .cuerpo-trabajo { --alto-chrome: 152px; --alto-pie: 124px; }

  /* En 390 el riel completo son seis nombres que no caben. Se queda solo el
     punto y la fracción, que es lo que informa; el nombre de la etapa actual
     sigue a la vista en la cabecera del paso, que es donde de verdad hace
     falta. */
  .riel-etapas .riel-nombre { display: none; }
  .riel-etapas li[data-estado="actual"] .riel-nombre { display: inline; }
  .riel-etapas { gap: var(--e2) var(--e4); }

  .trabajo-chrome .flujo-salir span:first-child { display: none; }
  /* Solo la cruz. La etiqueta la sostiene el aria-label, igual que en el
     «Guardar y salir» del flujo del plan. */
  .rotulo-agregar { display: none; }
  .boton-agregar-alcance { padding: 7px 9px; min-width: 44px; justify-content: center; }

  /* El pie tiene que caber en una fila de 342 px útiles. Sin esto, «Saltar
     por ahora» y «Marcar como hecha» se parten en tres renglones cada uno y
     el pie crece hasta comerse la tarea.

     Atrás se queda solo con la flecha: es la acción menos usada de las tres
     y la única cuyo destino es obvio. La acción principal conserva su texto
     entero, porque es la que se toca en cada paso. */
  .flujo-atras span:not(.ms) { display: none; }
  .flujo-atras { min-width: 44px; justify-content: center; padding: 0 8px; }
  .acciones-pie .boton, .boton-fantasma { white-space: nowrap; }
  .boton-fantasma { padding: 0 var(--e3); font-size: 13px; }
  .acciones-pie { gap: var(--e2); }

  .lado-a-lado { grid-template-columns: 1fr; }
  .momento { padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + 34px); }
  .momento::before { left: var(--e4); top: var(--e5); }

  /* El pie se parte: el aviso estorba y la acción principal se queda con
     todo el ancho, igual que en el flujo del plan. */
  #aviso { display: none; }
  .saltar-largo { display: none; }
  .saltar-corto { display: inline; }
  /* En 390 el pie ya lleva tres acciones. «No aplica aquí» se queda sin
     texto y con su etiqueta en el aria-label, igual que la salida. */
  .no-aplica-texto { display: none; }
  #no-aplica::before { content: '⊘'; font-size: 15px; }
  #no-aplica { min-width: 44px; justify-content: center; padding: 0 8px; }
  /* EL PIE SE PARTE EN DOS FILAS.
     Con cuatro acciones (atrás, no aplica, saltar y marcar) ya no cabe una
     sola fila en los 342 px útiles de 390: se probó apretando y la acción
     principal acababa cortada por la derecha.

     Arriba las tres secundarias, abajo la principal a todo lo ancho. El
     orden de importancia se sigue leyendo igual, y la que se toca en cada
     paso es la más grande y la más fácil de acertar con el pulgar. */
  .flujo-pie-interior { gap: var(--e2); flex-wrap: wrap; }
  .acciones-pie { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  /* plan.css pone los botones del pie a width:100% en este corte, porque
     allí la acción principal es la única de la fila. Aquí son varias. */
  .flujo-pie-interior .acciones-pie .boton { width: auto; }
  #hecha { flex: 1 1 100%; order: 5; justify-content: center; }
  .acciones-finales .boton { width: 100%; justify-content: center; }
}

@media (pointer: coarse) {
  .boton-fantasma, .boton-agregar-alcance, .veredicto { min-height: 44px; }
}

/* La pantalla de trabajo no se imprime: lo que se imprime es el plan
   completo, que para eso tiene su hoja. */
@media print {
  .trabajo-chrome, .flujo-pie, .velo { display: none !important; }
}