/* ============================================================
   LA PIEZA · cabecera, fila de pasos, checkpoint, Material, Derivados y Salida (Bloque 2B)

   La fila de pasos es la pieza: seis botones que son a la vez navegación y estado. El
   estado se lee por el borde superior y por el ícono, no solo por el color, para que se
   entienda en blanco y negro y con daltonismo: ✓ hecho · ● en esto / te pregunta · ○ falta ·
   ✕ se cortó.

   Todo sale de tokens.css. `.on` para "el paso que está en pantalla", nunca `.sel` ni
   `.active` — esa clase ya la usa .tab-panel para otra cosa (el panel visible), y tenerlas
   distintas es lo que deja leer `#pz-tabs .on` sin ambigüedad desde el índice.
   ============================================================ */

/* Abajo de 900px `.piezas-layout` se pone en columna (piezas.css) con `align-items:flex-start`,
   y ahí el ancho de un hijo flex es el de su contenido: la fila de pasos con su scroll
   horizontal estiraba la columna entera y la página quedaba con scroll lateral. `.piezas-col`
   ya tenía su `width:100%` por lo mismo; a `#pieza-detalle` le faltaba. Va acá y no en
   piezas.css porque el nodo que lo necesita es la pieza, que es de este archivo. */
@media (max-width: 900px){
  #pieza-detalle{ width:100%; }
}

/* ---------- cabecera ---------- */

.pz-head{ display:flex; gap:var(--sp-5); align-items:flex-start; flex-wrap:wrap; margin-bottom:var(--sp-2); }
.pz-head h2{ margin:0; font-size:var(--fs-xl); line-height:1.25; flex:1 1 240px; min-width:0; }
.pz-acciones{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }

.pz-sub{
  display:flex; gap:var(--sp-6); align-items:center; flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:var(--sp-5);
}
.et-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  vertical-align:middle; margin-right:var(--sp-2); flex:none;
}
.pz-chip{
  border:1px solid var(--turquesa-line); color:var(--turquesa-ink);
  border-radius:99px; padding:2px 9px; font-size:var(--fs-xs);
}

/* El menú «Más ⋯» es el componente `.menu > .menu-btn + .menu-pop` de base.css/base.js: acá
   solo se le da el ancho que necesitan sus siete ítems y se apagan los estilos propios que
   traen los botones inyectados por los drawers (#pb-abrir, #mt-abrir, #cta-abrir, #cm-abrir,
   #co-marcar), que nacieron para una barra horizontal y adentro del popover tienen que ser
   una fila más. */
#pieza-acciones-mas{ min-width:210px; }
#pieza-acciones-mas > button{
  display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-xs); padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); color:var(--ink-2);
}
#pieza-acciones-mas > button:hover:not(:disabled){ background:var(--s3); color:var(--ink); }

/* ---------- la barra de avance general ----------

   Los seis chips de abajo dicen en qué estado está CADA paso; esto dice, de un vistazo y
   sin leer, tres cosas que los chips no responden: cuánto falta, si el pipeline se está
   moviendo, y hace cuánto que no se mueve.

   El estado se lee por TRES canales a la vez y no solo por el color: el texto de la
   derecha, el punto, y el movimiento. Una barra quieta y una barra latiendo se distinguen
   sin ver color, que es lo que hace falta acá — la pregunta que contesta es «¿está
   trabajando o se colgó?». Con prefers-reduced-motion el latido se apaga y queda el texto,
   que nunca fue redundante.

   La paleta es la de siempre: turquesa = se está moviendo, ámbar = te espera a vos o hace
   rato que no pasa nada, rojo = se cortó. Nada de verde/amarillo/rojo de semáforo, que en
   esta app no existe. */
.pz-avance{
  display:flex; align-items:center; gap:var(--sp-4);
  margin:var(--sp-2) 0 var(--sp-5);
  font-size:var(--fs-xs); color:var(--ink-3);
}
.pz-avance[hidden]{ display:none; }
.pz-avance-riel{
  flex:1 1 auto; min-width:0; height:6px; border-radius:99px;
  background:var(--s3); overflow:hidden; position:relative;
}
.pz-avance-lleno{
  height:100%; border-radius:99px; background:var(--ink-3);
  /* La transición es lo que hace que un paso que avanza se VEA avanzar en vez de saltar.
     Larga a propósito: el poll llega cada 2,5 s y un salto instantáneo se pierde. */
  transition:width .6s ease;
}
@media (prefers-reduced-motion: reduce){ .pz-avance-lleno{ transition:none; } }

