:root{
  --bg: #F6F7F6;
  --bg-inset: #EEF1F0;
  --surface: #FFFFFF;
  --surface-border: #E1E5E3;
  --ink: #1B211F;
  --ink-soft: #545C59;
  --muted: #8A928E;
  --accent: #0E6E62;
  --accent-strong: #0A5A50;
  --accent-soft: #DCEEE9;
  --accent-ink: #F3FBF8;
  --local: #2F7A4A;
  --local-soft: #E1EFE2;
  --danger: #A6452F;
  --danger-soft: #F3DED6;
  --shadow: rgba(20,24,22,0.10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14181A;
    --bg-inset: #0F1213;
    --surface: #1C2322;
    --surface-border: #2D3634;
    --ink: #E9EEEA;
    --ink-soft: #A9B3AD;
    --muted: #6E7873;
    --accent: #57C4AE;
    --accent-strong: #79D4C0;
    --accent-soft: #1C3833;
    --accent-ink: #0B1B18;
    --local: #79C98E;
    --local-soft: #1E3325;
    --danger: #E0A296;
    --danger-soft: #3A2622;
    --shadow: rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #14181A;
  --bg-inset: #0F1213;
  --surface: #1C2322;
  --surface-border: #2D3634;
  --ink: #E9EEEA;
  --ink-soft: #A9B3AD;
  --muted: #6E7873;
  --accent: #57C4AE;
  --accent-strong: #79D4C0;
  --accent-soft: #1C3833;
  --accent-ink: #0B1B18;
  --local: #79C98E;
  --local-soft: #1E3325;
  --danger: #E0A296;
  --danger-soft: #3A2622;
  --shadow: rgba(0,0,0,0.5);
  color-scheme: dark;
}

:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box;}
html, body{ height:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  padding:32px 16px;
  display:flex;
  justify-content:center;
}
.serif{ font-family:var(--font-serif); }
.mono{ font-family:var(--font-mono); }

.app{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.app.wide{ max-width:720px; }

.icon{ width:16px; height:16px; flex:none; display:block; }
.icon.lg{ width:22px; height:22px; }

/* Marca y navegación */
.brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  text-decoration:none;
}
.brand .icon{ color:var(--accent); }
.brand-name{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:-0.01em;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:999px;
}
.badge.local{
  color:var(--local);
  background:var(--local-soft);
}
.badge .icon{ width:13px; height:13px; }

.toolnav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.toolnav a{
  font-family:var(--font-mono);
  font-size:0.74rem;
  text-decoration:none;
  color:var(--ink-soft);
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:999px;
  padding:6px 12px;
}
.toolnav a[aria-current="page"]{
  color:var(--accent-ink);
  background:var(--accent);
  border-color:var(--accent);
}

