:root{
  --or:#EA580C; --or-strong:#C2410C; --or-bright:#F97316; --or-tint:#FFF1E7; --or-line:#FFD9BF;
  --ink:#141518; --ink2:#3A3D42; --muted:#6E747E; --faint:#9AA0AA;
  --bg:#F2F3F5; --card:#FFFFFF; --line:#E4E6E9; --line2:#EDEEF1;
  --ok:#15803D; --ok-bg:#E8F5EC; --warn:#B45309; --warn-bg:#FDF3E1; --bad:#B91C1C; --bad-bg:#FBEAEA; --off:#6E747E; --off-bg:#EEEFF2;
  --dark:#121316; --dark2:#1C1D21;
  --r:12px; --shadow:0 1px 2px rgba(20,21,24,.05), 0 4px 16px rgba(20,21,24,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Segoe UI","Segoe UI Variable Text",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select{font:inherit}
::selection{background:var(--or-tint)}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:50;display:flex;background:var(--card)}
#login .brand-side{flex:1.1;background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px;position:relative;overflow:hidden}
#login .brand-side::after{content:"";position:absolute;right:-180px;bottom:-180px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(234,88,12,.55), rgba(234,88,12,0) 62%)}
#login .glogo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;letter-spacing:.2px}
#login .tagline{max-width:420px;position:relative;z-index:1}
#login .tagline h2{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.4px;text-wrap:balance}
#login .tagline p{margin-top:14px;color:#B9BCC3;font-size:14px}
#login .modchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
#login .modchips span{border:1px solid #33353B;color:#C9CCD2;border-radius:999px;padding:4px 12px;font-size:11px}
#login .form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:360px}
.login-card h1{font-size:22px;letter-spacing:-.3px}
.login-card .sub{color:var(--muted);margin:6px 0 26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;background:#FAFAFB;transition:.15s}
.field input:focus{outline:none;border-color:var(--or);background:#fff;box-shadow:0 0 0 3px var(--or-tint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:10px;padding:11px 18px;transition:.15s}
.btn-primary{background:var(--or);color:#fff;width:100%}
.btn-primary:hover{background:var(--or-strong)}
.btn:focus-visible,.nav-item:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.login-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:var(--muted)}
.login-foot a{color:var(--or);font-weight:600;text-decoration:none}
.otp-hint{margin-top:26px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;font-size:11.5px;color:var(--muted)}

/* ---------- APP SHELL ---------- */
#app{display:none;height:100vh}
#app.on{display:flex}
aside{width:224px;background:var(--dark);color:#C9CCD2;display:flex;flex-direction:column;flex-shrink:0}
.side-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;color:#fff;font-weight:700;font-size:14.5px}
.side-sec{font-size:9.5px;text-transform:uppercase;letter-spacing:1.6px;color:#6E7076;padding:14px 18px 6px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:#C9CCD2;padding:9px 18px;font-size:13px;border-left:3px solid transparent;transition:.12s}
.nav-item svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--dark2);color:#fff}
.nav-item.on{background:linear-gradient(90deg, rgba(234,88,12,.16), rgba(234,88,12,0));color:#fff;border-left-color:var(--or-bright)}
.side-bottom{margin-top:auto;padding:16px 18px;border-top:1px solid #26272C;display:flex;align-items:center;gap:10px;font-size:12px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--or);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 24px;height:56px;flex-shrink:0}
.topbar h1{font-size:16px;letter-spacing:-.2px}
.crumb{color:var(--faint);font-size:11.5px}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px;width:280px;color:var(--muted)}
.search input{border:none;background:none;outline:none;width:100%;font-size:12.5px}
.icon-btn{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
.icon-btn:hover{background:var(--bg);color:var(--ink)}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--or);border:1.5px solid #fff}
.content{flex:1;overflow:auto;padding:22px 24px 40px}
.screen{display:none;max-width:1180px;margin:0 auto}
.screen.on{display:block}

/* ---------- COMPONENTS ---------- */
.grid{display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card .hd{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.card .hd h3{font-size:13px;font-weight:700}
.card .hd .sub{font-size:11px;color:var(--muted)}
.card .hd .spacer{margin-left:auto}
.card .bd{padding:12px 16px 16px}
.link{color:var(--or);font-weight:600;font-size:11.5px;text-decoration:none}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;position:relative;overflow:hidden}
.tile .lb{font-size:11px;color:var(--muted);font-weight:600}
.tile .vl{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.tile .dl{font-size:11px;margin-top:4px;font-weight:600}
.up{color:var(--ok)} .down{color:var(--bad)} .flat{color:var(--muted)}
.tile .ic{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;background:var(--or-tint);color:var(--or);display:flex;align-items:center;justify-content:center}
.tile .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-size:10.5px;font-weight:700;padding:2.5px 9px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-bg);color:var(--ok)} .p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--bad-bg);color:var(--bad)} .p-off{background:var(--off-bg);color:var(--off)}
.p-or{background:var(--or-tint);color:var(--or-strong)}
table.tb{width:100%;border-collapse:collapse}
.tb th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--faint);text-align:left;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.tb td{padding:9px 10px;border-bottom:1px solid var(--line2);font-size:12.5px;vertical-align:middle}
.tb tr:hover td{background:#FAFAFB}
.tb .num{text-align:right;font-variant-numeric:tabular-nums}
.mini-id{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:9px}
.who .avatar{width:26px;height:26px;font-size:10px;background:var(--ink2)}
.who small{display:block;color:var(--faint);font-size:10.5px}
.filters{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.filters select,.filters input{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 11px;font-size:12px;color:var(--ink2)}
.filters .grow{flex:1}
.btn-sm{background:var(--or);color:#fff;font-weight:700;border-radius:9px;padding:7px 14px;font-size:12px}
.btn-sm:hover{background:var(--or-strong)}
.btn-ghost{border:1px solid var(--line);background:var(--card);color:var(--ink2);font-weight:600;border-radius:9px;padding:7px 12px;font-size:12px}
.btn-ghost:hover{border-color:var(--or);color:var(--or)}
.legend{display:flex;gap:14px;font-size:11px;color:var(--muted);align-items:center}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:10px 12px;font-size:12px;color:var(--muted)}
.pager button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);color:var(--ink2);font-weight:600}
.pager button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
svg text{font-family:inherit}
.axis{font-size:10px;fill:var(--faint)}
.dlabel{font-size:10px;font-weight:700;fill:var(--ink2)}
#tip{position:fixed;z-index:99;background:var(--ink);color:#fff;font-size:11px;padding:6px 10px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .1s;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#tip b{color:#FFB27D}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.kanban.c5{grid-template-columns:repeat(5,1fr)}
.kcol{background:#ECEDEF;border-radius:var(--r);padding:10px}
.kcol .khd{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:12px;font-weight:700}
.kcol .khd .cnt{background:#fff;border-radius:999px;padding:1px 8px;font-size:10.5px;color:var(--muted)}
.kcol .khd .sum{margin-left:auto;font-size:10.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.kdot{width:8px;height:8px;border-radius:50%}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:grab}
.kcard:hover{border-color:var(--or-line);box-shadow:0 3px 10px rgba(234,88,12,.10)}
.kcard .t{font-weight:700;font-size:12.5px}
.kcard .d{color:var(--muted);font-size:11.5px;margin-top:2px}
.kcard .ft{display:flex;align-items:center;gap:7px;margin-top:9px}
.kcard .ft .avatar{width:22px;height:22px;font-size:9px;background:var(--ink2)}
.kcard .ft time{margin-left:auto;font-size:10.5px;color:var(--faint)}
.tagp{font-size:9.5px;font-weight:800;letter-spacing:.4px;border-radius:6px;padding:2px 7px;text-transform:uppercase}
.tp-alta{background:var(--bad-bg);color:var(--bad)} .tp-media{background:var(--warn-bg);color:var(--warn)} .tp-baixa{background:var(--off-bg);color:var(--off)}
.tp-inst{background:var(--or-tint);color:var(--or-strong)}

/* cliente 360 */
.c360-head{display:flex;align-items:center;gap:16px;padding:18px}
.c360-head .avatar{width:52px;height:52px;font-size:18px;background:var(--ink)}
.c360-head h2{font-size:18px;letter-spacing:-.3px}
.c360-head .meta{color:var(--muted);font-size:12px;margin-top:2px}
.c360-stats{display:flex;gap:0;border-top:1px solid var(--line)}
.c360-stats>div{flex:1;padding:12px 18px;border-right:1px solid var(--line2)}
.c360-stats>div:last-child{border-right:none}
.c360-stats .k{font-size:10.5px;color:var(--muted);font-weight:600}
.c360-stats .v{font-size:16px;font-weight:700;margin-top:2px}
.tl{list-style:none}
.tl li{position:relative;padding:0 0 16px 22px}
.tl li::before{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--or)}
.tl li::after{content:"";position:absolute;left:8.5px;top:16px;bottom:-2px;width:1.5px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl .t{font-weight:700;font-size:12px}
.tl .d{color:var(--muted);font-size:11.5px}
.tl time{font-size:10.5px;color:var(--faint)}

/* phone */
.phone-wrap{display:flex;gap:28px;align-items:flex-start}
.phone{width:300px;flex-shrink:0;background:var(--dark);border-radius:34px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.phone .scr{background:var(--bg);border-radius:24px;overflow:hidden}
.phone .notch{height:22px;background:var(--dark);border-radius:0 0 14px 14px;width:130px;margin:0 auto}
.ph-head{background:var(--or);color:#fff;padding:38px 18px 40px;margin-top:-22px}
.ph-head .hi{font-size:12px;opacity:.85}
.ph-head .nm{font-size:16px;font-weight:700}
.ph-card{background:#fff;border-radius:14px;margin:12px 14px;padding:13px 14px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ph-card .k{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 14px 16px}
.ph-grid button{background:#fff;border-radius:12px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9.5px;color:var(--ink2);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.ph-grid svg{width:18px;height:18px;stroke:var(--or);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.consumo-bar{height:8px;border-radius:4px;background:var(--line2);overflow:hidden;margin-top:8px}
.consumo-bar i{display:block;height:100%;width:64%;border-radius:4px;background:var(--or)}

/* nav scroll */
.navwrap{flex:1;overflow-y:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#33353B transparent}

/* dashboard hub tabs */
.dtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.dtab{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--ink2)}
.dtab:hover{border-color:var(--or);color:var(--or)}
.dtab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dpanel{display:none}.dpanel.on{display:block}

/* occupancy bar */
.occ{background:var(--line2);border-radius:5px;height:9px;overflow:hidden;min-width:110px}
.occ i{display:block;height:100%;border-radius:5px;background:var(--or)}

/* CTO port grid */
.ports{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.ports span{height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;background:var(--ok-bg);color:var(--ok)}
.ports span.busy{background:var(--off-bg);color:var(--faint)}
.ports span.sel{background:var(--or);color:#fff;box-shadow:0 0 0 2px var(--or-line)}

/* chat */
.msgs{display:flex;flex-direction:column;gap:8px;max-height:290px;overflow:auto;padding:4px 2px}
.msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:12px;background:var(--bg);border:1px solid var(--line2)}
.msg.me{align-self:flex-end;background:var(--or-tint);border-color:var(--or-line)}
.msg time{display:block;font-size:9.5px;color:var(--faint);margin-top:3px}
.inbox-item{display:block;width:100%;text-align:left;padding:11px 13px;border-bottom:1px solid var(--line2);transition:.12s}
.inbox-item:hover{background:#FAFAFB}
.inbox-item.on{background:var(--or-tint);border-left:3px solid var(--or)}
.inbox-item .t{font-weight:700;font-size:12.5px;display:flex;justify-content:space-between;gap:8px}
.inbox-item .d{color:var(--muted);font-size:11px;margin-top:2px}

/* switch */
.switch{display:inline-block;width:34px;height:19px;border-radius:999px;background:#CDD0D6;position:relative;flex-shrink:0;vertical-align:middle}
.switch.on{background:var(--or)}
.switch::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.switch.on::after{left:17px}

/* permission matrix */
.perm td,.perm th{text-align:center}
.perm td:first-child,.perm th:first-child{text-align:left}
.perm .y{color:var(--ok);font-weight:800}
.perm .n{color:#CDD0D6;font-weight:700}
.ring-lb{font-size:10px;fill:#6E747E}

.chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;color:var(--ink2)}

/* forms (template CRUD) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form-grid .full{grid-column:1/-1}
.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#FAFAFB;transition:.15s}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--or);background:#fff;box-shadow:0 0 0 3px var(--or-tint)}
.tgl-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:12px}
.form-foot{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line2);margin-top:14px;padding-top:14px}

/* OTP */
.otp{display:flex;gap:8px}
.otp input{width:46px;height:54px;text-align:center;font-size:21px;font-weight:700;border:1.5px solid var(--line);border-radius:10px;background:#FAFAFB}
.otp input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--or-tint)}

/* PDV */
.payopt{display:flex;gap:8px}
.payopt button{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 6px;font-size:11.5px;font-weight:700;color:var(--ink2)}
.payopt button.on{border-color:var(--or);background:var(--or-tint);color:var(--or-strong)}


/* ===================================================================
   RESPONSIVIDADE — MOBILE FIRST
   Breakpoints:  <=1280 laptop estreito · <=1024 tablet
                 <=900  celular/tablet retrato (drawer + tab bar)
                 <=560  celular · <=400 celular compacto
   =================================================================== */

/* ---------- fundamentos táteis (todas as larguras) ---------- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
button,a,input,select,textarea,.nav-item,.kcard,.inbox-item,.dtab{-webkit-tap-highlight-color:rgba(234,88,12,.18)}
img{max-width:100%;height:auto}
#app{height:100vh;height:var(--appvh,100vh);height:100dvh}
#login{height:100vh;height:var(--appvh,100vh);height:100dvh}
.content,.navwrap,.msgs{-webkit-overflow-scrolling:touch}

/* gráficos SVG fluidos (viewBox 3xx–7xx = gráficos; 24x24 = ícones) */
svg[viewBox^="0 0 3"],svg[viewBox^="0 0 5"],svg[viewBox^="0 0 6"],svg[viewBox^="0 0 7"],svg.chart{
  width:100%;height:auto;display:block;max-width:100%}
/* quando o layout vira coluna única, o gráfico não deve ampliar demais
   (--vbw = largura natural do viewBox, definida via JS) */
@media (max-width:1024px){
  svg.chart{max-width:calc(var(--vbw) * 1.3)}
}

/* wrappers de rolagem horizontal (criados via JS) */
.tbwrap,.chartwrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
/* sombras que aparecem só quando há conteúdo fora da tela (dica de rolagem) */
.tbwrap,.chartwrap{
  background:
    linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--card) 40%, rgba(255,255,255,0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20,21,24,.13), rgba(20,21,24,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,21,24,.13), rgba(20,21,24,0)) right center / 11px 100% no-repeat scroll;
}
.tbwrap::-webkit-scrollbar,.chartwrap::-webkit-scrollbar,.kanban::-webkit-scrollbar,.dtabs::-webkit-scrollbar{height:5px}
.tbwrap::-webkit-scrollbar-thumb,.chartwrap::-webkit-scrollbar-thumb,.kanban::-webkit-scrollbar-thumb,.dtabs::-webkit-scrollbar-thumb{background:#CDD0D6;border-radius:3px}

/* controles exclusivos de mobile — ocultos no desktop */
#navToggle,#navClose,#navScrim,#mobsearch,#tabbar{display:none}

/* ============ <= 1280px — laptops estreitos ============ */
@media (max-width:1280px){
  aside{width:204px}
  .content{padding:20px 18px 36px}
  .search{width:210px}
}

/* ============ <= 1024px — tablets ============ */
@media (max-width:1024px){
  .grid[style*="290px"],.grid[style*="2fr 1fr 1fr"],.grid[style*="repeat(3,1fr)"]{grid-template-columns:minmax(0,1fr) !important}
  .grid>*{min-width:0}
  .kanban,.kanban.c5{grid-template-columns:repeat(3,1fr)}
  .phone-wrap{flex-direction:column;align-items:stretch;gap:18px}
  .phone{margin:0 auto}
  .search{width:170px}
}

/* ============ <= 900px — CELULAR / TABLET RETRATO ============ */
@media (max-width:900px){

  /* ---- shell: menu lateral vira gaveta (off-canvas) ---- */
  aside{
    position:fixed;top:0;left:0;bottom:0;z-index:70;
    width:min(84vw,300px);
    padding-top:env(safe-area-inset-top);
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  aside.open{transform:translateX(0)}
  #navScrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(16,17,20,.55);
    opacity:0;pointer-events:none;transition:opacity .2s}
  #navScrim.on{opacity:1;pointer-events:auto}
  body.navopen{overflow:hidden}
  .nav-item{padding:12px 18px;font-size:14px}
  .nav-item svg{width:19px;height:19px}
  .side-sec{padding:16px 18px 6px}
  .side-logo{padding:16px 12px 12px 18px}
  #navClose{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
    width:36px;height:36px;border-radius:9px;color:#9AA0AA;font-size:19px;line-height:1;flex-shrink:0}
  #navClose:hover{background:var(--dark2);color:#fff}
  .side-bottom{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

  /* ---- topbar compacta ---- */
  main{position:relative;min-width:0}
  .topbar{gap:6px;padding:0 8px 0 4px;height:calc(56px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top)}
  .topbar .tbtitle{flex:1;min-width:0}
  .topbar .crumb{display:none}
  .topbar h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #navToggle,#mobsearch{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:10px;color:var(--ink2);flex-shrink:0}
  #navToggle:active,#mobsearch:active{background:var(--bg)}
  .icon-btn{width:40px;height:40px}
  .topbar>.avatar{width:32px;height:32px}
  /* busca vira linha própria, aberta pelo ícone */
  .topbar .search{position:absolute;top:100%;left:0;right:0;width:auto;margin:0;z-index:30;
    display:none;border-radius:0;border:none;border-bottom:1px solid var(--line);
    background:var(--card);padding:11px 14px;box-shadow:var(--shadow)}
  .topbar .search.open{display:flex}

  /* ---- conteúdo ---- */
  .content{
    padding:14px 14px calc(78px + env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .screen{max-width:100%}

  /* ---- barra de abas inferior ---- */
  #app.on #tabbar{display:flex}
  #tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(20,21,24,.07);
    padding-bottom:env(safe-area-inset-bottom)}
  #tabbar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px 7px;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.1px}
  #tabbar button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  #tabbar button.on{color:var(--or)}
  #tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- grids: coluna única (minmax(0,..) impede estouro do item) ---- */
  .grid{grid-template-columns:minmax(0,1fr) !important;gap:12px}
  .grid>*,.tiles>*,.card,.screen{min-width:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:12px 13px}
  .tile .lb{padding-right:32px}
  .tile .vl{font-size:20px}
  .tile .ic{width:28px;height:28px;top:11px;right:11px;border-radius:8px}
  .tile .ic svg{width:14px;height:14px}
  .form-grid{grid-template-columns:1fr}
  .c360-head{flex-wrap:wrap;padding:14px;gap:12px}
  .c360-head .avatar{width:44px;height:44px;font-size:16px}
  .c360-stats{display:grid;grid-template-columns:1fr 1fr}
  .c360-stats>div{padding:11px 14px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .c360-stats>div:nth-child(2n){border-right:none}
  .c360-stats>div:last-child{border-bottom:none}
  .c360-stats>div:last-child:nth-child(odd){grid-column:1/-1;border-right:none}

  /* ---- kanban: rolagem horizontal com snap ---- */
  .kanban,.kanban.c5{grid-template-columns:none !important;grid-auto-flow:column;
    grid-auto-columns:minmax(230px,76vw);overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:8px}
  .kcol{scroll-snap-align:start}

  /* ---- abas de dashboard: faixa rolável ---- */
  .dtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
  .dtab{flex:0 0 auto;padding:8px 15px;scroll-snap-align:start}

  /* ---- tabelas roláveis ---- */
  .tbwrap table.tb{width:auto;min-width:100%;white-space:nowrap}
  .tb th{padding:9px 12px}
  .tb td{padding:11px 12px;font-size:12.5px}
  .tb tr:hover td{background:transparent}

  /* ---- gráficos largos: rolagem lateral preserva legibilidade ---- */
  .chartwrap>svg{min-width:440px}

  /* ---- filtros em grade ---- */
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .filters select,.filters input,.filters button{width:100%;min-height:42px}
  .filters .grow,.filters .legend{grid-column:1/-1}
  .filters span.grow{display:none}
  .filters .legend{flex-wrap:wrap;gap:8px}

  /* ---- linhas flex declaradas inline podem quebrar em telas estreitas ---- */
  [style*="display:flex"]{flex-wrap:wrap}
  input,select,textarea{min-width:0;max-width:100%}

  /* ---- alvos de toque ---- */
  .btn-sm,.btn-ghost{min-height:42px;padding:9px 14px}
  .btn{padding:13px 18px}
  .pager{justify-content:center;flex-wrap:wrap}
  .pager button{width:34px;height:34px}
  .form-foot{flex-direction:column-reverse;gap:8px}
  .form-foot button{width:100%}
  .payopt{flex-wrap:wrap}
  .payopt button{min-height:44px}
  .inbox-item{padding:13px}
  .kcard{cursor:default}
  .msgs{max-height:50vh}
  .msg{max-width:88%}

  /* ---- evita o zoom automático do iOS ao focar campos ---- */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important}
  .otp input{font-size:22px !important}
  .field input,.field select,.field textarea{padding:12px 13px}

  /* ---- app do assinante ---- */
  .phone{width:100%;max-width:320px}

  /* ---- OTP fluido ---- */
  .otp{gap:6px}
  .otp input{flex:1 1 0;min-width:0;width:auto;height:56px}
}

/* ============ <= 860px — LOGIN empilhado ============ */
@media (max-width:860px){
  #login{display:block;height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto}
  #login .brand-side{padding:calc(26px + env(safe-area-inset-top)) 22px 26px}
  #login .brand-side::after{right:-140px;bottom:-160px;width:340px;height:340px}
  #login .glogo{font-size:16px}
  #login .tagline{max-width:none;margin-top:20px}
  #login .tagline h2{font-size:22px}
  #login .tagline p{font-size:13px;margin-top:10px}
  #login .modchips{margin-top:16px;gap:6px}
  #login .modchips span{font-size:10.5px;padding:3px 10px}
  #login .brand-side>div:last-child{margin-top:20px}
  #login .form-side{padding:26px 20px calc(34px + env(safe-area-inset-bottom))}
  .login-card{width:100%;max-width:400px;margin:0 auto}
  .login-card h1{font-size:20px}
}

/* ============ <= 560px — CELULARES ============ */
@media (max-width:560px){
  .content{padding-top:12px}
  .card .hd{padding:12px 13px 0;flex-wrap:wrap;gap:8px}
  .card .bd{padding:11px 13px 13px}
  .tiles{gap:9px}
  .tile .vl{font-size:19px}
  .ports{grid-template-columns:repeat(6,1fr)}
  .c360-head h2{font-size:16px}
  .legend{flex-wrap:wrap;gap:8px 12px}
  #tabbar button{font-size:9px}
  .topbar .icon-btn[data-hide-sm]{display:none}
  #login .modchips span:nth-child(n+5){display:none}
}

/* ============ <= 400px — CELULARES ESTREITOS ============ */
@media (max-width:400px){
  .content{padding-left:max(11px,env(safe-area-inset-left));padding-right:max(11px,env(safe-area-inset-right))}
  .otp input{height:50px}
  .ports{grid-template-columns:repeat(5,1fr)}
  .topbar h1{font-size:14px}
  .chartwrap>svg{min-width:400px}
}

/* ============ <= 340px — CELULARES MUITO COMPACTOS ============ */
@media (max-width:340px){
  .filters{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .tile .vl{font-size:22px}
  .ports{grid-template-columns:repeat(4,1fr)}
}

/* ============ celular deitado (landscape de baixa altura) ============ */
@media (max-width:900px) and (max-height:460px) and (orientation:landscape){
  .topbar{height:calc(48px + env(safe-area-inset-top))}
  #tabbar button{flex-direction:row;gap:6px;padding:6px 2px}
  .content{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============ dispositivos sem hover (toque) ============ */
@media (hover:none){
  .tb tr:hover td{background:transparent}
  .inbox-item:hover{background:transparent}
  .kcard:hover{border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
}

/* ============ acessibilidade: movimento reduzido ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- impressão ---------- */
@media print{
  aside,#tabbar,#navScrim,.topbar{display:none !important}
  #app.on{display:block;height:auto}
  .content{overflow:visible;padding:0}
}