.pz-avance-txt{ flex:none; display:flex; align-items:center; gap:var(--sp-2); }
.pz-avance-txt b{ color:var(--ink-2); font-weight:600; }
/* El «hace 4 min» va en mono y separado: es un número que cambia solo, y en mono no baila
   el ancho en cada tick. */
.pz-avance-quieto{ font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--ink-3); }

/* Trabajando. El brillo que recorre el riel es el único indicador de que algo pasa cuando
   el paso no cambia por minutos —el paso 5 genera imágenes de a una y puede tardar—. */
.pz-avance[data-estado="corriendo"] .pz-avance-lleno{ background:var(--turquesa); }
.pz-avance[data-estado="corriendo"] .pz-avance-riel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--turquesa-line), transparent);
  transform:translateX(-100%);
  animation:pz-avance-brillo 1.6s linear infinite;
}
@keyframes pz-avance-brillo{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .pz-avance[data-estado="corriendo"] .pz-avance-riel::after{ animation:none; }
}

/* Te espera a vos. No late: el que se tiene que mover sos vos, y una barra latiendo diría
   lo contrario. */
.pz-avance[data-estado="te_pregunta"] .pz-avance-lleno,
.pz-avance[data-estado="a_medias"] .pz-avance-lleno{ background:var(--ambar); }
.pz-avance[data-estado="te_pregunta"] .pz-avance-txt b,
.pz-avance[data-estado="a_medias"] .pz-avance-txt b{ color:var(--ambar-ink); }

/* Corriendo pero sin novedades hace rato: el caso «trabada» del pedido. Sigue corriendo
   —no se afirma que murió, porque no se sabe— pero se dice cuánto hace que no llega nada. */
.pz-avance[data-estado="corriendo"][data-quieto="si"] .pz-avance-lleno{ background:var(--ambar); }
.pz-avance[data-estado="corriendo"][data-quieto="si"] .pz-avance-quieto{ color:var(--ambar-ink); }

.pz-avance[data-estado="termino"] .pz-avance-lleno{ background:var(--turquesa); }
.pz-avance[data-estado="se_corto"] .pz-avance-lleno{ background:var(--rojo-2); }
.pz-avance[data-estado="se_corto"] .pz-avance-txt b{ color:var(--rojo-2); }

/* ---------- la fila de pasos ---------- */