/* Cabecera de página */
.hero{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero h1{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.7rem;
  line-height:1.2;
  margin:0;
}
.hero .lede{
  margin:0;
  font-size:0.98rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.verify-link{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  margin-top:4px;
  font-size:0.82rem; font-weight:600;
  color:var(--accent-strong);
  text-decoration:none;
}
.verify-link .icon{ width:14px; height:14px; flex:none; }
.verify-link:hover{ text-decoration:underline; }

/* Tarjetas */
.card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:14px;
  box-shadow:0 8px 22px -16px var(--shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Tarjetas de herramienta (home) */
.tool-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.tool-card .tool-icon{
  width:44px;height:44px;
  flex:none;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tool-card .tool-icon svg{ width:22px;height:22px; }
.tool-card .tool-body{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.tool-card .tool-title{
  font-weight:600;
  font-size:1.02rem;
}
.tool-card .tool-desc{
  font-size:0.86rem;
  color:var(--ink-soft);
  line-height:1.45;
}
.tool-card .tool-soon{
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* Dropzone */
.dropzone-wrap{ position:relative; }
.dropzone{
  border:1.5px dashed var(--surface-border);
  border-radius:12px;
  padding-block:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  transition:border-color .15s ease, background-color .15s ease;
}
.dropzone-wrap:hover .dropzone,
.dropzone-wrap.drag .dropzone{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.dropzone .icon{ width:26px;height:26px; color:var(--accent); }
.dropzone .dz-title{ font-size:0.98rem; font-weight:600; }
.dropzone .dz-sub{ font-size:0.82rem; color:var(--muted); }
.file-input-overlay{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer;
}

/* Encabezado de sección */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.section-head .label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.section-head .count{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-soft);
}

/* Lista de archivos */
#file-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.file-row{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:10px;
  padding:9px 10px;
}
.file-row .file-icon{
  width:30px;height:30px; flex:none; border-radius:7px;
  background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
}
.file-row .file-icon svg{ width:15px;height:15px; }
.file-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.file-meta .name{
  font-size:0.9rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-meta .detail{ font-family:var(--font-mono); font-size:0.72rem; color:var(--muted); }
.file-actions{ display:flex; align-items:center; gap:2px; flex:none; }
.icon-btn{
  width:26px;height:26px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover:not(:disabled){ background:var(--surface); border-color:var(--surface-border); color:var(--ink); }
.icon-btn:disabled{ opacity:0.3; cursor:default; }
.icon-btn.danger:hover:not(:disabled){ color:var(--danger); background:var(--danger-soft); border-color:transparent; }
.icon-btn svg{ width:14px;height:14px; }

/* Lista de metadatos detectados */
.meta-list{
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.meta-row{
  display:flex; align-items:baseline; gap:10px;
  background:var(--bg-inset);
  border:1px solid var(--surface-border);
  border-radius:9px;
  padding:8px 10px;
}
.meta-row .meta-key{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted); flex:none; width:150px;
}
.meta-row .meta-val{
  font-size:0.86rem; color:var(--ink);
  overflow-wrap:anywhere;
}

/* Resumen numérico */
.summary-row{
  display:flex; gap:16px; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed var(--surface-border);
}
.stat{ display:flex; flex-direction:column; gap:1px; }
.stat .v{
  font-family:var(--font-mono); font-size:1.05rem;
  font-variant-numeric: tabular-nums; color:var(--ink);
}
.stat .k{ font-size:0.7rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); }

/* Botones */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:0.95rem; font-weight:600;
  color:var(--accent-ink); background:var(--accent);
  border:none; border-radius:10px; padding:13px 18px;
  cursor:pointer; text-decoration:none;
}
.btn-primary:disabled{ opacity:0.4; cursor:default; }
.btn-primary .icon{ color:var(--accent-ink); }
.btn-primary.loading .icon{ animation:spin 0.9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:0.88rem; font-weight:600;
  color:var(--ink); background:var(--bg-inset);
  border:1px solid var(--surface-border); border-radius:10px; padding:10px 14px;
  cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent-strong); }
.btn-secondary[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong);
}

/* Resultado */
.result-card .result-head{ display:flex; align-items:center; gap:9px; }
.result-card .result-head .icon{ color:var(--local); width:20px;height:20px; }
.result-card .result-head .title{ font-weight:600; font-size:1.02rem; }
.preview-frame{
  width:100%; height:340px; border:1px solid var(--surface-border);
  border-radius:10px; background:var(--bg-inset);
}
.note-box{
  display:flex; gap:9px; background:var(--bg-inset);
  border:1px solid var(--surface-border); border-radius:10px;
  padding:11px 12px; font-size:0.83rem; line-height:1.5; color:var(--ink-soft);
}
.note-box .icon{ flex:none; margin-top:1px; color:var(--muted); }

/* Panel de cada modo (dividir) */
.mode-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Modos (segmented control) */
.mode-switch{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.mode-switch .btn-secondary{ flex:1; min-width:0; }

/* Cuadrícula de miniaturas */
.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:10px;
}
.thumb{
  position:relative;
  border:2px solid var(--surface-border);
  border-radius:9px;
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-inset);
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb canvas, .thumb img{
  width:100%; height:100%; object-fit:contain;
  background:#fff;
}
.thumb.selected{ border-color:var(--accent); }
.thumb .check{
  position:absolute; top:5px; right:5px;
  width:18px;height:18px; border-radius:5px;
  background:var(--surface); border:1.5px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
  color:transparent;
}
.thumb.selected .check{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.thumb .check svg{ width:12px;height:12px; }
.thumb .pagenum{
  position:absolute; bottom:4px; left:5px;
  font-family:var(--font-mono); font-size:0.65rem;
  color:var(--ink-soft); background:var(--surface);
  border-radius:4px; padding:1px 5px;
  opacity:0.9;
}
.thumb .cut{
  position:absolute; top:0; right:-7px; bottom:0;
  width:14px; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.thumb .cut button{
  width:16px;height:16px; border-radius:50%;
  border:1.5px solid var(--surface-border); background:var(--surface);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; line-height:1; padding:0;
}
.thumb .cut.active button{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* Variante de miniatura marcada para eliminar (rojo en vez de acento) */
.thumb.marked{ border-color:var(--danger); }
.thumb.marked .check{ background:var(--danger); border-color:var(--danger); color:var(--accent-ink); }

/* Insignia de rotación sobre una miniatura seleccionada */
.thumb .rotate-badge{
  position:absolute; bottom:5px; right:5px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:none; align-items:center; justify-content:center;
}
.thumb.selected .rotate-badge{ display:flex; }
.thumb .rotate-badge svg{ width:13px; height:13px; transition:transform .15s ease; }

/* Miniatura arrastrable (reordenar páginas) */
.thumb.draggable{ cursor:grab; }
.thumb.dragging{ opacity:0.4; cursor:grabbing; }
.thumb.drag-over{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.thumb .order-badge{
  position:absolute; top:5px; left:5px;
  min-width:20px; height:20px; padding:0 5px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.thumb .move-btns{
  position:absolute; bottom:4px; right:4px; z-index:2;
  display:flex; gap:3px;
}
.thumb .move-btns button{
  width:20px; height:20px; border-radius:5px;
  border:1px solid var(--surface-border); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.thumb .move-btns button:disabled{ opacity:0.3; cursor:default; }
.thumb .move-btns svg{ width:12px; height:12px; }

.range-field{
  display:flex; flex-direction:column; gap:6px;
}
.range-field label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.range-field input[type="text"]{
  font-family:var(--font-mono); font-size:0.92rem;
  padding:11px 12px; border-radius:9px;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink);
}
.range-field input[type="text"]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.range-field .hint{ font-size:0.78rem; color:var(--muted); }
.range-field .hint.error{ color:var(--danger); }

/* Campos de formulario genéricos (marca de agua y similares) */
.field-group{
  display:flex; flex-direction:column; gap:16px;
}
.check-row{
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
}
.check-row input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex:none;
}
.check-row .check-label{
  font-weight:600; font-size:0.94rem;
}
.subfields{
  display:flex; flex-direction:column; gap:12px;
  margin-left:8px; padding-left:16px;
  border-left:2px solid var(--surface-border);
}
.field-row{
  display:flex; flex-direction:column; gap:6px;
}
.field-row label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.field-row input[type="text"],
.field-row input[type="number"],
.field-row select{
  font-family:var(--font-sans); font-size:0.92rem;
  padding:11px 12px; border-radius:9px; width:100%;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink);
}
.field-row input[type="text"]:focus,
.field-row input[type="number"]:focus,
.field-row select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.range-row{
  display:flex; align-items:center; gap:10px;
}
.range-row input[type="range"]{
  flex:1; accent-color:var(--accent);
}
.range-row .range-val{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft);
  min-width:38px; text-align:right;
}
.color-row{
  display:flex; align-items:center; gap:10px;
}
.color-row input[type="color"]{
  width:42px; height:38px; border-radius:8px; border:1px solid var(--surface-border);
  padding:2px; background:var(--surface); cursor:pointer;
}
.file-pick-inline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.file-pick-inline .file-name{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft);
}

/* Tarjeta destacada (home) */
.featured-card{
  background:linear-gradient(155deg, var(--accent-soft), var(--surface) 60%);
  border:1.5px solid var(--accent);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 10px 26px -18px var(--shadow);
}
.featured-card .featured-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--accent-strong); background:var(--surface);
  border:1px solid var(--accent); border-radius:999px; padding:5px 11px;
}
.featured-card h2{
  font-family:var(--font-serif); font-weight:600; font-size:1.3rem; margin:0;
}
.featured-card p{ margin:0; font-size:0.92rem; line-height:1.55; color:var(--ink-soft); }
.featured-card .btn-primary{ align-self:flex-start; margin-top:4px; }

.section-label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); margin:4px 2px 0;
}

