/* ============ UNA Florestal — Design System (Clean Premium) ============ */
:root{
  /* Verde da marca como ACENTO */
  --sage-600:#2F6B40; --sage-700:#245232; --sage-100:#EAF3EC;
  --lime-500:#7DBA3C; --lime-600:#6BA42F;
  --forest-700:#234D2C; --forest-900:#16331E;
  /* Neutros (base do tema claro) */
  --ink-900:#16180F; --ink-700:#43483F; --ink-500:#7C8178; --line:#ECEEE8;
  --canvas:#F7F8F5; --surface:#FFFFFF;
  /* Semânticos */
  --ok:#1E8E5A; --warn:#B9770C; --danger:#C0392B; --info:#2D6CB5;
  /* Métricas */
  --r:18px; --r-sm:13px; --tap:52px;
  --shadow:0 1px 2px rgba(20,30,15,.04), 0 2px 6px -2px rgba(20,30,15,.05);
  --shadow-md:0 4px 16px -6px rgba(20,30,15,.10);
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--canvas); color:var(--ink-900); line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
button{font-family:inherit}

/* ---- App shell ---- */
#app{min-height:100%; padding-bottom:calc(var(--tap) + 34px + var(--safe-bot))}
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.5) blur(16px);
  color:var(--ink-900); padding:calc(11px + var(--safe-top)) 18px 11px; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid var(--line);
}
.topbar .brand{display:flex; align-items:center; gap:9px; font-weight:650; font-size:15.5px; letter-spacing:-.01em}
.topbar .brand-logo{width:28px; height:28px; display:grid; place-items:center}
.topbar .brand-logo img{height:26px; width:26px; display:block}
.topbar .spacer{flex:1}
.topbar .iconbtn{background:transparent; border:none; color:var(--ink-500); width:38px; height:38px;
  border-radius:11px; display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s}
.topbar .iconbtn svg{width:21px; height:21px}
.topbar .iconbtn:active{background:var(--canvas); color:var(--ink-900)}
.view{padding:18px 16px; max-width:680px; margin:0 auto; animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---- Bottom nav ---- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.5) blur(18px);
  border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:flex-end;
  padding:8px 8px calc(8px + var(--safe-bot));
}
.tabbar a{flex:1; text-align:center; text-decoration:none; color:var(--ink-500); font-size:10.5px; font-weight:500;
  padding:4px 2px; display:flex; flex-direction:column; align-items:center; gap:4px; transition:color .15s}
.tabbar a .ic{display:grid; place-items:center; width:46px; height:30px; border-radius:12px; transition:background .18s, transform .18s}
.tabbar a .ic svg{width:23px; height:23px}
.tabbar a.active{color:var(--sage-600); font-weight:650}
.tabbar a.active .ic{background:var(--sage-100)}
.tabbar a:not(.cta):active .ic{transform:scale(.88)}
.tabbar .cta{flex:0 0 auto; transform:translateY(-15px)}
.tabbar .cta .ic{width:56px; height:56px; border-radius:18px; background:var(--sage-600); color:#fff;
  box-shadow:0 8px 18px -5px rgba(47,107,64,.5); border:3px solid var(--canvas); transition:transform .15s, background .15s}
.tabbar .cta .ic svg{width:26px; height:26px}
.tabbar .cta:active .ic{transform:scale(.93); background:var(--sage-700)}

/* ---- Cards & blocks ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; margin-bottom:14px}
.label{font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-500); margin:0 0 10px}
.muted{color:var(--ink-500)} .small{font-size:13px}
h1.title{font-size:27px; font-weight:760; margin:4px 0 18px; letter-spacing:-.03em; color:var(--ink-900)}
h2.sec{font-size:15px; font-weight:700; margin:22px 0 11px; color:var(--ink-900); letter-spacing:-.015em}

/* ---- Inputs ---- */
.field{width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:14px; font-size:16px; background:var(--surface); color:var(--ink-900); transition:border-color .15s, box-shadow .15s}
.field::placeholder{color:#aab0a6}
.field:focus{outline:none; border-color:var(--sage-600); box-shadow:0 0 0 4px rgba(47,107,64,.12)}
select.field{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8178' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:36px}
.qty{font-size:36px; font-weight:780; text-align:center; padding:10px; letter-spacing:-.02em}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--line); background:var(--surface); border-radius:11px; padding:10px 15px; font-size:14px; cursor:pointer; color:var(--ink-700); font-weight:550; transition:all .14s}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--sage-100); border-color:var(--sage-600); color:var(--sage-700); font-weight:650}
.chip.preset{background:var(--canvas); border-color:var(--line)}

