/* El latido de «Buscando la corrida…» (ver pintarBuscandoCorrida en piezas.js). El
   @keyframes cc-latido vive en panel-crear.css, que el index ya carga; con
   prefers-reduced-motion se apaga, igual que la barra de avance. */
.pz-buscando{ animation:cc-latido 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .pz-buscando{ animation:none } }

/* ============================================================
   PIEZAS · la lista y su columna. Salió del <style> de index.html en el Bloque 2A (por
   tamaño). Todo sale de tokens.css.
   ============================================================ */

/* ---------- contenidos (piezas) ---------- */
/* Grid y no flex, desde 2026-09-07. Con flex en fila, TODOS los hijos de este contenedor
   son columnas hermanas, así que `#pieza-camino` (la caja de la corrida) y `#pieza-detalle`
   (la pieza) se dibujaban uno AL LADO del otro. Pedido de Manu: la corrida arriba y la
   pieza abajo, en una sola columna.
   El grid lo resuelve sin tocar el HTML: la lista se queda en la columna 1 y todo lo demás
   va a la 2, donde el auto-placement les da una fila a cada uno — o sea que se apilan en el
   orden del documento. `minmax(0,1fr)` y no `1fr` para que la fila de pasos, que scrollea
   en horizontal, no estire la columna y saque scroll lateral a la página entera. */
.piezas-layout{
  display:grid;
  grid-template-columns:262px minmax(0, 1fr);
  gap:var(--sp-7);
  align-items:start;
}
/* El 262px es el mismo de siempre; lo que cambió es quién lo lleva: ahora la columna
   entera (buscador + lista), y no la lista sola. Vive en el grid-template de arriba. */
.piezas-col{ grid-column:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); }
/* Los cuatro estados de la derecha, apilados en la misma columna. Son excluyentes entre sí
   salvo la corrida y la pieza, que pueden convivir mientras el pipeline escribe. */
.sel-pieza, #pieza-vacio, #pieza-camino, #pieza-detalle{ grid-column:2; }
#piezas-lista{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.piezas-barra{ display:flex; align-items:center; gap:var(--sp-2); }
.piezas-barra[hidden]{ display:none; }
#piezas-buscar{ flex:1; min-width:0; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }
/* La × es nuestra y aparece sola cuando hay texto: la nativa de type=search se apaga para
   no tener dos cruces distintas una al lado de la otra. */
#piezas-buscar::-webkit-search-cancel-button{ display:none; }
.pl-limpiar{
  flex:none; background:none; color:var(--ink-2);
  padding:var(--sp-1) var(--sp-3); font-size:var(--fs-md); line-height:1.2;
}
.pl-limpiar:hover{ color:var(--ink); }
.pl-limpiar[hidden]{ display:none; }
/* La papelera de contenidos. El encabezado ocupa el lugar del buscador (son dos modos de
   la misma columna, no dos listas) y el pie vive abajo, chico y gris: entrar a la
   papelera es mantenimiento y no puede competir con la lista. */
.piezas-papelera-head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.piezas-papelera-head[hidden]{ display:none; }
.piezas-papelera-head h4{
  margin:0; font:600 var(--fs-sm)/1.2 var(--f-mono); color:var(--ink);
}
.piezas-papelera-head .readonly{ font-size:var(--fs-micro); }
.piezas-pie{ margin-top:var(--sp-3); }
.piezas-pie[hidden]{ display:none; }
.piezas-pie button{
  background:none; border:none; padding:0; color:var(--ink-3);
  font-size:var(--fs-micro); text-decoration:underline; cursor:pointer;
}
.piezas-pie button:hover{ color:var(--ink); }
/* Sin rojo: mandar a la papelera es reversible y pintarlo de peligro haría que nadie lo
   use. El rojo de esta app está reservado para lo que no se puede deshacer. */
.pieza-borrar{ background:none; color:var(--ink-3); font-size:var(--fs-xs); }
.pieza-borrar:hover{ color:var(--rojo-ink); }
/* La fila de la papelera: misma fila de siempre, apagada, con el botón de restaurar. */
.pieza-row.en-papelera{ opacity:.72; cursor:default; }
.pieza-papelera-fila{ display:flex; align-items:center; gap:var(--sp-2); }
.pieza-papelera-fila .pieza-row{ flex:1; min-width:0; }
/* Encabezado de grupo: el patrón de Ideas —título y contador entre paréntesis, grupo
   vacío que no se dibuja— acá como encabezado de sección, porque los estados se ven
   todos juntos y ordenados por lo que hay para hacer. */
.grupo-piezas{
  margin:var(--sp-4) 0 0; font:600 var(--fs-micro)/1.2 var(--f-mono);
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);
}
.grupo-piezas:first-child{ margin-top:0; }
/* La pieza abierta cuando el filtro la deja afuera: sigue en la lista, punteada. */
.pieza-row.fuera-filtro{ border-style:dashed; }
.piezas-sin-resultado{ padding:var(--sp-7) var(--sp-4); font-size:var(--fs-sm); }
.piezas-sin-resultado button{ margin-top:var(--sp-4); font-size:var(--fs-xs); }
.pieza-row{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
  cursor:pointer; text-align:left;
}
.pieza-row:hover{ border-color: var(--ink-2); }
.pieza-row.active{ border-color: var(--turquesa); }
.pieza-row .p-tema{ font-size:var(--fs-md); margin-bottom:var(--sp-1); }
.pieza-row .p-meta{ font-size:var(--fs-xs); color:var(--ink-2); display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; font-family: var(--f-mono); }
/* Una huérfana se titula por la primera línea de 00-madre.md; la carpeta va debajo, en
   gris, porque sigue siendo el nombre con el que la nombra el panel de Crear contenido. */
