/* =========================================================================
   PDF sin Registro — hoja de estilos unica.
   Secciones: 1 tokens · 2 base · 3 layout · 4 header/hero · 5 tool card
              6 grid de paginas · 7 modal editor · 8 anuncios · 9 contenido
              10 footer · 11 responsive · 12 dark mode
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #f5f5f7;
  --bg-soft: #ecedf1;
  --surface: #ffffff;
  --surface-2: #fafafb;
  --line: #e2e3e9;
  --line-strong: #cfd1da;
  --ink: #14141b;
  --ink-soft: #4b4d5a;
  --muted: #71737f;
  --accent: #d93a2b;
  --accent-dark: #b62d20;
  --accent-soft: #fdeeec;
  --ok: #12764f;
  --ok-soft: #e6f5ee;
  --warn: #8a5a06;
  --warn-soft: #fdf3e1;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,17,25,.05), 0 8px 24px -12px rgba(16,17,25,.18);
  --shadow-lg: 0 24px 60px -24px rgba(16,17,25,.35);
  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.06rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 760px; }
.section { padding: 46px 0; }
.section + .section { padding-top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Header + hero ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 58px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  text-decoration: none; font-size: 1.02rem;
}
.brand svg { width: 22px; height: 22px; flex: 0 0 auto; }
.nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .87rem;
  font-weight: 500; padding: 6px 10px; border-radius: 999px;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }

.hero { padding: 30px 0 12px; text-align: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 680px; margin: 0 auto 14px; }
.badges { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 18px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
.badge b { color: var(--ok); font-weight: 700; }

/* ---------- 5. Tool card ---------- */
.tool-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); padding: 18px;
}
.tool-card__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.modes { display: flex; gap: 4px; flex-wrap: wrap; background: var(--bg-soft);
  padding: 4px; border-radius: 999px; max-width: 100%; }
.modes button { white-space: nowrap; }
.modes button {
  border: 0; background: transparent; font: inherit; font-size: .85rem;
  font-weight: 600; color: var(--ink-soft); padding: 7px 14px;
  border-radius: 999px; cursor: pointer;
}
.modes button:hover { color: var(--ink); }
.modes button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow);
}

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 208px; padding: 26px 18px;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone svg { width: 38px; height: 38px; color: var(--accent); }
.dropzone strong { font-size: 1.06rem; }
.dropzone small { color: var(--muted); font-size: .84rem; }

.tool-card[data-state="idle"] .only-work,
.tool-card[data-state="idle"] .only-done,
.tool-card[data-state="idle"] .only-error,
.tool-card[data-state="working"] .only-idle,
.tool-card[data-state="working"] .only-done,
.tool-card[data-state="working"] .only-error,
.tool-card[data-state="ready"] .only-idle,
.tool-card[data-state="ready"] .only-done,
.tool-card[data-state="ready"] .only-error,
.tool-card[data-state="done"] .only-idle,
.tool-card[data-state="done"] .only-work,
.tool-card[data-state="done"] .only-error,
.tool-card[data-state="error"] .only-idle,
.tool-card[data-state="error"] .only-work,
.tool-card[data-state="error"] .only-done { display: none !important; }
.tool-card[data-state="ready"] .only-work { display: block; }

.progress {
  height: 9px; border-radius: 999px; background: var(--bg-soft); overflow: hidden;
  margin: 12px 0 8px;
}
.progress i { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: 999px; transition: width .18s linear; }
.progress-label { font-size: .88rem; color: var(--ink-soft); text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .92rem; line-height: 1;
  padding: 12px 18px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
  text-decoration: none; transition: background .14s, border-color .14s, transform .06s;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  padding: 15px 26px; font-size: 1rem; border-radius: 12px;
}
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn--sm { padding: 7px 11px; font-size: .82rem; border-radius: 9px; }
.btn--block { width: 100%; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px;
}
.toolbar .spacer { flex: 1 1 auto; }
.toolbar .count { font-size: .85rem; color: var(--muted); }

