/* APR Digital 7LAN · mock navegável
   Padrão de painel neutro: zinc, preto como ação principal, cor só para estado. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #09090b;
  --fg2: #3f3f46;
  --mfg: #71717a;
  --muted: #f4f4f5;
  --muted2: #fafafa;
  --border: #e4e4e7;
  --border2: #d4d4d8;
  --primary: #18181b;
  --pfg: #fafafa;
  --ok: #15803d; --ok-bg: #f0fdf4; --ok-bd: #bbf7d0;
  --warn: #b45309; --warn-bg: #fffbeb; --warn-bd: #fde68a;
  --bad: #b91c1c; --bad-bg: #fef2f2; --bad-bd: #fecaca;
  --info: #1d4ed8; --info-bg: #eff6ff; --info-bd: #bfdbfe;
  --neu: #52525b; --neu-bg: #f4f4f5; --neu-bd: #e4e4e7;
  --radius: 8px;
  --hub-h: 48px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--muted2);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p, li, td, figcaption, blockquote, .pretty { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--mfg); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Hub (barra do mock) ---------- */
.hub {
  position: sticky; top: 0; z-index: 50;
  height: var(--hub-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: #09090b; color: #fafafa;
}
.hub-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hub-logo { font-weight: 700; letter-spacing: .08em; font-size: 13px; padding: 2px 6px; border: 1px solid #3f3f46; border-radius: 4px; }
.hub-title { font-weight: 600; white-space: nowrap; }
.hub-tag { color: #a1a1aa; font-size: 12px; white-space: nowrap; }
.hub-tabs { display: flex; gap: 2px; margin: 0 auto; background: #18181b; border: 1px solid #27272a; border-radius: 8px; padding: 3px; }
.hub-tabs button { border: 0; background: transparent; color: #a1a1aa; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.hub-tabs button[aria-pressed="true"] { background: #fafafa; color: #09090b; }
.hub-right { display: flex; gap: 8px; align-items: center; }
.hub-net { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #14532d; background: #052e16; color: #86efac; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.hub-net.off { border-color: #7f1d1d; background: #450a0a; color: #fca5a5; }
.hub-reset { border: 1px solid #3f3f46; background: transparent; color: #d4d4d8; padding: 5px 10px; border-radius: 6px; font-size: 12px; }

.stage { min-height: calc(100vh - var(--hub-h)); }
.proc, .app-wrap, .bo { display: none; }
body[data-view="processo"] .proc { display: block; }
body[data-view="app"] .app-wrap { display: flex; }
body[data-view="bo"] .bo { display: flex; }
body[data-view="lado"] .stage { display: flex; height: calc(100vh - var(--hub-h)); }
body[data-view="lado"] .app-wrap { display: flex; width: 440px; flex: none; border-right: 1px solid var(--border); background: #ececee; }
body[data-view="lado"] .bo { display: flex; flex: 1; min-width: 0; height: 100%; }

@media (max-width: 1099px) {
  .only-wide { display: none; }
  .hub-tag { display: none; }
}
@media (max-width: 720px) {
  :root { --hub-h: 92px; }
  .hub { flex-wrap: wrap; height: auto; min-height: var(--hub-h); padding: 8px 12px; row-gap: 8px; }
  .hub-tabs { order: 3; width: 100%; margin: 0; }
  .hub-tabs button { flex: 1; padding: 6px 4px; }
  .hub-right { margin-left: auto; }
  .hub-reset { display: none; }
}

/* ---------- Componentes comuns ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--primary); background: var(--primary); color: var(--pfg);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.out { background: var(--bg); color: var(--fg); border-color: var(--border2); }
.btn.out:hover { background: var(--muted); }
.btn.ghost { background: transparent; color: var(--fg); border-color: transparent; }
.btn.ghost:hover { background: var(--muted); }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger-out { background: var(--bg); color: var(--bad); border-color: var(--bad-bd); }
.btn.ok { background: var(--ok); border-color: var(--ok); }

.bdg {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--neu-bd); background: var(--neu-bg); color: var(--neu);
}
.bdg .dot, .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.t-ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.t-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.t-bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.t-info { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.t-neu { background: var(--neu-bg); border-color: var(--neu-bd); color: var(--neu); }
.tx-ok { color: var(--ok); } .tx-warn { color: var(--warn); } .tx-bad { color: var(--bad); } .tx-info { color: var(--info); }

.av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); color: var(--fg2); font-size: 10px; font-weight: 600; flex: none; border: 1px solid var(--bg); }
.av.lg { width: 40px; height: 40px; font-size: 14px; }
.av.xl { width: 56px; height: 56px; font-size: 18px; }
.avs { display: inline-flex; }
.avs .av + .av { margin-left: -6px; }
.who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.inp, .sel, .txa {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--border2); border-radius: 6px; background: var(--bg);
  font-size: 13.5px; outline: none;
}
.txa { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.4; }
.inp:focus, .sel:focus, .txa:focus { border-color: var(--fg2); box-shadow: 0 0 0 3px rgba(24,24,27,.08); }
.lbl { display: block; font-size: 12px; font-weight: 500; color: var(--mfg); margin-bottom: 5px; }
.fld { margin-bottom: 14px; }
.hint { font-size: 12px; color: var(--mfg); margin-top: 4px; }
.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--primary); }

.photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.photos button { padding: 0; border: 0; background: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(9,9,11,.82); display: grid; place-items: center; padding: 24px; }
.lightbox img { max-width: min(960px, 100%); max-height: 86vh; border-radius: 8px; background: #000; }
.lightbox button { position: absolute; top: 16px; right: 16px; }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; max-width: 360px; background: #18181b; color: #fafafa; padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; gap: 8px; align-items: flex-start; animation: tin .18s ease-out; }
.toast.ok .ic { color: #86efac; } .toast.warn .ic { color: #fcd34d; } .toast.bad .ic { color: #fca5a5; }
@keyframes tin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Processo ---------- */
.proc { padding: 28px 24px 64px; }
.proc-in { max-width: 1240px; margin: 0 auto; }
.proc h1 { font-size: 28px; letter-spacing: -.02em; }
.proc h2 { font-size: 18px; margin-bottom: 4px; }
.proc .lead { color: var(--mfg); font-size: 15px; margin: 8px 0 0; max-width: 760px; }
.proc-sec { margin-top: 32px; }
.proc-sec > p.muted { margin: 0 0 14px; }
.proc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.proc-stat { border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); padding: 10px 14px; min-width: 130px; }
.proc-stat b { display: block; font-size: 22px; letter-spacing: -.02em; }
.proc-stat span { color: var(--mfg); font-size: 12px; }
.proc-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 14px; font-size: 12.5px; color: var(--fg2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.actor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.a-bo { background: #6366f1; } .a-app { background: #0f766e; } .a-sup { background: #d97706; } .a-sys { background: #71717a; }
.flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.phase { border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); display: flex; flex-direction: column; }
.phase-h { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--muted2); border-radius: var(--radius) var(--radius) 0 0; }
.phase-h small { color: var(--mfg); font-size: 11.5px; display: block; }
.phase-h b { font-size: 13.5px; }
.phase ol { list-style: none; margin: 0; padding: 6px 0; counter-reset: none; }
.phase li { display: flex; gap: 8px; padding: 7px 12px; font-size: 12.5px; line-height: 1.4; color: var(--fg2); }
.phase li .actor { margin-top: 4px; }
.phase li b { color: var(--fg); font-weight: 600; }
@media (max-width: 1180px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.blk { border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); }
.blk summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.blk summary::-webkit-details-marker { display: none; }
.blk summary .chev { margin-left: auto; transition: transform .15s; color: var(--mfg); }
.blk[open] summary .chev { transform: rotate(180deg); }
.blk ol { margin: 0; padding: 4px 14px 12px 34px; color: var(--fg2); font-size: 13px; }
.blk ol li { padding: 3px 0; }
.blks { display: grid; gap: 8px; }

/* ---------- Tabelas (backoffice e processo) ---------- */
.tblw { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--mfg); background: var(--muted2); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 12.5px; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--muted2); }
.tbl tr.click:focus-visible td { background: var(--muted); outline: none; }
.tbl .sub { display: block; color: var(--mfg); font-size: 12px; margin-top: 2px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .c { text-align: center; }
.tbl td.wrap { min-width: 220px; }
.tbl tr.nc-row td { background: #fffafa; }
.yes { color: var(--ok); } .no { color: var(--mfg); }

/* ---------- Backoffice ---------- */
.bo { height: calc(100vh - var(--hub-h)); background: var(--bg); }
.bo-side { width: 228px; flex: none; border-right: 1px solid var(--border); background: var(--muted2); display: flex; flex-direction: column; min-height: 0; }
.bo-brand { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.bo-brand .mark { width: 28px; height: 28px; border-radius: 6px; background: var(--primary); color: var(--pfg); display: grid; place-items: center; }
.bo-brand b { font-size: 13.5px; display: block; line-height: 1.1; }
.bo-brand small { color: var(--mfg); font-size: 11.5px; }
.bo-nav { flex: 1; overflow: auto; padding: 8px; }
.bo-grp { font-size: 11.5px; color: var(--mfg); font-weight: 500; padding: 12px 8px 4px; }
.bo-item { width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--fg2); font-size: 13.5px; text-align: left; }
.bo-item:hover { background: var(--muted); color: var(--fg); }
.bo-item.on { background: var(--bg); color: var(--fg); font-weight: 500; box-shadow: 0 0 0 1px var(--border); }
.bo-item .cnt { margin-left: auto; font-size: 11px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--primary); color: var(--pfg); }
.bo-item .cnt.bad { background: var(--bad); }
.bo-foot { border-top: 1px solid var(--border); padding: 10px; }
.bo-foot .lbl { margin-bottom: 4px; }
.bo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; container-type: inline-size; container-name: bo; }
.bo-top { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg); }
.bo-crumb { font-size: 13px; color: var(--mfg); display: flex; gap: 6px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.bo-crumb b { color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.bo-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 6px; color: var(--fg2); }
.icon-btn:hover { background: var(--muted); }
.icon-btn .pip { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.bo-menu-btn { display: none; }
.bo-page { flex: 1; overflow: auto; padding: 20px 24px 48px; background: var(--bg); }
.ph { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ph h1 { font-size: 20px; letter-spacing: -.01em; }
.ph p { margin: 2px 0 0; color: var(--mfg); font-size: 13px; }
.ph .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ph .back { margin-bottom: 4px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); display: flex; gap: 12px; align-items: flex-start; text-align: left; }
button.kpi:hover { background: var(--muted2); }
.kpi .k-ic { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; flex: none; border: 1px solid; }
.kpi .k-l { font-size: 12px; color: var(--mfg); display: block; }
.kpi .k-v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; display: block; line-height: 1.2; margin-top: 2px; }
.kpi .k-s { font-size: 11.5px; color: var(--mfg); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); background: var(--muted2); border-radius: 8px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--mfg); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border); }
.seg .n { font-size: 11px; color: var(--mfg); font-weight: 600; }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.fbar .inp, .fbar .sel { width: auto; height: 32px; font-size: 13px; }
.fbar .grow { flex: 1; min-width: 180px; max-width: 320px; position: relative; }
.fbar .grow .inp { width: 100%; padding-left: 30px; }
.fbar .grow .ic { position: absolute; left: 9px; top: 8px; color: var(--mfg); }
.fbar .r { margin-left: auto; display: flex; gap: 8px; }
.count { font-size: 12.5px; color: var(--mfg); margin: 0 0 8px; }
.sec { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.sec + .sec, .stack > * + * { margin-top: 16px; }
.sec-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sec-h h2 { font-size: 14px; font-weight: 600; }
.sec-h p { margin: 0; font-size: 12px; color: var(--mfg); }
.sec-h .acts { margin-left: auto; display: flex; gap: 6px; }
.sec-b { padding: 14px 16px; }
.sec .tbl th:first-child, .sec .tbl td:first-child { padding-left: 16px; }
.sec .tblw { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.cols3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.props { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; }
.props dt { color: var(--mfg); }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 12px 18px; font-size: 13px; }
.tl li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--border2); }
.tl li::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--border); }
.tl li:last-child::after { display: none; }
.tl small { display: block; color: var(--mfg); font-size: 12px; }
.callout { border: 1px solid; border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.callout .ic { margin-top: 1px; }
.callout b { display: block; margin-bottom: 2px; }
.callout p { margin: 0; }
.ans { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.ans.S { background: var(--ok-bg); color: var(--ok); }
.ans.N { background: var(--bad); color: #fff; }
.ans.NA { background: var(--muted); color: var(--mfg); }
.ncbox { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; padding: 4px 0 6px; }
.ncbox .props { grid-template-columns: 120px minmax(0, 1fr); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--muted); color: var(--fg2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.dk { background: var(--primary); color: var(--pfg); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 1px; height: 100%; position: relative; }
.bars .col i { display: block; border-radius: 2px 2px 0 0; }
.bars .col i.a { background: #a1a1aa; }
.bars .col i.b { background: var(--bad); border-radius: 0; }
.bars-x { display: flex; gap: 6px; margin-top: 6px; }
.bars-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--mfg); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px 10px; align-items: center; font-size: 12.5px; }
.hbar .tr { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; margin-bottom: 8px; }
.hbar .tr i { display: block; height: 100%; background: var(--bad); }
.blist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.blist button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--bg); text-align: left; font-size: 13px; }
.blist button:last-child { border-bottom: 0; }
.blist button.on { background: var(--muted); font-weight: 500; }
.blist button .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.formgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid; margin-bottom: 16px; font-size: 13px; flex-wrap: wrap; }
.banner .acts { margin-left: auto; display: flex; gap: 6px; }
.mapph { height: 120px; border-radius: 6px; border: 1px solid var(--border); background: linear-gradient(0deg, transparent 23px, #e4e4e7 24px) 0 0 / 100% 24px, linear-gradient(90deg, transparent 23px, #e4e4e7 24px) 0 0 / 24px 100%, #f8fafc; position: relative; margin-top: 8px; }
.mapph::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 10px; background: #fff; border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); transform: rotate(-8deg); }
.mapph .ic { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -90%); color: var(--bad); fill: #fff; }
.matrix td.c .ic { color: var(--ok); }
.empty { padding: 28px 16px; text-align: center; color: var(--mfg); font-size: 13px; }

/* Gaveta e menu suspenso */
.ovl { position: fixed; inset: 0; background: rgba(9,9,11,.35); z-index: 120; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--bg); z-index: 121; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0,0,0,.12); }
.drawer-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.drawer-h h2 { font-size: 15px; }
.drawer-h .icon-btn { margin-left: auto; }
.drawer-b { flex: 1; overflow: auto; padding: 18px; }
.drawer-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.drawer .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pop { position: absolute; right: 12px; top: 48px; width: 360px; max-width: calc(100vw - 24px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.12); z-index: 110; }
.pop-h { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.pop-h button { margin-left: auto; }
.pop-l { max-height: 360px; overflow: auto; }
.pop-l button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border); background: var(--bg); padding: 10px 14px; font-size: 13px; display: flex; gap: 10px; }
.pop-l button:hover { background: var(--muted2); }
.pop-l button.unread { background: #fafaff; }
.pop-l small { display: block; color: var(--mfg); font-size: 12px; }

@container bo (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container bo (max-width: 1020px) {
  .cols, .cols3 { grid-template-columns: minmax(0, 1fr); }
  .hide-md { display: none; }
  .ncbox { grid-template-columns: minmax(0, 1fr); }
}
@container bo (max-width: 760px) {
  .hide-sm { display: none; }
  .formgrid { grid-template-columns: minmax(0, 1fr); }
  .bo-page { padding: 16px 14px 40px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .props { grid-template-columns: 112px minmax(0, 1fr); }
}
body[data-view="lado"] .bo-side { width: 56px; }
body[data-view="lado"] .bo-side .lbl-t, body[data-view="lado"] .bo-grp, body[data-view="lado"] .bo-brand div, body[data-view="lado"] .bo-foot { display: none; }
body[data-view="lado"] .bo-item { justify-content: center; padding: 0; position: relative; }
body[data-view="lado"] .bo-item .cnt { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
body[data-view="lado"] .bo-brand { justify-content: center; padding: 0; }
@media (max-width: 900px) {
  .bo-side { position: fixed; left: 0; top: var(--hub-h); bottom: 0; z-index: 130; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 24px rgba(0,0,0,.1); }
  .bo.menu-open .bo-side { transform: none; }
  .bo-menu-btn { display: inline-grid; }
  .bo-top { padding: 0 12px; }
}

/* ---------- App de campo (Android) ---------- */
.app-wrap { justify-content: center; align-items: flex-start; padding: 20px 16px; gap: 24px; min-height: calc(100vh - var(--hub-h)); background: #ececee; }
.app-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone { position: relative; width: 392px; height: min(844px, calc(100vh - var(--hub-h) - 64px)); min-height: 600px; border: 10px solid #111113; border-radius: 42px; background: #111113; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #f4f4f5; }
.phone-hint { font-size: 12px; color: var(--mfg); max-width: 380px; text-align: center; margin: 0; }
body[data-view="lado"] .app-wrap { padding: 16px 12px; }
body[data-view="lado"] .phone { width: 400px; height: calc(100vh - var(--hub-h) - 60px); min-height: 560px; }
.app-side { width: 300px; padding-top: 8px; font-size: 13px; color: var(--fg2); }
.app-side h3 { font-size: 14px; margin-bottom: 8px; }
.app-side ol { margin: 0; padding-left: 18px; }
.app-side li { margin-bottom: 8px; }
@media (max-width: 960px) { .app-side { display: none; } }
@media (max-width: 520px) {
  .app-wrap { padding: 0; }
  .phone { width: 100%; height: calc(100dvh - var(--hub-h)); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .phone-screen { border-radius: 0; }
  .phone-hint { display: none; }
}

.m { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 15px; color: var(--fg); background: #f4f4f5; }
.m-status { height: 28px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: #18181b; color: #fafafa; font-size: 12px; font-weight: 500; }
.m-status .r { display: flex; gap: 6px; align-items: center; }
.m-status button { border: 0; background: none; color: inherit; padding: 0; display: inline-flex; }
.m-status .ic { width: 14px; height: 14px; }
.m-bar { height: 56px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; background: #18181b; color: #fafafa; }
.m-bar h1 { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bar .m-ib { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; border-radius: 50%; display: grid; place-items: center; }
.m-bar .m-ib .ic { width: 22px; height: 22px; }
.m-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid #3f3f46; background: #27272a; color: #e4e4e7; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.m-pill.warn { border-color: #92400e; background: #451a03; color: #fcd34d; }
.m-pill.off { border-color: #7f1d1d; background: #450a0a; color: #fca5a5; }
.m-pill.ok { border-color: #14532d; background: #052e16; color: #86efac; }
.m-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.m-pad { padding: 16px; }
.m-nav { height: 64px; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--border); }
.m-nav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; color: var(--mfg); font-weight: 500; position: relative; }
.m-nav button .ic { width: 22px; height: 22px; }
.m-nav button.on { color: var(--fg); }
.m-nav button.on .ic { background: #e4e4e7; border-radius: 999px; padding: 2px 14px; width: 52px; height: 28px; }
.m-nav .b { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.m-foot { flex: none; display: flex; gap: 10px; padding: 10px 16px 14px; background: #fff; border-top: 1px solid var(--border); }
.m-foot .m-btn { flex: 1; }

.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--primary); background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; width: 100%; }
.m-btn .ic { width: 20px; height: 20px; }
.m-btn.out { background: #fff; color: var(--fg); border-color: var(--border2); }
.m-btn.ok { background: var(--ok); border-color: var(--ok); }
.m-btn.bad { background: var(--bad); border-color: var(--bad); }
.m-btn.xl { height: 60px; font-size: 17px; border-radius: 14px; }
.m-btn.sm { height: 44px; font-size: 15px; }
.m-link { border: 0; background: none; color: var(--fg2); font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; width: 100%; }
.m-link.bad { color: var(--bad); }
.m-stack > * + * { margin-top: 10px; }

.m-hello { margin-bottom: 14px; }
.m-hello h2 { font-size: 22px; letter-spacing: -.01em; }
.m-hello p { margin: 2px 0 0; color: var(--mfg); font-size: 14px; }
.m-sec-t { font-size: 13.5px; font-weight: 600; color: var(--fg2); margin: 20px 2px 8px; display: flex; align-items: center; gap: 6px; }
.m-sec-t .n { color: var(--mfg); font-weight: 500; }
.m-list { background: #fff; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.m-row { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-bottom: 1px solid var(--border); width: 100%; background: #fff; border-left: 0; border-right: 0; border-top: 0; text-align: left; font-size: 15px; }
.m-row:last-child { border-bottom: 0; }
.m-row .grow { flex: 1; min-width: 0; }
.m-row .t { font-weight: 600; display: block; }
.m-row .s { font-size: 13px; color: var(--mfg); display: block; margin-top: 1px; }
.m-row .ch { color: var(--mfg); }
.m-row .ch .ic { width: 18px; height: 18px; }
.m-row-btn:active { background: var(--muted); }
.m-empty { padding: 20px 14px; color: var(--mfg); font-size: 14px; text-align: center; }
.m-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; margin-bottom: 12px; border: 1px solid; }
.m-banner .ic { width: 20px; height: 20px; margin-top: 0; }
.m-banner b { display: block; }
.m-banner.dark { background: #27272a; color: #fafafa; border-color: #27272a; }
.m-banner.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: #78350f; }
.m-banner.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: #7f1d1d; }
.m-banner.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: #14532d; }
.m-banner.info { background: var(--info-bg); border-color: var(--info-bd); color: #1e3a8a; }
button.m-banner { width: 100%; text-align: left; }
.m-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.m-tag { font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--muted); color: var(--fg2); }
.m-tag.dk { background: #27272a; color: #fafafa; }
.m-st { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid; }

/* Formulário do app */
.m-fld { margin-bottom: 16px; }
.m-fld label, .m-lbl { display: block; font-size: 13.5px; font-weight: 500; color: var(--fg2); margin-bottom: 6px; }
.m-fld .req { color: var(--bad); }
.m-inp, .m-sel, .m-txa { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 10px; background: #fff; font-size: 16px; outline: none; }
.m-txa { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.m-inp:focus, .m-sel:focus, .m-txa:focus { border-color: #18181b; box-shadow: 0 0 0 3px rgba(24,24,27,.1); }
.m-ro { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border-radius: 10px; background: #e9e9ec; color: var(--fg2); font-size: 15px; }
.m-ro .ic { width: 18px; height: 18px; color: var(--mfg); }
.m-ro small { display: block; color: var(--mfg); font-size: 12.5px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border2); background: #fff; font-size: 14.5px; font-weight: 500; text-align: left; line-height: 1.25; }
.m-chip.on { background: #18181b; color: #fff; border-color: #18181b; }
.m-chip.sug:not(.on) { border-color: #a1a1aa; border-style: dashed; }
.m-chip .ic { width: 16px; height: 16px; }
.m-chip:disabled { opacity: 1; cursor: default; }
.m-epis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-epis .m-chip { border-radius: 12px; justify-content: flex-start; min-height: 52px; }
.m-epis .m-chip small { display: block; font-size: 11px; font-weight: 500; opacity: .7; }

.m-steps { flex: none; background: #fff; border-bottom: 1px solid var(--border); padding: 10px 16px 12px; }
.m-steps .lab { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mfg); margin-bottom: 8px; }
.m-steps .lab b { color: var(--fg); font-weight: 600; }
.m-steps .bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.m-steps .bar i { height: 4px; border-radius: 2px; background: var(--border); }
.m-steps .bar i.on { background: #18181b; }

.m-blk { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border-bottom: 1px solid var(--border); }
.m-blk:last-child { border-bottom: 0; }
.m-blk .grow { flex: 1; min-width: 0; }
.m-blk .t { font-weight: 600; font-size: 15.5px; display: block; }
.m-blk .s { font-size: 13px; color: var(--mfg); }
.m-blk .why { margin-top: 10px; }
.m-sw { position: relative; width: 52px; height: 32px; border-radius: 999px; border: 0; background: #d4d4d8; flex: none; transition: background .15s; }
.m-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.m-sw.on { background: #18181b; }
.m-sw.on::after { transform: translateX(20px); }
.m-lock { width: 52px; display: grid; place-items: center; color: var(--mfg); flex: none; }

.m-bh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #e9e9ec; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--border); }
.m-bh .n { margin-left: auto; font-size: 12.5px; color: var(--mfg); font-weight: 500; }
.m-bh .n.done { color: var(--ok); }
.m-qs { padding: 10px 12px 4px; }
.m-q { background: #fff; border-radius: 14px; border: 1px solid var(--border); padding: 14px; margin-bottom: 10px; scroll-margin-top: 52px; }
.m-q.err { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-bd); }
.m-q .qt { display: flex; gap: 8px; align-items: flex-start; }
.m-q .qn { font-size: 12.5px; font-weight: 700; color: var(--mfg); min-width: 22px; padding-top: 2px; }
.m-q .qx { flex: 1; font-size: 15.5px; font-weight: 500; line-height: 1.38; }
.m-q .qh { border: 0; background: var(--muted); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--fg2); }
.m-q .help { margin: 10px 0 0 30px; font-size: 13.5px; color: #1e3a8a; background: var(--info-bg); border-radius: 10px; padding: 10px 12px; line-height: 1.4; }
.m-q .msg { margin: 8px 0 0; font-size: 13px; color: var(--bad); font-weight: 500; }
.m-ans { display: grid; gap: 8px; margin-top: 12px; }
.m-ans.c3 { grid-template-columns: 1fr 1fr 1fr; }
.m-ans.c2 { grid-template-columns: 1fr 1fr; }
.m-ans button { height: 50px; border-radius: 10px; border: 1.5px solid var(--border2); background: #fff; font-size: 16px; font-weight: 700; color: var(--fg2); }
.m-ans button.S { background: var(--ok); border-color: var(--ok); color: #fff; }
.m-ans button.N { background: var(--bad); border-color: var(--bad); color: #fff; }
.m-ans button.NA { background: #52525b; border-color: #52525b; color: #fff; }
.m-ans.sm button { height: 44px; font-size: 15px; }
.m-ans.sm button.on { background: #18181b; border-color: #18181b; color: #fff; }
.m-comp { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.m-comp label { font-size: 13.5px; color: var(--fg2); flex: 1; }
.m-comp .m-inp { width: 110px; height: 44px; }
.m-nc { margin-top: 12px; background: var(--bad-bg); border: 1px solid var(--bad-bd); border-radius: 12px; padding: 14px 12px 4px; }
.m-nc .m-txa, .m-nc .m-inp, .m-nc .m-sel { background: #fff; }
.m-nc .m-chip { min-height: 38px; font-size: 13.5px; background: #fff; }
.m-nc .m-chip.on { background: #18181b; }
.m-ph { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.m-ph img { width: 76px; height: 57px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.m-cam { width: 76px; height: 57px; border-radius: 8px; border: 1.5px dashed #a1a1aa; background: #fff; display: grid; place-items: center; color: var(--fg2); font-size: 11px; font-weight: 600; gap: 0; padding: 4px; }
.m-cam .ic { width: 20px; height: 20px; }

.m-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-sum div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; }
.m-sum b { display: block; font-size: 20px; }
.m-sum span { font-size: 12px; color: var(--mfg); }
.m-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 14.5px; line-height: 1.4; width: 100%; text-align: left; }
.m-check .box { width: 26px; height: 26px; border-radius: 7px; border: 2px solid #a1a1aa; flex: none; display: grid; place-items: center; color: #fff; }
.m-check.on .box { background: var(--ok); border-color: var(--ok); }
.m-sig { position: relative; background: #fff; border: 1.5px dashed #a1a1aa; border-radius: 12px; height: 140px; touch-action: none; overflow: hidden; }
.m-sig canvas { width: 100%; height: 100%; display: block; }
.m-sig span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #a1a1aa; font-size: 14px; pointer-events: none; }
.m-sig .clr { position: absolute; right: 8px; top: 8px; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.m-decide { border-radius: 14px; padding: 16px; border: 1px solid; margin-top: 4px; }
.m-decide h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.m-decide h3 .ic { width: 22px; height: 22px; }
.m-decide p { margin: 6px 0 14px; font-size: 14.5px; line-height: 1.4; }

.m-sheet-ovl { position: absolute; inset: 0; background: rgba(9,9,11,.45); z-index: 20; display: flex; align-items: flex-end; }
.m-sheet { width: 100%; max-height: 92%; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 8px 16px 18px; animation: sheet .2s ease-out; }
.m-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: #d4d4d8; margin: 4px auto 12px; }
.m-sheet h3 { font-size: 18px; margin-bottom: 4px; }
.m-sheet > p { margin: 0 0 14px; color: var(--mfg); font-size: 14px; }
@keyframes sheet { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.m-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--border2); border-radius: 12px; margin-bottom: 8px; width: 100%; background: #fff; text-align: left; font-size: 15px; }
.m-radio .o { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #a1a1aa; flex: none; margin-top: 1px; display: grid; place-items: center; }
.m-radio.on { border-color: #18181b; }
.m-radio.on .o { border-color: #18181b; }
.m-radio.on .o::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #18181b; }
.m-radio small { display: block; color: var(--mfg); font-size: 13px; margin-top: 2px; }
.m-radio:disabled { opacity: .45; }

.m-login { position: absolute; inset: 0; display: flex; flex-direction: column; background: #18181b; color: #fafafa; }
.m-login-top { padding: 40px 24px 28px; text-align: center; }
.m-logo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: #fafafa; color: #18181b; display: grid; place-items: center; }
.m-logo .ic { width: 34px; height: 34px; }
.m-login-top h1 { font-size: 24px; }
.m-login-top p { margin: 4px 0 0; color: #a1a1aa; font-size: 14px; }
.m-login-box { flex: 1; background: #f4f4f5; color: var(--fg); border-radius: 24px 24px 0 0; padding: 16px; overflow-y: auto; }
.m-login-foot { text-align: center; font-size: 12px; color: var(--mfg); padding: 16px 0 4px; }
.m-pin { text-align: center; padding-top: 8px; }
.m-pin .dots { display: flex; gap: 14px; justify-content: center; margin: 16px 0 8px; }
.m-pin .dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #52525b; }
.m-pin .dots i.on { background: #18181b; border-color: #18181b; }
.m-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px auto 0; max-width: 300px; }
.m-keys button { height: 58px; border-radius: 14px; border: 1px solid var(--border); background: #fff; font-size: 22px; font-weight: 600; display: grid; place-items: center; }
.m-keys button:active { background: var(--muted); }
.m-keys button.k2 { font-size: 14px; font-weight: 600; }

.m-done { text-align: center; padding: 36px 20px 20px; }
.m-done .big { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.m-done .big .ic { width: 42px; height: 42px; }
.m-done h2 { font-size: 22px; }
.m-done p { color: var(--fg2); font-size: 15px; margin: 8px 0 0; }
.m-kv { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; }
.m-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.m-kv div:last-child { border-bottom: 0; }
.m-kv span { color: var(--mfg); flex: none; }
.m-kv b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.m-tl { list-style: none; margin: 0; padding: 4px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.m-tl li { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--border); position: relative; font-size: 14px; }
.m-tl li:last-child { border-bottom: 0; }
.m-tl li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: #a1a1aa; }
.m-tl small { display: block; color: var(--mfg); font-size: 12.5px; }
.m-insp { position: absolute; inset: 0; background: #fff; z-index: 30; display: flex; flex-direction: column; }
.m-insp .hd { padding: 18px 18px 14px; color: #fff; }
.m-insp .hd small { opacity: .85; font-size: 13px; }
.m-insp .hd h2 { font-size: 26px; margin-top: 2px; }
.m-insp .bd { flex: 1; overflow: auto; padding: 16px 18px; }
.m-qr { width: 132px; height: 132px; margin: 6px auto 4px; display: block; }
#app-toasts { position: absolute; left: 12px; right: 12px; bottom: 76px; z-index: 40; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#app-toasts .toast { max-width: none; font-size: 14px; padding: 12px 14px; border-radius: 12px; }
.flash { position: absolute; inset: 0; background: #fff; z-index: 60; animation: flash .35s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.m-err { color: var(--bad); font-size: 13px; font-weight: 500; margin: 6px 2px 0; }
.m-fld.err .m-inp, .m-fld.err .m-sel { border-color: var(--bad); }
.m-decide.ok { background: var(--ok-bg); border-color: var(--ok-bd); } .m-decide.ok h3 { color: var(--ok); }
.m-decide.warn { background: var(--warn-bg); border-color: var(--warn-bd); } .m-decide.warn h3 { color: var(--warn); }
.m-decide.bad { background: var(--bad-bg); border-color: var(--bad-bd); } .m-decide.bad h3 { color: var(--bad); }
.m-st.t-ok, .m-st.t-warn, .m-st.t-bad, .m-st.t-info, .m-st.t-neu { border-style: solid; }
body[data-view="lado"] .app-side { display: none; }
/* Anti-viúva no app e nas tabelas */
.m-row .t, .m-row .s, .m-banner span, .m-kv b, .m-q .qx, .m-decide p, .m-done p, .m-hello p, .m-chip, .m-radio, .tbl .sub, .callout p, .kpi .k-s { text-wrap: pretty; }