@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ════════════════════════════════════════════════════════════════
   KREA 3D · Calculadora — styles.css
   Rediseño estilo Apple/KREA. Conserva 100% de IDs, clases y funciones.
   ════════════════════════════════════════════════════════════════ */

/* ── TOKENS (dark = default) ─────────────────────────────────────── */
:root{
  --bg:#0A0C12; --bg-2:#0E121B;
  --panel:#12161F; --panel-2:#171C28;
  --field:#0C0F17;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#ECEFF5; --text-s:#9AA4B6; --text-t:#646E80;
  --accent:#1B4FD8; --accent2:#5B86F5; --accent-soft:rgba(27,79,216,.18);
  --gold:#5B86F5; --ok:#34D399; --warn:#FBBF24;
  --shadow:0 24px 60px -30px rgba(0,0,0,.7);
  --r:18px; --r-sm:12px;
  --pad:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="light"]{
  --bg:#EFF2F6; --bg-2:#FFFFFF;
  --panel:#FFFFFF; --panel-2:#F6F8FB;
  --field:#FFFFFF;
  --line:#E4E8EE; --line-2:#D3DAE6;
  --text:#0A0C12; --text-s:#5B6677; --text-t:#9AA4B6;
  --accent:#1B4FD8; --accent2:#1B4FD8; --accent-soft:rgba(27,79,216,.10);
  --gold:#1B4FD8;
  --shadow:0 24px 50px -30px rgba(16,30,70,.28);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .4s var(--ease),color .4s var(--ease);
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
ion-icon{pointer-events:none}
.hidden{display:none!important}
.mono{font-family:'Space Mono',monospace}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}

input,select,textarea,button{font-family:inherit}
input,select,textarea{
  width:100%;background:var(--field);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
input::placeholder,textarea::placeholder{color:var(--text-t)}
select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239AA4B6' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
input[type=color]{padding:0;width:42px;height:42px;border-radius:11px;cursor:pointer;border:1px solid var(--line);background:transparent}
textarea{resize:vertical;line-height:1.6}

/* ── EYEBROW / LABELS (signature mono) ───────────────────────────── */
.k-eyebrow{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);
  display:inline-flex;align-items:center;gap:9px}
.k-eyebrow::before{content:"";width:20px;height:2px;background:var(--accent2);border-radius:2px}

/* ════════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════════ */
#login-screen{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#141B2C 0%,#0A0C12 55%,#06080F 100%);
  color:var(--text);
}
.back-to-krea{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-s);font-weight:500;transition:color .25s}
.back-to-krea:hover{color:var(--text)}
.back-to-krea ion-icon{font-size:15px}
.theme-btn-login{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  color:var(--text);cursor:pointer;font-size:18px;transition:background .25s,transform .25s}
.theme-btn-login:hover{background:rgba(255,255,255,.12);transform:rotate(-12deg)}

.login-card{
  position:relative;width:100%;max-width:420px;padding:44px 38px;
  background:linear-gradient(165deg,rgba(23,28,40,.9),rgba(12,15,23,.92));
  border:1px solid var(--line-2);border-radius:26px;
  backdrop-filter:blur(20px);box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.login-card .k-eyebrow{margin-bottom:18px}
#lottie-login{width:130px;height:130px;margin:0 auto -6px}
.login-badge{display:inline-flex;align-items:center;gap:7px;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent2);background:var(--accent-soft);border:1px solid rgba(91,134,245,.25);
  padding:6px 12px;border-radius:100px;margin-bottom:18px}
.login-card h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1}
.login-brand{color:var(--accent2)}
.login-sub{color:var(--text-s);font-size:14px;margin:16px 0 0;line-height:1.7}
.login-divider{display:flex;align-items:center;gap:14px;margin:28px 0 22px;color:var(--text-t);
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--line-2)}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;
  background:#fff;color:#1A1A2E;font-weight:600;font-size:14.5px;padding:13px;border:none;border-radius:14px;
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.btn-google:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn-google.loading{opacity:.7;pointer-events:none}
#login-error{display:none;margin-top:14px;font-size:13px;color:#FF6B6B;
  background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.25);border-radius:10px;padding:10px}
