/* ============================================================
   SGA · Almoxarifados Oficiais — design system
   Azul Sabesp como cor única de marca; cor semântica só p/ status.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* AZUL SABESP OFICIAL — #0093DD, amostrado do logo institucional.
     --sab  = cor de MARCA (fundos, gradientes, texto grande). Contraste 3,4:1 no branco:
              usar só em área grande, nunca em texto pequeno.
     --brand= cor INTERATIVA (botões, links, ícones). 4,9:1 no branco = AA em texto normal. */
  --sab:#0093DD; --sab-600:#007CBE;
  --brand:#0077B3; --brand-600:#005F8F; --brand-700:#004E75;
  --brand-050:#E9F6FD; --brand-100:#CCE9F8;
  --navy:#06344B; --navy-900:#042534;
  --ink:#0F2A3A; --ink-2:#3E5A6B; --ink-3:#6E8A9B;
  --bg:#F4F8FA; --card:#FFFFFF; --line:#E1EBF1;
  --ok:#0E9F6E; --ok-bg:#E3F6EE;
  --warn:#D97706; --warn-bg:#FEF3E2;
  --bad:#DC2626; --bad-bg:#FCE9E9;
  --neutral:#64748B; --neutral-bg:#EEF2F5;
  --shadow:0 1px 2px rgba(15,42,58,.04),0 4px 16px rgba(15,42,58,.06);
  --shadow-lg:0 8px 30px rgba(15,42,58,.12);
  --r:14px; --r-sm:10px;
  --sb:248px;
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}