.opts {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 14px;
}
.opt label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.opt select, .opt input[type="text"], .opt input[type="number"] {
  width: 100%; font: inherit; font-size: .9rem; padding: 9px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.opt input[type="range"] { width: 100%; accent-color: var(--accent); }
.opt .hint { font-size: .76rem; color: var(--muted); margin-top: 4px; }

.notice {
  display: flex; gap: 10px; align-items: flex-start; font-size: .87rem;
  padding: 11px 13px; border-radius: var(--radius-sm); margin-bottom: 12px;
  border: 1px solid transparent;
}
.notice--info { background: var(--ok-soft); border-color: #bfe3d3; color: var(--ok); }
.notice--warn { background: var(--warn-soft); border-color: #f0dcb4; color: var(--warn); }
.notice--err  { background: var(--accent-soft); border-color: #f4c7c2; color: var(--accent-dark); }

.privacy-note {
  display: flex; gap: 9px; align-items: center; justify-content: center;
  font-size: .86rem; color: var(--ink-soft); margin: 14px auto 0; text-align: center;
  flex-wrap: wrap;
}
.privacy-note svg { width: 16px; height: 16px; color: var(--ok); flex: 0 0 auto; }

.result {
  text-align: center; padding: 22px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.result h3 { margin-bottom: .3em; }
.result .sizes { font-size: .9rem; color: var(--ink-soft); margin-bottom: 16px; }
.result .sizes b { color: var(--ok); }
.result .btn--primary { min-width: 260px; }
.result .again { display: inline-block; margin-top: 12px; font-size: .87rem; }
#resList { display: flex; flex-direction: column; gap: 7px; align-items: center; margin-top: 4px; }
#resList .btn { min-width: 240px; max-width: 100%; }

.nojs { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--warn-soft); color: var(--warn); font-size: .9rem; }

/* ---------- 6. Grid de paginas ---------- */
.pages {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  max-height: 460px; overflow-y: auto; padding: 4px;
}
.page-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden; cursor: grab;
}
.page-card.is-dragging { opacity: .4; }
.page-card.is-target { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-card__thumb {
  aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); overflow: hidden;
}
.page-card__thumb canvas, .page-card__thumb img { max-height: 100%; width: auto; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.page-card__bar {
  display: flex; align-items: center; gap: 2px; padding: 4px 5px;
  border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted);
}
.page-card__bar .n { font-weight: 700; color: var(--ink-soft); margin-right: auto; }
.page-card__bar button {
  border: 0; background: transparent; cursor: pointer; padding: 4px;
  border-radius: 6px; color: var(--ink-soft); line-height: 0;
}
.page-card__bar button:hover { background: var(--bg-soft); color: var(--accent); }
.page-card__bar svg { width: 15px; height: 15px; }
.page-card__src {
  position: absolute; top: 5px; left: 5px; font-size: .64rem; font-weight: 700;
  background: rgba(20,20,27,.72); color: #fff; padding: 2px 6px; border-radius: 999px;
  max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-card__flag {
  position: absolute; top: 5px; right: 5px; font-size: .64rem; font-weight: 700;
  background: var(--ok); color: #fff; padding: 2px 6px; border-radius: 999px;
}

/* ---------- 7. Modal editor ---------- */
dialog.editor {
  border: 0; border-radius: 18px; padding: 0; width: min(960px, 94vw);
  max-height: 92vh; box-shadow: var(--shadow-lg); background: var(--surface); color: var(--ink);
}
dialog.editor::backdrop { background: rgba(12,12,18,.55); }
.editor__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.editor__head h3 { margin: 0; font-size: .98rem; }
.editor__head .spacer { flex: 1 1 auto; }
.editor__body { padding: 14px 16px; overflow: auto; max-height: calc(92vh - 128px); }
.editor__stageWrap { display: flex; justify-content: center; }
.editor__stage { position: relative; box-shadow: var(--shadow); background: #fff; touch-action: none; }
.editor__stage canvas { display: block; }
.ov {
  position: absolute; cursor: move; user-select: none;
  border: 1px dashed transparent; touch-action: none;
}
.ov:hover, .ov.is-sel { border-color: var(--accent); }
.ov--text { white-space: pre; line-height: 1.2; padding: 1px 2px; }
.ov--sign img { pointer-events: none; width: 100%; height: 100%; }
.ov__del {
  position: absolute; top: -11px; right: -11px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; display: none;
}
.ov__grip {
  position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px;
  background: var(--accent); border: 2px solid #fff; border-radius: 3px;
  cursor: nwse-resize; display: none;
}
.ov.is-sel .ov__del, .ov.is-sel .ov__grip { display: block; }
.editor__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.editor__tools .opt { min-width: 120px; }
.sigpad { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); touch-action: none; width: 100%; height: 170px; }
.editor__foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.editor__foot .spacer { flex: 1 1 auto; }

/* ---------- 8. Anuncios (huecos vacios, sin scripts) ---------- */
/* Huecos de publicidad. Reservan su altura pero no se ven: un recuadro
   discontinuo con la palabra ANUNCIO hace que la web parezca sin terminar.
   Al pegar el codigo de AdSense el anuncio ocupa este espacio sin que la
   maquetacion de un salto. */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  margin: 22px auto; width: 100%; overflow: hidden;
}
.ad-slot--leaderboard { min-height: 90px; max-width: 728px; }
.ad-slot--incontent { min-height: 250px; max-width: 336px; }
@media (max-width: 520px) {
  .ad-slot--leaderboard { min-height: 100px; max-width: 320px; }
  .ad-slot--incontent { min-height: 250px; max-width: 300px; }
}

/* ---------- 9. Contenido ---------- */
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 800; font-size: .9rem; margin-bottom: 10px;
}
.step h3 { margin-bottom: .35em; }
.step p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.step--privacy { border-color: var(--ok); background: var(--ok-soft); }
.step--privacy .num { background: #fff; color: var(--ok); }
.step--privacy p { color: var(--ok); }

.cases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.case {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.case svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 8px; }
.case p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.prose { font-size: 1rem; color: var(--ink-soft); }
.prose h2, .prose h3 { color: var(--ink); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .4em; }
/* Las frases en negrita del texto explicativo deben destacar sobre el gris
   del parrafo, no confundirse con el. */
.prose strong { color: var(--ink); font-weight: 600; }

/* Nombres de archivo y rangos dentro del texto. Sin esta regla salen con la
   monoespaciada por defecto del navegador, que rompe la tipografia de la
   pagina. Los colores vienen de los tokens, asi que funciona en claro y en
   oscuro sin duplicar nada. */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: .87em;
  padding: .13em .45em;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  white-space: nowrap;
}

.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0 16px; margin-bottom: 9px;
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  display: flex; gap: 10px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--accent); font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: 14px; color: var(--ink-soft); font-size: .94rem; }
.faq details > div p:last-child { margin-bottom: 0; }