.pieza-row .pieza-carpeta{ display:block; font:400 var(--fs-xs)/1.3 var(--f-mono); color:var(--ink-3); overflow-wrap:anywhere; margin-bottom:var(--sp-1); }
.pieza-row .pieza-corrida{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--ink-2); margin-top:var(--sp-1); }
.pieza-row .pieza-retomar{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); border:1px solid var(--turquesa-line); background:var(--turquesa-dim); border-radius:var(--r-sm); color:var(--ink); cursor:pointer; }
.pieza-row .pieza-retomar:hover{ border-color:var(--turquesa); }
.estado-pill{ font-size:var(--fs-micro); padding:2px var(--sp-2); border-radius:20px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.estado-generado{ background:var(--s3); color:var(--ink-2); }
.estado-aprobado{ background:var(--turquesa-dim); color:var(--turquesa-ink); }
.estado-publicado{ background:var(--turquesa-dim); color:var(--turquesa-ink); }
.estado-sin_registrar{ background:var(--s3); color:var(--ink-2); }
#pieza-detalle{ min-width:0; }
#pieza-vacio{ flex:1; min-width:0; }

/* ---------- Bloque 2A: la lista de Piezas por etapa, la fila que ya no es un <button>,
   la corrida sin carpeta, y el <select> de 390 ---------- */
.grupo-piezas[data-etapa]{ color:var(--et-ink, var(--ink-3)); display:flex; align-items:center; gap:var(--sp-2); }
.grupo-piezas[data-etapa="prod"]{ --et:var(--e-prod); --et-ink:var(--e-prod-ink); }
.grupo-piezas[data-etapa="rev"]{ --et:var(--e-rev); --et-ink:var(--e-rev-ink); }
.grupo-piezas[data-etapa="salir"]{ --et:var(--e-salir); --et-ink:var(--e-salir-ink); }
.grupo-piezas[data-etapa="prog"]{ --et:var(--e-prog); --et-ink:var(--e-prog-ink); }
.grupo-piezas[data-etapa="num"]{ --et:var(--e-num); --et-ink:var(--e-num-ink); }
.grupo-piezas .seg-punto{ background:var(--et, var(--ink-3)); margin:0; }
.pieza-grupo-vacio{ font-size:var(--fs-xs); color:var(--ink-3); padding:2px var(--sp-4); }
.pieza-row{ display:block; font:inherit; color:inherit; }
.pieza-row:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }
.pieza-row .pieza-situ{ font-size:11.5px; font-weight:500; color:var(--ink-3); margin-right:var(--sp-2); }
.pieza-row .pieza-situ[data-situ="corriendo"]{ color:var(--turquesa-ink); }
.pieza-row .pieza-situ[data-situ="te_pregunta"], .pieza-row .pieza-situ[data-situ="a_medias"]{ color:var(--ambar-ink); }
.pieza-row .pieza-situ[data-situ="se_corto"]{ color:var(--rojo-2); }
.pieza-row .pieza-situ .hoy-punto{ margin-right:4px; }
.sel-pieza{ display:none; }
#pieza-camino{ min-width:0; }
#pieza-camino[hidden]{ display:none; }
.pieza-camino{
  background:var(--s1); border:1px solid var(--line); border-left:3px solid var(--e-prod);
  border-radius:var(--r-md); padding:var(--sp-6) var(--sp-7); max-width:760px;
}
.pieza-camino h2{ margin:0 0 var(--sp-2); font-size:16px; font-weight:600; }
.pieza-camino .pieza-camino-sub{ font-size:var(--fs-sm); color:var(--ink-3); display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }
.pieza-camino .pieza-camino-error{ margin-top:var(--sp-4); color:var(--rojo-3); font-size:12.5px; font-family:var(--f-mono); overflow-wrap:anywhere; }
.pieza-camino .pieza-camino-acciones{ margin-top:var(--sp-6); display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pieza-camino .pieza-camino-nota{ margin:var(--sp-6) 0 0; font-size:var(--fs-sm); color:var(--ink-3); }
@media (max-width: 900px){
  /* Una sola columna para todo, la lista incluida: en el teléfono no hay lugar para la
     columna de 262px al lado. Con grid esto es cambiar el template, no la dirección. */
  .piezas-layout{ grid-template-columns:minmax(0, 1fr); }
  .piezas-col{ grid-column:1; width:100%; }
  .sel-pieza, #pieza-vacio, #pieza-camino, #pieza-detalle{ grid-column:1; }
  .piezas-layout.con-detalle .piezas-col{ display:none; }
  .piezas-layout.con-detalle .sel-pieza{ display:flex; align-items:center; gap:var(--sp-2); width:100%; }
  .sel-pieza select{ flex:1; min-width:0; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-sm); }
  .sel-pieza .sel-volver{ flex:none; padding:var(--sp-2) var(--sp-4); }
}