/* =========================================================================
   Imprenta Pro · Editor de revistas y folletos
   Usa la base de personalizer.css (pasos, tarjetas, chips, ticket) y añade el
   visor de pliegos y el test de impresión.
   ========================================================================= */

.ipm-app { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
/* El lienzo del visor no debe ensanchar la columna: la pista implícita sería min-content. */
.ipm-app .ipc-main { grid-template-columns: minmax(0, 1fr); }
.ipm-app .ipc-main > *, .ipm-stage { min-width: 0; }

/* ---------- especificaciones del formato ---------- */
.ipm-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 0; }
.ipm-specs div { padding: 8px 10px; border-radius: 8px; background: var(--ipro-paper); }
.ipm-specs dt { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ipro-ink-soft); }
.ipm-specs dd { margin: 2px 0 0; font-family: var(--ipro-mono); font-size: 13px; font-weight: 700; }
.ipm-app .ipc-chip small { font-family: var(--ipro-mono); font-size: 11.5px; font-weight: 500; opacity: .7; margin-left: 2px; }

/* ---------- papel ---------- */
.ipm-color { margin-bottom: 14px; }
.ipm-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ipm-paper { grid-template-columns: 44px minmax(0, 1fr); }
.ipm-paper-swatch {
  grid-row: 1 / 3;
  width: 44px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(135deg, #fff 0 60%, #ece7dc 60% 100%);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 26, .14), calc(2px + var(--g, .3) * 5px) calc(2px + var(--g, .3) * 5px) 0 -1px #ddd6c8;
}
.ipm-cover-paper { margin-top: 16px; }
.ipm-cover-paper h4 { margin: 0 0 8px; font-size: 14px; color: var(--ipro-ink-soft); }
.ipm-cover-paper .ipc-options--chips { margin-bottom: 0; }

/* ---------- archivos ---------- */
.ipm-drops { display: grid; gap: 10px; }
.ipc-drop.is-error { border-style: solid; border-color: var(--ipro-error); background: #fdf1f1; }
.ipc-drop.is-error .ipc-drop-mark { background: var(--ipro-error); }
.ipm-template { margin-top: 10px; font-size: 13px; color: var(--ipro-ink-soft); }

/* ---------- visor ---------- */
.ipm-editor { padding-bottom: 18px; }
.ipm-editor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ipm-editor-head p { color: var(--ipro-ink-soft); font-size: 14px; margin-top: 2px; }
.ipm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.ipm-layers { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; color: var(--ipro-ink-soft); }
.ipm-layers label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ipm-layers input { accent-color: var(--ipro-ink); margin: 0; }
.ipm-layers.is-final label:nth-child(1), .ipm-layers.is-final label:nth-child(2) { display: none; }
.ipm-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.ipm-key--bleed { background: rgba(224, 0, 122, .3); }
.ipm-key--trim { border: 2px solid #e0007a; }
.ipm-key--safe { border: 2px dashed #1f7a4d; background: rgba(255, 212, 0, .3); }
.ipm-key--issue { border: 2px solid #c0262d; background: rgba(192, 38, 45, .18); }

.ipm-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 12px;
  border-radius: var(--ipro-radius);
  background:
    radial-gradient(circle at 1px 1px, rgba(22, 22, 26, .09) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--ipro-paper-2);
  overflow: hidden;
  outline: 0;
}
.ipm-stage canvas { display: block; max-width: 100%; }
.ipm-empty { display: grid; justify-items: center; gap: 10px; color: var(--ipro-ink-soft); font-size: 14px; text-align: center; padding: 30px; }
.ipm-empty svg { width: 120px; height: 80px; fill: #fff; stroke: var(--ipro-line-strong); stroke-width: 1.6; stroke-linejoin: round; }
.ipm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 22, 26, .78);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}
.ipm-nav:hover { background: var(--ipro-ink); }
.ipm-nav--prev { left: 10px; }
.ipm-nav--next { right: 10px; }
.ipm-caption { margin: 10px 0 0; text-align: center; font-family: var(--ipro-mono); font-size: 12.5px; color: var(--ipro-ink-soft); }
.ipm-caption:empty { display: none; }

.ipm-strip { display: flex; gap: 10px; margin-top: 12px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; }
.ipm-strip:empty { display: none; }
.ipm-thumb {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 6px 4px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  position: relative;
}
.ipm-thumb:hover { background: var(--ipro-paper); }
.ipm-thumb.is-active { border-color: var(--ipro-ink); background: var(--ipro-paper); }
.ipm-thumb-pages { display: flex; height: 60px; box-shadow: 0 2px 6px -2px rgba(22, 22, 26, .35); }
.ipm-thumb.is-first .ipm-thumb-pages { margin-left: 44px; }
.ipm-thumb-pages canvas { display: block; height: 60px; width: auto; }
.ipm-thumb-pages i { display: block; width: 42px; height: 60px; background: #fff; }
.ipm-thumb small { font-family: var(--ipro-mono); font-size: 11px; color: var(--ipro-ink-soft); }
.ipm-thumb::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: var(--ipro-ok); }
.ipm-thumb.is-warn::after { background: #e0a100; }
.ipm-thumb.is-error::after { background: var(--ipro-error); }
.ipm-thumb.is-pending::after { background: var(--ipro-line-strong); }

/* ---------- test de impresión ---------- */
.ipm-test {
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--ipro-sheet);
  border: 1px solid var(--ipro-line);
  border-radius: var(--ipro-radius-lg);
  box-shadow: 0 10px 30px -18px rgba(22, 22, 26, .3);
}
.ipm-test-head { display: flex; gap: 12px; align-items: flex-start; }
.ipm-test-head h3 { font-size: 17px; }
.ipm-test-head p { margin-top: 2px; font-size: 13.5px; color: var(--ipro-ink-soft); }
.ipm-test-light { flex: none; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; background: var(--ipro-line); position: relative; }
.ipm-test-light::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; opacity: .9; }
.ipm-test[data-status="ok"] .ipm-test-light { background: var(--ipro-ok); }
.ipm-test[data-status="ok"] .ipm-test-light::after { inset: 10px 9px 12px; border-radius: 0; background: none; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg); opacity: 1; }
.ipm-test[data-status="warn"] .ipm-test-light { background: #e0a100; }
.ipm-test[data-status="error"] .ipm-test-light, .ipm-test[data-status="block"] .ipm-test-light { background: var(--ipro-error); }
.ipm-test[data-status="busy"] .ipm-test-light { background: conic-gradient(var(--ipro-cyan) 0 25%, var(--ipro-magenta) 0 50%, var(--ipro-yellow) 0 75%, var(--ipro-ink) 0); animation: ipm-spin 1.2s linear infinite; }
.ipm-test[data-status="ok"] .ipm-test-head p { color: var(--ipro-ok); font-weight: 600; }
.ipm-test[data-status="error"] .ipm-test-head p, .ipm-test[data-status="block"] .ipm-test-head p { color: var(--ipro-error); font-weight: 600; }
@keyframes ipm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ipm-test[data-status="busy"] .ipm-test-light { animation: none; } }

.ipm-test-progress { height: 4px; border-radius: 4px; background: var(--ipro-paper-2); overflow: hidden; }
.ipm-test-progress i { display: block; height: 100%; width: 0; background: var(--ipro-cyan); transition: width .2s ease; }

.ipm-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ipm-checks:empty { display: none; }
.ipm-checks li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; border-bottom: 1px dotted var(--ipro-line); }
.ipm-checks li:last-child { border-bottom: 0; }
.ipm-checks i { width: 14px; height: 14px; border-radius: 50%; background: var(--ipro-ok); }
.ipm-checks .is-warn i { background: #e0a100; }
.ipm-checks .is-error i { background: var(--ipro-error); }
.ipm-checks .is-pending i { background: var(--ipro-line-strong); }
.ipm-checks em { font-style: normal; font-size: 12px; color: var(--ipro-ink-faint); }

.ipm-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 460px; overflow-y: auto; }
.ipm-issues:empty { display: none; }
.ipm-issues li {
  display: grid;
  gap: 3px;
  padding: 9px 10px 9px 12px;
  border-radius: 8px;
  border-left: 4px solid var(--ipro-line-strong);
  background: var(--ipro-paper);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.ipm-issues li:hover, .ipm-issues li:focus-visible { background: var(--ipro-paper-2); outline: 0; }
.ipm-issues li.is-block, .ipm-issues li.is-error { border-left-color: var(--ipro-error); background: #fdf1f1; }
.ipm-issues li.is-warn { border-left-color: #e0a100; background: #fff8e1; }
.ipm-issues li.is-info { border-left-color: var(--ipro-cyan); }
.ipm-issues li.is-selected { box-shadow: inset 0 0 0 1.5px var(--ipro-ink); }
.ipm-issues small { font-family: var(--ipro-mono); font-size: 11.5px; color: var(--ipro-ink-soft); }
.ipm-issues li.ipm-more { cursor: default; border-left-color: transparent; color: var(--ipro-ink-soft); }
.ipm-app .ipm-issue-action { justify-self: start; margin-top: 4px; padding: 5px 12px; border: 0; border-radius: 999px; background: var(--ipro-ink); color: #fff; font-size: 12.5px; font-weight: 700; }

/* ---------- ticket ---------- */
.ipm-accept { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: rgba(192, 38, 45, .22); color: #fff; font-size: 13px; line-height: 1.4; cursor: pointer; }
.ipm-accept input { margin-top: 2px; accent-color: var(--ipro-yellow); }
.ipm-app .ipm-quote-link { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: rgba(244, 241, 234, .85); text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.ipm-app .ipm-quote-link:hover { color: #fff; }

/* ---------- estrecho ---------- */
@container (max-width: 860px) {
  .ipc-app.ipm-app { grid-template-columns: minmax(0, 1fr); }
  .ipm-app .ipm-test { order: 1; }
  .ipm-app .ipc-main { order: 0; }
}
@media (max-width: 600px) {
  .ipm-stage { min-height: 220px; padding: 8px; }
  .ipm-nav { width: 34px; height: 34px; font-size: 20px; }
  .ipm-toolbar { flex-direction: column; align-items: stretch; }
}