.login-footer{margin-top:22px;font-size:11px;color:var(--text-t);line-height:1.6}

/* ════════════════════════════════════════════════════════════════
   APP
   ════════════════════════════════════════════════════════════════ */
#app-screen{display:none}

.header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:12px var(--pad);
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 75%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.header-back{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-s);font-size:18px;transition:.2s}
.header-back:hover{color:var(--text);border-color:var(--line-2)}
.header-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:19px;box-shadow:0 6px 18px -8px var(--accent)}
.header-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:.02em}
.header-brand span{color:var(--accent2)}
.header-project{display:inline-flex;align-items:center;gap:7px;margin-left:6px;
  font-family:'Space Mono',monospace;font-size:11.5px;color:var(--text-s);
  background:var(--panel-2);border:1px solid var(--line);padding:7px 12px;border-radius:100px;max-width:230px}
.header-project ion-icon{color:var(--accent2);font-size:13px}
.header-project span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-history{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:500;
  padding:9px 14px;border-radius:100px;cursor:pointer;transition:.2s}
.btn-history:hover{border-color:var(--accent);color:var(--accent2)}
.btn-history ion-icon{font-size:16px}
.history-count{background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  min-width:19px;height:19px;padding:0 5px;border-radius:100px;display:grid;place-items:center}
.theme-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);cursor:pointer;font-size:17px;transition:.25s}
.theme-btn:hover{transform:rotate(-12deg);border-color:var(--line-2)}
.user-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 6px 5px 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:100px}
.user-name{font-size:13px;font-weight:500}
.user-av{width:30px;height:30px;border-radius:50%;object-fit:cover}
.user-av-ph{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:13px;font-weight:600}
.btn-logout{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);
  color:var(--text-s);font-size:13px;padding:9px 13px;border-radius:100px;cursor:pointer;transition:.2s}
.btn-logout:hover{color:#FF6B6B;border-color:rgba(255,107,107,.4)}
@media(max-width:720px){
  .header-project,.user-name{display:none}
  .btn-history span:not(.history-count){display:none}
  .btn-logout{padding:9px}
}

/* layout */
.app-body{max-width:1240px;margin:0 auto;padding:30px var(--pad) 80px;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.app-body>div:first-child{display:flex;flex-direction:column;gap:18px;min-width:0}
.result-col{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
@media(max-width:960px){.app-body{grid-template-columns:1fr}.result-col{position:static}}

/* ── PANELS ──────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;transition:border-color .3s}
.panel:hover{border-color:var(--line-2)}
.sec-hdr{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.sec-icon.gold{background:rgba(224,169,46,.14);color:#E0A92E}
.sec-icon.violet{background:rgba(139,124,246,.14);color:#8B7CF6}
.sec-icon.blue{background:rgba(61,107,242,.14);color:#5B86F5}
.sec-icon.green{background:rgba(43,182,115,.14);color:#2BB673}
.sec-icon.amber{background:rgba(240,140,58,.14);color:#F08C3A}
.sec-hdr-text{min-width:0}
.sec-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px}
.sec-sub{font-size:12.5px;color:var(--text-s);margin-top:3px}

/* tooltip */
.tip{position:relative;display:inline-flex}
.tip-icon{width:16px;height:16px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--text-t);font-size:10px;font-weight:700;display:grid;place-items:center;cursor:help}
.tip-box{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  width:230px;background:var(--bg-2);color:var(--text-s);border:1px solid var(--line-2);
  border-radius:10px;padding:11px 13px;font-size:12px;line-height:1.55;font-weight:400;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:20;text-align:left;letter-spacing:0;text-transform:none;font-family:'Inter',sans-serif}
.tip:hover .tip-box{opacity:1;transform:translateX(-50%) translateY(0)}

/* fields */
.field{display:flex;flex-direction:column;gap:7px}
.field-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-lbl label{font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-s);display:flex;align-items:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.row2:last-child{margin-bottom:0}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.param-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:480px){.row2,.row3,.param-grid{grid-template-columns:1fr}}

/* ── TABS ────────────────────────────────────────────────────────── */
.tab-bar{display:flex;gap:6px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:5px;margin-bottom:16px}
.tab{flex:1;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-s);font-size:13px;font-weight:500;
  padding:9px;border-radius:8px;cursor:pointer;transition:.2s}