/* Subtítulo dentro de una tarjeta, para agrupar herramientas por bloques */
.subsection-label{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--accent-strong); margin:0 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--surface-border);
}
.subsection-label:not(:first-child){ margin-top:22px; }

/* Editor de lienzo (proteger documento) */
.editor-canvas-wrap{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--surface-border); background:var(--bg-inset);
  touch-action:none; line-height:0;
}
.editor-canvas-wrap canvas{ display:block; width:100%; height:auto; }
.editor-canvas-wrap.redact-mode canvas{ cursor:crosshair; }

.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--font-sans); font-size:0.78rem; font-weight:500;
  padding:7px 12px; border-radius:999px;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink-soft);
  cursor:pointer;
}
.chip:hover{ border-color:var(--accent); color:var(--accent-strong); }
.chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }

.redact-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.redact-toolbar .count{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft);
  margin-left:auto;
}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.toggle-row .check-label{ font-weight:600; font-size:0.94rem; }

/* Texto legal (privacidad, créditos) */
.legal{
  display:flex; flex-direction:column; gap:14px;
  font-size:0.92rem; line-height:1.65; color:var(--ink-soft);
}
.legal h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:1.05rem; color:var(--ink); margin:16px 0 0;
}
.legal h2:first-child{ margin-top:0; }
.legal ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--accent-strong); }