/* ---------- LOGIN ---------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}
.login-shell::before{content:'';position:fixed;inset:0;background:url('fundo.jpg') center/cover no-repeat;z-index:0}
.login-shell::after{content:'';position:fixed;inset:0;background:linear-gradient(120deg,rgba(10,46,68,.92),rgba(10,110,158,.55));z-index:0}
.login-shell>*{position:relative;z-index:1}
.login-card{width:100%;max-width:392px;background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);padding:40px 34px;text-align:center;border:1px solid var(--line)}
.login-card img{height:42px;margin-bottom:22px}
.login-card h1{font-size:21px;font-weight:800;letter-spacing:-.4px}
.login-card p{color:var(--ink-3);margin:6px 0 24px;font-size:14px}
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:15px;font-family:inherit;transition:border-color .15s}
.field input:focus{outline:none;border-color:var(--brand)}
.btn{border:none;border-radius:var(--r-sm);font-family:inherit;font-weight:700;cursor:pointer;transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand);color:#fff;padding:12px;font-size:15px;width:100%}
.btn-brand:hover{filter:brightness(1.06)}
.login-erro{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

/* ---------- APP SHELL ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:linear-gradient(180deg,var(--navy),var(--navy-900));color:#CFE3EE;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40}
.sidebar .brand{padding:22px 22px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand img{height:26px}
/* mascote (empilhadeira) no sidebar: badge branco p/ aparecer COLORIDA, sem o filtro que a deixava toda branca */
.sidebar .brand #logoSideSGA img{filter:none!important;height:46px;width:46px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.sidebar .brand b{font-size:15px;font-weight:800;color:#fff;letter-spacing:.3px;display:block}
.sidebar .brand span{font-size:10px;letter-spacing:1.5px;color:#7FA7BC}
.nav{flex:1;padding:14px 12px;overflow-y:auto}
.nav .grp{font-size:10px;letter-spacing:1.2px;color:#5E88A0;font-weight:700;padding:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#B6D2E1;font-weight:600;font-size:13.5px;margin-bottom:2px;cursor:pointer;transition:background .12s,color .12s}
.nav a svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(10,110,158,.4)}
.sidebar .foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
.sidebar .foot .user{color:#fff;font-weight:600}
.sidebar .foot .role{color:#7FA7BC;font-size:11px}
.sidebar .foot button{margin-top:10px;width:100%;background:rgba(255,255,255,.1);color:#fff;border:none;padding:9px;border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit}
.sidebar .foot button:hover{background:rgba(255,255,255,.18)}

.main{flex:1;margin-left:var(--sb);min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30}
.topbar h2{font-size:18px;font-weight:800;letter-spacing:-.3px}
.topbar .sub{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.topbar .actions{display:flex;gap:10px;align-items:center}
.content{padding:24px 28px 56px;max-width:1680px;width:100%;margin:0 auto}

/* ---------- FILTROS ---------- */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.select,.input{padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:13.5px;font-family:inherit;background:var(--card);color:var(--ink)}
.select:focus,.input:focus{outline:none;border-color:var(--brand)}
.input{flex:1;min-width:220px}
.segmented{display:inline-flex;background:var(--neutral-bg);border-radius:10px;padding:3px}
.segmented button{border:none;background:transparent;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit}
.segmented button.on{background:var(--card);color:var(--brand);box-shadow:var(--shadow)}
.btn-ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);padding:9px 14px;font-size:13px;font-weight:600;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:7px}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-ghost svg{width:16px;height:16px;stroke:currentColor}

/* ---------- HERO + KPIs ---------- */
.hero{background:linear-gradient(120deg,var(--sab),var(--brand-600) 62%,var(--brand-700));color:#fff;border-radius:var(--r);padding:24px 26px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;box-shadow:var(--shadow)}
.hero .label{font-size:12.5px;font-weight:600;opacity:.9;letter-spacing:.4px;text-transform:uppercase}
/* line-height 1 cortava descendentes/acentos dos números — 1.12 dá folga sem afastar */
.hero .big{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-1px;line-height:1.12;margin-top:8px;font-variant-numeric:tabular-nums;overflow-wrap:break-word;min-width:0}
.hero .ctx{font-size:13px;opacity:.9;margin-top:8px}
.hero .side{text-align:right;font-size:13px;opacity:.95}
.hero .side .v{font-size:22px;font-weight:800}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.kpi .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kpi .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-050)}
.kpi .icon svg{width:19px;height:19px;stroke:var(--brand)}
.kpi .delta{font-size:12px;font-weight:700;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.kpi .delta.up{background:var(--ok-bg);color:var(--ok)}
.kpi .delta.down{background:var(--bad-bg);color:var(--bad)}
.kpi .delta.flat{background:var(--neutral-bg);color:var(--neutral)}
.kpi .val{font-size:27px;font-weight:800;letter-spacing:-.6px}
.kpi .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:3px}

/* ---------- CARDS / PANELS ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.panel .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.panel h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.panel h3 .dot{width:8px;height:8px;border-radius:3px;background:var(--brand)}
.panel .hint{font-size:12px;color:var(--ink-3)}
.chart-wrap{position:relative;height:260px}
.chart-wrap.sm{height:200px}

/* ---------- TABELA ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:#F7FAFC;text-align:left;padding:11px 13px;font-weight:700;color:var(--ink-2);white-space:nowrap;border-bottom:1px solid var(--line);position:sticky;top:0;cursor:pointer;user-select:none}
thead th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
thead th.no-sort{cursor:default}
tbody td{padding:10px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:#FCFDFE}
tbody tr:hover{background:var(--brand-050)}
tfoot td{padding:11px 13px;font-weight:800;border-top:2px solid var(--line);background:#F7FAFC}
.badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;display:inline-block}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-bad{background:var(--bad-bg);color:var(--bad)}.b-neutral{background:var(--neutral-bg);color:var(--neutral)}
.tblcount{font-size:12px;color:var(--ink-3);text-align:right;padding:10px 2px 0}

/* ---------- ESTADO VAZIO ---------- */
.empty{text-align:center;padding:44px 24px;color:var(--ink-3)}
.empty svg{width:46px;height:46px;stroke:var(--ink-3);opacity:.5;margin-bottom:14px}
.empty b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:6px}
.empty p{font-size:13.5px;max-width:420px;margin:0 auto;line-height:1.6}
.empty .cta{margin-top:16px}

/* ---------- FICHA SKU ---------- */
.ficha-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.ficha-head .code{font-size:20px;font-weight:800;letter-spacing:-.3px}
.ficha-head .desc{color:var(--ink-2);font-size:14px;margin-top:2px}
.ficha-head .meta{color:var(--ink-3);font-size:12.5px;margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.ficha-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.ficha-cell{background:#F9FBFC;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px}
.ficha-cell .k{font-size:11px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.ficha-cell .v{font-size:18px;font-weight:800;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:20px}

/* ---------- IMPORT ---------- */
.imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.imp-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.imp-card .tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:12px;letter-spacing:.3px}
.tag-subst{background:var(--warn-bg);color:var(--warn)}.tag-acum{background:var(--ok-bg);color:var(--ok)}
.imp-card h4{font-size:14.5px;margin:10px 0 4px}
.imp-card .d{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:14px;min-height:36px}
.dropzone{border:2px dashed var(--line);border-radius:var(--r-sm);padding:20px;text-align:center;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.hover{border-color:var(--brand);background:var(--brand-050)}
.dropzone svg{width:28px;height:28px;stroke:var(--brand);margin-bottom:6px}
.dropzone b{display:block;font-size:13px}.dropzone span{font-size:11.5px;color:var(--ink-3)}
.imp-status{font-size:12px;font-weight:600;margin-top:10px;min-height:16px}
.s-ok{color:var(--ok)}.s-err{color:var(--bad)}.s-load{color:var(--brand)}

/* ---------- ERROS OPERADOR ---------- */
.err-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.err-item{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;background:var(--card);display:flex;gap:14px;align-items:flex-start}
.err-item .sev{width:4px;align-self:stretch;border-radius:4px}
.sev-alta{background:var(--bad)}.sev-media{background:var(--warn)}.sev-baixa{background:var(--neutral)}
.err-item .body{flex:1;min-width:0}
.err-item .l1{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:5px}
.err-item .cat{font-weight:700;font-size:14px}
.err-item .meta{font-size:12px;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.err-item .obs{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.err-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.err-thumbs img{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.modal-bg{position:fixed;inset:0;background:rgba(15,42,58,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border-radius:var(--r);max-width:520px;width:100%;padding:26px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:17px;margin-bottom:18px}
.modal .field{margin-bottom:14px}
.modal textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:inherit;font-size:14px;resize:vertical;min-height:80px}
.modal textarea:focus,.modal select:focus{outline:none;border-color:var(--brand)}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:110;display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

/* ---------- RESPONSIVO ---------- */
.menu-toggle{display:none}
@media(max-width:880px){
  .sidebar{transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex;background:none;border:none;cursor:pointer;padding:6px}
  .menu-toggle svg{width:24px;height:24px;stroke:var(--ink)}
  .content{padding:18px 16px 48px}
  .topbar{padding:14px 16px}
  .hero .big{font-size:34px}
}

/* Matriz ONE PAGE (indicador × dia) */
.onepage-matrix{border-collapse:collapse;font-size:11px}
.onepage-matrix th,.onepage-matrix td{border:1px solid var(--line,#E4EDF2);padding:4px 6px;text-align:center;white-space:nowrap}
.onepage-matrix th{background:var(--surface-2,#F5F8FA);font-weight:700;color:var(--ink-3,#5B7688)}
.onepage-matrix td{font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:840px){.grid-2{grid-template-columns:1fr}}

/* Tabelas compactas: quebram texto e cabem na tela sem rolar lateral */
.tbl-wrap table{table-layout:auto}
.tbl-wrap tbody td{white-space:normal;padding:8px 10px;font-size:12.5px;vertical-align:top}
.tbl-wrap thead th{padding:9px 10px;font-size:12px}
.tbl-wrap td.num,.tbl-wrap th.num{white-space:nowrap}
.tbl-wrap td .badge{white-space:nowrap}
/* rolagem lateral só quando realmente inevitável */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Rolagem suave e discreta na sidebar */
.nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
/* rolagem geral do conteúdo */
#content{scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
#content::-webkit-scrollbar{width:8px;height:8px}
#content::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px}
#content::-webkit-scrollbar-thumb:hover{background:#94A3B8}

/* Quadro de Gestão à Vista */
.gv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gv-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(15,42,58,.05)}
.gv-head{color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.5px;text-align:center;padding:9px 10px}
.gv-body{padding:18px 16px;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.gv-big{font-size:clamp(20px,2.1vw,30px);font-weight:800;color:#0A2E44;text-align:center;line-height:1.12;overflow-wrap:anywhere;word-break:break-word}
.gv-sub{font-size:12px;color:var(--ink-3);text-align:center;margin-top:4px}

/* Loading bonito */
.loading-wrap{padding:20px 0;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.loading-logo{display:flex;justify-content:center;margin:30px 0 16px}
.loading-spin{width:44px;height:44px;border:3px solid #E4EDF2;border-top-color:var(--brand-600,#005F8F);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{text-align:center;color:var(--ink-3);font-size:14px;font-weight:600;margin-bottom:24px}
.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:900px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}}
.skel-card{height:92px;border-radius:14px;background:linear-gradient(90deg,#F0F4F7 25%,#E4EDF2 37%,#F0F4F7 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.skel-panel{height:280px;border-radius:14px;background:linear-gradient(90deg,#F0F4F7 25%,#E4EDF2 37%,#F0F4F7 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* grid de 3 colunas (Visão geral) */
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr}}

/* Perfil na sidebar */
.foot .user-box{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:.15s;margin-bottom:8px}
.foot .user-box:hover{background:rgba(255,255,255,.08)}
.foot .user-txt{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.foot .user-txt b{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot .user-txt i{font-size:11px;font-style:normal;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Abas em construção */
.nav a.em-obra{opacity:.62}
.nav a.em-obra:hover{opacity:.9}
.obra-tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(245,158,11,.22);color:#FCD34D;padding:2px 7px;border-radius:20px}
.obra-wrap{text-align:center;padding:60px 24px;max-width:560px;margin:0 auto}
.obra-ic{width:88px;height:88px;border-radius:26px;background:linear-gradient(135deg,#FEF3C7,#FDE68A);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.obra-ic svg{stroke:#B45309}
.obra-wrap h2{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:10px}
.obra-wrap p{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin-bottom:18px}
.obra-badge{display:inline-flex;font-size:12px;font-weight:700;color:#B45309;background:#FEF3C7;padding:6px 16px;border-radius:20px}
.obra-hint{font-size:12.5px;color:var(--ink-3);margin-top:20px;opacity:.85;line-height:1.5}

/* Qualidade dos dados */
.qual-alerta{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:11px;background:#FEF6E7;border:1px solid #FDE9C8;color:#92400E;font-size:13px;margin-bottom:16px;cursor:pointer;transition:.15s}
.qual-alerta:hover{background:#FDF0D5}
.qual-alerta.alta{background:#FDECEC;border-color:#F7CFCF;color:#B42318}
.qual-alerta svg{stroke:currentColor;flex-shrink:0}
.qual-link{margin-left:auto;font-weight:700;white-space:nowrap}
.qual-card{background:var(--card);border:1px solid var(--line);border-left:4px solid #D97706;border-radius:12px;padding:16px 18px;margin-bottom:12px}
.qual-card.alta{border-left-color:#DC2626}
.qual-sev{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#B45309;margin-bottom:5px}
.qual-card.alta .qual-sev{color:#B42318}
.qual-tit{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.qual-txt{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.qual-acao{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin-top:10px;font-weight:600}
.qual-acao svg{stroke:currentColor}

/* Kanban de projetos — responsivo */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kanban{grid-template-columns:1fr}}

/* Enquadramento do fundo no celular (retrato corta a imagem: puxa para as prateleiras) */
@media(max-width:700px){ .login-shell::before{background-position:68% center} }

/* Menu mobile: sombra e camada para fechar tocando fora */
@media(max-width:880px){
  .sidebar{box-shadow:8px 0 32px rgba(0,0,0,.35);z-index:60}
  .sidebar.open ~ .overlay-menu{opacity:1;pointer-events:auto}
  .overlay-menu{position:fixed;inset:0;background:rgba(8,25,38,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
  /* alvos de toque mais confortáveis */
  .nav a{padding:12px 12px;font-size:14px}
  .kpi .v{font-size:22px}
  .hero{padding:20px}
  .topbar{position:sticky;top:0;z-index:30}
  .err-toolbar{flex-direction:column;align-items:flex-start;gap:10px}
  .filter-bar,.filtros{width:100%}
  .filter-bar select,.filtros select,.filtros input{width:100%;min-width:0}
  .segmented{width:100%;overflow-x:auto}
}

/* iOS: campos com menos de 16px fazem o Safari dar zoom ao focar */
@media(max-width:880px){
  .input,input,select,textarea{font-size:16px !important}
  .btn,.btn-ghost{min-height:42px}
}

/* ===== Ficha de SKU (consulta) ===== */
.sku-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.sku-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;background:linear-gradient(120deg,#F7FAFC,#EEF4F8);border-bottom:1px solid var(--line)}
.sku-fam{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.sku-code{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.sku-desc{font-size:14px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.sku-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sku-meta span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.sku-meta svg{stroke:var(--ink-3)}
.sku-saude{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.sku-saude .dot{width:8px;height:8px;border-radius:50%}
.sku-body{display:grid;grid-template-columns:1fr 240px;gap:0}
.sku-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;background:var(--line);padding:1px}
.sku-m{background:#fff;padding:12px 14px}
.sku-m .k{font-size:11px;color:var(--ink-3);margin-bottom:3px}
.sku-m .v{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.sku-side{padding:16px 18px;border-left:1px solid var(--line);background:#FCFDFE;display:flex;flex-direction:column;gap:12px}
.sku-spark-lbl{font-size:11px;color:var(--ink-3);font-weight:600}
.sku-end-lbl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:7px}
.sku-end-lbl svg{stroke:var(--ink-3)}
.sku-end-list{display:flex;flex-wrap:wrap;gap:5px}
.sku-end-chip{font-size:11px;font-family:ui-monospace,monospace;background:var(--brand-050);color:var(--brand-600);border-radius:6px;padding:2px 7px}
@media(max-width:760px){.sku-body{grid-template-columns:1fr}.sku-side{border-left:none;border-top:1px solid var(--line)}}

/* Gráficos por almoxarifado — com rolagem quando há muitas barras */
.chart-scroll{max-height:340px;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.chart-scroll::-webkit-scrollbar{width:8px}
.chart-scroll::-webkit-scrollbar-thumb{background:#CBD9E2;border-radius:4px}
.chart-scroll::-webkit-scrollbar-track{background:transparent}
.chart-scroll canvas{width:100%!important}

/* Tabelas — ordenação visível + paginação */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative}
th.sortable:hover{background:var(--brand-050)}
.sort-ar{display:inline-block;margin-left:4px;font-size:11px;color:#B4C6D2;transition:color .15s}
.sort-ar.on{color:var(--brand);font-weight:700}
th.sortable:hover .sort-ar{color:var(--brand-600)}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.tbl-pag{display:flex;align-items:center;gap:4px}
.pg-btn{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:7px;min-width:30px;height:30px;padding:0 8px;font-size:13px;cursor:pointer;font-weight:600}
.pg-btn:hover:not(.dis){background:var(--brand-050);border-color:var(--brand);color:var(--brand-600)}
.pg-btn.dis{opacity:.4;cursor:default}
.pg-info{font-size:12.5px;color:var(--ink-3);margin:0 8px;white-space:nowrap}

/* Recebimentos — abas */
.rec-tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px}
.rec-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:none;background:transparent;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:.15s}
.rec-tabs button svg{width:16px;height:16px;stroke:currentColor;fill:none}
.rec-tabs button:hover{background:var(--brand-050);color:var(--brand-600)}
.rec-tabs button.on{background:var(--brand);color:#fff}
/* Calendário */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-size:16px;font-weight:800;color:var(--ink)}
.cal-nav{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:18px;color:var(--ink-2);cursor:pointer;line-height:1}
.cal-nav:hover{background:var(--brand-050);border-color:var(--brand);color:var(--brand-600)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--ink-3);padding:4px 0;text-transform:uppercase}
.cal-cell{min-height:82px;border:1px solid var(--line);border-radius:9px;padding:5px 6px;background:#FCFDFE;overflow:hidden}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.tem{background:#fff;border-color:#CBE3EF}
.cal-cell.hoje{border-color:var(--brand);border-width:2px;box-shadow:0 0 0 2px var(--brand-050)}
.cal-num{font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:3px;display:flex;align-items:center;justify-content:space-between}
.cal-badge{background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;min-width:16px;text-align:center}
.cal-ev{font-size:10px;background:var(--brand-050);color:var(--brand-600);border-radius:4px;padding:2px 4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-mais{font-size:10px;color:var(--ink-3);padding:1px 4px}
@media(max-width:640px){.cal-cell{min-height:56px}.cal-ev{display:none}.cal-grid{gap:3px}}

/* ONE PAGE — KPIs de destaque */
.op-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.op-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.op-kpi-lbl{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.op-kpi-val{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.5px;line-height:1}
.op-kpi-trend{font-size:11px;margin-top:6px;font-weight:600}
.onepage-matrix td,.onepage-matrix th{padding:5px 7px;border:1px solid var(--line);text-align:center}

/* ONE PAGE — navegação mês/ano */
.op-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.op-nav-per{display:flex;align-items:center;gap:10px}
.op-nav-title{font-size:16px;font-weight:800;color:var(--ink);min-width:150px;text-align:center}
.op-modo{display:flex;gap:4px;background:#F1F5F9;border-radius:9px;padding:4px}
.op-modo button{border:none;background:transparent;padding:7px 16px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer}
.op-modo button.on{background:var(--brand);color:#fff}
.op-almox{margin-left:auto}
.cal-cell.sel{border-color:var(--brand);border-width:2px;background:var(--brand-050)}

/* ===== Simulador de tubos (pátio / movimentação) ===== */
.sim-yard{background:linear-gradient(180deg,var(--navy),var(--navy-900));border-radius:14px;padding:18px 20px;color:#EAF2F7}
.sim-bar-wrap{position:relative;height:34px;border-radius:8px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sim-bar{position:absolute;top:0;left:0;height:100%;border-radius:8px 0 0 8px;transition:width .9s cubic-bezier(.22,.61,.36,1)}
.sim-bar.base{background:linear-gradient(90deg,#3FC0F0,#0093DD)}
.sim-bar.add{background:repeating-linear-gradient(45deg,#0E9F6E,#0E9F6E 10px,#0BA774 10px,#0BA774 20px)}
.sim-bar.over{background:repeating-linear-gradient(45deg,#DC2626,#DC2626 10px,#b91c1c 10px,#b91c1c 20px)}
.sim-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:.5}
.sim-slots{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
.sim-slot{width:15px;height:22px;border-radius:2px;background:rgba(255,255,255,.10);position:relative;transition:background .4s,transform .4s}
.sim-slot.occ{background:linear-gradient(180deg,#3FC0F0,#0093DD)}
.sim-slot.new{background:#0E9F6E;animation:slotPop .5s ease both}
.sim-slot.over{background:#DC2626;animation:slotPop .5s ease both}
@keyframes slotPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.sim-tube{display:inline-block;height:10px;border-radius:5px;background:linear-gradient(90deg,#3FC0F0,#0093DD);vertical-align:middle}
.sim-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;margin-top:12px;color:#BcD6E4;opacity:.95}
.sim-legend b{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:5px}
.sim-sku-info{font-size:12.5px;color:var(--ink-3);margin-top:8px;padding:8px 12px;background:var(--bg);border-radius:8px;border:1px solid var(--line)}

/* Tabela compacta do Cíclico (linhas densas, sem quebra excessiva) */
.cic-tbl .tbl-wrap tbody td{padding:5px 8px;font-size:12px;white-space:nowrap;vertical-align:middle;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.cic-tbl .tbl-wrap thead th{padding:6px 8px;font-size:11.5px;white-space:nowrap}

/* Popover de resumo ao passar o mouse nos cards do Gestão à Vista */
.gv-card{position:relative;overflow:visible}
.gv-card .gv-head{border-radius:14px 14px 0 0}
.gv-pop{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(15,42,58,.20);padding:8px 10px;font-size:11.5px;color:var(--ink-2);display:none;max-height:240px;overflow:auto;text-align:left}
.gv-card:hover .gv-pop{display:block}
.gv-pop .pop-t{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);margin-bottom:6px}
.gv-pop table{width:100%;border-collapse:collapse}
.gv-pop td{padding:3px 5px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.gv-pop td:last-child{white-space:normal}
.gv-pop .pop-empty{color:var(--ink-3);padding:6px 2px}

/* Rolagem bonita nos popovers */
.gv-pop{scrollbar-width:thin;scrollbar-color:#CBD9E2 transparent}
.gv-pop::-webkit-scrollbar{width:7px}
.gv-pop::-webkit-scrollbar-thumb{background:#CBD9E2;border-radius:4px}
.gv-pop::-webkit-scrollbar-thumb:hover{background:#A9BECB}
.gv-pop::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   v58 — REVISÃO DE DESIGN (à prova de falhas visuais)
   Paleta ancorada no azul Sabesp oficial #0093DD (amostrado do logo).
   Princípios: 1 cor de marca, cor semântica só p/ status, números
   sempre tabulares, nada quebra no meio, nada estoura o container.
   ============================================================ */

/* ---- 1. NÚMEROS E TEXTO: nunca quebrar no lugar errado ---- */
.kpi .val,.gv-big,.hero .big,.hero .side .v,.ficha-cell .v,.op-kpi b,td.num,th.num{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* valores grandes encolhem em vez de quebrar no meio do número */
.gv-big{font-size:clamp(19px,2.05vw,29px);line-height:1.14;overflow-wrap:normal;word-break:normal;hyphens:none}
.kpi .val{font-size:clamp(20px,1.9vw,27px);line-height:1.16;overflow-wrap:normal;word-break:normal}
/* rótulo longo: corta com reticências e mostra tudo no title */
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* flex/grid filhos podem encolher (sem isso, texto longo estoura o card) */
.kpi,.panel,.gv-card,.hero>div,.err-item .body{min-width:0}

/* ---- 2. GRÁFICOS: alturas consistentes, legenda nunca cortada ---- */
.chart-wrap{height:clamp(220px,26vh,290px)}
.chart-wrap.sm{height:clamp(180px,20vh,215px)}
.chart-wrap.lg{height:clamp(280px,34vh,380px)}
.chart-wrap canvas{max-width:100%}
/* gráfico de barras horizontais com muitos itens: rola por dentro, não estica a página */
.chart-scroll{max-height:340px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#CBD9E2 transparent}
.chart-scroll::-webkit-scrollbar{width:7px}
.chart-scroll::-webkit-scrollbar-thumb{background:#CBD9E2;border-radius:4px}
.chart-scroll::-webkit-scrollbar-thumb:hover{background:#9FB6C4}

/* ---- 3. KPI: hierarquia e leitura confortável ---- */
.kpi{transition:box-shadow .15s,border-color .15s}
.kpi:hover{border-color:var(--brand-100);box-shadow:0 2px 4px rgba(15,42,58,.05),0 8px 24px rgba(15,42,58,.08)}
.kpi .lbl{line-height:1.35}
.kpi .icon{background:var(--brand-050)}
.kpi .icon svg{stroke:var(--brand)}

/* ---- 4. PAINÉIS: cabeçalho mais legível ---- */
.panel h3{letter-spacing:-.2px;min-width:0;flex:1 1 auto}
.panel h3 .dot{background:var(--sab);flex-shrink:0}
/* em painel estreito (grid de 3), a dica ia p/ 3 linhas e espremia o título.
   Agora ela quebra para a linha de baixo em vez de disputar espaço. */
.panel .head{gap:4px 12px;align-items:baseline;flex-wrap:wrap}
.panel .hint{text-align:right;line-height:1.4;flex:0 1 auto;min-width:0}
@media(max-width:1280px){ .panel .hint{text-align:left;flex-basis:100%} }

/* ---- 5. TABELAS: cabeçalho fixo com sombra + zebra suave ---- */
thead th{background:#F6FAFC;z-index:2}
.tbl-wrap{position:relative}
.tbl-wrap thead th::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line)}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--brand-050)}
tfoot td{background:#F6FAFC}

/* ---- 6. GESTÃO À VISTA: cartões com respiro e status legível ---- */
.gv-grid{gap:14px}
.gv-card{transition:box-shadow .15s,transform .12s}
.gv-card:hover{box-shadow:0 4px 10px rgba(15,42,58,.07),0 14px 34px rgba(15,42,58,.10)}
.gv-head{background:var(--brand);letter-spacing:.6px;text-transform:uppercase;font-size:11.5px}
.gv-body{padding:20px 16px;gap:2px}
.gv-sub{line-height:1.4}
/* estado do indicador — cor semântica só no valor, não no cartão inteiro */
.gv-big.st-ok{color:var(--ok)} .gv-big.st-warn{color:var(--warn)} .gv-big.st-bad{color:var(--bad)}
.gv-card.sem-dado .gv-big{color:var(--ink-3);font-weight:700}

/* ---- 7. ESTADO VAZIO: sempre explica o que fazer ---- */
.empty{padding:38px 24px}
.mini-empty{text-align:center;color:var(--ink-3);font-size:12.5px;padding:26px 12px;line-height:1.5}

/* ---- 8. ACESSIBILIDADE: foco visível no teclado ---- */
:focus-visible{outline:2px solid var(--sab);outline-offset:2px;border-radius:4px}
.nav a:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- 9. RESPONSIVO: 3 quebras reais (TV / desktop / tablet / celular) ---- */
@media(min-width:1800px){ .content{max-width:1880px} .gv-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:1200px){ .gv-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
@media(max-width:880px){
  .filterbar{gap:8px}
  .filterbar .select{flex:1 1 160px;min-width:0}
  .segmented{width:100%;overflow-x:auto;justify-content:flex-start}
  .hero{padding:20px 18px}
  .hero .side{text-align:left}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .kpi{padding:14px 15px}
  .panel{padding:16px 14px}
  .panel .hint{max-width:100%;text-align:left}
  .panel .head{flex-direction:column;gap:4px}
  .gv-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
  .gv-body{padding:15px 11px;min-height:82px}
  /* topbar: o título quebrava em 2 linhas e a legenda em 5, espremendo os botões */
  .topbar{gap:10px;padding:12px 16px}
  /* min-width:0 precisa descer toda a cadeia flex, senão a reticência não corta */
  .topbar>div:first-child,.topbar>div:first-child>div{min-width:0;flex:1 1 auto}
  .topbar h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .actions{flex-shrink:0}
}
@media(max-width:560px){
  /* em celular os botões viram só ícone — o rótulo não cabe sem engolir o título */
  .topbar .actions .btn-ghost{font-size:0;padding:9px 11px;gap:0}
  .topbar .actions .btn-ghost svg{width:18px;height:18px}
}
@media(max-width:520px){
  .kpi-grid,.gv-grid{grid-template-columns:1fr 1fr}
  .content{padding:14px 12px 44px}
  .chart-wrap{height:210px}
}

/* v59 — data de referência do KPI da ONE PAGE (deixa explícito de que dia é o número) */
.op-kpi-quando{font-size:10.5px;color:var(--ink-3);margin-top:3px;opacity:.85}

/* v59 — calendário de agendamentos: chip com cor de status + legenda */
.cal-ev{display:flex;gap:3px;align-items:baseline;line-height:1.35}
.cal-ev b{font-weight:700;opacity:.8;flex-shrink:0}
.cal-ev.ev-ok{background:var(--ok-bg);color:#0B7E58}
.cal-ev.ev-warn{background:var(--warn-bg);color:#B45309}
.cal-ev.ev-bad{background:var(--bad-bg);color:#B42318;text-decoration:line-through;opacity:.75}
.cal-ev.ev-neutro{background:var(--brand-050);color:var(--brand-600)}
.cal-cell{transition:box-shadow .12s,transform .1s}
.cal-cell.tem:hover{box-shadow:0 4px 14px rgba(15,42,58,.12);border-color:var(--sab)}
.cal-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:12px;align-items:center}
.cal-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* v59 — SLICER de período (arrastar as pontas para recortar a janela) */
.slicer{margin:2px 0 12px;padding:10px 12px;background:#F7FAFC;border:1px solid var(--line);border-radius:10px}
.slicer-top{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.slicer-lbl{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3)}
.slicer-val{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.slicer-reset{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;font-size:11px;
  font-weight:600;color:var(--brand);cursor:pointer;padding:3px 9px;font-family:inherit}
.slicer-reset:hover{background:var(--brand-050);border-color:var(--brand)}
.slicer-trilho{position:relative;height:22px}
.slicer-trilho::before{content:'';position:absolute;left:0;right:0;top:9px;height:4px;background:#DFE9EF;border-radius:2px}
.slicer-ativo{position:absolute;top:9px;height:4px;background:var(--sab);border-radius:2px}
/* os dois range ficam sobrepostos: só os polegares recebem clique */
.slicer-trilho input[type=range]{position:absolute;left:0;top:0;width:100%;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.slicer-trilho input[type=range]:focus{outline:none}
.slicer-trilho input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;
  border-radius:50%;background:#fff;border:3px solid var(--sab);cursor:grab;box-shadow:0 1px 4px rgba(15,42,58,.25)}
.slicer-trilho input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.slicer-trilho input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--sab);cursor:grab;box-shadow:0 1px 4px rgba(15,42,58,.25)}
.slicer-trilho input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sab);outline-offset:2px}
.slicer-marcas{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:var(--ink-3);gap:2px}
.slicer-marcas span{flex:1;text-align:center;overflow:hidden;white-space:nowrap}
.slicer-marcas span.on{color:var(--brand-600);font-weight:600}
@media(max-width:640px){.slicer-marcas{display:none}}

/* ============================================================
   Cíclico e Rotativo — composição da aba (v44)
   ============================================================ */
/* efetividade da recontagem: número-herói + fluxo 1ª → recontagem → desfecho */
.cic-rec{display:flex;flex-direction:column;gap:14px}
.cic-rec-num{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cic-rec-num b{font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.cic-rec-num b.st-ok{color:var(--ok)}.cic-rec-num b.st-warn{color:var(--warn)}.cic-rec-num b.st-bad{color:var(--bad)}
.cic-rec-num span{font-size:12.5px;color:var(--ink-3);line-height:1.35;min-width:0}
.cic-fluxo{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.cic-et{flex:1 1 92px;min-width:0;background:#F7FAFC;border:1px solid var(--line);border-radius:10px;padding:10px 11px;text-align:center}
.cic-et b{display:block;font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.cic-et span{font-size:11px;color:var(--ink-3);line-height:1.3;display:block;margin-top:2px}
.cic-et.ok{background:var(--ok-bg);border-color:#BFE7D6}.cic-et.ok b{color:#0B7E58}
.cic-et.bad{background:var(--bad-bg);border-color:#F3C9C9}.cic-et.bad b{color:#B42318}
.cic-seta{display:flex;align-items:center;color:var(--ink-3);font-size:15px;flex:0 0 auto}
.cic-nota{background:var(--warn-bg);border:1px solid #F5DFB8;border-radius:9px;padding:9px 12px;font-size:12.5px;color:#8A5308;line-height:1.45}
.cic-nota-sec{font-size:12px;color:var(--ink-3);line-height:1.5}
.cic-pareto-nota{font-size:12.5px;color:var(--ink-2);background:var(--brand-050);border:1px solid var(--brand-100);
  border-radius:9px;padding:9px 12px;margin-bottom:12px;line-height:1.45}
@media(max-width:700px){ .cic-seta{display:none} .cic-et{flex:1 1 44%} }
/* os dois desfechos da recontagem sao irmaos — ficam lado a lado, nao em cascata */
.cic-desfecho{display:flex;gap:8px;flex:2 1 200px;min-width:0}
.cic-desfecho .cic-et{flex:1 1 0}

/* multi-select dropdown dos filtros */
.ms-drop{position:relative;display:inline-block}
.ms-btn{cursor:pointer;text-align:left;min-width:180px;white-space:nowrap}
.ms-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:var(--surface,#fff);border:1px solid var(--line,#e2e8f0);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;min-width:240px;max-height:320px;overflow:auto}
.ms-menu.open{display:block}
.ms-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer;white-space:nowrap}
.ms-item:hover{background:var(--brand-050,#eff6ff)}
.ms-item input{margin:0;cursor:pointer}
.ms-clear{display:block;padding:6px 10px;font-size:12px;color:var(--brand-600,#0a6e9e);cursor:pointer;font-weight:600;border-bottom:1px solid var(--line,#eee);margin-bottom:4px}

/* ===== MENU GELOG: grupos expansíveis (sidebar escura) ===== */
.grupo{margin-bottom:1px}
.grp-h{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;font-weight:700;color:#CFE3EE;cursor:pointer;border-radius:9px;user-select:none;transition:background .12s,color .12s;letter-spacing:.2px}
.grp-h:hover{background:rgba(255,255,255,.07);color:#fff}
.grupo.aberto .grp-h{color:#fff}
.grp-ic{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;color:#7FA7BC;transition:color .12s}
.grp-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.grp-h:hover .grp-ic,.grupo.aberto .grp-ic{color:#8FD3F4}
.grp-ar{margin-left:auto;font-size:10px;color:rgba(255,255,255,.45);transition:transform .18s}
.grupo.aberto .grp-ar{transform:rotate(180deg)}
.grp-sub{display:none;padding:2px 0 8px 12px;margin:0 8px 0 26px;border-left:2px solid rgba(255,255,255,.12)}
.grupo.aberto .grp-sub{display:block;animation:subIn .18s ease}
@keyframes subIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.grp-sub a{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:12.5px;color:#9FBBCD;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.grp-sub a:hover{background:rgba(255,255,255,.07);color:#fff}
.grp-sub a.on{background:var(--sab,#0093DD);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(0,147,221,.4)}
.grp-sub a.wip{color:rgba(207,227,238,.4);cursor:pointer}
.grp-sub a.wip:hover{background:rgba(255,255,255,.04);color:rgba(207,227,238,.6)}
.wip-b{margin-left:auto;font-size:9px;font-weight:700;background:rgba(255,255,255,.12);color:rgba(255,255,255,.6);padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.3px}


/* ONE PAGE cabeçalho gordinho */
.onepage-matrix thead .op-head th{padding:11px 8px;font-size:11px;font-weight:800;letter-spacing:.2px;background:var(--brand,#0093dd);color:#fff;border-bottom:2px solid #0A6E9E}
.onepage-matrix thead .op-head th:first-child{font-size:13px}

/* ===== polimento v56: cards e painéis ===== */
.kpi-card{transition:transform .12s, box-shadow .12s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(10,110,158,.28)}
.panel{transition:box-shadow .15s}
.hero{background:linear-gradient(135deg,var(--brand,#0093dd),#0A6E9E)}
.badge{font-variant-numeric:tabular-nums}
.tbl tbody tr:hover{background:var(--brand-050,#f0f7fb)}

/* GELOG em evidência no topo da sidebar */
.sidebar .brand{padding:20px 20px 18px;background:linear-gradient(135deg,rgba(0,147,221,.18),transparent)}
.brand-gelog{font-size:22px!important;font-weight:900!important;letter-spacing:1.5px!important;color:#fff!important;background:linear-gradient(90deg,#fff,#8FD3F4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sidebar .brand span{color:#9FBBCD;font-size:11px;letter-spacing:.4px}

/* modo foco: esconde a sidebar, conteúdo ocupa tudo */
body.foco .sidebar{display:none}
body.foco .shell{grid-template-columns:1fr}
body.foco .main{margin-left:0}
#btnFocus{display:inline-flex}

/* item Inicio (topo da nav) */
.nav-inicio{font-weight:700;color:#DCEBF4;margin-bottom:10px;border:1px solid rgba(255,255,255,.10)}
.nav-inicio.on{border-color:transparent}