.tab.active{background:var(--panel);color:var(--text);box-shadow:0 2px 8px -3px rgba(0,0,0,.3)}
[data-theme="light"] .tab.active{box-shadow:0 2px 6px -2px rgba(16,30,70,.12)}

/* info boxes */
.info-box{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  padding:12px 14px;border-radius:11px;margin-bottom:14px}
.info-box ion-icon{font-size:17px;flex-shrink:0;margin-top:1px}
.info-box.info{background:var(--accent-soft);border:1px solid rgba(91,134,245,.2);color:var(--text-s)}
.info-box.info ion-icon{color:var(--accent2)}
.info-box.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);color:var(--text-s)}
.info-box.ok ion-icon{color:var(--ok)}

/* upload zone */
.upload-zone{border:1.5px dashed var(--line-2);border-radius:16px;padding:24px;text-align:center;
  cursor:pointer;transition:.25s;background:var(--panel-2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:var(--accent-soft)}
#lottie-upload{width:84px;height:84px;margin:0 auto}
.upload-zone p{font-size:14px;font-weight:500;margin-top:4px}
.upload-zone .hint{font-size:12px;color:var(--text-t);font-weight:400;margin-top:3px}

/* stl result */
.stl-info{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.stl-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:5px 0;color:var(--text-s)}
.stl-row span:last-child{color:var(--text);font-weight:600;font-family:'Space Mono',monospace}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:5px 11px;border-radius:100px;margin-bottom:6px}
.badge .ti{display:none}
.badge-ok{background:rgba(52,211,153,.14);color:var(--ok)}
.badge-warn{background:rgba(251,191,36,.14);color:var(--warn)}

/* add button */
.add-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent-soft);color:var(--accent2);border:1px solid rgba(91,134,245,.25);
  font-size:13.5px;font-weight:600;padding:12px;border-radius:12px;cursor:pointer;transition:.2s;margin-top:6px}
.add-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.add-btn ion-icon{font-size:17px}

/* ── FILAMENT CARDS ──────────────────────────────────────────────── */
#fil-list{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.fil-card{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:opacity .2s,transform .2s}
.fil-accent{width:5px;flex-shrink:0}
.fil-body{position:relative;flex:1;padding:16px;min-width:0}
.del-btn{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:8px;
  background:transparent;border:1px solid var(--line);color:var(--text-t);cursor:pointer;
  display:grid;place-items:center;font-size:14px;transition:.2s}
.del-btn:hover{color:#FF6B6B;border-color:rgba(255,107,107,.4)}
.fil-hdr{display:flex;gap:10px;align-items:center;margin-bottom:14px;padding-right:32px}
.fil-hdr input[type=text]{flex:1}

/* extras */
#ext-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.ext-row{display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:end;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.icon-del{width:42px;height:42px;border-radius:11px;background:transparent;border:1px solid var(--line);
  color:var(--text-t);cursor:pointer;display:grid;place-items:center;font-size:16px;transition:.2s}
