/* Layout: demo bar, then a collapsible sidebar (256px / 64px) beside the content: title, 4 stat cards, activity (2/3) + indicators (1/3). */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --fg: #151a21;
  --muted: #5b6471;
  --faint: #8a93a0;
  --line: #e3e6ea;
  --soft: #f0f2f5;
  --ok: #1c7a4b;  --ok-bg: #e3f3ea;
  --warn: #9a5b00; --warn-bg: #fdf0d9;
  --bad: #b3261e; --bad-bg: #fbe4e2;
  --info: #1d5fb8; --info-bg: #e5eefb;
  --violet: #6a3fb5; --violet-bg: #efe8fa;
  --brand-l: #1f3a5f; --brand-d: #8fb1dd;
  --brand-soft-l: #e7edf5; --brand-soft-d: #1c2a3d;
  --brand: var(--brand-l);
  --brand-soft: var(--brand-soft-l);
  --on-brand: #ffffff;
  --font-display: "Libre Caslon Text", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(16 24 40 / .05);
  --frame: #1b1d21; --ph-bg: #ffffff; --ph-fg: #111111; --ph-muted: #8a8a8e; --ph-line: #e5e5ea; --ph-soft: #f6f6f8; --ph-red: #ff3b30;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --surface: #161a20; --fg: #e8ebef; --muted: #9aa3ae; --faint: #6f7884; --line: #262c34; --soft: #1d2229;
    --ok: #6fd3a0; --ok-bg: #12301f; --warn: #f2b65a; --warn-bg: #36270f; --bad: #f28b82; --bad-bg: #3a1a17;
    --info: #8ab4f8; --info-bg: #15243a; --violet: #c3a6f5; --violet-bg: #261c3a;
    --brand: var(--brand-d); --brand-soft: var(--brand-soft-d); --on-brand: #0d1014; --shadow: none;
    --ph-bg: #000000; --ph-fg: #f2f2f7; --ph-muted: #8e8e93; --ph-line: #2c2c2e; --ph-soft: #1c1c1e; --frame: #3a3d44; 
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1116; --surface: #161a20; --fg: #e8ebef; --muted: #9aa3ae; --faint: #6f7884; --line: #262c34; --soft: #1d2229;
  --ok: #6fd3a0; --ok-bg: #12301f; --warn: #f2b65a; --warn-bg: #36270f; --bad: #f28b82; --bad-bg: #3a1a17;
  --info: #8ab4f8; --info-bg: #15243a; --violet: #c3a6f5; --violet-bg: #261c3a;
  --brand: var(--brand-d); --brand-soft: var(--brand-soft-d); --on-brand: #0d1014; --shadow: none;
    --ph-bg: #000000; --ph-fg: #f2f2f7; --ph-muted: #8e8e93; --ph-line: #2c2c2e; --ph-soft: #1c1c1e; --frame: #3a3d44; 
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
.app { height: 100%; display: flex; flex-direction: column; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 16px; height: 16px; }

/* Demo: botão flutuante "Demo" que abre os controles (fora do produto) */
.demo { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); top: env(safe-area-inset-top, 0px); font-size: 13px; }
.demobtn { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px 0 10px; border: 0; border-radius: 0 0 10px 10px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .2); opacity: .92; }
.demobtn:hover, .demobtn[aria-expanded="true"] { opacity: 1; }
.demobtn .dot { width: 6px; height: 6px; border-radius: 50%; background: #f5b83d; }
.demopanel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 10px); width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: var(--fg); color: var(--bg); box-shadow: 0 18px 50px rgb(0 0 0 / .3); }
.demo strong { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; opacity: .75; }
.seg { display: inline-flex; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: transparent; color: inherit; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); font-weight: 600; }
.addr { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 14%, transparent); font-family: var(--font-mono); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.demo .note { opacity: .7; }

