:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --border: #e3e6ea;
  --ink: #1d1f22;
  --ink-2: #52575e;
  --ink-3: #868c94;
  --brand: #3a78a8;        /* azul do capacete */
  --brand-ink: #255a85;
  --brand-soft: #e3eef7;
  --charcoal: #262626;     /* preto do logo */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --neutral: #b9bdc3;
  --good: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b;
  --seq-0: #eef4fc; --seq-1: #b7d3f6; --seq-2: #6da7ec; --seq-3: #2a78d6; --seq-4: #1c5cab; --seq-5: #0d366b;
  --grid: #eceef1;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111213; --surface: #1a1b1d; --surface-2: #222326; --border: #2e3034;
    --ink: #f4f4f5; --ink-2: #c3c5c9; --ink-3: #8b8f96;
    --brand: #5b9bd0; --brand-ink: #8fbde3; --brand-soft: #1d2b38; --charcoal: #f4f4f5;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --neutral: #5d6168;
    --seq-0: #1e2733; --seq-1: #104281; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #9ec5f4;
    --grid: #26282b;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111213; --surface: #1a1b1d; --surface-2: #222326; --border: #2e3034;
  --ink: #f4f4f5; --ink-2: #c3c5c9; --ink-3: #8b8f96;
  --brand: #5b9bd0; --brand-ink: #8fbde3; --brand-soft: #1d2b38; --charcoal: #f4f4f5;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --neutral: #5d6168;
  --seq-0: #1e2733; --seq-1: #104281; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #9ec5f4;
  --grid: #26282b;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- topo ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--charcoal); }