.pz-tabs{ display:flex; gap:var(--sp-1); margin:var(--sp-3) 0 var(--sp-6); }
.pz-tabs button{
  flex:1 1 0; min-width:0; text-align:left; padding:7px 9px;
  background:var(--s2); border:1px solid var(--line); border-top:2px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink-3); font-size:12.5px; line-height:1.2;
}
.pz-tabs button .ic{ font-family:var(--f-mono); font-size:var(--fs-xs); margin-right:5px; }
.pz-tabs button b{ font-weight:600; }
.pz-tabs button small{
  display:block; margin-top:3px; font-size:10.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-tabs button.pz-done{ color:var(--ink-2); border-top-color:var(--turquesa); }
.pz-tabs button.pz-done .ic{ color:var(--turquesa-ink); }
.pz-tabs button.pz-now{ color:var(--ink); border-top-color:var(--turquesa); background:var(--turquesa-dim); }
.pz-tabs button.pz-now .ic{ color:var(--turquesa-ink); animation:cc-latido 1.1s ease-in-out infinite; }
.pz-tabs button.pz-ask{ color:var(--ambar-ink); border-top-color:var(--ambar); background:var(--ambar-dim); }
.pz-tabs button.pz-ask .ic, .pz-tabs button.pz-ask small{ color:var(--ambar-ink); }
.pz-tabs button.pz-fail{ color:var(--rojo-ink); border-top-color:var(--rojo); }
.pz-tabs button.pz-fail .ic{ color:var(--rojo-ink); }
.pz-tabs button.pz-na{ color:var(--ink-3); border-top-style:dashed; }
.pz-tabs button:disabled{ opacity:.45; cursor:not-allowed; }
.pz-tabs button.on{ color:var(--ink); background:var(--s3); border-color:var(--ink-3); }
.pz-tabs button.on small{ color:var(--ink-2); }

/* ---------- bloques de texto (checkpoint, cierre, corriendo) ---------- */

.pz-msg{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-7); font-size:13.5px; line-height:1.5; margin-bottom:var(--sp-5);
}
.pz-msg.pz-chk{ border-left:3px solid var(--ambar); }
.pz-msg.pz-ok{ border-left:3px solid var(--turquesa); }
.pz-msg p{ margin:var(--sp-3) 0 0; }
.pz-chk-cab{ font-size:var(--fs-base); }
.pz-chk-txt{
  margin:var(--sp-4) 0 0; white-space:pre-wrap; word-break:break-word;
  background:var(--s2); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-family:inherit; font-size:13px; max-height:340px; overflow-y:auto;
}
.pz-ev{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-3); }
.pz-dim{ color:var(--ink-3); }
.pz-mono{ font-family:var(--f-mono); font-size:var(--fs-xs); }
.pz-chk-acciones{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-top:var(--sp-5); }
.pz-chk-error{ color:var(--rojo-ink); font-size:var(--fs-sm); margin:var(--sp-3) 0 0; }
.pz-ok-linea{ color:var(--turquesa-ink); font-size:var(--fs-sm); margin:var(--sp-3) 0 0; }
.pz-ajuste{ margin-top:var(--sp-4); }
.pz-ajuste textarea{ width:100%; resize:vertical; }
.pz-danger{ color:var(--rojo-ink); border-color:var(--rojo); background:transparent; }
/* El bloque vivo de una corrida sin carpeta, dentro de la caja de Piezas: los `.pz-*`
   de acá adentro son los mismos del checkpoint de la pieza. */
.pieza-camino-vivo{ margin-top:var(--sp-5); }
.pieza-camino-vivo .pz-msg:last-child{ margin-bottom:0; }

/* Un botón que se lee como un link: el resto de la app ya lo hace así (.gu-accion). */
.pz-link{
  background:none; border:0; padding:0; margin-left:var(--sp-3); font:inherit;
  color:var(--ink-2); text-decoration:underline; cursor:pointer;
}
.pz-link:hover:not(:disabled){ color:var(--ink); }
.pz-link:disabled{ text-decoration:none; cursor:not-allowed; }

.pz-hint{ font-size:var(--fs-sm); color:var(--ink-2); margin:0 0 var(--sp-4); max-width:720px; }
.pz-aviso{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  font-size:12.5px; line-height:1.45; margin-bottom:var(--sp-5); color:var(--ink);
}
.pz-aviso.pz-err{ border-color:var(--rojo); background:rgba(232,48,42,.10); }
.pz-aviso.pz-warn{ border-color:var(--ambar); background:var(--ambar-dim); }
.pz-aviso.pz-ok{ border-color:var(--turquesa-line); background:var(--turquesa-dim); }

/* ---------- la nota del pipeline, plegada ---------- */

.nota-pipe{ font-size:11.5px; color:var(--ink-3); margin-bottom:var(--sp-6); }
.nota-pipe[hidden]{ display:none; }
.nota-pipe summary{ cursor:pointer; font-family:var(--f-mono); font-size:var(--fs-xs); }
.nota-pipe pre{
  margin:var(--sp-2) 0 0; white-space:pre-wrap; word-break:break-word;
  padding:var(--sp-3) var(--sp-4); background:var(--s2); border-radius:var(--r-xs);
}

/* ---------- Material ---------- */