/* Shell */
.shell { flex: 1; min-height: 0; display: flex; }
.side {
  width: 256px; flex: none;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line); padding: 8px;
  transition: width .25s ease; overflow: hidden;
}
.side.closed { width: 68px; }
.side.closed .logo { width: 44px; height: 44px; }
.title { display: flex; align-items: center; gap: 12px; padding: 8px 4px 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.logo { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: var(--shadow); }
.title .txt { min-width: 0; flex: 1; }
.brandname { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.side.closed .brandname, .side.closed .plan { white-space: nowrap; }
.plan { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.title .chev { color: var(--faint); }
.opts { display: flex; flex-direction: column; gap: 3px; }
.opt { text-align: left;
  position: relative; display: flex; align-items: center; height: 44px; width: 100%;
  border: 0; border-left: 2px solid transparent; border-radius: 8px; background: transparent;
  color: var(--muted); text-decoration: none; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.opt .ico { width: 44px; display: grid; place-items: center; flex: none; }
.opt:hover { background: var(--soft); color: var(--fg); }
.opt[aria-current="page"] { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); }
.badge { position: absolute; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: 11.5px; font-weight: 600; }
.badge.bad { background: var(--bad); color: #fff; }
.sect { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.sect .lbl { padding: 6px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.toggle { margin-top: auto; display: flex; align-items: center; height: 52px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 500; margin-inline: -8px; margin-bottom: -8px; padding: 0 10px; white-space: nowrap; }
.toggle:hover { background: var(--soft); color: var(--fg); }
.toggle .ico { width: 44px; display: grid; place-items: center; flex: none; }
.toggle svg { transition: transform .25s; }
.side:not(.closed) .toggle svg { transform: rotate(180deg); }
.side.closed .hide-closed { display: none; }

.content { flex: 1; min-width: 0; overflow-y: auto; padding-block: 24px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .content { padding-left: 28px; padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.head h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15; }
.head p { color: var(--muted); margin-top: 4px; }
.headtools { display: flex; align-items: center; gap: 10px; flex: none; }
.sq { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; position: relative; flex: none; }
.sq:hover { color: var(--fg); background: var(--soft); }
.sq .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.pad { padding: 22px; }
.card h2 { font-size: 16.5px; font-weight: 600; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.link { border: 0; background: transparent; color: var(--brand); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.link:hover { text-decoration: underline; }

.stats { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; }
.stat { transition: box-shadow .2s; }
.stat:hover { box-shadow: 0 6px 16px rgb(16 24 40 / .08); }
.stat .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tile { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.t-brand { background: var(--brand-soft); color: var(--brand); }
.t-ok { background: var(--ok-bg); color: var(--ok); }
.t-warn { background: var(--warn-bg); color: var(--warn); }
.t-bad { background: var(--bad-bg); color: var(--bad); }
.t-info { background: var(--info-bg); color: var(--info); }
.t-violet { background: var(--violet-bg); color: var(--violet); }
.stat h3 { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.stat .v { font-size: 27px; font-weight: 700; line-height: 1.1; }
.stat .hint { font-size: 13px; margin-top: 6px; color: var(--muted); }
.up { color: var(--ok); } .down { color: var(--bad); }

.grid3 { display: grid; gap: 26px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.acts { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.act { display: flex; align-items: flex-start; gap: 14px; padding: 10px; border-radius: 10px; }
.act:hover { background: var(--soft); }
.act .tile { width: 34px; height: 34px; border-radius: 9px; }
.grow { flex: 1; min-width: 0; }
.act .ttl { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .desc { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act time { padding-top: 2px; font-size: 12px; color: var(--faint); flex: none; white-space: nowrap; }

.meters { display: flex; flex-direction: column; gap: 14px; }
.meter .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 7px; }
.meter .row span:first-child { color: var(--muted); }
.meter .row span:last-child { font-weight: 600; }
.bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; }
.small { font-size: 12px; color: var(--faint); margin-top: 6px; }

.near { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.near li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.near li:first-child { border-top: 0; padding-top: 0; }
.near .ttl { font-size: 13.5px; font-weight: 500; }
.sub { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.pill { flex: none; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.neutral { background: var(--soft); color: var(--muted); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand); border: 2px solid var(--surface); object-fit: cover; }
.av.sm { width: 32px; height: 32px; font-size: 10.5px; }
.av.lg { width: 48px; height: 48px; font-size: 14px; }
.avs { display: flex; } .avs .av + .av { margin-left: -9px; }
.actav { position: relative; flex: none; }
.actav .tile { position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--surface); }
.actav .tile svg { width: 11px; height: 11px; }
.act .av { width: 40px; height: 40px; }
.logo img, .sq img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.av-me { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq.meav { padding: 0; overflow: hidden; border-radius: 50%; }

/* Avisos (sino) */
.notif-wrap { position: relative; }
.badgecount { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 380px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgb(0 0 0 / .18); overflow: hidden; }
.pop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.pop-h h2 { font-size: 15px; }
.pop-list { list-style: none; margin: 0; padding: 6px; max-height: min(70vh, 460px); overflow-y: auto; }
.pop-grp { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 4px; }
.nitem { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: inherit; text-decoration: none; }
.nitem:hover { background: var(--soft); }
.nitem .tile { width: 34px; height: 34px; border-radius: 9px; }
.nitem .ttl { font-weight: 600; font-size: 13.5px; }
.nitem.seen { opacity: .62; }
.nitem .new { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; margin-top: 6px; }
.pop-f { padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* Processos */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 12px; height: 40px; flex: 1 1 260px; min-width: 0; color: var(--muted); }
.field input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; color: var(--fg); }
select { height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 10px; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; padding: 12px 18px; border-bottom: 1px solid var(--line); }
td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.empty { padding: 28px 18px; color: var(--muted); text-align: center; }

/* Agenda */
.day { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.day:first-child { border-top: 0; padding-top: 0; }
.date .d { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; }
.date .w { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ev { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 9px; background: var(--soft); }
.ev + .ev { margin-top: 8px; }
.ev .time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 44px; flex: none; padding-top: 1px; }
.ev .ttl { font-weight: 500; }
.ics { display: flex; flex-direction: column; gap: 12px; }
.icsurl { display: flex; gap: 8px; align-items: center; background: var(--soft); border-radius: 9px; padding: 8px 8px 8px 12px; min-width: 0; }
.icsurl code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; }
.btn { border: 0; border-radius: 9px; padding: 8px 14px; background: var(--brand); color: var(--on-brand); font-weight: 600; cursor: pointer; white-space: nowrap; }
.steps { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.steps b { color: var(--fg); font-weight: 500; }
.tabs { display: inline-flex; background: var(--soft); border-radius: 9px; padding: 3px; flex: none; }
.tabs button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.tabs button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }


/* Calendário */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .chip { width: 12px; height: 12px; padding: 0; border-radius: 4px; display: inline-block; }
.calwrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal .wd { padding: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); background: var(--soft); font-weight: 600; }
.cell { min-height: 96px; min-width: 0; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); cursor: pointer; text-align: left; }
.cell.c0 { border-left: 0; }
.cell:hover { background: var(--soft); }
.cell[aria-pressed="true"] { background: var(--brand-soft); }
.cell .n { font-size: 12px; font-weight: 600; color: var(--fg); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.cell.past .n { color: var(--faint); }
.cell.today .n { background: var(--brand); color: var(--on-brand); }
.chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chip { display: block; font-size: 11px; line-height: 1.3; padding: 2px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.chip.prazo { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.aud { background: var(--brand-soft); color: var(--brand); }
.chip.comp { background: var(--violet-bg); color: var(--violet); }
.chip.done { background: var(--soft); color: var(--faint); text-decoration: line-through; }
.legend .chip.done { background: var(--faint); }
.more { font-size: 11px; color: var(--muted); padding-left: 5px; }
.chip.pub { background: var(--info-bg); color: var(--info); box-shadow: inset 2px 0 0 var(--info); cursor: pointer; }
.chip.pub.lida { background: var(--soft); color: var(--faint); box-shadow: inset 2px 0 0 var(--faint); }
.chip.pub:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pb-item.pubc { cursor: pointer; box-shadow: inset 3px 0 0 var(--info); }
.pb-item.pubc.lida { box-shadow: inset 3px 0 0 var(--faint); opacity: .78; }
.pubday { margin-top: 12px; display: grid; gap: 8px; }
.pubcard { display: grid; gap: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: inset 3px 0 0 var(--info); cursor: pointer; }
.pubcard.lida { box-shadow: inset 3px 0 0 var(--faint); background: var(--soft); }
.pubcard.lida .cnj, .pubcard.lida .pill { opacity: .7; }
.pubcard .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pubcard .cnj { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .01em; overflow-wrap: anywhere; color: var(--info); }
.pubcard.lida .cnj { color: var(--muted); }
.pubcard .l2 { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pubcard .l3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pubcard .l3 .link { font-size: 12px; }
.pubcard:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.dayinfo h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.dayinfo .ev { flex-wrap: wrap; }
.grid2 { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 26px; align-items: start; }
.devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.devices li { display: flex; align-items: center; gap: 12px; }
.btn.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
details summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13px; }
details .steps { margin-top: 8px; }

/* Prévia do iPhone (ilustração) */
.phone { width: 280px; max-width: 100%; margin: 0 auto; border: 10px solid var(--frame); border-radius: 38px; background: var(--ph-bg); color: var(--ph-fg); overflow: hidden; font-family: -apple-system, "SF Pro Text", "Helvetica Neue", var(--font-body); }
.ph-status { display: flex; justify-content: space-between; padding: 10px 20px 4px; font-size: 12px; font-weight: 600; }
.ph-status span:last-child { letter-spacing: -1px; font-size: 10px; }
.ph-head { display: flex; justify-content: space-between; padding: 6px 14px; color: var(--ph-red); font-size: 15px; }
.ph-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 4px 8px 10px; border-bottom: 1px solid var(--ph-line); }
.ph-week small { display: block; font-size: 9.5px; color: var(--ph-muted); margin-bottom: 4px; }
.ph-week b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 500; font-size: 14px; }
.ph-week b.t { background: var(--ph-red); color: #fff; font-weight: 600; }
.ph-list { padding: 4px 0 8px; min-height: 250px; }
.ph-day { font-size: 12px; font-weight: 600; color: var(--ph-muted); padding: 10px 14px 4px; background: var(--ph-soft); }
.ph-ev { display: flex; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--ph-line); font-size: 13px; }
.ph-ev i { width: 3px; border-radius: 2px; background: var(--brand-l); flex: none; }
.ph-ev .tm { width: 52px; flex: none; color: var(--ph-muted); font-size: 11.5px; line-height: 1.35; }
.ph-ev .tt { min-width: 0; line-height: 1.3; }
.ph-ev .tt small { display: block; color: var(--ph-muted); font-size: 11px; }
.ph-foot { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 10px; font-size: 11.5px; color: var(--ph-muted); border-top: 1px solid var(--ph-line); }
.ph-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-l); }

/* Configurações */
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 18px; align-items: center; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.swatch { display: inline-flex; align-items: center; gap: 8px; }
.swatch i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); }

@media (max-width: 1150px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .calwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .side.closed { position: fixed; z-index: 20; inset: 0 0 0 auto; height: auto; width: 256px; transform: translateX(100%); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); transition: transform .2s; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); }
  .side.open { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .25); }
  .side.closed .hide-closed { display: revert; }
  .side.closed .badge.hide-closed { display: grid; }
  .toggle { display: none; }
  .scrim { position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / .4); }
  .head h1 { font-size: 23px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .head { flex-wrap: wrap; }
  .cell { min-height: 56px; padding: 4px; align-items: center; }
  .cal .wd { padding: 6px 2px; text-align: center; font-size: 10px; }
  .chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .chips .chip { width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; background: currentColor; }
  .chips .chip.done { background: var(--faint); }
  .chips .chip.pub { box-shadow: none; pointer-events: none; }
  .chips .chip.pub.lida { color: var(--faint); }
  .more { display: none; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kv dd { margin-bottom: 10px; }
  .pad { padding: 18px; }
  .pop { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto; max-width: none; }
  .cardhead { flex-wrap: wrap; }
}
/* Barra de tarefas flutuante (substitui o menu lateral) */
.side, .scrim { display: none !important; }
.dock { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 2px; padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 12px 34px rgb(16 24 40 / .16), 0 2px 6px rgb(16 24 40 / .06); max-width: calc(100vw - 20px); }
.bn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 78px; height: 56px; min-width: 0; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 500; cursor: pointer; }
.bn:hover { background: var(--soft); color: var(--fg); }
.bn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn[aria-current="page"], .bn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.bn .badge { position: absolute; top: 4px; left: calc(50% + 6px); right: auto; min-width: 18px; height: 18px; font-size: 10.5px; font-style: normal; }
@media (max-width: 480px) { .bn { width: calc((100vw - 48px) / 5); } }
.start { position: absolute; left: 0; bottom: calc(100% + 12px); width: min(320px, calc(100vw - 20px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 60px rgb(0 0 0 / .22); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.st-head, .st-me { display: flex; align-items: center; gap: 12px; padding: 10px; }
.st-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.st-head img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: none; }
.st-head b, .st-me b { display: block; font-weight: 600; line-height: 1.25; }
.st-head b { font-family: var(--font-display); font-size: 15px; }
.st-head span, .st-me span:not(#st-av) { font-size: 12.5px; color: var(--muted); }
.st-me .av { width: 40px; height: 40px; }
.st-list { display: flex; flex-direction: column; gap: 2px; }
.st-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font-weight: 500; cursor: pointer; text-align: left; }
.st-item:hover { background: var(--soft); }
.st-item i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.st-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.st-out { color: var(--bad); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; height: 48px; }
.st-out:hover { background: var(--bad-bg); }
.bstart img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.bstart[aria-expanded="true"] img, .bstart:hover img { box-shadow: 0 0 0 2px var(--brand); }
.dsep { width: 1px; align-self: stretch; margin: 8px 2px; background: var(--line); }
.hlogo { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: none; }
.shell .content { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
body .fab { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
body .fab span { display: none; }
body .fab svg { width: 26px; height: 26px; }
body .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .side, .toggle svg, .stat { transition: none; } }
/* Troca de tela: a nova página entra deslizando (para a esquerda ao avançar no menu, para a direita ao voltar) */
@keyframes pgIn { from { opacity: 0; transform: translateX(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pgBack { from { opacity: 0; transform: translateX(-28px) scale(.985); } to { opacity: 1; transform: none; } }
.pg-in { animation: pgIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.pg-in.pg-back { animation-name: pgBack; }
@media (prefers-reduced-motion: reduce) { .pg-in { animation: pgFade .2s ease both; } @keyframes pgFade { from { opacity: 0; } to { opacity: 1; } } }
/* Processo aberto: a linha expande e mostra dados, andamentos e comentários da equipe */
tr.prow { cursor: pointer; }
tr.prow:hover td { background: var(--soft); }
tr.prow[aria-expanded="true"] td { background: var(--brand-soft); border-bottom-color: transparent; }
.xbtn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.xbtn svg { transition: transform .18s; }
tr.prow[aria-expanded="true"] .xbtn svg { transform: rotate(180deg); }
.ccount { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; margin-top: 4px; }
tr.pdet > td { padding: 0; background: var(--bg); }
.det { position: sticky; left: 0; max-width: calc(100vw - 32px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; padding: 18px; }
.det .card { padding: 18px; }
.det h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.det h3 .pill { font-weight: 600; }
.det .kv { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 14px; margin-bottom: 18px; font-size: 13.5px; }
.det .kv .avs { align-items: center; }
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tl li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--line); }
.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }
.tl .ttl { font-weight: 500; font-size: 13.5px; }
.coms { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.com { display: flex; gap: 10px; align-items: flex-start; }
.com .bub { flex: 1; min-width: 0; background: var(--soft); border-radius: 4px 12px 12px 12px; padding: 9px 12px; }
.com .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 3px; }
.com .who b { font-weight: 600; font-size: 13px; }
.com .who span { color: var(--faint); font-size: 12px; }
.com p { font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.com.mine .bub { background: var(--brand-soft); }
.com .mention { color: var(--brand); font-weight: 600; }
.cform { display: flex; gap: 10px; align-items: flex-start; }
.cform .grow { display: flex; flex-direction: column; gap: 8px; }
.cform textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 13.5px; }
.cform .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cform .btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px) { .det { grid-template-columns: minmax(0, 1fr); padding: 12px; } .det .kv { grid-template-columns: 110px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .xbtn svg { transition: none; } }
/* Clientes: Kanban dos contatos que chegam pelo site */
.kbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kbar .sub { max-width: 640px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.kcol { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; transition: outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.kcol.over { outline-color: var(--brand); }
.kcol header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; padding: 2px 2px 4px; }
.kcol header .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kcol header .pill { margin-left: auto; }
.kcol .hint { font-size: 12px; color: var(--muted); margin: -4px 2px 2px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); cursor: grab; display: flex; flex-direction: column; gap: 8px; }
.kcard.dragging { opacity: .45; }
.kcard .top { display: flex; align-items: flex-start; gap: 8px; }
.kcard .nm { font-weight: 600; font-size: 13.5px; }
.kcard .msg { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kcard.open .msg { -webkit-line-clamp: unset; display: block; }
.kcard .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.kcard .meta .grow { min-width: 0; }
.kcard .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kcard select { font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; height: 30px; min-width: 0; width: auto; background: var(--surface); max-width: 140px; }
.kcard .kmore { white-space: nowrap; }
.kcard .contato { font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.kcard .nores { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--faint); font-size: 11px; }
@media (max-width: 860px) { .kanban { grid-template-columns: repeat(4, minmax(250px, 82vw)); scroll-snap-type: x mandatory; } .kcol { scroll-snap-align: start; } }
.kcard .kmore { border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; text-align: left; }
/* Esclarecer com IA, dentro do processo aberto */
.det .aicard { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }
.aitop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.aitop .grow { min-width: 200px; }
.aitop .ttl { font-weight: 600; font-size: 14.5px; }
.aibtn { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--violet); color: #fff; font-weight: 600; border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
:root[data-theme="dark"] .aibtn { color: #15101f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aibtn { color: #15101f; } }
.aibtn:disabled { opacity: .6; cursor: default; }
.aiout { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.aiout .sec b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--violet); margin-bottom: 2px; }
.aiout .sec p { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.aiout .caret { display: inline-block; width: 7px; height: 15px; background: var(--violet); vertical-align: -2px; margin-left: 1px; animation: aic .8s steps(2) infinite; }
@keyframes aic { 50% { opacity: 0; } }
.aistat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--violet); margin-top: 12px; }
.aistat .dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 3px; animation: aib 1s infinite; }
.aistat .dots i:nth-child(2) { animation-delay: .15s; } .aistat .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aib { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.aifoot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.aifoot .sub { margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .aiout .caret, .aistat .dots i { animation: none; } }
/* Novo processo: botão flutuante e formulário */
.fab { position: fixed; z-index: 30; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 14.5px; cursor: pointer; box-shadow: 0 6px 20px rgb(16 24 40 / .22); }
.fab svg { width: 22px; height: 22px; }
.fab:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .fab { width: 56px; height: 56px; padding: 0; justify-content: center; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .fab span { display: none; } }
.content { padding-bottom: 96px; }
dialog.np { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 1px solid var(--line); border-radius: 16px; padding: 0; background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / .28); }
dialog.np::backdrop { background: rgb(10 14 20 / .5); }
.np form { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.np .nph { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.np .nph h2 { font-size: 17px; font-weight: 600; font-family: var(--font-display); }
.np .x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); flex: none; }
.np .npb { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.np .npf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); }
.np .npf .sub { margin-right: auto; }
.np .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.np .full { grid-column: 1 / -1; }
.np label.f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.np label.f small { font-weight: 400; color: var(--faint); }
.np input[type=text], .np input[type=date], .np select, .np textarea { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; font-weight: 400; }
.np textarea { height: auto; min-height: 60px; padding: 9px 12px; resize: vertical; }
.np input.filled { background: var(--violet-bg); border-color: color-mix(in srgb, var(--violet) 35%, var(--line)); }
.np input[aria-invalid=true] { border-color: var(--bad); }
.cnjrow { display: flex; gap: 10px; flex-wrap: wrap; }
.cnjrow input { flex: 1 1 260px; font-family: var(--font-mono) !important; letter-spacing: .02em; }
.cnjbox { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 10px; }
.cnjbox .lbl { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.cnjbox .samples { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--muted); align-items: center; }
.cnjbox .samples button { border: 1px dashed var(--line); background: var(--surface); border-radius: 7px; padding: 3px 8px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--brand); }
.cnjmsg { font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.cnjmsg.bad { color: var(--bad); } .cnjmsg.ok { color: var(--ok); } .cnjmsg.load { color: var(--info); }
.cnjmsg .dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 3px; animation: aib 1s infinite; }
.cnjmsg .dots i:nth-child(2) { animation-delay: .15s; } .cnjmsg .dots i:nth-child(3) { animation-delay: .3s; }
.found { border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.found b { color: var(--ok); }
.found ul { margin: 6px 0 0; padding-left: 18px; color: var(--fg); }
.found li { margin: 2px 0; }
.np fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.np legend { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.rchips label { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; font-size: 13px; }
.rchips input { position: absolute; opacity: 0; pointer-events: none; }
.rchips label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.rchips label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.rchips .av { width: 28px; height: 28px; font-size: 10px; border: 0; }
.leadtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); font-weight: 600; }
.sect-t { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / .2); max-width: calc(100vw - 32px); }
.kcard .kact { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); font-weight: 600; font-size: 12.5px; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.kcard .kact.primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
tr.novo td { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { background: var(--ok-bg); } }
@media (max-width: 560px) { .np .g2 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { tr.novo td, .cnjmsg .dots i { animation: none; } }
/* Login do painel (equipe do escritório) */
.login { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); }
.lg-art { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 5vw, 56px); min-height: 100%; background: var(--brand-l); }
.lg-art > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-l) 40%, transparent) 0%, color-mix(in srgb, var(--brand-l) 72%, transparent) 50%, color-mix(in srgb, var(--brand-l) 94%, #000) 100%); }
.lg-art > :not(.bg) { position: relative; z-index: 1; }
.lg-brand { display: flex; align-items: center; gap: 14px; }
.lg-brand img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.lg-brand b { display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.lg-brand span { font-size: 13px; opacity: .75; }
.lg-art blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; max-width: 460px; }
.lg-art .lg-foot { font-size: 13px; opacity: .72; }
.lg-main { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 56px) max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px)); }
.lg-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.lg-box h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; }
.lg-box > p { color: var(--muted); margin-top: -8px; }
.lg-box form { display: flex; flex-direction: column; gap: 14px; }
.lg-box label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.lg-box input[type=email], .lg-box input[type=password], .lg-box input[type=text] { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: var(--surface); color: var(--fg); font-size: 15px; font-weight: 400; }
.lg-box input:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
.lg-box input[aria-invalid=true] { border-color: var(--bad); }
.lg-pw { position: relative; }
.lg-pw input { padding-right: 48px !important; }
.lg-pw button { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.lg-pw button[aria-pressed=true] { color: var(--brand); }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.lg-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
/* ==== BLOCO A (CSS) ==== */
/* Configurações em seções (Aparência, Minha conta, Atalhos, Agenda, Escritório) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-tabs { position: sticky; top: -24px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; margin: -8px -4px 18px; padding: 8px 4px; background: var(--bg); scrollbar-width: none; }
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs button { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 500; cursor: pointer; }
.a-tabs button:hover { color: var(--fg); }
.a-tabs button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.a-cfg { display: flex; flex-direction: column; gap: 22px; max-width: 980px; }
.a-sec { scroll-margin-top: 64px; }
.a-sec.a-flash { animation: aFlash 1.4s ease; }
@keyframes aFlash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); } 100% { box-shadow: var(--shadow); } }
.a-sech { margin-bottom: 6px; }
.a-sech .sub { margin-top: 4px; font-size: 13px; }
.a-sec .kv { margin-top: 16px; }
.a-h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 20px 0 10px; }
.a-p { margin: -4px 0 10px; }
.a-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.a-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.a-opts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
.a-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.a-opt:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.a-opt input { position: absolute; top: 14px; right: 12px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.a-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.a-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.a-opt b { font-weight: 600; margin-top: 6px; }
.a-prev { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; height: 64px; padding: 8px; border-radius: 9px; background: var(--soft); margin-right: 28px; }
.a-prev i { border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.a-prev i:first-child { grid-column: 1 / -1; background: var(--brand-soft); border-color: transparent; }
.a-prev-vidro { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 45%, var(--bg)), color-mix(in srgb, var(--brand) 10%, var(--bg))); }
.a-prev-vidro i { background: color-mix(in srgb, var(--surface) 55%, transparent); border-color: rgb(255 255 255 / .5); }
.a-prev-compacto { gap: 2px; padding: 5px; }
.a-prev-compacto i { border-radius: 2px; }
.a-prev-dock, .a-prev-side { display: block; }
.a-prev-dock i, .a-prev-side i { position: absolute; border: 0; }
.a-prev-dock i:first-child { left: 30%; right: 30%; bottom: 7px; height: 10px; border-radius: 6px; background: var(--brand); grid-column: auto; }
.a-prev-dock i + i, .a-prev-side i + i { left: 8px; right: 8px; top: 8px; height: 22px; background: var(--surface); border: 1px solid var(--line); }
.a-prev-side i:first-child { left: 6px; top: 6px; bottom: 6px; width: 22%; border-radius: 5px; background: var(--brand); grid-column: auto; }
.a-prev-side i + i { left: calc(22% + 12px); }
.a-cores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.a-cor { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; position: relative; }
.a-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); }
.a-cor[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.a-marca::before { content: "Marca"; position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; }
.a-cores .a-marca { margin-right: 6px; margin-bottom: 12px; }
.a-livre { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 1px dashed var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); }
.a-livre input { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.a-livre input::-webkit-color-swatch-wrapper { padding: 0; }
.a-livre input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.a-livre input::-moz-color-swatch { border: 0; border-radius: 50%; }
.a-corinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.a-conta { display: flex; gap: 18px; align-items: flex-start; margin-top: 14px; }
.a-conta b { display: block; font-size: 15px; }
.a-conta .grow > .sub { display: block; }
.av.a-big { width: 88px; height: 88px; font-size: 26px; border: 0; }
.a-file { position: relative; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.a-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.a-file:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.a-row + .sub { display: block; margin-top: 8px; }
.a-dockgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.a-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a-list li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 8px 5px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.a-list li.sub { border-style: dashed; justify-content: center; }
.a-list .tile { width: 32px; height: 32px; border-radius: 8px; }
.a-list .grow { font-weight: 500; min-width: 0; }
.a-list .link:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.a-ib { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; }
.a-ib:hover:not(:disabled) { color: var(--fg); background: var(--soft); }
.a-ib:disabled { opacity: .35; cursor: default; }
.a-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.a-check { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.a-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.a-check:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.a-agstate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); }
.a-agstate.on { background: var(--ok-bg); }
.a-agstate b { display: block; }
.a-agstate .grow { min-width: 200px; flex: 1; }
.a-steps { gap: 10px; }
.a-steps .icsurl { margin-top: 6px; }
.a-plinha { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 13.5px; }
.a-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.a-plano { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.a-plano.atual { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.a-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.a-ph b { font-weight: 600; font-size: 15px; }
.a-preco .num { font-size: 22px; font-weight: 700; }
.a-plano .btn { margin-top: auto; }
.a-uso { margin-top: auto; font-weight: 500; }
.a-off { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; }
.a-off p { flex: 1 1 220px; }
/* Faixa: agenda não ligada ao celular */
.a-aviso { display: flex; align-items: center; gap: 12px; margin: -10px 0 20px; padding: 8px 8px 8px 10px; border: 1px solid color-mix(in srgb, var(--info) 25%, var(--line)); border-radius: 12px; background: var(--info-bg); font-size: 13.5px; }
.a-aviso .tile { width: 32px; height: 32px; border-radius: 8px; background: var(--surface); }
.a-aviso p { flex: 1; min-width: 0; }
.a-aviso .btn { padding: 7px 12px; font-size: 13px; }
.a-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.a-x:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
/* Menu (#start): ações rápidas e telas que não estão na barra */
.st-acoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 6px; }
.a-acao { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.a-acao:hover { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.st-lbl { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
#st-telas { border-top: 1px solid var(--line); padding-top: 4px; }
#st-telas:empty { display: none; }
.start .st-list + .st-list { border-top: 1px solid var(--line); padding-top: 4px; }
@media (max-width: 480px) { .dock .bn { width: calc((100vw - 40px) / var(--a-n, 6)); } }
/* Menu lateral (escolha da pessoa; só a partir de 700px) */
html[data-menu="side"] .side { display: flex !important; position: relative; inset: auto; height: auto; transform: none; box-shadow: none; padding: 8px; overflow-x: hidden; overflow-y: auto; }
html[data-menu="side"] .side.closed { width: 68px; }
html[data-menu="side"] .side.closed .hide-closed, html[data-menu="side"] .side.closed .badge.hide-closed { display: none; }
html[data-menu="side"] .toggle { display: flex; }
html[data-menu="side"] .dock { display: none; }
html[data-menu="side"] #side-me .av { width: 30px; height: 30px; font-size: 10.5px; border: 0; }
html[data-menu="side"] #side-me[aria-expanded="true"] { background: var(--soft); color: var(--fg); }
html[data-menu="side"] .start.a-float { position: fixed; z-index: 36; left: var(--a-left, 80px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
html[data-menu="side"] .shell .content { padding-bottom: 96px; }
html[data-menu="side"] body .fab { width: auto; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html[data-menu="side"] body .fab span { display: inline; }
html[data-menu="side"] body .fab svg { width: 22px; height: 22px; }
html[data-menu="side"] body .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html:not([data-menu="side"]) #side-me { display: none; }
/* Layout Compacto: menos espaço, cantos menores (o raio vem de --radius = 8px) */
:root[data-layout="compacto"] .content { padding-top: 14px; }
:root[data-layout="compacto"] .head { margin-bottom: 14px; }
:root[data-layout="compacto"] .head h1 { font-size: 22px; }
:root[data-layout="compacto"] .pad { padding: 14px 16px; }
:root[data-layout="compacto"] .stats { gap: 12px; margin-bottom: 14px; }
:root[data-layout="compacto"] .stat .top { margin-bottom: 8px; }
:root[data-layout="compacto"] .stat .v { font-size: 23px; }
:root[data-layout="compacto"] .grid3, :root[data-layout="compacto"] .grid2 { gap: 14px; }
:root[data-layout="compacto"] .grid2 { margin-top: 14px; }
:root[data-layout="compacto"] .stack, :root[data-layout="compacto"] .a-cfg { gap: 14px; }
:root[data-layout="compacto"] .cardhead { margin-bottom: 10px; }
:root[data-layout="compacto"] th { padding: 8px 12px; }
:root[data-layout="compacto"] td { padding: 8px 12px; }
:root[data-layout="compacto"] .tile { width: 32px; height: 32px; border-radius: 7px; }
:root[data-layout="compacto"] .sq { width: 36px; height: 36px; border-radius: 7px; }
:root[data-layout="compacto"] .btn { border-radius: 6px; padding: 6px 12px; }
:root[data-layout="compacto"] .a-opt, :root[data-layout="compacto"] .a-plano, :root[data-layout="compacto"] .a-list li { border-radius: 7px; }
:root[data-layout="compacto"] .opt { height: 38px; border-radius: 6px; }
:root[data-layout="compacto"] .dock { padding: 4px; border-radius: 14px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
:root[data-layout="compacto"] .bn { height: 46px; border-radius: 10px; gap: 2px; }
:root[data-layout="compacto"] .bstart img { width: 22px; height: 22px; border-radius: 6px; }
:root[data-layout="compacto"]:not([data-menu="side"]) body .fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
:root[data-layout="compacto"]:not([data-menu="side"]) body .toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
:root[data-layout="compacto"] .a-aviso { margin: -4px 0 14px; }
@media (max-width: 860px) { .a-opts, .a-planos { grid-template-columns: minmax(0, 1fr); } .a-dockgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .a-opts2 { grid-template-columns: minmax(0, 1fr); }
  .a-conta { flex-direction: column; gap: 12px; }
  .a-aviso { flex-wrap: wrap; }
  .a-aviso p { flex-basis: calc(100% - 90px); }
  .a-aviso .btn { margin-left: 44px; }
  .a-tabs { top: -24px; }
}
.lg-row input { width: 17px; height: 17px; accent-color: var(--brand); }
.lg-go { height: 48px; border: 0; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 15px; cursor: pointer; }
.lg-go:disabled { opacity: .6; cursor: default; }
.lg-err { color: var(--bad); font-size: 13.5px; background: var(--bad-bg); border-radius: 9px; padding: 9px 12px; }
.lg-info { color: var(--fg); font-size: 13.5px; background: var(--info-bg); border-radius: 9px; padding: 9px 12px; }
.lg-demo { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.lg-demo b { color: var(--fg); font-weight: 600; }
.lg-demo code { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); overflow-wrap: anywhere; }
.lg-back { align-self: flex-start; color: var(--muted); font-size: 13.5px; }
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .lg-art { min-height: 0; padding: 24px 20px; }
  .lg-art blockquote, .lg-art .lg-foot { display: none; }
  .lg-main { align-items: flex-start; padding-top: 28px; }
}
/* ==== BLOCO B (CSS) ==== */
/* Clientes em pipelines, cores de fase, notas, painel lateral e tela Contatos */
:root { --b-pink: #b4236b; --b-orange: #b5470c; --b-teal: #0f7470; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --b-pink: #f48fb8; --b-orange: #f5a06a; --b-teal: #6fd6d0; } }
:root[data-theme="dark"] { --b-pink: #f48fb8; --b-orange: #f5a06a; --b-teal: #6fd6d0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ktools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpipes { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.kpipe { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 999px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.kpipe .num { font-size: 12px; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 1px 7px; }
.kpipe[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.kpipe[aria-pressed="true"] .num { background: color-mix(in srgb, var(--on-brand) 22%, transparent); color: inherit; }
.kpipe.add { border-style: dashed; color: var(--brand); }
.ktools [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.kacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kacts .btn, .ctools .btn, .kdr-acts .btn, .kdr-ul .btn { display: inline-flex; align-items: center; gap: 6px; }
.kacts .btn { height: 38px; }
.kacts .kcfgbtn { width: 38px; padding: 0; justify-content: center; }
.klock { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 600; white-space: nowrap; }
.kbar #kdesc { max-width: 760px; }
.kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); }
@media (max-width: 860px) { .kanban { grid-template-columns: none; grid-auto-columns: minmax(250px, 82vw); } }
.kcol { border-top: 3px solid var(--fc, var(--line)); }
.kcol header .dot { background: var(--fc); }
.kcard { cursor: pointer; }
.kcard .knm { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--fg); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.kcard .knm:hover { color: var(--brand); text-decoration: underline; }
.kcard .foot { flex-wrap: wrap; }
.kcard .foot select { margin-left: auto; }
.knotes { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; height: 28px; padding: 0 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.knotes:hover { color: var(--brand); border-color: var(--brand); }
.ktags { display: flex; flex-wrap: wrap; gap: 4px; }
.ktag { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.kval { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.knota { font-size: 12.5px; background: var(--soft); border-left: 3px solid var(--line); border-radius: 6px; padding: 6px 8px; color: var(--muted); overflow-wrap: anywhere; }
.knota b { color: var(--fg); font-weight: 600; }
.kmail { overflow-wrap: anywhere; }
.kadd { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 10px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.kadd:hover { color: var(--brand); border-color: var(--brand); }
.kfp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 15%, var(--surface)); color: color-mix(in srgb, var(--fc) 70%, var(--fg)); white-space: nowrap; }
.kfp i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); flex: none; }
.kbad { background: var(--bad); color: var(--surface); }
.kbadl, .kdr .link.kbadl { color: var(--bad); display: inline-flex; align-items: center; gap: 5px; }
.kchk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); font-weight: 400; cursor: pointer; }
.np label.f.kchk { flex-direction: row; color: var(--fg); font-weight: 400; font-size: 14px; }
.kchk input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin: 0; }
.kcfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
/* Contatos */
.ctools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.ctools .btn { height: 40px; }
.kseg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface); }
.kseg button { border: 0; background: transparent; padding: 0 12px; height: 32px; border-radius: 7px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; }
.kseg button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.ct-count { margin: 0 2px 10px; }
.ct-head, .ct-row { display: grid; grid-template-columns: minmax(180px, 2.1fr) minmax(150px, 1.5fr) minmax(100px, 1fr) minmax(140px, 1.4fr) 48px 96px; gap: 14px; align-items: center; }
.ct-head { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-list li + li { border-top: 1px solid var(--line); }
.ct-row { width: 100%; border: 0; background: transparent; text-align: left; padding: 12px 18px; cursor: pointer; color: var(--fg); font: inherit; }
.ct-row:hover { background: var(--soft); }
.ct-card { overflow: hidden; }
.ct-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-who b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ct-who .sub, .ct-con > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ct-con, .ct-fase { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.ct-vazio { padding: 40px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-align: center; }
@media (max-width: 1180px) { .ct-head, .ct-row { grid-template-columns: minmax(170px, 2fr) minmax(150px, 1.5fr) minmax(140px, 1.4fr) 44px 92px; } .ct-head span:nth-child(3), .ct-ori { display: none; } }
@media (max-width: 760px) {
  .ct-head { display: none; }
  .ct-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .ct-list { display: flex; flex-direction: column; gap: 10px; }
  .ct-list li + li { border-top: 0; }
  .ct-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who resp" "con con" "fase fase" "ori proc"; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; gap: 10px; }
  .ct-who { grid-area: who; } .ct-resp { grid-area: resp; } .ct-proc { grid-area: proc; justify-self: end; }
  .ct-ori { grid-area: ori; display: block; }
  .ct-con { grid-area: con; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .ct-fase { grid-area: fase; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ctools .field { flex-basis: 100%; }
  .ctools select { flex: 1; min-width: 0; }
}
/* Painel lateral do cartão e do contato */
dialog.kdr { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw); max-width: 100vw; border: 0; border-left: 1px solid var(--line); padding: 0; background: var(--surface); color: var(--fg); box-shadow: -12px 0 40px rgb(0 0 0 / .18); }
dialog.kdr::backdrop { background: rgb(10 14 20 / .4); }
dialog.kdr[open] { animation: kdrIn .22s ease-out; }
@keyframes kdrIn { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.kdr[open] { animation: none; } }
.kdr-in { display: flex; flex-direction: column; height: 100%; }
.kdr-h { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.kdr-h h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.kdr-h .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.kdr .x { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.kdr-b { flex: 1; overflow-y: auto; padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 20px; }
.kdr-f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.kdr-f input, .kdr-f select, .kdr-f textarea, .kdr-nf textarea { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; font-weight: 400; }
.kdr-f textarea, .kdr-nf textarea { height: auto; min-height: 64px; padding: 9px 12px; resize: vertical; }
.kdr-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kdr-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kdr-s { display: flex; flex-direction: column; gap: 10px; }
.kdr-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kdr-sh h3 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kdr-sh .link { display: inline-flex; align-items: center; gap: 5px; }
.kdl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.kdl dt { color: var(--muted); }
.kdl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kdl a { color: var(--brand); }
.kdr-p { display: inline-flex; align-items: center; gap: 8px; }
.kdr-msg { background: var(--soft); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; overflow-wrap: anywhere; }
.kdr-nf { display: flex; gap: 10px; align-items: flex-start; }
.kdr-nf .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kdr-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kdr-notas li { display: flex; gap: 10px; }
.kdr-notas .who { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.kdr-notas .who .link { margin-left: auto; }
.kdr-notas p { font-size: 13.5px; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kdr-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kdr-ul li { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.kdr-ul li b { margin-right: 6px; }
.kdr-del { border-top: 1px solid var(--line); padding-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kdr-err { color: var(--bad); font-size: 13px; }
.kdr-err:empty { display: none; }
.kdr-row { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .kcfg, .kdr-g2 { grid-template-columns: minmax(0, 1fr); } .kdl { grid-template-columns: 96px minmax(0, 1fr); } dialog.kdr { border-left: 0; } }
/* Editor de fases */
.ke-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ke-row { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-left: 4px solid var(--fc); border-radius: 10px; padding: 10px; background: var(--surface); }
.ke-row.dragging { opacity: .45; }
.ke-row.over { outline: 2px dashed var(--brand); outline-offset: 2px; }
.ke-grip { color: var(--faint); cursor: grab; padding-top: 11px; }
.ke-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ke-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ke-top .pill { display: inline-flex; align-items: center; gap: 3px; }
.ke-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); flex: none; }
.np .ke-top input[type=text] { flex: 1 1 150px; min-width: 0; width: auto; }
@media (max-width: 560px) { .ke-grip { display: none; } .ke-row { padding: 10px 8px; gap: 8px; } }
.np input.ke-dica[type=text] { height: 34px; font-size: 13px; }
.ke-bot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.np .ke-bot input.ke-dica[type=text] { flex: 1 1 200px; width: auto; min-width: 0; }
.ke-cores { display: flex; flex-wrap: wrap; gap: 7px; padding: 3px; }
.ct-resp .nores { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--faint); font-size: 11px; }
.ke-cor { width: 22px; height: 22px; border-radius: 50%; background: var(--c); cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.ke-cor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ke-cor:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.ke-cor:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 5px; }
.ke-acts { display: flex; flex-direction: column; gap: 4px; }
.kib { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.kib:disabled { opacity: .35; cursor: default; }
.ke-del { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bad-bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ke-pdel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.np .ke-del select, .np .ke-pdel select { width: auto; max-width: 100%; height: 34px; flex: 1 1 160px; }
.ke-del .btn, .ke-pdel .btn { padding: 6px 12px; }
/* Sites públicos dos escritórios (visual próprio, sempre claro como um site institucional) */
.site { flex: 1; min-height: 0; overflow-y: auto; color-scheme: light; --s-bg: #ffffff; --s-fg: #17202b; --s-muted: #5a6573; --s-line: #e2e5ea; --s-soft: #f2f4f7; --s-ink: #14253b; --s-gold: #a9844b; --s-gold2: #d6b77d; --s-on: #ffffff; --s-display: "Libre Caslon Text", Georgia, serif; --s-body: "IBM Plex Sans", system-ui, sans-serif; background: var(--s-bg); color: var(--s-fg); font-family: var(--s-body); font-size: 16px; line-height: 1.6; }
.site.rt { --s-bg: #ffffff; --s-fg: #141414; --s-muted: #5f5b55; --s-line: #e6e2da; --s-soft: #f5f3ef; --s-ink: #121212; --s-gold: #b08a3e; --s-gold2: #e0c27e; --s-display: "Sora", system-ui, sans-serif; }
#site:focus, #site:focus-visible { outline: none; }
.site *:focus-visible { outline: 2px solid var(--s-gold); outline-offset: 3px; }
.site .wrap { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.site h1, .site h2, .site h3 { font-family: var(--s-display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
.site p { margin: 0; }
.site .eyebrow { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--s-gold); }
.site .sbtn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 4px; border: 1px solid transparent; font: 600 15px var(--s-body); cursor: pointer; text-decoration: none; }
.site .sbtn.gold { background: var(--s-gold); color: #fff; }
.site .sbtn.gold:hover { filter: brightness(1.08); }
.site .sbtn.line { border-color: currentColor; background: transparent; color: inherit; }
.site.rt .sbtn { border-radius: 999px; }
.s-top { position: sticky; top: 0; z-index: 5; background: var(--s-ink); color: #fff; border-bottom: 1px solid rgb(255 255 255 / .08); }
.s-top .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.s-logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.s-logo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.s-logo span { font-family: var(--s-display); font-size: 18px; line-height: 1.1; }
.s-logo small { display: block; font-family: var(--s-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--s-gold2); }
.s-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; }
.s-nav a { color: rgb(255 255 255 / .8); text-decoration: none; }
.s-nav a:hover { color: #fff; }
.s-top .sbtn { height: 40px; padding: 0 16px; font-size: 14px; }
.s-staff { background: none; border: 0; color: rgb(255 255 255 / .6); font: 13px var(--s-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 900px) { .s-nav { display: none; } .s-top .wrap { gap: 12px; } .s-top .sbtn { margin-left: auto; } }
@media (max-width: 480px) { .s-staff { display: none; } .s-logo span { font-size: 16px; } }
/* hero AM */
.am-hero { background: linear-gradient(90deg, rgb(15 28 46 / .96) 0%, rgb(20 37 59 / .86) 45%, rgb(20 37 59 / .45) 100%), var(--f-am-hero) center 30% / cover, var(--s-ink); color: #fff; overflow: hidden; position: relative; }
.am-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 120px); }
.am-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 680px); gap: 48px; align-items: center; padding-block: 128px 136px; }
.am-hero h1 { font-size: clamp(34px, 5vw, 58px); margin: 16px 0 22px; }
.am-hero h1 em { font-style: italic; color: var(--s-gold2); }
.am-hero p.lead { font-size: 18px; color: rgb(255 255 255 / .78); max-width: 560px; }
.am-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.am-facts { background: #0f1c2e; color: #fff; }
.am-facts .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 26px; gap: 20px; }
.am-facts div { display: flex; align-items: baseline; gap: 12px; }
.am-facts b { font-family: var(--s-display); font-size: 34px; color: var(--s-gold2); font-weight: 400; font-variant-numeric: tabular-nums; }
.am-facts span { font-size: 14px; color: rgb(255 255 255 / .72); }
@media (max-width: 860px) { .am-hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 56px 64px; } .am-facts .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.s-sec { padding-block: 88px; }
.s-sec.soft { background: var(--s-soft); }
.s-sec .shead { max-width: 640px; margin-bottom: 44px; }
.s-sec .shead h2 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 10px; }
.s-sec .shead p { color: var(--s-muted); margin-top: 14px; font-size: 17px; }
.am-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--s-line); border-left: 1px solid var(--s-line); }
.am-areas article { padding: 30px 28px; border-right: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 10px; background: var(--s-bg); }
.am-areas svg { width: 34px; height: 34px; stroke: var(--s-gold); fill: none; stroke-width: 1.4; }
.am-areas h3 { font-size: 21px; }
.am-areas p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 860px) { .am-areas { grid-template-columns: minmax(0, 1fr); } }
.am-quote-sec { background: linear-gradient(rgb(15 28 46 / .84), rgb(15 28 46 / .9)), var(--f-am-biblio) center / cover; color: #fff; }
.am-quote-sec .am-quote cite { color: var(--s-gold2); }
.am-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.am-quote img { width: 180px; height: 220px; object-fit: cover; border-radius: 2px; box-shadow: 14px 14px 0 var(--s-gold); }
.am-quote blockquote { margin: 0; font-family: var(--s-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; }
.am-quote cite { display: block; margin-top: 18px; font-style: normal; color: var(--s-muted); font-size: 15px; }
@media (max-width: 640px) { .am-quote { grid-template-columns: minmax(0, 1fr); } .am-quote img { width: 150px; height: 180px; } }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps4 li { counter-increment: st; border-top: 2px solid var(--s-ink); padding-top: 18px; }
.steps4 li::before { content: counter(st, decimal-leading-zero); font-family: var(--s-display); color: var(--s-gold); font-size: 15px; display: block; margin-bottom: 8px; }
.steps4 h3 { font-size: 19px; margin-bottom: 6px; }
.steps4 p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 860px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }
.s-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 210px)); gap: 24px; }
.s-team figure { margin: 0; }
.s-team img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: grayscale(.25); max-width: 100%; }
.s-team figcaption { margin-top: 12px; }
.s-team b { display: block; font-family: var(--s-display); font-size: 18px; }
.s-team span { color: var(--s-muted); font-size: 14px; }
.site.rt .s-team img { border-radius: 18px; filter: none; }
/* contato e formulário */
.s-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.s-contact .info { display: flex; flex-direction: column; gap: 18px; }
.s-contact .info h2 { font-size: clamp(28px, 3.6vw, 40px); }
.s-contact .info p { color: var(--s-muted); }
.s-contact dl { margin: 8px 0 0; display: grid; gap: 14px; }
.s-contact dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-gold); font-weight: 600; }
.s-contact dd { margin: 2px 0 0; }
.s-cfoto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-top: 10px; box-shadow: 12px 12px 0 var(--s-gold); }
.site.rt .s-cfoto { border-radius: 20px; box-shadow: none; }
@media (max-width: 900px) { .s-contact { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.sform { background: var(--s-bg); border: 1px solid var(--s-line); padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; box-shadow: 0 20px 50px rgb(20 37 59 / .08); }
.site.rt .sform { border-radius: 24px; }
.sform .full { grid-column: 1 / -1; }
.sform label.sf { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.sform label.sf small { font-weight: 400; color: var(--s-muted); }
.sform input:not([type=checkbox]), .sform select, .sform textarea { width: 100%; height: 48px; border: 1px solid var(--s-line); border-radius: 4px; padding: 0 14px; font: 400 15px var(--s-body); color: var(--s-fg); background: #fff; }
.site.rt .sform input:not([type=checkbox]), .site.rt .sform select, .site.rt .sform textarea { border-radius: 12px; }
.sform textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.sform input:focus, .sform select:focus, .sform textarea:focus { border-color: var(--s-gold); outline: 2px solid color-mix(in srgb, var(--s-gold) 25%, transparent); outline-offset: 0; }
.sform [aria-invalid=true] { border-color: #b3261e !important; }
.sform .err { color: #b3261e; font-size: 12.5px; font-weight: 500; min-height: 0; }
.sform .chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--s-muted); font-weight: 400; }
.sform .chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--s-gold); flex: none; }
.sform .send { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.sform .send .sbtn { background: var(--s-ink); color: #fff; }
.sform .send .sbtn:disabled { opacity: .6; cursor: default; }
.sform .count { font-size: 12px; color: var(--s-muted); text-align: right; }
@media (max-width: 600px) { .sform { grid-template-columns: minmax(0, 1fr); padding: 22px; } }
.sdone { border: 1px solid var(--s-line); background: var(--s-bg); padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.site.rt .sdone { border-radius: 24px; }
.sdone .ok { width: 52px; height: 52px; border-radius: 50%; background: #e3f3ea; color: #1c7a4b; display: grid; place-items: center; }
.sdone h3 { font-size: 26px; }
.sdone p { color: var(--s-muted); }
.sdone .demo-note { background: var(--s-soft); border: 1px dashed var(--s-gold); padding: 14px 16px; font-size: 14px; color: var(--s-fg); width: 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sdone .demo-note .sbtn { height: 40px; font-size: 14px; background: var(--s-ink); color: #fff; }
.s-foot { background: var(--s-ink); color: rgb(255 255 255 / .7); font-size: 14px; }
.s-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding-block: 36px; }
.s-foot b { color: #fff; font-weight: 600; }
/* RT */
.rt-hero { background: var(--s-ink); color: #fff; position: relative; overflow: hidden; }
.rt-hero::after { content: ""; position: absolute; width: 680px; height: 680px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgb(224 194 126 / .18), transparent 65%); pointer-events: none; }
.rt-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 80px 90px; }
.rt-hero h1 { font-size: clamp(36px, 5.4vw, 64px); font-weight: 600; letter-spacing: -.02em; margin: 18px 0 22px; }
.rt-hero h1 span { background: linear-gradient(100deg, #f1d99c, #b08a3e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rt-hero p.lead { color: rgb(255 255 255 / .72); font-size: 18px; max-width: 500px; }
.rt-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rt-hero .proof { display: flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 14px; color: rgb(255 255 255 / .7); }
.rt-hero .proof .avs img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--s-ink); object-fit: cover; margin-left: -10px; }
.rt-hero .proof .avs img:first-child { margin-left: 0; }
.rt-fotos { position: relative; width: 100%; max-width: 480px; justify-self: end; padding: 0 0 56px 56px; }
.rt-fotos .a { width: 100%; aspect-ratio: 9 / 11; object-fit: cover; border-radius: 28px; display: block; }
.rt-fotos .b { position: absolute; left: 0; bottom: 0; width: 58%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; border: 6px solid var(--s-ink); }
.rt-fotos .selo { position: absolute; right: -14px; top: 28px; width: 96px; height: 96px; border-radius: 50%; background: var(--s-ink); border: 1px solid var(--s-gold2); outline: 6px solid var(--s-ink); display: grid; place-items: center; font: 700 24px var(--s-display); color: var(--s-gold2); }
@media (max-width: 480px) { .rt-fotos { padding: 0 0 40px 32px; } .rt-fotos .selo { width: 72px; height: 72px; font-size: 18px; right: 0; } }
@media (max-width: 860px) { .rt-hero .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 52px 60px; } .rt-fotos { max-width: 420px; justify-self: center; } }
.rt-areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); }
.rt-areas li { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--s-line); }
.rt-areas h3 { font-size: 22px; font-weight: 600; }
.rt-areas p { color: var(--s-muted); }
.rt-areas a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s-line); display: grid; place-items: center; color: var(--s-gold); text-decoration: none; font-size: 18px; }
.rt-areas li:hover a { background: var(--s-gold); color: #fff; border-color: var(--s-gold); }
@media (max-width: 700px) { .rt-areas li { grid-template-columns: minmax(0, 1fr) auto; } .rt-areas li p { grid-column: 1 / -1; grid-row: 2; } }
.rt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.rt-steps li { counter-increment: st; background: var(--s-bg); border-radius: 20px; padding: 28px; border: 1px solid var(--s-line); }
.rt-steps li::before { content: counter(st); width: 40px; height: 40px; border-radius: 50%; background: var(--s-ink); color: var(--s-gold2); display: grid; place-items: center; font-family: var(--s-display); font-weight: 600; margin-bottom: 18px; }
.rt-steps h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.rt-steps p { color: var(--s-muted); font-size: 15px; }
@media (max-width: 760px) { .rt-steps { grid-template-columns: minmax(0, 1fr); } }
.rt-test { background: linear-gradient(rgb(18 18 18 / .8), rgb(18 18 18 / .9)), var(--f-rt-colunas) center / cover, var(--s-ink); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.rt-test blockquote { margin: 0; font-family: var(--s-display); font-size: clamp(22px, 3vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.rt-test cite { display: block; margin-top: 16px; font-style: normal; color: var(--s-gold2); font-size: 15px; }
.rt-test .big { font-family: var(--s-display); font-size: clamp(48px, 7vw, 88px); color: var(--s-gold2); line-height: 1; font-weight: 600; text-align: right; }
.rt-test .big small { display: block; font-size: 14px; color: rgb(255 255 255 / .65); font-family: var(--s-body); font-weight: 400; margin-top: 6px; }
@media (max-width: 700px) { .rt-test { grid-template-columns: minmax(0, 1fr); } .rt-test .big { text-align: left; } }
.kcard.chegou { animation: chegou 3s ease-out; }
@keyframes chegou { 0%, 40% { box-shadow: 0 0 0 3px var(--ok); } }
@media (prefers-reduced-motion: reduce) { .kcard.chegou { animation: none; box-shadow: 0 0 0 3px var(--ok); } }
/* ==== BLOCO C (CSS) ==== */
/* Painel editável: grade de 12 colunas; cards pequenos/largos; modo edição com arrastar e setas */
.pn-bar { display: flex; justify-content: flex-end; margin: -12px 0 14px; }
.pn-editbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); }
.pn-edit { flex: 1; min-width: 0; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pn-edhead { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pn-edhead b { font-weight: 600; }
.pn-edbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-edbtns .btn { display: inline-flex; align-items: center; gap: 6px; }
.pn-edbtns .btn.ghost { background: var(--surface); }
.pn-tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pn-tray > .sub { margin-right: 2px; }
.pn-add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font-size: 13px; cursor: pointer; }
.pn-add:hover { border-color: var(--brand); color: var(--brand); }
.pn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pn-grid > .pn-card { grid-column: span 4; display: flex; flex-direction: column; min-width: 0; }
.pn-grid > .pn-card[data-k="n"] { grid-column: span 3; }
.pn-grid > .pn-card[data-k="n"][data-w="l"] { grid-column: span 6; }
.pn-grid > .pn-card[data-k="b"][data-w="l"] { grid-column: span 8; }
.pn-body { flex: 1; min-width: 0; }
.pn-grid.editing > .pn-card { outline: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 3px; cursor: grab; }
.pn-grid.editing .pn-body { pointer-events: none; user-select: none; opacity: .8; }
.pn-grid > .pn-card.dragging { opacity: .35; }
.pn-tools { display: flex; align-items: center; gap: 4px; margin: -8px -8px 14px; padding: 4px 4px 4px 6px; border-radius: 9px; background: var(--soft); }
.pn-tools .pn-grip { color: var(--faint); display: grid; place-items: center; }
.pn-tools .pn-nm { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tools button { height: 28px; min-width: 28px; padding: 0 7px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 11.5px; font-weight: 600; }
.pn-tools button:hover:not(:disabled) { color: var(--fg); border-color: var(--faint); }
.pn-tools button:disabled { opacity: .4; cursor: default; }
.pn-tools button[data-pn="del"]:hover { color: var(--bad); border-color: var(--bad); }
.pn-tools svg.i { width: 15px; height: 15px; }
.pn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-list > li + li { border-top: 1px solid var(--line); }
.pn-row { display: flex; align-items: center; gap: 12px; width: calc(100% + 12px); margin: 0 -6px; padding: 10px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.pn-row:hover { background: var(--soft); }
.pn-row .ttl, .pn-tk .ttl { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-row .sub, .pn-tk .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-row.unread .ttl { font-weight: 700; }
.pn-date { width: 44px; flex: none; text-align: center; border-radius: 9px; background: var(--violet-bg); color: var(--violet); padding: 5px 0 4px; line-height: 1.1; }
.pn-date b { display: block; font-size: 17px; font-weight: 700; }
.pn-date small { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pn-hash, .cv-hash { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: var(--muted); }
.pn-nores { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--faint); color: var(--faint); font-size: 12px; font-weight: 600; }
.pn-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.pn-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13.5px; padding: 6px 0; }
.pn-sub { margin: -10px 0 10px; }
.pn-tk { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.pn-tk input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; margin: 0; cursor: pointer; }
.pn-tk label { flex: 1; min-width: 0; cursor: pointer; }
.pn-tk.feito .ttl { text-decoration: line-through; color: var(--faint); }
.pn-tk.feito .pill { opacity: .5; }
.pn-ets { display: flex; flex-direction: column; gap: 2px; }
.pn-etrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(50px, 90px) 22px; align-items: center; gap: 10px; width: calc(100% + 12px); margin: 0 -6px; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.pn-etrow:hover { background: var(--soft); }
.pn-etrow .etp { justify-self: start; }
.pn-etrow .bar i { background: var(--c); }
.pn-etrow b { text-align: right; font-weight: 600; }
.pn-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pn-at { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pn-card[data-w="l"] .pn-at { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-at button { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); text-align: left; cursor: pointer; font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.pn-at button:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.pn-at .tile { width: 32px; height: 32px; border-radius: 8px; }
@media (max-width: 1150px) {
  .pn-grid > .pn-card[data-k][data-w] { grid-column: span 6; }
  .pn-grid > .pn-card[data-k][data-w="l"] { grid-column: span 12; }
}
@media (max-width: 700px) {
  .pn-bar { margin-top: -8px; }
  .pn-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pn-grid > .pn-card[data-k][data-w] { grid-column: auto; }
  .pn-tools [data-pn="prev"] svg, .pn-tools [data-pn="next"] svg { transform: rotate(90deg); }
  .pn-card[data-w] .pn-at { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Etapas do processo: pílula, trilha no detalhe e editor do admin */
.ec-brand { --c: var(--brand); --cb: var(--brand-soft); }
.ec-info { --c: var(--info); --cb: var(--info-bg); }
.ec-violet { --c: var(--violet); --cb: var(--violet-bg); }
.ec-warn { --c: var(--warn); --cb: var(--warn-bg); }
.ec-ok { --c: var(--ok); --cb: var(--ok-bg); }
.ec-bad { --c: var(--bad); --cb: var(--bad-bg); }
.ec-neutral { --c: var(--muted); --cb: var(--soft); }
.etp { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11.5px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--cb, var(--soft)); color: var(--c, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.et-editbtn { display: inline-flex; align-items: center; gap: 7px; height: 40px; background: var(--surface); }
.det .etcard { grid-column: 1 / -1; }
.et-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.det .et-top h3 { margin: 0; }
.et-acts { margin-left: auto; display: flex; gap: 8px; }
.et-next { display: inline-flex; align-items: center; gap: 6px; }
.et-steps { position: relative; display: flex; list-style: none; margin: 0; padding: 2px 0 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.et-steps li { flex: 1 0 92px; position: relative; scroll-snap-align: center; }
.et-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.et-steps li:first-child::before { display: none; }
.et-steps li.done::before, .et-steps li.cur::before { background: var(--brand); }
.et-steps button { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px 4px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.et-steps button:disabled { cursor: default; }
.et-steps button:hover:not(:disabled) .et-dot { border-color: var(--brand); }
.et-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: var(--surface); border: 2px solid var(--line); color: var(--faint); font-size: 11.5px; font-weight: 600; }
.et-dot svg.i { width: 15px; height: 15px; stroke-width: 3; }
li.done .et-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
li.cur .et-dot { border-color: var(--c); background: var(--cb); color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.et-nm { font-size: 12px; line-height: 1.25; color: var(--muted); }
li.done .et-nm { color: var(--fg); }
li.cur .et-nm { color: var(--fg); font-weight: 600; }
.et-dt { font-size: 11px; color: var(--faint); }
li.cur .et-dt { color: var(--c); font-weight: 600; }
.et-hint { margin-top: 10px; }
.et-undo { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; padding: 8px 12px; border-radius: 9px; background: var(--ok-bg); color: var(--ok); }
.et-undo span { flex: 1; min-width: 200px; color: var(--fg); }
.et-ed { display: flex; flex-direction: column; gap: 12px; }
.et-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: et; }
.etrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 150px 40px 40px 40px; gap: 8px; align-items: center; }
.etrow::before { counter-increment: et; content: counter(et); font-size: 12px; font-weight: 600; color: var(--faint); text-align: center; }
.etrow .etsw { display: none; }
.np .etrow select { padding-left: 30px; background-image: radial-gradient(circle at 15px 50%, var(--c) 0 6px, transparent 6.5px); background-repeat: no-repeat; }
.etrow .etqtd { grid-column: 2 / -1; margin-top: -4px; font-size: 12px; }
.et-ib { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.et-ib:hover:not(:disabled) { color: var(--fg); border-color: var(--faint); }
.et-ib[data-a="del"]:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.et-ib:disabled { opacity: .35; cursor: default; }
.et-addbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .etrow { grid-template-columns: 20px minmax(0, 1fr) 40px 40px 40px; }
  .etrow select { grid-column: 2 / 3; grid-row: 2; }
  .et-acts { margin-left: 0; width: 100%; }
  .et-next { width: 100%; justify-content: center; white-space: normal; }
}

/* Conversas: chat interno da equipe (lista à esquerda, conversa à direita; no celular, telas separadas) */
.cv { display: grid; grid-template-columns: 290px minmax(0, 1fr); height: max(460px, calc(100dvh - 236px)); overflow: hidden; }
.cv-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--soft) 50%, var(--surface)); }
.cv-top { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.cv-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); }
.cv-search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; color: var(--fg); }
.cv-top .link { align-self: flex-end; font-size: 12.5px; }
.cv-top .link:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.cv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; }
.cv-grp { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.cv-grp button { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.cv-grp button:hover { background: var(--soft); color: var(--fg); }
.cv-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font: inherit; }
.cv-item + .cv-item { margin-top: 1px; }
.cv-item:hover { background: var(--soft); color: var(--fg); }
.cv-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand); }
.cv-item .nm { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item.unread .nm { color: var(--fg); font-weight: 700; }
.cv-item[aria-current="true"] .nm { color: var(--brand); }
.cv-item .pv { display: block; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-item .pv.typing { color: var(--ok); font-style: italic; }
.cv-item .av { width: 30px; height: 30px; font-size: 10px; border: 0; }
.cv-item .cv-hash { width: 30px; height: 30px; background: transparent; }
.cv-item.unread .cv-hash { color: var(--fg); }
.cv-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.cv-nada { padding: 4px 8px; }
.cv-soon { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.4; }
.cv-soon svg { color: var(--ok); margin-top: 1px; }
.cv-soon b { font-weight: 600; color: var(--fg); }
.cv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cv-head { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); min-height: 64px; }
.cv-head h2 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-head .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-head .cv-hash { width: 38px; height: 38px; background: var(--brand-soft); color: var(--brand); }
.cv-back { display: none; width: 36px; height: 36px; place-items: center; flex: none; margin-left: -8px; border: 0; border-radius: 9px; background: transparent; color: var(--fg); cursor: pointer; }
.cv-back:hover { background: var(--soft); }
.cv-msgs { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 14px; display: flex; flex-direction: column; }
.cv-msgs:focus-visible { outline-offset: -2px; }
.cv-day { align-self: center; margin: 14px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--soft); padding: 3px 10px; border-radius: 999px; }
.cv-novas { display: flex; align-items: center; gap: 10px; color: var(--bad); font-size: 11.5px; font-weight: 600; margin: 12px 0 0; }
.cv-novas::before, .cv-novas::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--bad) 45%, transparent); }
.cv-msg { display: flex; gap: 8px; align-items: flex-end; max-width: min(620px, 84%); margin-top: 10px; }
.cv-msg.cont { margin-top: 3px; }
.cv-msg.cont > .av { visibility: hidden; }
.cv-msg > .av { width: 30px; height: 30px; font-size: 10px; border: 0; }
.cv-b { min-width: 0; background: var(--soft); border-radius: 14px 14px 14px 4px; padding: 7px 12px 8px; }
.cv-msg.cont .cv-b { border-radius: 14px; }
.cv-who { font-size: 12.5px; font-weight: 600; color: var(--brand); margin-bottom: 1px; }
.cv-b p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-t { float: right; margin: 5px 0 -3px 12px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cv-b .mention { color: var(--brand); font-weight: 600; }
.cv-msg.mine { align-self: flex-end; }
.cv-msg.mine .cv-b { background: var(--brand); color: var(--on-brand); border-radius: 14px 14px 4px 14px; }
.cv-msg.mine.cont .cv-b { border-radius: 14px; }
.cv-msg.mine .cv-t { color: inherit; opacity: .72; }
.cv-msg.mine .mention { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cv-proc { border: 0; background: transparent; padding: 0; font-family: var(--font-mono); font-size: 12.5px; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cv-sis { align-self: center; margin: 10px 0 2px; font-size: 12px; color: var(--faint); text-align: center; }
.cv-vazio { margin: auto; text-align: center; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); }
.cv-vazio .tile { margin-bottom: 4px; }
.cv-vazio b { color: var(--fg); }
.cv-typing { min-height: 24px; padding: 0 18px 4px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.cv-dots { display: inline-flex; gap: 3px; }
.cv-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: cvDot 1s infinite ease-in-out; }
.cv-dots i:nth-child(2) { animation-delay: .15s; } .cv-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cvDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cv-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 14px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cv-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.cv-form textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--fg); font: inherit; font-size: 14px; line-height: 1.45; height: 34px; max-height: 140px; padding: 7px 0; }
.cv-send { width: 36px; height: 36px; border-radius: 9px; border: 0; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; flex: none; }
.cv-send:disabled { opacity: .4; cursor: default; }
.cv-hint { padding: 6px 16px 12px; font-size: 11.5px; color: var(--faint); }
body:has(#v-conversas:not([hidden])) .fab { display: none; }
@media (max-width: 760px) {
  .cv { grid-template-columns: minmax(0, 1fr); height: max(420px, calc(100dvh - 240px)); }
  .cv[data-tela="lista"] .cv-main, .cv[data-tela="conversa"] .cv-side { display: none; }
  .cv-side { border-right: 0; }
  .cv-back { display: grid; }
  .cv-head { padding: 8px 12px; gap: 10px; }
  .cv-head .avs { display: none; }
  .cv-msgs { padding: 6px 12px 12px; }
  .cv-msg { max-width: 90%; }
  .cv-form { margin: 0 10px 10px; }
  .cv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cv-dots i { animation: none; opacity: .7; } }

/* Publicações (DJEN): OABs monitoradas, leitura do texto e lançamento na agenda */
.pb-oabs { display: grid; gap: 10px; margin-bottom: 14px; }
.pb-oab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pb-oab .grow { min-width: 160px; }
.pb-oab .num-oab { font-family: var(--font-mono); font-weight: 500; }
.pb-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pb-add input, .pb-add select { height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--fg); font: inherit; }
.pb-add input { width: 130px; font-family: var(--font-mono); }
.pb-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 12px; }
.pb-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13px; }
.pb-tabs button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 600; }
.pb-list { display: grid; gap: 12px; }
.pb-item { padding: 18px; display: grid; gap: 10px; }
.pb-item.nova { border-left: 3px solid var(--brand); }
.pb-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pb-top .cnj { font-family: var(--font-mono); font-size: 13px; }
.pb-top .when { margin-left: auto; }
.pb-txt { color: var(--fg); font-size: 14px; line-height: 1.5; margin: 0; }
.pb-txt.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pb-more { justify-self: start; }
.pb-sug { background: var(--violet-bg); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
.pb-sug h4 { font-size: 12.5px; color: var(--violet); display: flex; gap: 6px; align-items: center; }
.pb-sug-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pb-sug-row .grow { min-width: 200px; }
.pb-sug-row b { font-weight: 600; }
.pb-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.consulta-btn { display: inline-flex; align-items: center; gap: 5px; }
#consulta-pop { position: fixed; inset: 0; z-index: 10000; background: rgba(12, 20, 36, .55); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; }
#consulta-pop .cp-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface, #fff); color: var(--fg, #1a2233); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); padding: 22px; display: grid; gap: 10px; }
#consulta-pop h3 { margin: 0; font-size: 17px; }
#consulta-pop .cp-num { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
#consulta-pop .cp-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
#consulta-pop .cp-x:hover { background: var(--soft, #eef1f5); }
#consulta-pop .cp-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; align-items: start; }
#consulta-pop .cp-col { display: grid; gap: 6px; border: 1px solid var(--line, #e3e6ea); border-radius: 12px; padding: 8px; }
#consulta-pop .cp-col header { display: flex; align-items: center; gap: 10px; color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 15px; }
#consulta-pop .cp-it { text-align: left; border: 1px solid var(--line, #e3e6ea); background: transparent; color: inherit; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; }
#consulta-pop .cp-it:hover, #consulta-pop .cp-it:focus-visible { background: var(--brand-soft, #e7edf5); border-color: var(--brand, #1d3557); outline: none; }
#consulta-pop .cp-note { margin: 0; font-size: 12px; }
@media (max-width: 560px) { #consulta-pop .cp-cols { grid-template-columns: 1fr; } }
.pb-note { font-size: 12.5px; color: var(--muted); }
.pb-calc { font-size: 12.5px; color: var(--muted); }

/* ===== Base neutra (white-label): a cor da marca vem do escritório (ver aplicaMarca) ===== */
:root { --brand-l: #334155; --brand-soft-l: #e8ecf1; --brand-d: #a9b8cc; --brand-soft-d: #1f2630; }

/* ===== Entrada (login e cadastro) ===== */
#auth { height: 100%; overflow-y: auto; display: grid; place-items: center; padding: 20px; background: var(--bg); }
#auth .card { width: min(440px, 100%); display: grid; gap: 14px; padding: 28px; }
#auth h1 { font-family: var(--font-display); font-size: 26px; }
#auth .tabs { display: flex; gap: 4px; background: var(--soft); border-radius: 10px; padding: 3px; }
#auth .tabs button { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 600; }
#auth .tabs button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
#auth .g2 { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
#auth form { display: grid; gap: 12px; }
#auth .bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; } #auth .bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .25s; }
#auth .wz { display: grid; gap: 12px; } #auth .wz h2 { font-family: var(--font-display); font-size: 20px; }
#auth .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #auth .opts.col { grid-template-columns: 1fr; }
#auth .opts button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 11px 13px; cursor: pointer; display: grid; gap: 2px; }
#auth .opts button span { color: var(--muted); font-size: 12.5px; } #auth .opts button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
#auth .resumo { background: var(--brand-soft); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
#auth .btn { padding: 11px 16px; }

/* ===== Formulários dentro do painel ===== */
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
label.f small { font-weight: 400; color: var(--faint); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=file], select, textarea { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--surface); font-weight: 400; color: var(--fg); }
input[type=file] { padding: 8px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; }
.msg { padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.msg.bad { background: var(--bad-bg); color: var(--bad); } .msg.ok { background: var(--ok-bg); color: var(--ok); } .msg.warn { background: var(--warn-bg); color: var(--warn); }
.frm { display: grid; gap: 12px; }
.frm .g2, .g2c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.cfg { display: grid; gap: 18px; max-width: 760px; }
.cfg .card { display: grid; gap: 12px; }
.cfg h3 { font-size: 16px; }
.logo-prev { height: 56px; max-width: 200px; object-fit: contain; background: var(--soft); border-radius: 8px; padding: 6px; }
.foto-prev { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cor-row { display: flex; gap: 10px; align-items: center; } .cor-row input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; }
.passos li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.passos li:first-child { border-top: 0; }
.passos .ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; color: var(--on-brand); }
.passos li.feito .ck { background: var(--ok); border-color: var(--ok); } .passos li.feito .t { color: var(--faint); text-decoration: line-through; }
.passos .ck svg { width: 12px; height: 12px; stroke-width: 3; }
.cfg-flash { animation: cfgflash 1.2s ease-out; } @keyframes cfgflash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 50%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }
#main { max-width: 460px; margin: 24px auto; padding: 0 16px; }
#main:empty { display: none; }
#app { height: 100%; }

@media (max-width: 480px) { .dock .bn { min-width: 0; padding-inline: 3px; } .dock .bn span { font-size: 9.5px; letter-spacing: -.2px; } }

/* ===== Modo Desktop: papel de parede e janelas no estilo Mac ===== */
:root { --papel: radial-gradient(900px 600px at 12% -10%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%), radial-gradient(800px 600px at 100% 110%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--brand) 16%, var(--bg)), var(--bg) 70%); }
.papeis { display: flex; flex-wrap: wrap; gap: 10px; }
.papel-op { width: 84px; height: 54px; border-radius: 10px; border: 2px solid var(--line); cursor: pointer; padding: 0; background-size: cover; background-position: center; }
.papel-op[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
/* ===== Configurações em popup, com barra lateral ===== */
dialog.cfgm { width: min(960px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 24px)); max-width: none; max-height: none; border: 1px solid var(--line); border-radius: 18px; padding: 0; background: var(--bg); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / .28); overflow: hidden; }
dialog.cfgm::backdrop { background: rgb(10 14 20 / .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.cfgm[open] { animation: cfgIn .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes cfgIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.cfgm-box { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; }
.cfgm-nav { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.cfgm-who { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); min-width: 0; }
.cfgm-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.cfgm-who .grow { min-width: 0; }
.cfgm-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.cfgm-nav button:hover { background: var(--soft); color: var(--fg); }
.cfgm-nav button[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.cfgm-nav .cfgm-sair { margin-top: auto; }
.cfgm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cfgm-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cfgm-head h2 { font-family: var(--font-display); font-size: 19px; }
.cfgm-head .x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); }
.cfgm-body { padding: 18px 20px 24px; overflow: auto; display: grid; gap: 16px; align-content: start; flex: 1; min-height: 0; }
.cfgm-body .card { box-shadow: none; }
.cfgm-body .frm { max-width: 560px; }
.cfg-eu { display: flex; align-items: center; gap: 16px; }
.cfg-eu .a-big { width: 64px; height: 64px; font-size: 22px; }
.lblx { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.cv-men { color: var(--brand); }
@media (max-width: 700px) {
  dialog.cfgm { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .cfgm-box { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cfgm-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; gap: 2px; }
  .cfgm-who, .cfgm-nav .grow { display: none; }
  .cfgm-nav button { white-space: nowrap; padding: 9px 12px; }
  .cfgm-nav .cfgm-sair { margin-top: 0; }
  .cfgm-main { grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { dialog.cfgm[open] { animation: none; } }
/* ===== Passo 8: Planos + cadastro Liquid Glass (só com PLANOS_ATIVOS / ?planos=1) ===== */
#auth.pl-on { --auth-bg-1: #0b0d12; --auth-bg-2: #000; --plano-silver: #c0c0c0; --plano-silver-2: #e0e0e0; --plano-gold: #ffd700; --plano-gold-2: #ffcc00; --plano-diamond: #b9f2ff; --plano-diamond-2: #5ad1ff; --plano-platinum: #d0e7ff; --plano-platinum-2: #a0d8ff; --pl-c: var(--plano-silver); --pl-c2: var(--plano-silver-2);
  --pl-fg: #f2f4f8; --pl-mut: rgb(242 244 248 / .65); color: var(--pl-fg); display: block; position: relative;
  background: radial-gradient(900px 520px at 80% -10%, color-mix(in srgb, var(--brand-d) 22%, transparent), transparent 60%), radial-gradient(700px 480px at 0% 100%, rgb(255 255 255 / .06), transparent 60%), linear-gradient(160deg, var(--auth-bg-1), var(--auth-bg-2)); }
#auth.pl-on .pl-wrap { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 18px; padding: 72px 16px 32px; }
#auth.pl-on .card { background: rgb(255 255 255 / .06); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgb(255 255 255 / .16); border-radius: 28px; box-shadow: 0 24px 60px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .18); color: var(--pl-fg); margin: auto; }
#auth.pl-on .sub, #auth.pl-on .card label.f, #auth.pl-on .card .link { color: var(--pl-mut); }
#auth.pl-on .tabs { background: rgb(255 255 255 / .06); }
#auth.pl-on .tabs button { color: var(--pl-mut); } #auth.pl-on .tabs button[aria-pressed="true"] { background: rgb(255 255 255 / .16); color: #fff; }
#auth.pl-on .card input, #auth.pl-on .card select, #auth.pl-on .card textarea { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16); color: #fff; border-radius: 12px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
#auth.pl-on .card .btn { background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .25); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
#auth.pl-on .bar { background: rgb(255 255 255 / .1); }
#auth.pl-on[data-pl="planos"] .card { display: none; }
#auth.pl-on[data-pl="cadastro"] .pl-planos { display: none; }
.pl-planos { width: min(560px, 100%); display: grid; gap: 18px; }
.pl-planos h1 { font-family: var(--font-display); font-size: 28px; text-align: center; } .pl-planos p.sub { text-align: center; }
.pl-seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .4); }
.pl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pl-seg label { position: relative; z-index: 2; text-align: center; padding: 10px 4px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--pl-mut); transition: color .3s; border-radius: 999px; }
.pl-seg input:checked + label { color: #fff; } .pl-seg input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.pl-glider { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 999px; pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .65s cubic-bezier(.16,1,.3,1), box-shadow .65s, background .65s;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / .05)); backdrop-filter: blur(6px) url(#pl-glass); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .5), inset 0 -1px 1px rgb(0 0 0 / .3), inset 0 0 14px color-mix(in srgb, var(--pl-c) 60%, transparent), 0 4px 18px color-mix(in srgb, var(--pl-c) 40%, transparent); border: 1px solid color-mix(in srgb, var(--pl-c) 55%, transparent); }
.pl-card { padding: 22px; border-radius: 24px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .18); display: grid; gap: 10px; }
.pl-card h2 { font-family: var(--font-display); font-size: 24px; background: linear-gradient(90deg, var(--pl-c), var(--pl-c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-card .pl-preco { font-size: 22px; font-weight: 700; } .pl-card ul { margin: 0; padding-left: 18px; color: var(--pl-mut); display: grid; gap: 4px; }
.pl-card .btn, .pl-planos .btn { background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .25); border-radius: 12px; padding: 12px; cursor: pointer; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.pl-planos .link { background: none; border: 0; color: var(--pl-mut); cursor: pointer; text-decoration: underline; justify-self: center; }
.pl-tema { position: fixed; top: 14px; right: 14px; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; width: 76px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .15); }
.pl-tema button { position: relative; z-index: 2; border: 0; background: none; height: 30px; cursor: pointer; color: var(--pl-mut); display: grid; place-items: center; transition: color .3s; } .pl-tema button[aria-checked="true"] { color: #fff; }
.pl-tema button:focus-visible { outline: 2px solid #fff; border-radius: 999px; }
.pl-tema .pl-glider { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); transform: translateX(calc(var(--i, 0) * 100%)); --pl-c: #fff; }
.pl-tema svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pl-glider { transition: none; backdrop-filter: blur(6px); } .pl-seg label, .pl-tema button { transition: none; } }

/* ===== Passo 4: Agenda estilo EventCalendar ===== */
.calwrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.calwrap .cal { border: 0; border-radius: 0; }
.dayinfo { display: flex; flex-direction: column; align-self: stretch; border-left: 1px solid var(--line); padding: 18px; gap: 14px; min-height: 100%; }
.dayinfo .dayhead h3 { margin: 0; font-size: 16px; }
.dayinfo .dayhead .sub { margin: 2px 0 0; }
.dayinfo .daylist { display: flex; flex-direction: column; gap: 8px; flex: 1; max-height: 460px; overflow: auto; }
.dayinfo .daylist .ev + .ev { margin-top: 0; }
.dayinfo .ev { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; padding: 10px 12px; }
.dayinfo .ev.feito { border-left-color: var(--faint); opacity: .75; }
.dayinfo .daynone { padding: 22px 0; text-align: center; }
.dayinfo .dayadd { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; }
.cell { min-height: 104px; }
.cell[aria-pressed="true"] { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.cell .n { align-self: flex-end; }
@media (max-width: 1100px) { .calwrap { grid-template-columns: minmax(0, 1fr); } .dayinfo { border-left: 0; border-top: 1px solid var(--line); } .dayinfo .daylist { max-height: none; } }

/* ===== Passo 9: upload de foto/logo com recorte ===== */
.cu { background: #14171c; color: #e8eaed; border: 1px solid rgb(255 255 255 / .12); border-radius: 20px; padding: 24px; max-width: 360px; display: grid; justify-items: center; text-align: center; }
:root[data-theme="light"] .cu { background: var(--surface); color: var(--fg); border-color: var(--line); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cu { background: var(--surface); color: var(--fg); border-color: var(--line); } }
.cu-stage { display: grid; justify-items: center; gap: 14px; width: 100%; }
.cu-stage.in { animation: cuIn .25s ease both; }
@keyframes cuIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.cu-drop { width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgb(128 128 128 / .6); display: grid; place-content: center; justify-items: center; gap: 10px; transition: border-color .15s, background .15s, transform .15s; cursor: pointer; }
.cu-drop.over, .cu-drop:focus-visible { border-color: var(--brand); background: rgb(128 128 128 / .12); transform: scale(1.03); outline: 0; }
.cu-ico { width: 52px; height: 52px; border-radius: 50%; background: rgb(128 128 128 / .22); display: grid; place-items: center; }
.cu-ico svg { width: 24px; height: 24px; }
.cu-hint { margin: 0; font-size: 13px; opacity: .7; }
.cu-t { font-size: 16px; }
.cu-btn { display: inline-flex; align-items: center; gap: 6px; }
.cu .btn:not(.ghost) { background: #f1f3f5; color: #111; }
:root[data-theme="light"] .cu .btn:not(.ghost) { background: var(--brand); color: var(--on-brand); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cu .btn:not(.ghost) { background: var(--brand); color: var(--on-brand); } }
.cu .btn.ghost { color: inherit; border-color: rgb(128 128 128 / .4); }
.cu .link { color: inherit; opacity: .8; }
.cu-mask { width: var(--d); height: var(--h, var(--d)); border-radius: 50%; overflow: hidden; border: 2px dashed rgb(128 128 128 / .7); box-sizing: content-box; touch-action: none; }
.cu-cv { display: block; border-radius: 50%; cursor: grab; touch-action: none; outline-offset: 2px; }
.cu-cv:active { cursor: grabbing; }
.cu-wide { max-width: 420px; }
.cu-wide .cu-drop { width: 100%; height: 150px; border-radius: 14px; }
.cu-wide .cu-mask, .cu-wide .cu-cv, .cu-wide .cu-done img { border-radius: 14px; }
.cu-wide .cu-done { width: 160px; height: auto; aspect-ratio: 16 / 9; }
.cu-zoom { display: flex; align-items: center; gap: 10px; width: min(100%, 260px); }
.cu-zoom input { flex: 1; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--brand); }
.cu-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.cu-done { position: relative; width: 96px; height: 96px; animation: cuShrink .35s cubic-bezier(.2,.8,.2,1) both; }
.cu-done img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cu-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; border: 2px solid #14171c; animation: cuPop .25s .3s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cuShrink { from { transform: scale(var(--from, 2)); } to { transform: none; } }
@keyframes cuPop { from { transform: scale(0); } to { transform: none; } }
.cu-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .cu-live.bad { position: static; width: auto; height: auto; clip-path: none; font-size: 13px; color: var(--bad); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cu-stage.in { animation: pgFade .2s ease both; } .cu-done, .cu-badge { animation: pgFade .2s ease both; } .cu-drop.over { transform: none; } }
/* ---- Passos 7 + 13: barra lateral estilo sidebarv2 (vidro, botão redondo na borda) ---- */
:root { --sb-bg-1: rgb(255 255 255 / .72); --sb-bg-2: rgb(246 248 251 / .62); --sb-border: rgb(0 0 0 / .08); --sb-text: #1b2330; --sb-text-dim: #5c6675; --sb-glow: color-mix(in srgb, var(--brand) 55%, transparent); --sb-shadow: 0 24px 50px -14px rgb(20 30 50 / .28), 0 8px 20px -6px rgb(20 30 50 / .14), inset 0 1px 1.5px rgb(255 255 255 / .9); --sb-btn-bg: rgb(255 255 255 / .96); --sb-hover: rgb(0 0 0 / .045); --sb-tip-bg: rgb(255 255 255 / .9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-bg-1: rgb(34 38 48 / .74); --sb-bg-2: rgb(14 16 21 / .9); --sb-border: rgb(255 255 255 / .13); --sb-text: #fff; --sb-text-dim: rgb(255 255 255 / .62); --sb-shadow: 0 28px 60px -10px rgb(0 0 0 / .78), 0 10px 24px -5px rgb(0 0 0 / .45), inset 0 1px 1.5px rgb(255 255 255 / .28), inset 0 -1px 1px rgb(0 0 0 / .5); --sb-btn-bg: rgb(26 30 40 / .96); --sb-hover: rgb(255 255 255 / .07); --sb-tip-bg: rgb(22 25 33 / .88); } }
:root[data-theme="dark"] { --sb-bg-1: rgb(34 38 48 / .74); --sb-bg-2: rgb(14 16 21 / .9); --sb-border: rgb(255 255 255 / .13); --sb-text: #fff; --sb-text-dim: rgb(255 255 255 / .62); --sb-shadow: 0 28px 60px -10px rgb(0 0 0 / .78), 0 10px 24px -5px rgb(0 0 0 / .45), inset 0 1px 1.5px rgb(255 255 255 / .28), inset 0 -1px 1px rgb(0 0 0 / .5); --sb-btn-bg: rgb(26 30 40 / .96); --sb-hover: rgb(255 255 255 / .07); --sb-tip-bg: rgb(22 25 33 / .88); }
@media (min-width: 700px) {
  html[data-menu="side"] #side { --sb-ease: cubic-bezier(.4, 0, .2, 1); width: 276px; margin: 12px 0 12px 12px; padding: 18px 14px 18px; overflow: visible; position: relative; z-index: 5; color: var(--sb-text); background: linear-gradient(165deg, var(--sb-bg-1), var(--sb-bg-2)); -webkit-backdrop-filter: blur(32px) saturate(190%); backdrop-filter: blur(32px) saturate(190%); border: 1px solid var(--sb-border); border-radius: 30px; box-shadow: var(--sb-shadow); transition: width .42s var(--sb-ease), padding .42s var(--sb-ease); }
  html[data-menu="side"] #side.closed { width: 88px; padding-inline: 10px; }
  html[data-menu="side"] #side .hide-closed, html[data-menu="side"] #side.closed .hide-closed, html[data-menu="side"] #side.closed .badge.hide-closed { display: revert; }
  html[data-menu="side"] #side .opt > .hide-closed, html[data-menu="side"] #side .txt.hide-closed, html[data-menu="side"] #side .lbl.hide-closed { max-width: 200px; overflow: hidden; opacity: 1; transform: none; transition: max-width .42s var(--sb-ease), opacity .25s ease .08s, transform .42s var(--sb-ease); }
  html[data-menu="side"] #side.closed .opt > .hide-closed:not(.badge), html[data-menu="side"] #side.closed .txt.hide-closed, html[data-menu="side"] #side.closed .lbl.hide-closed { max-width: 0; opacity: 0; transform: translateX(-10px); transition-delay: 0s; pointer-events: none; }
  /* título */
  html[data-menu="side"] #side .title { position: relative; border-bottom: 0; margin-bottom: 14px; padding: 0 0 16px 10px; cursor: pointer; }
  html[data-menu="side"] #side .title::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--sb-border); transition: left .42s var(--sb-ease), right .42s var(--sb-ease); }
  html[data-menu="side"] #side.closed .title::after { left: 13px; right: 13px; }
  html[data-menu="side"] #side .logo, html[data-menu="side"] #side.closed .logo { width: 48px; height: 48px; border-radius: 14px; }
  html[data-menu="side"] #side .brandname { color: var(--sb-text); }
  html[data-menu="side"] #side .plan { color: var(--sb-text-dim); }
  /* itens */
  html[data-menu="side"] #side .opts { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; gap: 4px; margin-inline: -4px; padding: 2px 4px; }
  html[data-menu="side"] #side .opts::-webkit-scrollbar { display: none; }
  html[data-menu="side"] #side .opts.rolando { scrollbar-width: thin; }
  html[data-menu="side"] #side .opt { height: 48px; padding: 0 12px 0 10px; border: 0; border-radius: 14px; color: var(--sb-text-dim); font-size: 14px; overflow: hidden; transition: background .2s ease, color .2s ease; }
  html[data-menu="side"] #side .opt .ico { width: 48px; }
  html[data-menu="side"] #side .opt .ico .i, html[data-menu="side"] #side .opt .ico svg { width: 26px; height: 26px; }
  html[data-menu="side"] #side .opt:hover { background: var(--sb-hover); color: var(--sb-text); }
  html[data-menu="side"] #side .opt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  html[data-menu="side"] #side .opt[aria-current="page"] { color: var(--sb-text); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 26%, transparent), transparent 85%); }
  html[data-menu="side"] #side .opt[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 12px; width: 3.5px; height: 24px; border-radius: 0 4px 4px 0; background: var(--brand); box-shadow: 0 0 12px var(--sb-glow); }
  html[data-menu="side"] #side.closed .opt[aria-current="page"] { background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 70%); }
  html[data-menu="side"] #side .opt[aria-current="page"] .ico { color: var(--brand); }
  /* badges */
  html[data-menu="side"] #side .badge { position: static; margin-left: auto; flex: none; transition: all .3s ease; }
  html[data-menu="side"] #side .badge[hidden] { display: none; }
  html[data-menu="side"] #side.closed .badge { position: absolute; margin: 0; top: 9px; left: 36px; right: auto; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; box-shadow: 0 0 8px var(--sb-glow), 0 0 0 2px var(--sb-bg-2); }
  /* seção de conta */
  html[data-menu="side"] #side .sect { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-border); display: flex; flex-direction: column; gap: 4px; }
  html[data-menu="side"] #side .sect .lbl { font-size: 10.5px; letter-spacing: .08em; color: var(--sb-text-dim); padding: 4px 12px; white-space: nowrap; }
  /* botão redondo na borda */
  html[data-menu="side"] #side .toggle { position: absolute; top: 36px; right: -13px; left: auto; bottom: auto; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid var(--sb-border); border-radius: 50%; justify-content: center; background: var(--sb-btn-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--sb-text-dim); box-shadow: 0 4px 14px rgb(0 0 0 / .25); z-index: 50; transition: transform .2s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s, color .2s; }
  html[data-menu="side"] #side .toggle:hover { color: var(--sb-text); background: var(--sb-btn-bg); border-color: var(--brand); box-shadow: 0 0 16px var(--sb-glow), 0 6px 16px rgb(0 0 0 / .3); transform: scale(1.12); }
  html[data-menu="side"] #side .toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  html[data-menu="side"] #side .toggle svg { width: 14px; height: 14px; transition: transform .42s var(--sb-ease); transform: rotate(180deg); }
  html[data-menu="side"] #side:not(.closed) .toggle svg { transform: rotate(180deg); }
  html[data-menu="side"] #side.closed .toggle svg { transform: rotate(0deg); }
}
#sb-tip { position: fixed; z-index: 80; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--sb-text); background: var(--sb-tip-bg); border: 1px solid var(--sb-border); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 8px 24px rgb(0 0 0 / .3); pointer-events: none; opacity: 0; transition: opacity .15s ease; }
#sb-tip.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html[data-menu="side"] #side, html[data-menu="side"] #side * { transition: none !important; } #sb-tip { transition: none; } }
/* ===== Passo 1: dock com zoom (so ponteiro fino) ===== */
@media (hover: hover) and (pointer: fine) {
  .dock .bn { transform-origin: bottom center; transition: transform .12s ease-out, background-color .15s, color .15s; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .dock .bn { transition: none !important; transform: none !important; } }

/* ===== Layout Vidro: Glass Workspace (blur 28, opacidade .19, saturacao 1.2, borda .3, tint #eadbc7, foto de fundo) ===== */
:root[data-layout="vidro"] {
  --g-blur: 28px; --g-sat: 1.2;
  --g-fallback: #d6cebf; --g-shade: #e9e7df18;
  --g-bg: rgb(244 236 224 / .52); --g-line: rgb(255 255 255 / .3); --g-hi: rgb(255 255 255 / .3);
  --g-ctl: rgb(41 61 48 / .06); --g-ctl-h: rgb(255 255 255 / .22);
  --g-shadow: 0 18px 44px #14251c44;
  --fg: #242b27; --muted: #384238; --soft: rgb(41 61 48 / .06);
  --a-glass: var(--g-bg); --a-glass-line: var(--g-line);
}
@media (prefers-color-scheme: dark) { :root[data-layout="vidro"]:not([data-theme="light"]) { --g-fallback: #282a25; --g-shade: #12100e7a; --g-bg: rgb(30 28 26 / .5); --g-line: rgb(225 237 223 / .15); --g-hi: rgb(255 255 255 / .08); --g-ctl: rgb(233 246 231 / .08); --g-ctl-h: rgb(255 255 255 / .14); --fg: #f4f4ed; --muted: #d0c9bf; --soft: rgb(233 246 231 / .08); --a-glass: var(--g-bg); --a-glass-line: var(--g-line); } }
:root[data-layout="vidro"][data-theme="dark"] { --g-fallback: #282a25; --g-shade: #12100e7a; --g-bg: rgb(30 28 26 / .5); --g-line: rgb(225 237 223 / .15); --g-hi: rgb(255 255 255 / .08); --g-ctl: rgb(233 246 231 / .08); --g-ctl-h: rgb(255 255 255 / .14); --fg: #f4f4ed; --muted: #d0c9bf; --soft: rgb(233 246 231 / .08); --a-glass: var(--g-bg); --a-glass-line: var(--g-line); }
:root[data-layout="vidro"] .shell { background: transparent; }
:root[data-layout="vidro"][data-modo="desktop"] .shell, html[data-modo="desktop"]:root[data-layout="vidro"] .shell { background: transparent; }
:root[data-layout="vidro"] .card, :root[data-layout="vidro"] .side, :root[data-layout="vidro"] .dock, :root[data-layout="vidro"] .start, :root[data-layout="vidro"] .pop, :root[data-layout="vidro"] dialog.np, :root[data-layout="vidro"] dialog.kdr { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 24px; box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-hi); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
:root[data-layout="vidro"] .side { border-radius: 18px; }
:root[data-layout="vidro"] .sq, :root[data-layout="vidro"] .field, :root[data-layout="vidro"] .shell select, :root[data-layout="vidro"] .a-opt, :root[data-layout="vidro"] .a-list li, :root[data-layout="vidro"] .a-plano, :root[data-layout="vidro"] .a-tabs button:not([aria-current]), :root[data-layout="vidro"] .a-check:not(:has(input:checked)) { background: var(--g-ctl); border-color: var(--g-line); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
:root[data-layout="vidro"] .a-tabs { background: var(--g-bg); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
:root[data-layout="vidro"] .a-aviso { background: color-mix(in srgb, var(--info-bg) 75%, transparent); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); }
:root[data-layout="vidro"] tr.pdet > td { background: transparent; }
:root[data-layout="vidro"] .sq:hover, :root[data-layout="vidro"] .field:hover, :root[data-layout="vidro"] .shell select:hover, :root[data-layout="vidro"] .a-opt:hover, :root[data-layout="vidro"] .a-list li:hover, :root[data-layout="vidro"] .bn:hover { background: var(--g-ctl-h); }
:root[data-layout="vidro"] .bn[aria-current="page"], :root[data-layout="vidro"] .bn[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
:root[data-layout="vidro"] *::-webkit-scrollbar-thumb { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* sem expansao: no maximo fade de opacidade curto ao abrir janelas */
:root[data-layout="vidro"] .pop, :root[data-layout="vidro"] .start, :root[data-layout="vidro"] dialog.np[open], :root[data-layout="vidro"] dialog.kdr[open] { animation: gFade .12s ease-out; }
@keyframes gFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-layout="vidro"] .pop, :root[data-layout="vidro"] .start, :root[data-layout="vidro"] dialog.np[open], :root[data-layout="vidro"] dialog.kdr[open] { animation: none; } }

/* ===== Passo 10: barras de rolagem glass ===== */
:root { --sb-thumb: color-mix(in srgb, var(--fg) 22%, transparent); --sb-thumb-h: color-mix(in srgb, var(--fg) 35%, transparent); --sb-thumb-a: color-mix(in srgb, var(--fg) 50%, transparent); }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover, .is-scrolling { scrollbar-color: var(--sb-thumb) transparent; }
}
@supports not (-moz-appearance: none) {
  *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
  *::-webkit-scrollbar:hover { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  *::-webkit-scrollbar-thumb { background-color: transparent; border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; transition: background-color .3s; }
  *:hover::-webkit-scrollbar-thumb, .is-scrolling::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); }
  *::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-h); }
  *::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-a); }
}
.content, .cv-msgs { scrollbar-gutter: stable; }

/* ===== Passos 3, 5 e 11 (modo desktop, menu da foto, cor do painel) ===== */
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
.ph-ev i, .ph-dot { background: var(--brand); }
html.hz-tc, html.hz-tc *, html.hz-tc *::before, html.hz-tc *::after { transition: background-color .2s, color .2s, border-color .2s, fill .2s !important; }
.cfg-cor { display: grid; gap: 12px; }

/* menu da foto de perfil */
.pm { position: fixed; z-index: 50; width: 300px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 60px rgb(0 0 0 / .28); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.pm[hidden] { display: none; }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); }
.pm-head .grow { min-width: 0; flex: 1; }
.pm-head .grow b, .pm-head .grow span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-head .grow span { font-size: 12.5px; color: var(--muted); }
.pm-gear { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.pm-gear:hover, .pm-item:hover { background: var(--soft); color: var(--fg); }
.pm-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); font-weight: 500; cursor: pointer; text-align: left; }
.pm-foot { border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 4px 2px; display: grid; gap: 10px; }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; font-weight: 500; }
.pm-row[hidden] { display: none; }
.pm-sw { position: relative; width: 40px; height: 24px; flex: none; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .2s; padding: 0; }
.pm-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.pm-sw[aria-checked="true"] { background: var(--brand); } .pm-sw[aria-checked="true"] i { transform: translateX(16px); }
.pm-last { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-themes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--soft); }
.pm-themes button { width: 34px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pm-themes button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.pm-out { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--bad); font-weight: 600; cursor: pointer; }
.pm-out:hover { background: var(--bad-bg); }

/* modo desktop: só em telas largas com mouse (ver deskOk no JS) */
html[data-modo="desktop"], :root[data-layout="vidro"] { --desk-bg: radial-gradient(110% 80% at 90% 105%, color-mix(in srgb, var(--brand-l) 45%, #ff8ac0) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--brand-l) 80%, #0a0c1c), color-mix(in srgb, var(--brand-l) 55%, #2a1458)); }
@media (prefers-color-scheme: dark) { html[data-modo="desktop"]:not([data-theme="light"]), :root[data-layout="vidro"]:not([data-theme="light"]) { --desk-bg: radial-gradient(110% 80% at 90% 105%, color-mix(in srgb, var(--brand-l) 35%, #7a2a5c) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--brand-l) 45%, #05060c), color-mix(in srgb, var(--brand-l) 30%, #140a2a)); } }
html[data-modo="desktop"][data-theme="dark"], :root[data-layout="vidro"][data-theme="dark"] { --desk-bg: radial-gradient(110% 80% at 90% 105%, color-mix(in srgb, var(--brand-l) 35%, #7a2a5c) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--brand-l) 45%, #05060c), color-mix(in srgb, var(--brand-l) 30%, #140a2a)); }
html[data-modo="desktop"] body, :root[data-layout="vidro"] body { background: var(--desk-bg); background-attachment: fixed; }
html[data-modo="desktop"] .shell { padding: 14px; }
html[data-modo="desktop"] .shell .content { display: none; }
html[data-modo="desktop"] .side { position: relative; z-index: 40; border: 1px solid rgb(255 255 255 / .35); border-radius: 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 10px 40px rgb(0 0 0 / .22); }
html[data-modo="desktop"] body .fab { z-index: 30; }
html[data-modo="desktop"] .opt[data-min]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand); }
html[data-modo="desktop"] .opt { position: relative; }
html[data-modo="desktop"] .dock { z-index: 1000; display: flex; }
html[data-modo="desktop"] .side { display: none !important; }
html[data-modo="desktop"] .bn { position: relative; }
html[data-modo="desktop"] .bn[data-min]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--brand); }
body:has(#shell[hidden]) #desk, body:has(#shell[hidden]) #deskbar, body:has(#shell[hidden]) .dock, body:has(#shell[hidden]) .fab, body:has(#shell[hidden]) .pm { display: none !important; }
#desk { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#deskbar { position: fixed; z-index: 30; top: 8px; right: 16px; }
html:not([data-modo="desktop"]) #desk, html:not([data-modo="desktop"]) #deskbar { display: none; }
.dw { position: absolute; display: flex; flex-direction: column; pointer-events: auto; background: var(--bg); color: var(--fg); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; box-shadow: 0 16px 48px rgb(0 0 0 / .28); overflow: hidden; will-change: transform, opacity; }
.dw.foc { box-shadow: 0 24px 70px rgb(0 0 0 / .42); }
.dw[hidden] { display: none; }
.dw.anim { transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.dw-bar { position: relative; flex: none; height: 40px; display: flex; align-items: center; padding: 0 14px; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); border-bottom: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.dw-btns { display: flex; gap: 8px; position: relative; z-index: 1; }
.dw-b { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 system-ui, sans-serif; color: transparent; cursor: pointer; background: var(--line); }
.dw.foc .dw-x { background: #ff5f57; } .dw.foc .dw-m { background: #febc2e; } .dw.foc .dw-z { background: #28c840; }
.dw-btns:hover .dw-b, .dw-b:focus-visible { color: rgb(0 0 0 / .55); }
.dw-t { position: absolute; left: 80px; right: 80px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dw-body { flex: 1; min-height: 0; overflow: auto; padding: 24px 28px 34px; background: var(--bg); }
.dw-body > .head { margin-bottom: 22px; }

/* Barra lateral: icones 18px com traco 1.75 (padrao Tabler) e texto menor; continua flutuante, com o mesmo botao de recolher */
html[data-menu="side"] #side .opt { height: 40px; border-radius: 12px; font-size: 13.5px; font-weight: 500; }
html[data-menu="side"] #side .opt .ico .i, html[data-menu="side"] #side .opt .ico svg { width: 18px; height: 18px; stroke-width: 1.75; }
html[data-menu="side"] #side .opt[aria-current="page"]::before { top: 12px; height: 16px; }
html[data-menu="side"] #side .opts { gap: 2px; }
/* item selecionado: pilula clara como na barra de baixo, sem barra lateral nem brilho */
html[data-menu="side"] #side .opt[aria-current="page"], html[data-menu="side"] #side.closed .opt[aria-current="page"] { background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--brand); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
html[data-menu="side"] #side .opt[aria-current="page"]::before { display: none; }
html[data-menu="side"] #side .logo, html[data-menu="side"] #side.closed .logo { width: 36px; height: 36px; border-radius: 10px; }
html[data-menu="side"] #side .brandname { font-size: 13.5px; line-height: 1.2; }
html[data-menu="side"] #side .plan { font-size: 11px; }
html[data-menu="side"] #side .title { padding-bottom: 12px; margin-bottom: 10px; }
html[data-menu="side"] #side .badge { min-width: 18px; height: 18px; font-size: 10.5px; }
html[data-menu="side"] #side .sect .lbl { font-size: 10px; }
html[data-menu="side"] #side #side-me { font-size: 13.5px; }
html[data-menu="side"] #side #side-me .av { width: 26px; height: 26px; font-size: 10px; }
/* Agenda em dois cards: calendario e painel lateral */
.ag2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ag-side { display: flex; flex-direction: column; gap: 14px; }
.ag-side .dayinfo { border-left: 0; padding: 0; min-height: 0; flex: 1; }
.ag-side .legend { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ag-side .dayadd { margin-top: auto; }
.ag-cal .cal { border-radius: 12px; }
:root[data-layout="vidro"] .cal, :root[data-modo="desktop"] .cal { background: var(--pp-bg); }
:root[data-layout="vidro"] .cal .cell, :root[data-modo="desktop"] .cal .cell { background: transparent; }
.ag-side .ev .grow { flex: 1 1 130px; min-width: 0; }
.ag-side .ev { gap: 6px 10px; }
:root[data-layout="vidro"] .cal .wd, :root[data-modo="desktop"] .cal .wd { background: var(--soft); }
@media (max-width: 900px) { .ag2 { grid-template-columns: minmax(0, 1fr); } }

/* Desktop: janelas e dock em glass, icones brancos, janela expandida compacta */
html[data-modo="desktop"] { --dg-bg: rgb(244 236 224 / .66); --dg-bar: rgb(255 255 255 / .2); --dg-line: rgb(255 255 255 / .38); }
@media (prefers-color-scheme: dark) { html[data-modo="desktop"]:not([data-theme="light"]) { --dg-bg: rgb(30 28 26 / .7); --dg-bar: rgb(255 255 255 / .06); --dg-line: rgb(225 237 223 / .16); } }
html[data-modo="desktop"][data-theme="dark"] { --dg-bg: rgb(30 28 26 / .7); --dg-bar: rgb(255 255 255 / .06); --dg-line: rgb(225 237 223 / .16); }
html[data-modo="desktop"] .dw { background: var(--dg-bg); border: 1px solid var(--dg-line); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); }
html[data-modo="desktop"] .dw-bar { background: var(--dg-bar); border-bottom-color: var(--dg-line); }
html[data-modo="desktop"] .dw-body { background: transparent; }
/* menu, avisos e dialogos: mais opacos para nao misturar com o que esta atras */
:root { --pp-bg: rgb(246 240 231 / .88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pp-bg: rgb(32 30 28 / .9); } }
:root[data-theme="dark"] { --pp-bg: rgb(32 30 28 / .9); }
:root[data-layout="vidro"] .start, :root[data-layout="vidro"] .pop, :root[data-layout="vidro"] dialog.np, :root[data-layout="vidro"] dialog.kdr, :root[data-modo="desktop"] .start, :root[data-modo="desktop"] .pop { background: var(--pp-bg); }
:root[data-modo="desktop"] .dock { background: rgb(20 24 22 / .38); border-color: rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); }
html[data-modo="desktop"] .dock .bn { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
html[data-modo="desktop"] .dock .bn svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
html[data-modo="desktop"] .dock .bn:hover { background: rgb(255 255 255 / .18); }
html[data-modo="desktop"] .dock .bn[aria-current="page"], html[data-modo="desktop"] .dock .bn[aria-expanded="true"] { background: rgb(255 255 255 / .9); color: var(--brand); text-shadow: none; }
html[data-modo="desktop"] .dock .bn[aria-current="page"] svg { filter: none; }
html[data-modo="desktop"] #deskbar .sq { background: rgb(20 24 22 / .28); border: 1px solid rgb(255 255 255 / .3); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
html[data-modo="desktop"] #deskbar .sq svg { color: #fff; stroke: currentColor; }
/* janela expandida: cabecalho e cards menores para caber sem rolagem */
.dw.dw-max .dw-body { padding: 12px 18px 14px; }
.dw.dw-max .dw-body > .head { margin-bottom: 10px; }
.dw.dw-max .head h1 { font-size: 21px; }
.dw.dw-max .head p { margin-top: 1px; font-size: 13px; }
.dw.dw-max .pad { padding: 12px 14px; }
.dw.dw-max .stats { gap: 10px; margin-bottom: 10px; }
.dw.dw-max .stat .top { margin-bottom: 4px; }
.dw.dw-max .stat .v { font-size: 21px; }
.dw.dw-max .stat h3 { font-size: 12.5px; margin-bottom: 1px; }
.dw.dw-max .stat .hint { margin-top: 2px; font-size: 12px; }
.dw.dw-max .tile { width: 28px; height: 28px; border-radius: 8px; }
.dw.dw-max .grid3, .dw.dw-max .grid2 { gap: 10px; }
.dw.dw-max .grid2 { margin-top: 10px; }
.dw.dw-max .stack, .dw.dw-max .a-cfg { gap: 10px; }
.dw.dw-max .cardhead { margin-bottom: 6px; }
.dw.dw-max th, .dw.dw-max td { padding: 6px 10px; }
/* janela expandida: a tela preenche a janela e nada rola por fora */
.dw.dw-max .dw-body { display: flex; flex-direction: column; overflow: auto; }
.dw.dw-max .pn-bar { margin: -2px 0 6px; }
.dw.dw-max .pn-grid { gap: 10px; }
.dw.dw-max .pn-card.pad { padding: 12px 14px; }
.dw.dw-max .passos li { padding: 5px 0; }
.dw.dw-max .pn-card .sub { margin-bottom: 4px; }
.dw.dw-max .pn-card.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: center; }
.dw.dw-max .pn-card.stat .top { grid-row: 1 / span 3; margin: 0; }
.dw.dw-max .pn-card.stat .tile { width: 34px; height: 34px; }
.dw.dw-max #v-processos > .filters { margin-bottom: 0; }
.dw.dw-max #v-processos > .card, .dw.dw-max #v-clientes > .card, .dw.dw-max #v-contatos > .card, .dw.dw-max #v-equipe > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dw.dw-max .tablewrap { flex: 1; min-height: 0; overflow: auto; }
.dw.dw-max .tablewrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.dw.dw-max .dw-body > section:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.dw.dw-max #v-agenda > .ag2 { flex: 1; min-height: 0; align-items: stretch; gap: 10px; }
.dw.dw-max .ag-cal { display: flex; flex-direction: column; min-height: 0; }
.dw.dw-max .ag-cal .cal { flex: 1; min-height: 0; grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); }
.dw.dw-max .ag-cal .cell { min-height: 0; overflow: hidden; padding: 4px; }
.dw.dw-max .ag-side { min-height: 0; overflow: hidden; }
.dw.dw-max .ag-side .daylist { max-height: none; min-height: 0; overflow: auto; }