/* ============================================================
   CRM DuoByte v2 — visual DuoByte · paleta oficial Help
   Tokens idênticos ao css/style.css do site.
   ============================================================ */
:root{
  --p950:#0B1533; --p900:#16225A; --p800:#24347F; --p700:#3D53E8; --p600:#5271FF;
  --lilac:#8499FF; --lav100:#E4E9FF; --lav50:#F4F6FF;
  --lav-a:#ECEFFF; --lav-b:#DDE4FF; --lav-c:#C9D3FF;
  --pink:#F4685E; --ink:#1F1F1F; --muted:#5C5670; --line:#ECEFFF;
  --ok:#1E9E55; --okbg:#E8F9EE; --rosebg:#FDECEC; --rose:#B23B3B;
  --warn:#E9A23B; --warnbg:#FEF3E2; --warnink:#B87400;
  --card:#FFFFFF; --r:16px;
  /* v3 — séries categóricas dos gráficos (paleta validada; ordem fixa: máquinas, impressoras, e-mails, roteadores) */
  --viz-maq:#3D53E8; --viz-imp:#1baf7a; --viz-eml:#4a3aa7; --viz-rot:#e87ba4;
  /* barra neutra (SO outro/não informado): 3,38:1 sobre a trilha --lav-a (validate_palette.js --surface #ECEFFF) */
  --viz-neutro:#7A80A2;
  --okink:#13773F;
  --sh:0 10px 30px rgba(82,113,255,.08);
  --grad:linear-gradient(160deg,var(--p950),var(--p900) 62%,var(--p700));
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--lav50);font-size:13.5px;line-height:1.45}
h1,h2,h3,h4{font-family:Montserrat,Inter,sans-serif;margin:0;font-weight:600}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--p700);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--lav50);padding:20px}
.login-card{background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(82,113,255,.16);width:380px;max-width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;padding:0 30px 30px;overflow:hidden}
.login-card .brandband{background:var(--grad);margin:0 -30px 8px;padding:26px 20px 22px;position:relative;overflow:hidden}
.login-card .brandband::before{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.login-card .brandband img{height:48px;object-fit:contain;display:block;margin:0 auto;position:relative}
.login-card h1{font-size:18px;color:var(--p950)}
.login-card input{padding:12px 15px;border:1.5px solid var(--lav-b);border-radius:12px;font:inherit;width:100%}
.login-card input:focus{border-color:var(--p700);outline:none}
.login-card button{padding:12px;border:0;border-radius:99px;background:var(--p900);color:#fff;font-weight:700;font-size:14.5px;position:relative;overflow:hidden}
.login-card button::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease}
.login-card button:hover::before{left:130%}
.login-card button:hover{background:var(--p800)}
.login-card button.ghost{background:var(--lav-a);color:var(--p900)}
.login-card button.ghost:hover{background:var(--lav-b)}
.rec-link{font-size:12.5px;color:var(--muted);text-decoration:none}
.rec-link:hover{color:var(--p700);text-decoration:underline}
.rec-card{display:none;padding-top:22px}
.rec-card:target{display:flex}
.flash{margin:0;padding:10px 12px;border-radius:10px;font-size:12.5px}
.flash.err{background:var(--rosebg);color:var(--rose)}
.flash.ok{background:var(--okbg);color:var(--ok)}
.hint{margin:0;font-size:12.5px;color:var(--muted)}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:226px 1fr;min-height:100vh}
.side{background:var(--grad);padding:24px 14px 18px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow:hidden}
.side::after{content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:240px;background:radial-gradient(closest-side,rgba(132,153,255,.35),transparent 70%);pointer-events:none}
.side .logo{display:flex;align-items:center;padding:2px 10px 22px}
.side .logo img{height:44px;object-fit:contain}
.side .logo span{display:none}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;border:0;background:none;border-radius:99px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);text-align:left;position:relative;z-index:1;transition:background .2s,color .2s}
.nav-btn svg{width:17px;height:17px;flex:none}
.nav-btn:hover{background:rgba(255,255,255,.10);color:#fff}
.nav-btn.on{background:#fff;color:var(--p900)}
.side .spacer{flex:1}
/* #2 — medidor de uso do banco (rodapé da sidebar escura) */
.db-meter{padding:12px 12px 2px;margin-top:4px}
.dbm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.dbm-lbl{font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em}
.dbm-pct{font-size:12px;font-weight:700;color:#fff}
.dbm-track{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.dbm-fill{height:100%;border-radius:99px;transition:width .4s ease}
.dbm-fill.dbm-ok{background:var(--lilac)}
.dbm-fill.dbm-warn{background:#FFC24B}
.dbm-fill.dbm-crit{background:#FF7A7A}
.dbm-sub{font-size:10.5px;color:rgba(255,255,255,.52);margin-top:5px}
.main{min-width:0;padding:16px 28px 40px}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:8px 0 14px;border-bottom:1px solid var(--lav-a);margin-bottom:16px}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;padding:11px 16px 11px 40px;border:1.5px solid transparent;border-radius:99px;background:#fff;box-shadow:0 2px 10px rgba(82,113,255,.06);font:inherit;font-size:13px}
.search input:focus{border-color:var(--lav-c);outline:none}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:37px;height:37px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 10px rgba(82,113,255,.06);display:grid;place-items:center;color:var(--muted);position:relative}
.icon-btn:hover{color:var(--p900)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--pink);border:1.5px solid #fff}
.userchip{display:flex;align-items:center;gap:10px;background:#fff;border:0;box-shadow:0 2px 10px rgba(82,113,255,.06);border-radius:99px;padding:4px 15px 4px 4px;cursor:pointer}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11.5px}
.userchip .un{font-weight:600;font-size:12.5px;line-height:1.15;color:var(--ink)}
.userchip .ur{font-size:10.5px;color:var(--muted)}

/* ---------- Page head ---------- */
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h1{font-size:18px;color:var(--p950)}
.pagehead .sub{font-size:12px;color:var(--muted);margin-top:2px}
.pagehead .acts{margin-left:auto;display:flex;gap:10px}
.btn{padding:7px 14px;border-radius:99px;font-weight:600;font-size:12px;border:1.5px solid var(--p900);background:var(--p900);color:#fff;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn svg{width:13px;height:13px;flex:none}
.btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s ease}
.btn:hover::before{left:130%}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(82,113,255,.25)}
.btn.outline{background:#fff;color:var(--p900)}
.btn.pink{background:var(--pink);border-color:var(--pink)}
.btn.pink:hover{box-shadow:0 12px 26px rgba(244,104,94,.30)}

/* ---------- Cards / grid ---------- */
.card{background:var(--card);border:1px solid var(--lav-a);border-radius:var(--r);padding:16px 18px}
.card h3{font-size:13.5px;color:var(--p950);margin-bottom:2px}
.card .cap{font-size:11.5px;color:var(--muted)}
.grid{display:grid;gap:14px}
.g-kpis{grid-template-columns:repeat(6,1fr)}
.g-mid{grid-template-columns:1.15fr .85fr 1fr;margin-top:14px}
.g-low{grid-template-columns:1fr 1.1fr .9fr;margin-top:14px}
.g-bot{grid-template-columns:1.45fr 1fr;margin-top:14px}
.kpi{position:relative}
.kpi .lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.kpi .big{font-family:Montserrat;font-size:25px;font-weight:700;color:var(--p950);margin-top:5px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.badge.up{background:var(--okbg);color:var(--ok)}
.badge.mid{background:var(--lav-a);color:var(--p800)}
.badge.hot{background:#FDECEA;color:var(--pink)}
.badge.wn{background:var(--rosebg);color:var(--rose)}
.badge.warn{background:var(--warnbg);color:var(--warnink)}
.kpi .badge{position:static;display:inline-block;margin-bottom:7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .lbl{display:block}

/* ---------- charts ---------- */
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 2px}
.donut{position:relative;width:168px;height:168px}
.donut svg{transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:17;stroke-linecap:round}
.donut .track{stroke:var(--lav-a)}
.donut .val{stroke:var(--p900);transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.donut .num{position:absolute;inset:0;display:grid;place-items:center;font-family:Montserrat;font-size:31px;font-weight:700;color:var(--p950)}
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--p700)}
.chart .bar2{fill:var(--lav-c)}
.chart .axis{font-size:10px;fill:var(--muted);font-family:Inter}
.chart .ln{fill:none;stroke:var(--p700);stroke-width:2.5;stroke-linecap:round}
.chart .ar{fill:url(#lg);opacity:.32}
.chart .pt{fill:#fff;stroke:var(--p700);stroke-width:2.5}

/* funil */
.fun-row{display:grid;grid-template-columns:116px 1fr 32px;align-items:center;gap:10px;padding:7px 0}
.fun-row .fl{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fun-row .tr{height:9px;border-radius:99px;background:var(--lav-a);overflow:hidden}
.fun-row .fv{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p900),var(--p600));transition:width .8s cubic-bezier(.4,0,.2,1)}
.fun-row .fn{font-size:11.5px;font-weight:700;color:var(--p900);text-align:right}

/* heatmap */
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.heat .hd{font-size:10px;color:var(--muted);text-align:center;font-weight:600}
.heat .hc{aspect-ratio:1;border-radius:8px;background:var(--lav-a)}
.heat .h1{background:var(--lav-c)}.heat .h2{background:var(--lilac)}.heat .h3{background:var(--p700)}

/* listas */
.tasklist{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.task{display:flex;align-items:center;gap:10px;background:var(--lav50);border:1px solid var(--lav-a);border-radius:12px;padding:9px 12px;font-size:12.5px}
.task b{font-weight:600}
.task .when{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.task.late{border-color:#F8C9C4;background:#FDF1F0}
.task.late .when{color:var(--pink);font-weight:700}
.feed{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.feed .fi{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--lav-a);font-size:12px;align-items:baseline}
.feed .fi:last-child{border-bottom:0}
.feed .ft{color:var(--muted);font-size:10.5px;white-space:nowrap}
.empty{padding:16px 6px;text-align:center;color:var(--muted);font-size:12.5px}

/* ---------- Kanban ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:13px;overflow-x:auto;padding-bottom:16px;align-items:start}
.col{background:var(--lav-a);border-radius:14px;padding:9px;min-height:120px}
.col.drag{outline:2px dashed var(--p700);outline-offset:-2px}
.col h4{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--p950);padding:4px 6px 9px}
.col h4 .cnt{margin-left:auto;background:#fff;border-radius:99px;padding:1px 9px;font-size:11px;color:var(--p900);font-weight:700}
.lead-card{background:#fff;border:1px solid transparent;border-radius:12px;padding:11px 12px;margin-bottom:8px;cursor:grab}
.lead-card:hover{border-color:var(--lav-c);box-shadow:0 6px 16px rgba(82,113,255,.10)}
.lead-card .nm{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.lead-card .em{font-size:11px;color:var(--muted);margin:2px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:10px;font-weight:700;background:var(--lav-a);color:var(--p800);border-radius:99px;padding:2.5px 8px}
.tag.seg{background:var(--okbg);color:var(--ok)}
.tag.org{background:#F3F2F6;color:var(--muted)}
.scorebar{height:4px;border-radius:99px;background:var(--lav-a);margin-top:8px;overflow:hidden}
.scorebar i{display:block;height:100%;background:linear-gradient(90deg,var(--p700),var(--pink));border-radius:99px}
.late-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}

/* ---------- Drawer ---------- */
.ovl{position:fixed;inset:0;background:rgba(11,21,51,.5);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.ovl.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:96vw;background:#fff;z-index:41;box-shadow:-18px 0 50px rgba(11,21,51,.28);transform:translateX(103%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-head{padding:18px 22px 14px;border-bottom:1px solid var(--lav-a);display:flex;gap:12px;align-items:center}
.dr-head h2{font-size:16px;color:var(--p950)}
.dr-head .x{margin-left:auto;box-shadow:none;background:var(--lav-a)}
.dr-body{overflow-y:auto;padding:16px 22px 30px;display:flex;flex-direction:column;gap:16px}
.dr-sec h4{font-size:11.5px;color:var(--p800);margin-bottom:8px;font-weight:700}
.kv{display:grid;grid-template-columns:94px 1fr;gap:4px 10px;font-size:12.5px}
.kv .k{color:var(--muted)}
.kv a{color:var(--p700);text-decoration:none;word-break:break-all}
.dr-sec select,.dr-sec input[type=date],.dr-sec input[type=text],.dr-sec textarea{width:100%;padding:9px 12px;border:1.5px solid var(--lav-b);border-radius:10px;font:inherit;font-size:12.5px;background:#fff}
.dr-sec textarea{min-height:68px;resize:vertical}
.dr-sec select:focus,.dr-sec input:focus,.dr-sec textarea:focus{border-color:var(--p700);outline:none}
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 9px;border:1.5px solid var(--lav-a);border-radius:10px;cursor:pointer;user-select:none}
.pk:hover{border-color:var(--lav-c)}
.pk input{accent-color:var(--p900)}
.pk.sel{background:var(--lav50);border-color:var(--p900);font-weight:600}
.prop-out{background:var(--lav50);border:1px solid var(--lav-a);border-radius:12px;padding:12px;font-size:12px;white-space:pre-wrap;max-height:230px;overflow-y:auto}
.row2{display:flex;gap:8px}
.row2>*{flex:1}
.minihist .fi b{color:var(--p900)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(11,21,51,.5);padding:18px}
.modal.on{display:grid}
.mbox{background:#fff;border-radius:20px;padding:24px;width:430px;max-width:100%;display:flex;flex-direction:column;gap:11px;box-shadow:0 30px 80px rgba(11,21,51,.35);max-height:88vh;overflow-y:auto}
.mbox h2{font-size:16px;color:var(--p950)}
.mbox input,.mbox select,.mbox textarea{padding:10px 13px;border:1.5px solid var(--lav-b);border-radius:11px;font:inherit;font-size:13px;width:100%}
.mbox input:focus,.mbox select:focus,.mbox textarea:focus{border-color:var(--p700);outline:none}
.mbox .err-msg{color:var(--pink);font-size:12px;min-height:16px;margin:0}

/* ---------- Tabelas ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:11px;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1.5px solid var(--lav-a)}
.tbl td{padding:10px;border-bottom:1px solid var(--lav-a);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .role{font-size:10.5px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--lav-a);color:var(--p800)}
.tbl .role.master{background:var(--p900);color:#fff}
.tbl .ev{font-weight:600}
.tbl .ev.bad{color:var(--pink)}
.tbl .ev.good{color:var(--ok)}
.mini{font-size:11px;color:var(--muted)}
.link-del{background:none;border:0;color:var(--pink);font-weight:700;font-size:12px;padding:4px}
.link-del:hover{text-decoration:underline}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--p950);color:#fff;padding:11px 22px;border-radius:99px;font-size:13px;z-index:60;transition:transform .3s;box-shadow:0 14px 40px rgba(11,21,51,.4)}
.toast.on{transform:translateX(-50%)}

/* ---------- gráficos vivos ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .55s cubic-bezier(.22,.9,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.chart .abar{transform-box:fill-box;transform-origin:bottom;animation:growY .85s cubic-bezier(.3,1.25,.45,1) both;animation-delay:var(--d,0ms);transition:filter .2s}
.chart .abar:hover{filter:brightness(1.15)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.fadein{animation:fadein .5s ease both;animation-delay:calc(var(--d,0ms) + .5s)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.chart .draw{stroke-dasharray:1;animation:draw 1.5s cubic-bezier(.5,0,.25,1) .1s both}
@keyframes areaIn{from{opacity:0}to{opacity:.32}}
.chart .ar{animation:areaIn 1.2s ease .6s both}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.5,.45,1) both;animation-delay:var(--d,0ms)}
.donut .num{animation:fadein .9s ease .3s both}
@keyframes shimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(280%)}}
.fun-row .fv{position:relative;overflow:hidden}
.fun-row .fv::after{content:'';position:absolute;top:0;bottom:0;left:0;width:44%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 3s ease-in-out infinite;animation-delay:var(--d,0ms)}
.heat .hc{transition:transform .15s}
.heat .hc:hover{transform:scale(1.16)}

/* ---------- Responsivo ---------- */
@media (max-width:1180px){.g-kpis{grid-template-columns:repeat(3,1fr)}.kpi .badge{position:static;display:inline-block;margin-bottom:7px}.kpi .lbl{display:block}.g-mid,.g-low{grid-template-columns:1fr 1fr}.g-bot{grid-template-columns:1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:62px 1fr}
  .side{padding:18px 8px}
  .side .logo{justify-content:center;padding-bottom:14px}
  .side .logo img{height:32px;max-width:64px;object-fit:contain}
  .nav-btn span{display:none}
  .nav-btn{justify-content:center;padding:12px}
  .main{padding:12px 14px 30px}
  .g-mid,.g-low,.g-bot{grid-template-columns:1fr}
  .userchip .un,.userchip .ur{display:none}
  .search{min-width:0}
}

/* ---------- equipe / presença / usuários ---------- */
img.avatar{object-fit:cover;padding:0;border:0}
.avatar.big,img.avatar.big{width:46px;height:46px;font-size:15px}
.avwrap{position:relative;display:inline-flex;flex:none}
.stdot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:#B9B4C6}
.stdot.ativo{background:#1E9E55}
.stdot.ausente{background:#E8A13D}
.stdot.pendente{background:var(--pink)}
.top-actions{position:relative}
.udrop{position:absolute;top:48px;right:0;width:300px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(11,21,51,.25);border:1px solid var(--lav-a);padding:10px;z-index:45;animation:rise .25s ease both}
.ud-me{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;background:var(--lav50)}
.ud-me .badge{margin-left:auto}
.ud-list{max-height:280px;overflow-y:auto;padding:4px 0;border-bottom:1px solid var(--lav-a);margin-bottom:6px}
.ud-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px}
.ud-row:hover{background:var(--lav50)}
.ud-row .st{margin-left:auto;font-size:10.5px;font-weight:700}
.st.ativo{color:#1E9E55}
.st.ausente{color:#E8A13D}
.st.offline{color:#8A8496}
.st.pendente{color:var(--pink)}
.tn{font-weight:600;font-size:12.5px;color:var(--ink)}
.ud-act{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 12px;border-radius:12px;font-size:13px;font-weight:600;color:var(--ink)}
.ud-act:hover{background:var(--lav50)}
.ud-act.out{color:var(--pink)}
.ucell{display:flex;gap:10px;align-items:center}
.wa{display:inline-block;margin-top:3px;font-size:11px;font-weight:700;color:#1E9E55;text-decoration:none}
.wa:hover{text-decoration:underline}
.act-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.link-act{background:none;border:0;color:var(--p700);font-weight:700;font-size:12px;padding:2px;cursor:pointer}
.link-act.danger{color:var(--rose)}
/* #5 — anexo do contrato no modal */
.anexo-box{margin:2px 0 8px}
.anexo-atual{display:flex;align-items:center;gap:10px;background:var(--lav50);border:1px solid var(--lav-b);border-radius:10px;padding:9px 11px;margin-bottom:8px;flex-wrap:wrap}
.anexo-info{min-width:0;flex:1}
.anexo-nome{font-weight:700;font-size:12.5px;color:var(--p950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anexo-meta{font-size:11px;color:var(--muted);margin-top:1px}
.anexo-troca{font-size:11px;color:var(--muted);margin-bottom:4px}
.anexo-file{font:inherit;font-size:12px;width:100%}
.link-act:hover{text-decoration:underline}
.frow{display:flex;align-items:center;gap:12px}
.mbox .hint{text-align:left}
.mbox a.btn{justify-content:center}


/* ---------- modo APP (celular) ---------- */
.bottomnav{display:none}
@media (max-width:700px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:10px 12px calc(86px + env(safe-area-inset-bottom))}
  .topbar{flex-wrap:wrap;gap:10px;position:sticky;top:0;background:var(--lav50);z-index:30;padding-top:10px}
  .search{display:block;order:3;flex-basis:100%;max-width:none}
  .g-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .badge{position:static;display:inline-block;margin-bottom:7px}
  .kpi .lbl{display:block}
  .grid{gap:10px}
  .card{padding:14px 14px;border-radius:14px}
  .kpi .big{font-size:22px}
  .pagehead .acts{flex-basis:100%;justify-content:stretch}
  .pagehead .acts .btn{flex:1;justify-content:center}
  .board{grid-auto-columns:84vw;scroll-snap-type:x mandatory;gap:10px;margin:0 -12px;padding:0 12px 14px}
  .col{scroll-snap-align:center}
  .drawer{width:100vw;max-width:100vw}
  .modal{align-items:end;padding:0}
  .mbox{width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto}
  .udrop{position:fixed;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));right:10px;left:10px;width:auto}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--lav-a);box-shadow:0 -8px 30px rgba(82,113,255,.12);padding:6px 8px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
  .bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--muted);font-size:10px;font-weight:600;padding:5px 8px;border-radius:12px;min-width:56px}
  .bn-item svg{width:20px;height:20px}
  .bn-item.on{color:var(--p900)}
  .bn-item.on svg{color:var(--p900)}
  .bn-lead{width:48px;height:48px;border-radius:50%;border:0;background:var(--pink);color:#fff;display:grid;place-items:center;margin-top:-24px;box-shadow:0 10px 24px rgba(244,104,94,.42);flex:none}
  .bn-lead svg{width:22px;height:22px}
  .fun-row{grid-template-columns:96px 1fr 28px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .dr-body{padding:14px 14px 40px}
  .pk-grid{grid-template-columns:1fr}
}

.dr-sec.danger{border-top:1px dashed var(--lav-b);padding-top:14px;text-align:center}

/* ---------- valor / perdas / conversa ---------- */
.kpi .big.money{font-size:19px}
.tag.bad{background:#FDECEA;color:var(--pink)}
.tag.val{background:#E8F9EE;color:var(--ok)}
.loss{margin-top:12px;border-top:1px dashed var(--lav-b);padding-top:10px}
.loss-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;color:var(--ink)}
.loss-row b{color:var(--pink)}
.chatlog{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;background:var(--lav50);border:1px solid var(--lav-a);border-radius:12px;padding:10px}
.cl-row{font-size:12px;line-height:1.4;display:flex;gap:8px;align-items:baseline}
.cl-row b{flex:none;font-size:10.5px;padding:1px 8px;border-radius:99px}
.cl-lead b{background:var(--lav-b);color:var(--p900)}
.cl-bot b{background:var(--p900);color:#fff}
@media (max-width:700px){.g-kpis{grid-template-columns:1fr 1fr}}

/* ---------- comissões ---------- */
.com-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.com-bar input[type=month]{padding:9px 13px;border:1.5px solid var(--lav-b);border-radius:99px;font:inherit;background:#fff}
.com-bar .acts{margin-left:auto;display:flex;gap:10px}
.card.camp{margin-bottom:14px}
.card.camp .row2{margin-top:10px;max-width:520px}
.card.camp input[type=date]{padding:9px 12px;border:1.5px solid var(--lav-b);border-radius:10px;font:inherit}
.card.camp .link-del{margin-top:8px}
.com-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.vcard .ucell{margin-bottom:10px}
.vcard .badge{margin-left:auto}
.vtr{height:9px;border-radius:99px;background:var(--lav-a);overflow:hidden;margin:4px 0 6px}
.vfv{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p900),var(--p600));transition:width .8s cubic-bezier(.4,0,.2,1)}
.vfv.hit{background:linear-gradient(90deg,#1E9E55,#43C97F)}
.vkv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px;border-top:1px dashed var(--lav-b);padding-top:10px}
.vnum{font-family:Montserrat;font-weight:700;font-size:14px;color:var(--p950)}
.tag.own{background:#E4E9FF;color:var(--p900)}
.mbox select{padding:10px 13px;border:1.5px solid var(--lav-b);border-radius:11px;font:inherit;width:100%}
@media (max-width:700px){.com-bar .acts{margin-left:0;width:100%}.com-bar .acts .btn{flex:1;justify-content:center}.vkv{grid-template-columns:1fr 1fr}}

/* v3: sparkline, links do cartao, divisao */
.spark{display:flex;align-items:center;gap:10px;margin-top:10px;border-top:1px dashed var(--lav-b);padding-top:10px}
.vlink{margin-top:8px;padding:0;font-size:11.5px}
.mbox textarea{padding:10px 13px;border:1.5px solid var(--lav-b);border-radius:11px;font:inherit;font-size:13px;width:100%;min-height:80px;resize:vertical}
.mbox .hint{margin:0}

/* ---------- v4: marca d'agua forense + bloqueios ---------- */
body.guard{-webkit-user-select:none;user-select:none}
body.guard input,body.guard textarea{-webkit-user-select:text;user-select:text}
.wm{position:fixed;inset:-10%;z-index:9998;pointer-events:none;display:flex;flex-wrap:wrap;align-content:space-between;justify-content:space-between;transform:rotate(-24deg);opacity:.07}
.wm span{font-size:13px;font-weight:700;color:var(--p950);white-space:nowrap;padding:34px 26px}
.printwarn{display:none}
@media print{
  body.guard #app,body.guard .wm{display:none!important}
  body.guard .printwarn{display:block;font-family:Montserrat,Arial;font-size:18px;color:#0B1533;padding:60px 40px}
}
/* agenda / atividade / bot */
.reu-h{margin-top:14px;border-top:1px dashed var(--lav-b);padding-top:10px;font-weight:700;color:var(--p800)}
.atv{margin-top:10px}
.atv-tr{margin-top:4px}
.botkv{border-top:0;padding-top:4px;grid-template-columns:1fr 1fr 1fr}

.dia-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:10px}
.dia-form input,.dia-form select{padding:9px 12px;border:1.5px solid var(--lav-b);border-radius:10px;font:inherit;font-size:12.5px;background:#fff}
.dia-form input:focus,.dia-form select:focus{border-color:var(--p700);outline:none}
.task .act-links select{border:1.5px solid var(--lav-b);border-radius:8px;background:#fff}
@media (max-width:700px){.dia-form{grid-template-columns:1fr}}

/* ---------- cliente detalhe (dashboard) ---------- */
.cli-back{background:none;border:0;color:var(--p700);font-weight:600;font-size:13px;padding:4px 0 8px;display:inline-flex;align-items:center;gap:4px}
.cli-back:hover{text-decoration:underline}
.cli-hero{background:linear-gradient(120deg,var(--p950),var(--p900) 60%,var(--p700));border-radius:16px;padding:18px 20px;color:#fff;display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;overflow:hidden}
.cli-hero::after{content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
.cli-hero .av{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.cli-hero h2{color:#fff;font-size:18px}
.cli-hero .sub{color:var(--lav-c);font-size:12px;margin-top:3px}
.cli-hero .acts .btn.outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.g-clidet{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.svc-card{border:1px solid var(--lav-a);border-left:3px solid var(--p600);border-radius:12px;padding:12px 14px;background:#fff}
.svc-card.st-ativo{border-left-color:var(--ok)}
.svc-card.st-implantacao{border-left-color:var(--p600)}
.svc-card.st-suspenso{border-left-color:var(--warn)}
.svc-card.st-cancelado{border-left-color:#E24B4A}
.svc-card .nm{font-weight:600;font-size:13px;color:var(--p950)}
.svc-card .val{font-family:Montserrat;font-weight:700;font-size:17px;color:var(--p950);margin:7px 0 2px}
.svc-card .val span{font-size:11px;font-weight:500;color:var(--muted)}
@media(max-width:900px){.g-clidet{grid-template-columns:1fr}}

/* ---------- gestão do cliente / portal — componentes compartilhados ---------- */
.cli-sech{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cli-sech h3{margin:0}
.cli-sech .link-act,.cli-sech .btn,.cli-sech .badge{margin-left:auto}
.side-card{margin-top:14px}
.prog{height:8px;border-radius:99px;background:var(--lav-a);overflow:hidden;margin:2px 0 10px}
.prog>i{display:block;height:100%;border-radius:99px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.prog>i.ok{background:var(--ok)}
.prog>i.warn{background:var(--warn)}
.prog>i.bad{background:var(--rose)}
.prog>i.grad{background:linear-gradient(90deg,var(--p700),var(--pink))}
.cli-ticket{border:1px solid var(--lav-a);border-radius:12px;padding:10px 12px;margin-top:8px}
.cli-ticket .th{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cli-ticket .reply{width:100%;padding:8px 10px;border:1.5px solid var(--lav-b);border-radius:10px;font:inherit;font-size:12.5px;margin-top:6px}
.cli-ticket .reply:focus{border-color:var(--p700);outline:none}
.doc-row{display:flex;align-items:center;gap:10px;border:1px solid var(--lav-a);border-radius:10px;padding:8px 10px;margin-top:8px}
.doc-row .dn{flex:1;min-width:0;font-weight:600;color:var(--p900);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;display:block}
.doc-ic{width:38px;height:38px;flex:none;border-radius:8px;background:var(--lav100);color:var(--p800);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center}
.chip-opt{display:inline-flex;align-items:center;gap:5px;border:1.4px solid var(--lav-b);background:var(--lav50);color:var(--p900);border-radius:99px;padding:5px 12px;font-weight:600;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s}
.chip-opt:hover{border-color:var(--lav-c);background:var(--lav100)}
.cli-search{padding:10px 15px;border:1.5px solid transparent;border-radius:99px;font:inherit;font-size:13px;background:#fff;box-shadow:0 2px 10px rgba(82,113,255,.06);width:100%;max-width:340px}
.cli-search:focus{border-color:var(--lav-c);outline:none}
.tbl td.go{color:var(--p700);font-weight:600;white-space:nowrap}
.tbl tr:hover td{background:var(--lav50)}
.cli-col{display:flex;flex-direction:column;gap:14px}
.cli-hero .acts{margin-left:12px;display:flex;gap:8px}
.cli-hero>.badge{margin-left:auto}
.svc-card .svc-top{display:flex;align-items:flex-start;gap:6px}
.svc-card .svc-top .badge{margin-left:auto}
.svc-card .link-act{margin-top:6px;display:inline-block}
.svc-anexo{margin-top:6px;margin-right:8px;display:inline-block}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.onb-step{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:12.5px}
.onb-step input{width:16px;height:16px;accent-color:var(--p700);flex:none}
.onb-step .done{color:var(--muted);text-decoration:line-through}
.fin-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.doc-up{display:flex;gap:6px;align-items:center}
.doc-sel{font:inherit;font-size:11.5px;padding:5px 9px;border:1.5px solid var(--lav-b);border-radius:8px;background:#fff}
.doc-sel:focus{border-color:var(--p700);outline:none}
.btn.sm{padding:6px 12px;font-size:12px}

/* ==================== PAINEL v3 (docs/painel-v3-spec.md §3) ==================== */
[hidden]{display:none!important}
/* badges usados pelo JS e que não tinham estilo */
.badge.ok{background:var(--okbg);color:var(--okink)}
.badge.bad{background:var(--rosebg);color:var(--rose)}
.badge.mut{background:#F3F2F6;color:var(--muted)}
.badge.info{background:var(--lav-a);color:var(--p800)}
.tag-fixa{margin-left:7px;vertical-align:1px}

/* toast legível em mensagens longas (409) e acima da bottomnav no celular */
.toast{max-width:calc(100vw - 32px);text-align:center;border-radius:18px;opacity:0;pointer-events:none;transition:transform .3s,opacity .3s}
.toast.on{opacity:1}

/* tela de estado (carregando/erro antes do shell) */
.state-card h1{font-size:16px}
.state-card .hint{text-align:center}

/* clique × seleção (§3.8): células selecionáveis, linhas clicáveis com foco visível */
.tbl td,.tbl th{-webkit-user-select:text;user-select:text}
.row-click{cursor:pointer}
.tbl tr.row-click:focus-visible{outline:2px solid var(--p700);outline-offset:-2px}

/* grades de KPI extras */
.g-kpis4{grid-template-columns:repeat(4,1fr)}
.g-kpis5{grid-template-columns:repeat(5,1fr)}
.g-inv2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin-top:14px;align-items:start}
/* itens de grade não podem crescer além da trilha (tabela nowrap no celular estourava a página) */
.g-inv2>*,.g-kpis4>*,.g-kpis5>*,.inv-ov,.inv-res,.inv-list{min-width:0}
.cli-back svg{width:16px;height:16px;flex:none}
.kpi.crit .big{color:var(--rose)}
/* "⚠ Windows 10 / Server 2012" NUNCA quebra nem corta: o card crítico tem no mínimo a largura do selo
   (na grade, a coluna dele cresce; no celular ele ocupa a linha inteira — ver bloco D12/D13 no fim) */
.kpi.crit{min-width:max-content}
.kpi.crit .badge{max-width:none;white-space:nowrap}

/* ---------- gráficos (§3.6 / §3.7) ---------- */
.vz-card{min-width:0}
/* #1 — mais cor pros cards/gráficos (destacar a informação): faixa de acento da marca no topo + título colorido */
.vz-card,.card.cal-card{border-top:3px solid var(--p600)}
.card h3,.cli-sech h3,.vz-head h3{color:var(--p800)}
.vz-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 2px;font-size:11.5px;color:var(--ink)}
.vz-legend-low{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--lav-b);color:var(--muted)}
.vz-li{display:inline-flex;align-items:center;gap:6px}
.vz-sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.vz-chart{display:flex;flex-direction:column;margin-top:8px;min-width:0}
.vz-row{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) 36px;align-items:center;gap:10px;padding:6px 0}
.vz-so .vz-row{grid-template-columns:minmax(0,190px) minmax(0,1fr) 36px}
.vz-lab{min-width:0;display:flex;flex-direction:column;gap:1px}
.vz-nm{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* status em cor de TEXTO; só o ícone ⚠ (e a barra) em --rose */
.vz-crit{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz-crit svg{width:12px;height:12px;flex:none;color:var(--rose)}
.vz-track{height:12px;background:var(--lav-a);border-radius:0 4px 4px 0;min-width:0}
.vz-bar{display:flex;height:12px;min-width:3px;transform-origin:left center;animation:vzGrow .6s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--d,0ms)}
@keyframes vzGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vz-seg{flex:1 1 0;min-width:2px;height:12px}
.vz-seg+.vz-seg{border-left:2px solid #fff;min-width:4px}
.vz-bar>.vz-seg:last-child{border-radius:0 4px 4px 0}
.vz-seg:focus-visible{outline:2px solid var(--p950);outline-offset:2px;border-radius:2px}
.vz-n{font-size:11.5px;font-weight:700;color:var(--p900);text-align:right;font-variant-numeric:tabular-nums}
.s-maq{background:var(--viz-maq)}
.s-imp{background:var(--viz-imp)}
.s-eml{background:var(--viz-eml)}
.s-rot{background:var(--viz-rot)}
.so-suportado{background:var(--p700)}
.so-sem-suporte{background:var(--rose)}
.so-outro,.so-desconhecido{background:var(--viz-neutro)}
.viz-tip{position:fixed;left:0;top:0;z-index:70;pointer-events:none;background:var(--p950);color:#fff;font-size:12px;line-height:1.35;font-weight:500;padding:6px 10px;border-radius:8px;box-shadow:0 8px 24px rgba(11,21,51,.3);max-width:260px;opacity:0;transition:opacity .12s}
.viz-tip.on{opacity:1}
.vz-table{margin-top:10px}
.vz-table .tbl th.rowh{font-size:12.5px;color:var(--ink);font-weight:600;text-align:left;border-bottom:1px solid var(--lav-a);padding:10px}
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.num{white-space:nowrap}
.vz-table td.strong{font-weight:700;color:var(--p900)}
/* mesma especificidade+1 de ".vz-table .tbl th.rowh" (antes o Total do tfoot saía em 600) */
.vz-table .tbl tfoot td,.vz-table .tbl tfoot th.rowh{font-weight:700;color:var(--p950);border-top:1.5px solid var(--lav-b);border-bottom:0}
.vz-note{margin-top:10px;padding-top:10px;border-top:1px dashed var(--lav-b);font-size:11.5px;color:var(--muted)}
.inv-falhas{border-top:0;margin:10px 0 0;padding-top:0}
.vz-alert{display:flex;gap:10px;align-items:flex-start;background:var(--rosebg);color:var(--rose);border:1px solid #F3C9C9;border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600;line-height:1.45;margin:10px 0 4px}
.vz-alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.vz-ok{display:flex;align-items:center;gap:8px;background:var(--okbg);color:var(--okink);border-radius:12px;padding:12px 14px;font-weight:600;font-size:12.5px;margin-top:10px}
.vz-ok svg{width:18px;height:18px;flex:none}
.venc-badge{margin-left:6px;vertical-align:middle}
/* #4 — alternador segmentado (Ativos/Ex-clientes; e Senha/Primeiro acesso no portal) */
.seg-ctrl{display:inline-flex;gap:3px;background:var(--lav-a);border:1px solid var(--lav-b);border-radius:99px;padding:3px;margin-top:14px}
.seg-ctrl .seg-opt{border:0;background:none;border-radius:99px;padding:7px 15px;font:inherit;font-size:12.5px;font-weight:600;color:var(--p800);cursor:pointer;transition:background .18s,color .18s;box-shadow:none;overflow:visible}
.seg-ctrl .seg-opt::before{display:none}
.seg-ctrl .seg-opt:hover{color:var(--p950);background:none}
.seg-ctrl .seg-opt.on{background:#fff;color:var(--p950);box-shadow:0 1px 2px rgba(11,21,51,.12)}
/* #13 — subtítulo e checklist de regras de senha no portal do cliente */
.login-sub{font-size:12.5px;color:var(--muted);line-height:1.45;margin:-2px 0 2px}
.pw-rules{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:5px}
.pw-rule{font-size:12px;color:var(--muted);padding-left:22px;position:relative;line-height:1.35}
.pw-rule::before{content:"○";position:absolute;left:4px;top:-1px;font-size:13px;color:var(--lav-c)}
.pw-rule.ok{color:var(--okink)}
.pw-rule.ok::before{content:"✓";color:var(--ok);font-weight:700}
.portal-pw{display:block;width:fit-content;margin-top:8px}

/* ---------- inventário: carteira + busca no parque ---------- */
.inv-ov{margin-bottom:14px}
.inv-res{margin-bottom:14px}
.inv-err .mini{margin-top:4px;font-size:12px}
.pq-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pq-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;background:var(--lav50);border:1px solid var(--lav-a);border-radius:12px;padding:9px 12px;font-size:12.5px;-webkit-user-select:text;user-select:text}
.pq-row:hover{border-color:var(--lav-c);background:#fff}
.pq-row:focus-visible{outline:2px solid var(--p700);outline-offset:1px}
.pq-host{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;color:var(--p950);word-break:break-all}
.pq-meta{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.pq-go{margin-left:auto;color:var(--p700);font-weight:600;font-size:12px;white-space:nowrap}
.inv-tabs{margin-top:0}
.fixa-opt{margin-top:2px}

/* ---------- celular: "Mais" (§3.10) ---------- */
.bn-sheet,.bn-ovl{display:none}
@media (max-width:1180px){.g-kpis5{grid-template-columns:repeat(3,1fr)}.g-inv2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .g-kpis4,.g-kpis5{grid-template-columns:1fr 1fr}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .bn-ovl{display:block;position:fixed;inset:0;z-index:33;background:rgba(11,21,51,.35)}
  .bn-sheet{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:36;background:#fff;border:1px solid var(--lav-a);border-radius:18px;box-shadow:0 24px 60px rgba(11,21,51,.25);padding:12px;animation:rise .22s ease both}
  .bs-item{display:flex;align-items:center;gap:10px;min-width:0;background:var(--lav50);border:1px solid var(--lav-a);border-radius:12px;padding:12px;font-size:13px;font-weight:600;color:var(--p900);text-align:left}
  .bs-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bs-item svg{width:18px;height:18px;flex:none}
  .bs-item.on{background:var(--p900);color:#fff;border-color:var(--p900)}
  .bn-item{min-width:0;flex:1 1 0;padding:5px 4px}
  .bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pq-go{margin-left:0}
}
@media (max-width:480px){
  /* rótulo em linha própria: barra ocupa a largura toda sem rolagem horizontal */
  .vz-row,.vz-so .vz-row{grid-template-columns:minmax(0,1fr) 32px;gap:4px 8px;padding:5px 0}
  .vz-lab{grid-column:1 / -1}
}

/* ==================== correções D11–D13 (docs/painel-v3-correcoes.md) ==================== */
/* selo com descrição longa na ficha do cliente: corta com reticências (texto inteiro no title) */
.loss-row>b{flex:none}
.fin-act{min-width:0}
.fin-act .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}

/* cabeçalho idêntico nos cards de gráfico → legenda-título e legendas alinhadas lado a lado */
.vz-head{min-height:24px;margin-bottom:2px}
.vz-head h3{margin:0}

/* carteira sem nenhum inventário: estado NEUTRO (não o verde de "nenhuma sem suporte") */
.vz-none{display:flex;align-items:center;gap:8px;background:var(--lav50);color:var(--muted);border:1px dashed var(--lav-b);border-radius:12px;padding:12px 14px;font-weight:600;font-size:12.5px;margin-top:10px}
.vz-none svg{width:18px;height:18px;flex:none}

/* grade de 5 KPIs (Clientes) sem buraco: 5 numa linha; ≤ 1180px 3 + 2 (os 2 esticam); celular 2 + 2 + 1 (ver ≤ 700px) */
.g-kpis5{display:flex;flex-wrap:wrap}
.g-kpis5>.kpi{flex:1 1 0;min-width:0}
@media (max-width:1180px){.g-kpis5>.kpi{flex:1 1 calc(33.333% - 10px)}}

/* tooltip no toque: acima do segmento, com seta apontando para ele */
.viz-tip.up::after{content:"";position:absolute;left:var(--cx,50%);bottom:-4px;width:9px;height:9px;margin-left:-4.5px;background:var(--p950);transform:rotate(45deg);border-radius:2px}

/* campo sensível do cofre (senha, chave, licença…): mascarado + mostrar/copiar */
.sec{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;background:var(--lav50);border:1px solid var(--lav-a);border-radius:6px;padding:2px 8px;letter-spacing:1px;word-break:break-all}
.sec-val.on{letter-spacing:0}
/* dentro de tabela: numa linha só (linha baixa; a tabela rola na horizontal) */
.tbl .sec{flex-wrap:nowrap}
.tbl .sec-val{word-break:normal;white-space:nowrap}

/* ---------- rolagem horizontal com indicação (D12): tabelas + abas da ficha ---------- */
.hs{position:relative;min-width:0;max-width:100%}
.hs-in{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--lav-c) transparent}
.hs-in::-webkit-scrollbar{height:6px}
.hs-in::-webkit-scrollbar-track{background:transparent}
.hs-in::-webkit-scrollbar-thumb{background:var(--lav-c);border-radius:99px}
/* fade + sombra na borda que ainda tem conteúdo escondido */
.hs::after,.hs.hs-fl::before{content:"";position:absolute;top:0;bottom:0;width:36px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}
.hs::after{right:0;background:linear-gradient(to left,#fff 6%,rgba(255,255,255,0));box-shadow:inset -12px 0 10px -12px rgba(11,21,51,.45)}
.hs.hs-fl::before{left:0;background:linear-gradient(to right,#fff 6%,rgba(255,255,255,0));box-shadow:inset 12px 0 10px -12px rgba(11,21,51,.45)}
.hs.hs-r::after,.hs.hs-fl.hs-l::before{opacity:1}
/* bordas "separate": célula sticky carrega a própria borda (no modelo collapse o Chrome some com o traço sob a coluna fixa) */
.hs-tbl .tbl{border-collapse:separate;border-spacing:0}
.vz-table .tbl tbody tr:last-child th.rowh{border-bottom:0}
/* 1ª coluna fixa quando a tabela rola; sombra na borda dela quando há conteúdo escondido à esquerda */
.hs-tbl.hs-on .tbl tr>:first-child{position:sticky;left:0;z-index:2;background:#fff}
.hs-tbl.hs-on .tbl tbody tr:hover>:first-child{background:var(--lav50)}
.hs-tbl.hs-on.hs-l .tbl tr>:first-child{box-shadow:10px 0 10px -10px rgba(11,21,51,.35)}
/* abas da ficha: fora do celular quebram linha normalmente (sem cortar o anel de foco) */
.hs-tabs>.hs-in{overflow:visible}
.hs-tabs::after{background:linear-gradient(to left,var(--lav50) 10%,rgba(244,246,255,0));box-shadow:none}
.hs-tabs.hs-fl::before{background:linear-gradient(to right,var(--lav50) 10%,rgba(244,246,255,0));box-shadow:none}

@media (max-width:700px){
  /* KPIs: 2 por linha; a última sozinha estica (sem buraco); o crítico ocupa a linha inteira (selo sem quebra) */
  #view .g-kpis{display:flex;flex-wrap:wrap}
  #view .g-kpis>.kpi{flex:1 1 calc(50% - 5px);min-width:0}
  #view .g-kpis>.kpi.crit{flex-basis:100%}
  /* tabela do painel: o contêiner .hs rola (a tabela volta a ser table) */
  .hs-tbl .tbl{display:table;overflow:visible;width:100%}
  /* 1ª coluna (a fixa) quebra linha numa largura contida em vez de empurrar as outras para fora */
  .hs-tbl .tbl tr>:first-child{white-space:normal;min-width:min(42vw,190px);overflow-wrap:anywhere}
  .hs-tbl .tbl .ucell b{min-width:0}
  /* abas da ficha: UMA linha rolável */
  .hs-tabs>.hs-in{overflow-x:auto;overflow-y:hidden}
  .inv-tabs{flex-wrap:nowrap;padding:3px 2px 6px;margin-top:0;scrollbar-width:none}
  .inv-tabs::-webkit-scrollbar{display:none}
  .inv-tabs .chip-opt{flex:none;white-space:nowrap}
}
@media (max-width:480px){
  .col-contato{display:none}
  .hs-tbl .tbl .ucell .avatar{display:none}
  .hs-tbl .tbl th,.hs-tbl .tbl td{padding-left:8px;padding-right:8px}
}

/* ============ v3b: cards KPI no azul da marca (pedido dos sócios) ============ */
/* Só os cards de número (.kpi) ficam azuis; cards de tabela/gráfico seguem claros. */
.kpi{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(11,21,51,.14)}
.kpi .big{color:#fff}
/* mesma especificidade (0,3,0) da regra antiga ".kpi.crit .big{color:rose}", que sobre o azul some.
   A criticidade continua sinalizada sem cor, pelo selo ⚠ "fim do suporte Microsoft". */
.kpi.crit .big{color:#fff}
.kpi .lbl{color:rgba(255,255,255,.82)}
.kpi .badge{background:rgba(255,255,255,.18);color:#fff}
.kpi .badge.up{background:var(--okbg);color:var(--ok)}
.kpi .badge.wn{background:var(--rosebg);color:var(--rose)}
.kpi .badge.warn{background:var(--warnbg);color:var(--warnink)}
.kpi .badge.hot{background:#FDECEA;color:var(--pink)}
.kpi .badge.mut{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.kpi:focus-within{outline:2px solid var(--p600);outline-offset:2px}

/* ============ v3b: gráficos de repartição (Máquinas/Impressoras/Servidores/E-mail) ============ */
.brk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:start}
@media (max-width:820px){.brk-grid{grid-template-columns:1fr}}
.vz-brk .vz-row{grid-template-columns:minmax(0,150px) minmax(0,1fr) 40px}
.seg-brk{background:var(--p700)}
.seg-brk.seg-nulo{background:var(--viz-neutro)}
.seg-brk.seg-out{background:var(--lilac)}
.brk-empty{color:var(--muted);font-size:12.5px;padding:14px 2px}

/* ============ v3b: editor do inventário ============ */
.inv-edit-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px}
/* #12 — ações do estado vazio + modal de importação de planilha */
.inv-empty-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.inv-empty-dica{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.45}
.imp-resumo{margin:10px 0 2px}
.imp-ok{font-weight:700;color:var(--okink);font-size:12.5px;margin-bottom:4px}
.imp-lista{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink)}
.imp-lista li{margin:2px 0}
.inv-edit-hint{font-size:11.5px;color:var(--muted)}
.sec-add{margin:2px 0 12px}
.item-actions{display:inline-flex;gap:6px;margin-left:auto}
.mc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rede-group{margin-bottom:18px}
.rede-group>.subh{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700;font-size:12.5px;color:var(--p900)}
.rede-stack{display:flex;flex-direction:column;gap:12px}
.link-del{color:var(--rose);font-weight:700;background:none;border:0;cursor:pointer;font-size:12px;padding:2px 4px}
.link-del:hover{text-decoration:underline}
.mbox .fld{margin-bottom:2px}
.mbox .cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:560px){.mbox .cols2{grid-template-columns:1fr}}
/* ficha de cadastro do inventário (muitos campos): mais larga e SEMPRE rolável, para o botão nunca sumir.
   No desktop a base .mbox não tinha altura máxima; no celular a base já é bottom-sheet rolável (max-width:100% mantém). */
.mbox.mbox-inv{width:600px;max-height:88vh;overflow-y:auto}

/* ============ v3e: realce dos cards brancos (pedido dos sócios — destacar as informações) ============ */
/* elevação suave: os cards claros "sobem" do fundo lavanda sem perder legibilidade. */
.card{box-shadow:0 1px 2px rgba(11,21,51,.05),0 12px 28px rgba(11,21,51,.05)}
.card h3{letter-spacing:-.1px}
/* logo da DuoByte no canto direito da barra superior do portal do cliente (#14) */
.cli-logo{height:46px;width:auto;object-fit:contain;flex:none}
.cli-hero .acts{margin-left:auto;align-items:center}
@media (max-width:560px){.cli-logo{height:34px}}

/* ============ v3e: calendário da Agenda (#6) ============ */
.cal-card{margin-bottom:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-weight:700;font-size:14px;color:var(--p950);text-transform:capitalize}
.cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--lav-b);background:#fff;color:var(--p800);font-size:16px;cursor:pointer;line-height:1}
.cal-nav:hover{background:var(--lav-a)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{position:relative;aspect-ratio:1;border:1px solid var(--lav-a);border-radius:9px;background:var(--lav50);color:var(--ink);font:inherit;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-start;padding:5px 6px;min-height:40px}
.cal-cell.empty{border:0;background:transparent;cursor:default}
.cal-cell:not(.empty):hover{border-color:var(--p700);background:var(--lav-a)}
.cal-cell .cal-d{font-size:12px;font-weight:600}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--p700)}
.cal-cell.has{background:var(--p700);border-color:var(--p700)}
.cal-cell.has .cal-d{color:#fff}
.cal-badge{position:absolute;right:4px;bottom:4px;background:#fff;color:var(--p800);font-size:10px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px}
@media (max-width:560px){.cal-cell{min-height:34px;padding:3px 4px}.cal-cell .cal-d{font-size:11px}}