.icon-del:hover{color:#FF6B6B;border-color:rgba(255,107,107,.4)}
@media(max-width:480px){.ext-row{grid-template-columns:1fr auto}}

/* ════════════════════════════════════════════════════════════════
   RESULT COLUMN
   ════════════════════════════════════════════════════════════════ */
.price-hero{
  position:relative;overflow:hidden;border-radius:var(--r);padding:28px 26px;text-align:center;
  background:radial-gradient(120% 120% at 50% 0%,#1B3A8A,#0A0C12 75%);
  border:1px solid rgba(91,134,245,.35);color:#ECEFF5;
  box-shadow:0 20px 50px -24px rgba(27,79,216,.6);
}
.price-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 7px;opacity:.5}
.price-hero .sub{position:relative;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#A8C0FF;display:inline-flex;align-items:center;gap:6px}
.price-hero .sub ion-icon{color:var(--gold);font-size:13px}
.price{position:relative;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:46px;
  letter-spacing:-.03em;line-height:1.05;margin:10px 0 4px}
.per-unit{position:relative;font-size:13px;color:#A8C0FF;font-family:'Space Mono',monospace}
.qty-chip{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12px;font-weight:500;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  padding:6px 13px;border-radius:100px}
.qty-chip ion-icon{font-size:13px}

/* breakdown */
.breakdown-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.breakdown-title{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:14px;margin-bottom:14px}
.breakdown-title ion-icon{color:var(--accent2);font-size:17px}
.brow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.brow:last-child{border-bottom:none}
.bl{display:flex;align-items:center;gap:10px;color:var(--text-s)}
.brow-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex-shrink:0}
.bv{font-family:'Space Mono',monospace;font-weight:700;color:var(--text)}
.brow.total{margin-top:6px;padding-top:13px;border-top:1.5px solid var(--line-2)}
.brow.total .bl{color:var(--text);font-weight:600;font-family:'Space Grotesk',sans-serif}
.brow.total .bv{color:var(--accent2);font-size:15px}

/* margin */
.margin-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.margin-header{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:500;margin-bottom:16px}
.margin-header ion-icon{color:var(--accent2)}
.mbadge{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--accent2);
  background:var(--accent-soft);padding:3px 12px;border-radius:100px}
.margin-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;
  font-size:11px;color:var(--text-t);font-family:'Space Mono',monospace}
.margin-footer strong{color:var(--ok);font-size:13px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:var(--line-2);cursor:pointer;padding:0;border:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg-2);box-shadow:0 3px 10px -2px var(--accent);cursor:pointer;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid var(--bg-2);box-shadow:0 3px 10px -2px var(--accent);cursor:pointer}

/* metrics */
.metrics-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center}
.metric ion-icon{font-size:18px;color:var(--accent2)}
.metric .lbl{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-t);margin:6px 0 4px}
.metric .val{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px}

/* cta */
.cta-row{display:flex;flex-direction:column;gap:10px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;border:none;font-size:14.5px;font-weight:600;
  padding:14px;border-radius:14px;cursor:pointer;transition:.22s var(--ease);
  box-shadow:0 12px 30px -12px var(--accent)}
.btn-primary:hover{background:#2A5CE8;transform:translateY(-2px);box-shadow:0 18px 40px -14px var(--accent)}
.btn-primary ion-icon{font-size:18px}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel);color:var(--text);border:1px solid var(--line-2);font-size:13.5px;font-weight:500;
  padding:12px;border-radius:14px;cursor:pointer;transition:.2s}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent2)}
.btn-secondary ion-icon{font-size:16px}

/* ── TOAST ───────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:200;
  display:flex;align-items:center;gap:9px;background:var(--bg-2);color:var(--text);
  border:1px solid var(--line-2);border-radius:14px;padding:13px 20px;font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow);transition:transform .4s var(--ease)}
.toast.show{transform:translate(-50%,0)}
.toast ion-icon{color:var(--ok);font-size:19px}

/* ════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,8,15,.6);backdrop-filter:blur(8px)}
.modal-overlay.open{display:flex;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:540px;max-height:90vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:22px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7);animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal-hdr{display:flex;align-items:center;gap:13px;padding:22px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal-hdr-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.modal-hdr h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;flex:1}
.modal-close{width:34px;height:34px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text-s);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:.2s}
.modal-close:hover{color:var(--text);border-color:var(--line-2)}
.modal-body{padding:24px}
.modal-sec{margin-bottom:22px}
.modal-sec-title{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-s);margin-bottom:13px}
.modal-sec-title ion-icon{color:var(--accent2);font-size:15px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.btn-cancel{background:transparent;border:1px solid var(--line-2);color:var(--text-s);font-size:13.5px;font-weight:500;
  padding:11px 18px;border-radius:11px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.btn-cancel:hover{color:var(--text);border-color:var(--text-s)}
.btn-ok{background:var(--accent);color:#fff;border:none;font-size:13.5px;font-weight:600;
  padding:11px 20px;border-radius:11px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.btn-ok:hover{background:#2A5CE8}
.btn-ok ion-icon{font-size:16px}

/* logo upload */
.logo-upload{border:1.5px dashed var(--line-2);border-radius:14px;padding:22px;text-align:center;cursor:pointer;
  background:var(--panel-2);transition:.2s}
