/* Estilos compartidos por las páginas de herramientas sueltas (Combinar,
   Comprimir): reutilizan las variables y componentes de styles.css/home.css,
   esto solo añade lo específico de estas páginas de una sola tarea. */

.tool-hero{ padding-bottom:32px; }
.tool-section{ padding-top:0; max-width:640px; margin:0 auto; }
.tool-section-wide{ max-width:960px; }

.tool-dropzone{ width:100%; margin:0 0 20px; }

.tool-filelist{
  display:flex; flex-direction:column; gap:8px; margin:0 0 20px;
}
.tool-file{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px;
}
.tool-file .tf-icon{ flex:0 0 auto; color:var(--ink-soft); }
.tool-file .tf-icon svg{ width:18px; height:18px; display:block; }
.tool-file .tf-name{ flex:1 1 auto; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tool-file .tf-size{ flex:0 0 auto; font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.tool-file .tf-actions{ flex:0 0 auto; display:flex; gap:2px; }
.tool-file .tf-actions button{
  width:26px; height:26px; border:none; border-radius:5px; background:transparent;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.tool-file .tf-actions button:hover{ background:var(--panel); color:var(--ink); }
.tool-file .tf-actions button:disabled{ opacity:.3; cursor:not-allowed; }
.tool-file .tf-actions button svg{ width:15px; height:15px; }

.tool-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.tool-actions .btn-primary{ flex:1 1 auto; }

.tool-note{ margin-top:16px; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.tool-note strong{ color:var(--ink); }

.tool-share:empty{ display:none; }
.tool-share{ margin-top:12px; }

.tool-progress{ position:fixed; }

.related-tools{
  max-width:640px; margin:8px auto 0; padding:20px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; justify-content:center;
  font-size:13px;
}
.related-tools span{ color:var(--ink-soft); font-weight:600; }
.related-tools a{ color:var(--ink-soft); text-decoration:none; }
.related-tools a:hover{ color:var(--accent); text-decoration:underline; }

/* ---------- Organizar y dividir PDF ---------- */
.organize-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px;
  margin:0 0 20px;
}
.organize-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:8px; text-align:center;
}
.oi-thumb{
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  min-height:110px; margin:0 0 6px;
}
.oi-thumb img{
  max-width:100%; max-height:150px; display:block; border:1px solid var(--line);
  background:#fff; transition:transform .15s ease;
}
.oi-num{ font-size:12px; font-weight:600; color:var(--ink-soft); margin:0 0 8px; }
.oi-actions{ display:flex; gap:4px; justify-content:center; }
.oi-actions button{
  width:28px; height:28px; border:1px solid var(--line); border-radius:5px; background:transparent;
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.oi-actions button:hover:not(:disabled){ background:var(--panel); color:var(--ink); border-color:var(--accent); }
.oi-actions button:disabled{ opacity:.3; cursor:not-allowed; }
.oi-actions button svg{ width:14px; height:14px; }

/* ---------- Formulario de marca de agua / numerar páginas ---------- */
.wm-form{ display:flex; flex-direction:column; gap:14px; margin:0 0 20px; }
.wm-row{ display:flex; gap:14px; flex-wrap:wrap; }
.wm-row .wm-field{ flex:1 1 140px; }
.wm-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-soft); font-weight:500; }
.wm-field input[type="text"], .wm-field input[type="number"], .wm-field select{
  font: inherit; font-size:14px; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
  padding:8px 10px;
}
.wm-field input[type="color"]{
  width:100%; height:36px; border:1px solid var(--line); border-radius:6px; padding:2px;
  background:var(--panel-2); cursor:pointer;
}
.wm-field input[type="range"]{ width:100%; }

/* ---------- Opciones de calidad (Comprimir) ---------- */
.quality-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 20px; }
.quality-opt{
  border:1.5px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center;
  cursor:pointer; background:var(--panel-2);
}
.quality-opt.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.quality-opt h3{ font-size:13.5px; margin:0 0 4px; color:var(--ink); }
.quality-opt p{ font-size:11.5px; margin:0; color:var(--ink-soft); line-height:1.4; }

.size-compare{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:14px; color:var(--ink); margin:0 0 18px;
}
.size-compare .arrow{ color:var(--ink-soft); }
.size-compare .after{ color:var(--focus); font-weight:600; }
.size-compare .pct{ font-size:12px; color:var(--ink-soft); }

@media (max-width: 760px){
  .quality-grid{ grid-template-columns:1fr; }
}

/* ---------- Cuadrícula de páginas (PDF a JPG) ---------- */
.pagejpg-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:14px;
  margin:0 0 20px;
}
.pagejpg-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:8px; text-align:center;
}
.pagejpg-item img{
  width:100%; display:block; border:1px solid var(--line); border-radius:4px; margin:0 0 8px;
  background:#fff;
}
.pagejpg-item .num{ font-size:11px; color:var(--ink-soft); margin:0 0 6px; }
.pagejpg-item a{
  display:block; font-size:11.5px; font-weight:600; color:var(--focus); text-decoration:none;
  border:1px solid var(--line); border-radius:5px; padding:5px 0;
}
.pagejpg-item a:hover{ border-color:var(--focus); }
.pagejpg-item .btn-share{
  display:flex; justify-content:center; width:100%; margin-top:6px;
  font-size:11.5px; padding:5px 0;
}