/* Pasos "cómo funciona" */
.how{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.how-step{ display:flex; flex-direction:column; gap:6px; }
.how-step .n{ font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); }
.how-step .t{ font-size:0.87rem; font-weight:600; }
.how-step .d{ font-size:0.79rem; line-height:1.45; color:var(--ink-soft); }
@media (max-width: 480px){ .how{ grid-template-columns:1fr; } }

footer.note{
  display:flex; flex-direction:column; gap:6px;
  font-size:0.78rem; line-height:1.55; color:var(--muted);
  padding-top:6px; border-top:1px solid var(--surface-border);
}
footer.note strong{ color:var(--ink-soft); }
footer.note .legal-links{ font-size:0.74rem; }
footer.note .legal-links a{ color:var(--muted); }
footer.note .legal-links a:hover{ color:var(--ink-soft); }

[hidden]{ display:none !important; }

@media (prefers-reduced-motion: no-preference){
  .card{ animation:rise .3s ease; }
  @keyframes rise{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }
}

/* Rellenar y firmar: campos de formulario detectados */
.form-fields-list{
  list-style:none; margin:0 0 4px; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.form-field-row{
  display:flex; flex-direction:column; gap:6px;
  background:var(--bg-inset); border:1px solid var(--surface-border);
  border-radius:10px; padding:10px 12px;
}
.form-field-row label{
  font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
}
.form-field-row input[type="text"],
.form-field-row textarea,
.form-field-row select{
  font-family:var(--font-sans); font-size:0.92rem;
  padding:9px 10px; border-radius:8px; width:100%;
  border:1px solid var(--surface-border); background:var(--surface); color:var(--ink);
  resize:vertical;
}
.form-field-row input[type="text"]:focus,
.form-field-row textarea:focus,
.form-field-row select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-field-row .check-row{ font-size:0.9rem; }

/* Rellenar y firmar: navegación de páginas y barra de herramientas */
.page-nav{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding-bottom:2px;
}
.page-nav .page-label{
  font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft);
  min-width:104px; text-align:center;
}
.editor-toolbar{
  display:flex; gap:8px; flex-wrap:wrap;
}
.editor-toolbar .btn-secondary{ flex:1; min-width:130px; }