.logo-upload:hover{border-color:var(--accent)}
.logo-prev{max-width:160px;max-height:80px;object-fit:contain;margin:0 auto;display:block}
.clear-logo{display:none;align-items:center;gap:6px;margin:12px auto 0;background:transparent;
  border:1px solid var(--line);color:var(--text-s);font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.2s}
.clear-logo:hover{color:#FF6B6B;border-color:rgba(255,107,107,.4)}

/* ════════════════════════════════════════════════════════════════
   HISTORY
   ════════════════════════════════════════════════════════════════ */
.history-filter-bar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.history-search{flex:1;min-width:180px}
.history-count-badge{font-family:'Space Mono',monospace;font-size:11px;color:var(--text-s);
  background:var(--panel-2);border:1px solid var(--line);padding:7px 12px;border-radius:100px;white-space:nowrap}
.history-list{display:flex;flex-direction:column;gap:10px}
.history-card{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;cursor:pointer;transition:.2s}
.history-card:hover{border-color:var(--accent);transform:translateX(2px)}
.history-card-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:var(--accent-soft);color:var(--accent2);font-size:19px}
.history-card-body{flex:1;min-width:0}
.history-card-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-card-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:5px;font-size:11.5px;color:var(--text-t);font-family:'Space Mono',monospace}
.history-card-meta span{display:inline-flex;align-items:center;gap:4px}
.history-card-price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--accent2);text-align:right}
.h-qty{display:block;font-size:10.5px;color:var(--text-t);text-align:right;margin-top:2px;font-family:'Space Mono',monospace;font-weight:400}
.history-del{width:34px;height:34px;border-radius:10px;background:transparent;border:1px solid var(--line);
  color:var(--text-t);cursor:pointer;display:grid;place-items:center;font-size:15px;flex-shrink:0;transition:.2s}
