/* engine.css — motor visual comum das calculadoras StackCalc.
   Tokens de design e componentes de UI compartilhados por backend-calc,
   ia-agents-calc, salesforce-calc e esteira-agentica-calc. Cada calculadora
   mantém em seu próprio <style> apenas as variáveis de cor (--accent, --blue,
   --grad) e os componentes que ainda não são comuns às quatro. */


html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}

*{box-sizing:border-box;margin:0;padding:0}

body{background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',sans-serif;font-size:15px;min-height:100vh}

a{color:var(--accent);text-decoration:none}

.sidebar{width:260px;background:var(--s1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}

.main{flex:1;display:flex;flex-direction:column;min-width:0}

.sb-wordmark{font-size:17px;font-weight:800;letter-spacing:-.3px}

.sb-wordmark span{color:var(--accent)}

.sb-sub{font-size:11px;color:var(--text3);margin-top:3px;text-transform:uppercase;letter-spacing:.7px}

.sb-steps{padding:12px 0;flex:1}

.sb-step{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;transition:background .12s}

.sb-step:hover{background:rgba(255,255,255,.04)}

.sb-step.done .step-num{background:rgba(34,197,94,.15);color:var(--green);border-color:rgba(34,197,94,.3)}

.step-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text3);flex-shrink:0}

.step-label{font-size:13px;color:var(--text3);line-height:1.3}

.sb-step.active .step-label{color:var(--text);font-weight:600}

.sb-step.done .step-label{color:var(--text2)}

.step-cond{font-size:10px;color:var(--accent);font-weight:600;margin-left:auto;flex-shrink:0}

.sb-total{padding:16px 20px;border-top:1px solid var(--border);background:var(--s2)}

.sb-total-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}

.sb-total-val{font-size:22px;font-weight:800;color:var(--accent);margin-top:2px}

.sb-total-sub{font-size:12px;color:var(--text3);margin-top:2px}

.hdr-left{display:flex;align-items:center;gap:16px}

.hdr-title{font-size:15px;font-weight:700;color:var(--text)}

.autosave-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.3);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}

.hdr-right{display:flex;align-items:center;gap:10px}

.btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:opacity .15s}

.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}

.btn-ghost:hover{border-color:var(--text3)}

.btn-primary{background:var(--grad);color:#fff}

.btn-primary:hover{opacity:.88}

.btn-sm{padding:5px 11px;font-size:12px}

.step-title{font-size:22px;font-weight:800;margin-bottom:4px}

.step-desc{font-size:14px;color:var(--text3);margin-bottom:28px;line-height:1.6}

.section{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:16px}

.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

label{display:block;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}

input[type=text],input[type=number],textarea,select{width:100%;background:var(--s3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:14px;outline:none;transition:border-color .15s;font-family:inherit}

input:focus,textarea:focus,select:focus{border-color:var(--accent)}

.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

.cb-item{display:flex;align-items:center;gap:7px;background:var(--s3);border:1px solid var(--border);border-radius:8px;padding:7px 11px;cursor:pointer;transition:border-color .15s;font-size:13px;color:var(--text2)}

.cb-item:hover{border-color:var(--text3)}

.cb-item input{display:none}

.mod-table th{text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);border-bottom:1px solid var(--border);font-weight:700}

.mod-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}

.mod-table tr:last-child td{border-bottom:none}

.mod-table tr:hover td{background:rgba(255,255,255,.015)}

.note-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text2);font-size:12px;padding:3px 4px;outline:none;font-family:inherit;min-width:120px}

.note-input:focus{border-bottom-color:var(--accent)}

.note-input::placeholder{color:var(--text3);font-style:italic}

.item-name{font-size:13px;color:var(--text2);font-weight:500}

.item-unit{font-size:11px;color:var(--text3)}

.qty-input{width:70px;padding:5px 8px;font-size:13px;text-align:center;background:var(--s3);border:1px solid var(--border);border-radius:6px;color:var(--text);outline:none}

