*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--cx-bg,#f0f2f5);color:#1a1a1a;font-size:14px;}
.topbar{background:var(--cx-primary,#1B6EC2);color:#fff;padding:0 20px;height:48px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.topbar-left{display:flex;align-items:center;gap:10px;}
.topbar-left img{height:30px;}
.topbar-title{font-weight:700;font-size:15px;}
.topbar-badge{font-size:11px;background:rgba(255,255,255,.2);padding:3px 12px;border-radius:20px;}
.layout{display:grid;grid-template-columns:1fr 390px;gap:14px;max-width:1300px;margin:14px auto;padding:0 14px 60px;}
.panel{background:#fff;border-radius:10px;border:1px solid #dde2ea;margin-bottom:12px;overflow:hidden;}
.ph{background:#f7f9fc;border-bottom:1px solid #dde2ea;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;}
.ph-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#444;}
.pb{padding:14px 16px;}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.r4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
.r5{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:10px;}
.fg{display:flex;flex-direction:column;gap:4px;}
label{font-size:11px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.04em;}
input[type=number],input[type=text],select{padding:7px 9px;border:1px solid #dde2ea;border-radius:6px;font-size:13px;width:100%;font-family:inherit;background:#fff;transition:border .15s;}
input:focus,select:focus{outline:none;border-color:var(--cx-primary,#1B6EC2);box-shadow:0 0 0 2px rgba(27,110,194,.1);}
input[readonly]{background:#f5f7fa;color:#888;}
.divider{height:1px;background:#eef0f4;margin:12px 0;}
.sec-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cx-primary,#1B6EC2);margin:12px 0 8px;display:flex;align-items:center;gap:6px;}
.sec-lbl::after{content:"";flex:1;height:1px;background:var(--cx-primary-bd,#d4e4f7);}

/* Products table */
.ptbl{width:100%;border-collapse:collapse;font-size:12px;}
.ptbl th{padding:6px 7px;background:var(--cx-primary,#1B6EC2);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center;white-space:nowrap;}
.ptbl th:first-child{text-align:left;padding-left:10px;}
.ptbl td{padding:4px 4px;border-bottom:1px solid var(--cx-bg,#f0f2f5);vertical-align:middle;}
.ptbl tr:nth-child(even) td{background:#f8f9fc;}
.ptbl input{padding:5px 6px;font-size:12px;border-radius:4px;}
.btn-rm{width:22px;height:22px;border:1px solid #fecdd3;border-radius:4px;background:#fff5f5;color:#e53935;cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.btn-rm:hover{background:#fee2e2;}
.btn-add{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px dashed var(--cx-primary,#1B6EC2);border-radius:6px;background:transparent;color:var(--cx-primary,#1B6EC2);font-size:12px;cursor:pointer;font-family:inherit;margin-top:8px;}
.btn-add:hover{background:var(--cx-primary-lt,#EEF4FB);}

/* Uso cards */
.uso-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.uso-card{padding:10px 12px;border:1.5px solid #dde2ea;border-radius:8px;cursor:pointer;transition:all .15s;user-select:none;}
.uso-card.active{border-color:var(--cx-primary,#1B6EC2);background:var(--cx-primary-lt,#EEF4FB);}
.uso-icon{font-size:18px;margin-bottom:3px;}
.uso-title{font-size:12px;font-weight:700;}
.uso-desc{font-size:11px;color:#888;margin-top:2px;line-height:1.4;}

/* Preview panel */
.preview-panel{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;}
.prev-inner{background:#fff;border-radius:10px;border:1px solid #dde2ea;overflow:hidden;}
.prev-hdr{background:var(--cx-primary,#1B6EC2);color:#fff;padding:13px 16px;}
.prev-hdr h2{font-size:13px;font-weight:700;letter-spacing:-.01em;}
.prev-hdr p{font-size:11px;color:rgba(255,255,255,.65);margin-top:2px;}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dde2ea;}
.mbox{background:#fff;padding:10px 12px;}
.mbox.accent{background:var(--cx-accent-lt,#FFF3EE);}
.mlbl{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;}
.mval{font-size:15px;font-weight:700;}
.mval.orange{color:var(--cx-accent,#E8521A);}
.prev-sec{padding:11px 14px;border-bottom:1px solid var(--cx-bg,#f0f2f5);}
.prev-sec-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--cx-primary,#1B6EC2);margin-bottom:7px;}
.prow{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid #f8f9fc;font-size:12px;}
.prow:last-child{border:none;}
.prow-lbl{color:#555;flex:1;}
.prow-val{font-weight:500;font-variant-numeric:tabular-nums;margin-left:8px;}
.prow-val.imp{color:var(--cx-primary,#1B6EC2);font-weight:600;}
.prow-val.dis{color:#ccc;}
.prow.bold .prow-lbl,.prow.bold .prow-val{font-weight:700;color:#1a1a1a;}
.prev-total{background:#1a1a1a;color:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;}
.prev-total-lbl{font-size:12px;font-weight:700;}
.prev-total-val{font-size:16px;font-weight:700;color:var(--cx-accent,#E8521A);}
.tbl-prev{width:100%;border-collapse:collapse;font-size:11px;}
.tbl-prev th{background:var(--cx-primary,#1B6EC2);color:#fff;padding:5px 6px;font-size:10px;text-align:center;}
.tbl-prev th:first-child{text-align:left;}
.tbl-prev td{padding:5px 6px;border-bottom:1px solid var(--cx-bg,#f0f2f5);text-align:right;}
.tbl-prev td:first-child{text-align:left;}
.tbl-prev tr:nth-child(even) td{background:#f8f9fc;}
.tbl-prev tr.tot td{font-weight:700;background:var(--cx-primary-lt,#EEF4FB);}

/* Actions */
.actions{padding:13px 14px;border-top:1px solid var(--cx-bg,#f0f2f5);display:flex;gap:8px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .15s;}
.btn-primary{background:var(--cx-primary,#1B6EC2);color:#fff;}
.btn-primary:hover{background:var(--cx-primary-dk,#155fa0);}
.btn-secondary{background:transparent;border:1px solid #dde2ea;color:#555;}
.btn-secondary:hover{background:#f5f7fa;}
@media(max-width:900px){.layout{grid-template-columns:1fr;}.preview-panel{position:static;max-height:none;}}

/* ── ACCESS GATE ─────────────────────────────── */
#access-gate{
  position:fixed;inset:0;z-index:9999;
  background:var(--cx-bg,#f0f2f5);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s ease;
}
#access-gate.fade-out{opacity:0;pointer-events:none;}
.gate-card{
  background:#fff;border-radius:14px;
  border:1px solid #dde2ea;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
  padding:40px 44px;
  width:100%;max-width:380px;
  text-align:center;
}
.gate-logo{
  height:38px;margin-bottom:24px;
}
.gate-title{
  font-size:17px;font-weight:700;color:#1a1a1a;margin-bottom:6px;
}
.gate-subtitle{
  font-size:12px;color:#888;margin-bottom:28px;letter-spacing:.02em;
}
.gate-input-wrap{position:relative;margin-bottom:14px;}
.gate-input{
  width:100%;padding:11px 14px;
  border:1.5px solid #dde2ea;border-radius:8px;
  font-size:14px;font-family:inherit;
  text-align:center;letter-spacing:.12em;
  background:#f7f9fc;
  transition:border .15s,box-shadow .15s;
}
.gate-input:focus{
  outline:none;border-color:var(--cx-primary,#1B6EC2);
  background:#fff;
  box-shadow:0 0 0 3px rgba(27,110,194,.1);
}
.gate-input.error{
  border-color:#e53935;
  background:#fff5f5;
  animation:shake .35s ease;
}
.gate-btn{
  width:100%;padding:11px;
  background:var(--cx-primary,#1B6EC2);color:#fff;
  border:none;border-radius:8px;
  font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;
  letter-spacing:.04em;text-transform:uppercase;
  transition:background .15s;
}
.gate-btn:hover{background:var(--cx-primary-dk,#155fa0);}
.gate-error{
  font-size:11px;color:#e53935;
  margin-top:10px;min-height:16px;
  font-weight:600;letter-spacing:.02em;
}
.gate-footer{
  font-size:10px;color:#bbb;margin-top:28px;
  letter-spacing:.04em;text-transform:uppercase;
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
</style>
</head>

/* ── Variables HubSpot (inyectadas desde module.html) ── */
body { font-family: var(--cx-font, system-ui,-apple-system,sans-serif); font-size: var(--cx-font-size, 14px); }