/* ============================================================
   La tira de "qué le falta a esta pieza para salir", arriba de la pieza.
   Va ANTES de base.css como todos los .css de apartado: base.css gana los empates.
   ============================================================ */

#pieza-listo{
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--s2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
#pieza-listo[hidden]{ display: none; }
/* Cuando falta algo, el filete de la izquierda se prende en ámbar. No rojo: no está roto,
   falta terminarlo — y el rojo de esta app está para lo que no se puede deshacer. */
#pieza-listo:has(.lt-lista){ border-left-color: var(--dorado, #E0A93B); }
#pieza-listo:has(.lt-ok){ border-left-color: var(--turquesa); }

.lt-linea{ margin: 0; }
.lt-ok{ color: var(--turquesa-ink); font-weight: 600; }
.lt-gris{ color: var(--ink-3); }

.lt-cab{
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-micro)/1.2 var(--f-mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}

.lt-lista{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.lt-lista li{
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.lt-red{
  flex: none; font: 600 var(--fs-micro)/1.4 var(--f-mono);
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
  background: var(--s3); color: var(--ink-2);
}
.lt-txt{ flex: 1 1 20rem; min-width: 0; color: var(--ink-2); }
.lt-ir{
  flex: none; background: none; color: var(--link, var(--turquesa));
  font-size: var(--fs-micro); padding: 0; text-decoration: underline;
}
.lt-ir:hover{ color: var(--ink); }

/* La lista "sí puede salir en X" va después de la de faltantes y se lee como pie. */
.lt-lista + .lt-gris{ margin-top: var(--sp-2); }

/* ---------- el pendiente de texto sucio y el bloque de limpiar ---------- */

/* Los motivos (nota ⚠️, título #, …) van en gris debajo del texto del pendiente: son el
   detalle, no la frase. */
.lt-motivos{
  flex: 1 1 100%; font: 400 var(--fs-micro)/1.4 var(--f-mono); color: var(--ink-3);
}

.lt-limpiar{
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.lt-pre{
  margin: 0; padding: var(--sp-2) var(--sp-3); max-height: 9em; overflow: auto;
  background: var(--s3); border-radius: var(--r-sm);
  font: 400 var(--fs-micro)/1.4 var(--f-mono); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lt-queda{ color: var(--ink); }
.lt-acciones{ display: flex; gap: var(--sp-2); }
.lt-acciones button{ font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); }