/* Lince — estilos propios de las herramientas PDF (unir, dividir, comprimir). */

.pdf-tool .pdf-work { display: grid; gap: 1rem; }
.pdf-tool .doc-info {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
  font-size: .92rem; font-weight: 600; min-width: 0;
}
.pdf-tool .doc-info span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-tool .doc-preview { flex: none; width: 36px; }
.pdf-tool .doc-preview canvas { width: 36px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }

/* Filas de unir: arrastrar para ordenar */
.pdf-row { cursor: grab; }
.pdf-row:active { cursor: grabbing; }
.pdf-row .thumb { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.pdf-row .thumb canvas { object-fit: contain; }
.pdf-row .icon-btn[disabled] { opacity: .35; cursor: default; }
.pdf-row.is-dragging { opacity: .45; }
.pdf-row.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.pdf-row.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.pdf-row .name, .pdf-row .info { display: block; }
@media (max-width: 539px) {
  .pdf-row { grid-template-columns: 44px 1fr; grid-template-areas: "thumb meta" "thumb actions"; row-gap: .4rem; align-items: start; }
  .pdf-row .thumb { grid-area: thumb; width: 44px; height: 56px; }
  .pdf-row .meta { grid-area: meta; }
  .pdf-row .actions { grid-area: actions; }
  .pdf-row .icon-btn { width: 36px; height: 34px; }
  .pdf-tool .segmented { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .pdf-tool .segmented span { justify-content: center; text-align: center; padding: .4rem .3rem; font-size: .84rem; line-height: 1.15; height: 100%; }
}

/* En modo compacto la zona de arrastre ya dice «Elegir otro PDF»: sobra el botón. */
.pdf-tool .dropzone.is-compact .btn { display: none; }

/* Cuadrícula de páginas (dividir) */
.page-grid {
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  max-height: 440px; overflow-y: auto; padding: .6rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2); overscroll-behavior: contain;
}
@media (min-width: 720px) { .page-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.page-thumb {
  position: relative; display: grid; gap: .3rem; justify-items: center; padding: .35rem;
  border: 2px solid transparent; border-radius: 10px; background: transparent; font: inherit; color: inherit;
}
button.page-thumb { cursor: pointer; }
button.page-thumb:hover .page-canvas { box-shadow: 0 0 0 1px var(--line-strong), 0 4px 14px rgba(0, 0, 0, .12); }
.page-canvas {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.414;
  background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); overflow: hidden;
}
.page-thumb.is-drawn .page-canvas { aspect-ratio: auto; }
.page-canvas canvas { width: 100%; height: auto; }
.page-num { font-size: .78rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-thumb.in-range { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.page-thumb.in-range .page-num { color: var(--accent); }
.page-grid.is-selecting .page-thumb.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.page-grid.is-selecting .page-thumb.is-selected::after {
  content: "✓"; position: absolute; top: .45rem; right: .45rem; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700;
}
.page-grid:not(.is-selecting) .page-thumb.is-selected { border-color: transparent; }

.sel-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sel-tools .btn { min-height: 36px; padding: .35rem .75rem; font-size: .88rem; }
.bad-text { color: var(--bad); font-weight: 600; }

/* Niveles de compresión */
.levels { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 540px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level { position: relative; display: block; }
.level input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.level span {
  display: grid; gap: .1rem; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--surface); cursor: pointer; height: 100%;
}
.level strong { font-size: .95rem; }
.level small { color: var(--ink-3); font-size: .8rem; line-height: 1.35; }
.level input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.level input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.pdf-tool .result .btn-row { margin-top: .8rem; }
.pdf-tool .result-warn { margin-top: .7rem; }
.pdf-tool [data-status] { display: grid; gap: .45rem; }
.pdf-tool [data-status][hidden] { display: none; }
.pdf-tool .alert .btn-row { margin-top: .6rem; }
.pdf-tool .error-row { display: flex; gap: .6rem; align-items: start; justify-content: space-between; }