.history-del:hover{color:#FF6B6B;border-color:rgba(255,107,107,.4)}
.history-empty{text-align:center;padding:40px 20px}
.history-empty>div[id^="lottie"]{width:120px;height:120px;margin:0 auto 6px}
.history-empty p{font-size:13px;color:var(--text-t);margin-top:4px}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

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

/* ════════════════════════════════════════════════════════════════
   PRINT — documento de cotización (estructura intacta para app.js)
   ════════════════════════════════════════════════════════════════ */
#print-doc{display:none}
@media print{
  body>*:not(#print-doc){display:none!important}
  #print-doc{display:block!important}
  @page{margin:14mm 17mm;size:A4}
  .print-page{font-family:'Inter',-apple-system,'Helvetica Neue',sans-serif;
    color:#080810;font-size:12.5px;line-height:1.6;max-width:760px;margin:0 auto}
  .print-header{display:flex;justify-content:space-between;align-items:flex-start;
    padding-bottom:18px;border-bottom:2px solid #1B4FD8;margin-bottom:22px}
  .print-logo-text{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:#080810;letter-spacing:-.5px}
  .print-logo-text span{color:#1B4FD8}
  .print-co-info{text-align:right;font-size:11.5px;color:#44455a;line-height:1.7}
  .print-co-info strong{font-size:13.5px;color:#080810;display:block}
  .print-title-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
  .print-title{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:#080810;letter-spacing:-.5px}
  .print-proj{font-size:13.5px;color:#1B4FD8;font-weight:600;margin-top:3px}
  .print-meta{text-align:right;font-size:11.5px;color:#44455a;line-height:1.85;
    background:#f2f4f8;border:1px solid #e0e4ee;border-radius:8px;padding:11px 15px}
  .print-meta strong{font-size:14px;color:#080810;font-weight:700}
  .print-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
  .print-party{background:#f7f8fc;border:1px solid #e0e4ee;border-radius:8px;padding:14px;font-size:11.5px;line-height:1.75}
  .print-party-lbl{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:#1B4FD8;margin-bottom:5px}
  .print-party strong{font-size:13.5px;color:#080810;display:block}
  .print-proj-info{background:#f0f3fc;border:1px solid rgba(27,79,216,.18);border-radius:8px;padding:14px;margin-bottom:18px}
  .print-proj-info h3{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:#080810;margin-bottom:11px}
  .print-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
  .print-detail{background:#fff;border:1px solid #e4e8f4;border-radius:6px;padding:9px 11px}
  .dl{font-family:'Space Mono',monospace;font-size:9.5px;color:#9090aa;text-transform:uppercase;letter-spacing:.07em}
  .dv{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#080810;margin-top:2px}
  .print-breakdown{margin-bottom:18px}
  .print-breakdown h3{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:#080810;margin-bottom:11px}
  .print-table{width:100%;border-collapse:collapse;font-size:11.5px}
  .print-table th{background:#eef0f7;color:#44455a;font-size:9.5px;font-family:'Space Mono',monospace;
    text-transform:uppercase;letter-spacing:.07em;padding:8px 11px;text-align:left;border-bottom:1.5px solid #dde2f0}
  .print-table td{padding:8px 11px;border-bottom:1px solid #eef0f7;color:#1a1a2e}
  .print-table tr:last-child td{border-bottom:none}
  .print-table .total-row td{font-weight:700;color:#080810;background:#f2f4f8;font-size:12.5px}
  .print-total-box{background:linear-gradient(135deg,#080810,#0f0f22);border:1.5px solid #1B4FD8;
    border-radius:10px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#fff}
  .tl{font-size:11.5px;opacity:.72;color:#a8c7fa}
  .tv{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:3px;color:#6094ff}
  .print-notes{background:#f0f3fc;border:1px solid rgba(27,79,216,.15);border-radius:8px;padding:14px;
    font-size:11.5px;color:#44455a;margin-bottom:18px;line-height:1.7}
  .print-notes h4{font-size:11.5px;font-weight:700;color:#080810;margin-bottom:7px}
  .print-footer{text-align:center;font-size:10.5px;color:#9090aa;border-top:1px solid #dde2f0;padding-top:14px;margin-top:7px}
  .print-watermark{font-family:'Space Grotesk',sans-serif;color:#1B4FD8;font-weight:700;opacity:.65}
}
/* ── LOGIN en modo claro ─────────────────────────────── */
[data-theme="light"] #login-screen{
  background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#EAF0F8 55%,#DCE6F5 100%);
  color:var(--text);
}
[data-theme="light"] .back-to-krea{color:var(--text-s)}
[data-theme="light"] .back-to-krea:hover{color:var(--text)}
[data-theme="light"] .theme-btn-login{background:#fff;border-color:var(--line-2);color:var(--text);
  box-shadow:0 6px 16px -8px rgba(16,30,70,.25)}
[data-theme="light"] .theme-btn-login:hover{background:#F2F5FA}
[data-theme="light"] .login-card{
  background:rgba(255,255,255,.92);border-color:var(--line-2);
  box-shadow:0 40px 90px -42px rgba(16,30,70,.32)}
[data-theme="light"] .login-badge{background:var(--accent-soft);border-color:rgba(27,79,216,.22);color:var(--accent)}
[data-theme="light"] .login-card h1{color:var(--text)}
[data-theme="light"] .login-brand{color:var(--accent)}
[data-theme="light"] .login-divider{color:var(--text-t)}
[data-theme="light"] .btn-google{border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(16,30,70,.4)}