*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

:root{
  --font-body:'Inter',system-ui,-apple-system,Roboto,sans-serif;
  --bg:#f4f6fa;
  --surface:#ffffff;
  --surface-alt:#eef1f7;
  --border:#dde2ec;
  --text:#1c2230;
  --text-dim:#5c6579;
  --primary:#3453d1;
  --primary-hover:#2b44ae;
  --primary-light:#eaedfc;
  --accent:#17a673;
  --accent-light:#e4f7ef;
  --error:#d8392c;
  --error-light:#fdecea;
  --radius:12px;
  --shadow:0 1px 3px rgba(20,25,40,.06), 0 1px 2px rgba(20,25,40,.08);
}

html,body{height:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
}

a{color:inherit;text-decoration:none}

/* ---------- HEADER / NAV ---------- */
header.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;
}
.header-inner{
  max-width:1080px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--text)}
.brand-badge{
  width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;
}
nav.tabs{display:flex;gap:6px;background:var(--surface-alt);padding:4px;border-radius:10px}
nav.tabs a{
  padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text-dim);
  transition:background .15s, color .15s;
}
nav.tabs a:hover{color:var(--text)}
nav.tabs a.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}

/* ---------- LAYOUT ---------- */
main.page{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.page-intro{margin-bottom:22px}
.page-intro h1{font-size:23px;font-weight:800;margin-bottom:6px}
.page-intro p{color:var(--text-dim);font-size:14.5px;max-width:640px}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:20px;
}
.card h2{font-size:15px;font-weight:700;margin-bottom:4px}
.card .card-sub{font-size:13px;color:var(--text-dim);margin-bottom:14px}

/* ---------- DROPZONE ---------- */
.dropzone{
  display:block;
  border:2px dashed var(--border);border-radius:var(--radius);
  background:var(--surface-alt);
  padding:36px 20px;text-align:center;cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone.drag-over{border-color:var(--primary);background:var(--primary-light)}
.dropzone .dz-icon{font-size:30px;margin-bottom:8px;color:var(--primary)}
.dropzone p{color:var(--text-dim);font-size:13.5px}
.dropzone strong{color:var(--text)}
.dropzone input[type=file]{display:none}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .15s, border-color .15s, opacity .15s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-alt)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{filter:brightness(.93)}
.btn-ghost{background:transparent}

.actions-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- PREVIEW ---------- */
.preview-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;
}
@media (max-width:640px){.preview-grid{grid-template-columns:1fr}}
.preview-col h3{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-dim);margin-bottom:8px;
}
.preview-box{
  position:relative;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--surface-alt);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.preview-box.checker{
  background-image:
    linear-gradient(45deg,#d7dbe4 25%,transparent 25%),
    linear-gradient(-45deg,#d7dbe4 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#d7dbe4 75%),
    linear-gradient(-45deg,transparent 75%,#d7dbe4 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
  background-color:#eef1f7;
}
.preview-box img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.preview-box .empty-hint{color:var(--text-dim);font-size:12.5px;padding:10px;text-align:center}

/* ---------- LOADING OVERLAY ---------- */
.loading-overlay{
  position:fixed;inset:0;background:rgba(20,25,40,.55);display:none;
  align-items:center;justify-content:center;z-index:300;padding:20px;
}
.loading-overlay.show{display:flex}
.loading-box{
  background:var(--surface);border-radius:14px;padding:26px 28px;max-width:360px;
  text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.spinner{
  width:40px;height:40px;border-radius:50%;
  border:4px solid var(--border);border-top-color:var(--primary);
  animation:spin .8s linear infinite;margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-box p{font-size:13.5px;color:var(--text-dim);margin-top:4px}
.loading-box .loading-title{font-weight:700;color:var(--text);font-size:14.5px;margin-bottom:4px}
.loading-box .loading-elapsed{font-size:12px;color:var(--primary-hover);font-weight:600;margin-top:10px;min-height:14px}

/* ---------- MENSAJES ---------- */
.msg{padding:11px 14px;border-radius:9px;font-size:13px;margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.msg-error{background:var(--error-light);color:var(--error)}
.msg-info{background:var(--primary-light);color:var(--primary-hover)}
.msg-ok{background:var(--accent-light);color:#116a4b}

/* ---------- CONTROLES (vectorizar) ---------- */
.controls-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:4px}
.control-group{display:flex;flex-direction:column;gap:6px;min-width:170px}
.control-group label{font-size:12px;font-weight:700;color:var(--text-dim);display:flex;justify-content:space-between}
.control-group input[type=range]{width:100%}
.control-group select{
  padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  font-size:13px;color:var(--text);
}

.svg-preview-box{
  border:1px solid var(--border);border-radius:10px;background:#fff;
  padding:14px;min-height:260px;display:flex;align-items:center;justify-content:center;
  overflow:auto;
}
.svg-preview-box svg{max-width:100%;max-height:420px}

footer.site-footer{
  max-width:1080px;margin:0 auto;padding:10px 20px 40px;color:var(--text-dim);font-size:12px;
}