.tools-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tool-link {
  display: block; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: var(--ink);
}
.tool-link:hover { border-color: var(--accent); color: var(--ink); }
.tool-link b { display: block; font-size: .96rem; margin-bottom: 3px; }
.tool-link span { font-size: .84rem; color: var(--muted); }

/* ---------- 10. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 40px;
  font-size: .86rem; color: var(--muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .creds { flex-basis: 100%; font-size: .78rem; color: var(--muted); }

/* ---------- 11. Responsive ---------- */
@media (max-width: 640px) {
  .section { padding: 34px 0; }
  .tool-card { padding: 13px; border-radius: 16px; }
  .pages { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: 400px; }
  .result .btn--primary { min-width: 0; width: 100%; }
  /* Siete modos no caben en una fila de movil: una sola linea que se desliza,
     para no empujar la herramienta fuera de la primera pantalla. */
  .modes {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .modes::-webkit-scrollbar { display: none; }
  .modes button { flex: 0 0 auto; padding: 8px 11px; font-size: .8rem; }

  /* La herramienta tiene que verse sin hacer scroll en un movil de 375x812:
     cabecera de una sola linea y hero comprimido. */
  .site-header .wrap { min-height: 50px; flex-wrap: nowrap; gap: 10px; }
  .brand { font-size: .95rem; flex: 0 0 auto; }
  .nav {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 5px 8px; font-size: .8rem; }

  .hero { padding: 14px 0 6px; }
  .hero h1 { font-size: 1.5rem; margin-bottom: .3em; }
  .hero .lede { font-size: .93rem; line-height: 1.5; margin-bottom: 10px; }
  .badges { gap: 5px; margin-bottom: 12px; }
  .badge { font-size: .71rem; padding: 4px 9px; }
  .dropzone { min-height: 150px; padding: 18px 14px; gap: 7px; }
  .dropzone svg { width: 30px; height: 30px; }
  .dropzone strong { font-size: 1rem; }
}

/* ---------- 12. Modo oscuro ----------
   Tres estados: sin marca (sigue al sistema), data-theme="dark" y
   data-theme="light". Solo se redefinen tokens; los componentes siempre
   leen de los tokens. El bloque :root claro de arriba es la base completa. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f14;
    --bg-soft: #1b1b23;
    --surface: #16161d;
    --surface-2: #1b1b23;
    --line: #292933;
    --line-strong: #3a3a47;
    --ink: #f1f1f5;
    --ink-soft: #b9bac6;
    --muted: #85879a;
    --accent: #ff6a58;
    --accent-dark: #ff8674;
    --accent-soft: #2a1714;
    --ok: #56d3a0;
    --ok-soft: #10241d;
    --warn: #f0c274;
    --warn-soft: #241d10;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
  :root:not([data-theme="light"]) .page-card__thumb canvas,
  :root:not([data-theme="light"]) .page-card__thumb img { box-shadow: 0 1px 6px rgba(0,0,0,.5); }
}
:root[data-theme="dark"] {
    --bg: #0f0f14;
    --bg-soft: #1b1b23;
    --surface: #16161d;
    --surface-2: #1b1b23;
    --line: #292933;
    --line-strong: #3a3a47;
    --ink: #f1f1f5;
    --ink-soft: #b9bac6;
    --muted: #85879a;
    --accent: #ff6a58;
    --accent-dark: #ff8674;
    --accent-soft: #2a1714;
    --ok: #56d3a0;
    --ok-soft: #10241d;
    --warn: #f0c274;
    --warn-soft: #241d10;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .page-card__thumb canvas,
:root[data-theme="dark"] .page-card__thumb img { box-shadow: 0 1px 6px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}