.qty-input:focus{border-color:var(--accent)}

.cmplx-select{padding:5px 8px;font-size:12px;background:var(--s3);border:1px solid var(--border);border-radius:6px;color:var(--text);outline:none;cursor:pointer;min-width:80px}

.cmplx-select:focus{border-color:var(--accent)}

.item-hours{font-size:13px;font-weight:600;color:var(--accent);text-align:right;min-width:60px}

.item-hours.zero{color:var(--text3);font-weight:400}


/* ── Toggle switch ── */
.row-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}

.row-toggle input{opacity:0;width:0;height:0;position:absolute}

.toggle-track{width:34px;height:18px;background:var(--border);border-radius:9px;transition:background .2s;flex-shrink:0}

.row-toggle input:checked~.toggle-track{background:var(--accent)}

.toggle-thumb{position:absolute;top:3px;left:3px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .2s;pointer-events:none}

.row-toggle input:checked~.toggle-track>.toggle-thumb{transform:translateX(16px)}

tr.row-inactive td{opacity:.35}

tr.row-inactive .qty-input,tr.row-inactive .cmplx-select,tr.row-inactive .note-input{pointer-events:none}


.mod-total{display:flex;justify-content:flex-end;padding:12px 10px 0;font-size:13px;color:var(--text3)}

.mod-total strong{color:var(--accent);margin-left:6px}

.mult-card{background:var(--s3);border:1px solid var(--border);border-radius:10px;padding:14px 16px}

.mult-name{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}

.mult-opts{display:flex;gap:6px;flex-wrap:wrap}

.mult-opt{padding:5px 10px;border-radius:6px;border:1px solid var(--border);font-size:12px;color:var(--text3);cursor:pointer;transition:all .12s}

.mult-opt:hover{border-color:var(--text3)}

.mult-opt.warn{border-color:var(--orange);background:rgba(234,88,12,.07);color:var(--orange)}

.mult-opt.sel-warn{border-color:var(--orange);background:rgba(234,88,12,.15);color:var(--orange);font-weight:600}

.axis-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}

.axis-name{font-size:14px;font-weight:700;color:var(--text)}

.axis-weight{font-size:11px;color:var(--text3);background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:2px 8px}

.axis-score-display{font-size:24px;font-weight:800;color:var(--accent)}

.axis-slider{width:100%;accent-color:var(--accent);cursor:pointer;margin-bottom:8px}

.axis-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--text3)}

.axis-meaning{font-size:12px;color:var(--text3);margin-top:4px;min-height:16px}

.result-size{font-size:64px;font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.result-ranges{display:flex;gap:20px;flex-wrap:wrap}

.range-card{text-align:center}

.range-val{font-size:22px;font-weight:800;color:var(--text)}

.range-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}

.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}

.res-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:16px 18px}

.res-card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:10px}

.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}

.bar-name{width:130px;color:var(--text2);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bar-track{flex:1;height:5px;background:var(--s3);border-radius:3px;overflow:hidden}

.bar-fill{height:100%;border-radius:3px;background:var(--grad)}

.mat-score-display{font-size:36px;font-weight:900;line-height:1}

.risk-list{list-style:none;display:flex;flex-direction:column;gap:6px}

.risk-item{font-size:12px;color:var(--text2);display:flex;gap:8px;align-items:flex-start}

.risk-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}

.mult-applied{list-style:none;display:flex;flex-direction:column;gap:5px}

.mult-applied li{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:6px}

.roadmap-phases{display:flex;flex-direction:column;gap:8px}

.rp-item{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border-radius:8px;background:var(--s3);border:1px solid var(--border)}

.rp-num{width:24px;height:24px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}

.rp-body{flex:1}

.rp-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}

.rp-desc{font-size:12px;color:var(--text3)}

.rp-item.blocked{opacity:.4}

