:root{
  --bg:#f3ece3; --card:#fbf7f1; --ink:#141010; --mute:#6b625a; --line:#e2d8cb;
  --gold:#a8814a; --red:#b01c2a; --dark:#0e0c0c; --ok:#2f7d4f; --warn:#b36b00;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--dark);color:#efe7dc;padding:28px 18px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;padding:0 8px}
.brand-name{font:600 20px var(--serif);letter-spacing:.12em}
.brand-sub{font-size:12px;color:var(--gold);margin-top:2px}
#nav{display:flex;flex-direction:column;gap:4px}
#nav a,.tabs a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:#cfc5b8;text-decoration:none;cursor:pointer;min-height:44px}
#nav a:hover{background:#1c1818}
#nav a.on{background:#1c1818;color:#fff;box-shadow:inset 3px 0 var(--gold)}
#nav .n{margin-left:auto;background:var(--red);color:#fff;font:500 11px var(--mono);border-radius:999px;padding:1px 8px}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.main{padding:32px 40px 60px;max-width:1100px;width:100%}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
h1{font:600 38px/1.1 var(--serif)}
h2{font:600 24px var(--serif);margin-bottom:12px}
h3{font:600 20px var(--serif);margin:18px 0 8px}
.btn{background:var(--red);color:#fff;border:0;border-radius:999px;padding:11px 22px;font-weight:600;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px -8px var(--red);text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.sm{padding:6px 14px;min-height:36px;font-size:13px}
.btn.wa{background:#1f9d55;box-shadow:none}
.btn.ic{padding:0;width:36px;min-height:36px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.kpi{min-width:0;position:relative}
.kpi.click{cursor:pointer}.kpi.click:hover{border-color:var(--gold)}
.kpi small{color:var(--mute);font-size:13px;display:block}
.kpi b{display:block;font:500 30px var(--mono);margin-top:4px;overflow-wrap:anywhere}
.kic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#f1e6d6;color:var(--gold);margin-bottom:10px}
.kpis.c2{grid-template-columns:repeat(2,1fr)}.kpis.c3{grid-template-columns:repeat(3,1fr)}
.hero{background:var(--dark);color:#efe7dc;border-radius:20px;padding:22px 24px;margin-bottom:18px;display:flex;flex-direction:column;gap:4px;background-image:radial-gradient(circle at 100% 0,rgba(168,129,74,.28),transparent 55%)}
.hero small{color:var(--gold);font-size:13px}
.hero b{font:600 32px/1.15 var(--serif);color:#fff}
.hero span{font-size:14px;color:#cfc5b8;overflow-wrap:anywhere}
.hero.alerta b{color:#ffb4ba}
.mbrand{display:none}
.loader{position:fixed;top:0;left:0;right:0;z-index:40;pointer-events:none}
.loader .trilho{height:4px;background:rgba(168,129,74,.25)}
.loader i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--red));transition:width .4s ease;border-radius:0 4px 4px 0}
.loader span{display:block;width:max-content;max-width:92vw;margin:8px auto 0;background:var(--dark);color:#fff;font:500 12px var(--mono);padding:6px 14px;border-radius:999px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.list{display:flex;flex-direction:column;gap:10px}
/* linha: conteúdo à esquerda, valor/selo ao centro, ações sempre na própria linha quando faltar espaço */
.row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.row .grow{flex:1 1 220px;min-width:0}
.row .t{font-weight:600;overflow-wrap:anywhere}
.row .s{font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.row .val{font:500 16px var(--mono);white-space:nowrap}
.row.click{cursor:pointer}.row.click:hover{border-color:var(--gold)}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.pill{font:500 12px var(--mono);padding:3px 10px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.pill.late{color:var(--red);border-color:var(--red)}
.pill.soon{color:var(--warn);border-color:var(--warn)}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.pill.gold{color:var(--gold);border-color:var(--gold)}
.bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
.bar input{flex:1;min-width:180px}.bar select{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0}
.chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;flex:none;color:#fff;padding:0}
.chk.on{background:var(--ok);border-color:var(--ok)}
.chk svg{width:16px;height:16px}
.empty{color:var(--mute);padding:28px;text-align:center;border:1px dashed var(--line);border-radius:14px}
.modal,.login{position:fixed;inset:0;background:rgba(14,12,12,.55);display:grid;place-items:center;padding:16px;z-index:10}
.login{background:var(--bg);z-index:20}
.sheet{background:var(--bg);border-radius:18px;padding:24px;width:min(600px,100%);max-height:92vh;overflow:auto}
.login .sheet{background:var(--card);border:1px solid var(--line);width:min(400px,100%)}
.sheet h2{font-size:28px}
.field{margin-bottom:12px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.field.two{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.foot{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.tl{border-left:2px solid var(--gold);margin:8px 0 8px 6px;padding-left:16px;display:flex;flex-direction:column;gap:12px}
.tl small{font-family:var(--mono);color:var(--gold)}
.erro{color:var(--red);font-size:13px;min-height:20px}
.s{font-size:13px;color:var(--mute)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:16px}
.card h3{margin-top:0}
.qr{display:block;width:260px;max-width:100%;margin:12px auto;background:#fff;padding:10px;border-radius:12px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bars{display:flex;flex-direction:column;gap:8px}
.br{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13px}
.br i{display:block;height:12px;border-radius:6px;background:var(--gold);min-width:3px}
.br b{font:500 12px var(--mono)}
pre.txt{white-space:pre-wrap;font:400 13px/1.5 var(--sans);background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;max-height:160px;overflow:auto}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 20px;border-radius:999px;z-index:30;font-size:14px;max-width:90vw;text-align:center}
.tabs{display:none}
body{overflow-x:hidden}
.main,.cols>*,.charts>*,.card{min-width:0}
@media(max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:max(18px,env(safe-area-inset-top)) 16px 110px}
  .top{margin-bottom:16px}
  .mbrand{display:block;font:600 13px var(--serif);letter-spacing:.16em;color:var(--gold);margin-bottom:2px}
  h1{font-size:32px}
  h2{font-size:22px}
  /* botão principal vira botão flutuante, sempre ao alcance do polegar */
  #novo{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 10px 24px -8px rgba(176,28,42,.7)}
  .loader span{margin:8px 12px 0 auto}
  .kpis,.kpis.c2,.kpis.c3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpis.c3 .kpi:last-child{grid-column:1/-1}
  .cols,.charts{grid-template-columns:1fr}
  .kpi{padding:14px}.kpi b{font-size:20px}
  .hero{padding:18px;border-radius:18px}.hero b{font-size:27px}
  .bar{gap:8px}.bar .btn{flex:1 1 auto}.bar select{flex:1 1 120px}
  .field.two{grid-template-columns:1fr 90px}
  .row{padding:12px 14px}
  .acts{width:100%;justify-content:flex-end}
  /* janelas viram folha que sobe de baixo */
  .modal{align-items:end;padding:0}
  .sheet{width:100%;border-radius:22px 22px 0 0;max-height:92vh;padding:20px 18px calc(22px + env(safe-area-inset-bottom))}
  .login{padding:16px}.login .sheet{border-radius:20px}
  .foot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .foot .btn{width:100%}
  .foot .btn:last-child:nth-child(odd){grid-column:1/-1}
  .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
  .card{padding:16px}
  .tabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--dark);justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:5}
  .tabs a{flex-direction:column;gap:2px;font-size:11px;padding:6px 4px;min-width:52px;color:#9f948a}
  .tabs a.on{color:#fff}.tabs a.on svg{stroke:var(--gold)}
  .br{grid-template-columns:90px 1fr auto}
}
/* funil */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{background:rgba(255,255,255,.35);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.kcol h3{margin:0 0 4px;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:grab}
.kcard .t{font-weight:600;overflow-wrap:anywhere}
.btn[disabled]{opacity:.35;pointer-events:none}
@media(max-width:820px){
  .kanban{grid-template-columns:repeat(4,82vw);scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px}
  .kcol{scroll-snap-align:center}
}
/* relatórios com gráficos */
.kpis.rel .kpi .sub{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-top:6px}
.kpis.rel .kpi.alerta{background:#fbeeee;border-color:#e8c4c8}
.kpis.rel .kpi.alerta b{color:var(--red)}
.up{color:var(--ok);font-weight:600}
.down{color:var(--red);font-weight:600}
.card h3 .s{font:400 13px var(--sans);margin-left:6px}
.colunas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:stretch;height:230px;margin-top:6px}
.coluna{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cb{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid var(--line)}
.cb i{display:block;width:min(46px,72%);background:#e4d3b6;border-radius:8px 8px 3px 3px;transition:height .5s}
.coluna.atual .cb i{background:var(--gold)}
.cv{font:500 11px var(--mono);color:var(--mute);min-height:15px;white-space:nowrap}
.coluna.atual .cv{color:var(--ink)}
.cm{font-size:12px;color:var(--mute);text-transform:capitalize}
.donutbox{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{width:150px;height:150px;border-radius:50%;position:relative;flex:none}
.donut::after{content:'';position:absolute;inset:24px;background:var(--card);border-radius:50%}
.donut span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1;font-size:12px;color:var(--mute)}
.donut span b{font:500 30px/1 var(--mono);color:var(--ink)}
.legenda{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;min-width:150px}
.legenda li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 42px;gap:8px;align-items:center;font-size:14px}
.legenda li i{width:10px;height:10px;border-radius:50%}
.legenda li b{font:500 13px var(--mono)}
.legenda li em{font:400 12px var(--mono);color:var(--mute);font-style:normal;text-align:right}
.seg{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.num{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.num b{display:block;font:500 24px var(--mono);overflow-wrap:anywhere}
.num span{font-size:12px;color:var(--mute)}
.num.alerta b{color:var(--red)}
.num.ok b{color:var(--ok)}
@media(max-width:820px){.cv{font-size:10px}.colunas{height:200px;gap:4px}.nums{grid-template-columns:repeat(2,1fr)}.donutbox{justify-content:center}}
.kpis.rel .kpi b{font-size:24px;white-space:nowrap}
@media(max-width:820px){.kpis.rel .kpi b{font-size:19px}}