/* ============ DESIGN CAL.MIN ============ */
/* ═══ VARIÁVEIS / TOKENS ═══ */
:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-soft:#f8fafc;
  --ink:#111827; --mid:#6b7280; --mute:#94a3b8; --line:#e5e7eb;
  --brand:#2563ea; --brand-ink:#ffffff;
  --brand-soft:#eff6ff;
  --logo-yellow:#facd15; --logo-red:#c41230;
  --amber:#fbbf24; --amber-ink:#7a4d00;
  --live-bg:#1e293b; --live-track:#334155;
  --link:#2563ea; --green:#16a34a; --red:#dc2626; --blue:#10b981;
  --radius:12px; --r-sm:8px; --r-lg:16px; --r-pill:9999px;
  --shadow-card:0px 1px 5px -4px rgba(19,19,22,0.7),0px 0px 0px 1px rgba(34,42,53,0.08),0px 4px 8px rgba(34,42,53,0.05);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Roboto Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;font-size:15px;line-height:1.5}
.hide{display:none!important}
button{font-family:var(--font);cursor:pointer;border:0;background:none;color:inherit}
/* ═══ FORMULÁRIOS ═══ */
input,select{font-family:var(--font);font-size:14px;color:var(--ink)}
a{color:var(--ink);text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:4px}
/* Acessibilidade & UX: foco visível p/ navegação por teclado + respeitar reduzir-movimento */
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
/* ═══ RESPONSIVO ═══ */
@media(prefers-reduced-motion:reduce){
  /* ═══ RESET ═══ */
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============ LOGIN ============ */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:#fafafa}
.login-shell{display:grid;grid-template-columns:1.05fr 1fr;gap:0;max-width:900px;width:100%;background:#fff;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card);position:relative;z-index:2}
.login-hero{padding:52px 44px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--surface-soft);border-right:1px solid var(--line)}
.lh-brand{display:flex;align-items:center;gap:13px}
.lh-logo{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.lh-brand h1{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.lh-title{font-size:27px;line-height:1.18;font-weight:800;letter-spacing:-.5px;margin:14px 0;color:var(--ink)}
.lh-title span{color:var(--ink);position:relative}
.lh-title span::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:5px;background:var(--line);z-index:-1}
.lh-feats{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.lh-feat{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mid)}
.lh-feat .ic{width:24px;height:24px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.lh-tag{font-size:11px;color:var(--mute);letter-spacing:.4px;text-transform:uppercase;font-weight:600}
.login-card{width:100%;background:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.lc-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.lc-logo{width:40px;height:40px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800}
.lc-head h2{font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.login-sub{color:var(--mid);font-size:13.5px;margin-bottom:18px}
.f-label{display:block;font-size:11.5px;font-weight:700;color:var(--mid);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px}
.field{position:relative}
.field .fi{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.45;pointer-events:none;transition:opacity .15s}
.field .f-input{width:100%;background:var(--surface-soft);border:1.5px solid transparent;border-radius:12px;padding:12px 14px 12px 39px;font-size:15px;outline:none;transition:all .18s}
.field .f-input::placeholder{color:#b0b0b5}
.field .f-input:focus{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(36,36,36,.08)}
.login-err{color:var(--red);font-size:13px;margin-top:12px;min-height:20px;display:flex;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;
  font-size:14px;font-weight:700;background:var(--brand);color:var(--brand-ink);transition:all .18s;position:relative}
.btn:hover{opacity:.93}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn:active{transform:translateY(0)}
.btn.block{width:100%}
.btn.ghost{background:var(--surface-soft);color:var(--ink)}
/* Ação discreta (sem caixa/botão) — link textual leve para evitar poluir o topo */
.mini-act{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:0;background:transparent;
  color:var(--mid);font-size:12.5px;font-weight:600;cursor:pointer;border-radius:var(--r-pill);transition:all .15s;white-space:nowrap}
.mini-act:hover{color:var(--link);background:var(--surface-soft)}
.btn.subtle{background:transparent;color:var(--mid);box-shadow:inset 0 0 0 1px var(--line)}
.btn-login{background:var(--ink);min-height:48px;font-size:15px;margin-top:14px;color:#fff}
.btn-login:disabled{opacity:.6;cursor:not-allowed}
/* botão de instalação PWA — discreto na barra superior */
.btn-ghost{background:var(--surface-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:8px 13px;font-size:12.5px;gap:6px}
.btn-ghost:hover{background:var(--line);box-shadow:inset 0 0 0 1px var(--ink)}
@media(max-width:560px){.pwa-install-btn .pwa-install-txt{display:none}}
.btn-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none}
.btn.loading .btn-spin{display:inline-block}
.btn.loading .btn-txt{opacity:.4}
.login-hint{color:var(--mute);font-size:12.5px;margin-top:18px;line-height:1.5;text-align:center}
.qr-img{width:100%;border-radius:10px;margin:10px 0;border:1px solid var(--line)}
.otp-box{display:flex;gap:8px;margin-top:4px}
.otp-box input{flex:1;background:var(--surface-soft);border:1.5px solid transparent;border-radius:12px;padding:13px;font-size:19px;text-align:center;letter-spacing:6px;outline:none;transition:all .18s;font-family:var(--mono)}
.otp-box input:focus{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(36,36,36,.08)}
@media(max-width:820px){
  .login-shell{grid-template-columns:1fr;max-width:440px}
  .login-hero{display:none}
  .login-card{padding:36px 28px}
}

/* ============ APP LAYOUT ============ */
#app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}

/* input/select standalone de formulário (fora do .field do login) */
.f-input{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;outline:none;transition:all .15s;color:var(--ink)}
.f-input:focus{background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(36,36,36,.08)}
select.f-input{min-height:40px}
.toolbar .f-input{min-width:0}

/* ===== NOVA ABA METAS + COMISSÃO ===== */

.eq-lista{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;margin-top:6px}
.eq-grupo-loja{font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 4px}
.eq-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.eq-row:hover{background:var(--surface-soft)}
.eq-cb{width:18px;height:18px;accent-color:var(--ink);flex-shrink:0}
.eq-nome{flex:1;font-size:13.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-loja{font-size:12px;color:var(--mute);white-space:nowrap;flex-shrink:0}
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ac-nome{font-size:14px;font-weight:700;letter-spacing:-.2px;line-height:1.2}
.ac-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 6px}
.ac-meta-lbl{font-size:12px;color:var(--mid)}
.ac-meta-val{font-size:13px;font-family:var(--mono);font-weight:600}
.ac-valor{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:8px;border-top:1px solid var(--line)}
.ac-valor .recv{font-size:12px;font-weight:600}
.ac-valor .recv b{font-size:17px;display:block}
.ac-valor .recv.ok{color:var(--green)}
.ac-valor .recv.no{color:var(--red)}
.ac-valor .recv.no b{color:var(--red)}
.ac-vl-extra{text-align:right;font-size:12px;color:var(--mid)}
.ac-ratio{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.ac-ratio.ok{background:#ecfdf3;color:var(--green)}
.ac-ratio.mid{background:#fffbeb;color:var(--amber)}
.ac-ratio.low{background:#fef2f2;color:var(--red)}
.pr-com{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--mid)}
.pr-com .mono{color:var(--ink);font-weight:600}
/* ===== COMPOSIÇÃO SALARIAL (acompanhamento) ===== */
.sal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-top:6px}
.sal-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:10px}
.sal-top{display:flex;align-items:center;gap:11px}
.sal-avatar{width:38px;height:38px;border-radius:11px;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink);flex-shrink:0}
.sal-who{flex:1;min-width:0}
.sal-nome{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sal-sub{font-size:11.5px;color:var(--mute);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sal-total{text-align:right;flex-shrink:0}
.sal-total-lbl{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.sal-total-val{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--green)}
.sal-div{height:1px;background:var(--line)}
.sal-line{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:2px 0;font-size:12.5px}
.sal-line-lbl{display:flex;flex-direction:column;gap:1px;min-width:0}
.sal-line-name{font-weight:600;color:var(--ink)}
.sal-line-hint{font-size:11px;color:var(--mute)}
.sal-line-val{text-align:right;font-family:var(--mono);font-weight:700;font-size:13px;white-space:nowrap}
.sal-empty{color:var(--mute);font-size:11.5px}
/* ===== TABELA PLANILHA (acompanhamento estilo Excel) ===== */
.sx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;max-width:100%}
.sx-/* ═══ TABELAS ═══ */
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px;table-layout:fixed}
.sx-table thead th{position:sticky;top:0;background:var(--surface-soft);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-table thead th:hover{background:#eef0f2}
.sx-table thead tr.sx-filtrow th,.sx-table thead tr.sx-filtrow td{background:#fff;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line)}
.sx-table thead tr.sx-filtrow input{width:100%;min-width:0;background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:12px;outline:none;box-sizing:border-box}
.sx-table thead tr.sx-filtrow input:focus{background:#fff;border-color:var(--ink)}
.sx-table tbody td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:break-word}
.sx-table tbody tr:last-child td{border-bottom:0}
.sx-table tbody tr:hover{background:var(--surface-soft)}
/* larguras das colunas (6 colunas) — Total a receber com folga */
.sx-table th:nth-child(1),.sx-table td:nth-child(1){width:17%}
.sx-table th:nth-child(2),.sx-table td:nth-child(2){width:11%}
.sx-table th:nth-child(3),.sx-table td:nth-child(3){width:12%}
.sx-table th:nth-child(4),.sx-table td:nth-child(4){width:15%}
.sx-table th:nth-child(5),.sx-table td:nth-child(5){width:15%}
.sx-table th:nth-child(6),.sx-table td:nth-child(6){width:15%}
.sx-table th:nth-child(7),.sx-table td:nth-child(7){width:15%}
/* ===== ACOMPANHAMENTO EM CARDS (visualização moderna) ===== */
.ac-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ac-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:12px;transition:transform .12s,box-shadow .12s;min-width:0}
.ac-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.ac-card-hd{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.ac-card-nome{font-weight:700;font-size:14px;line-height:1.2}
.ac-card-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.ac-card-meta{font-size:11.5px;color:var(--mid);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.ac-card-meta .ic{opacity:.75} 
.ac-card-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px dashed var(--line);padding-top:12px;margin-top:2px}
.ac-col{background:var(--surface-soft);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-col-t{font-size:10px;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-col-v b{font-family:var(--mono);font-size:15px;color:#16a34a}
.ac-col-s{font-size:10px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-col-meta{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:10px;border-radius:7px;padding:3px 6px;margin-top:3px;font-weight:600;white-space:nowrap}
.ac-col-meta b{font-family:var(--mono);font-weight:700}
.ac-col-meta.ok{background:#e7f6ec;color:#16a34a}
.ac-col-meta.no{background:#fde8e8;color:#dc2626}
.ac-col-meta.na{background:#f1f2f4;color:var(--mute);justify-content:center}
.ac-col-na{opacity:.55}
.ac-card-tot{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;border-radius:11px;padding:10px 14px;margin-top:auto}
      .ac-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
      .ac-accbtn{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:9px 10px;border-radius:10px;text-align:center;line-height:1.15;white-space:normal;word-break:break-word;min-width:0;width:100%;flex:1}
      .ac-acc-ic{flex-shrink:0}
      @media(max-width:640px){
        .ac-card-actions{grid-template-columns:1fr}
        .ac-accbtn{font-size:12.5px;padding:11px 12px}
      }
.ac-card-tot .tl{font-size:11px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.4px}
.ac-card-tot .tv{font-size:18px;font-weight:700;font-family:var(--mono)}
#ac_result{display:block;width:100%}
#ac_result .ac-total-hero,#ac_result .ac-bar,#ac_result .ac-cards{display:block;width:100%}
.ac-total-hero{background:linear-gradient(135deg,var(--ink),#1a1a1a);color:#fff;border-radius:16px;padding:16px 22px;margin:0 0 12px;text-align:center}
.ac-total-hero .tl{display:block;font-size:11px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.ac-total-hero .tl{font-size:12px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.5px}
.ac-total-hero .tv{display:block;font-size:30px;font-weight:800;font-family:var(--mono);margin-top:4px}
.ac-bar{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;text-align:center}
@media(max-width:720px){
  .ac-cards{grid-template-columns:1fr}
  .ac-total-hero .tv{font-size:24px}
  .ac-card-valores{grid-template-columns:1fr}
}
/* ===== ACOMPANHAMENTO EM SMARTPHONE: cada colaborador vira um card ===== */
@media(max-width:720px){
  .sx-wrap{overflow:visible;border:0;background:transparent;border-radius:0}
  .sx-table{min-width:0;table-layout:auto}
  .sx-table thead{display:none}
  .sx-table tbody{display:block}
  .sx-table tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .sx-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:9px 0;border:0;border-bottom:1px dashed var(--line);text-align:left;overflow-wrap:break-word}
  .sx-table tbody td:last-of-type{border-bottom:0}
  .sx-table tbody td:before{content:attr(data-label);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);flex-shrink:0;margin-right:8px}
  .sx-table tbody td.r{text-align:left}
  .sx-table tbody td:first-child{font-size:14px}
}
@supports (position:sticky){ #app{} }
/* ═══ NAV / TOPO ═══ */
.topnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.topnav-inner{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px}
.topnav .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-0.2px;color:var(--ink)}
.topnav .brand-text b{color:var(--logo-red)}
.topnav .logo{width:30px;height:30px;border-radius:8px;background:var(--logo-yellow);color:var(--logo-red);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.topnav .right{display:flex;align-items:center;gap:14px}
.topnav .who{font-size:13px;color:var(--mid)}
.topnav .avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.navlinks{display:flex;gap:2px;flex-wrap:wrap}
.navlink{padding:8px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;background:transparent;color:var(--mid);transition:all .12s}
.navlink:hover{background:var(--surface-soft);color:var(--ink)}
.navlink.active{background:var(--brand-soft);color:var(--brand)}
.navlink.active:hover{background:var(--brand-soft)}

/* botão hambúrguer (menu) */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;
  border-radius:9px;padding:8px;background:var(--surface-soft);cursor:pointer;flex-shrink:0;transition:background .15s}
.burger:hover{background:var(--line)}
.burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* painel de menu expandível */
.menu-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 16px 32px rgba(0,0,0,.08);max-height:0;overflow:hidden;transition:max-height .25s ease}
.menu-panel.open{max-height:90vh;overflow-y:auto}
.menu-list{display:flex;flex-direction:column;padding:8px;max-width:1180px;margin:0 auto;width:100%}
.menu-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;font-size:15px;
  font-weight:600;color:var(--ink);background:none;text-align:left;width:100%}
.menu-item:hover{background:var(--surface-soft)}
.menu-item.active{background:var(--brand);color:#fff}
.menu-item .mi-ic{font-size:18px}

.container{max-width:1180px;margin:0 auto;padding:28px 24px 80px;width:100%}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.pagehead h1{font-size:26px;font-weight:700;letter-spacing:-0.4px}
.pagehead .desc{color:var(--mid);font-size:14px;margin-top:3px}

/* ============ FILTERS (persistente, funcional) ============ */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--surface-soft);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:20px;position:sticky;top:80px;z-index:40}
.filter-item{display:flex;flex-direction:column;gap:5px}
.filter-item label{font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:0.3px}
.filter-item input,.filter-item select{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13.5px;outline:none;min-width:135px}
.filter-item input:focus,.filter-item select:focus{border-color:var(--ink)}
.filter-item select.chip{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.filter-item select[multiple]{min-width:170px;max-height:100px;padding:6px}
.filter-item select[multiple] option{padding:4px 6px;border-radius:4px}
.filter-item select[multiple] option:checked{background:var(--ink);color:#fff}
.filter-apply{background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-sm);font-weight:600;font-size:14px}
.filter-apply:hover{opacity:.9}

/* ============ KPI ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-card);position:relative}
.kpi .lbl{font-size:12px;font-weight:600;color:var(--mid);letter-spacing:0.2px;display:flex;align-items:center;gap:6px}
.kpi .val{font-size:26px;font-weight:700;letter-spacing:-0.6px;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .val small{font-size:13px;color:var(--mid);font-weight:600}

/* ===== Grade de KPIs organizada (Faturamento em destaque, demais alinhados) ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.kpi-grid .kpi{display:flex;flex-direction:column;justify-content:center;min-height:110px;margin:0}
.kpi-grid .kpi-span2{grid-column:span 2;background:linear-gradient(135deg,#242424,#2c2c2c);color:#fff}
.kpi-grid .kpi-span2 .lbl{color:rgba(255,255,255,.7)}
.kpi-grid .kpi-span2 .val{color:#fff;font-size:32px}
.kpi-grid .kpi-span2 .sub{color:rgba(255,255,255,.65)}
.kpi-grid .lbl-per{font-size:10.5px;font-weight:600;color:var(--mute);text-transform:none;letter-spacing:0;margin-left:6px}
.kpi-span2 .lbl-per{color:rgba(255,255,255,.5)}
@media(max-width:900px){.kpi-grid{grid-template-columns:1fr 1fr}.kpi-grid .kpi-span2{grid-column:1/-1}}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.kpi-grid .kpi-span2{grid-column:auto}.kpi-grid .kpi{min-height:96px}}
.kpi .sub{font-size:12px;color:var(--mid);margin-top:5px}
      .proj-inline{font-size:12.5px;color:var(--mid);margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
      .proj-inline b{color:var(--link,#1971c2)}
      .kpi-inline-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
      .kpi-inline-stats .ks{display:flex;flex-direction:column}
      .kpi-inline-stats .ks span{font-size:10.5px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
      .kpi-inline-stats .ks b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
      /* ═══ CARDS ═══ */
.card.kpi-fatur{width:100%;background:#EEF3FA!important;border:1px solid #d5e0f0;border-radius:16px;padding:18px 20px;color:var(--ink);margin-bottom:14px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
      /* acento superior sutil azul (--link) para destacar como card de faturamento */
      .card.kpi-fatur::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#2E5AAC}
      .kf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
      .kpi-fatur .lbl{color:var(--ink);font-weight:800}
      .kpi-fatur .lbl-per{color:#5a7ba6;font-weight:600}
      .kpi-fatur .kf-val{color:var(--ink)}
      .kpi-fatur .kf-sub,.kpi-fatur .ks span{color:#5a7ba6}
      .kf-val{font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:6px;letter-spacing:-.5px}
      .kf-sub{font-size:12.5px;color:var(--mid);margin-top:5px}
      .kf-sub b{color:var(--ink)}
      .kf-badge{text-align:right;background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:11px;color:var(--mid);line-height:1.4;min-width:150px}
      .kf-badge b{font-size:17px;color:var(--link,#1971c2);font-weight:800;font-variant-numeric:tabular-nums;display:block;margin-top:2px}
      .kf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);position:relative;z-index:1}
      .kf-stats .ks{display:flex;flex-direction:column;gap:3px}
      .kf-stats .ks span{font-size:10.5px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
      .kf-stats .ks b{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
      .kf-stats .ks-proj b{color:var(--link,#1971c2)}
      @media(max-width:640px){.kf-stats{grid-template-columns:repeat(2,1fr);gap:10px}.kf-val{font-size:26px}.kf-badge{min-width:120px}}
.kpi .delta{font-size:12px;font-weight:600;margin-top:9px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill)}
.kpi .delta.good{color:var(--green);background:#ecfdf3}
.kpi .delta.bad{color:var(--red);background:#fef2f2}
/* variação colorida na tabela (períodos da Evolução) — igual à do KPI */
.delta{font-weight:600}
td .delta.good, .delta.good{color:var(--green)}
td .delta.bad, .delta.bad{color:var(--red)}
.delta.mute{color:var(--mute)}
/* destaque do melhor período na tabela de evolução */
tbody tr.peak{background:#eef7ef!important}
tbody tr.peak td:first-child{font-weight:700}
.pk-tag{display:inline-block;background:#16a34a;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:1px}
/* pill para a 1ª linha ("base") */
td .delta.base{color:var(--mute);background:var(--surface-soft);padding:2px 8px;border-radius:999px;font-weight:600}

/* ============ CARDS ============ */
.card{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-card);margin-bottom:18px}
.card h3{font-size:15px;font-weight:700;letter-spacing:-0.2px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .desc{font-size:13px;color:var(--mid);margin:3px 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}

/* ===== KPI INTELIGENTE (venda do dia + projeção + picos) ===== */
.kpi-dia{background:var(--live-bg);color:#fff;border:0;padding:20px 22px;box-shadow:0 10px 24px -12px rgba(30,41,59,.5)}
      .kpi-dia .lbl{font-size:12px;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
      .kd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
      .kd-val{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:6px;font-variant-numeric:tabular-nums}
      .kd-sub{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
      .kd-sub b{color:#fff}
.kd-status{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
.kd-status.ok{background:#16a34a;color:#fff}
.kd-status.mid{background:#d97706;color:#fff}
.kd-status.low{background:#dc2626;color:#fff}
.kd-bar{height:9px;background:var(--live-track);border-radius:6px;overflow:hidden;margin-top:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.kd-fill{height:100%;border-radius:6px;transition:width .4s}
.kd-fill.ok{background:#22c55e}
.kd-fill.mid{background:var(--amber)}
.kd-fill.low{background:#ef4444}
.kd-barlbl b{color:var(--amber, #fbbf24);font-weight:800}
.kd-barlbl{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.7);margin-top:6px}
.kd-peaks{margin-top:16px}
.kd-peakslbl{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px}
.pk-chart{display:flex;align-items:flex-end;gap:3px;height:70px}
.pk-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.pk-bar{width:100%;max-width:10px;background:rgba(255,255,255,.35);border-radius:3px 3px 0 0;min-height:2px}
.pk-zero{height:2px!important;background:rgba(255,255,255,.1)}
.pk-col.pk-now .pk-bar{background:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,.8)}
.pk-col span{font-size:8px;color:rgba(255,255,255,.5);margin-top:3px}
.kpi-dia .pk-col.title-hover:hover .pk-bar{background:var(--link)}
@media(max-width:560px){.kd-val{font-size:24px}.kpi-dia{padding:16px}}
      /* ---- detalhe por loja DENTRO do card "Venda de hoje" (master-detail) ---- */
      .kd-lojas{margin-top:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
      .kd-lojastoggle{display:inline-flex;align-items:center;gap:5px;padding:2px 0;border:0;border-radius:999px;
        font-size:12px;font-weight:600;color:rgba(255,255,255,.72);background:transparent;
        opacity:.9;transition:all .15s;cursor:pointer;white-space:nowrap;text-decoration:none}
      .kd-lojastoggle:hover{opacity:1;color:#fff;background:rgba(255,255,255,.10)}
      .kd-lj-i{font-size:10px;opacity:.85}
      .kd-lj-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
        border-radius:999px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.85);font-size:11px;font-weight:700}
      .kd-lojabox{margin-top:10px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 2px 10px rgba(0,0,0,.18);
        color:var(--ink)}
      .kd-lojabox.hide{display:none}

/* ============ TABELA ============ */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mid);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:0.4px}
td{padding:12px 10px;border-bottom:1px solid var(--line)}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--surface-soft)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.pos{color:var(--ink);font-weight:700;font-family:var(--mono)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.pill.gray{background:var(--surface-soft);color:var(--mid)}
.pill.dark{background:var(--ink);color:#fff}
.pill.green{background:#ecfdf3;color:var(--green)}
.bar{height:7px;background:var(--surface-soft);border-radius:5px;overflow:hidden;margin-top:6px}
.bar>div{height:100%;background:var(--ink);border-radius:5px;transition:width .4s ease}
.rankline{display:flex;align-items:center;gap:12px;padding:7px 0}
.rankline .idx{width:22px;text-align:center;font-family:var(--mono);font-size:13px;color:var(--mid);font-weight:500}
.rankline .nm{width:200px;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.rankline .bar{flex:1;margin:0}
.rankline .vl{width:92px;text-align:right;font-size:13px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.rankline .vl.sub{width:auto;color:var(--mute);font-size:11.5px;margin-left:8px}
.grupo{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.grupo:last-child{border-bottom:0}
.g-ic{width:40px;height:40px;border-radius:11px;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.g-info{min-width:180px;flex-shrink:0}
.g-nome{font-size:14px;font-weight:600;letter-spacing:-0.2px}
.g-sub{font-size:12px;color:var(--mute);margin-top:1px}
.g-bar-wrap{flex:1;min-width:160px}
/* barra de etapas do fluxo de metas (Planejar → Distribuir → Acompanhar) */
/* Barra de etapas (stepper) da aba Metas — wizard visual */
.metasbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;position:sticky;top:0;z-index:20;padding:8px 2px;background:var(--bg,#f5f5f7);border-radius:4px}
.mb{position:relative;flex:1;min-width:150px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-soft);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}
.mb small{display:block;font-size:11px;color:var(--mute);margin-top:4px;line-height:1.3;opacity:.85}
.mb:hover{border-color:var(--link);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.mb.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 5px 16px rgba(0,0,0,.18)}
.mb.on small{color:rgba(255,255,255,.85)}
.mb .mb-num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;font-size:12px;font-weight:800;background:rgba(0,0,0,.08);margin-right:8px;vertical-align:middle}
.mb.on .mb-num{background:#fff;color:var(--ink)}
.g-bar-sub{font-size:11.5px;color:var(--mute);margin-top:5px;font-variant-numeric:tabular-nums}
.g-val{text-align:right;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;flex-shrink:0}
.g-val b{display:block;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-0.3px;font-family:var(--mono)}
.vl.sub{width:auto;color:var(--mute)}

.empty{color:var(--mid);text-align:center;padding:38px;font-size:14px}
.errbox{color:var(--red);padding:18px;font-size:14px;text-align:center}
.loading{display:flex;align-items:center;justify-content:center;padding:60px;gap:12px;color:var(--mid);font-size:14px}
.spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Skeleton loading (esqueleto de card pulsante) ===== */
.skel{display:flex;flex-direction:column;gap:14px;padding:6px 2px}
.skel-block{height:16px;border-radius:8px;background:linear-gradient(90deg,var(--surface-soft) 25%,#ececee 37%,var(--surface-soft) 63%);
  background-size:400% 100%;animation:skelShine 1.3s ease infinite}
.skel-card{height:90px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface-soft) 25%,#ececee 37%,var(--surface-soft) 63%);
  background-size:400% 100%;animation:skelShine 1.3s ease infinite}
.skel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.skel.grid2k{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@keyframes skelShine{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.skel-block,.skel-card{animation:none}}
@media(max-width:760px){.skel.grid2k{grid-template-columns:1fr}}

/* ===== Transições suaves ao expandir/recolher ===== */
.detalle{transform-origin:top;animation:expandFade .22s ease}
.gm-detalhe,.lh-body{transform-origin:top;animation:expandFade .22s ease}
@keyframes expandFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.detalle,.gm-detalhe,.lh-body{animation:none}}

/* toolbars inside cards */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:12px}
.toolbar div{display:flex;flex-direction:column;gap:4px}
.toolbar label{font-size:11px;color:var(--mid);font-weight:600}

/* botoes de acao nas tabelas de admin */
.iconbtn{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:var(--red);background:var(--surface-soft);font-size:14px}
.iconbtn:hover{background:#fee2e2}

/* caixas selecionáveis de lojas (formulário de usuário) */
.loja-caixas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;max-height:180px;overflow-y:auto;
  background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:10px}
.loja-cbx{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;cursor:pointer;
  background:#fff;border:1px solid var(--line);font-size:12.5px;transition:all .12s;user-select:none}
.loja-cbx:hover{border-color:var(--ink)}
.loja-cbx:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.loja-cbx input{width:16px;height:16px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
.loja-cbx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* lista rolante e pesquisável de vendedores (metas) */
.vend-list{max-height:220px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:6px}
.vend-item{display:flex;flex-direction:column;width:100%;text-align:left;padding:8px 12px;cursor:pointer;border:0;
  border-bottom:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--font)}
.vend-item:last-child{border-bottom:0}
.vend-item:hover{background:var(--surface-soft)}
.vend-item.sel{background:var(--ink);color:#fff}
.vend-item.sel .vi-loja{color:rgba(255,255,255,.7)}
.vi-nome{font-size:13px;font-weight:600}
.vi-loja{font-size:11px;color:var(--mute);margin-top:1px}
.vend-empty{color:var(--mute);padding:14px;font-size:13px;text-align:center}

/* caixa de credenciais (senha + 2FA) no modal de novo usuário */
.cred-box{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.cred-line{display:flex;flex-direction:column;gap:4px}
.cred-line label{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.cred-v{display:flex;align-items:center;gap:8px}
.cred-v code{flex:1;font-size:13px;background:var(--surface-soft);border:1px solid var(--line);padding:8px 10px;border-radius:8px;word-break:break-all}
.btn-xs{padding:5px 10px;font-size:12px;border-radius:8px;white-space:nowrap}

/* chart */
#chart{width:100%;height:auto}

/* ---- grupos mãe: barra de composição + ranking + detalhe ---- */
.mx-bar{display:flex;gap:2px;height:22px;border-radius:var(--r-sm);overflow:hidden;margin:4px 0 12px}
.mx-seg{transition:opacity .2s}
.mx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;font-size:12px;color:var(--mid)}
.mx-ley{display:inline-flex;align-items:center;gap:5px}
.mx-ley i{width:10px;height:10px;border-radius:3px;display:inline-block}
.mx-ley b{font-family:var(--mono);color:var(--ink)}

.rank-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
/* botões de expandir/recolher do card de grupos mãe */
.gm-toggle{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;color:var(--mid);background:var(--surface-soft);transition:all .15s;cursor:pointer}
.gm-toggle:hover{color:var(--ink);background:var(--line)}
.gm-toggle-inline{margin:2px 0 10px;width:max-content}
.gi{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:background .12s,border-color .12s}
.gi:hover{background:var(--surface-soft)}
.gi.sel{background:var(--surface-soft);border-color:var(--ink)}
.gi-pos{width:22px;text-align:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mid);flex-shrink:0}
.gi-pos.top{color:var(--ink)}
.gi-dot{width:11px;height:11px;border-radius:4px;flex-shrink:0}
.gi-main{flex:1;min-width:0}
.gi-row1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gi-nome{font-size:13.5px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-val{font-size:13.5px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);flex-shrink:0}
.gi-track{height:7px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:5px}
.gi-fill{height:100%;border-radius:5px;transition:width .3s}
.gi-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;font-size:11.5px;color:var(--mute)}
.gi-pct{font-family:var(--mono);color:var(--mid);font-weight:600}
.gi-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* painel do grupo selecionado */
.gp-painel{margin-top:8px;background:linear-gradient(180deg,var(--surface-soft),#fff);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px}
.gp-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gp-ic{width:28px;height:28px;border-radius:8px;flex-shrink:0}
.gp-nome{font-size:15px;font-weight:700;letter-spacing:-.3px}
.gp-sub{font-size:12px;color:var(--mid);margin-top:1px}
.gp-fat{margin-left:auto;text-align:right}
.gp-fat b{display:block;font-size:20px;font-weight:700;font-family:var(--mono);letter-spacing:-.4px}
.gp-fat span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
.gp-cols{display:grid;grid-template-columns:repeat(2,auto);gap:14px 26px;margin-top:13px}
.gp-cols>div{display:flex;flex-direction:column;gap:2px}
.gp-lab{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.gp-num{font-size:14px;font-weight:600;font-family:var(--mono)}
.gp-pill{display:inline-flex;align-items:center;width:max-content;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;font-family:var(--mono)}
.gp-pill.ok{color:var(--green);background:#ecfdf3}
.gp-pill.mid{color:var(--amber);background:#fef6e7}
.gp-pill.low{color:var(--red);background:#fef2f2}
.gp-pill.gray{color:var(--mid);background:var(--surface-soft)}
/* comparativo objetivo × projeção (cor estilo ritmo do KPI dia) */
.pan-cmp{display:flex;align-items:center;width:max-content;gap:6px;padding:6px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;margin:2px 0 12px}
.pan-cmp.ok{color:#fff;background:var(--green)}
.pan-cmp.mid{color:#fff;background:var(--amber)}
.pan-cmp.low{color:#fff;background:var(--red)}
.pan-cmp.gray{color:var(--mid);background:var(--surface-soft)}
/* dois cumprimentos (projeção e meta) no painel do grupo */
.gp-cump2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:13px}
.gp-cump .gp-labl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;
  font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.gp-tbar{height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.gp-tbar>div{height:100%;border-radius:5px}
/* linha do ranking: cumprimento meta + projeção lado a lado */
.gi-cump{display:flex;gap:14px;margin-top:4px;font-size:11px;color:var(--mute)}
.gi-cump-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gi-cump-item b{display:inline-flex;font-size:11px}

/* panorama geral do faturamento */
.gp-panorama .pan-top{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.pan-cel{background:var(--surface-soft);border-radius:12px;padding:14px 16px}
.pan-cel.fat{background:var(--ink);color:#fff}
.pan-cel.fat .pan-lab{color:rgba(255,255,255,.7)}
.pan-cel.fat .pan-val{color:#fff}
.pan-lab{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.pan-val{font-size:22px;font-weight:800;font-family:var(--mono);letter-spacing:-.5px;margin-top:6px}
.pan-val.small{font-size:17px}
.pan-cum{margin-top:6px}
.pan-cum .pill{margin-top:4px}
.pan-bars{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.pan-bl{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;
  font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
@media(max-width:560px){
  .gp-panorama .pan-top{grid-template-columns:1fr;gap:10px}
  .pan-bars{grid-template-columns:1fr;gap:10px}
}

/* ===== EVOLUÇÃO ===== */
.ev-panel{margin-bottom:18px}
.ev-periodo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ev-b{padding:9px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--mid);
  background:var(--surface-soft);border:1px solid transparent;transition:all .15s}
.ev-b:hover{color:var(--ink)}
.ev-b.on{background:var(--ink);color:#fff}
.ev-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ev-filtros>div{display:flex;flex-direction:column;gap:4px}
.ev-filtros label{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.ev-filtros select{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;
  font-size:13.5px;outline:none;min-width:130px}
.ev-filtros select:focus{border-color:var(--ink)}
.evo-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.evo-tip{margin-top:10px;font-size:13px;color:var(--mid);background:var(--surface-soft);border-radius:8px;padding:8px 12px;display:inline-block}
@media(max-width:560px){
  .ev-filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ev-filtros>div{min-width:0}
  .ev-filtros select{width:100%;min-width:0}
  .ev-filtros .btn{grid-column:1/-1}
  .evo-kpis{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:380px){.evo-kpis{grid-template-columns:1fr}}

@media(max-width:520px){
  .gp-cols{grid-template-columns:1fr;gap:10px}
  .gp-fat{width:100%;text-align:left;margin-top:2px}
  .mx-legend{gap:4px 8px}
  .gp-cump2{grid-template-columns:1fr;gap:10px}
  .gi-cump{flex-wrap:wrap;gap:6px 12px}
  .gi-cump-item{font-size:10.5px}
  .gi-cump-item b{font-size:10.5px}
}

/* ---- detalle expandible ---- */
.rankline.clickable{cursor:pointer}
.rankline.clickable:hover{background:var(--surface-soft)}

/* ---- lista "venda de hoje por loja" (tempo real) — casando com o KPI */
.lojas-hoje{border:0;overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-card)}
.lh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(135deg,#242424,#2c2c2c);color:#fff;padding:16px 20px}
.lh-head-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lh-toggle{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:999px;font-size:12px;
  font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  transition:all .15s;cursor:pointer;white-space:nowrap}
.lh-toggle:hover{background:rgba(255,255,255,.24)}
.lh-head-lbl{font-size:14px;font-weight:700;letter-spacing:-.2px}
.lh-head-sub{font-size:12px;color:rgba(255,255,255,.65);margin-top:2px}
.lh-head-dot{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);padding:5px 11px;border-radius:999px;font-weight:600;white-space:nowrap}
.lh-pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:lhPulse 1.8s infinite}
@keyframes lhPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.lh-body{padding:6px 8px 8px}
.lh-body.lh-loading{min-height:160px}
.lh-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border-bottom:1px solid var(--line);transition:background .1s}
.lh-row:hover{background:var(--surface-soft)}
.lh-row:last-child{border-bottom:0}
.lh-pos{width:20px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--mute);font-weight:600;flex-shrink:0}
.lh-nome{width:170px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;color:var(--ink)}
.lh-bar{flex:1;min-width:60px}
.lh-bar>div{background:var(--ink)}
.lh-val{width:104px;text-align:right;flex-shrink:0}
.lh-val b{display:block;font-size:13px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.lh-sub{font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.lh-meta{width:96px;text-align:right;flex-shrink:0}
.lh-meta b{display:block;font-size:12px;font-family:var(--mono);color:var(--mid);font-variant-numeric:tabular-nums}
.lh-ritmo{width:112px;text-align:center;font-size:11px;font-weight:700;padding:4px 0;border-radius:999px;flex-shrink:0;white-space:nowrap}
.lh-ritmo .mono{font-weight:600;font-size:10.5px;margin-left:3px}
.lh-ritmo.ok{color:var(--green);background:#ecfdf3}
.lh-ritmo.mid{color:var(--amber);background:#fef6e7}
.lh-ritmo.low{color:var(--red);background:#fef2f2}
.lh-total{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 10px 2px;
  border-top:1px solid var(--line);margin-top:4px;font-size:13px}
.lh-total span{color:var(--mid);font-weight:600}
.lh-total b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:15px}
.lh-total .lh-hora{color:var(--mute);font-weight:500}
.lh-empty{text-align:center;padding:36px;color:var(--mid);font-size:13px}
@media(max-width:720px){
  .lh-nome{width:120px}
  .lh-meta{display:none}
  .lh-ritmo{width:auto;padding:4px 8px}
  .lh-val{width:92px}
  .lh-head-sub{display:none}
  .lh-row{flex-wrap:wrap}
  .lh-bar{order:4;width:100%;flex-basis:100%;margin-top:2px}
}
.detalle{display:none;margin:2px 4px 6px;background:var(--surface-soft);border-radius:var(--r-sm);padding:8px 10px}
.detalle.open{display:block}
.detalle-title{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:4px}
.dg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:3px 0}
.dg-row i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dg-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dg-row .vl{font-family:var(--mono);text-align:right;width:96px;color:var(--ink)}
.dg-row .pc{width:40px;text-align:right;font-family:var(--mono);color:var(--mid)}
.dg-bar{height:5px;background:var(--line);border-radius:4px;flex:1;margin-top:1px}
.dg-bar>div{height:100%;background:var(--ink);border-radius:4px}
.dg-load{font-size:12px;color:var(--mid);padding:8px}

/* lista scrollable (rankings completos) */
.scroll{max-height:260px;overflow-y:auto;margin-bottom:2px}
.scroll-tall{max-height:360px;overflow-y:auto}

/* caret indocador de expansión */
.caret{font-size:10px;color:var(--mute);width:14px;text-align:center;flex-shrink:0}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:10px;font-size:14px;opacity:0;transition:all .25s;z-index:400;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,0.2)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ====== BOTTOM NAV (mobile) ====== */
.bottomnav{display:none}
@media(max-width:768px){
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;font-size:10px;font-weight:600;color:var(--mid);border-radius:10px;min-height:52px}
  .bottomnav button .bn-ic{font-size:20px;line-height:1}
  .bottomnav button.active{color:var(--ink)}
  .bottomnav button.active .bn-ic{transform:scale(1.1)}
  body{padding-bottom:0}
}

/* ====== RESPONSIVIDADE GERAL ====== */
@media(min-width:769px){ .desktop-only{display:block} .mobile-only{display:none!important} }
@media(max-width:768px){ .desktop-only{display:none!important} .mobile-only{display:block} }

@media(max-width:768px){
  .container{padding:16px 14px 40px}
  .topnav-inner{padding:0 14px;height:58px}
  .topnav .who{display:none}
  .brand-text{font-size:14px}
  .pagehead{margin-bottom:16px}
  .pagehead h1{font-size:20px}
  .pagehead .desc{font-size:12.5px}
  .navlinks{display:none} /* some a nav superior, usa a bottom nav */

  /* filtros em grade 2 colunas, campos grandes para toque */
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:14px;position:static}
  .filter-item{min-width:0}
  .filter-item input,.filter-item select{min-width:0;width:100%;padding:12px 12px;font-size:15px;border-radius:10px}
  .filter-item label{font-size:11px}
  .filter-apply{grid-column:1/-1;padding:14px;font-size:15px;border-radius:10px;min-height:48px}

  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:14px}
  .kpi .val{font-size:20px}
  .kpi .lbl{font-size:11px}
  .card{padding:16px;border-radius:14px;margin-bottom:14px}
  .card h3{font-size:14px}

  /* tabelas viram cards no mobile */
  .tbl-wrap table,.tbl-wrap thead,.tbl-wrap t/* ═══ TIPOGRAFIA ═══ */
body,.tbl-wrap tr,.tbl-wrap td{display:block;width:100%}
  .tbl-wrap thead{display:none}
  .tbl-wrap tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 2px;border-bottom:1px solid var(--line)}
  .tbl-wrap td{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;border:0}
  .tbl-wrap td.r{justify-content:space-between}
  .tbl-wrap td:not(.r){text-align:left}
  .tbl-wrap td::before{content:attr(data-label);font-size:11px;color:var(--mid);font-weight:600;flex-shrink:0}
  .tbl-wrap td.r::before{content:attr(data-label);font-size:11px;color:var(--mid);font-weight:600}
  .tbl-wrap td[data-label=""]::before{content:""}

  .rankline .nm{width:150px}
  .rankline .vl{width:80px;font-size:12px}
  .empty{padding:28px}

  .grid2,.grid3{grid-template-columns:1fr}

  /* toolbar de formulários empilha */
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .toolbar div{min-width:0}
  .toolbar div:has(button){grid-column:1/-1}
  .toolbar input,.toolbar select{width:100%!important}

  /* login */
  .login-card{padding:28px 22px;margin:0 12px}
  .btn{padding:14px 18px;font-size:15px;min-height:48px}
}
@media(max-width:400px){
  .kpis{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
}
@media(min-width:1400px){
  .container{max-width:1360px}
  .kpis{grid-template-columns:repeat(4,1fr)}
}
/* ===== Aviso offline (opção 2) ===== */
#offline-banner{position:sticky;top:0;z-index:60;background:#fef3c7;color:#92400e;
  border-bottom:1px solid #fcd34d;padding:8px 16px;font-size:13px;font-weight:600;
  text-align:center}

/* ===== Modal de detalhe das vendas por produto (Acompanhar) ===== */
.cdp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:14px}
.cdp-modal{background:#fff;border-radius:14px;max-width:880px;width:100%;max-height:90vh;min-height:0;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cdp-hd{flex-shrink:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cdp-hd h3{margin:0;font-size:17px}
.cdp-hd .sub{font-size:12px;color:var(--mid);margin-top:3px}
.cdp-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--mid);line-height:1}
.cdp-tabs{flex-shrink:0;display:flex;gap:8px;padding:10px 16px 12px;flex-wrap:wrap;min-width:0}
.cdp-tab{flex:0 0 auto;border:1px solid var(--line);background:#f7f7f7;border-radius:20px;padding:9px 16px;font-size:13px;cursor:pointer;color:#333;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center}
.cdp-tab.on{background:#242424;color:#fff;border-color:#242424}
.cdp-tab .n{font-weight:700;margin-left:5px}
.cdp-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 18px 18px}
.cdp-info{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cdp-info .kpi{flex:1;min-width:120px}
.cdp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cdp-tbl th{text-align:left;padding:8px 8px;border-bottom:2px solid var(--line);font-size:12px;color:var(--mid);white-space:nowrap}
.cdp-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.cdp-tbl tr:hover td{background:#fafafa}
.cdp-tbl .r{text-align:right;white-space:nowrap}
.cdp-empty{padding:24px;text-align:center;color:var(--mid)}
.cdp-ean{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--mid)}
      .desc-pt{display:inline-block;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:999px}
      .desc-pt.good{background:#ecfdf3;color:#16a34a}
      .desc-pt.mid{background:#e7f1ff;color:#1971c2}
      .desc-pt.low{background:#fff3e6;color:#d97706}
      .desc-pt-sub{color:var(--mute);font-size:10px;font-weight:600}
      /* marcação de colunas que geram pontos na evolução */
      .ev-cell{display:inline-block;font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:4px;margin-top:3px;white-space:nowrap}
      .ev-cell.on{background:#ecfdf3;color:#16a34a;border:1px solid #a8e6c0}
      .ev-cell.up{background:#e7f1ff;color:#1971c2;border:1px solid #a5c8f0}
      .ev-cellval{display:inline-block}
      td.ev-tdcell{background:transparent}
      tr:hover td.ev-tdcell{background:transparent}
@media(max-width:720px){
  .cdp-overlay{padding:8px;align-items:flex-end}
  .cdp-modal{max-height:94vh;border-radius:16px 16px 0 0}
  .cdp-info .kpi{flex:1 1 45%;min-width:0}
  .cdp-tabs{padding:10px 12px 12px;gap:6px}
  .cdp-tab{font-size:12px;padding:8px 12px;flex-shrink:0}
  /* tabela vira cards empilhados (mesmo padrão do .sx-table) */
  .cdp-tbl,.cdp-tbl tbody{display:block;width:100%}
  .cdp-tbl thead{display:none}
  .cdp-tbl tr{display:block;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;background:#fff}
  .cdp-tbl td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none;padding:5px 0;font-size:13px}
  .cdp-tbl td:before{content:attr(data-label);font-size:11px;color:var(--mid);font-weight:600;flex-shrink:0}
  .cdp-tbl td.r{text-align:right}
  .cdp-tbl tr:hover td{background:transparent}
  .cdp-tbl td[data-label="#"]{display:none} /* esconde a coluna # no mobile */
}




/* ===== Modal de evolução da loja (widget "Análise por grupo") ===== */
.wlo-tabs{flex-wrap:wrap}
.wlo-d{display:inline-block;font-size:10.5px;font-weight:700;white-space:nowrap;margin-top:2px}
.wlo-d.up{color:var(--green)}.wlo-d.dn{color:var(--red)}

      /* toggle switch (permissões) */
      .switch{position:relative;display:inline-block;width:44px;height:25px;flex:0 0 auto}
      .switch input{display:none}
      .switch .sw{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e03131;border-radius:25px;transition:.2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
      .switch .sw:before{position:absolute;content:"";height:19px;width:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
      .switch input:checked+.sw{background:#2f9e44}
      .switch input:checked+.sw:before{transform:translateX(19px)}
      .switch input:disabled+.sw{opacity:.45;cursor:not-allowed}
      .perm-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.2px}
      .perm-chip.on{background:#d3f9d8;color:#087f5b}
      .perm-chip.off{background:#ffe3e3;color:#c92a2a}
      .perm-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--muted)}
      .pc-on{color:#087f5b;font-weight:700}.pc-off{color:#c92a2a;font-weight:700}
      

      /* abas internas do Admin */
      .admin-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-bottom:1px solid var(--line);background:var(--surface-soft)}
      .seg-control{display:inline-flex;background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
      .ph-ac{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--bg,#fff);border:1px solid var(--line);border-radius:10px;margin-top:4px;max-height:260px;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.15);scrollbar-width:thin}
      .ph-ac-item{padding:9px 12px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--ink)}
      .ph-ac-item:hover{background:var(--surface-soft)}
      .ph-ac-empty{padding:10px;font-size:12.5px;color:var(--mute)}
      .seg-btn{border:0;background:transparent;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);transition:.15s}
      .seg-btn:hover{background:rgba(0,0,0,.05)}
      .seg-btn.on{background:var(--ink);color:#fff}
      

      .ev-presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
      .ev-presets .ev-b{padding:6px 11px;font-size:12px;background:transparent;border:1px solid var(--line)}
      .ev-presets .ev-b:hover{border-color:var(--link)}

      .ev-grupo-label{font-size:12px;color:var(--mid);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:6px}
      .ev-grupo-label small{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:4px}
      
      /* ===== Tela Uso do app — responsivo consistente (PC + celular) ===== */
      .uso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:14px 0}
      .tbl-uso{width:100%;border-collapse:collapse}
      .tbl-uso th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
      .tbl-uso td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
      .tbl-uso tbody tr:hover{background:var(--surface-soft)}
      .tbl-uso .r{text-align:right}
      /* No celular, .tbl-uso (e qualquer tabela com [data-label]) vira card empilhado
      pela regra UNIVERSAL definida nas melhorias sistêmicas (breakpoint 640px).
      Mantido aqui só o desktop: th/td já tratados acima. */      
      /* ===== Tela Uso — listas e gráfico responsivos ===== */
      .uso-linha{display:flex;align-items:center;gap:10px;margin:7px 0}
      .uso-tela{min-width:110px;font-size:13px;font-weight:600}
      .uso-val{min-width:36px;text-align:right;font-size:12px;color:var(--mid)}
      .uso-hbars{display:flex;align-items:flex-end;gap:3px;height:70px;width:100%}
      .uso-hbar{flex:1;background:var(--link);border-radius:3px 3px 0 0;min-height:3px}
      .uso-hlabels{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);margin-top:2px}
      @media(max-width:720px){.uso-tela{min-width:82px;font-size:12px}}
      
/* ============================================================
   MELHORIAS SISTÊMICAS (todas as abas — UX + acessibilidade)
   Aplicam em PC e celular de forma consistente.
   ============================================================ */

/* 1) Acessibilidade: foco sempre visível (teclado no PC, toque móvel) */
a:focus-visible, button:focus-visible, .f-input:focus-visible, select:focus-visible, input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--link); outline-offset:2px; border-radius:6px;
}

/* 2) Toque confortável no celular (tap target >=44px) + hover no desktop */
@media (hover:hover){
  .btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.10)}
  .btn.ghost:hover{box-shadow:0 3px 10px rgba(0,0,0,.06)}
  .iconbtn:hover{transform:scale(1.08)}
  .card{transition:box-shadow .2s}
}
@media (hover:none){
  .btn:active, .btn:focus, .f-input:focus{transform:scale(.99)}
}

/* 3) Consistência visual: cantos e sombras suaves em todos os cartões */
.card{border-radius:var(--radius); box-shadow:var(--shadow-card)}
.kpi{box-shadow:var(--shadow-card)}

/* 4) Rolagem suave + ritmo de toque */
*{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}

/* 5) Densidade: tabelas e listas legíveis com conforto nos dois tamanhos */
.tbl-wrap{scrollbar-width:thin}
.tbl-wrap::-webkit-scrollbar:vertical{width:6px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}


/* ============ TABELAS -> CARDS NO CELULAR (universal, via data-label) ============ */
/* Qualquer tabela cujos <td> tenham data-label vira card empilhado no mobile.
   Isso padroniza Metas(metas definidas/trocas/faixas), Admin(usuários/áreas/permissões),
   Uso e outras telas que já usam data-label — sem tocar na lógica de nenhuma. */
@media(max-width:640px){
  .tbl-wrap table{table-layout:auto;width:100%}
  .tbl-wrap table thead{display:none}
  .tbl-wrap table tbody{display:block}
  .tbl-wrap table tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
  .tbl-wrap table tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:8px 0;border:0;border-bottom:1px dashed var(--line);text-align:left;overflow-wrap:break-word}
  .tbl-wrap table tbody td:last-of-type{border-bottom:0}
  .tbl-wrap table tbody td[data-label]:before{content:attr(data-label);font-weight:700;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);flex-shrink:0;margin-right:8px}
  .tbl-wrap table tbody td[data-label]{justify-content:space-between}
  /* células sem data-label (checkbox/acoes) ficam alinhadas à direita */
  .tbl-wrap table tbody td:not([data-label]){justify-content:flex-end}
  .tbl-wrap table tbody tr>td:first-child:not([data-label]){justify-content:flex-start}
  /* buttons dentro de card mobile */
  .tbl-wrap table tbody td .iconbtn{width:34px;height:34px}
}
@media(min-width:641px){
  /* no desktop foco em legibilidade: zebra suave */
  .tbl-wrap table tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
  .tbl-wrap table tbody tr:hover{background:rgba(0,0,0,.035)}
}


/* ============ ACABAMENTO GLOBAL (consistência fina) ============ */
/* Transição suave ao trocar de tela (o #page é reposto pelo JS) */
#page{animation:pageIn .22s ease}
@keyframes pageIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#page{animation:none}}

/* Consistência de títulos de card em toda a app */
.card h3{font-size:16px;font-weight:800;letter-spacing:-.2px;margin-bottom:10px}
.card h3:has(> .pill){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.desc{font-size:13px;color:var(--mid);line-height:1.55;margin-bottom:12px}

/* Espaçamento uniforme entre cartões responsivo */
.card{margin-bottom:18px}
@media(max-width:560px){.card{padding:16px}.card h3{font-size:15px}}

/* Scroll macio nas áreas internas (listas/tabelas longas) */
.eq-lista,.vend-list,.lhm-list,.lh-body{overscroll-behavior:contain}


      .ev-grupos{min-width:240px;max-width:340px}
      .ev-g-btn{width:100%;text-align:left;margin-bottom:6px}
      
      /* ===== Widget "Análise por loja" (dashboard) ===== */
      .wa-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}
      .wa-h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.2px;border-bottom:1px solid var(--line);background:var(--surface-soft);margin:-22px -22px 0;padding:14px 22px}
      .wa-tit-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);font-size:15px;flex-shrink:0}
      .wa-body{margin-top:6px}
      .wa-scroll{max-height:340px;overflow-y:auto}
      .wa-ref{font-size:11.5px;color:var(--mute);margin-top:8px;background:var(--surface-soft);border-radius:8px;padding:6px 10px}
      .wr{display:flex;align-items:center;gap:10px;padding:8px 8px;border-bottom:1px solid var(--line);font-size:13px}
      .wr .wr-idx{min-width:22px;text-align:center;font-weight:700;color:var(--mid)}
      .wr .wr-idx.top{color:var(--amber);font-weight:800}
      .wr .wr-nm{flex:0 1 auto;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
      .wr .wr-pct{min-width:52px;text-align:right;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
      .wr .wr-val{min-width:80px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
      .wr .wr-sub{min-width:70px;text-align:right;font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
      .wr .wr-delta{min-width:64px;text-align:right;font-weight:800}
      .wr .wr-delta.good{color:var(--green)}.wr .wr-delta.bad{color:var(--red)}
      .wr-div{flex:1;height:14px;display:flex;gap:2px;position:relative;overflow:hidden}
      .wr-nega{background:var(--red);opacity:.55;border-radius:0 7px 0 0;min-width:2px}
      .wr-posi{background:var(--green);opacity:.7;border-radius:7px 0 0 0;min-width:2px}
      @media(max-width:560px){
        /* stacked list (líder em 1ª) ─ 2 linhas fixas via GRID, sem flex-wrap.
          Linha 1: posição · nome (ellipsis à esquerda) · valor-chave à direita.
          Linha 2: barra divergente colorida ocupando a largura toda.
          Em telas estreitas, o delta textual ▲/▼ é Omitido: a cor da barra já
          comunica acima/abaixo da referência (NNG/UXmatters: um só valor-chave +
          barra = leitura mais rápida sem desborde).
        */
        .wr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:
              "idx nm  val"
              "bar bar bar";gap:4px 8px;padding:9px 6px;align-items:center}
        .wr .wr-idx{grid-area:idx;min-width:18px;font-size:12.5px}
        .wr .wr-nm{grid-area:nm;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wr .wr-val{grid-area:val;justify-self:end;font-size:13px;font-weight:800;min-width:0;white-space:nowrap}
        .wr .wr-pct{grid-area:val;justify-self:end;font-size:13px;font-weight:800;min-width:0}
        .wr .wr-delta,.wr .wr-sub{display:none}
        .wr-div{grid-area:bar;height:11px;width:100%}
        .wa-ref{font-size:11px;padding:6px 8px}
        .wa-scroll{max-height:360px}
      }
      /* ===== Aba DESEMPENHO: relatório executivo de evolução ===== */
            .wa-desc{font-size:13px}
            .ev-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
            .ev-res{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
            .ev-res b{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
            .ev-res span{font-size:11px;color:var(--mute);margin-top:1px}
            .ev-res.ov b{color:#16a34a}
            .ev-res.es b{color:#1971c2}
            .ev-res.iv b{color:#dc2626}
            .ev-table{width:100%;border-collapse:collapse;font-size:12.5px}
            .ev-table th{text-align:left;padding:6px 8px;border-bottom:2px solid var(--line);font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.3px;font-weight:700;white-space:nowrap}
            .ev-table td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
            .ev-table th.r,.ev-table td.r{text-align:right}
            .ev-table tbody tr:hover td{background:#fafafa}
            .ev-table .mono{font-variant-numeric:tabular-nums;font-weight:600}
            .ev-line{display:inline-block;vertical-align:middle}
            .ev-meshint{font-size:10px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
            .evs-up{background:#ecfdf3!important;color:#16a34a!important;border:1px solid #a8e6c0}
            .evs-dn{background:#fef2f2!important;color:#dc2626!important;border:1px solid #f4c1c1}
            .evs-eq{background:var(--surface-soft)!important;color:var(--mid)!important;border:1px solid var(--line)}
            .ev-slp{font-weight:800;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
            .ev-slp.ev{color:#16a34a}.ev-slp.in{color:#dc2626}.ev-slp.eq{color:var(--mid)}
            @media(max-width:620px){
              .ev-resumo{grid-template-columns:1fr 1fr 1fr;gap:6px}
              .ev-meshint{display:none}
            }
      @media(max-width:380px){
        .wr .wr-val,.wr .wr-pct,.wr .wr-nm{font-size:12px}
      }
      /* scorecard de evolução por loja: agrupamento por situação + barra de variação */
      .ev-grp td{background:#f4f6f8;font-weight:800;font-size:12px;color:#444;padding:8px;letter-spacing:.3px;text-transform:uppercase}
      .ev-grp td small{font-weight:700;color:var(--mute);margin-left:6px}
      .ev-idx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--surface-soft);font-weight:700;font-size:12px}
      .escbar{display:inline-block;width:56px;height:7px;border-radius:4px;background:#ececec;overflow:hidden;vertical-align:middle;margin-right:6px}
      .escbar>div{height:100%;border-radius:4px}
      .escbar .esc-up{background:linear-gradient(90deg,#86efac,#16a34a)}
      .escbar .esc-dn{background:linear-gradient(90deg,#fca5a5,#dc2626)}
      .escbar .esc-eq{background:#cbd5e1}
      .ev-slp{white-space:nowrap}
      .ev-tot{font-size:15px;font-weight:800;color:#242424;font-variant-numeric:tabular-nums}
      .ev-sub{color:var(--mute);font-size:10px;font-weight:600}
      .ev-idx.top{background:#dcfce7;color:#15803d}
      .ev-idx.mid{background:#e0e7ff;color:#4338ca}
      /* ===== Tabela rolante (visão geral + detalhe em scroll interno) ===== */
      .ev-body{max-height:52vh;overflow-y:auto;overflow-x:auto;border:1px solid var(--line);border-radius:10px;scrollbar-width:thin;scrollbar-color:#c9c9cf transparent}
      .ev-body::-webkit-scrollbar{width:8px;height:8px}
      .ev-body::-webkit-scrollbar-thumb{background:#c9c9cf;border-radius:4px}
      .ev-body .cdp-tbl thead{position:sticky;top:0;z-index:3;background:var(--bg, #fff)}
      .ev-body .cdp-tbl thead th{background:var(--bg,#fff);box-shadow:0 1px 0 var(--line)}
      .ev-table thead th{cursor:pointer;user-select:none}
      .ev-table thead th:hover{color:var(--link)}
      .ev-sort{font-size:10px;opacity:.8;margin-left:2px}
      .ev-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 8px}
      .ev-header .ev-count{font-size:11.5px;color:var(--mute);font-weight:700}
      .ev-header .ev-resumo{margin:0;flex-shrink:0}
      .ev-header .ev-resumo .ev-res b{font-size:18px}
      /* lista rolante mobile (análise por loja/vendedor) */
      .ev-list-scroll{max-height:340px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:12px;padding:6px 8px;scrollbar-width:thin;scrollbar-color:#c9c9cf transparent}
      .ev-list-scroll::-webkit-scrollbar{width:8px}
      .ev-list-scroll::-webkit-scrollbar-thumb{background:#c9c9cf;border-radius:4px}
      /* ===== Evolução mensal — cards MOBILE (dedicados, sem conflito de tabela) ===== */
      .em-list{display:flex;flex-direction:column;gap:10px}
      .em-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
      .em-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
      .em-mes{font-weight:800;font-size:15px;color:var(--ink)}
      .em-pts{font-weight:800;font-size:14px;padding:3px 10px;border-radius:999px}
      .em-pts.pt-good{background:#ecfdf3;color:#16a34a}
      .em-pts.pt-mid{background:#e7f1ff;color:#1971c2}
      .em-pts.pt-low{background:#fff3e6;color:#d97706}
      .em-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
      .em-k{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
      .em-k span{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mute);margin-bottom:2px}
      .em-k b{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
      .em-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px}
      .em-row span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mute)}
      .em-set{font-weight:800;font-size:13px;padding:3px 10px;border-radius:999px;white-space:nowrap}
      .em-set.ev{background:#ecfdf3;color:#16a34a}
      .em-set.in{background:#fef2f2;color:#dc2626}
      .em-set.eq{background:var(--surface-soft);color:var(--mid)}
      .em-k.em-ok{background:#ecfdf3;border-color:#a8e6c0}
      .em-k.em-ok b{color:#15803d}
      .em-k.em-cres{background:#e7f1ff;border-color:#a9c6f0}
      .em-k.em-cres b{color:#1971c2}
      /* ===== Modal: evolução salarial do colaborador (ace-*) ===== */
      .ace-modal{max-width:640px}
      .ace-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
      .ace-kpi{background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
      .ace-kpi span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mute)}
      .ace-kpi b{font-size:16px;color:var(--ink);margin-top:2px}
      .ace-kpi b.mono{font-variant-numeric:tabular-nums}
      .ace-sec{font-size:12px;font-weight:800;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 8px}
      .ace-chart{background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:10px 8px}
      .ace-bars{display:flex;align-items:flex-end;gap:4px;height:110px}
      .ace-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
      .ace-bar{display:flex;align-items:stretch;flex-direction:column;width:100%;max-width:26px;border-radius:4px 4px 0 0;overflow:hidden;justify-content:flex-end;transition:height .4s}
      .ace-bar > div{width:100%}
      .ace-bar.ace-parcial{opacity:.6;border:1px dashed #94a3b8}
      .ace-lbl{font-size:9px;color:var(--mute);margin-top:3px}
      .ace-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:var(--mid)}
      .ace-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
      .ace-row{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
      .ace-mes{flex:0 0 96px;font-size:13px}
      .ace-mes b{color:var(--ink)}
      .ace-parcial-tag{display:block;font-size:9px;color:var(--mute);font-weight:600;text-transform:uppercase}
      .ace-total{flex:0 0 90px;text-align:right;font-weight:800;color:var(--ink);font-size:14px}
      .ace-comps{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
      .ace-comp{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);flex-wrap:wrap}
      .ace-comp b{color:var(--ink)}
      .ace-comp .mono{font-variant-numeric:tabular-nums;color:var(--mid)}
      .ace-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#94a3b8}
      .ace-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
      .ace-chip.ok{background:#ecfdf3;color:#16a34a}
      .ace-chip.no{background:#fef2f2;color:#dc2626}
      .ace-delta{font-size:10px;font-weight:700;white-space:nowrap}
      .ace-delta.up{color:#16a34a}.ace-delta.dn{color:#dc2626}
      /* tabela colunar da evolução salarial */
      .ace-tbl{min-width:560px}
      .ace-tbl th{color:var(--mute);font-weight:700}
      .ace-tbl td{font-size:12.5px}
      .ace-td{padding:6px 8px;vertical-align:top}
      .ace-tc{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
      .ace-tdl{font-size:10px;margin-top:2px}
      .ace-tbl .ace-total b{font-weight:800;color:var(--ink)}
      .ace-mv{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
      .ace-mv b{font-variant-numeric:tabular-nums;color:var(--ink)}
      @media(max-width:640px){.ace-kpis{grid-template-columns:1fr 1fr}.ace-modal{max-width:100%}}

/* ===== ABa RUPTURA (Nível Estoque - Genérico) ===== */
.rup-kpis .kpi{border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.rup-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:700;}
.rup-status/* ═══ RUPTURA ═══ */
.ruptura{background:#fdecea;color:#dc2626;}
.rup-status.risco{background:#fef3e2;color:#d97706;}
.rup-prio{font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);}
.rup-prio.alta{background:#dc2626;color:#fff;}
.rup-prio.media{background:#d97706;color:#fff;}
.rup-days{font-weight:800;font-variant-numeric:tabular-nums;}
.rup-pat{display:flex;flex-direction:column;gap:6px;}
.rup-pat .rp-name{font-size:12px;line-height:1.35;font-weight:600;}
.rup-pat .rp-sub{font-size:11px;color:var(--muted);}
.rup-res{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;}
.rup-res input{width:18px;height:18px;accent-color:var(--green);cursor:pointer;}
.rup-res.done{color:var(--green);}
.rup-row{transition:background .2s;}
.rup-row.done{opacity:.62;}
.rup-row.done td{background:transparent;}
.rup-grupa{font-size:11px;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-soft);color:var(--mid);white-space:nowrap;}
.rup-toolbar .toolbar{gap:10px;flex-wrap:wrap;}
.rup-toolbar select,.rup-toolbar .f-input{min-width:130px;}
.rup-busca{flex:1;min-width:180px;}
.rup-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mid);}
.rup-obs{width:100%;max-width:340px;font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);}
.rup-btn-res{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r-pill);padding:6px 12px;font-weight:700;font-size:12px;cursor:pointer;}
.rup-btn-res.mark{background:var(--green);color:#fff;}
.rup-btn-res.unmark{background:var(--surface-soft);color:var(--mid);}
.rup-count{display:inline-flex;align-items:center;gap:6px;}
.rup-count b{font-size:20px;font-weight:800;}
@media(max-width:640px){.rup-toolbar .toolbar{flex-direction:column;align-items:stretch;}.rup-toolbar select,.rup-busca{width:100%;}}


.rup-kan{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start;}
.rup-kan-col{border-radius:var(--radius);padding:10px;background:var(--surface-soft);border:1px solid var(--line);}
.rup-kan-col.rupt{border-top:3px solid #dc2626;}
.rup-kan-col.aten{border-top:3px solid #d97706;}
.rup-kan-col.done{border-top:3px solid #16a34a;}
.rup-kan-hd{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;padding:4px 6px 8px;}
.rup-kan-count{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 9px;font-size:12px;font-weight:800;}
.rup-kan-body{display:flex;flex-direction:column;gap:8px;}
.rup-kan-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:var(--radius);}

.rup-kcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s;}
.rup-kcard:hover{box-shadow:0 3px 12px rgba(0,0,0,.08);}
.rup-kcard:active{transform:scale(.995);}
.rup-kcard-in{padding:12px 14px;display:flex;flex-direction:column;gap:3px;}
/* linha lateral sóbria indica o estado (não grita) */
.rup-kcard.rupt{border-left:4px solid var(--red);}
.rup-kcard.aten{border-left:4px solid var(--amber);}
.rup-kcard.done{border-left:4px solid var(--green);opacity:.75;}
.rup-kc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
.rup-kc-nombre{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;}
.rup-kc-pres{font-size:12px;color:var(--mid);}
.rup-kc-kpis{font-size:13px;color:var(--ink);margin-top:6px;display:flex;align-items:center;gap:4px;}
.rup-kcard.rupt .rup-kc-kpis{color:var(--red);}
.rup-kcard.aten .rup-kc-kpis{color:var(--amber);}
.rup-kcard.done .rup-kc-kpis{color:var(--green);}
.rup-kc-btn{width:100%;border:none;border-radius:0 0 var(--radius) var(--radius);padding:12px;font-weight:800;font-size:13px;cursor:pointer;}
.rup-kc-btn.mark{background:var(--green);color:#fff;}
.rup-kc-btn.unmark{background:var(--surface-soft);color:var(--mid);border-top:1px solid var(--line);}
.rup-kc-btn.mark{border-top:1px solid rgba(0,0,0,.08);}
.rup-kc-set{color:var(--mid);font-weight:700;font-size:14px;}
.rup-kcard:hover .rup-kc-set{color:var(--ink);}
@media(max-width:640px){.rup-kan{grid-template-columns:1fr;}}

/* ===== Tabs de coluna — MOBILE (selecionar Ruptura/Atenção/Resolvido de uma vez) ===== */
.rup-mov-tabs{display:none;}
@media(max-width:720px){
  .rup-mov-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 8px;scrollbar-width:none;}
  .rup-mov-tabs::-webkit-scrollbar{display:none;}
  .rup-mov-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:8px 12px;font-size:12px;font-weight:700;color:var(--mid);white-space:nowrap;cursor:pointer;min-height:38px;}
  .rup-mov-tab i{font-style:normal;background:var(--surface-soft);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:800;}
  .rup-mov-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);}
  .rup-mov-tab.on i{background:rgba(255,255,255,.2);color:#fff;}
  /* mobile: mostra SÓ a coluna ativa (evita página enorme com as 3 colunas empilhadas) */
  .rup-kan-col{display:none;}
  .rup-kan-col.on-mov{display:block;}
  /* modal detalhe: usa bottom-sheet já coberto por .cdp-*; cards maiores e toque confortável */
  .rup-m-loja{font-size:13px;}
  .rup-m-loja .rup-kc-btn{padding:11px;}
  .rup-kc-btn{padding:12px;font-size:14px;min-height:44px;}
  .rup-kcard{padding:12px 12px 12px 16px;}
  .rup-kc-name .rp-name{font-size:15px;line-height:1.3;}
  .rup-kc-top .rup-grupa{font-size:11px;}
  .rup-mov-tabs{padding:2px 0 10px;gap:8px;}
  .rup-mov-tab{font-size:13px;padding:9px 14px;}
}
@media(min-width:721px){.rup-mov-tabs{display:none;}}


.rup-tag.green{background:#e9fac8;color:#16a34a;}
.rup-m-loja{transition:background .2s;}
.rup-m-loja.done{opacity:.7;}


.rup-kan-done-extra{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--surface-soft);border:1px dashed var(--line);border-radius:var(--radius);padding:6px 8px;font-size:11px;color:var(--mid);margin-bottom:6px;}


/* ===== Evolução mensal (loja/vendedor) — QUADROS MAIORES no desktop ===== */
@media (min-width:1100px){
  #wlo_ov .cdp-modal,#wvv_ov .cdp-modal{max-width:1180px;width:1180px;}
  #wlo_ov .cdp-modal .cdp-body,#wvv_ov .cdp-modal .cdp-body{padding:6px 18px 18px;}
}
@media (min-width:1500px){
  #wlo_ov .cdp-modal,#wvv_ov .cdp-modal{max-width:1320px;width:1320px;}
}
@media (max-width:1099px){
  #wlo_ov .cdp-modal,#wvv_ov .cdp-modal{max-width:96vw;}
}


/* ===== Modal de CONFIRMACIÓN global (melhores práticas) ===== */
.cf-overlay{align-items:center;z-index:300;}
.cf-modal{max-width:420px;padding:22px 24px;gap:16px;text-align:center;align-items:center;}
.cf-ic{font-size:34px;line-height:1;}
.cf-cuerpo{display:flex;flex-direction:column;gap:6px;}
.cf-titulo{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3;}
.cf-copy{font-size:14px;color:#444;line-height:1.5;}
.cf-nota{margin-top:2px;font-size:12px;color:var(--mid);background:var(--surface-soft);border-radius:8px;padding:7px 10px;}
.cf-actions{display:flex;gap:10px;justify-content:stretch;width:100%;}
.cf-actions .cf-btn{flex:1;border-radius:10px;padding:13px 14px;font-weight:800;font-size:14px;cursor:pointer;border:1px solid transparent;min-height:46px;}
.cf-btn.cancel{background:var(--surface-soft);color:var(--ink);border-color:var(--line);}
.cf-btn.cf-ok{background:var(--green);color:#fff;}
.cf-btn.cf-danger{background:var(--red);color:#fff;}
.cf-btn:focus-visible{outline:3px solid var(--link);outline-offset:2px;}
@media(max-width:640px){
  .cf-modal{border-radius:18px 18px 0 0;max-height:90vh;overflow:auto;}
  .cf-overlay{padding:0;align-items:flex-end;}
  .cf-modal{width:100%;max-width:100%;}
  .cf-actions{flex-direction:column-reverse;}
}



/* ===== Ruptura — Tabela executiva (padrão sx-table do Acompanhamento) ===== */
.rup-table tbody tr{cursor:pointer;}
.rup-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;}
.rup-dot.red{background:var(--red);}
.rup-dot.amber{background:var(--amber);}
.rup-dot.done{background:var(--green);}
.rup-cellpad{font-weight:700;font-size:13px;line-height:1.35;color:var(--ink);}
.rup-mini{border:none;border-radius:8px;padding:7px 12px;font-weight:800;font-size:12px;cursor:pointer;background:var(--surface-soft);}
.rup-mini.mark{background:var(--green);color:#fff;}
.rup-mini.unmark{background:var(--surface-soft);color:var(--mid);}
/* mobile: la sx-table ya convierte filas a cards con data-label (heredado); ajustar el badge de status */
@media(max-width:720px){
  .rup-table tbody td .rup-grupa{display:inline-block;margin-bottom:3px;}
  .rup-mini{min-height:38px;width:100%;}
}

/* ===== ABA MARGEM CRÍTICA ===== */
.mg-cfgcard{border-left:4px solid var(--amber);}
.mg-cfggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;}
.mg-cfgrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius-sm,8px);padding:8px 10px;}
.mg-cfgg{font-weight:800;font-size:12px;letter-spacing:.3px;min-width:150px;}
.mg-cfgrow label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mid);}
.mg-cfgin{width:74px;}
.mg-kpis .kpi .val{font-size:clamp(18px,3vw,24px);}
.mg-lbl{font-size:12px;font-weight:700;color:var(--mid);align-self:center;}
.mg-tbl .pill{white-space:nowrap;}
.mg-prod{min-width:220px;}
.mg-prod .mg-desc{display:block;line-height:1.3;font-weight:600;}
.mg-prod small{color:var(--mute);font-family:var(--mono,monospace);}
.mg-grupo{font-weight:700;font-size:12px;}
.pill.mg-amber{background:#fef3c7;color:#92400e;border:1px solid #f59e0b;}

/* ============================================================
   ESTRUTURA VISÃO GERAL (Vendas) — layout seguindo Figma
   Prefijo vg- (dominio de la tela Visão Geral)
   ============================================================ */
.vg-eyebrow{margin-bottom:6px}
.vg-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--mid);
  background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;text-transform:uppercase}
.vg-section{margin-top:18px}
.vg-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.vg-sec-head h3{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.vg-sec-per{font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:.3px}
/* período: acumulado + projeção lado a lado */
.vg-grid-periodo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.card.vg-fatur{background:var(--brand-soft)!important;border:1px solid #cfe0ff;border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden;box-shadow:var(--shadow-card)}
.card.vg-fatur::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand)}
.vg-fatur-label{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.4px}
.vg-fatur-val{font-size:32px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:6px;letter-spacing:-.5px}
.vg-fatur-sub{font-size:12.5px;color:var(--mid);margin-top:5px}
.vg-fatur-sub b{color:var(--ink)}
.card.vg-pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:center}
.vg-plabel{font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.4px}
.vg-pval{font-size:26px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.4px}
.vg-psub{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.4}
/* grid de KPIs de apoio */
.vg-grid-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.card.vg-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:3px}
.vg-kpi span{font-size:10.5px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
.vg-kpi b{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.vg-kpi small{font-size:11px;color:var(--mute);font-weight:600;margin-top:2px}
@media(max-width:640px){
  .vg-grid-periodo{grid-template-columns:1fr}
  .vg-fatur-val{font-size:27px}
  .vg-pval{font-size:22px}
  .vg-grid-kpis{grid-template-columns:repeat(2,1fr)}
  .vg-kpi b{font-size:17px}
}
@media(max-width:720px){.mg-tbl tbody td.r{text-align:left;}}


/* ===== KANBAN DE PREÇOS (nova aba Preço-(padrão)) ===== */
.pk-title{display:flex;align-items:center;gap:10px;padding:4px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.kb-col{background:var(--surface-soft);border-radius:14px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;max-height:calc(100vh - 220px)}
.kb-col-head{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#fff;font-weight:700;font-size:13px}
.kb-col-ic{font-size:15px}
.kb-col-t{flex:1}
.kb-col-n{background:rgba(255,255,255,.25);border-radius:var(--r-pill);padding:1px 8px;font-size:11px;font-weight:700}
.kb-col-body{overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:9px;flex:1}
.kb-empty{color:var(--mute);font-size:12px;text-align:center;padding:14px}
.kb-card{background:var(--surface);border-radius:12px;padding:10px 11px;box-shadow:var(--shadow-card);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.kb-card-top{display:flex;gap:6px;align-items:flex-start}
.kb-desc{font-size:12.5px;line-height:1.3;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-pc{display:flex;align-items:center;gap:6px;background:var(--surface-soft);border-radius:8px;padding:6px 8px}
.kb-mod{text-align:left}
.kb-mod b{font-size:14px}
.kb-mod small,.kb-conc small{display:block;font-size:10px;color:var(--mid);font-weight:600}
.kb-arrow{color:var(--mute);font-size:13px}
.kb-conc{text-align:right}
.kb-conc b{font-size:13px;color:var(--red)}
.kb-kb-conc b{font-size:13px}
.kb-conc-n{font-size:10.5px;color:var(--mid);text-align:right;line-height:1.2}
.kb-hist{font-size:10.5px;color:var(--mid);background:var(--surface-soft);border-radius:6px;padding:3px 7px;text-align:center}
.kb-extra{display:flex;gap:5px;flex-wrap:wrap}
.kb-actions{display:flex;gap:6px;margin-top:2px}
.kb-actions .btn-ghost{flex:1;justify-content:center;font-weight:600}
@media(max-width:640px){
  .kb-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
  .kb-col{max-height:420px}
  .kpis{grid-template-columns:repeat(2,1fr)}
}


/* ===== Kanban Preços — filtro grupos multi + linhas do card ===== */
.pk-gchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pk-gchip{display:inline-block;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface-soft);color:var(--mid);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.pk-gchip.on{background:#eef2ff;border-color:var(--link);color:var(--link)}
.pk-gchip:hover{border-color:var(--ink)}
.kb-linhas{display:flex;flex-direction:column;gap:3px;margin-top:2px;padding-top:6px;border-top:1px dashed var(--line)}
.kb-linha{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--ink)}
.kb-linha span{color:var(--mid)}
.kb-linha b{font-variant-numeric:tabular-nums}
.kb-linha.kb-dest b{color:var(--link);font-size:13px}
.kb-linha.kb-neg b{color:var(--red)}
@media(max-width:640px){.pk-gchips{gap:4px}}


/* ===== Kanban Preços — filtros organizados + série diária ===== */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.filterbar .filter-item{display:flex;flex-direction:column;gap:4px}
.filterbar .filter-item.nice1{min-width:200px}
.filterbar .filter-item.nice2{min-width:260px;flex:1}
.filterbar .filter-item.checkbox1{padding-top:20px}
.filterbar .filter-item.btn1{padding-top:14px}
.chk-lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap}
.filter-item.col,.col.lab{width:100%;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--mid)}
.filter-item.col b,.col.lab b{color:var(--ink)}
/* painel de grupos: altura limitada + scroll, chips compactos */
.pk-gbox{display:block;margin-top:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);
  padding:8px 10px;max-height:132px;overflow-y:auto}
.pk-gchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pk-gchip{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;color:var(--mid);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.pk-gchip.on{background:#eef2ff;border-color:var(--link);color:var(--link)}
.pk-gchip:hover{border-color:var(--ink)}
/* série diária no modal de histórico */
.kb-hist-sec{font-size:12.5px}
.kb-hist-sec .tbl{font-size:12px}
.kb-hist-sec .tbl th{position:sticky;top:0;background:var(--surface-soft)}
.kb-serie-arrow{color:var(--mid);font-size:12px}
@media(max-width:640px){
  .filterbar .filter-item.nice2{min-width:100%}
  .pk-gbox{max-height:160px}
}


.kb-soloconc{font-size:10.5px;color:var(--mid);background:#f1f5f9;border:1px dashed var(--line);
  border-radius:6px;padding:3px 7px;line-height:1.3}



/* ===== Kanban Preços — card rediseñado en secciones (27/09/2026) ===== */
.kb-sec{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;background:var(--surface);}
.kb-sec-lab{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--mute);text-transform:uppercase;}
.kb-sec-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;}
.kb-sec-row .kb-sec-line{color:var(--mid);}
.kb-sec-row .kb-dest{color:var(--link);font-size:12.5px;font-weight:700;}
.kb-desc-action{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--surface-soft);border-radius:8px;padding:6px 9px;}
.kb-desc-action span{font-size:11px;color:var(--ink);font-weight:600;}
.kb-desc-action b{color:var(--amber);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
.kb-sec.kb-sec-ctx{background:transparent;border-style:dashed;}
.kb-ident{font-size:10px;color:var(--mid);}

.kb-ean{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.3px;background:var(--surface-soft);
  border-radius:6px;padding:2px 7px;width:fit-content}



/* ===== SAÚDE DO ESTOQUE — design administrativo (sh-*) ===== */
.sh-title h1{margin:0;font-size:22px;letter-spacing:-.3px;font-weight:700}
.sh-title-sub{margin:2px 0 16px;color:var(--mute);font-size:13px}

.sh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:18px}
.sh-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;border-top:3px solid var(--line);display:flex;flex-direction:column;gap:4px}
.sh-kpi.sh-hero{border-top:3px solid var(--ac,#16a34a);background:#fbfcfe}
.sh-lab{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:600}
.sh-val{font-size:26px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1}
.sh-unit{font-size:14px;font-weight:600;color:var(--mute);margin-left:1px}
.sh-sub{font-size:12px;color:var(--mid)}

.sh-card{border-radius:var(--radius);background:#fff;border:1px solid var(--line);padding:14px 16px;margin-bottom:14px}
.sh-card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sh-card-hd h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.2px}
.sh-hint{font-size:11.5px;color:var(--mute)}

.sh-tbl{font-size:12.5px}
.sh-tbl th{font-size:10.5px;letter-spacing:.03em;color:var(--mid);font-weight:600;white-space:nowrap;padding:8px 9px;border-bottom:1px solid var(--line)}
.sh-tbl td{padding:8px 9px;border-bottom:1px solid #eef1f5;vertical-align:middle}
.sh-tbl .r{text-align:right}
.sh-c{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-st{font-weight:600}
.sh-num{color:#334155;font-weight:600}
.sh-cmv{font-weight:700}
.sh-sort{cursor:pointer;user-select:none;white-space:nowrap}
.sh-sort:hover{color:#0b6bcb}
.sh-sort.on{color:#0b6bcb}
.sh-sort.on .sh-aro{color:#0b6bcb}
.sh-aro{font-size:8px;color:var(--mute);margin-left:3px;opacity:.7}

.sh-dim{font-weight:600}
.sh-chev{color:var(--mid);font-size:10px}
.sh-n{color:var(--mute);font-size:10.5px;margin-left:6px;font-weight:400}
.sh-gr{cursor:pointer}
.sh-gr:hover td{background:#f6f8fa}
.sh-exp>td{padding:2px 6px 12px 18px !important;background:#fafbfc}
.sh-empty{color:var(--mute);font-style:italic;padding:8px !important;text-align:left !important}
.sh-foot{margin-top:10px;font-size:11px;color:var(--mute);line-height:1.5}

.sh-tree{overflow-x:auto}
.sh-sub{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.sh-sub th{font-size:10.5px;color:var(--mid);font-weight:600;text-align:right;padding:5px 9px;border-bottom:1px solid var(--line)}
.sh-sub th:first-child{text-align:left;width:32%;min-width:150px}
.sh-sub td{padding:6px 9px;border-bottom:1px solid #eef1f5;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.sh-sub td:first-child{text-align:left;white-space:normal;overflow:visible}
.sh-sub th:nth-child(2){width:9%}
.sh-sub th:nth-child(3){width:8%}
.sh-sub th:nth-child(4){width:6%}
.sh-sub th:nth-child(5){width:7%}
.sh-sub th:nth-child(6){width:11%}
.sh-sub th:nth-child(7){width:10%}
.sh-sub th:nth-child(8){width:10%}
.sh-sub th:nth-child(9){width:7%}
.sh-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;line-height:1.3;color:#1e293b}
.sh-sub .sh-dim{font-weight:600}
.sh-filho:hover td{background:#f6f8fa}
.sh-close{margin-top:10px;background:none;border:1px solid var(--line);color:var(--mid);border-radius:6px;font-size:11px;padding:6px 12px;cursor:pointer}
.sh-close:hover{background:#eef2f7}

@media(max-width:640px){
  .sh-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .sh-val{font-size:21px}
  .sh-exp>td{padding:0 4px 8px 4px !important}
  /* árvore como cards empilhados (sem rolagem lateral) */
  .sh-sub{display:block}
  .sh-sub thead{display:none}
  .sh-sub tbody{display:block}
  .sh-sub tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px}
  .sh-sub td{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;border:none;white-space:normal;overflow:visible;text-align:right}
  .sh-sub td:before{content:attr(data-label);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);flex-shrink:0;margin-right:8px}
  .sh-sub td:first-child{justify-content:flex-start;white-space:normal}
  .sh-sub td:first-child:before{content:attr(data-label)}
  .sh-sub td.sh-dim .sh-nm{-webkit-line-clamp:3}
  .sh-sub td.sh-dim .sh-n{display:none}
  .sh-nm{-webkit-line-clamp:3}
}



/* ===== Import de Folha (aba Acompanhar) — 2026 ===== */
#folha_ov .folha-modal{max-width:1040px;width:1040px}
@media(max-width:1000px){#folha_ov .folha-modal{max-width:96vw;width:96vw}}
.folha-atuais{margin-bottom:12px;border:1px solid var(--line);border-left:4px solid #16a34a;border-radius:10px;padding:10px 14px;background:var(--surface-soft)}
.folha-ajuda{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.folha-ajuda .desc{font-size:12.5px;color:var(--mid)}
.folha-resumo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.folha-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:120px}
.folha-kpi-t{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px}
.folha-kpi-v{font-size:20px;font-weight:700}
.folha-kpi-desta{background:#eef7ec;border-color:#16a34a}
.folha-kpi-desta .folha-kpi-v{color:#16a34a}
.folha-selecao{margin-bottom:12px}
.folha-selec-t{font-size:13.5px;margin-bottom:6px}
.folha-cols{max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.folha-col{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #eee;cursor:pointer}
.folha-col.on{background:#eef7ec}
.folha-col:hover{background:#f6f8fa}
.folha-col input{accent-color:#16a34a;transform:scale(1.05)}
.folha-nome{flex:1;font-size:12.5px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folha-sinal{display:inline-flex;gap:4px}
.folha-sinal .fs{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;line-height:1}
.folha-sinal .fs.on{background:#16a34a;color:#fff;border-color:#16a34a}
.folha-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.folha-prev .folha-prev-t{font-size:13.5px;margin-bottom:6px}
.folha-chip{font-size:10.5px;margin:0 3px}
.folha-chip.low{background:#fdecea;color:#dc2626}
.folha-prev .tbl-wrap{max-height:300px;overflow:auto}
.folha-tbl{font-size:12px}

/* Matriz coluna × função (Importar Folha) — 2026 */
.folha-matrix{font-size:12.5px}
.folha-matrix th.folha-f{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folha-matrix td,.folha-matrix th{text-align:center}
.folha-matrix .folha-nc{text-align:left;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folha-matrix .fs{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;line-height:1}
.folha-matrix .fs.on{background:#16a34a;color:#fff;border-color:#16a34a}
.folha-matrix .fs.neg{background:#fdecea;color:#dc2626;border-color:#dc2626}
.folha-matrix .fs:hover{border-color:#999}
.folha-tbl td.justificar,.folha-prev .folha-tbl{font-size:12px}

/* ---- Banner de atualização suave (nova versão disponível) ---- */
#sw_update_banner{position:fixed;top:12px;right:12px;z-index:9999;display:flex;align-items:center;gap:12px;
  background:#242424;color:#fff;padding:10px 14px;border-radius:var(--radius,10px);box-shadow:0 6px 20px rgba(0,0,0,.25);
  font-size:14px;max-width:min(92vw,360px)}
#sw_update_banner .sw-apply{margin-left:auto;border:none;background:var(--link,#0099ff);color:#fff;font-weight:600;
  padding:6px 12px;border-radius:var(--r-pill,999px);cursor:pointer;white-space:nowrap}
#sw_update_banner .sw-apply:active{transform:scale(.97)}
@media(max-width:640px){#sw_update_banner{left:10px;right:10px;top:10px;max-width:none;justify-content:space-between}}

/* ============ SOLICITAÇÕES (aba solic) ============ */
.sol-fieldset{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sol-field .field{display:flex;align-items:center;gap:6px}
.sol-field .field .f-input{flex:1;min-width:0}
.sol-secao{margin:6px 0;border-bottom:1px solid var(--line);padding-bottom:6px}
.sol-secao h4{margin:0;font-size:15px}
.sol-regra-tag{font-size:11px;color:var(--mute);margin-top:4px}
.sol-radios{display:flex;flex-direction:column;gap:6px;background:var(--surface-soft);padding:10px;border-radius:var(--radius)}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.field-suf{font-size:13px;color:var(--mid)}
.req{color:var(--red);font-weight:600;margin-left:1px}
/* barras */
.ev-bars{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ev-bar{display:flex;flex-direction:column;gap:4px}
.ev-bar-l{display:flex;justify-content:space-between;font-size:13px;margin-bottom:2px}
.ev-bar-l b{font-family:var(--mono);color:var(--ink)}
.ev-bar-track{height:10px;background:var(--surface-soft);border-radius:var(--r-pill);overflow:hidden}
.ev-bar-fill{height:100%;border-radius:var(--r-pill)}
/* respostas do pedido */
.sol-respostas{display:flex;flex-direction:column;gap:8px}
.sol-resp{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px;font-size:13px}
.sol-resp-l{color:var(--mute);flex-shrink:0}
.sol-resp-v{text-align:right;color:var(--ink)}
.sol-link{color:var(--link);text-decoration:none;font-size:13px}
.sol-link:hover{text-decoration:underline}
/* fluxo de aprovação */
.sol-etapas{display:flex;flex-direction:column;gap:8px}
.sol-etapa{border:1px solid var(--line);border-left:3px solid var(--mid);border-radius:var(--radius);padding:9px;background:var(--surface);font-size:13px}
.sol-etapa.atual{border-left-color:var(--link);background:#f0f7ff}
.sol-etapa.ok{border-left-color:var(--green);opacity:.85}
.sol-etapa.rejeitada{border-left-color:var(--red);opacity:.7}
.sol-etapa-nome{display:flex;align-items:center;gap:6px;font-weight:600;flex-wrap:wrap}
.sol-etapa-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700}
.sol-etapa-modo{font-weight:400;font-size:11px;color:var(--mute);background:var(--surface-soft);padding:1px 7px;border-radius:var(--r-pill)}
.sol-etapa-aprov{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.sol-etapa-status{font-size:12px;font-weight:600;margin-top:6px}
.sol-etapa-decisoes{display:flex;flex-direction:column;gap:3px;margin-top:6px;font-size:12px}
.sol-dec{color:var(--mid)}
.sol-dec b{color:var(--ink)}
.sol-mini-etapa{font-size:12px;padding:4px 8px;background:var(--surface-soft);border-radius:var(--radius);display:inline-block;margin:2px}
/* timeline */
.sol-timeline{display:flex;flex-direction:column;margin-top:8px}
.sol-tl-item{display:flex;gap:10px;padding:6px 0}
.sol-tl-ic{flex-shrink:0;width:26px;text-align:center}
.sol-tl-body{flex:1}
.sol-tl-txt{font-size:13px;color:var(--ink)}
.sol-tl-parecer{font-style:italic;color:var(--mid)}
.sol-tl-meta{font-size:11px;color:var(--mute)}
.sol-comeia{display:flex;gap:8px}
.sol-comment{flex:1}
.sol-aprov-box{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
/* listagem forms/fluxos */
.sol-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.sol-item{border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--surface)}
.sol-item-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sol-item-acts{display:flex;gap:4px}
.sol-item-sub{font-size:12px;color:var(--mute);margin-top:4px}
/* modal */
.sol-overlay .cdp-modal{width:min(720px,94vw);max-height:86vh;display:flex;flex-direction:column}
.sol-modal-hd{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.sol-modal-hd h3{margin:0}
.sol-modal-body{flex:1;overflow-y:auto;padding:16px}
.sol-modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px;border-top:1px solid var(--line)}
/* editor de campo/etapa */
.sol-campo-edit,.sol-etapa-edit{border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin-bottom:10px;background:var(--surface)}
.sol-ce-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sol-ce-grip{color:var(--mute);cursor:grab}
.sol-ce-ic{font-size:14px}
.sol-ce-rotulo{font-weight:600;flex:1;font-size:13px}
.sol-ce-acts{display:flex;gap:4px}
.sol-ce-form{margin-top:8px}
.sol-ce-cond-box{background:var(--surface-soft);border-radius:var(--radius);padding:10px;margin-top:8px}
.sol-toolbar-gap{width:100%}
@media(max-width:640px){
  .sol-etapas{min-width:0}
  .sol-item-hd{flex-direction:column;align-items:flex-start}
}

/* ===== PROJEÇÃO DE VENDEDORES (aba Metas "4 · Projeção") ===== */
.pv-table{table-layout:auto;width:100%}
.pv-table th:nth-child(1),.pv-table td:nth-child(1){}
.pv-table th:nth-child(2),.pv-table td:nth-child(2){width:11%}
.pv-table th:nth-child(3),.pv-table td:nth-child(3){width:8%}
.pv-table th:nth-child(4),.pv-table td:nth-child(4){width:10%}
.pv-table th:nth-child(5),.pv-table td:nth-child(5){width:10%}
.pv-table th:nth-child(6),.pv-table td:nth-child(6){width:10%}
.pv-table th:nth-child(7),.pv-table td:nth-child(7){width:9%}
.pv-table th:nth-child(8),.pv-table td:nth-child(8){width:9%}
.pv-table th:nth-child(9),.pv-table td:nth-child(9){width:9%}
.pv-table th:nth-child(10),.pv-table td:nth-child(10){width:9%}
.pv-table td.pv-cell{white-space:normal;font-family:var(--mono);font-size:11.5px}
.pv-table td.pv-ceill{white-space:normal}
.pv-th{cursor:pointer}
.pv-arrow{color:var(--brand)}
.pv-val{font-weight:700;font-size:12.5px}
.pv-sup{font-size:11px;color:var(--mid);font-weight:400;margin-top:2px}
.pv-loja{font-size:11px;color:var(--mid)}
.pv-selo{display:inline-flex;align-items:center;gap:2px;font-family:var(--font);font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;margin-top:4px;white-space:nowrap}
.pv-selo.up{background:#e7f6ec;color:#15803d}
.pv-selo.dn{background:#fdecea;color:#b91c1c}
.pv-selo.nt{background:var(--surface-soft);color:var(--mid)}
.pv-cm{font-family:var(--font);font-size:10.5px;font-weight:700;margin-top:2px}
.pv-meta{pointer-events:none}
.pv-nometa{font-size:10.5px;color:var(--mute);font-style:italic}
.pv-sub{font-size:10.5px;color:var(--mid);margin-top:2px;display:flex;gap:4px;flex-wrap:wrap}
.pv-falta{font-size:10px;color:#b45309;margin-top:2px}
.pv-falta.ok{color:var(--green)}
.pv-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.pv-eg{color:#15803d}.pv-ed{color:#b91c1c}
@media(max-width:720px){
  .pv-table{min-width:0;table-layout:auto}
  .pv-table thead{display:none}
  .pv-table tbody{display:block}
  .pv-table tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .pv-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:8px 0;border:0;border-bottom:1px dashed var(--line);text-align:left;font-family:var(--font)}
  .pv-table tbody td:last-of-type{border-bottom:0}
  .pv-table tbody td:before{content:attr(data-label);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);flex-shrink:0;margin-right:8px}
  .pv-table tbody td.r{text-align:left}
  .pv-table tbody td:first-child{font-size:14px}
  .pv-table tbody td .pv-selo,.pv-table tbody td .pv-cm{justify-content:flex-end}
}

/* ===== PROJEÇÃO DAS METAS — cards por colaborador + modal detalhe ===== */
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pv-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05);cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:transform .12s,box-shadow .12s;min-width:0}
.pv-card:hover{box-shadow:0 5px 16px rgba(0,0,0,.09);transform:translateY(-1px);border-color:#ddd}
.pv-card-nome{font-size:14px;font-weight:700;line-height:1.2}
.pv-card-loja{font-size:12px;color:var(--mid);margin-top:2px}
.pv-card-mtrs{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px dashed var(--line);padding-top:10px;margin-top:2px}
.pv-e{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface-soft)}
.pv-e.alerta{border-color:#fecaca;background:#fff7f5}
.pv-e-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pv-e-pct{font-size:11px;font-weight:700;color:var(--brand)}
.pv-e-lab{font-size:9.5px;font-weight:700;color:var(--mute);letter-spacing:.5px;margin-top:4px}
.pv-e-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:2px}
.pv-e-row span{color:var(--mid)}.pv-e-row b{font-size:12.5px}
.pv-e-empty{font-size:12px;color:var(--mute);font-style:italic}

.pv-e-proj .pv-e-lab{font-size:8.5px;letter-spacing:.5px;margin-top:0;color:var(--mute);font-weight:700}
.pv-e-proj .pv-e-val{font-size:14.5px;margin-top:1px;white-space:nowrap}
.pv-e-cols{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);margin-top:6px;padding-top:5px}
.pv-e-cols .pv-e-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:0;gap:6px}
.pv-e-cols .pv-e-row b{font-size:12px;white-space:nowrap}
.pv-e-cols .pv-e-row span{font-size:9.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.3px}
.pv-e-nome{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mid)}

.pv-e-val{font-size:15px;font-weight:700;display:block;margin-top:2px}
.pv-e-sub{font-size:11.5px;color:var(--mid);margin-top:2px;display:block}
.pv-e-selo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.pv-card-cta{font-size:11px;color:var(--link);font-weight:600;border-top:1px dashed var(--line);padding-top:8px}
.pv-mbar{height:6px;background:#eef0f2;border-radius:999px;overflow:hidden;margin-top:5px}
.pv-mbar div{height:100%;border-radius:999px;transition:width .4s}
/* modal */
.pv-overlay{z-index:200}
.pvd-modal{max-width:760px;width:100%;display:flex;flex-direction:column}
.pvd-body{flex:1;overflow:auto;max-height:72vh}
.pvd-abas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pvd-aba{flex:1;min-width:120px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:600;font-size:13px;cursor:pointer}
.pvd-aba.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:10px}
.pv-kpi{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}
.pv-kpi span{font-size:10.5px;color:var(--mid);text-transform:uppercase;letter-spacing:.3px}
.pv-kpi b{font-size:15px;margin-top:2px}
.pv-kpi-falta{font-size:13px;color:#b45309;font-weight:600;margin-bottom:12px}
.pvd-sec{margin-top:6px}
.pvd-sec h4{font-size:13px;margin:10px 0 8px}
.pv-series{display:flex;gap:2px;align-items:flex-end;height:130px;overflow-x:auto;padding:4px 0}
.pv-dia{display:flex;flex-direction:column;align-items:center;flex:1;min-width:12px;cursor:pointer}
.pv-dia-bars{display:flex;align-items:flex-end;gap:1px;height:100%;width:100%}
.pv-dia-p,.pv-dia-r{flex:1;min-height:1px;border-radius:2px 2px 0 0}
.pv-dia-p{background:#93c5fd;opacity:.9}
.pv-dia-r{background:#16a34a}
.pv-dia-lbl{font-size:8px;color:var(--mute);margin-top:2px;white-space:nowrap}
.pv-legenda{display:flex;gap:14px;font-size:10.5px;color:var(--mid);margin:6px 0;flex-wrap:wrap}
.pv-lp,.pv-lr{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:3px;vertical-align:-2px}
.pv-lp{background:#93c5fd}.pv-lr{background:#16a34a}
@media(max-width:1080px) and (min-width:721px){
  .pv-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .pv-cards{grid-template-columns:1fr}
  .pv-card-mtrs{grid-template-columns:1fr}
  .pv-kpis{grid-template-columns:1fr 1fr}
}

/* ============================================================
   SOLICITAÇÕES — PAINEL EXECUTIVO (gráficos profissionais)
   Antes não havia nenhum CSS .slx-*; o painel renderizava cru.
   ============================================================ */
/* KPIs */
.slx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:14px 0}
.slx-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04);border-top:3px solid var(--acc);display:flex;flex-direction:column;gap:2px;min-width:0}
.slx-kpi.big{background:linear-gradient(135deg,#242424,#333);border-top-color:#7c3aed;color:#fff}
.slx-kpi.big .slx-kpi-lbl,.slx-kpi.big .slx-kpi-sub{color:rgba(255,255,255,.7)}
.slx-kpi-top{display:flex;align-items:center;gap:10px}
.slx-kpi-ic{font-size:20px;width:32px;height:32px;border-radius:9px;background:var(--surface-soft);display:flex;align-items:center;justify-content:center}
.slx-kpi-val{font-size:24px;font-weight:700}
.slx-kpi-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mid);margin-top:4px}
.slx-kpi-sub{font-size:11.5px;color:var(--mid)}

/* Hero + gauge */
/* fim do bloco 1 */
.slx-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.slx-chart-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.slx-chart .card{border-radius:14px}

/* Funil */
.slx-funil{display:flex;align-items:stretch;gap:8px;margin:14px 0;flex-wrap:wrap}
.slx-funil-item{flex:1;min-width:140px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.slx-funil-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--f);opacity:.12;transition:width .5s}
.slx-funil-item span{display:block;font-size:11px;color:var(--mid);font-weight:600;position:relative}
.slx-funil-item b{font-size:22px;position:relative}
.slx-funil-arrow{align-self:center;font-size:18px;color:var(--mute);flex-shrink:0}

/* Donut */
.slx-donut-col{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.slx-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:180px}
.slx-donut{width:150px;height:150px}
.slx-donut-svg{width:100%;height:100%}
.slx-donut-val{font-size:20px;font-weight:800;fill:#242424}
.slx-donut-txt{font-size:9px;fill:var(--muted);letter-spacing:.5px}
.slx-donut-legend{display:flex;flex-direction:column;gap:4px;font-size:12px}
.slx-dl{display:flex;align-items:center;gap:6px}
.slx-dl i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.slx-dl small{color:var(--mid)}

/* Prazos */
.slx-prazos{flex:1;min-width:180px;background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:12px}
.slx-prazos-tit{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mid);margin-bottom:8px}
.slx-prazos-row{display:flex;gap:10px}
.slx-prazo{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.slx-prazo span{font-size:11px;color:var(--mid);display:block}
.slx-prazo b{font-size:17px}
.slx-prazo.ok b{color:var(--green)}.slx-prazo.no b{color:var(--red)}

/* Área temporal */
.slx-area{width:100%;height:auto;max-height:240px}
.slx-area-lbl{font-size:9px;fill:var(--mute)}
.slx-legenda{display:flex;gap:14px;font-size:10.5px;color:var(--mid);margin-top:6px;flex-wrap:wrap}
.slx-legenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-2px}

/* Barras */
.slx-bars{display:flex;flex-direction:column;gap:10px}
.slx-bar-l{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.slx-bar-name{font-weight:600}
.slx-bar-v{color:var(--mid)}
.slx-bar-pct{color:var(--mute)}
.slx-bar-track{height:9px;background:#eef0f2;border-radius:999px;overflow:hidden;position:relative;margin-top:3px}
.slx-bar-fill{height:100%;border-radius:999px;transition:width .5s}
.slx-bar-grid{position:absolute;left:0;top:0;bottom:0;border-radius:999px}

/* Responsivo */
@media(max-width:640px){
.slx-kpis{grid-template-columns:1fr 1fr}
  .slx-grid2{grid-template-columns:1fr}
  .slx-funil{flex-direction:column}
  .slx-funil-arrow{transform:rotate(90deg);align-self:center}
}

/* ===== PROJEÇÃO DAS METAS — TABELA EXECUTIVA (desktop) ===== */
.pv-dwrap.sx-wrap{border-radius:14px;width:100%;max-width:100%}
div.pv-dwrap.sx-wrap table.sx-table.pv-table{width:100%;table-layout:auto}
/* colunas se ajustam ao conteúdo; a tabela usa toda a largura do container no desktop */
/* desktop: tabela pega a ALTURA restante da tela (scroll vertical interno) e estoura
   o container p/ usar quase TODA a largura do monitor (full-bleed), sem apertar colunas */
@media(min-width:900px){
  /* tabela DENTRO dos limites do app (width:100%), sem full-bleed — evita overflow lateral */
  .pv-dwrap.sx-wrap{width:100%;max-width:100%;box-sizing:border-box}
  .pv-dwrap.sx-wrap{max-height:calc(100vh - 195px);overflow:auto}
  .pv-dwrap.sx-wrap .sx-table thead th{position:sticky;top:0;z-index:2}
}
.pv-table.sx-table th:first-child,.pv-table.sx-table td:first-child{white-space:nowrap}
.pv-table.sx-table th[data-lbl="acao"],.pv-table.sx-table td.pv-tact{width:44px;text-align:center}
.pv-table.sx-table td.pv-tritmo{width:70px;text-align:center;white-space:nowrap}
/* colunas de meta: dividem o espaço restante (sem largura fixa) — cada uma folgada */
.pv-table.sx-table .pv-thmeta,.pv-table.sx-table td.pv-tmeta{width:auto}
.pv-table.sx-table .pv-trows .pv-tcel b,.pv-table.sx-table .pv-tproj b{white-space:nowrap}
.pv-table.sx-table th[data-lbl="acao"],.pv-table.sx-table td.pv-tact{width:46px;text-align:center}
.pv-table.sx-table td.pv-tritmo{width:70px;text-align:center;white-space:nowrap}
.pv-thmeta{text-align:left!important}
.pv-thmeta .pv-thsub{display:block;font-size:8.5px;font-weight:600;color:var(--mute);letter-spacing:.2px;text-transform:none;white-space:normal}
.pv-trow{cursor:pointer}
.pv-tnome{font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-tloja{font-size:11px;color:var(--mid);margin-top:2px}
.pv-tmeta{padding:12px 16px!important;width:auto;white-space:nowrap}
.pv-thead{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mid)}
.pv-thead .pv-mbar{flex:1;height:5px;margin:0}
.pv-tproj b{font-size:16px;font-weight:800;display:block;margin-top:3px;white-space:nowrap}
.pv-tproj::before{content:"Projeção";display:block;font-size:8.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.pv-trows{display:flex;gap:18px;margin-top:5px}
.pv-tcel{display:flex;flex-direction:column;gap:1px}
.pv-tcel span{font-size:8.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.3px;font-weight:700}
.pv-tcel b{font-size:12.5px;font-weight:700}
.pv-tcel b.pv-low{color:var(--red)}
.pv-tselo{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.pv-tritmo .pv-selo{margin-top:0}

/* ---- Responsivo: vira CARDS por colaborador (data-label) no mobile ---- */
@media(max-width:820px){
  .pv-dwrap.sx-wrap{border:0;background:transparent;border-radius:0;overflow:visible}
  .pv-table.sx-table{min-width:0;table-layout:auto;display:block}
  .pv-table.sx-table thead{display:none}
  .pv-table.sx-table tbody{display:block}
  .pv-table.sx-table tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .pv-table.sx-table tbody td{display:block;border-bottom:1px dashed var(--line);padding:8px 0;width:100%!important;min-width:0}
  .pv-table.sx-table tbody td:first-child{border-bottom:1px solid var(--line);padding-top:0}
  .pv-table.sx-table tbody td:last-child{border-bottom:0}
  .pv-table.sx-table td.pv-tmeta{margin-top:6px}
  .pv-table.sx-table td.pv-tritmo,.pv-table.sx-table td.pv-tact{text-align:left;border-bottom:0;padding:4px 0 0}
  .pv-table.sx-table td.pv-tact{display:none}
  .pv-tmeta,.pv-thmeta{border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);padding:8px 10px!important;margin-top:6px}
  .pv-tritmo .pv-selo{margin:2px 0 0}
}

/* ===== PROJEÇÃO — HERO COMPACTO (topo enxuto, tabela usa a tela toda) ===== */

/* ===== MODAL PROJEÇÃO — GRÁFICOS executivos (Evolução + Ritmo diário) ===== */
.pv-grafico-ctn{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px}
.pv-gv{width:100%;height:auto;max-height:250px}
.pv-gv-dia{font-size:8.5px;fill:var(--mute)}
.pv-gv-meta{font-size:10px;fill:#dc2626;font-weight:700}
/* ritmo diário (barras) */
.pv-rit-bars{display:flex;align-items:flex-end;gap:3px;height:150px;overflow-x:auto;padding:6px 2px 0}
.pv-rit-bar{display:flex;flex-direction:column;align-items:center;flex:1;min-width:18px;height:100%;cursor:pointer}
.pv-rit-bar:hover .pv-rit-fill{outline:2px solid #0f172a;outline-offset:-1px;filter:brightness(1.15)}
.pv-rit-bar:hover .pv-rit-lbl{color:var(--ink);font-weight:700}
.pv-rit-bar.done:hover{opacity:.9}
.pv-rit-vert{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}
.pv-rit-fill{width:100%;background:linear-gradient(180deg,#f59e0b,#d97706);border-radius:4px 4px 0 0;min-height:4px}
.pv-rit-fill.crit{background:linear-gradient(180deg,#ef4444,#dc2626)}
.pv-rit-fill.okmeta{background:linear-gradient(180deg,#6ee7b7,#34d399)}
.pv-rit-fill.fut{background:linear-gradient(180deg,#e2e8f0,#cbd5e1)}
.pv-rit-bar.metaok{opacity:1}
.pv-rit-bar.fut{opacity:1}
.pv-rit-bar.semvenda{opacity:1}
.pv-rit-bar.done{opacity:.35}
.pv-rit-lbl{font-size:8.5px;color:var(--mute);margin-top:2px;white-space:nowrap}
.pv-rit-val{font-size:8px;color:var(--mid);white-space:nowrap}
.pv-legenda{display:flex;gap:14px;font-size:10.5px;color:var(--mid);margin:6px 0 0;flex-wrap:wrap}
.pv-legenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-2px}
.pvd-sec h4{font-size:13.5px;margin:14px 0 4px}
/* ===== MODAL PROJEÇÃO — Barra de progresso executiva + veredito ===== */
.pv-progcard{background:var(--surface-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0 4px}
.pv-prog-hd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;flex-wrap:wrap;gap:6px}
.pv-prog-pct{font-size:16px;font-weight:800;color:var(--ink)}
.pv-prog-track{position:relative;height:16px;background:#eef0f2;border-radius:999px;margin:8px 0 6px;overflow:visible}
.pv-prog-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width .5s}
.pv-prog-marker{position:absolute;top:-3px;transform:translateX(-50%);height:22px;border-left:3px solid #0ea5e9}
.pv-prog-marker span{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:9px;color:#0369a1;white-space:nowrap;font-weight:700}
.pv-prog-line{position:absolute;top:-4px;bottom:-4px;border-left:2px dashed #dc2626}
.pv-prog-ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--mid);margin-top:16px}
.pv-prog-falta{color:#b45309;font-weight:700}
.pv-prog-ok{color:var(--green);font-weight:700}
.pv-gv-hoje{font-size:10px;fill:#334155;font-weight:700}
.pv-veredito{margin-top:8px;padding:9px 12px;border-radius:10px;font-weight:700;font-size:13px;text-align:center}
.pv-veredito.ok{background:#e7f6ec;color:#15803d}
.pv-veredito.bad{background:#fef3e9;color:#b45309}
@keyframes pvgPulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ===== Tooltip flutuante dos gráficos de evolução ===== */
.pv-tooltip{position:fixed;z-index:9999;background:#1f2937;color:#fff;border-radius:10px;padding:10px 12px;pointer-events:none;min-width:190px;box-shadow:0 6px 20px rgba(0,0,0,.35);display:none;font-size:12px}
.pv-tip-dia{font-weight:800;font-size:12.5px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;color:#93c5fd}
.pv-tooltip > div{display:flex;justify-content:space-between;gap:14px;line-height:1.7;border-bottom:1px solid rgba(255,255,255,.08)}
.pv-tooltip > div:last-child{border-bottom:0}
.pv-tooltip span{color:rgba(255,255,255,.65)}
.pv-tooltip b{font-family:var(--mono)}
.pv-coldia{cursor:pointer}
.pv-coldia:hover rect{stroke:#0f172a;stroke-width:1}
.pv-gv-yv{font-size:8.5px;fill:var(--mute)}
.pv-leg-hint{color:var(--mute);font-style:italic}
.pv-rit-verdict{border-radius:10px;padding:12px 14px;margin-bottom:10px;border:1px solid}
.pv-rit-verdict.ok{background:#ecfdf5;border-color:#a7f3d0}
.pv-rit-verdict.bad{background:#fff7ed;border-color:#fed7aa}
.pv-rv-status{font-size:13.5px;font-weight:700;margin-bottom:10px}
.pv-rit-verdict.ok .pv-rv-status{color:#065f46}
.pv-rit-verdict.bad .pv-rv-status{color:#9a3412}
.pv-rv-grid{display:flex;gap:10px;flex-wrap:wrap}
.pv-rv-cell{flex:1;min-width:120px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.pv-rv-cell span{display:block;font-size:10px;color:var(--mid);text-transform:uppercase;letter-spacing:.3px}
.pv-rv-cell b{display:block;font-size:15px;margin-top:2px;font-family:var(--mono);color:var(--ink)}
.pv-lh{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;margin-bottom:8px}
.pv-lh.ok{background:#d1fae5;color:#065f46}
.pv-lh.bad{background:#ffedd5;color:#9a3412}
.pv-rit-verdict b{font-family:var(--mono)}