:root{
  --bg:#f6f7f9;
  --card:#fff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.06);

  --danger:#b91c1c;
  --dangerBorder:#fecaca;
  --dangerBg:#fef2f2;

  --padGrid: 6mm;
  --gapGrid: 6mm;
  --padFull: 10mm;

  --focus: rgba(59,130,246,.18);
}

*{box-sizing:border-box}
html, body{height:100%}
body{
  font-family:system-ui,Segoe UI,Roboto,Arial;
  margin:20px;
  background:var(--bg);
  color:var(--text);
  height:100vh;
  overflow:hidden;
}
h2{margin:0 0 14px;font-size:18px}

.wrap{
  display:grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap:16px;
  align-items:stretch;
  height: calc(100vh - 20px - 20px - 32px);
  min-height: 520px;
}
@media (max-width: 980px){
  body{overflow:auto;height:auto;}
  .wrap{grid-template-columns:1fr;height:auto;min-height:auto;}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:0;
}

/* ✅ panel izquierdo */
#leftCard{display:flex;flex-direction:column;height:100%;min-height:0}
#listView, #formView{display:flex;flex-direction:column;flex:1;min-height:0}
.leftScrollArea{flex:1;min-height:0;overflow:auto;padding-right:4px}

/* ✅ panel derecho (preview) */
#paperPreviewWrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow:auto;
  height:100%;
  min-height:0;
  background:transparent;
}

.cardHeader{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px
}
.cardHeader h3{margin:0;font-size:14px}
.subtle{font-size:12px;color:var(--muted)}

/* ===== Botones ===== */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:1000;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, opacity .15s ease;
  user-select:none;
  background:#fff;
}
button:active{ transform: translateY(1px); }
button:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus); }
button:disabled{opacity:.55;cursor:not-allowed;transform:none}

.btnRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btnPrimary{ background:#2563eb; color:#fff; }
.btnPrimary:hover{ background:#1d4ed8; }

.btnSuccess{ background:#16a34a; color:#fff; }
.btnSuccess:hover{ background:#15803d; }

.btnNeutral{ background:#eef2f7; color:#0f172a; border-color:#dbe3ee; }
.btnNeutral:hover{ background:#e5e7eb; }

/* ✅ Icon buttons */
.btnIcon{
  width:40px;height:40px;padding:0;border-radius:12px;
  background:#ffffff;border:1px solid #e5e7eb;color:#0f172a;
}
.btnIcon:hover{background:#f8fafc;border-color:#dbe3ee}
.btnIcon:focus-visible{ box-shadow:0 0 0 4px rgba(148,163,184,.22); }
.btnIcon.danger{ color:#b91c1c; background:#fff; border-color:#fee2e2; }
.btnIcon.danger:hover{ background:#fef2f2; border-color:#fecaca; }
.btnIcon.warning{ color:#92400e; background:#fff; border-color:#fde68a; }
.btnIcon.warning:hover{ background:#fffbeb; border-color:#fcd34d; }
.btnIcon.success{ color:#166534; background:#fff; border-color:#bbf7d0; }
.btnIcon.success:hover{ background:#f0fdf4; border-color:#86efac; }
.btnIcon.primary{ color:#1d4ed8; background:#fff; border-color:#bfdbfe; }
.btnIcon.primary:hover{ background:#eff6ff; border-color:#93c5fd; }

.btnIcon svg{width:18px;height:18px;display:block}

/* ✅ spinner */
.spin{
  width:18px;height:18px;border-radius:999px;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .8s linear infinite;
  display:block;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ===== Form ===== */
.form{display:grid;grid-template-columns: 1fr 1fr;gap:12px 10px;}
.field{min-width:0}
.span2{grid-column:1 / -1}
label{display:block;font-size:12px;color:#374151;margin:0 0 6px}

input,select{
  width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;
  font-size:14px;background:#fff;outline:none;
}
input:focus,select:focus{border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15)}
select:invalid{color:#9ca3af}
option{color:#111827}
#fNombre{ text-transform: uppercase; }

.fieldError{
  display:none;margin-top:6px;padding:8px 10px;border-radius:12px;
  border:1px solid var(--dangerBorder);background:var(--dangerBg);color:var(--danger);
  font-size:12px;line-height:1.35;
}
.fieldError.show{display:block}
.isInvalid{border-color:#fca5a5 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12) !important;}

.help{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.35}

.toggleRow{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;
}
.toggleRow input{width:auto;padding:0;margin:0}
.toggleRow span{font-size:13px;color:#0f172a;font-weight:1000}
.toggleRow small{display:block;font-size:12px;color:#64748b;font-weight:600}

/* ===== Lista ===== */
.listEmpty{
  border:1px dashed #cbd5e1;border-radius:14px;background:#fafafa;padding:14px;
  color:#334155;font-size:13px;line-height:1.4;
}
.items{display:flex;flex-direction:column;gap:10px;overflow:auto;padding-right:2px}

.item{
  border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;background:#fff;
  transition: border-color .12s ease, box-shadow .12s ease, transform .05s ease;
  cursor:pointer;
  --pairColor:#93c5fd;
  --pairGlow: rgba(37,99,235,.12);
  --pairGlowStrong: rgba(37,99,235,.18);
}
.item:hover, .item.activeHover{
  border-color: var(--pairColor);
  box-shadow:0 10px 24px var(--pairGlow);
}
.item.selected{
  border-color: var(--pairColor);
  box-shadow:0 12px 28px var(--pairGlowStrong);
}
.item:active{ transform: translateY(1px); }

.itemHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.itemTitleRow{display:flex;align-items:center;gap:10px;min-width:0;flex:1}

.pairDot{
  width:10px;height:10px;border-radius:999px;background:var(--pairColor);
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
  flex:0 0 auto;
}
.itemName{
  font-weight:1000;font-size:13px;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;
}
.itemActions{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}

.itemDetails{
  display:none;margin-top:10px;padding-top:10px;border-top:1px solid #eef2f7;
  color:#475569;font-size:12px;line-height:1.45;
}
.item.expanded .itemDetails{ display:block; }

.metaGrid{display:grid;grid-template-columns: 1fr 1fr;gap:6px 10px}
.metaGrid .span2{grid-column:1/-1}
.metaPill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  border:1px solid #e5e7eb;background:#f8fafc;color:#0f172a;font-weight:900;font-size:11px;margin-top:10px;
}
.miniHint{font-size:11px;color:#64748b;margin-top:8px}

/* ===== Preview ===== */
#paperPreview{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  padding:0;
  margin:0;
}

.emptyPreview{
  width:100%;border:1px dashed #cbd5e1;border-radius:16px;background:#fafafa;
  padding:18px;max-width:760px;text-align:center;color:#334155;
}
.emptyPreview h4{margin:0 0 6px;font-size:14px}
.emptyPreview p{margin:0;font-size:12px;color:#64748b;line-height:1.4}

.page-shell{
  position:relative;
  width: calc(215.9mm * var(--previewScale, 0.58));
  height: calc(279.4mm * var(--previewScale, 0.58));
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  overflow:hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
  --pairColor:#93c5fd;
  --pairGlowStrong: rgba(37,99,235,.18);
}
.page-shell.hlpage{
  border-color: var(--pairColor);
  box-shadow:0 12px 28px var(--pairGlowStrong);
}
.pageLabel{
  position:absolute;top:10px;right:10px;
  font-size:11px;font-weight:1000;padding:5px 10px;border-radius:999px;
  background:rgba(15,23,42,.86);color:#fff;pointer-events:none;letter-spacing:.3px;
}

.page-inner{
  width:215.9mm;height:279.4mm;
  transform: scale(var(--previewScale, 0.58));
  transform-origin: top left;
}

.paper-page{
  width:215.9mm;height:279.4mm;
  padding: var(--pad, var(--padGrid));
  display:grid;
  gap: var(--gap, var(--gapGrid));
  background:#fff;
}
.paper-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.paper-full{ --pad: var(--padFull); --gap: 0mm; grid-template-columns: 1fr; grid-template-rows: 1fr; }

.slot{
  position:relative;display:flex;justify-content:center;align-items:center;
  overflow:hidden;border-radius:10px;cursor:pointer;
  --pairColor:#93c5fd;
  --pairGlowStrong: rgba(37,99,235,.18);
  background:#fff;
}
.slot img{width:100%;height:100%;object-fit:contain;display:block}

.paper-full .slot{ padding: 2mm; }

.pairMark{
  position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:999px;
  background: var(--pairColor);
  box-shadow:0 0 0 3px rgba(15,23,42,.06);
  pointer-events:none;
}

.slot.draft{
  outline:3px dashed #2563eb;outline-offset:-3px;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.draftTag{
  position:absolute;top:8px;left:8px;font-size:11px;font-weight:1000;
  padding:4px 8px;border-radius:999px;background:rgba(37,99,235,.92);color:#fff;pointer-events:none;
}

.slot.hl{
  outline:4px solid var(--pairColor);
  outline-offset:-4px;
  box-shadow:0 0 0 4px var(--pairGlowStrong);
}
.hlTag{
  position:absolute;bottom:8px;right:8px;font-size:11px;font-weight:1000;
  padding:4px 8px;border-radius:999px;background:var(--pairColor);color:#fff;pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

#workCanvas{display:none}
#__svgHostHidden{position:absolute;left:-99999px;top:-99999px}

/* ===== Context menu ===== */
.ctxMenu{
  position:fixed;z-index:99999;min-width:220px;background:#fff;border:1px solid #e5e7eb;
  border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.16);
  padding:8px;display:none;
}
.ctxTop{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;
  background:#f8fafc;border:1px solid #eef2f7;margin-bottom:8px;
}
.ctxDot{width:10px;height:10px;border-radius:999px;background:var(--pairColor,#93c5fd);flex:0 0 auto}
.ctxTitle{font-weight:1000;font-size:12px;color:#0f172a;line-height:1.2;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxBtns{display:flex;flex-direction:column;gap:8px}
.ctxBtns button{width:100%}
.ctxHint{font-size:11px;color:#64748b;margin-top:6px;padding:0 4px}

/* ===== MODAL ===== */
.modalOverlay{
  position:fixed;inset:0;z-index:999999;
  background:rgba(15,23,42,.55);
  display:none;align-items:center;justify-content:center;
  padding:18px;
}
.modal{
  width:min(720px, 100%);
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.modalHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px;border-bottom:1px solid #eef2f7;background:#f8fafc;
}
.modalHead h4{margin:0;font-size:14px}
.modalBody{padding:14px 14px;max-height:min(62vh, 520px);overflow:auto}
.modalActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:14px;border-top:1px solid #eef2f7;background:#fff}
.modalText{font-size:13px;color:#0f172a;line-height:1.45}
.errList{
  margin:12px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px;
}
.errList li{
  border:1px solid #fee2e2;background:#fef2f2;color:#991b1b;
  border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.35;
}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;border:1px solid #e5e7eb;
  background:#f8fafc;font-size:11px;font-weight:900;color:#0f172a;
}

/* ===== IMPRESIÓN ===== */
@media print{
  html, body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }
  body{
    overflow:visible !important;
    height:auto !important;
  }

  body > :not(#printRoot){
    display:none !important;
  }

  #printRoot{
    display:block !important;
    position:static !important;
    width:215.9mm;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }

  *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .print-page{
    width:215.9mm !important;
    height:279.4mm !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;

    page-break-after: always;
    break-after: page;

    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-page:last-child{
    page-break-after:auto;
    break-after:auto;
  }

  .paper-page{ background:#fff !important; }
  .slot{ background:#fff !important; border-radius:0 !important; cursor:default !important; }

  @page{ size: letter portrait; margin:0; }
}