/* Lienzo con superposición de campos arrastrables */
.fill-canvas-wrap{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--surface-border); background:var(--bg-inset);
}
.fill-canvas-wrap canvas{ display:block; width:100%; height:auto; }
.fill-overlay{
  position:absolute; inset:0; pointer-events:none;
}
.field-box{
  position:absolute;
  pointer-events:auto;
  border:1.5px dashed var(--accent);
  background:rgba(14,110,98,0.06);
  border-radius:6px;
  padding:2px;
  min-width:40px;
}
.field-box.image-box{ padding:0; border-style:solid; }
.field-box textarea{
  display:block; width:180px; min-width:80px; min-height:30px;
  border:none; background:transparent; resize:both; overflow:auto;
  font-family:var(--font-sans); color:#111; padding:2px 4px;
  line-height:1.25;
}
.field-box textarea:focus{ outline:none; }
.field-box img{ display:block; width:100%; height:100%; object-fit:fill; }
.box-handle{
  position:absolute; top:-11px; left:-11px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
}
.box-handle svg{ width:12px; height:12px; }
.box-delete{
  position:absolute; top:-11px; right:-11px;
  width:22px; height:22px; border-radius:50%;
  background:var(--danger); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.box-delete svg{ width:11px; height:11px; }
.box-resize{
  position:absolute; bottom:-9px; right:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent);
  cursor:nwse-resize; touch-action:none;
}
.box-fontctrl{
  position:absolute; bottom:-11px; left:-11px;
  display:flex; gap:2px;
}
.box-fontctrl button{
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--surface-border); background:var(--surface);
  color:var(--ink-soft); font-size:0.75rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}

/* Modal de firma */
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,12,11,0.5);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-box{
  background:var(--surface); border-radius:16px; border:1px solid var(--surface-border);
  max-width:460px; width:100%; max-height:90vh; overflow-y:auto;
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-head h2{ font-size:1.05rem; margin:0; }
.sig-tabs{ display:flex; gap:6px; }
.sig-tab{
  flex:1; font-family:var(--font-sans); font-size:0.82rem; font-weight:600;
  padding:9px 8px; border-radius:9px; text-align:center;
  border:1px solid var(--surface-border); background:var(--bg-inset); color:var(--ink-soft);
  cursor:pointer;
}
.sig-tab[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong); }
.sig-pane{ display:flex; flex-direction:column; gap:10px; }
.sigpad-wrap{
  border:1.5px dashed var(--surface-border); border-radius:10px;
  background:
    linear-gradient(var(--surface-border) 1px, transparent 1px) 0 100% / 100% 1px no-repeat,
    var(--surface);
  touch-action:none; overflow:hidden;
}
.sigpad-wrap canvas{ display:block; width:100%; height:160px; cursor:crosshair; }
.sig-type-preview{
  border:1px solid var(--surface-border); border-radius:10px;
  background:var(--surface); min-height:90px;
  display:flex; align-items:center; justify-content:center;
  padding:10px; overflow:hidden;
}
.sig-type-preview span{ font-size:2.2rem; color:#111; line-height:1.1; word-break:break-word; text-align:center; }
.sig-font-row{ display:flex; gap:8px; flex-wrap:wrap; }
.sig-font-row .chip{ font-size:0.86rem; }
.sig-upload-preview{
  border:1px solid var(--surface-border); border-radius:10px;
  background:var(--bg-inset); min-height:90px;
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.sig-upload-preview img{ max-width:100%; max-height:140px; }
.modal-actions{ display:flex; gap:8px; }
.modal-actions .btn-secondary, .modal-actions .btn-primary{ flex:1; }