.rp-item.blocked .rp-num{background:var(--s2);color:var(--text3);border:1px solid var(--border)}

.tag-blocked{font-size:10px;color:var(--orange);font-weight:700;margin-left:6px}

.welcome-hero h1{font-size:32px;font-weight:900;margin-bottom:8px}

.welcome-hero h1 span{color:var(--accent)}

.welcome-hero p{font-size:15px;color:var(--text3);max-width:520px;margin:0 auto 28px;line-height:1.7}

.home-wrap{max-width:560px;margin:0 auto;padding:0 16px}

.est-list{display:flex;flex-direction:column;gap:8px}

.est-item:hover{border-color:var(--accent)}

.est-meta{font-size:12px;color:var(--text3)}

.est-size{font-size:18px;font-weight:800;color:var(--accent);flex-shrink:0}

.est-btn.del:hover{background:rgba(220,38,38,.12);color:var(--red);border-color:var(--red)}

.empty-state{text-align:center;padding:40px;color:var(--text3);font-size:14px}

.est-section-lbl{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}

.footer-info{font-size:12px;color:var(--text3)}

.b-red{background:rgba(220,38,38,.1);color:var(--red);border:1px solid rgba(220,38,38,.2)}

.alert{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;line-height:1.5}

.alert-warn{background:rgba(234,88,12,.08);border:1px solid rgba(234,88,12,.2);color:var(--orange)}

.hint{font-size:12px;color:var(--text3);margin-top:4px;line-height:1.5}

.info-icon:hover .tip,.info-icon:focus .tip{display:block}

.exp-tab{padding:7px 14px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;background:transparent;color:var(--text3)}

.exp-tab:hover{border-color:var(--text3);color:var(--text2)}

.doc-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--s3)}

.doc-req{border-left:3px solid var(--red)}

.doc-rec{border-left:3px solid var(--accent)}

.doc-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}

.doc-why{font-size:11px;color:var(--text3);line-height:1.5}

.doc-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;margin-bottom:4px;display:inline-block}

.doc-badge.req{background:rgba(220,38,38,.1);color:var(--red);border:1px solid rgba(220,38,38,.2)}

.login-box{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:40px 36px;width:100%;max-width:400px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}

.login-logo{margin-bottom:12px;text-align:center}

.login-sub{font-size:13px;color:var(--text3);margin-bottom:28px;line-height:1.6}

.login-field{text-align:left;margin-bottom:14px}

.login-field label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;display:block;margin-bottom:6px}

.login-field input{width:100%;background:var(--s3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 14px;font-size:14px;outline:none;font-family:inherit;transition:border-color .15s}

.login-field input:focus{border-color:var(--accent)}

.login-btn{width:100%;padding:12px;background:var(--grad);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px;transition:opacity .15s}

.login-btn:hover{opacity:.88}

.login-err{font-size:12px;color:var(--red);margin-top:10px;min-height:16px}

.login-hint{font-size:11px;color:var(--text3);margin-top:14px}

body.light .mod-table td{border-bottom:1px solid var(--border)}

body.light .mod-table tr:hover td{background:rgba(0,0,0,.03)}

.sb-calcs{padding:12px 20px;border-top:1px solid var(--border)}

.sb-calcs-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:8px}

.sb-calcs-links{display:flex;flex-direction:column;gap:4px}

.sb-calc-link{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text3);text-decoration:none;transition:background .12s;border:1px solid transparent}

.sb-calc-link:hover{background:rgba(255,255,255,.05);color:var(--text2)}

.sb-calc-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

.ham-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--border);background:transparent;border-radius:8px;cursor:pointer;flex-shrink:0;color:var(--text2)}

.ham-btn:hover{border-color:var(--text3);color:var(--text)}

.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:399;cursor:pointer}


/* ── LOGO STACK COLOR — responde ao fundo ── */
.logo-stack { fill: var(--text); }

.logo-on-light .logo-stack { fill: #111827; }