/* =============================================================================
   Utiliobox — estilos propios de la caja de PDF.
   Solo usa tokens de utiliobox.css: ningún color ni tamaño escrito a mano.
   Patrón para futuras herramientas: assets/css/tool-<id>.css
   ============================================================================= */

.pdf-tool { overflow: hidden; }
.pdf-head { display: flex; flex-direction: column; gap: var(--s-3); }

.pdf-work { border-top: 1px solid var(--border); }
.pdf-work__head {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-start; justify-content: space-between;
  padding: var(--s-4) var(--s-5) var(--s-3);
}
.pdf-summary { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: 2px; }
.pdf-hints { padding: 0 var(--s-5) var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); }
.pdf-hints b { color: var(--accent); font-weight: var(--fw-medium); }

/* --- Rejilla de miniaturas (vista previa siempre visible) --- */
.pdf-pages {
  list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-5);
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  max-height: 46vh; overflow-y: auto;
  background: var(--surface-alt); border-block: 1px solid var(--border);
  overscroll-behavior: contain;
}
.pg {
  margin: 0; display: flex; flex-direction: column; gap: var(--s-1);
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border); padding: var(--s-2);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.pg:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.pg.is-dragging { opacity: .4; }
.pg.is-over { border-color: var(--accent); box-shadow: var(--sh-focus); }
.pg[data-sel="true"] { border-color: var(--accent); background: var(--accent-soft); }

.pg__thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-sunken); border: 1px solid var(--border);
  display: grid; place-items: center; padding: 0;
}
.pg__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pg__skel { width: 100%; height: 100%; background: var(--surface-sunken); animation: ub-pulse 1.4s var(--ease-out) infinite; }
.pg__check {
  position: absolute; top: var(--s-1); right: var(--s-1);
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-strong); color: transparent;
  display: grid; place-items: center;
}
.pg__check svg { width: 12px; height: 12px; }
.pg[data-sel="true"] .pg__check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pg__bar { display: flex; align-items: center; gap: 1px; }
.pg__n {
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute);
  min-width: 18px; text-align: center; flex: none;
}
.pg__btn {
  flex: 1 1 auto; display: grid; place-items: center;
  height: 26px; border-radius: var(--r-xs); color: var(--ink-mute);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pg__btn svg { width: 13px; height: 13px; }
.pg__btn:hover { background: var(--surface-sunken); color: var(--ink); }
.pg__btn[data-act="del"]:hover { background: var(--danger-soft); color: var(--danger); }

/* --- Panel de operaciones --- */
.pdf-ops { padding: 0 var(--s-5) var(--s-5); }
.pdf-ops .tabs { margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
.pdf-op-help { font-size: var(--fs-sm); color: var(--ink-mute); margin-bottom: var(--s-4); max-width: 68ch; }
.pdf-fields {
  display: grid; gap: var(--s-4); margin-bottom: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
}
.pdf-fields .check { align-self: center; }
.pdf-result { margin-top: var(--s-3); }

@media (max-width: 539px) {
  .pdf-work__head, .pdf-hints, .pdf-ops { padding-inline: var(--s-4); }
  .pdf-pages { padding-inline: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 40vh; }
  .pdf-ops .tabs { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); }
  .pdf-work__head .btn-row { width: 100%; }
  .pg__btn { height: 30px; }
}

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#pdf-tool { --alto-herramienta: 283px; }