/* ========== STEP 2: SPIRAL BINDING (encuadernacion.js) ==========
   Documentos a la izquierda y libros a la derecha; en móvil, uno debajo del otro. */

.libros-intro { margin: 0 0 6px; color: var(--text-secondary); }
.libros-reglas { margin: 0 0 var(--spacing-md); font-size: var(--font-size-sm); color: var(--text-muted); }

.libros {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--spacing-md);
  align-items: start;
}
.libros__subtitulo { margin: 0 0 8px; font-size: 1em; color: var(--text-primary); }

/* ---------- Documentos del Paso 1 ---------- */
.libros-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.libros-doc { background: #fafafa; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.libros-doc__arrastre[draggable="true"] { cursor: grab; }
.libros-doc--en-libro { border-left: 4px solid var(--success-color); }
.libros-doc__nombre { font-weight: 600; overflow-wrap: anywhere; }
.libros-doc__meta { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; }
.libros-doc__copias { font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 6px; }
/* Botones de la tarjeta: copias a la izquierda (− N copies +) y partir/quitar a la derecha; si no caben, el
   grupo derecho baja entero y sigue alineado a la derecha */
.libros-doc__acciones {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 8px;
}
.libros-doc__copiasctl { display: inline-flex; align-items: center; gap: 6px; }
.libros-doc__copiasctl button {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--primary-color); border-radius: 6px; background: #fff;
  color: var(--primary-color); font-size: 1.1em; font-weight: 700; line-height: 1; cursor: pointer;
}
.libros-doc__num { min-width: 62px; text-align: center; font-size: var(--font-size-sm); font-weight: 600; }
.libros-doc__otras { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.libros-doc__otras button {
  min-height: 34px; padding: 4px 10px; border: 1px solid var(--primary-color); border-radius: 6px; background: #fff;
  color: var(--primary-color); font-size: var(--font-size-sm); white-space: nowrap; cursor: pointer;
}
.libros-doc__otras .libros-doc__quitar { border-color: var(--danger-color); color: var(--danger-color); }
.libros-doc__acciones button:disabled { opacity: 0.4; cursor: default; }
/* "Split by pages" (de la copia o de una de sus partes): después de qué páginas se corta */
.libros-doc__partir, .libros-parte__partir {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-top: 8px; padding: 8px;
  border: 1px dashed #c7d2fe; border-radius: 6px; background: #fff;
}
.libros-doc__partir[hidden], .libros-parte__partir[hidden] { display: none; }
.libros-doc__partir label, .libros-parte__partir label {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; font-size: var(--font-size-sm);
}
.libros-doc__partir input, .libros-parte__partir input { min-height: 34px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; }
.libros-doc__partir button, .libros-parte__partir button {
  min-height: 34px; padding: 4px 14px; border: none; border-radius: 6px; background: var(--primary-color); color: #fff; cursor: pointer;
}
.libros-doc__ayuda { flex-basis: 100%; color: var(--text-muted); font-size: var(--font-size-xs); }
.libros-doc__error { flex-basis: 100%; color: var(--danger-color); font-size: var(--font-size-sm); font-weight: 600; }
.libros-doc__error[hidden] { display: none; }
/* Copia partida: una subtarjeta por parte, que se arrastra o se añade a un libro como un PDF, y se puede volver a partir */
.libros-corte { margin-top: 8px; padding-left: 10px; border-left: 3px solid #c7d2fe; }
.libros-corte__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--font-size-sm); font-weight: 600;
}
.libros-corte__cab button {
  min-height: 32px; padding: 2px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer;
  font-size: var(--font-size-xs);
}
.libros-partes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.libros-parte { padding: 6px 8px; border: 1px solid #c7d2fe; border-radius: 6px; background: #fff; font-size: var(--font-size-sm); }
.libros-parte__fila { display: flex; align-items: center; gap: 6px; }
.libros-parte__arrastre { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
.libros-parte__arrastre[draggable="true"] { cursor: grab; }
.libros-parte__cortar {
  flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid #c7d2fe; border-radius: 6px; background: #fff; cursor: pointer;
}
.libros-parte__paginas { font-weight: 600; }
.libros-parte__info { color: var(--text-muted); }
.libros-parte--en-libro { background: #f1f5f9; border-color: #e2e8f0; }
.libros-parte--en-libro .libros-parte__paginas { opacity: 0.5; }
/* Todas sus copias ya están en libros: tarjeta atenuada (los botones siguen funcionando) */
.libros-doc--agotado { background: #f1f5f9; border-color: #e2e8f0; }
.libros-doc--agotado .libros-doc__nombre, .libros-doc--agotado .libros-doc__meta { opacity: 0.5; }
.libros-doc--agotado .libros-doc__copias { color: var(--success-color); font-weight: 600; }

/* ---------- Libros ---------- */
.libros-lista { display: grid; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); }
.libro {
  border: 2px solid #c7d2fe; border-radius: 10px; padding: 10px 12px; background: #f8faff; min-width: 0;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.libro--sobre { border-color: var(--primary-color); background: #eef2ff; }
.libro--mal { border-color: var(--danger-color); }

.libro__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.libro__plegar {
  flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid #c7d2fe; border-radius: 6px; background: #fff;
  cursor: pointer; font-size: 1em; line-height: 1;
}
/* Libro plegado: solo la cabecera y una línea de resumen */
.libro__resumen { display: none; margin: 6px 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.libro--plegado .libro__resumen { display: block; }
.libro--plegado .libro__cuerpo { display: none; }
.libro__num { font-weight: 700; white-space: nowrap; }
.libro__nombre {
  flex: 1 1 120px; min-width: 0; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95em;
}
.libro__precio { font-weight: 700; color: var(--success-color); white-space: nowrap; }

.libro__tapas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.libro__tapa { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 0; }
.libro__tapasel { display: flex; align-items: center; gap: 6px; min-width: 0; }
.libro__tapasel select { flex: 1; min-width: 0; padding: 6px; border-radius: 6px; border: 1px solid #ccc; }
.tapa-muestra {
  flex: none; width: 18px; height: 24px; border-radius: 3px; border: 1px solid #94a3b8;
}
.tapa-muestra--clear { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%); }
.tapa-muestra--black { background: #111827; }
.tapa-muestra--white { background: #fff; }
.tapa-muestra--blue { background: #1d4ed8; }
.tapa-muestra--red { background: #dc2626; }

.libro__docs { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.libro__doc {
  display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 4px 6px; min-width: 0;
}
.libro__pos { font-weight: 600; color: var(--text-muted); }
.libro__docnombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libro__dochojas { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.libro__blanca {
  margin: 0 16px; padding: 1px 6px; border: 1px dashed #cbd5e1; border-radius: 6px; text-align: center;
  font-size: var(--font-size-xs); color: var(--text-muted);
}
.libro__doc--sobre { box-shadow: inset 0 3px 0 var(--primary-color); }
@media (hover: hover) { .libro__doc[draggable="true"] { cursor: grab; } }
.muestra-espiral {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; margin-right: 4px;
  border: 1px solid #94a3b8; border-radius: 3px; background: #fff; vertical-align: middle;
}
.muestra-espiral svg { width: 28px; height: 17px; }
.libro__hoja { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: var(--font-size-sm); cursor: pointer; }
.libro__hoja input { width: 18px; height: 18px; flex: none; }
.libro__nota { margin: 0 0 6px; font-size: var(--font-size-xs); color: var(--text-muted); }
.libro__docpaginas { flex: none; font-size: var(--font-size-xs); font-weight: 600; color: var(--primary-color); white-space: nowrap; }
.libro__docacc { display: flex; gap: 2px; flex: none; }
.libro__docacc button {
  width: 32px; height: 32px; border: 1px solid #d1d5db; border-radius: 6px; background: #f9fafb; cursor: pointer;
  font-size: 0.9em; line-height: 1; padding: 0;
}
.libro__docacc button:disabled { opacity: 0.35; cursor: default; }
.libro__vacio {
  padding: 14px; text-align: center; color: var(--text-muted); border: 2px dashed #c7d2fe; border-radius: 8px;
  font-size: var(--font-size-sm);
}

.libro__anadir { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #c7d2fe; background: #fff; }

.libro__grosor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.libro__barra {
  flex: 1 1 120px; height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden;
}
.libro__barra span { display: block; height: 100%; background: var(--success-color); }
.libro--mal .libro__barra span { background: var(--danger-color); }
.libro__texto { font-size: var(--font-size-sm); color: var(--text-secondary); }
.libro__max { margin-left: auto; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.libro__error { margin: 6px 0 0; color: var(--danger-color); font-size: var(--font-size-sm); font-weight: 600; }
.libro__error[hidden] { display: none; }

.libro__acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.libro__acciones button {
  padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer;
  font-size: var(--font-size-sm); min-height: 34px;
}

.libros-aviso {
  margin: var(--spacing-md) 0 0; padding: 8px 10px; border-radius: 6px; font-size: var(--font-size-sm);
  color: #92400e; background: #fffbeb; border: 1px solid #fcd34d;
}
.libros-aviso[hidden] { display: none; }
.libros-resumen { margin: var(--spacing-sm) 0 0; font-weight: 600; text-align: right; }
.libros-resumen--mal { color: var(--danger-color); }

/* ---------- Bloque de libros en el presupuesto (services/pricing.py) ---------- */
.libros-presupuesto { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #ccc; }
.libro-presupuesto { margin: 6px 0; overflow-wrap: anywhere; }

/* Ordenador: la lista de documentos se queda a la vista mientras se baja por los libros */
@media (min-width: 701px) {
  .libros__docs { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; padding-right: 4px; }
}

@media (max-width: 700px) {
  .libros { grid-template-columns: minmax(0, 1fr); }
  .libro__tapas { grid-template-columns: 1fr; }
  .libros-resumen { text-align: left; }
}