.pz-doc h2{ margin:0 0 var(--sp-4); font-size:var(--fs-lg); }
.pz-doc p{ margin:0 0 var(--sp-4); font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.pz-fuentes{ margin-bottom:var(--sp-5); }
.pz-linea-corrida{ font-size:var(--fs-sm); }
.pz-eventos{ margin-top:var(--sp-4); font-size:var(--fs-sm); }
.pz-eventos summary{ cursor:pointer; color:var(--ink-3); }
.pz-feed{ display:flex; flex-direction:column; gap:9px; margin-top:var(--sp-4); max-height:420px; overflow-y:auto; }

/* El feed de eventos: las mismas clases que pintaba el drawer de Crear contenido, mudadas
   acá cuando ese drawer se apagó. El nombre NO cambia porque lo escribe
   PanelCrear.pintarEventosEn(), que es la misma función de siempre. */
.cc-ev{ font-size:12.5px; line-height:1.5; }
.cc-ev-paso, .cc-ev-sistema, .cc-ev-log{
  color:var(--ink-3); font-family:var(--f-mono); font-size:11.5px;
  padding-left:14px; position:relative; word-break:break-word;
}
.cc-ev-paso::before{ content:"›"; position:absolute; left:2px; color:var(--turquesa-ink); }
.cc-ev-claude{
  background:var(--s2); border:1px solid var(--line); border-left:2px solid var(--turquesa);
  border-radius:var(--r-sm); padding:10px 11px; white-space:pre-wrap; word-break:break-word;
}
.cc-ev-vos{
  background:var(--ambar-dim); border:1px solid var(--ambar);
  border-radius:var(--r-sm); padding:8px 11px; white-space:pre-wrap;
}
.cc-ev-error{
  background:rgba(232,48,42,.10); border:1px solid var(--rojo); border-radius:var(--r-sm);
  padding:8px 11px; color:var(--ink); white-space:pre-wrap; word-break:break-word;
}

/* ---------- Derivados ---------- */

.pz-falta-chip{ color:var(--ambar-ink); }

/* ---------- Salida ---------- */

.falta{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--s1); margin-bottom:var(--sp-6); }
.falta > summary{
  list-style:none; cursor:pointer; padding:10px 12px; display:flex; gap:var(--sp-3);
  align-items:center; flex-wrap:wrap; font-size:12.5px;
}
.falta > summary::-webkit-details-marker{ display:none; }
.falta > summary .k{ color:var(--ink-2); margin-right:var(--sp-1); }
.falta > summary .tw{ margin-left:auto; color:var(--ink-3); font-size:var(--fs-xs); }
.falta[open] > summary .tw::before{ content:"ocultar"; }
.falta:not([open]) > summary .tw::before{ content:"ver el detalle"; }
.falta-cuerpo{ padding:var(--sp-1) 12px 10px; border-top:1px solid var(--line-soft); }

.redchip{
  display:inline-flex; gap:var(--sp-2); align-items:center; font-size:var(--fs-sm);
  padding:3px 9px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2);
}
.redchip.ok{ border-color:var(--turquesa-line); color:var(--turquesa-ink); }
.redchip.warn{ border-color:var(--ambar); color:var(--ambar-ink); }
.redchip.err{ border-color:var(--rojo); color:var(--rojo-ink); }
.redchip.off{ color:var(--ink-3); border-style:dashed; }

.pz-salida-acciones{ margin:var(--sp-6) 0 var(--sp-4); }
.pz-pie{ font-size:var(--fs-sm); margin:var(--sp-6) 0 0; }

/* ---------- 390 ----------
   La fila de pasos pasa a scroll horizontal (seis botones no entran) y el sub-dato queda
   SOLO en el paso activo: seis líneas de 10px una al lado de la otra no se leen, y la que
   importa es la del paso en el que estás. El activo se trae a la vista solo (pieza.js). */
@media (max-width: 560px){
  .pz-tabs{ overflow-x:auto; scrollbar-width:none; }
  .pz-tabs::-webkit-scrollbar{ display:none; }
  /* Ancho fijo y sin encoger: seis pasos a 132px no entran en 390, que es exactamente lo
     que tiene que pasar — la fila scrollea y el activo se trae a la vista solo. Sin el
     min-width los botones se comprimían hasta caber y el nombre del paso quedaba en dos
     letras. */
  .pz-tabs button{ flex:0 0 auto; min-width:132px; max-width:62vw; }
  .pz-tabs button small{ display:none; }
  .pz-tabs button.on small{ display:block; }
  .pz-head h2{ font-size:var(--fs-lg); flex-basis:100%; }
  .pz-acciones{ width:100%; }
  .menu-mas{ margin-left:auto; }
  .falta > summary{ font-size:var(--fs-sm); }
}