/* segmented */
.seg{display:flex; background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:4px; gap:3px}
.seg button{flex:1; border:none; background:transparent; padding:11px 6px; border-radius:10px; font-size:14px; font-weight:650; color:var(--ink-500); cursor:pointer; position:relative; transition:all .15s}
.seg button.on{background:var(--surface); color:var(--sage-700); box-shadow:0 1px 4px -1px rgba(20,30,15,.18)}
.seg button.warn-lvl::after{content:"⚠"; position:absolute; top:2px; right:6px; font-size:9px}

/* slider */
.slider-row{display:flex; align-items:center; gap:12px}
input[type=range]{flex:1; accent-color:var(--sage-600); height:28px}
.toggle{display:flex; gap:8px}
.toggle button{flex:1; border:1.5px solid var(--line); background:var(--surface); border-radius:12px; padding:12px; font-size:13.5px; font-weight:600; color:var(--ink-700); cursor:pointer; transition:all .15s}
.toggle button.on{background:var(--sage-100); border-color:var(--sage-600); color:var(--sage-700)}

/* buttons */
.btn{display:block; width:100%; border:none; border-radius:14px; padding:16px; font-size:15.5px; font-weight:680; cursor:pointer; text-align:center; transition:transform .12s, box-shadow .15s, background .15s; letter-spacing:-.01em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--sage-600); color:#fff; box-shadow:0 6px 16px -6px rgba(47,107,64,.5)}
.btn-primary:active{background:var(--sage-700)}
.btn-sage{background:var(--forest-700); color:#fff}
.btn-ghost{background:var(--surface); color:var(--ink-900); border:1.5px solid var(--line); box-shadow:var(--shadow)}

/* ---- Scenario cards ---- */
.cenario{border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:12px; background:var(--surface); box-shadow:var(--shadow)}
.cenario.best{border:1.5px solid var(--sage-600); box-shadow:0 8px 24px -10px rgba(47,107,64,.35)}
.cenario .badge{display:inline-block; background:var(--sage-100); color:var(--sage-700); font-size:11px; font-weight:750; padding:4px 11px; border-radius:999px; letter-spacing:.02em; margin-bottom:11px}
.cenario .tipo{font-size:11px; color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.price-hero{font-size:40px; font-weight:800; color:var(--ink-900); line-height:1.02; letter-spacing:-.03em}
.price-hero small{font-size:14px; font-weight:600; color:var(--ink-500); letter-spacing:0}
.total-line{font-size:15px; margin-top:6px; color:var(--ink-700)}
.total-line b{font-size:19px; color:var(--sage-700); font-weight:750}
.comp{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px}
.comp .o{display:flex; justify-content:space-between; gap:8px; padding:4px 0; color:var(--ink-700)}
.interno{margin-top:12px; background:var(--canvas); border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:12.5px; color:var(--ink-700)}
.cenario.dim{opacity:.5}

/* avisos */
.alert{border-radius:13px; padding:12px 14px; font-size:13.5px; margin-bottom:12px; display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-left-width:3px; border-left-style:solid}
.alert .i{font-size:16px; line-height:1.3}
.alert.warn{background:#fcf8ef; border-left-color:var(--warn); color:#74500a}
.alert.danger{background:#fdf1ef; border-left-color:var(--danger); color:#8a2c22}
.alert.info{background:#f1f6f1; border-left-color:var(--sage-600); color:var(--sage-700)}

/* ---- Modo cliente ---- */
body.cliente-mode #app{box-shadow:inset 0 0 0 3px var(--sage-600)}
body.cliente-mode .topbar{background:var(--sage-100)}
.hide-cliente{}
body.cliente-mode .hide-cliente{display:none !important}

/* ---- list rows ---- */
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 4px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; transition:background .12s}
.row:last-child{border-bottom:none}
.row:active{background:var(--canvas)}
.row .t{font-weight:600} .row .s{font-size:13px; color:var(--ink-500); margin-top:2px}

/* ---- modal ---- */
.modal-bg{position:fixed; inset:0; background:rgba(20,28,16,.4); backdrop-filter:blur(2px); z-index:50; display:grid; place-items:end center}
.modal{background:var(--surface); width:100%; max-width:680px; border-radius:24px 24px 0 0; padding:20px 18px calc(20px + var(--safe-bot)); max-height:90vh; overflow:auto; animation:up .24s cubic-bezier(.2,.9,.2,1)}
@keyframes up{from{transform:translateY(40px); opacity:.7}to{transform:none; opacity:1}}

.split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.toast{position:fixed; left:50%; bottom:calc(90px + var(--safe-bot)); transform:translateX(-50%) translateY(20px); background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:14px; font-size:13.5px; font-weight:550; opacity:0; pointer-events:none; transition:.28s; z-index:60; box-shadow:var(--shadow-md)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============ Painel / gráficos ============ */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:16px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px; box-shadow:var(--shadow)}
.kpi-v{font-size:23px; font-weight:800; color:var(--ink-900); letter-spacing:-.025em; line-height:1.1}
.kpi-l{font-size:11.5px; color:var(--ink-500); margin-top:5px; font-weight:500; line-height:1.3}
.chart-head{margin-bottom:14px}
.chart-title{font-size:16px; font-weight:720; color:var(--ink-900); letter-spacing:-.02em; line-height:1.25}
.chart-sub{font-size:12px; color:var(--ink-500); margin-top:4px}
.chart-row{display:flex; align-items:center; gap:10px; margin:10px 0}
.chart-row .cl{flex:0 0 86px; font-size:12px; color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chart-row .track{flex:1; height:18px; background:var(--canvas); border-radius:6px; overflow:hidden}
.chart-row .fill{height:100%; background:#cfe0cf; border-radius:6px; min-width:4px; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.chart-row .fill.hot{background:var(--sage-600)}
.chart-row .cv{flex:0 0 auto; min-width:58px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink-900)}

/* ============ Trava de PIN ============ */
.lock{position:fixed; inset:0; z-index:90; background:var(--canvas); display:grid; place-items:center; padding:24px}
.lock-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:34px 26px; width:100%; max-width:340px; text-align:center; box-shadow:0 20px 50px -16px rgba(20,30,15,.22)}
.lock-logo{width:60px; height:60px; margin-bottom:10px}
.lock-title{font-size:20px; font-weight:740; color:var(--ink-900); letter-spacing:-.02em}
.lock-sub{font-size:14px; color:var(--ink-500); margin:4px 0 20px}
.lock-in{text-align:center; font-size:22px; letter-spacing:8px; margin-bottom:10px}
.lock-erro{color:var(--danger); font-size:13px; min-height:18px; margin-bottom:6px}
.lock-btn{margin-top:6px}
.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ============ Documentos (proposta / interno) ============ */
.doc-overlay{position:fixed; inset:0; z-index:70; background:var(--canvas); display:flex; flex-direction:column}
.doc-actions{display:flex; align-items:center; gap:8px; padding:calc(11px + var(--safe-top)) 14px 11px; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.doc-scroll{flex:1; overflow:auto; padding:18px; display:flex; justify-content:center}
.doc-page{background:#fff; width:100%; max-width:600px; align-self:flex-start; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); font-size:14px; border:1px solid var(--line)}
.doc-header{background:var(--forest-700); color:#fff; padding:24px 24px 20px; text-align:center}
.doc-header.interno{background:var(--ink-900)}
.doc-logo{height:46px; object-fit:contain}
.doc-tagline{font-size:12px; opacity:.92; margin-top:6px; font-style:italic}
.doc-body{padding:22px 24px}
.doc-h{font-size:16px; margin:0 0 4px; color:var(--ink-900); font-weight:720}
.doc-meta{font-size:12.5px; color:var(--ink-500); margin-bottom:16px}
.doc-sec{margin:16px 0; padding-top:14px; border-top:1px solid var(--line)}
.doc-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500); font-weight:700; margin-bottom:5px}
.doc-val{font-size:15px}
.doc-prod{margin-top:16px; border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--canvas)}
.doc-prodname{font-size:16px; font-weight:680; margin:4px 0 14px}
.doc-qrow{display:flex; justify-content:space-between; padding:6px 0; font-size:14.5px}
.doc-unit{font-weight:700; color:var(--sage-700)}
.doc-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:14px; border-top:2px solid var(--forest-700)}
.doc-total span:first-child{font-weight:720} .doc-total span:last-child{font-size:27px; font-weight:820; color:var(--forest-700); letter-spacing:-.02em}
.doc-mod{margin-top:10px; font-size:13px; color:var(--ink-700); font-weight:600}
.doc-cond{margin:6px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-700)}
.doc-cond li{margin:4px 0}
.doc-footer{background:var(--canvas); border-top:1px solid var(--line); padding:16px 24px; display:flex; align-items:center; gap:12px; font-size:13px}
.doc-flogo{height:34px; width:34px}
.doc-interno{max-width:680px}
.doc-cen{border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0}
.doc-cen.best{border:1.5px solid var(--sage-600)}
.doc-cenh{font-weight:700; margin-bottom:6px; color:var(--sage-700); font-size:14px}
.doc-orow{font-size:12px; color:var(--ink-700); padding:2px 0; line-height:1.4}
.doc-orow.tot{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-weight:600}

@media print{
  body *{visibility:hidden}
  .doc-overlay, .doc-overlay *{visibility:visible}
  .doc-overlay{position:absolute; inset:0; background:#fff}
  .no-print{display:none !important}
  .doc-scroll{overflow:visible; padding:0}
  .doc-page{box-shadow:none; max-width:100%; border:none}
}