.brand img { height: 52px; width: auto; display: block; }
.wordmark { font-family: "Saira", sans-serif; font-style: italic; font-weight: 800; line-height: .95; text-transform: uppercase; }
.wordmark .l1 { font-size: 20px; letter-spacing: .5px; }
.wordmark .l2 {
  display: inline-block; margin-top: 3px; padding: 1px 10px 2px; font-size: 12px; letter-spacing: 2px;
  background: var(--charcoal); color: var(--surface); transform: skewX(-12deg);
}
.wordmark .l2 span { display: inline-block; transform: skewX(12deg); }
.topbar .title { margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--border); }
.topbar .title h1 { margin: 0; font-size: 16px; font-weight: 650; }
.topbar .title p { margin: 0; font-size: 12px; color: var(--ink-3); }
.topbar .spacer { flex: 1; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- filtros ---------- */
.filters {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.presets { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.presets button { border: 0; background: transparent; padding: 6px 11px; cursor: pointer; font-size: 13px; border-right: 1px solid var(--border); }
.presets button:last-child { border-right: 0; }
.presets button.on { background: var(--brand); color: #fff; }
.sel-periodo { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; min-width: 150px; }
.daterange { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); }
.daterange input { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; background: var(--surface); }
.ms { position: relative; }
.ms > button {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 6px 10px; cursor: pointer; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
}
.ms > button.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.ms > button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.ms-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 300px; max-height: 380px;
  display: none; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
.ms.open .ms-pop { display: flex; }
.ms-pop input[type=search] { margin: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.ms-pop .ms-actions { display: flex; gap: 8px; padding: 0 10px 6px; font-size: 12px; }
.ms-pop .ms-actions a { color: var(--brand-ink); cursor: pointer; }
.ms-list { overflow: auto; padding: 0 4px 6px; }
.ms-list label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-list label:hover { background: var(--surface-2); }
.ms-list label .cnt { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.ms-list input { accent-color: var(--brand); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 24px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-weight: 550;
}
.chip button { border: 0; background: transparent; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; line-height: 1; color: inherit; }
.chip button:hover { background: rgba(0,0,0,.08); }
.chip.clear { background: transparent; color: var(--ink-2); text-decoration: underline; cursor: pointer; padding-right: 10px; }

/* ---------- abas ---------- */
.tabs { display: flex; gap: 4px; padding: 12px 24px 0; overflow-x: auto; }
.tabs button {
  border: 0; background: transparent; padding: 9px 14px; cursor: pointer; font-weight: 600; color: var(--ink-2);
  border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
main { padding: 16px 24px 48px; }
section[data-tab] { display: none; }
section[data-tab].on { display: block; }

/* ---------- grid / cards ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; }
.c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
@media (max-width: 1100px) { .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.card h3 { margin: 0; font-size: 14px; font-weight: 650; }
.card .sub { margin: 2px 0 10px; color: var(--ink-3); font-size: 12px; }
.card-head { display: flex; align-items: flex-start; gap: 10px; }
.card-head > div:first-child { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.seg button.on { background: var(--surface-2); color: var(--brand-ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--brand); }
.chart { width: 100%; height: 300px; }
.chart.tall { height: 380px; }
.chart.short { height: 240px; }

/* KPIs */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .lab { font-size: 12px; color: var(--ink-2); font-weight: 550; display: flex; gap: 6px; align-items: center; }
.kpi .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.kpi .delta { font-size: 12px; margin-top: 2px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kpi .delta b { font-weight: 650; }
.kpi .delta .up-good, .kpi .delta .down-good { color: var(--good); }
.kpi .delta .up-bad, .kpi .delta .down-bad { color: var(--crit); }
.kpi .hint { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* insights */
.insights { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ins { display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.ins .ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; }
.ins.crit .ic { background: var(--crit); } .ins.warn .ic { background: var(--serious); } .ins.info .ic { background: var(--brand); } .ins.good .ic { background: var(--good); }
.ins .tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--ink-3); }
.ins p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.ins p em { font-style: normal; color: var(--ink-2); }

/* tabelas */
.tbl-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--border); border-radius: 10px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; background: var(--surface-2); text-align: right; font-weight: 650; font-size: 12px; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl th.sorted::after { content: " ▾"; color: var(--brand); }
.tbl th.sorted.asc::after { content: " ▴"; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.sel { background: var(--brand-soft); }
.tbl .bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--s1); vertical-align: middle; margin-right: 6px; }
.tbl .name { max-width: 280px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.pill.bad { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.pill.mid { background: color-mix(in srgb, var(--serious) 20%, transparent); color: color-mix(in srgb, var(--serious) 70%, var(--ink)); }
.pill.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tbl-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.tbl-tools input[type=search] { flex: 1; min-width: 200px; max-width: 340px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.muted { color: var(--ink-3); font-size: 12px; }

/* configuração SLA */
dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); padding: 0; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog .dh { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
dialog .dh h2 { margin: 0; font-size: 16px; flex: 1; }
dialog .db { padding: 16px 20px; display: grid; gap: 14px; }
dialog .df { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
dialog label.opt { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
dialog label.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
dialog .row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
dialog .row input[type=number] { width: 70px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.btn-primary { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 650; cursor: pointer; }

.empty { padding: 40px; text-align: center; color: var(--ink-3); }
footer { padding: 0 24px 24px; color: var(--ink-3); font-size: 12px; }

@media (max-width: 720px) {
  .topbar, .filters, .tabs, main, .chips, footer { padding-left: 16px; padding-right: 16px; }
  .topbar .title { display: none; }
  .filters { position: static; }
}

.tbl .pdf-link { color: var(--brand-ink); font-weight: 650; text-decoration: none; }
.tbl .pdf-link:hover { text-decoration: underline; }

/* central de relatórios */
dialog.dlg-rel { width: min(720px, calc(100vw - 32px)); }
.dlg-rel .db { gap: 16px; }
.rel-row { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: start; }
.rel-lab { font-weight: 650; font-size: 13px; padding-top: 6px; }
.rel-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.rel-tools { display: flex; gap: 10px; align-items: center; width: 100%; font-size: 12.5px; }
.rel-tools input { flex: 1; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.rel-tools a { color: var(--brand-ink); cursor: pointer; white-space: nowrap; }
.rel-lista { width: 100%; max-height: 230px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.rel-chks { gap: 18px; font-size: 13px; }
.rel-chks label { display: inline-flex; gap: 6px; align-items: center; }
.rel-chks input, .rel-lista input { accent-color: var(--brand); }
.rel-aviso { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 18%, transparent); font-size: 13px; }
.rel-status { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); display: grid; gap: 10px; }
.rel-barra { height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.rel-barra div { height: 100%; width: 0; background: var(--brand); transition: width .4s; }
.rel-barra div.err { background: var(--crit); }
.rel-st-row { display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.err-t { color: var(--crit); }
a.btn-primary { text-decoration: none; display: inline-block; }
.dlg-rel .df { align-items: center; }
.rel-nota { flex: 1; font-size: 11.5px; }
@media (max-width: 600px) { .rel-row { grid-template-columns: 1fr; } }

/* login */
body.bloqueado > *:not(.auth):not(script) { display: none !important; }
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.auth[hidden] { display: none; }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px rgba(0,0,0,.08); display: grid; gap: 14px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; color: var(--charcoal); }
.auth-brand img { height: 56px; }
.auth h2 { margin: 0; font-size: 18px; }
.auth-sub { margin: -6px 0 0; color: var(--ink-2); font-size: 13px; }
.auth form { display: grid; gap: 12px; }
.auth label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.auth input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); font-size: 15px; }
.auth input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.auth #aCod { letter-spacing: 6px; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.auth .btn-primary { padding: 11px; font-size: 15px; }
.auth-link { color: var(--brand-ink); font-size: 13px; cursor: pointer; justify-self: center; }
.auth-msg { padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.auth-msg.erro { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.auth-msg.ok { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.auth-msg.info { background: var(--brand-soft); color: var(--brand-ink); }
.auth-passos { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.auth-qr { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 10px; border: 1px solid var(--border); }
.auth-qr img { width: 190px; height: 190px; }
.auth-chave { font-size: 12px; color: var(--ink-2); }
.auth-chave code { display: block; margin-top: 6px; padding: 8px; background: var(--surface-2); border-radius: 6px; word-break: break-all; font-size: 13px; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 12px; text-align: right; }
.userbox[hidden] { display: none; }
.userbox .u-nome { font-weight: 650; color: var(--ink); }
.userbox .u-papel { color: var(--ink-3); }

/* ===== estrutura: barra lateral + conteúdo ===== */
.app { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; flex: 0 0 236px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 40; }
.sidebar .brand { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.sidebar .brand img { height: 44px; }
.side-nav { flex: 1; overflow: auto; padding: 12px 10px; display: grid; align-content: start; gap: 2px; }
.side-nav a, .side-pai { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; border: 0; background: none; width: 100%; cursor: pointer; text-align: left; }
.side-nav svg { width: 19px; height: 19px; flex: none; }
.side-nav a:hover, .side-pai:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.on { background: var(--brand); color: #fff; }
.side-pai .seta { margin-left: auto; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .15s; opacity: .7; }
.side-grupo.aberto .side-pai .seta { transform: rotate(45deg); }
.side-filhos { display: none; padding: 2px 0 4px 30px; }
.side-grupo.aberto .side-filhos { display: grid; gap: 2px; }
.side-filhos a { font-weight: 550; font-size: 13.5px; padding: 8px 12px; }
.side-filhos a.on { background: var(--brand-soft); color: var(--brand-ink); }
.side-rodape { padding: 12px 18px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--border); }
.content { flex: 1; min-width: 0; }
.topbar .title { margin-left: 0; padding-left: 0; border-left: 0; }
.menu-btn { display: none; }
.side-fundo { display: none; }
.view[hidden] { display: none !important; }
@media (max-width: 980px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body.menu-aberto .sidebar { transform: none; }
  body.menu-aberto .side-fundo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
  .menu-btn { display: inline-flex; }
  .topbar .title { display: block; }
}

/* ===== ocorrências ===== */
.oc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.oc-card { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; font: inherit; color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); }
.oc-card.neutro { cursor: default; }
.oc-card b { display: block; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.oc-card .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--neutral); flex: none; font-size: 14px; }
.oc-card.pendente .ic { background: var(--crit); } .oc-card.em_andamento .ic { background: var(--warn); } .oc-card.finalizada .ic { background: var(--good); } .oc-card.neutro .ic { background: var(--brand); }
.oc-card.on { outline: 2px solid var(--brand); }
.oc-sel { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--surface); }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.st.pendente { background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); }
.st.em_andamento { background: color-mix(in srgb, var(--warn) 22%, transparent); color: color-mix(in srgb, var(--warn) 55%, var(--ink)); }
.st.finalizada { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
#ocTabela td { white-space: nowrap; }
dialog.dlg-oc { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.dlg-oc .dh { gap: 10px; }
.oc-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; padding: 16px 20px; overflow: auto; max-height: calc(100vh - 170px); }
@media (max-width: 900px) { .oc-form { grid-template-columns: minmax(0, 1fr); } }
.oc-col { display: grid; gap: 11px; align-content: start; }
.oc-form label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.oc-form input, .oc-form select, .oc-form textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); width: 100%; }
.oc-form textarea { resize: vertical; }
.oc-os { display: flex; gap: 6px; }
.oc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-osinfo { font-size: 12.5px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 9px; padding: 10px; }
.oc-osinfo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.oc-osinfo dt { color: var(--ink-3); } .oc-osinfo dd { margin: 0; font-weight: 600; }
.oc-aviso { background: color-mix(in srgb, var(--warn) 20%, transparent); border-radius: 7px; padding: 6px 8px; margin-bottom: 8px; }
.oc-aviso a { color: var(--brand-ink); font-weight: 700; cursor: pointer; }
.oc-versao { border: 1px solid var(--border); border-radius: 9px; padding: 8px; display: grid; gap: 6px; }
.oc-vh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.oc-vh select { width: auto; padding: 4px 8px; font-size: 12px; margin-left: auto; }
.oc-versao textarea { border: 0; background: transparent; padding: 2px; }
.oc-hist { font-size: 12px; display: grid; gap: 4px; }
.oc-hh { font-weight: 700; color: var(--ink-2); margin-top: 6px; }
.oc-he { padding: 6px 8px; background: var(--surface-2); border-radius: 7px; }
.oc-he span { display: block; color: var(--ink-3); font-size: 11px; }

.only-dash[hidden] { display: none !important; }

/* ocorrências v2: filtros, cores por motivo, recorrência, alertas */
.oc-limpar { color: var(--brand-ink); font-size: 13px; cursor: pointer; }
input.oc-sel { width: 180px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); white-space: nowrap; }
.mchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.rec { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); vertical-align: middle; }
.rec.alto { background: var(--crit); color: #fff; border-color: transparent; }
.oc-alertas { margin-bottom: 16px; border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); background: color-mix(in srgb, var(--crit) 5%, var(--surface)); }
.oc-al-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.oc-al { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.oc-al:hover { background: var(--surface-2); }
.oc-al .muted { margin-left: auto; white-space: nowrap; }
.oc-recorr { display: grid; gap: 6px; font-size: 12.5px; }
.oc-recorr div { padding: 7px 9px; border-radius: 8px; }
.oc-recorr .ok { background: var(--surface-2); color: var(--ink-3); }
.oc-recorr .medio { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.oc-recorr .alto { background: color-mix(in srgb, var(--crit) 14%, transparent); }
.oc-recorr a { color: var(--brand-ink); cursor: pointer; font-weight: 650; }
.sino-wrap { position: relative; }
.sino { position: relative; }
.sino[hidden] { display: none; }
.sino.tem { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); }
.sino .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.sino .badge[hidden] { display: none; }
.sino-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 24px)); max-height: min(72vh, 600px); overflow: auto; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.sino-pop[hidden] { display: none; }
.sp-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 13px; }
.sp-h a { color: var(--brand-ink); cursor: pointer; font-size: 12px; }
.sp-i { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.sp-i:hover { background: var(--surface-2); }
.sp-i span:not(.rec) { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.sp-i.lido { opacity: .6; }
.sp-i > div { flex: 1; min-width: 0; }
.al-x { flex: none; align-self: flex-start; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; }
.al-x:hover { background: var(--surface-2); color: var(--crit); }
.oc-al-lista { max-height: 320px; overflow: auto; }
.oc-al > span:nth-child(2) { flex: 1; min-width: 0; }
.sp-vazio { padding: 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; max-width: 380px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--crit); box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 13.5px; cursor: pointer; transition: opacity .5s, transform .5s; }
.toast.sai { opacity: 0; transform: translateY(10px); }

/* anexos */
.oc-anexos { display: grid; gap: 6px; }
.oc-drop { display: grid; gap: 2px; text-align: center; padding: 12px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer; color: var(--ink-2); background: var(--surface-2); }
.oc-drop b { color: var(--brand-ink); font-size: 13px; }
.oc-drop span { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.oc-drop.sobre, .oc-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.anx-lista { display: grid; gap: 6px; }
.anx { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; }
.anx-ic { font-size: 20px; width: 40px; text-align: center; }
.anx-th { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.anx-n { flex: 1; min-width: 0; overflow: hidden; }
.anx-n a { color: var(--brand-ink); cursor: pointer; font-weight: 600; word-break: break-all; }
.anx-n small { display: block; color: var(--ink-3); font-size: 11px; }
.anx-x { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 4px; }
.anx-x:hover { color: var(--crit); }
.clipe { font-size: 11px; color: var(--ink-3); margin-left: 4px; }

/* ocorrências: rankings em tabela e os dois gráficos sempre meio a meio */
.oc-rank { max-height: 420px; }
.oc-rank td .mchip { margin-right: 4px; }
.oc-rank tbody tr.sel { background: var(--brand-soft); }
@media (max-width: 1100px) { .grid > .card.meia { grid-column: span 6; } }
@media (max-width: 700px) { .grid > .card.meia { grid-column: span 12; } }

/* formulário: colunas com largura fixa (nomes longos não empurram o layout) */
.oc-col, .anx-lista, .anx { min-width: 0; }
.anx-n a, .anx-n small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.anx-n a { max-width: 100%; }

/* ações */
.oc-acoes { display: grid; gap: 8px; }
.ac-op { display: grid !important; grid-template-columns: auto 1fr 92px; align-items: center; gap: 8px !important; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-weight: 600; color: var(--ink) !important; cursor: pointer; }
.ac-op:has(input[type=checkbox]:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ac-op input[type=checkbox] { width: auto; accent-color: var(--brand); }
.ac-op small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; }
.ac-op input:not([type=checkbox]) { padding: 6px 8px; }
.ac-parc { display: grid; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; margin-top: -4px; }
.ac-parc[hidden], .ac-parc [hidden] { display: none; }
.ac-parc-sw { display: flex !important; align-items: center; gap: 8px; font-weight: 600; color: var(--ink) !important; cursor: pointer; }
.ac-parc-sw input { width: auto; accent-color: var(--brand); }
.ac-parc-sw small { color: var(--ink-3); font-weight: 500; font-size: 11px; }
.ac-parc-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.ac-parc-lista { display: grid; gap: 4px; margin-top: 6px; }
.ac-parc-it { display: grid; grid-template-columns: 34px 1fr 84px; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.ac-parc-it input { padding: 5px 7px; font-size: 12.5px; }
.ac-parc-soma { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.ac-parc-soma.erro { color: var(--crit); font-weight: 600; }
.ac-bloq { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; }
.ac-bloq:has(input:checked), .ac-bloq.ativo { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 8%, transparent); }
.ac-bloq-it { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ac-bloq-it .icon-btn { margin-left: auto; font-size: 11.5px; padding: 3px 8px; }
.kb-bloq { color: var(--crit); }
.oc-bl-todos { display: flex !important; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3) !important; font-weight: 500; white-space: nowrap; }
.oc-bl-todos input { width: auto; }
.ac-msg { display: grid; gap: 6px; }
/* usuários e cargos */
.us-chk { display: flex !important; align-items: center; gap: 8px; font-weight: 600; }
.us-chk input { width: auto; accent-color: var(--brand); }
.us-centrais { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.us-centrais label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.us-centrais input { width: auto; accent-color: var(--brand); }
.us-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.us-acoes[hidden], #usCentraisL[hidden], #usAutL[hidden], #usAtivoL[hidden] { display: none !important; }
.us-cargos td, .us-cargos th { text-align: center; }
.us-cargos td:first-child, .us-cargos th:first-child { text-align: left; }
.us-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); }
.us-tag.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.us-tag.pend { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); background: color-mix(in srgb, var(--warn) 20%, transparent); }
.us-tag.off { color: var(--ink-3); }
/* importar planilhas */
.im-drop { padding: 28px 12px; }
.im-drop.sobre { border-color: var(--brand); background: var(--brand-soft); }
.im-lista { display: grid; gap: 8px; margin-top: 12px; }
.im-it { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.im-it small { color: var(--ink-3); }
.im-it .im-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.im-it .im-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.im-it.ok .im-bar i { background: var(--good); }
.im-it.erro { border-color: var(--crit); }
.im-it.erro small { color: var(--crit); }
/* autocompletar (ui.js) */
.ac-pop { position: fixed; z-index: 2000; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 4px; font-size: 13px; }
.ac-pop div { padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-pop div:hover, .ac-pop div.on { background: var(--brand-soft); }
.ac-msg .icon-btn { justify-content: flex-start; font-size: 12.5px; }
.ac-lista { display: grid; gap: 5px; }
.ac-it { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 7px 9px; border-radius: 8px; font-size: 12.5px; background: var(--surface-2); }
.ac-it small { display: block; color: var(--ink-3); font-size: 11px; }
.ac-it.solicitada { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.ac-it.executada { background: color-mix(in srgb, var(--good) 12%, transparent); }
.ac-it.cancelada { opacity: .55; text-decoration: line-through; }
.ac-it .icon-btn { font-size: 11.5px; padding: 4px 8px; white-space: nowrap; }
.ac-mini { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.ac-mini.solicitada { background: color-mix(in srgb, var(--warn) 22%, transparent); color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.ac-mini.executada { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }

/* financeiro */
.side-nav a, .side-pai { position: relative; }
.side-sel { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.side-sel[hidden] { display: none; }
.side-pai .side-sel { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); margin: 0; } /* selo flutua: a seta fica sempre na mesma posição */
.side-grupo[hidden], .side-nav a[hidden] { display: none; }
.side-grupo.aberto .side-pai .side-sel { display: none; } /* aberto: o selo aparece no submenu */
.oc-card small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.fin-tbl td { vertical-align: top; }
.fin-tbl td, .fin-tbl th { white-space: nowrap; }
.fin-sub { display: block; color: var(--ink-3); font-size: 11px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.fin-tk { color: var(--brand-ink); font-weight: 700; cursor: pointer; }
.fin-ir { color: var(--brand-ink); font-weight: 650; cursor: pointer; margin-left: 8px; text-decoration: underline; }
.fin-tipo { font-weight: 650; }
.fin-tipo.reembolso_loja { color: var(--s1); }
.fin-tipo.cobranca_entregador { color: var(--s2); }
.fst { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); }
.fst.solicitada { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.fst.autorizada { background: color-mix(in srgb, var(--warn) 22%, transparent); color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.fst.executada { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.fst.recusada, .fst.cancelada { color: var(--ink-3); }
.fst.agendada { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); }
.fin-bts { display: flex; gap: 6px; }
.fin-bts .btn-primary, .fin-bts .icon-btn { padding: 6px 12px; font-size: 12.5px; }
.fin-nota { margin-top: 12px; }
.ac-op.travada { opacity: .75; cursor: not-allowed; }
.ac-it.autorizada { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.ac-it.recusada { background: color-mix(in srgb, var(--crit) 10%, transparent); }
.ac-mini.autorizada { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.ac-mini.recusada { opacity: .6; text-decoration: line-through; }
.sp-fin { margin: 2px 2px 6px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--crit) 12%, transparent); cursor: pointer; font-size: 13px; }
.sp-fin span { display: block; color: var(--ink-2); font-size: 11.5px; margin-top: 2px; }
.toast.fin { border-left-color: var(--good); }
.toast.ok { border-left-color: var(--good); }
.toast-acao { margin-top: 8px; font-weight: 700; color: var(--brand-ink); }

/* botões escondidos ficam escondidos mesmo com display próprio */
.icon-btn[hidden], .btn-primary[hidden], a.btn-primary[hidden] { display: none !important; }

/* cadastros */
.cad-wrap { max-height: 640px; }
.cad-wa { text-decoration: none; margin-left: 4px; }
.cad-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.cad-st.s-A { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.cad-st.s-E, .cad-st.s-F { background: color-mix(in srgb, var(--warn) 22%, transparent); color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.cad-st.s-S, .cad-st.s-R { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }
.cad-ult.paradas { color: var(--serious); font-weight: 650; }
.cad-ult.nunca { color: var(--ink-3); }
.seg button small { color: var(--ink-3); font-weight: 600; }
.cad-centrais { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); margin-bottom: 12px; }
.cc-h { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.cc-h > div { flex: 1; } .cc-h h3 { margin: 0; } .cc-h p { margin: 2px 0 0; }
.cc-cod { width: 52px; height: 52px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.cc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-kpis div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; color: var(--ink-2); }
.cc-kpis b { display: block; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-kpis small { color: var(--ink-3); }
/* em construção */
.construcao { max-width: 720px; margin: 30px auto; text-align: center; padding: 40px 32px; }
.construcao .cs-ic { font-size: 40px; }
.construcao h2 { margin: 8px 0 4px; }
.construcao ul { text-align: left; display: grid; gap: 8px; margin: 18px auto; max-width: 560px; padding-left: 20px; }

/* contas a pagar / receber */
.cx-sep { width: 1px; height: 26px; background: var(--border); }
.cx-abas button { font-weight: 650; }
.cx-tbl td { white-space: nowrap; }
.cx-parc { font-size: 11px; color: var(--ink-3); font-weight: 650; }
.cx-orig { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.cx-sit { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.cx-sit.aberto { background: color-mix(in srgb, var(--warn) 20%, transparent); color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.cx-sit.vencido { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.cx-sit.pago { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.cx-sit.cancelado { color: var(--ink-3); text-decoration: line-through; }
tr.sit-cancelado td { opacity: .55; }
tr.inativo td { opacity: .6; }
dialog.dlg-lanc { width: min(760px, calc(100vw - 24px)); }
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lc-grid label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lc-grid label[hidden] { display: none; }
.lc-grid .lc-2 { grid-column: span 2; }
.lc-grid input, .lc-grid select, .lc-grid textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); width: 100%; }
.lc-chk { display: flex !important; align-items: center; gap: 8px; }
.lc-chk input { width: auto !important; }
@media (max-width: 640px) { .lc-grid { grid-template-columns: 1fr; } .lc-grid .lc-2 { grid-column: span 1; } }
dialog.dlg-pix { width: min(560px, calc(100vw - 24px)); }
.px-topo { display: flex; gap: 16px; align-items: center; }
.px-topo > div:last-child { display: grid; gap: 3px; font-size: 13px; }
.px-topo b { font-size: 24px; }
.px-qr { width: 176px; height: 176px; padding: 4px; background: #fff; border-radius: 10px; border: 1px solid var(--border); flex: none; display: grid; place-items: center; }
.px-cod { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.px-cod textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); word-break: break-all; }
.px-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.px-bts a.icon-btn { text-decoration: none; color: inherit; }
.px-nota { font-size: 12px; margin: 0; }

/* DRE */
.dre-wrap { max-height: none; }
table.dre th, table.dre td { white-space: nowrap; font-size: 12.5px; }
table.dre td:first-child { min-width: 260px; }
.dre-grupo td { font-weight: 650; cursor: pointer; background: var(--surface-2); }
.dre-grupo:hover td { background: var(--brand-soft); }
.dre-seta { display: inline-block; width: 16px; color: var(--ink-3); }
.dre-cat { padding-left: 22px; color: var(--ink-2); }
.dre-total td { font-weight: 700; border-top: 1.5px solid var(--border); }
.dre-total.forte td { background: var(--brand-soft); font-size: 13.5px; }
.dre-ref td { color: var(--ink-3); font-style: italic; font-size: 12px; }
table.dre .neg { color: var(--crit); }
table.dre .zero { color: var(--ink-3); }

.cad-dias.medio { color: var(--serious); font-weight: 650; }
.cad-dias.alto { color: var(--crit); font-weight: 700; }
.cad-ult.parada { color: var(--serious); font-weight: 650; }
.cad-veic { font-weight: 650; white-space: nowrap; }

/* incentivos: produtos */
.pr-nota { margin: 0 0 12px; }
.pr-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .1s; }
.pr-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.pr-card.inativo { opacity: .55; }
.pr-img { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; font-size: 42px; }
.pr-img img { width: 100%; height: 100%; object-fit: cover; }
.pr-dest, .pr-mkt { position: absolute; top: 8px; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.pr-dest { left: 8px; background: var(--warn); color: #000; }
.pr-mkt { right: 8px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); }
.pr-mkt.m-mercadolivre { background: #ffe600; color: #2d3277; border-color: transparent; }
.pr-mkt.m-shopee { background: #ee4d2d; color: #fff; border-color: transparent; }
.pr-info { padding: 10px 12px 12px; display: grid; gap: 3px; }
.pr-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-info small { color: var(--ink-3); font-size: 11.5px; }
.pr-preco { font-size: 17px; font-weight: 800; color: var(--ink); }
.pr-preco span { font-size: 12px; font-weight: 600; color: var(--brand-ink); margin-left: 6px; }
.pr-rod { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }
.pr-rod a { color: var(--brand-ink); font-weight: 650; text-decoration: none; }
.pr-vazio { grid-column: 1 / -1; padding: 40px; display: grid; gap: 14px; justify-items: center; }
.pd-foto { display: flex; gap: 12px; align-items: center; }
.pd-foto img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.pd-foto img[hidden] { display: none; }
.pd-foto > div { display: grid; gap: 6px; flex: 1; }

/* incentivos: pontuação */
.pt-regra { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-regra label { display: grid; gap: 3px; font-size: 13px; font-weight: 650; }
.pt-regra small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.pt-regra input { font: inherit; font-size: 18px; font-weight: 700; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--ink); }
.pt-regra input[type=date] { font-size: 14px; font-weight: 600; }
.pt-ex { margin: 12px 0; padding: 10px 12px; border-radius: 9px; background: var(--brand-soft); font-size: 13px; }
.pt-bts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pt-hist { margin-top: 14px; display: grid; gap: 4px; font-size: 12.5px; }
.pt-hist > div { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; padding: 6px 8px; border-radius: 7px; background: var(--surface-2); }
.pt-hist small { grid-column: 2; color: var(--ink-3); }
.pt-aj td { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.pt-ajform { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto; gap: 8px; margin-bottom: 12px; }
.pt-ajform input { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
@media (max-width: 900px) { .pt-ajform, .pt-regra { grid-template-columns: 1fr; } }
.neg { color: var(--crit); } .pos { color: var(--good); }

/* incentivos: ranking */
.rk-tbl td { white-space: nowrap; }
.rk-pos { font-size: 16px; font-weight: 800; text-align: center !important; width: 44px; }
.rk-top td { background: color-mix(in srgb, var(--warn) 7%, transparent); }

/* ===== operação: ao vivo + kanban ===== */
.side-grupo.aberto .side-pai .side-crit:not([hidden]) { display: inline-grid; }
.av-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.av-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral); flex: none; }
.av-dot.ok { background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: av-pulso 2s infinite; }
.av-dot.err { background: var(--crit); }
@keyframes av-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.av-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.av-k { cursor: default; }
.av-k > div { display: grid; gap: 1px; }
.av-k small { font-size: 12px; color: var(--ink-3); }
.av-k b { font-size: 26px; color: var(--ink); line-height: 1.1; }
.av-k .muted { font-size: 11.5px; }
.av-k.crit { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 7%, var(--surface)); }
.av-k.crit b { color: var(--crit); }
.av-ic { font-size: 22px; }
.av-tbl td { white-space: nowrap; font-size: 13px; }
.av-tbl td b { font-weight: 700; color: var(--ink-2); }
.av-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--neutral); }
.av-chip.c-prog { background: var(--s7); } .av-chip.c-aguard { background: var(--crit); } .av-chip.c-cam { background: var(--s4); color: #000; }
.av-chip.c-ent { background: var(--s1); } .av-chip.c-fim { background: var(--good); } .av-chip.c-perd { background: var(--neutral); color: var(--ink); }
.av-tbl tr.av-fim td, .av-tbl tr.av-perd td { color: var(--ink-3); }
td.av-warn { color: var(--serious); font-weight: 650; } td.av-crit { color: var(--crit); font-weight: 750; }
.av-nota { margin: 8px 4px 0; font-size: 12px; }

.kb-resumo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; }
.kb-alerta { padding: 10px 16px; border-radius: 12px; font-size: 15px; border: 1px solid var(--border); background: var(--surface); }
.kb-alerta b { font-size: 22px; margin-right: 4px; }
.kb-alerta span { color: var(--ink-3); font-size: 13px; }
.kb-alerta.crit { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 9%, var(--surface)); } .kb-alerta.crit > b { color: var(--crit); }
.kb-alerta.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.kb-alerta.ok > b { color: var(--good); }
.kb-mini { font-size: 13px; color: var(--ink-2); }
.kb-board { display: flex; gap: 8px; align-items: flex-start; overflow: hidden; }
.kb-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; border-top: 4px solid var(--cor); display: flex; flex-direction: column; max-height: calc(100vh - 230px); flex: 1 1 0; min-width: 0; transition: flex-basis .15s; }
.kb-col header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px; padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--border); }
.kb-tit { flex: 1; min-width: 0; }
.kb-rec { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; flex: none; }
.kb-rec:hover { border-color: var(--brand); color: var(--brand-ink); }
.kb-col.min { flex: 0 0 48px; min-width: 48px; cursor: pointer; }
.kb-col.min header { display: flex; flex-direction: column; align-items: center; border-bottom: 0; padding: 8px 4px; gap: 10px; }
.kb-col.min .kb-tit small, .kb-col.min .kb-n small, .kb-col.min .kb-lista { display: none; }
.kb-col.min .kb-tit h3 { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 13px; }
.kb-col.min .kb-n { order: -1; text-align: center; }
.kb-col.min .kb-n b { font-size: 20px; }
.kb-col h3 { margin: 0; font-size: 13px; line-height: 1.2; }
.kb-col header small { color: var(--ink-3); font-size: 11px; }
.kb-n { text-align: right; display: grid; }
.kb-n b { font-size: 22px; line-height: 1; color: var(--cor); }
.kb-n small { white-space: nowrap; font-size: 10.5px; }
.kb-col { container-type: inline-size; }
@container (max-width: 250px) { .kb-tit small { display: none; } }
@container (max-width: 170px) { .kb-n small { display: none; } .kb-card .kb-c { display: none; } }
.kb-lista { overflow-y: auto; overflow-x: hidden; padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cor); border-radius: 8px; padding: 6px 8px; display: grid; gap: 2px; font-size: 12px; box-shadow: var(--shadow); min-width: 0; }
.kb-card > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.kb-card.crit { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit) 9%, var(--surface)); }
.kb-top { display: flex; align-items: center; gap: 5px; }
.kb-top b { flex: 1; min-width: 0; }
.kb-top b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-c { font-size: 10.5px; font-weight: 700; color: var(--ink-3); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; height: fit-content; }
.kb-sub { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-dest { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tempo { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; color: var(--ink-3); font-weight: 600; white-space: normal !important; }
.kb-card.warn .kb-tempo { color: var(--serious); } .kb-card.crit .kb-tempo { color: var(--crit); }
.kb-prog { color: var(--s1); }
.kb-st { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.kb-st.st-P { background: var(--crit); color: #fff; border-color: transparent; }
.kb-vazio { color: var(--ink-3); text-align: center; font-size: 12px; margin: 10px 0; }
@media (max-width: 760px) { .kb-board { flex-wrap: wrap; } .kb-col { flex: 1 1 calc(50% - 8px); max-height: 60vh; } .kb-col.min { flex: 0 0 48px; } }

/* detalhes da entrega (pop-up) */
.kb-card[data-id], tr.av-click { cursor: pointer; }
.kb-card[data-id]:hover { border-color: var(--brand); transform: translateY(-1px); }
tr.av-click:hover td { background: var(--brand-soft); }
dialog.dlg-ent { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.dlg-ent .dh { gap: 10px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
dialog.dlg-ent .dh h2 { flex: none; }
dialog.dlg-ent .db { gap: 12px; }
dialog.dlg-ent .df { position: sticky; bottom: 0; background: var(--surface); align-items: center; }
dialog.dlg-anu { width: min(520px, calc(100vw - 24px)); }
dialog.dlg-anu .db { gap: 10px; }
dialog.dlg-anu label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
dialog.dlg-anu textarea, dialog.dlg-anu input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.an-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.an-bts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; }
.an-bts button small { font-size: 11px; font-weight: 500; opacity: .85; }
.an-res { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--brand-soft); }
.an-res.erro { background: color-mix(in srgb, var(--crit) 15%, transparent); }
.an-hist { font-size: 12px; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 520px) { .an-bts { grid-template-columns: 1fr; } }
.de-resumo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.de-resumo b { font-size: 15px; } .de-resumo span { color: var(--ink-3); font-size: 13px; }
.de-resumo.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.de-resumo.crit { border-color: var(--crit); background: color-mix(in srgb, var(--crit) 9%, var(--surface)); } .de-resumo.crit b { color: var(--crit); }
.de-sec h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.de-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.de-dl { display: grid; grid-template-columns: 90px 1fr; gap: 5px 10px; margin: 0; font-size: 13px; }
.de-dl dt { color: var(--ink-3); } .de-dl dd { margin: 0; }
.de-dl3 { grid-template-columns: 110px 1fr 110px 1fr 110px 1fr; }
.de-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.de-tl li { display: flex; gap: 8px; align-items: flex-start; padding: 0 14px 10px 0; min-width: 120px; }
.de-tl li > div { display: grid; font-size: 12.5px; }
.de-tl li b { font-weight: 650; color: var(--ink-3); } .de-tl li span { color: var(--ink-3); }
.de-tl li.ok b { color: var(--ink); } .de-tl li.ok span { color: var(--ink-2); font-weight: 600; }
.de-tl small { color: var(--ink-3); font-weight: 500; }
.de-bol { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--neutral); margin-top: 3px; flex: none; background: var(--surface); }
.de-tl li.ok .de-bol { border-color: var(--good); background: var(--good); }
.de-tbl td, .de-tbl th { font-size: 12.5px; }
.de-ok { color: var(--good); }
.de-wa { margin-left: 6px; font-size: 12px; font-weight: 650; color: var(--good); text-decoration: none; white-space: nowrap; }
.de-nota { font-size: 12px; margin: 6px 0 0; }
.de-ocs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.de-ocs a { cursor: pointer; color: var(--brand-ink); font-weight: 600; }
@media (max-width: 700px) { .de-2 { grid-template-columns: 1fr; } .de-dl3 { grid-template-columns: 110px 1fr; } }
.de-pend { color: var(--serious); }
.de-tbl th, .de-tbl td { text-align: left !important; }
.kb-cli { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-canc { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.de-canc p { margin: 2px 0; font-size: 13px; }
.de-obs { color: var(--serious); }
.kb-x { flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; }
.de-desist { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--crit); background: color-mix(in srgb, var(--crit) 7%, var(--surface)); }
.de-desist h4 { color: var(--crit) !important; }
.de-desist p { margin: 2px 0; font-size: 13px; }
/* kanban: rola com mouse/toque, sem mostrar as barras de rolagem */
.kb-lista, .kb-board { scrollbar-width: none; -ms-overflow-style: none; }
.kb-lista::-webkit-scrollbar, .kb-board::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pr-mkt.m-amazon { background: #232f3e; color: #ff9900; border-color: transparent; }
.pr-mkt.m-tiao { background: var(--brand); color: #fff; border-color: transparent; }
/* produtos: em "Todos", Loja do Tião e Indicações em faixas separadas */
.pr-secao { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 2px 2px; border-bottom: 2px solid var(--border); margin-top: 6px; }
.pr-secao:first-child { margin-top: 0; }
.pr-secao h3 { margin: 0; font-size: 15px; }
.pr-secao h3 span { font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.pr-secao small { color: var(--ink-3); font-size: 12px; }
.pr-secao-vazia { grid-column: 1 / -1; margin: 4px 2px 10px; font-size: 13px; }

/* ===== incentivos: pontuação (layout revisado) ===== */
#view-pontuacao .card, .pt-grid > * { min-width: 0; }
.pt-vig { display: grid; grid-template-columns: minmax(150px, auto) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; margin-bottom: 16px; }
.pt-vig-tit { display: grid; align-content: center; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--brand); color: #fff; }
.pt-vig-tit b { font-size: 15px; } .pt-vig-tit span { font-size: 12.5px; opacity: .9; }
.pt-chip { display: grid; align-content: center; gap: 2px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.pt-chip b { font-size: 26px; line-height: 1.1; color: var(--brand-ink); }
.pt-chip span { font-size: 12.5px; color: var(--ink-2); }
.pt-regra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.pt-regra label { min-width: 0; grid-template-rows: auto auto 1fr; }
.pt-regra small { line-height: 1.3; min-height: 2.6em; }
.pt-regra input { width: 100%; box-sizing: border-box; min-width: 0; align-self: end; }
.pt-regra input:focus { outline: 2px solid var(--brand); outline-offset: 1px; background: var(--surface); }
.pt-ex { margin: 14px 0 12px; line-height: 1.5; }
.pt-hist { margin-top: 18px; gap: 8px; }
.pt-hist > b { font-size: 13px; }
.pt-hist .tbl td, .pt-hist .tbl th { font-size: 12.5px; padding: 6px 8px; }
.pt-hist tr.pt-atual td { background: var(--brand-soft); font-weight: 650; }
.pt-hist tr.pt-atual small { font-size: 10.5px; font-weight: 700; color: var(--brand-ink); margin-left: 4px; }
.pt-simobs { margin: 0 0 10px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
.pt-simobs.mudou { background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--ink); font-weight: 600; }
.pt-simwrap { overflow-x: auto; }
.pt-sim { min-width: 520px; }
.pt-sim th, .pt-sim td { white-space: nowrap; font-size: 12.5px; padding: 7px 8px; }
.pt-sim td:not(:first-child), .pt-sim th:not(:first-child) { text-align: right; }
.pt-extools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pt-extools #exEnt { flex: 1 1 260px; max-width: 420px; }
.pt-vazio { padding: 22px; text-align: center; color: var(--ink-3); border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; }
.pt-ajform { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
.pt-ajform input { width: 100%; box-sizing: border-box; min-width: 0; }
@media (max-width: 1100px) { .pt-vig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pt-vig { grid-template-columns: 1fr; } .pt-regra { grid-template-columns: 1fr; } .pt-regra small { min-height: 0; } }
.pt-hist { overflow-x: auto; }
.pt-hist .tbl { width: 100%; table-layout: auto; }
.pt-hist .tbl th { white-space: nowrap; }
.pt-hist .tbl td { white-space: nowrap; }
.pt-hist .tbl td:last-child { white-space: normal; min-width: 90px; font-size: 11.5px; }
.pt-hist .tbl td:nth-child(n+2):nth-child(-n+4), .pt-hist .tbl th:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.pt-hist .tbl td:last-child { min-width: 0; font-size: 12.5px; }
.pt-hobs { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); white-space: normal; }

/* ===== incentivos: indicação ===== */
#inCorpo { padding: 12px; }
.in-tbl td { vertical-align: top; }
.in-row { cursor: pointer; }
.in-row:hover td { background: var(--brand-soft); }
.in-progtd { min-width: 120px; }
.in-prog { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 4px 0 2px; }
.in-prog > div { height: 100%; background: var(--good); border-radius: 99px; }
.in-cod { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.in-links { display: flex; gap: 6px; flex-wrap: wrap; }
.in-links a.icon-btn { text-decoration: none; }
.in-busca { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; margin-bottom: 10px; border: 1px dashed var(--brand); border-radius: 10px; background: var(--brand-soft); font-size: 13px; }
.in-busca small { color: var(--ink-3); margin-left: 4px; }
.in-dica { margin: 0 0 10px; }
.in-regras { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.in-passos { display: grid; gap: 10px; }
.in-passos > div { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.in-passos b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
.in-cfg { display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.in-cfg label { display: grid; gap: 4px; font-size: 13px; font-weight: 650; }
.in-cfg input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.in-cfg small { font-weight: 500; color: var(--ink-3); }
.in-cfg p { margin: 0; font-size: 12px; }
.in-det .de-dl { grid-template-columns: 140px 1fr; }
.in-vinc h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
#idSug { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.in-sug { text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.in-sug:hover, .in-sug.on { border-color: var(--brand); background: var(--brand-soft); }
.in-sug small { color: var(--ink-3); }
.in-cnpj { color: var(--good); font-weight: 700; }
.in-ok { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--good) 10%, var(--surface)); border: 1px solid var(--good); font-size: 13px; }
@media (max-width: 900px) { .in-regras { grid-template-columns: 1fr; } }

/* ===== incentivos: anúncios ===== */
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.an-card:hover { border-color: var(--brand); }
.an-ban { position: relative; aspect-ratio: 3 / 1; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3); font-size: 12px; }
.an-ban img { width: 100%; height: 100%; object-fit: cover; }
.an-ban .fst { position: absolute; top: 8px; left: 8px; font-style: normal; }
.an-info { padding: 10px 12px 12px; display: grid; gap: 3px; }
.an-info b { font-size: 14px; }
.an-info small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-info a { color: var(--brand-ink); }
.an-num { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.an-num b { color: var(--ink); font-size: 13px; }
dialog.dlg-anu { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.an-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.an-bases { display: flex; gap: 14px; padding-top: 4px; }
.an-prev { display: grid; gap: 6px; align-content: start; }
.an-prev-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); max-width: 380px; }
.an-prev-ban { aspect-ratio: 3 / 1; background: var(--surface-2); display: grid; place-items: center; text-align: center; color: var(--ink-3); font-size: 12px; }
.an-prev-ban img { width: 100%; height: 100%; object-fit: cover; }
.an-prev-txt { padding: 10px 12px 12px; display: grid; gap: 3px; }
.an-prev-txt small { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.an-prev-txt b { font-size: 15px; }
.an-prev-txt p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.an-prev-bt { justify-self: start; margin-top: 6px; padding: 6px 12px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 700; }
@media (max-width: 760px) { .an-form { grid-template-columns: 1fr; } }
.fin-erro { color: var(--crit) !important; } .fst.processando { background: var(--warn); color: #000; }
#idBuscaEmp { margin-top: 10px; width: 100%; box-sizing: border-box; }
#idSug2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }

/* janelas do painel (ui.js) no lugar de confirm/alert/prompt */
dialog.dlg-ui { width: min(440px, calc(100vw - 32px)); }
dialog.dlg-ui form { padding: 20px; display: grid; gap: 14px; }
dialog.dlg-ui h2 { margin: 0; font-size: 16px; }
dialog.dlg-ui .ui-txt { margin: 0; font-size: 14px; line-height: 1.5; max-height: 50vh; overflow: auto; }
dialog.dlg-ui .ui-campo { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; }
dialog.dlg-ui .ui-bts { display: flex; justify-content: flex-end; gap: 8px; }
.btn-primary.perigo { background: var(--crit); border-color: var(--crit); }

/* crédito/débito avulso (Autorizações) */
.ct-res { display: grid; gap: 6px; max-height: 200px; overflow: auto; }
.ct-op { text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; display: grid; gap: 2px; font: inherit; }
.ct-op small { color: var(--muted); font-size: 12px; }
.ct-op.on { border-color: var(--brand); background: var(--brand-soft); }
.fin-bts .fin-mao { font-size: 12px; }

/* anúncios: formatos */
.an-tipo { justify-self: start; }
.an-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); justify-self: start; }
.an-tag.t-loja { background: color-mix(in srgb, var(--s4) 15%, transparent); color: var(--s4); }
.an-tag.t-produto { background: color-mix(in srgb, var(--s1) 15%, transparent); color: var(--s1); }
.an-extra { color: var(--ink) !important; }
.an-extra s { color: var(--muted); }

/* planos */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pl-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px; display: grid; gap: 8px; align-content: start; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.pl-card:hover { border-color: var(--brand); }
.pl-card.inativo { opacity: .6; }
.pl-card ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.pl-card .pl-ok { color: var(--good); }
.pl-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.pl-preco { font-size: 24px; font-weight: 700; }
.pl-preco small { font-size: 13px; font-weight: 500; color: var(--muted); }
.pl-rod { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.pl-novo { place-content: center; text-align: center; border-style: dashed; color: var(--muted); min-height: 140px; }
.pl-uso { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; width: 110px; }
.pl-uso span { display: block; height: 100%; background: var(--good); }
.pl-uso.estourou span { background: var(--crit); }

/* contratos */
.cv-topo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
.cv-hist { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; max-height: 220px; overflow: auto; }
#cvCorpo h4 { margin: 8px 0 0; font-size: 13px; }
.cfg-centrais { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 6px; }
.cfg-centrais label { font-size: 12px; }
.cfg-url { display: flex; gap: 6px; margin-top: 6px; }
.cfg-url input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .cfg-centrais { grid-template-columns: repeat(3, 1fr); } }
/* Ao vivo compacto: cabe mais na tela */
#view-aovivo main { padding-top: 10px; }
.av-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.av-k { padding: 8px 12px; gap: 8px; border-radius: 10px; }
.av-k b { font-size: 20px; }
.av-ic { font-size: 18px; }
.av-tbl th { padding: 6px 8px; }
.av-tbl td { padding: 4px 8px; font-size: 12.5px; }
.av-tbl td.av-nome { text-align: left; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.av-tbl th:nth-child(3), .av-tbl th:nth-child(4) { text-align: left; }
.av-tbl td.av-and { white-space: normal; min-width: 170px; max-width: 260px; line-height: 1.3; }
.cad-reat { padding: 2px 8px; font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
/* Clientes: contato de reativação e motivos */
.cad-ct { display: inline-grid; text-align: left; gap: 1px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.cad-ct small { font-size: 11px; color: var(--ink-3); }
.cad-ct.r-aguardando { border-color: var(--s4); } .cad-ct.r-vai_voltar, .cad-ct.r-voltou { border-color: var(--good); } .cad-ct.r-nao_volta { border-color: var(--crit); }
.cl-mot { margin-bottom: 16px; }
.cl-mot-g { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-bar { display: grid; grid-template-columns: 210px 1fr 32px; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.cl-bar i { display: block; height: 10px; border-radius: 5px; background: var(--brand); min-width: 4px; }
.cl-bar b { text-align: right; }
.cl-res { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.cl-res b { font-size: 16px; color: var(--ink); margin-right: 4px; }
.re-hist p { margin: 4px 0; font-size: 12.5px; }
@media (max-width: 760px) { .cl-mot-g { grid-template-columns: 1fr; } .cl-bar { grid-template-columns: 130px 1fr 28px; } }
/* etiqueta do veículo (Ao vivo e Kanban): cor sólida + palavra, para distinguir de longe */
.av-veic { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 6px 0 4px; border-radius: 5px; margin-right: 6px; vertical-align: -4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #fff; flex: none; line-height: 1; }
.av-veic svg { width: 15px; height: 15px; }
.av-veic.m { background: #ea580c; }
.av-veic.b { background: #059669; }
.kb-ped { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); margin-top: 3px; min-width: 0; } .kb-ped span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-ped .av-veic { margin-right: 2px; }
/* Contas a pagar: lançar a partir de documento */
.cx-clip { border: 0; background: transparent; cursor: pointer; padding: 0 4px 0 0; font-size: 14px; }
#cxCorpo.dc-solte { outline: 2px dashed var(--brand); outline-offset: 4px; }
.dlg-doc { width: min(760px, 96vw); }
.dc-arq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.dc-chave { flex-basis: 100%; font-family: ui-monospace, monospace; font-size: 11px; }
.dc-tipo { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); }
.dc-tipo.t-outro { background: color-mix(in srgb, var(--crit) 15%, transparent); }
.dc-avisos > div { border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.dc-avisos ul { margin: 4px 0 0; padding-left: 18px; }
.dc-dup { background: color-mix(in srgb, var(--crit) 12%, transparent); border: 1px solid var(--crit); }
.dc-dup p { margin: 4px 0; }
.dc-duv { background: color-mix(in srgb, var(--s4) 14%, transparent); border: 1px solid var(--s4); }
.dc-av { background: var(--surface-2); }
.dc-ok { background: color-mix(in srgb, var(--good) 12%, transparent); border: 1px solid var(--good); }
.dc-forcar { display: block; margin-top: 6px; }
.dc-parc { margin: 12px 0; }
.dc-parc .tbl td, .dc-parc .tbl th { text-align: left; padding: 4px 6px; }
.dc-parc input { width: 100%; }
.dc-obs { display: grid; gap: 4px; font-size: 12.5px; }
.cx-docs { white-space: nowrap; }
.cx-dc { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 0 2px; }
.cx-dc.falta { opacity: .25; filter: grayscale(1); }
.cx-dc.falta:hover { opacity: .8; }
.dc-par { background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid var(--brand); }
.dc-par p { margin: 6px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-par-bt { padding: 3px 10px; font-size: 12px; }
.dc-juntar { display: grid; gap: 8px; margin: 6px 0 10px; }
.dc-juntar p { margin: 0; }
.dc-chk { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.dc-juntar[hidden], .dc-chk[hidden] { display: none; }
.dc-golpe { background: color-mix(in srgb, var(--crit) 14%, transparent); border: 2px solid var(--crit); } .dc-golpe small { display: block; margin-top: 4px; }
.ct-escolhido { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand-soft); font-size: 13px; } .ct-escolhido small { color: var(--ink-3); flex: 1; }
.av-tbl th:first-child, .av-tbl td:first-child { width: 1%; white-space: nowrap; }
/* Clientes: tabela compacta para caber na tela */
#clTabela th, #clTabela td { padding: 5px 7px; font-size: 12.5px; }
#clTabela td:nth-child(1) .name { max-width: 210px; }
#clTabela th:nth-child(5), #clTabela td:nth-child(5), #clTabela th:nth-child(6), #clTabela td:nth-child(6) { text-align: left; white-space: nowrap; }
#clTabela .cad-dias { display: inline-block; min-width: 54px; }
#clTabela .cad-reat { margin-left: 4px; }
/* Pontuação compacta: regra em vigor numa linha, campos lado a lado, incentivo */
#view-pontuacao .card { padding: 12px 14px; }
#view-pontuacao .card-head { margin-bottom: 6px; }
#view-pontuacao .card-head h3 { font-size: 14px; }
#view-pontuacao table.tbl th, #view-pontuacao table.tbl td { padding: 4px 7px; font-size: 12.5px; }
#view-pontuacao .pt-vig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; margin-bottom: 10px; }
.pt-pill { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; }
.pt-pill b { color: var(--brand-ink); }
.pt-pill.pt-on { border-color: #f97316; background: rgba(249, 115, 22, .12); font-weight: 650; }
#view-pontuacao .pt-regra { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#view-pontuacao .pt-regra label { grid-template-rows: auto auto; font-size: 12px; }
#view-pontuacao .pt-regra input { font-size: 15px; padding: 5px 8px; }
#view-pontuacao .pt-regra input[type=date] { font-size: 12.5px; }
#view-pontuacao .pt-ex { margin: 8px 0; font-size: 12.5px; padding: 6px 10px; }
#view-pontuacao .pt-hist { margin-top: 8px; }
.pt-incform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pt-incform input, .pt-incform select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.pt-incform label { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.pt-incform #inMul { width: 52px; }
.pt-incform #inMsg { flex: 1 1 260px; min-width: 0; }
.pt-st { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.pt-st.on { background: rgba(249, 115, 22, .16); color: #c2410c; font-weight: 700; }
.pt-st.fim { opacity: .7; }
.pt-incbts { white-space: nowrap; text-align: right; }
@media (max-width: 700px) { #view-pontuacao .pt-regra { grid-template-columns: 1fr 1fr; } }
.pt-incbts button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.pt-incbts button.btn-primary { background: #f97316; border-color: #f97316; color: #fff; }
/* Início: pendências + resumo de ontem por central */
.hm { max-width: 1100px; padding-top: 14px; }
.hm-pend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hm-pend a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13px; }
.hm-pend a:hover { border-color: var(--brand); }
.hm-tit { font-size: 15px; margin: 0 0 10px; }
.hm-tit small { font-weight: 500; font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.hm-tb { width: 100%; }
.hm-tb th, .hm-tb td { text-align: right; padding: 8px 6px; white-space: nowrap; }
#hmResumo { overflow-x: auto; }
.hm-tb th:first-child, .hm-tb td:first-child { text-align: left; }
.hm-tb td.fin { color: var(--good); font-weight: 700; }
.hm-tb td.na { color: var(--crit); font-weight: 650; }
.hm-tb td.zero { color: var(--ink-3); opacity: .6; }
.hm-tb tr.hm-tot td { font-weight: 700; border-top: 2px solid var(--border); }
.hm-var { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 650; color: var(--ink-3); min-width: 38px; text-align: left; }
.hm-var.bom { color: var(--good); } .hm-var.ruim { color: var(--crit); }
@media (max-width: 760px) {
  .hm-tb thead { display: none; }
  .hm-tb, .hm-tb tbody, .hm-tb tr, .hm-tb td { display: block; width: 100%; box-sizing: border-box; }
  .hm-tb tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; padding: 4px 0; }
  .hm-tb td { display: flex; justify-content: space-between; padding: 4px 12px; border: 0; }
  .hm-tb td::before { content: attr(data-l); color: var(--ink-3); font-weight: 500; }
  .hm-tb td:first-child::before { content: none; }
}
/* Cadastros › Entregadores: quadro do clube do entregador */
.en-clube { padding: 10px 14px; margin-bottom: 12px; }
.en-cl-tit { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13.5px; }
.en-cl-tit span { color: var(--ink-2); font-size: 12.5px; }
.en-cl-pend { margin-top: 8px; font-size: 13px; }
.en-cl-pend summary { cursor: pointer; color: #b45309; font-weight: 650; }
.en-cl-pend ul { margin: 4px 0 8px; padding-left: 18px; } .en-cl-pend p { margin: 8px 0 2px; }
.link-bt { font: inherit; font-size: 12px; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--brand-ink); cursor: pointer; margin-left: 4px; }
.link-bt:hover { border-color: var(--brand); }
/* entregadores que passaram pela OS (formulário de ocorrência) */
.oc-passaram { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin: -4px 0 4px; }
.oc-passaram button { font: inherit; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.oc-passaram button.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); font-weight: 600; }
.oc-passaram button small { color: var(--ink-3); margin-left: 4px; }
.oc-passaram button.ret small { color: var(--crit, #d03b3b); }
/* rota do entregador no mapa (formulário de ocorrência) */
.oc-rota { border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin: 2px 0 6px; display: grid; gap: 6px; }
.oc-rota-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oc-mapa { height: 340px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.oc-rota-leg { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.oc-rota-leg:empty { display: none; }
.oc-rota-leg i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.mk-emoji { font-size: 22px; line-height: 22px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.oc-rota.grande { position: fixed; inset: 3vh 3vw; z-index: 50; background: var(--surface); box-shadow: 0 10px 40px rgba(0,0,0,.35); grid-template-rows: auto 1fr auto; }
.oc-rota.grande .oc-mapa { height: auto; min-height: 0; }
/* Operação · Mapa ao vivo */
.mp-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; height: calc(100vh - 170px); min-height: 420px; }
.mp-mapa { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.mp-lista { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.mp-al { color: var(--crit, #d03b3b) !important; font-weight: 600; }
.mp-resumo { display: flex; gap: 12px; font-size: 13px; color: var(--ink-2); }
.mp-pop { display: grid; gap: 3px; font-size: 13px; min-width: 220px; }
.mp-pop .mp-bts { display: flex; gap: 6px; margin-top: 6px; }
@media (max-width: 900px) { .mp-main { grid-template-columns: 1fr; height: auto; } .mp-mapa { height: 60vh; } .mp-lista { max-height: 50vh; } }
.mp-pop .icon-btn { background: #f3f4f6; color: #1d1f22; border-color: #d4d6da; }
.mp-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--c); border: 1.5px solid var(--c); border-radius: 99px; padding: 0 8px; line-height: 18px; white-space: nowrap; background: var(--surface); }
.mp-pop .mp-chip { background: #fff; }

.mp-parada { font-size: 15px; line-height: 22px; text-align: center; background: #fff; border: 2px solid #d03b3b; border-radius: 50%; color: #d03b3b; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.mp-leg { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); } .mp-leg i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-left: 4px; }
/* marcador do entregador: barra na cor da etapa (ícone + nome) */
.mp-moto { background: none; border: 0; }
.mp-barra { position: relative; display: inline-flex; align-items: center; background: var(--c); border: 2px solid #fff; border-radius: 20px; padding-right: 9px; box-shadow: 0 2px 8px rgba(0,0,0,.45); white-space: nowrap; }
.mp-ic { position: relative; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.mp-sb { font-family: 'Material Symbols Rounded'; font-size: 21px; line-height: 1; color: #fff; font-variation-settings: 'FILL' 1, 'wght' 600, 'opsz' 48; font-feature-settings: 'liga'; user-select: none; }
.mp-ic em { position: absolute; inset: -12px; pointer-events: none; }
.mp-ic em::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 8px solid var(--c); border-top: 0; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.mp-sep { width: 1px; height: 16px; background: rgba(255,255,255,.55); margin-right: 6px; }
.mp-tx { font-size: 11px; font-weight: 600; color: #fff; padding-left: 2px; }
.mp-moto.al .mp-barra { box-shadow: 0 0 0 4px #d03b3b, 0 2px 8px rgba(0,0,0,.45); }
.mp-barra i { position: absolute; top: -8px; left: 20px; width: 16px; height: 16px; border-radius: 50%; background: #d03b3b; color: #fff; font: 800 10px/12px sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; }
/* popup de ocorrência equilibrado: entrega · caso · resolução */
.oc-sec { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.oc-avisar { display: grid; gap: 6px; }
.oc-avisar .ac-msg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-avisar .ac-msg .icon-btn { justify-content: center; font-size: 12.5px; padding: 7px 6px; white-space: nowrap; }
.oc-histbox { border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; }
.oc-histbox summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.oc-histbox[open] summary { margin-bottom: 6px; }
/* card da lista do mapa (compacto) */
.mp-it { display: grid; gap: 2px; text-align: left; font: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.mp-it:hover { background: var(--surface-2); }
.mp-it.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.mp-it.al { border-color: color-mix(in srgb, #d03b3b 45%, var(--border)); }
.mp-l1 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mp-l1 .av-veic { margin: 0; flex: none; height: 16px; padding: 0 4px 0 3px; font-size: 10px; gap: 2px; }
.mp-l1 .av-veic svg { width: 12px; height: 12px; }
.mp-nome { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-l1 .kb-c { flex: none; font-size: 10.5px; padding: 0 5px; }
.mp-l2 { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.mp-loja { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-os { flex: none; font-size: 10.5px; color: var(--ink-3); }
.mp-l3 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--ink-2); }
.mp-livre { color: #0f766e; font-weight: 600; font-size: 11.5px; }
.mp-alb { display: grid; gap: 1px; margin-top: 1px; padding: 4px 7px; border-radius: 7px; background: rgba(208,59,59,.12); color: #e05252; font-size: 11px; font-weight: 600; line-height: 1.35; }
.mp-it .mp-chip { font-size: 10.5px; line-height: 15px; padding: 0 6px; border-width: 1px; }
/* classificação da ocorrência */
.oc-class { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.oc-class small { font-weight: 500; color: var(--ink-3); }
.oc-class-op { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 9px; }
.oc-class-op button { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-class-op button.on[data-v="a_apurar"] { border-color: var(--ink-3); background: color-mix(in srgb, var(--ink-3) 18%, var(--surface-2)); color: var(--ink); }
.oc-class-op button.on[data-v="sem_culpa"] { border-color: #16a34a; background: rgba(22,163,74,.16); color: #16a34a; }
.oc-class-op button.on[data-v="falta"] { border-color: #d03b3b; background: rgba(208,59,59,.16); color: #e05252; }
.oc-class-op.pede { outline: 2px solid #d03b3b; outline-offset: 2px; }
.oc-cl { font-size: 11px; }
.oc-excluir { color: var(--crit); }