/* =====================================================================
   CRIS VARIEDADES — SISTEMA DE GESTÃO · Identidade: branco, azul e preto
   ===================================================================== */
:root {
  --blue: #1746C8; --blue-700: #0F3399; --blue-600: #133DB2; --blue-100: #D8E3FF; --blue-50: #EEF3FF;
  --ink: #0B0F19; --text: #252B37; --muted: #667085; --faint: #98A2B3;
  --line: #E3E8EF; --line-2: #EEF1F6; --soft: #F8FAFC; --app: #F4F6FA; --bg: #FFFFFF;
  --surface: #FFFFFF; --soft-2: #F2F4F7; --line-strong: #D0D5DD; --topbar-bg: rgba(255, 255, 255, .97); --solid: #0B0F19; --text-2: #344054; --col-bg: #EDF0F5; color-scheme: light;
  --ok: #067647; --ok-bg: #E9F8EF; --warn: #93370D; --warn-bg: #FFF6E5; --danger: #B42318; --danger-bg: #FEECEB;
  --radius: 14px; --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --side: 256px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--app); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.num, table.t td.num, table.t th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Estrutura ---------- */
#app { display: flex; min-height: 100vh; }
.sidebar { width: var(--side); flex: none; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid var(--line-2); }
.brand-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; }
.brand-name { font-weight: 800; color: var(--ink); font-size: 15.5px; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--muted); }
.nav { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); padding: 16px 10px 6px; font-weight: 700; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.nav a svg.i { color: #667085; }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a.active { background: var(--blue); color: #fff; }
.nav a.active svg.i { color: #fff; }
.nav a .count { margin-left: auto; background: var(--blue); color: #fff; font-size: 11px; border-radius: 99px; padding: 1px 8px; font-weight: 700; }
.nav a.active .count { background: var(--surface); color: var(--blue); }
.side-foot { margin: 12px; padding: 14px; border-radius: 12px; background: var(--solid); font-size: 11.5px; color: #A9B1C2; }
.side-foot-strong { color: #fff; font-weight: 750; font-size: 13px; margin: 2px 0 6px; }
.side-foot strong { color: #fff; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 18px 32px; position: sticky; top: 0; background: var(--topbar-bg); backdrop-filter: blur(8px); z-index: 20; border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 21px; font-weight: 800; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.topbar-title { flex: 1; min-width: 0; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.view { padding: 24px 32px 64px; width: 100%; max-width: 1520px; margin: 0 auto; }
.scrim { display: none; }
.only-mobile { display: none !important; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; box-shadow: var(--shadow); }
.btn:hover { background: var(--soft); }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible { outline: 3px solid var(--blue-100); outline-offset: 1px; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-600); }
.btn.dark { background: var(--solid); border-color: var(--solid); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); border-color: #FDA29B; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--soft); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn.danger:hover { color: var(--danger); background: var(--danger-bg); }

/* ---------- Cartões ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.card-h h3 { font-size: 15px; font-weight: 750; flex: 1; display: flex; align-items: center; gap: 8px; }
.card-b { padding: 18px 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); background: var(--soft); border-radius: 0 0 var(--radius) var(--radius); }
.list-card { overflow: hidden; }
.list-card > .toolbar { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 16px; }
.grid > .card + .card, .grid > .kpi + .kpi { margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 700; color: var(--ink); }
.blue { color: var(--blue); }
.hr { height: 1px; background: var(--line-2); margin: 16px 0; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .spanall { grid-column: 1 / -1; }

/* ---------- Indicadores ---------- */
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); min-width: 0; box-shadow: var(--shadow); }
.kpi .k-label { font-size: 12.5px; color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 9px; }
.k-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--blue-50); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.k-ico svg.i { width: 15px; height: 15px; }
.kpi .k-value { font-size: 26px; font-weight: 800; color: var(--ink); margin-top: 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .k-foot { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kpi.accent { background: var(--blue); border-color: var(--blue); }
.kpi.accent .k-label, .kpi.accent .k-foot { color: #D6E1FF; }
.kpi.accent .k-value { color: #fff; }
.kpi.accent .k-ico { background: rgba(255, 255, 255, .16); color: #fff; }
.kpi.click { cursor: pointer; transition: border-color .12s, transform .12s; }
.kpi.click:hover { border-color: #B2C5FF; }
.k-danger .k-value { color: var(--danger); } .k-danger .k-ico { background: var(--danger-bg); color: var(--danger); }
.k-warn .k-value { color: #B54708; } .k-warn .k-ico { background: var(--warn-bg); color: #B54708; }
.sec-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 750; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-title:first-child { margin-top: 0; }

/* ---------- Selos e status ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--line-2); color: var(--text); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.blue { background: var(--blue-50); color: var(--blue); }
.badge.dark { background: var(--solid); color: #fff; }
.badge.muted { background: var(--line-2); color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.pill i, .st-chip i { width: 7px; height: 7px; border-radius: 99px; background: currentColor; display: inline-block; flex: none; }
.st-draft { --t: #344054; --b: #F2F4F7; --d: #98A2B3; --l: #E4E7EC; }
.st-wait { --t: #93370D; --b: #FFF6E5; --d: #F79009; --l: #FEDF89; }
.st-paid { --t: #1746C8; --b: #EEF4FF; --d: #2E62F0; --l: #C7D7FE; }
.st-sent { --t: #5925DC; --b: #F4F0FF; --d: #7A5AF8; --l: #D9D6FE; }
.st-pick { --t: #0E7090; --b: #E8F7FA; --d: #06AED4; --l: #A5F0FC; }
.st-recv { --t: #067647; --b: #E9F8EF; --d: #17B26A; --l: #ABEFC6; }
.st-done { --t: #FFFFFF; --b: #067647; --d: #ABEFC6; --l: #067647; }
.st-cancel { --t: #B42318; --b: #FEECEB; --d: #F04438; --l: #FECDCA; }
.pill[class*="st-"] { color: var(--t); background: var(--b); border-color: var(--l); }
.pill[class*="st-"] i { background: var(--d); }
select.status-sel { font-weight: 650; color: var(--t); background-color: var(--b); border-color: var(--l); min-width: 186px; padding-left: 12px; cursor: pointer; }
select.status-sel:focus { box-shadow: 0 0 0 3px var(--l); border-color: var(--d); }
select.status-sel option { color: var(--ink); background: var(--surface); }
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.st-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.st-chip i { background: var(--d, var(--faint)); }
.st-chip b { font-size: 12px; color: var(--muted); background: var(--line-2); border-radius: 99px; padding: 0 7px; min-width: 22px; text-align: center; }
.st-chip:hover { border-color: var(--l, #C9D2E3); }
.st-chip.on { background: var(--solid); color: #fff; border-color: var(--ink); }
.st-chip.on b { background: rgba(255, 255, 255, .18); color: #fff; }
.st-chip[class*="st-"].on { background: var(--b); color: var(--t); border-color: var(--d); box-shadow: 0 0 0 2px var(--l); }
.st-chip[class*="st-"].on b { background: rgba(255, 255, 255, .6); color: var(--t); }
.st-chip.st-done.on b { background: rgba(255, 255, 255, .2); }

/* categorias financeiras */
.c-oc { --t: #1746C8; --b: #EEF4FF; --d: #2E62F0; --l: #C7D7FE; }
.c-frete { --t: #5925DC; --b: #F4F0FF; --d: #7A5AF8; --l: #D9D6FE; }
.c-serv { --t: #0E7090; --b: #E8F7FA; --d: #06AED4; --l: #A5F0FC; }
.c-extra { --t: #93370D; --b: #FFF6E5; --d: #F79009; --l: #FEDF89; }
.c-sup { --t: #067647; --b: #E9F8EF; --d: #17B26A; --l: #ABEFC6; }
.c-out { --t: #344054; --b: #F2F4F7; --d: #98A2B3; --l: #E4E7EC; }
.pill[class*="c-"] { color: var(--t); background: var(--b); border-color: var(--l); }
.pill[class*="c-"] i { background: var(--d); }
.bar[class*="c-"] > span { background: var(--d); }
.cat-row { padding: 9px 0; cursor: pointer; }
.cat-row + .cat-row { border-top: 1px solid var(--line-2); }
.cat-row:hover .pill { box-shadow: 0 0 0 2px var(--l); }
.cat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.chip.cat-chip.on { background: var(--b); color: var(--t); border-color: var(--d); box-shadow: 0 0 0 2px var(--l); }
.auto-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 5px; padding: 1px 5px; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 11px; background: var(--blue-50); color: #17327F; font-size: 13.5px; border: 1px solid var(--blue-100); }
.alert.warn { background: var(--warn-bg); color: #7A2E0E; border-color: #FEDF89; }
.alert.danger { background: var(--danger-bg); color: #912018; border-color: #FECDCA; }
.alert.ok { background: var(--ok-bg); color: #05603A; border-color: #ABEFC6; }
.alert + .alert { margin-top: 8px; }
.alert svg.i { margin-top: 2px; }
#banner .alert { margin: 16px auto 0; max-width: calc(1520px - 64px); width: calc(100% - 64px); }

/* ---------- Tabelas ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--soft); }
table.t td { padding: 12px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t th:first-child, table.t td:first-child { padding-left: 20px; }
table.t th:last-child, table.t td:last-child { padding-right: 20px; }
table.t th.chk, table.t td.chk { width: 44px; padding-right: 4px; }
table.t tbody tr { transition: background .08s; }
table.t tbody tr:hover td { background: var(--soft); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tr.sel td { background: var(--blue-50) !important; }
table.t td.desc { min-width: 240px; }
table.t td.actions { white-space: nowrap; text-align: right; width: 1%; }
table.t tfoot td { font-weight: 750; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 0; background: var(--soft); }
table.t.compact td, table.t.compact th { padding: 8px 10px; }
table.t.compact th:first-child, table.t.compact td:first-child { padding-left: 16px; }
table.t.compact th:last-child, table.t.compact td:last-child { padding-right: 16px; }
.card-b > table.t th:first-child, .card-b > table.t td:first-child { padding-left: 0; }
.card-b > table.t th:last-child, .card-b > table.t td:last-child { padding-right: 0; }
.card-b > table.t th { background: transparent; }
.t-prod { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.t-prod .nm { font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: var(--soft); flex: none; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--faint); }
.thumb.lg { width: 92px; height: 92px; border-radius: 12px; }
.sku { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; color: var(--ink); word-break: break-all; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h3 { font-size: 16px; margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }
.bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; min-width: 80px; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; vertical-align: middle; }

/* ---------- Formulários ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 220px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font-size: 12px; font-weight: 650; color: var(--text-2); }
.field .hint { font-size: 11.5px; color: var(--muted); }
.req::after { content: " *"; color: var(--danger); }
.in, select.in, textarea.in { height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 11px; background: var(--surface); width: 100%; outline: none; transition: border-color .12s, box-shadow .12s; min-width: 0; box-shadow: var(--shadow); }
textarea.in { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
.in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.in.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.in.sm { height: 32px; font-size: 13px; padding: 0 9px; }
.in[readonly] { background: var(--soft); color: var(--muted); }
.in.right { text-align: right; }
.search { position: relative; }
.search svg.i { position: absolute; left: 12px; top: 11px; color: var(--faint); }
.search .in { padding-left: 36px; }
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid .s2 { grid-column: span 2; } .form-grid .s3 { grid-column: span 3; } .form-grid .s4 { grid-column: 1 / -1; }
.adorn { position: relative; }
.adorn .in { padding-right: 34px; }
.adorn .in.pre { padding-left: 34px; padding-right: 11px; }
.adorn span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: var(--faint); font-size: 12.5px; pointer-events: none; }
.adorn span.r { right: 11px; } .adorn span.l { left: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 99px; height: 34px; padding: 0 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip:hover { background: var(--soft); }
.chip.on { background: var(--solid); color: #fff; border-color: var(--ink); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tab { padding: 11px 15px; border: 0; background: none; font-weight: 650; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.photo-box { display: flex; gap: 14px; align-items: center; }
.drop { border: 1.5px dashed #C9D2E3; border-radius: 14px; padding: 30px; text-align: center; color: var(--muted); cursor: pointer; background: var(--soft); }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.drop strong { color: var(--ink); display: block; font-size: 15px; margin: 6px 0 2px; }

/* ---------- Modal e toasts ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(11, 15, 25, .46); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px; display: flex; flex-direction: column; max-height: 92vh; box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .25); }
.modal.wide { max-width: 980px; } .modal.xwide { max-width: 1200px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.modal-h h2 { font-size: 17px; flex: 1; }
.modal-b { padding: 20px 22px; overflow-y: auto; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line-2); flex-wrap: wrap; background: var(--soft); border-radius: 0 0 16px 16px; }
.modal-f .left { margin-right: auto; display: flex; gap: 8px; }
.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--solid); color: #fff; padding: 12px 16px; border-radius: 11px; font-size: 13.5px; font-weight: 550; max-width: 380px; display: flex; gap: 9px; align-items: center; animation: tin .18s ease-out; box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .35); }
.toast.ok svg { color: #6CE9A6; } .toast.danger { background: var(--danger); } .toast.warn svg { color: #FEC84B; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Calculadora e telas específicas ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.calc-head { display: flex; gap: 14px; align-items: center; }
.result-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.result-hero .kpi .k-value { font-size: 28px; }
.breakdown { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.breakdown td { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.breakdown td:last-child, .breakdown td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown td:nth-child(3) { width: 70px; text-align: right; color: var(--muted); font-size: 12.5px; }
.breakdown tr.total td { font-weight: 800; color: var(--ink); border-bottom: 0; border-top: 1.5px solid var(--ink); }
.listing-row { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); }
.listing-row + .listing-row { margin-top: 12px; }
.lr-res { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; align-items: center; }
.lr-res div span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.lr-res div b { color: var(--ink); font-variant-numeric: tabular-nums; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; z-index: 50; max-height: 320px; overflow-y: auto; box-shadow: 0 12px 24px -8px rgba(16, 24, 40, .18); }
.suggest button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: var(--surface); padding: 8px 10px; cursor: pointer; }
.suggest button:hover, .suggest button.hl { background: var(--blue-50); }
.bulkbar { position: sticky; bottom: 16px; margin-top: 14px; background: var(--solid); color: #fff; border-radius: 14px; padding: 10px 14px 10px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; z-index: 15; box-shadow: 0 16px 32px -12px rgba(11, 15, 25, .45); }
.bulkbar .btn { height: 32px; box-shadow: none; }
.bulkbar .btn:not(.primary) { background: transparent; color: #fff; border-color: #3A4152; }
.bulkbar .btn:not(.primary):hover { background: #1D2433; }
.muted-inv { color: #A9B1C2; font-variant-numeric: tabular-nums; }
.steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.step b { width: 24px; height: 24px; border-radius: 99px; background: var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.step.on { color: var(--ink); } .step.on b { background: var(--blue); color: #fff; }
.step + .step::before { content: ""; width: 28px; height: 1px; background: var(--line); }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.summary-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 9px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--ink); font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--line); position: relative; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 99px; background: var(--blue); }
.timeline li .when { color: var(--muted); font-size: 12px; }
.order-totals { width: 100%; max-width: 380px; margin-left: auto; }
.order-totals div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.order-totals .grand { background: var(--solid); color: #fff; border-radius: 11px; padding: 13px 15px; margin-top: 10px; border: 0; font-weight: 800; font-size: 17px; }
.supplier-card { display: flex; flex-direction: column; gap: 10px; }
.cell-in { width: 92px; }
.cell-in.wide { width: 140px; }
.tag-ok { color: var(--ok); font-weight: 700; }
.nowrap { white-space: nowrap; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.mt { margin-top: 16px; } .mt2 { margin-top: 24px; } .mb { margin-bottom: 16px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(11,15,25,.35); z-index: 25; }
  .only-mobile { display: inline-flex !important; }
  .topbar { padding: 14px 16px 12px; flex-wrap: wrap; }
  .topbar h1 { font-size: 19px; }
  .view { padding: 16px 14px 64px; }
  #banner .alert { width: calc(100% - 28px); }
  .g3, .g2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .s3, .form-grid .s4 { grid-column: 1 / -1; }
  .map-grid { grid-template-columns: 1fr 1fr; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .list-card > .toolbar { padding: 14px; }
}
@media (max-width: 560px) {
  .g5, .g4 { grid-template-columns: 1fr 1fr; }
  .form-grid, .map-grid { grid-template-columns: 1fr; }
  .form-grid .s2 { grid-column: 1 / -1; }
  .result-hero { grid-template-columns: 1fr; }
  .kpi .k-value { font-size: 21px; }
  .kv { grid-template-columns: 1fr; }
}
@media print {
  body { background: var(--surface); }
  .sidebar, .topbar .top-actions, .bulkbar, #banner, .no-print { display: none !important; }
  .view { padding: 0; } .card, .kpi { break-inside: avoid; box-shadow: none; }
}

/* =====================================================================
   v3 — refinamentos visuais, tarefas, calendário, assessoria, busca
   ===================================================================== */
.brand { cursor: pointer; transition: background .12s; }
.brand:hover { background: var(--soft); }
.brand:focus-visible { outline: 3px solid var(--blue-100); outline-offset: -3px; }
.view { animation: vin .18s ease-out; }
@keyframes vin { from { opacity: 0; transform: translateY(4px); } }
.nav a .count.danger { background: var(--danger); }
.in.lg { height: 46px; font-size: 16px; font-weight: 600; }
.of { font-size: 15px; color: var(--faint); font-weight: 650; }
.late { color: var(--danger) !important; font-weight: 650; }
.due { color: #B54708; font-weight: 650; }
.bar.over > span { background: var(--ok); }
.sku { word-break: normal; overflow-wrap: normal; }

/* busca global */
.search-trigger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); background: var(--soft); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; min-width: 210px; font-weight: 550; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--ink); }
.search-trigger span { flex: 1; text-align: left; }
.search-trigger kbd { font: 600 11px var(--font); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--muted); }
.qs-res { margin-top: 14px; max-height: 60vh; overflow-y: auto; }
.qs-g { display: flex; align-items: center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); margin: 14px 0 6px; }
.qs-item { display: flex; width: 100%; gap: 12px; align-items: baseline; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.qs-item:hover, .qs-item.hl { background: var(--blue-50); }
.qs-t { font-weight: 650; color: var(--ink); flex: 1; }

/* cabeçalho de boas-vindas */
.hero { position: relative; overflow: hidden; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 26px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #2B5BE0 0%, #1746C8 38%, #0E2C86 75%, #0B1B52 100%); box-shadow: 0 10px 30px -14px rgba(23, 70, 200, .6); }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .06); pointer-events: none; }
.hero h2 { color: #fff; font-size: 21px; font-weight: 800; margin: 4px 0 10px; }
.hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #BFD0FF; text-transform: uppercase; }
.hero-sub { color: #D6E1FF; font-size: 13px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 99px; height: 32px; padding: 0 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.hero-pill:hover { background: rgba(255, 255, 255, .18); }
.hero-pill b { font-size: 14px; }
.hero-pill.danger { background: rgba(240, 68, 56, .9); border-color: transparent; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-actions .btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.hero-actions .btn:hover { background: rgba(255, 255, 255, .22); }
.hero-sm { padding: 20px 24px; }
.hero-meter { min-width: 260px; position: relative; z-index: 1; color: #D6E1FF; }
.bar.inv { background: rgba(255, 255, 255, .18); margin-top: 8px; }
.bar.inv > span { background: var(--surface); }

/* segmentado */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; background: transparent; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid #D0D5DD; }
.seg button.on { background: var(--solid); color: #fff; }

/* quadro de tarefas */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.bcol { background: var(--col-bg); border-radius: 14px; padding: 10px; min-height: 140px; border: 2px dashed transparent; transition: border-color .12s, background .12s; }
.bcol.over { border-color: var(--blue); background: var(--blue-50); }
.bcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; }
.bcol-h b { font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 99px; padding: 1px 8px; }
.bcol-b { display: flex; flex-direction: column; gap: 9px; }
.bempty { border: 1.5px dashed #C9D2E3; border-radius: 11px; padding: 18px; text-align: center; font-size: 12.5px; color: var(--faint); }
.tcard { background: var(--surface); border-radius: 12px; padding: 12px 13px 11px 15px; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: grab; position: relative; transition: box-shadow .12s, transform .12s; }
.tcard::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pc); }
.tcard:hover { box-shadow: 0 8px 18px -10px rgba(16, 24, 40, .35); transform: translateY(-1px); }
.tcard.dragging { opacity: .45; }
.tcard-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.tcard-top .pill { font-size: 11px; padding: 2px 8px; }
.tcard-title { font-weight: 700; color: var(--ink); margin: 8px 0 3px; line-height: 1.3; }
.tcard-desc { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.tcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tcard-meta svg.i { width: 13px; height: 13px; }
.p-low { --pc: #98A2B3; } .p-mid { --pc: #2E62F0; } .p-high { --pc: #F79009; } .p-urg { --pc: #F04438; }
.prio { font-size: 11px; font-weight: 750; color: var(--pc); text-transform: uppercase; letter-spacing: .04em; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--pc); flex: none; }
.avatar { width: 26px; height: 26px; border-radius: 99px; background: var(--solid); color: #fff; font-size: 10.5px; font-weight: 750; display: inline-flex !important; align-items: center; justify-content: center; flex: none; }
.task-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.task-side { display: flex; flex-direction: column; gap: 12px; background: var(--soft); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; }
.checklist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ck { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; background: var(--soft); }
.ck span { flex: 1; }
.ck.ok span { text-decoration: line-through; color: var(--muted); }
.ck .icon-btn { width: 26px; height: 26px; }
.comments { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.cmt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--soft); border-radius: 12px; }
.cmt-new { display: flex; gap: 10px; align-items: flex-end; }
.cmt-new textarea { min-height: 54px; }

/* assessoria */
.ass-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.composer { border-bottom: 1px solid var(--line-2); background: linear-gradient(#fff, var(--soft)); }
.notes { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 10px; max-height: 720px; overflow-y: auto; }
.note { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.note.pinned { border-color: #B2C5FF; background: var(--soft); }
.note-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.note-h .icon-btn { width: 28px; height: 28px; }
.note-date { font-size: 12px; font-weight: 750; color: var(--ink); background: var(--line-2); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.note-t { font-size: 13.5px; color: var(--text); line-height: 1.55; }
.note-tasks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--soft); border-radius: 99px; padding: 2px 10px 2px 3px; font-size: 12.5px; cursor: pointer; }
.tchip .pill { font-size: 11px; padding: 1px 8px 1px 7px; }
.st-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-mini > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; }
.st-mini b { font-size: 16px; color: var(--ink); }
.mini-list { display: flex; flex-direction: column; }
.mini-item { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 8px 6px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.mini-item:hover { background: var(--soft); }
.mi-t { flex: 1; font-weight: 600; color: var(--ink); }
.feed { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--blue-50); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.feed-ico svg.i { width: 14px; height: 14px; }
.when { color: var(--muted); font-size: 12px; }
.scope { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.scope li { display: flex; gap: 9px; align-items: center; }
.scope svg.i { color: var(--ok); }

/* calendário */
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.cal-card { overflow: hidden; }
.cal-title { flex: 1; text-align: center; justify-content: center; font-size: 17px !important; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; color: var(--muted); padding: 10px; background: var(--soft); border-bottom: 1px solid var(--line); text-align: center; }
.cal-day { min-height: 108px; border: 0; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--surface); text-align: left; padding: 7px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; transition: background .1s; }
.cal-day:nth-child(7n + 7) { border-right: 0; }
.cal-day:hover { background: var(--soft); }
.cal-day.out { background: var(--soft); }
.cal-day.out .cal-num span:first-child { color: var(--faint); }
.cal-day.sel { background: var(--blue-50); box-shadow: inset 0 0 0 2px var(--blue); }
.cal-num { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.cal-day.today .cal-num span:first-child { background: var(--blue); color: #fff; border-radius: 99px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.cal-count { font-size: 10.5px; font-weight: 750; background: var(--solid); color: #fff; border-radius: 99px; padding: 1px 7px; }
.cal-chip { font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 5px; background: var(--b, var(--line-2)); color: var(--t, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.cal-chip svg.i { width: 11px; height: 11px; }
.cal-chip.task { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.cal-chip.task.late { border-color: #FECDCA; color: var(--danger); }
.cal-chip.task.done { color: var(--ok); text-decoration: line-through; }
.cal-more { font-size: 11px; color: var(--muted); font-weight: 650; padding-left: 4px; }
.day-panel { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.day-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 750; color: var(--muted); margin: 18px 0 8px; }
.day-sec:first-child { margin-top: 0; }
.agenda-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 8px 10px; cursor: pointer; margin-bottom: 6px; }
.agenda-item:hover { border-color: #B2C5FF; background: var(--soft); }
.agenda-item .pill { font-size: 11px; padding: 2px 8px; }
.ag-time { font-size: 11.5px; font-weight: 750; color: var(--ink); width: 56px; flex: none; }
.ag-t { flex: 1; font-size: 13px; color: var(--ink); min-width: 0; }
.note-item .ag-t { color: var(--text); }
.log-group { margin-bottom: 10px; }
.log-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 4px; }
.log-h svg.i { width: 14px; height: 14px; color: var(--blue); }
.log { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); }
.log li { display: flex; gap: 10px; font-size: 12.5px; padding: 4px 0 4px 10px; }
.log .when { width: 38px; flex: none; }

@media (max-width: 1240px) { .cal-wrap, .ass-grid { grid-template-columns: 1fr; } .day-panel { position: static; max-height: none; } }
@media (max-width: 900px) {
  .search-trigger { min-width: 0; } .search-trigger span, .search-trigger kbd { display: none; }
  .task-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 64px; padding: 4px; } .cal-chip { display: none; }
  .hero { padding: 18px; } .hero h2 { font-size: 18px; }
}

.nav a.active .count.danger { background: var(--surface); color: var(--danger); }
.hero-kicker { text-transform: none; letter-spacing: .02em; }
.hero-sm .hero-kicker { text-transform: uppercase; letter-spacing: .06em; }

/* produtos: SKU sempre inteiro */
.sku { white-space: nowrap; }
.prod-cell { min-width: 340px; align-items: center; }
.pc-txt { min-width: 0; }
.pc-txt .nm { max-width: 420px; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; }
.sku-tag { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--line-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.thumb.md { width: 52px; height: 52px; border-radius: 11px; }
.prod-cell { min-width: 320px; }
table.t td.actions .icon-btn { width: 30px; }

/* =====================================================================
   v4 — painel com gráficos, saudação, logomarca maior
   ===================================================================== */
.brand { padding: 18px 18px 16px; gap: 14px; }
.brand-logo { width: 66px; height: 66px; border-radius: 16px; }
.brand-name { font-size: 17px; }
.brand-sub { font-size: 12.5px; }

/* categorias com as cores da paleta dos gráficos (a cor segue a categoria) */
.c-oc { --t: #133DB2; --b: #EEF3FF; --d: #1746C8; --l: #C7D7FE; }
.c-frete { --t: #9A3412; --b: #FFF1EA; --d: #eb6834; --l: #FBD3C0; }
.c-serv { --t: #046C4E; --b: #E8F8F1; --d: #1baf7a; --l: #A9E7CF; }
.c-extra { --t: #854D0E; --b: #FFF7E0; --d: #eda100; --l: #FBE2A0; }
.c-sup { --t: #9D174D; --b: #FDEEF4; --d: #e87ba4; --l: #F7C9DA; }
.c-out { --t: #14532D; --b: #EAF5EA; --d: #008300; --l: #B9DDB9; }

.hero-quote { display: flex; align-items: center; gap: 8px; margin: -2px 0 14px; color: #E3EAFF; font-size: 14px; font-style: italic; }
.hero-q-next { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 26px; height: 26px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.hero-q-next:hover { background: rgba(255,255,255,.24); }
.hero-q-next svg.i { width: 13px; height: 13px; }
.hero-pill.calm { cursor: default; background: rgba(23, 178, 106, .25); border-color: rgba(255,255,255,.15); }
.hero h2 { font-size: 23px; }

.filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.filterbar .chip { height: 30px; }

.tile .tile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tile .k-value { margin-top: 0; }
.tile .k-foot { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 8px; }
.spark { width: 110px; height: 34px; flex: none; overflow: visible; }
.delta { font-size: 12px; font-weight: 750; padding: 1px 7px; border-radius: 99px; }
.delta.up { color: #05603A; background: var(--ok-bg); }
.delta.down { color: #B42318; background: var(--danger-bg); }
.delta.flat { color: var(--muted); background: var(--line-2); }
.delta-lbl { font-size: 11.5px; color: var(--faint); }
.kpi.accent .delta { background: rgba(255,255,255,.18); color: #fff; }
.kpi.accent .delta-lbl { color: #BFD0FF; }

.dash-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.chart { width: 100%; height: 240px; display: block; overflow: visible; }
.chart .ch-grid { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .ch-base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .ch-tick { font-size: 11px; fill: var(--faint); font-family: var(--font); }
.chart .ch-hit { fill: transparent; cursor: crosshair; }
.chart .ch-hit.hl, .chart .ch-hit:hover { fill: rgba(23, 70, 200, .05); }
.ch-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--text); }
.ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ch-legend i, .seg-legend i, .sw, .tt-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.ch-empty { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--faint); font-size: 13px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; padding: 20px; background: var(--soft); }
.ch-tip { position: fixed; z-index: 300; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; color: var(--ink); box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .3); min-width: 150px; display: none; }
.tt-row { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--text); }
.tt-row b { margin-left: auto; padding-left: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-tot { border-top: 1px solid var(--line-2); padding-top: 4px; }

.hbars { display: flex; flex-direction: column; gap: 11px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px; grid-template-areas: "label val" "track track"; gap: 4px 10px; cursor: default; padding: 2px 4px; margin: -2px -4px; border-radius: 8px; }
.hb-row.hl { background: var(--soft); }
.hb-label { grid-area: label; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.hb-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.hb-sub { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-val { grid-area: val; text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13px; }
.hb-track { grid-area: track; height: 10px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.hb-track svg { width: 100%; height: 10px; display: block; }

.segbar { width: 100%; height: 14px; display: block; border-radius: 99px; }
.segbar rect { cursor: default; }
.seg-legend { display: flex; flex-direction: column; margin-top: 14px; }
.seg-legend > div { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.seg-legend > div[data-act], .seg-legend > div[data-go] { cursor: pointer; }
.seg-legend > div[data-act]:hover, .seg-legend > div[data-go]:hover { background: var(--soft); }
.seg-legend > div:last-child { border-bottom: 0; }
.seg-legend span { flex: 1; color: var(--text); }
.seg-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-legend em { font-style: normal; color: var(--muted); width: 42px; text-align: right; font-size: 12px; }

.list-rows { display: flex; flex-direction: column; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line-2); background: var(--surface); border-radius: 11px; padding: 9px 12px; cursor: pointer; }
.lrow:hover { border-color: #B2C5FF; background: var(--soft); }
.lrow-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--blue-50); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lrow-t b { color: var(--ink); font-size: 13.5px; }
.lrow-t small { color: var(--muted); font-size: 12px; }
.lrow-n { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.lrow.warn .lrow-ico { background: var(--warn-bg); color: #B54708; } .lrow.warn .lrow-n { color: #B54708; }
.lrow.danger .lrow-ico { background: var(--danger-bg); color: var(--danger); } .lrow.danger .lrow-n { color: var(--danger); }

.mk-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 600; background: var(--surface); }
.mk-toggle.on { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.seg-sm button { height: 30px; font-size: 12.5px; }
.flash { animation: flash .6s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--blue-100); } 100% { box-shadow: var(--shadow); } }
.reset-list { display: flex; flex-direction: column; gap: 6px; }
.reset-list .badge { margin-left: auto; }

@media (max-width: 1240px) { .dash-main { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .brand-logo { width: 54px; height: 54px; } .chart { height: 200px; } .spark { width: 80px; } }

.chart { height: auto; }
.tile-spark { margin-top: 8px; height: 34px; }
.tile-spark .spark { width: 100%; height: 34px; }
.hb-label { flex-direction: column; gap: 1px; align-items: flex-start; }
.hb-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.hb-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.hb-label { overflow: hidden; }
.hb-name, .hb-sub { max-width: 100%; }
.hb-sub { display: block; }
.hb-val { padding-bottom: 1px; }

/* =====================================================================
   v5 — correção do status "Concluído", períodos personalizados,
   assessoria interativa e gráficos aprimorados
   ===================================================================== */
select.in.status-sel { background-color: var(--b) !important; color: var(--t) !important; border-color: var(--l) !important; -webkit-text-fill-color: var(--t); }
select.in.status-sel.st-done { --t: #05603A; --b: #D3F3E0; --l: #6CD6A0; }
.pill.st-done { color: #fff; background: #067647; border-color: #067647; }
.pill.st-done i { background: #ABEFC6; }

.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-presets { flex-wrap: wrap; }
.seg.seg-sm button { height: 30px; padding: 0 10px; font-size: 12.5px; }
.seg button svg.i { width: 13px; height: 13px; }
.pc-dates { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 6px; border-radius: 10px; border: 1px dashed transparent; }
.pc-dates.on { border-color: var(--blue); background: var(--blue-50); }
.pc-dates .in.sm { width: 140px; }
.pc-dates span { font-size: 12px; color: var(--muted); }
.filterbar .period { flex: 1; }
.seg-n { font-size: 11px; margin-left: 3px; opacity: .7; }

/* painel */
.ch-title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-title h3 { flex: none; }
.ch-head-n { text-align: right; display: flex; flex-direction: column; }
.ch-head-n b { font-size: 20px; color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.ch-head-n span { font-size: 12px; color: var(--muted); }
.chart .ch-cross { stroke: transparent; stroke-width: 1; }
.chart .ch-col:hover .ch-cross, .chart .ch-col.hl .ch-cross { stroke: #98A2B3; stroke-dasharray: 0; }
.chart .ch-col { cursor: crosshair; }
.mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mstat { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; background: var(--soft); display: flex; flex-direction: column; }
.mstat span { font-size: 11.5px; color: var(--muted); font-weight: 650; }
.mstat b { font-size: 18px; color: var(--ink); font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mstat small { font-size: 11.5px; color: var(--muted); }
.big-pct { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 8px; }
.bullet { position: relative; padding-bottom: 20px; }
.bl-track { position: relative; height: 12px; border-radius: 99px; background: var(--line-2); overflow: visible; }
.bl-zone { position: absolute; left: 0; top: 0; bottom: 0; background: #FDE4E2; border-radius: 99px 0 0 99px; }
.bl-val { position: absolute; left: 0; top: 3px; height: 6px; border-radius: 99px; }
.bl-mark { position: absolute; top: -4px; width: 2px; height: 20px; background: #98A2B3; border-radius: 2px; transform: translateX(-1px); }
.bl-mark.target { background: var(--solid); }
.bl-scale { position: relative; height: 16px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.bl-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.res-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.res-line b { color: var(--ink); }
.res-line.total { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 800; color: var(--ink); font-size: 15px; }
.res-line.total.neg b { color: var(--danger); }

.pipe { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pipe-st { flex: 1; min-width: 132px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; position: relative; transition: border-color .12s, box-shadow .12s; }
.pipe-st::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 12px 12px 0 0; background: var(--sc); }
.pipe-st:hover, .pipe-st.hl { border-color: var(--sc); box-shadow: 0 6px 16px -10px rgba(16,24,40,.35); }
.pipe-st.zero { opacity: .55; }
.pipe-top { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--text); white-space: nowrap; }
.pipe-top i { width: 8px; height: 8px; border-radius: 99px; background: var(--sc); }
.pipe-n { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; margin-top: 4px; }
.pipe-v { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pipe-bar { height: 4px; border-radius: 99px; background: var(--line-2); margin-top: 8px; overflow: hidden; }
.pipe-bar span { display: block; height: 100%; background: var(--sc); border-radius: 99px; }
.pipe-arrow { align-self: center; color: var(--faint); font-size: 20px; flex: none; }

.hb-wrap { display: flex; align-items: center; gap: 10px; }
.hb-wrap .hb-row { flex: 1; min-width: 0; margin: 0; }
.hb-rank { width: 22px; height: 22px; border-radius: 99px; background: var(--solid); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hb-wrap:nth-child(n+4) .hb-rank { background: var(--line-2); color: var(--muted); }
.hb-img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line-2); flex: none; }
.hb-track { position: relative; overflow: visible; }
.hb-track svg { border-radius: 99px; }
.hb-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--solid); border-radius: 2px; transform: translateX(-1px); }
.hb-val small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; }
.mini-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.mini-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mini-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* assessoria interativa */
.scope-kpi .k-label { display: flex; }
.quick-add { display: flex; gap: 8px; }
.quick-add .in:first-child { flex: 1; }
.tlist { border-top: 1px solid var(--line-2); max-height: 520px; overflow-y: auto; }
.trow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 176px; gap: 10px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line-2); }
.trow:hover { background: var(--soft); }
.trow.is-late { background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.trow-t { font-weight: 650; color: var(--ink); display: block; }
.trow.done .trow-t { text-decoration: line-through; color: var(--muted); }
.trow-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-top: 2px; flex-wrap: wrap; }
.trow-meta svg.i { width: 12px; height: 12px; }
.trow-due { font-size: 12.5px; white-space: nowrap; }
.trow select.status-sel { min-width: 0; width: 176px; }
.tcheck { position: relative; width: 22px; height: 22px; display: inline-flex; cursor: pointer; flex: none; }
.tcheck input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tcheck span { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.tcheck input:checked + span { background: #17B26A; border-color: #17B26A; }
.tcheck input:checked + span::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.tcheck:hover span { border-color: var(--blue); }
.note-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-2); }
.note-filters .search { min-width: 200px; flex: 1; }
.note-filters .search svg.i { top: 8px; }
.notes { padding-top: 14px; }
.note.is-done { background: var(--soft); }
.note.is-done .note-t { color: var(--muted); text-decoration: line-through; }
.feed-card { position: sticky; top: 96px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.feed-scroll { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.feed-card .period .seg { flex-wrap: wrap; }
@media (max-width: 1240px) { .feed-card { position: static; max-height: none; } }
@media (max-width: 700px) { .trow { grid-template-columns: 28px minmax(0, 1fr); } .trow-due, .trow select.status-sel { grid-column: 2; } }
.period { gap: 8px; }
.pc-sel { position: relative; display: inline-flex; align-items: center; }
.pc-sel svg.i { position: absolute; left: 9px; color: var(--blue); pointer-events: none; width: 14px; height: 14px; }
.pc-sel select { padding-left: 29px; font-weight: 650; min-width: 150px; }
.pc-dates { border: 1px solid transparent; }
.period.is-custom .pc-dates { border-color: var(--blue); background: var(--blue-50); border-style: solid; }
.period:not(.is-custom) .pc-dates .in { color: var(--muted); }
.bl-scale span.l { transform: translateX(-100%); padding-right: 4px; }
.bl-scale span.r { transform: none; padding-left: 4px; }
.pc-sel select.in.sm { padding-left: 30px; }
.filterbar .period { flex: none; flex-wrap: nowrap; }
@media (max-width: 900px) { .filterbar .period { flex-wrap: wrap; } }

/* =====================================================================
   v6 — painel alinhado, novo cabeçalho com logomarca, donut, margens
   ===================================================================== */
.hero2 { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) 270px; gap: 26px; align-items: center; padding: 24px 26px; border-radius: 20px; color: #fff;
  background: radial-gradient(900px 300px at 0% 0%, rgba(255, 196, 46, .16), transparent 60%), radial-gradient(700px 380px at 100% 100%, rgba(46, 98, 240, .55), transparent 60%), linear-gradient(120deg, #0B0F19 0%, #0E1E57 45%, #1746C8 100%);
  box-shadow: 0 18px 40px -22px rgba(11, 15, 25, .75); }
.hero2::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent, #000 40%, #000); pointer-events: none; }
.hero2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #F5B11A, #FFD66B 40%, transparent 85%); }
.hero2 > * { position: relative; z-index: 1; }
.hero2-logo { width: 112px; height: 112px; border-radius: 26px; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 4px rgba(255, 214, 107, .35); }
.hero2-logo img { width: 92px; height: 92px; object-fit: contain; }
.hero2 h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 6px 0 8px; letter-spacing: -.01em; }
.hero2 .hero-kicker { color: #FFD66B; text-transform: none; letter-spacing: .02em; }
.hero2 .hero-quote { color: #DCE4FF; }
.hero2-actions { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(4px); }
.qa-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #BFD0FF; font-weight: 750; padding: 0 4px 4px; }
.qa { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; color: #fff; border-radius: 11px; padding: 8px; cursor: pointer; transition: background .12s; }
.qa:hover { background: rgba(255,255,255,.12); }
.qa-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qa-t { display: flex; flex-direction: column; line-height: 1.25; }
.qa-t b { font-size: 13.5px; } .qa-t small { font-size: 11.5px; color: #BFD0FF; }

.dgrid { display: grid; gap: 16px; margin-top: 16px; align-items: stretch; }
.dgrid.d4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.dgrid.d21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dgrid.d3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgrid.d1 { grid-template-columns: 1fr; }
.dgrid > .card, .dgrid > .kpi { height: 100%; margin-top: 0 !important; }
.dcard { display: flex; flex-direction: column; }
.dcard > .card-b { flex: 1; display: flex; flex-direction: column; }
.dcard > .card-b > .ch-empty { flex: 1; }
.dcard-foot { padding: 12px 20px; border-top: 1px solid var(--line-2); background: var(--soft); border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: flex-end; }
.dcard .card-h { min-height: 64px; }
.dcard .hbars { gap: 14px; }
.dgrid.d3 .dcard > .card-b { min-height: 330px; }
.sum-block { margin: 16px 0 12px; }
.sum-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sum-h span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sum-h b { font-size: 24px; font-weight: 800; color: var(--ink); }

.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.donut { position: relative; width: 170px; height: 170px; }
.donut svg { width: 100%; height: 100%; }
.donut svg path { cursor: default; transition: opacity .12s; }
.donut svg path.hl { opacity: .85; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-c b { font-size: 15px; font-weight: 800; color: var(--ink); }
.donut-c span { font-size: 11.5px; color: var(--muted); }
.donut-wrap .seg-legend { width: 100%; margin-top: 0; }
.seg-legend span small { display: block; font-size: 11px; color: var(--faint); }

.mbar { display: flex; align-items: center; gap: 10px; }
.mbar .hb-track { flex: 1; }
.mbar b { width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.trow-done { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 12px; }
.trow-done .in.sm { width: 138px; height: 28px; font-size: 12px; border-color: #ABEFC6; background: var(--ok-bg); color: #05603A; }

@media (max-width: 1240px) { .dgrid.d4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dgrid.d21, .dgrid.d3 { grid-template-columns: 1fr; } .hero2 { grid-template-columns: auto minmax(0, 1fr); } .hero2-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .qa-title { width: 100%; } .qa { width: auto; flex: 1; } }
@media (max-width: 700px) { .hero2 { grid-template-columns: 1fr; text-align: left; } .hero2-logo { width: 76px; height: 76px; border-radius: 18px; } .hero2-logo img { width: 62px; height: 62px; } .dgrid.d4 { grid-template-columns: 1fr 1fr; } }

td.evo { width: 96px; } td.evo .spark { width: 90px; height: 30px; }
.cost-t .prod-cell { min-width: 0 !important; } .cost-t .pc-txt .nm { max-width: 260px; } .cost-t th { white-space: normal; }
tr.row-link { cursor: pointer; } tr.row-link:hover td { background: var(--blue-50) !important; }
.tab-badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; align-items: center; justify-content: center; margin-left: 4px; }
.rp-bar { align-items: flex-end; gap: 14px; }
.rp-bar .field label { font-size: 11.5px; }
.rp-card { overflow: hidden; }
.rp-head { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.rp-cost { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.rp-cost b { font-size: 18px; color: var(--ink); }
.rp-t th.rp-m, .rp-t td.rp-m { color: var(--muted); }
.rp-t th.rp-m.sel, .rp-t td.rp-m.sel { background: var(--blue-50) !important; color: var(--blue); font-weight: 800; box-shadow: inset 2px 0 0 var(--blue), inset -2px 0 0 var(--blue); }
.rp-t td.rp-m { color: var(--ink); }
.rp-t tr.rp-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.rp-t th { white-space: normal; line-height: 1.25; } .rp-t td, .rp-t th { padding-left: 8px !important; padding-right: 8px !important; } .rp-t td:first-child, .rp-t th:first-child { padding-left: 20px !important; } .rp-adj { white-space: nowrap; } .rp-adj .btn { margin-left: 6px; }
/* link do anúncio */
.mk-link { display: inline-flex; align-items: center; gap: 4px; height: 24px; min-width: 24px; justify-content: center; padding: 0 6px; border-radius: 7px; background: #FFF3C4; color: #6B4E00; border: 1px solid #F5D76E; vertical-align: middle; font-size: 12px; font-weight: 650; text-decoration: none !important; }
.mk-link:hover { background: #FFE58A; }
.mk-link svg.i { width: 13px; height: 13px; }
/* coluna da margem alvo */
.seg.seg-blue button.on { background: var(--blue); color: #fff; }
.rp-t th.rp-m.sel, .rp-t td.rp-m.sel { background: transparent !important; box-shadow: none !important; }
.rp-t td.rp-m.sel span { display: inline-block; min-width: 86px; padding: 5px 10px; border-radius: 9px; background: var(--blue-50); color: var(--blue-700); font-weight: 800; border: 1px solid var(--blue-100); }
.rp-t tr.rp-alert td.rp-m.sel span { background: var(--blue); color: #fff; border-color: var(--blue); }
.rp-tag { display: inline-block; padding: 3px 9px; border-radius: 99px; background: var(--blue); color: #fff !important; font-size: 10.5px; letter-spacing: .03em; white-space: nowrap; }
.rp-t td.rp-m.sel span { min-width: 0; padding: 4px 8px; }
.rp-t td.rp-m, .rp-t th.rp-m { padding-left: 5px !important; padding-right: 5px !important; }
.rp-adj .btn { padding: 0 8px; }
.dgrid.d2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1240px) { .dgrid.d2 { grid-template-columns: 1fr; } }
.dgrid.d3 .dcard > .card-b.short { min-height: 0; }
td.lk-col, th.lk-col { width: 40px; text-align: center; padding-left: 14px !important; padding-right: 0 !important; }
.lk-stack { display: inline-flex; flex-direction: column; gap: 4px; }
.mk-link.only { width: 28px; height: 28px; padding: 0; position: relative; }
.mk-link.only em { position: absolute; right: -5px; bottom: -5px; font-style: normal; font-size: 9px; font-weight: 800; background: var(--solid); color: #fff; border-radius: 99px; min-width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== v9 · usuários, notificações, roadmap ===== */
.top-user { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.bell { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.bell:hover { background: var(--soft); border-color: var(--blue-100); }
.bell svg { width: 18px; height: 18px; }
.bell-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #D92D20; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.user-chip { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 4px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.user-chip:hover { background: var(--soft); }
.uc-t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.uc-t b { font-size: 13px; color: var(--ink); } .uc-t small { font-size: 10.5px; color: var(--muted); }
.uav { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; flex: none; letter-spacing: .02em; }
.uav.lg { width: 56px; height: 56px; font-size: 19px; }
.pop { position: fixed; z-index: 80; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(16, 24, 40, .16); width: 300px; padding: 6px; }
.pop-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; color: var(--muted); padding: 10px 10px 8px; gap: 8px; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left; }
.pop-item:hover { background: var(--soft); } .pop-item.on { background: var(--blue-50); }
.pop-item span { flex: 1; display: flex; flex-direction: column; min-width: 0; } .pop-item b { font-size: 13px; color: var(--ink); } .pop-item small { font-size: 11.5px; color: var(--muted); }
.pop-item > svg { width: 16px; height: 16px; color: var(--blue); }
.pop-sep { height: 1px; background: var(--line-2); margin: 6px 4px; }
.pop-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 6px 4px; border-top: 1px solid var(--line-2); }
.notif-pop { width: 400px; max-width: calc(100vw - 16px); }
.notif-list { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.notif-list.big { max-height: none; padding: 14px 16px 16px; }
.nitem { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 11px; border: 1px solid var(--line-2); border-left: 3px solid var(--nc, #2E62F0); background: var(--surface); }
.nitem.t-danger { --nc: #D92D20; } .nitem.t-warn { --nc: #F79009; } .nitem.t-info { --nc: #2E62F0; } .nitem.t-ok { --nc: #12B76A; }
.nitem.read { opacity: .58; border-left-color: var(--line); }
.nitem-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--nc); background: color-mix(in srgb, var(--nc) 12%, #fff); }
.nitem-ico svg { width: 15px; height: 15px; }
.nitem-b { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; cursor: pointer; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nitem-top { display: flex; align-items: center; gap: 8px; } .nitem-top b { font-size: 13px; color: var(--ink); flex: 1; }
.nitem-t { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.k-warn .k-value { color: #B54708; } .k-warn .k-ico { background: var(--warn-bg); color: #B54708; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.color-dot.on { box-shadow: 0 0 0 2px var(--ink); }
.pin-box { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pin-in { text-align: center; letter-spacing: .4em; font-size: 20px; max-width: 200px; }
.lock { position: fixed; inset: 0; z-index: 200; background: linear-gradient(160deg, #0B1B4D, #1746C8 55%, #0B0F19); display: grid; place-items: center; padding: 20px; }
.lock-card { background: var(--surface); border-radius: 22px; padding: 34px 30px; width: min(620px, 100%); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.lock-card h2 { margin: 10px 0 2px; }
.lock-logo { width: 92px; height: 92px; border-radius: 22px; object-fit: cover; border: 1px solid var(--line); }
.lock-users { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.lock-u { width: 140px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lock-u:hover { border-color: var(--blue); background: var(--blue-50); }
.lock-u b { font-size: 13.5px; color: var(--ink); } .lock-u small { font-size: 11.5px; color: var(--muted); }
.lock-pin { margin-top: 16px; }
.road-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--blue-100); }
.road-tl > li { position: relative; padding: 0 0 18px 14px; }
.road-tl > li::before { content: ''; position: absolute; left: -26px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--blue-100); }
.road-tl > li.cur::before { border-color: var(--blue); background: var(--blue); }
.rt-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-h b { color: var(--ink); }
.rt-v { font-size: 11px; font-weight: 800; color: var(--blue); background: var(--blue-50); border-radius: 6px; padding: 2px 7px; }
.road-tl ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.road-tl ul li { margin: 2px 0; }
.road-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.road-item select { width: 132px; flex: none; }
@media (max-width: 760px) { .uc-t { display: none; } .user-chip { padding: 0 4px; } }
.mk-link.only em.em-p { background: var(--blue); color: #fff; }
.mk-link.only em.em-c { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
td.lk-col + td .prod-cell { min-width: 300px; } td.lk-col + td .pc-txt .nm { max-width: 330px; }

/* ===== v10 · Central de avisos automáticos ===== */
.cjump { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: 0; z-index: 12; background: var(--app); padding: 6px 0; }
.cjump button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 13px; color: var(--ink); cursor: pointer; }
.cjump button:hover { border-color: var(--blue); }
.cjump span { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; }
.cjump em { font-style: normal; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 1px 7px; }
.csec { margin-bottom: 34px; scroll-margin-top: 56px; }
.csec + .csec { padding-top: 26px; border-top: 1px dashed var(--line); }
.csec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.csec-n { width: 34px; height: 34px; border-radius: 10px; background: var(--solid); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.csec-t { flex: 1; min-width: 240px; } .csec-t h2 { margin: 0; font-size: 18px; color: var(--ink); letter-spacing: -.01em; } .csec-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.csec-a { display: flex; gap: 8px; flex-wrap: wrap; }
.ckpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .ckpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ckpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cki { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; box-shadow: var(--shadow); min-width: 0; }
.cki[class*="k-"] { border-top-width: 3px; padding-top: 10px; }
.cki:hover { border-color: var(--blue-100); }
.cki.on { outline: 2px solid var(--blue); outline-offset: -1px; }
.cki-l { font-size: 12px; font-weight: 650; color: var(--muted); } .cki-v { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .cki-f { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cki.k-blue { border-top-color: var(--blue); } .cki.k-blue .cki-v { color: var(--blue); }
.cki.k-red { border-top-color: #D92D20; } .cki.k-red .cki-v { color: #B42318; }
.cki.k-green { border-top-color: #17B26A; } .cki.k-amber { border-top-color: #F79009; } .cki.k-amber .cki-v { color: #B54708; }
.ctable td { vertical-align: top; }
.ctable td.ckc, .ctable th.ckc { width: 34px; padding-right: 0 !important; }
.ctable tr.unread td:nth-child(2) b, .ctable tr.unread .ctit { color: var(--ink); }
.ctable tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.ctable tr.to-send td:first-child { box-shadow: inset 3px 0 0 #F79009; }
.ctable tr.is-late td:first-child { box-shadow: inset 3px 0 0 #D92D20; }
.ctable tr.sel td { background: var(--blue-50); }
.ctable .pill { font-size: 11.5px; padding: 2px 9px 2px 7px; margin: 3px 0; }
.ctable select.in.sm { min-width: 128px; }
.cnum { display: flex; align-items: center; gap: 6px; }
.dot-new { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.cdet { color: var(--text); margin-top: 2px; }
.ctit { display: block; margin: 2px 0; line-height: 1.35; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px; }
.danger-t { color: #B42318; font-weight: 700; }
.cprio { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.pr-low { color: #475467; background: var(--soft-2); } .pr-mid { color: #1746C8; background: #EEF3FF; } .pr-high { color: #B54708; background: #FFF4E5; } .pr-crit { color: #fff; background: #D92D20; }
.c-alert { --t: #B42318; --b: #FEF3F2; --d: #F04438; --l: #FECDCA; }
.c-fin { --t: #5925DC; --b: #F4F0FF; --d: #7A5AF8; --l: #D9D6FE; }
.c-ass { --t: #0B0F19; --b: #EEF1F6; --d: #1746C8; --l: #D0D5DD; }
.bulkbar select.in.sm { background: #1D2433; color: #fff; border-color: #3A4152; height: 32px; max-width: 220px; }
.cmeta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 12px; background: var(--soft); border: 1px solid var(--line-2); border-radius: 10px; margin-top: 12px; }
.mono-msg { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }

/* =====================================================================
   v12 · TEMA NOTURNO — paleta própria, com o mesmo cuidado do tema claro
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --blue: #5B8CFF; --blue-700: #A9C2FF; --blue-600: #4677F5; --blue-100: #2A4384; --blue-50: #16264D;
  --ink: #F5F7FB; --text: #D6DDEA; --text-2: #C9D2E3; --muted: #9AA6BE; --faint: #6F7C96;
  --app: #080D1A; --bg: #0F172A; --surface: #0F182B; --soft: #142038; --soft-2: #18253F; --col-bg: #0C1426;
  --line: #22304E; --line-2: #1A2642; --line-strong: #31436A;
  --topbar-bg: rgba(10, 16, 31, .92); --solid: #1C2A48;
  --ok: #3DDC97; --ok-bg: #0D2A21; --warn: #FFB547; --warn-bg: #2B1F0D; --danger: #FF6B6B; --danger-bg: #301519;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] body { background: radial-gradient(1200px 600px at 100% -10%, rgba(61, 107, 255, .10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(245, 177, 26, .05), transparent 60%), var(--app); background-attachment: fixed; }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0D1528, #0A1122); border-right-color: var(--line-2); }
html[data-theme="dark"] .brand { border-bottom-color: var(--line-2); }
html[data-theme="dark"] .nav a { color: #B9C3D6; }
html[data-theme="dark"] .nav a svg.i { color: #7F8BA5; }
html[data-theme="dark"] .nav a:hover { background: var(--soft); color: #fff; }
html[data-theme="dark"] .nav a.active { background: linear-gradient(135deg, #3D6BFF, #2448D8); color: #fff; box-shadow: 0 8px 22px -10px rgba(61, 107, 255, .8); }
html[data-theme="dark"] .nav a.active svg.i { color: #fff; }
html[data-theme="dark"] .nav-sec { color: #5E6B86; }
html[data-theme="dark"] .side-foot { background: linear-gradient(135deg, #16244A, #0F1A35); border: 1px solid var(--line); }
html[data-theme="dark"] .card, html[data-theme="dark"] .kpi, html[data-theme="dark"] .cki { border-color: var(--line); background: linear-gradient(180deg, #111C33, #0F182B); }
html[data-theme="dark"] .card-h, html[data-theme="dark"] .card-foot { border-color: var(--line-2); }
html[data-theme="dark"] .card-foot { background: rgba(255, 255, 255, .02); }
html[data-theme="dark"] table.t th { background: #121D35; color: #8E9AB4; border-color: var(--line); }
html[data-theme="dark"] table.t td { border-color: var(--line-2); }
html[data-theme="dark"] table.t tbody tr:hover td { background: rgba(91, 140, 255, .05); }
html[data-theme="dark"] .kpi.accent { background: linear-gradient(135deg, #3D6BFF 0%, #2346D6 60%, #1B37B0 100%); border-color: #3D6BFF; box-shadow: 0 16px 36px -18px rgba(61, 107, 255, .9); }
html[data-theme="dark"] .k-ico { background: rgba(91, 140, 255, .14); color: #8FB0FF; }
html[data-theme="dark"] .k-danger .k-ico { background: rgba(255, 107, 107, .14); color: #FF8A8A; }
html[data-theme="dark"] .k-warn .k-ico { background: rgba(255, 181, 71, .14); color: #FFC56B; }
html[data-theme="dark"] .cki.k-red .cki-v, html[data-theme="dark"] .k-danger .k-value { color: #FF7A7A; }
html[data-theme="dark"] .cki.k-amber .cki-v, html[data-theme="dark"] .k-warn .k-value { color: #FFC24D; }
html[data-theme="dark"] .cki.k-blue .cki-v { color: #7FA6FF; }
html[data-theme="dark"] .cki.k-green { border-top-color: #3DDC97; }
/* pílulas, status e categorias: cores vivas sobre fundo escuro */
html[data-theme="dark"] .pill[class*="st-"], html[data-theme="dark"] .pill[class*="c-"],
html[data-theme="dark"] select.in.status-sel[class*="st-"], html[data-theme="dark"] .st-chip[class*="st-"]:not(.on) {
  background: color-mix(in srgb, var(--d) 20%, #0F182B) !important; color: color-mix(in srgb, var(--d) 62%, #fff) !important; border-color: color-mix(in srgb, var(--d) 50%, transparent) !important;
}
html[data-theme="dark"] .pill i { background: var(--d) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--d) 70%, transparent); }
html[data-theme="dark"] .st-chip { background: var(--soft); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .badge { background: var(--soft-2); color: var(--text); }
html[data-theme="dark"] .badge.blue { background: rgba(91, 140, 255, .16); color: #9DBBFF; }
html[data-theme="dark"] .badge.ok, html[data-theme="dark"] .badge.green { background: rgba(61, 220, 151, .14); color: #6FE8B2; }
html[data-theme="dark"] .badge.danger { background: rgba(255, 107, 107, .16); color: #FF9A9A; }
html[data-theme="dark"] .badge.warn { background: rgba(255, 181, 71, .14); color: #FFC56B; }
html[data-theme="dark"] .cprio.pr-low { background: #1D2945; color: #B8C3D9; }
html[data-theme="dark"] .cprio.pr-mid { background: rgba(91, 140, 255, .16); color: #9DBBFF; }
html[data-theme="dark"] .cprio.pr-high { background: rgba(255, 181, 71, .15); color: #FFC56B; }
html[data-theme="dark"] .cprio.pr-crit { background: #E5484D; color: #fff; }
html[data-theme="dark"] .prio.p-urg, html[data-theme="dark"] .prio.p-high { filter: brightness(1.25); }
/* formulários */
html[data-theme="dark"] input.in, html[data-theme="dark"] select.in, html[data-theme="dark"] textarea.in { background: #0B1324; color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] input.in:focus, html[data-theme="dark"] select.in:focus, html[data-theme="dark"] textarea.in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91, 140, 255, .22); }
html[data-theme="dark"] input.in::placeholder, html[data-theme="dark"] textarea.in::placeholder { color: #5F6C87; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); }
html[data-theme="dark"] input.in:disabled { background: #0D1528; color: var(--faint); }
/* botões */
html[data-theme="dark"] .btn { background: #142038; border-color: var(--line-strong); color: var(--ink); }
html[data-theme="dark"] .btn:hover { background: #1A2948; }
html[data-theme="dark"] .btn.primary { background: linear-gradient(135deg, #4A7BFF, #2E57E8); border-color: #3D6BFF; color: #fff; box-shadow: 0 8px 20px -12px rgba(61, 107, 255, .9); }
html[data-theme="dark"] .btn.primary:hover { background: linear-gradient(135deg, #5B8CFF, #3563F0); }
html[data-theme="dark"] .btn.ghost { background: transparent; border-color: transparent; }
html[data-theme="dark"] .btn.danger { color: #FF8A8A; }
html[data-theme="dark"] .icon-btn { color: #9AA6BE; }
html[data-theme="dark"] .icon-btn:hover { background: var(--soft-2); color: #fff; }
html[data-theme="dark"] .seg { background: #0B1324; border-color: var(--line-strong); }
html[data-theme="dark"] .seg button { color: #AAB5CA; }
html[data-theme="dark"] .seg button.on { background: linear-gradient(135deg, #3D6BFF, #2448D8); color: #fff; }
html[data-theme="dark"] .chip { background: var(--soft); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .chip.on { background: var(--blue); border-color: var(--blue); }
html[data-theme="dark"] .tabs { border-bottom-color: var(--line); }
html[data-theme="dark"] .tab { color: #8E9AB4; }
html[data-theme="dark"] .tab.on { color: #8FB0FF; border-bottom-color: #5B8CFF; }
html[data-theme="dark"] .tab-n.hot { background: #3D6BFF; }
/* avisos */
html[data-theme="dark"] .alert { background: rgba(91, 140, 255, .08); color: var(--text); border-color: rgba(91, 140, 255, .25); }
html[data-theme="dark"] .alert.warn { background: rgba(255, 181, 71, .08); color: #FFCF7A; border-color: rgba(255, 181, 71, .28); }
html[data-theme="dark"] .alert.danger { background: rgba(255, 107, 107, .08); color: #FFA3A3; border-color: rgba(255, 107, 107, .3); }
html[data-theme="dark"] .alert.ok, html[data-theme="dark"] .alert.success { background: rgba(61, 220, 151, .08); color: #7DEBBA; border-color: rgba(61, 220, 151, .28); }
/* quadro de tarefas, calendário e outros blocos */
html[data-theme="dark"] .bcol { background: var(--col-bg); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-theme="dark"] .bcol.over { background: rgba(91, 140, 255, .08); border-color: var(--blue); }
html[data-theme="dark"] .bcol-h b { background: var(--soft-2); color: var(--text); }
html[data-theme="dark"] .tcard { background: linear-gradient(180deg, #15223D, #111C33); border-color: var(--line); }
html[data-theme="dark"] .drop, html[data-theme="dark"] .bempty { border-color: var(--line-strong); color: var(--faint); }
html[data-theme="dark"] .bl-zone { background: rgba(255, 107, 107, .18); }
html[data-theme="dark"] .mk-link { background: rgba(255, 196, 46, .16); color: #FFD66B; border-color: rgba(255, 196, 46, .35); }
html[data-theme="dark"] .mk-link:hover { background: rgba(255, 196, 46, .26); }
html[data-theme="dark"] .mk-link.only em.em-c { background: #0F182B; color: #fff; border-color: var(--line-strong); }
html[data-theme="dark"] .sku-tag { background: #16223B; color: #DCE3EF; border-color: var(--line-strong); }
html[data-theme="dark"] .toast { background: #1C2A48; border: 1px solid var(--line-strong); }
html[data-theme="dark"] .modal { background: var(--surface); border: 1px solid var(--line); }
html[data-theme="dark"] .modal-bg { background: rgba(3, 6, 14, .7); }
html[data-theme="dark"] .pop { background: #111C33; border-color: var(--line-strong); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .pop-item.on { background: rgba(91, 140, 255, .14); }
html[data-theme="dark"] .bulkbar { background: #16244A; border: 1px solid #2A3F75; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .composer { background: linear-gradient(var(--surface), var(--soft)); }
html[data-theme="dark"] .nitem { background: #111C33; border-color: var(--line); }
html[data-theme="dark"] .nitem-ico { background: color-mix(in srgb, var(--nc) 18%, #0F182B); }
html[data-theme="dark"] .lock { background: radial-gradient(800px 400px at 50% 0%, rgba(61, 107, 255, .35), transparent 60%), #060A15; }
html[data-theme="dark"] .lock-card { background: #0F182B; border: 1px solid var(--line); }
html[data-theme="dark"] .lock-u { background: #142038; border-color: var(--line); }
html[data-theme="dark"] .color-dot { border-color: #0F182B; }
html[data-theme="dark"] svg circle[stroke="#fff"] { stroke: var(--surface); }
html[data-theme="dark"] .chart .ch-tick { fill: #7D89A3; }
/* logomarca: versão sem fundo, com brilho suave no escuro */
.brand-logo, .hero2-logo img, .lock-logo { image-rendering: auto; }
html[data-theme="dark"] .brand-logo { background: transparent; filter: drop-shadow(0 0 10px rgba(255, 214, 107, .18)) drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }
html[data-theme="dark"] .hero2-logo { background: radial-gradient(circle at 50% 45%, rgba(255, 214, 107, .22), rgba(255, 255, 255, .04) 60%, transparent 72%); box-shadow: none; border: 1px solid rgba(255, 214, 107, .22); }
html[data-theme="dark"] .hero2-logo img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 1px rgba(255, 255, 255, .4)); }
html[data-theme="dark"] .lock-logo { background: transparent; border-color: transparent; }
html[data-theme="dark"][data-logo="custom"] .brand-logo, html[data-theme="dark"][data-logo="custom"] .hero2-logo, html[data-theme="dark"][data-logo="custom"] .lock-logo { background: #fff; filter: none; }
html[data-theme="dark"] img.thumb { background: #fff; }
html[data-theme="dark"] .modal-bg { background: rgba(3, 6, 14, .7); }
@media print { html[data-theme="dark"] { color-scheme: light; --ink: #0B0F19; --text: #252B37; --text-2: #344054; --muted: #667085; --line: #E3E8EF; --line-2: #EEF1F6; --soft: #F8FAFC; --app: #fff; --bg: #fff; --surface: #fff; --soft-2: #F2F4F7; --solid: #0B0F19; } html[data-theme="dark"] body { background: #fff; } }

/* ---------- seletor de tema ---------- */
.theme-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.theme-btn:hover { background: var(--soft); }
.theme-btn svg { width: 18px; height: 18px; }
.pop-item .th-ico { width: 18px; height: 18px; color: var(--muted); flex: none; }

/* =====================================================================
   v11 · CABEÇALHO PADRÃO (mesma altura e mesmo desenho em todas as páginas)
   ===================================================================== */
@media (min-width: 861px) {
  .topbar { height: 76px; padding: 0 32px; flex-wrap: nowrap; gap: 14px; }
  .topbar-title { flex: 1 1 auto; min-width: 180px; overflow: hidden; }
  .topbar h1 { font-size: 20px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
  .page-sub { font-size: 13px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .top-actions { flex: none; flex-wrap: nowrap; gap: 8px; align-items: center; }
  .search-trigger { flex: none; width: 200px; min-width: 0; }
  .top-user { flex: none; margin-left: 0; }
}
.top-actions .btn, .top-actions .btn.sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: var(--radius-sm); }
.top-actions .btn svg { width: 16px; height: 16px; }
.top-more { position: relative; }
.more-pop { width: 240px; }
.more-pop .btn { width: 100%; justify-content: flex-start; border: 0; box-shadow: none; background: transparent; height: 38px; }
.more-pop .btn:hover { background: var(--soft); }
.more-pop .btn.primary { color: var(--blue); }
.tab-n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 7px; border-radius: 99px; background: var(--soft-2); color: var(--muted); font-size: 11px; font-weight: 800; align-items: center; justify-content: center; vertical-align: 1px; }
.tab.on .tab-n { background: var(--blue-50); color: var(--blue); }
.tab-n.hot { background: var(--blue); color: #fff; }
.tab-intro { margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.ctool { gap: 10px; align-items: center; }
.ctool .search.grow { flex: 1 1 280px; min-width: 240px; }
.ctool > select.in { width: auto; flex: 1 1 170px; min-width: 165px; }
.ctool .period { flex: none; }
.list-card > .card-h { padding: 12px 20px; border-bottom: 1px solid var(--line-2); gap: 10px; }
.list-card > .card-h .spacer { flex: 1; }
html[data-theme="dark"] .alert { color: var(--text); border-color: var(--line-strong); }
html[data-theme="dark"] .alert.warn { color: #FEC84B; border-color: #4A3712; }
html[data-theme="dark"] .alert.danger { color: #FDA29B; border-color: #55201F; }
html[data-theme="dark"] .alert.ok, html[data-theme="dark"] .alert.success { color: #75E0A7; border-color: #1C4A33; }
html[data-theme="dark"] .cki.k-red .cki-v, html[data-theme="dark"] .k-danger .k-value { color: #F97066; }
html[data-theme="dark"] .cki.k-amber .cki-v, html[data-theme="dark"] .k-warn .k-value { color: #FDB022; }
@media (min-width: 861px) { .search-trigger.compact { width: 38px; padding: 0; justify-content: center; } .search-trigger.compact span, .search-trigger.compact kbd { display: none; } }

/* ---------- barra de ações em lote com rótulos ---------- */
.bulkbar.bb2 { align-items: flex-end; gap: 12px 14px; padding: 14px 16px 14px 18px; }
.bb-h { display: flex; flex-direction: column; gap: 2px; margin-right: 6px; min-width: 190px; }
.bb-h b { font-size: 14px; } .bb-h span { font-size: 11.5px; color: #A9B4C8; }
.bb-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #A9B4C8; }
.bulkbar .bb-f select.in.sm { width: 190px; max-width: none; height: 34px; background: #1D2433; color: #fff; border: 1px solid #3A4152; }
.bb-act { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.hero2-logo img { width: 96px; height: 96px; }
html[data-theme="dark"] select.in.status-sel[class*="st-"] { -webkit-text-fill-color: color-mix(in srgb, var(--d) 62%, #fff); }
html[data-theme="dark"] select.status-sel option { color: var(--ink); background: #0F182B; -webkit-text-fill-color: var(--ink); }

/* ===== v14 · relatório de importação (validação de duplicidades) ===== */
.ivcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .ivcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ivcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; border-top: 3px solid var(--line-strong); box-shadow: var(--shadow); }
.ivcard span { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.ivcard b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ivcard.ok { border-top-color: #17B26A; } .ivcard.ok b { color: var(--ok); }
.ivcard.blue { border-top-color: var(--blue); } .ivcard.blue b { color: var(--blue); }
.ivcard.warn { border-top-color: #F79009; } .ivcard.warn b { color: #B54708; }
.ivcard.danger { border-top-color: #D92D20; } .ivcard.danger b { color: var(--danger); }
.ivcard.on { outline: 2px solid var(--blue); outline-offset: -1px; background: var(--blue-50); }
#ivTable tr.iv-dup td, #ivTable tr.iv-dupfile td, #ivTable tr.iv-cancel td { opacity: .6; }
#ivTable tr.iv-analise td:first-child { box-shadow: inset 3px 0 0 #D92D20; }
#ivTable tr.iv-divergent td:first-child { box-shadow: inset 3px 0 0 #F79009; }
#ivTable tr.iv-update td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
#ivTable tr.iv-new td:first-child { box-shadow: inset 3px 0 0 #17B26A; }
html[data-theme="dark"] .ivcard { background: linear-gradient(180deg, #111C33, #0F182B); }
html[data-theme="dark"] .ivcard.warn b { color: #FFC24D; } html[data-theme="dark"] .ivcard.on { background: rgba(91, 140, 255, .1); }
.toolbar .tb-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }

/* ===== v16 · Relatório mensal da assessoria ===== */
.rm-meter { padding: 9px 0 11px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.rm-meter:last-child { border-bottom: 0; }
.rm-bar { height: 8px; border-radius: 99px; background: var(--soft-2); margin-top: 7px; overflow: hidden; }
.rm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--blue); }
.ok-t { color: var(--ok); font-weight: 700; }
.rm-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.rm-facts div { background: var(--soft); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.rm-facts b { font-size: 20px; color: var(--ink); } .rm-facts span { font-size: 11.5px; color: var(--muted); }
.rm-facts .bad b { color: var(--danger); }
.rm-item { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 6px 0; color: var(--text); }
.rm-item svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.rm-item.t-danger svg { color: var(--danger); } .rm-item.t-warn svg { color: #F79009; } .rm-item.t-info svg { color: var(--blue); } .rm-item.t-muted { color: var(--muted); } .rm-item.t-muted svg { color: var(--faint); }
.rm-auto { background: var(--soft); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text); }
.rm-auto p { margin: 4px 0; }
.rm-ver { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.rm-viewer { height: 72vh; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #525659; }
.rm-viewer iframe { width: 100%; height: 100%; border: 0; }
.icon-btn.msg-ic { position: relative; }
.icon-btn.msg-ic.is-pend::after, .icon-btn.msg-ic.is-sent::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--surface); }
.icon-btn.msg-ic.is-pend::after { background: var(--blue); }
.icon-btn.msg-ic.is-sent::after { background: #17B26A; }

/* ===== v20 · Integrações ===== */
.int-main { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.int-main > .int-head { grid-column: 1 / -1; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.int-head { display: flex; align-items: center; gap: 14px; }
.int-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.int-t h3 { margin: 0; font-size: 16px; }
.int-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.int-logo .i { width: 22px; height: 22px; }
.int-logo.gd { background: var(--blue); color: #fff; }
.int-logo.ml { background: #FFE600; color: #2D3277; }
.int-logo.wa { background: #25D366; color: #fff; }
.int-logo.tg { background: #229ED9; color: #fff; }
.int-body { padding: 18px 22px 22px; }
.int-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.int-facts span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.int-facts b { font-size: 14px; font-weight: 600; }
.int-how { padding: 18px 22px 22px; background: var(--soft); border-left: 1px solid var(--line); }
.int-how h4 { margin: 0 0 10px; font-size: 14px; }
.int-how ol { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }
.int-how li { margin-bottom: 6px; }
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.int-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.int-card p { margin: 0; line-height: 1.5; }
.int-card .flex { margin-top: auto; padding-top: 4px; }
.sy-tg { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.sy-tg input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); }
.sy-tg > span { display: flex; flex-direction: column; font-size: 13.5px; }
.sy-hero { display: flex; gap: 14px; align-items: flex-start; }
.sy-hero > .i { width: 34px; height: 34px; color: var(--blue); flex: none; }
.sy-hero p { margin: 0 0 8px; }
.sy-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sy-cmp > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.link-btn { background: none; border: 0; padding: 0 0 0 6px; color: var(--blue); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; }
html[data-theme=dark] .int-how { background: var(--soft-2); }
@media (max-width: 1100px) { .int-main { grid-template-columns: 1fr; } .int-how { border-left: 0; border-top: 1px solid var(--line); } .int-grid { grid-template-columns: 1fr; } }
.int-grid > .card { margin-top: 0; }
.modal.mid { max-width: 720px; }
.g-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1a4ed8; font: 700 12px/1 Arial, sans-serif; }
.btn:not(.primary) .g-mark { background: var(--blue); color: #fff; }