/* Layout: três camadas como o ClickUp — barra global preta (marca HUB) › árvore de clientes › conteúdo com cabeçalho do local, abas de visões e barra da visão */
:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --bg: #FFFFFF;
  --surface: #F7F8F9;
  --surface-2: #EEF0F3;
  --line: #E8EAED;
  --text: #292D34;
  --muted: #656F7D;
  --faint: #9AA1AB;
  --focus: #2E3192;
  --tree-bg: #FAFBFC;
  --tree-hover: #F0F1F3;
  --tree-on: #E9EBEF;
  --line-strong: #D5D8DD;
  --sel-bg: #EEF0F3;
  --scroll: #CDD1D6;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
  --p-urg: #E5484D; --p-alta: #E8A100; --p-normal: #4C8DF6; --p-baixa: #A0A7B1;
  --link: #1F6FEB; --tc-cinza: #6B7280; --tc-vermelho: #D92D20; --tc-laranja: #E8590C; --tc-amarelo: #B7791F; --tc-verde: #2F9E44; --tc-azul: #1C7ED6; --tc-roxo: #7048E8; --tc-rosa: #D6336C;
  --bg-amarelo: #FFF3BF; --bg-verde: #D3F9D8; --bg-azul: #D0EBFF; --bg-rosa: #FFDEEB; --bg-cinza: #E9ECEF;
  --rail-bg: #0A0A0A;
  --rail-text: #F2F2F0;
  --rail-muted: #8F8F8A;
  --amb-a: #6CBE45; --amb-b: #00A99D;
  --arq-a: #2E3192; --arq-b: #F15A3A;
  --top-a: #F15A2B; --top-b: #F9A54A;
  --danger: #D93A2B; --danger-bg: #FDECEA; --warn: #B87300; --ok: #1E9E5A;
  --s-ok: #1B7A47; --s-warn: #8A5A00; --s-serious: #B23A0E; --s-crit: #C0281C; --s-info: #2450B8; --s-neutral: #6B6B66;
  /* fonte do sistema, a mesma estratégia do ClickUp: San Francisco no Mac/iPhone, Segoe UI no Windows, Roboto no Android */
  --f-display: -apple-system, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: -apple-system, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-num: -apple-system, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cut: 16px;
  --r: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1F21; --surface: #25262A; --surface-2: #2E3035; --line: #34363B;
    --text: #E6E7E9; --muted: #A2A7AF; --faint: #757B84; --focus: #8C90F0;
    --tree-bg: #1A1B1D; --tree-hover: #26282C; --tree-on: #2F3136; --rail-bg: #000000; --line-strong: #464950; --sel-bg: #2F3136; --scroll: #45484E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6); --p-urg: #FF6B6F; --p-alta: #F5B83D; --p-normal: #6EA4FF; --p-baixa: #8A9099; --link: #6EA8FE; --tc-cinza: #ADB5BD; --tc-vermelho: #FF6B6B; --tc-laranja: #FF922B; --tc-amarelo: #FCC419; --tc-verde: #51CF66; --tc-azul: #4DABF7; --tc-roxo: #9775FA; --tc-rosa: #F06595; --bg-amarelo: rgba(252, 196, 25, .22); --bg-verde: rgba(81, 207, 102, .2); --bg-azul: rgba(77, 171, 247, .2); --bg-rosa: rgba(240, 101, 149, .2); --bg-cinza: rgba(173, 181, 189, .18);
    --danger: #FF6A5C; --danger-bg: #3A1D1A; --warn: #E5A52A; --ok: #37B873; --s-ok: #4CC98A; --s-warn: #E8B04A; --s-serious: #F5895A; --s-crit: #FF7B6E; --s-info: #7DA2FF; --s-neutral: #A6A6A0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1F21; --surface: #25262A; --surface-2: #2E3035; --line: #34363B;
  --text: #E6E7E9; --muted: #A2A7AF; --faint: #757B84; --focus: #8C90F0;
  --tree-bg: #1A1B1D; --tree-hover: #26282C; --tree-on: #2F3136; --rail-bg: #000000; --line-strong: #464950; --sel-bg: #2F3136; --scroll: #45484E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6); --p-urg: #FF6B6F; --p-alta: #F5B83D; --p-normal: #6EA4FF; --p-baixa: #8A9099; --link: #6EA8FE; --tc-cinza: #ADB5BD; --tc-vermelho: #FF6B6B; --tc-laranja: #FF922B; --tc-amarelo: #FCC419; --tc-verde: #51CF66; --tc-azul: #4DABF7; --tc-roxo: #9775FA; --tc-rosa: #F06595; --bg-amarelo: rgba(252, 196, 25, .22); --bg-verde: rgba(81, 207, 102, .2); --bg-azul: rgba(77, 171, 247, .2); --bg-rosa: rgba(240, 101, 149, .2); --bg-cinza: rgba(173, 181, 189, .18);
  --danger: #FF6A5C; --danger-bg: #3A1D1A; --warn: #E5A52A; --ok: #37B873; --s-ok: #4CC98A; --s-warn: #E8B04A; --s-serious: #F5895A; --s-crit: #FF7B6E; --s-info: #7DA2FF; --s-neutral: #A6A6A0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 14px; line-height: 1.45; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
h1, h2, h3 { font-family: var(--f-display); font-weight: 650; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 14px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--f-num); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ===== estrutura ===== */
.app { display: grid; grid-template-columns: 64px 272px minmax(0, 1fr); height: 100%; }
.rail { background: var(--rail-bg); color: var(--rail-text); display: flex; flex-direction: column; align-items: center; padding: 14px 0 calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px); gap: 4px; }
.rail .mark { width: 40px; color: var(--paper); margin-bottom: 14px; }
.rail .mark svg { width: 40px; height: auto; display: block; }
.rail-btn { width: 54px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: var(--r); color: var(--rail-muted); font-size: 10.5px; position: relative; text-align: center; }
.rail-btn svg { width: 19px; height: 19px; }
.rail-btn:hover { background: #1C1C1C; color: var(--rail-text); }
.rail-btn.on { background: #262626; color: var(--paper); }
.rail-btn .dot { position: absolute; top: 3px; right: 8px; background: var(--paper); color: var(--ink); border-radius: 8px; font-family: var(--f-num); font-size: 11px; line-height: 15px; min-width: 15px; padding: 0 4px; }
.rail-btn .dot.red { background: var(--danger); color: #fff; }
.rail .spacer { flex: 1; }

.tree { background: var(--tree-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tree-head { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.ws { display: flex; align-items: center; gap: 8px; }
.ws b { font-family: var(--f-display); font-size: 16px; }
.ws .plus { margin-left: auto; padding: 4px; border-radius: 4px; color: var(--muted); }
.ws .plus:hover { background: var(--tree-hover); }
.search-btn { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); color: var(--faint); width: 100%; }
.search-btn kbd { margin-left: auto; font-family: var(--f-num); font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.tree-body { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.tree-label { font-family: var(--f-num); font-size: 11px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; color: var(--faint); padding: 14px 8px 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tree-filter { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; background: var(--bg); font-size: 13px; margin: 2px 0 6px; }
.node { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border-radius: 5px; color: var(--text); min-height: 30px; cursor: pointer; }
.node:hover { background: var(--tree-hover); }
.node.on { background: var(--tree-on); font-weight: 500; }
.node .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.node .cnt { font-family: var(--f-num); color: var(--faint); font-size: 13px; }
.node .cnt.late { color: var(--danger); }
.node .car { width: 16px; height: 16px; display: grid; place-items: center; color: var(--faint); flex: none; border-radius: 3px; }
.node .car:hover { background: var(--tree-on); color: var(--text); }
.node .car svg { width: 12px; height: 12px; transition: transform .15s; }
.node .car.open svg { transform: rotate(90deg); }
.node.d1 { padding-left: 22px; }
.node.d2 { padding-left: 44px; }
.node .ico { color: var(--muted); display: inline-flex; }
.sp { width: 20px; height: 20px; flex: none; border-radius: 5px; display: grid; place-items: center; color: #fff; font-family: var(--f-num); font-size: 12px; font-weight: 600; background: var(--sc, #4A4A46); }
.tree-foot { border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: var(--faint); display: flex; gap: 10px; align-items: center; }
.tree-foot button { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-left: auto; white-space: nowrap; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.loc-head { padding: 14px max(24px, env(safe-area-inset-right, 0px)) 0 24px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; flex-wrap: wrap; min-width: 0; }
.crumbs button:hover { color: var(--text); text-decoration: underline; }
.crumbs svg { width: 12px; height: 12px; color: var(--faint); flex: none; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-row h1 { min-width: 0; display: flex; align-items: center; gap: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.chip b { color: var(--text); font-weight: 500; font-family: var(--f-num); font-size: 13.5px; letter-spacing: .02em; }
.chip.late b { color: var(--danger); }
.head-actions { margin-left: auto; display: flex; gap: 8px; }
.menu-btn { display: none; padding: 6px; margin-left: -6px; }
.views { display: flex; gap: 2px; overflow-x: auto; margin-bottom: -1px; scrollbar-width: none; }
.views::-webkit-scrollbar { display: none; }
.vtab { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.vtab:hover { color: var(--text); }
.vtab.on { color: var(--text); border-color: var(--text); }
.vbar { display: flex; align-items: center; gap: 6px; padding: 10px max(24px, env(safe-area-inset-right, 0px)) 10px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vbar .sep { flex: 1; }
.tb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 5px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); background: var(--bg); white-space: nowrap; }
.tb:hover { color: var(--text); border-color: var(--faint); }
.tb.on { color: var(--bg); background: var(--text); border-color: var(--text); }
.tb select { border: 0; background: transparent; padding: 0; font-size: 13px; color: var(--text); cursor: pointer; }
.vfind { border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; font-size: 13px; background: var(--bg); width: 180px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: #2A2A2A; }
:root[data-theme="dark"] .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } }
.content { flex: 1; overflow: auto; padding: 18px max(24px, env(safe-area-inset-right, 0px)) 48px 24px; }
.stack { display: flex; flex-direction: column; gap: 22px; max-width: 1320px; }
.stack > * { min-width: 0; }

/* ===== lista ===== */
.grp { display: flex; flex-direction: column; }
.grp-head { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
.grp-head .car { color: var(--faint); padding: 2px; border-radius: 3px; display: inline-flex; }
.grp-head .car svg { width: 12px; height: 12px; transition: transform .15s; }
.grp-head .car.open svg { transform: rotate(90deg); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; background: var(--sc); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.grp-head .n { color: var(--faint); font-family: var(--f-num); font-size: 14px; }
.tbl { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.row { display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); min-width: 780px; width: 100%; }
.row:first-child { border-top: 0; }
.row.hd { color: var(--faint); font-size: 11.5px; font-family: var(--f-num); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding-block: 6px; background: var(--surface); }
button.row:hover { background: var(--surface); }
.row.sub { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn .t.done { text-decoration: line-through; color: var(--muted); }
.sq { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--sc); }
.code { font-family: var(--f-num); font-size: 12px; letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.type { font-size: 11px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.mini { display: inline-flex; align-items: center; gap: 3px; color: var(--faint); font-size: 12px; font-family: var(--f-num); white-space: nowrap; }
.mini svg { width: 13px; height: 13px; }
.mini.block { color: var(--danger); }
.avs { display: flex; }
.av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; border: 2px solid var(--bg); flex: none; background: var(--ac); }
.avs .av + .av { margin-left: -6px; }
.due { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.due.late { color: var(--danger); font-weight: 500; }
.due.soon { color: var(--warn); }
.prio { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.prio svg { width: 14px; height: 14px; }
.prio.urgente { color: var(--danger); } .prio.alta { color: var(--warn); } .prio.baixa { color: var(--faint); }
.cf { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); color: var(--faint); min-width: 780px; }
.add-row input { flex: 1; border: 0; background: transparent; outline: none; padding: 3px 0; min-width: 0; }
.add-row kbd { font-family: var(--f-num); font-size: 12px; color: var(--faint); }
.indent { width: 18px; flex: none; }
.more { padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; width: 100%; }
.more:hover { background: var(--surface); }

/* ===== quadro ===== */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(256px, 1fr); gap: 12px; min-width: min-content; align-items: start; }
.col { background: var(--surface); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; border-top: 3px solid var(--sc); }
.col.over { outline: 2px dashed var(--faint); outline-offset: -2px; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; cursor: grab; }
.card:hover { border-color: var(--faint); }
.card.dragging { opacity: .4; }
.card .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .ttl { font-weight: 500; }
.card .ctx { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== calendário ===== */
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 770px; }
.cal .wd { padding: 6px 8px; font-family: var(--f-num); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); background: var(--surface); border-bottom: 1px solid var(--line); }
.cal .day { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day.out { background: var(--surface); }
.cal .day.out .dn { color: var(--faint); }
.cal .dn { font-family: var(--f-num); font-size: 14px; color: var(--muted); }
.cal .day.today .dn { color: var(--bg); background: var(--text); border-radius: 10px; padding: 0 7px; align-self: flex-start; }
.ev { font-size: 12px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); border-left: 3px solid var(--sc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.ev.done { text-decoration: line-through; color: var(--faint); }
.ev:hover { background: var(--tree-on); }

/* ===== gantt ===== */
.gantt { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.g-left { border-right: 1px solid var(--line); min-width: 0; }
.g-right { overflow-x: auto; position: relative; }
.g-row { height: 36px; display: flex; align-items: center; border-top: 1px solid var(--line); padding: 0 10px; gap: 8px; min-width: 0; width: 100%; }
.g-row.hd { height: 44px; border-top: 0; background: var(--surface); }
.g-row.lst { background: var(--surface); font-weight: 500; font-size: 13px; }
.g-left .g-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.g-grid { position: relative; }
.g-scale { height: 44px; display: flex; background: var(--surface); }
.g-week { flex: none; border-left: 1px solid var(--line); font-family: var(--f-num); font-size: 12px; color: var(--muted); padding: 4px 6px; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.g-week b { font-weight: 500; color: var(--text); font-size: 13px; }
.g-line { height: 36px; border-top: 1px solid var(--line); position: relative; }
.g-line.lst { background: var(--surface); }
.g-bar { position: absolute; top: 8px; height: 20px; border-radius: 4px; background: var(--sc); color: #fff; font-size: 11.5px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; min-width: 8px; }
.g-bar:hover { filter: brightness(1.1); }
.g-bar.ms { width: 3px !important; height: 24px; top: 6px; transform: none; border-radius: 2px; padding: 0; min-width: 0; }
.g-sum { position: absolute; top: 13px; height: 10px; background: #A6DB93; border-radius: 5px; }
.g-bar.curta > span:first-child { display: none; }
.g-lbl { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; font-size: 12.5px; color: var(--text); white-space: nowrap; z-index: 1; }
.g-lbl:hover { background: var(--surface); }
.g-lbl .av { margin: 0; border: 0; width: 20px; height: 20px; font-size: 9px; }
.g-nodate { position: sticky; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: #F2B33D; flex: none; cursor: pointer; }
.g-semd { display: inline-flex; color: var(--faint); cursor: pointer; }
.g-semd:hover { color: var(--text); }
.g-semd svg { width: 15px; height: 15px; }
.g-week.ano { align-items: flex-start; }
.g-week.ano b { position: sticky; left: 8px; }
.gantt { position: relative; }
.g-zoomb { position: absolute; right: 40px; top: 58px; z-index: 3; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sh-card); overflow: hidden; }
.g-zoomb .ibtn { width: 26px; height: 26px; border-radius: 0; }
.g-zoomb .ibtn + .ibtn { border-top: 1px solid var(--line); }
.g-zoomb .ibtn:disabled { opacity: .35; }
.g-today::before { content: ""; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .8; z-index: 1; pointer-events: none; }
.g-today span { position: absolute; top: 2px; left: 4px; font-family: var(--f-num); font-size: 11px; color: var(--danger); background: var(--bg); padding: 0 3px; border-radius: 2px; }
.g-weekend { position: absolute; top: 44px; bottom: 0; background: var(--surface); opacity: .6; pointer-events: none; }

/* ===== painéis ===== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
button.kpi:hover { border-color: var(--faint); }
.kpi .n { font-family: var(--f-num); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 13px; }
.kpi.alert .n { color: var(--danger); }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-b { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-b.flush { padding: 0; gap: 0; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 13px; padding-block: 2px; }
.bar-row > span:first-child { min-width: 0; }
.bar-row .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; overflow-wrap: break-word; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; display: flex; }
.bar-track i { display: block; height: 100%; }
.progress { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--text); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 60px 60px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; width: 100%; }
.lrow:first-child { border-top: 0; }
.lrow.hd { color: var(--faint); font-size: 11.5px; font-family: var(--f-num); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
button.lrow:hover { background: var(--surface); }
.lrow .nm { display: flex; gap: 8px; align-items: center; min-width: 0; }
.lrow .nm span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); width: 100%; }
.drow:first-child { border-top: 0; }
.drow:hover { background: var(--surface); }
.drow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .ctx { grid-column: 1 / -1; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.erp-card { background: var(--ink); color: var(--paper); padding: 16px 20px 18px 22px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); display: flex; flex-direction: column; gap: 9px; position: relative; }
:root[data-theme="dark"] .erp-card { background: #222; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .erp-card { background: #222; } }
.erp-card .band { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.g-amb { background: linear-gradient(180deg, var(--amb-a), var(--amb-b)); }
.g-arq { background: linear-gradient(180deg, var(--arq-a), var(--arq-b)); }
.g-top { background: linear-gradient(180deg, var(--top-a), var(--top-b)); }
.erp-card .meta { font-family: var(--f-num); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #A9A9A4; display: flex; gap: 10px; flex-wrap: wrap; }
.erp-card h3 { font-size: 16px; }
.erp-card p { margin: 0; color: #CFCFCB; font-size: 13.5px; }
.erp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; color: #CFCFCB; margin: 0; }
.erp-card dt { color: #8F8F8A; }
.erp-card dd { margin: 0; }
.erp-card .btn { align-self: flex-start; background: var(--paper); color: var(--ink); border-color: var(--paper); margin-top: 4px; }
.empty { border: 1px dashed var(--line); border-radius: var(--r); padding: 20px; color: var(--muted); }

/* ===== tarefa (modal ClickUp) ===== */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
.task { position: fixed; z-index: 31; inset: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px)); max-width: 1240px; margin: 0 auto; background: var(--bg); border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.3); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.task-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); min-width: 0; }
.task-top .crumbs { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ibtn { padding: 5px; border-radius: 4px; color: var(--muted); display: inline-flex; }
.ibtn:hover { background: var(--surface); color: var(--text); }
.ibtn[disabled] { opacity: .35; pointer-events: none; }
.task-top .right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.task-main { overflow-y: auto; padding: 18px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
.qlinks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qlinks select { border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; background: var(--bg); font-size: 12.5px; }
.ttl-in { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.25; border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; margin-left: -7px; width: 100%; background: transparent; resize: none; field-sizing: content; min-height: 1.6em; }
.ttl-in:hover { border-color: var(--line); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.fld { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; }
.fld > .lab { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.fld > .lab svg { width: 15px; height: 15px; }
.fld select, .fld input[type="date"], .fld input[type="text"] { border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; background: transparent; max-width: 100%; min-width: 0; }
.fld input[type="number"] { border: 1px solid transparent; border-radius: 4px; padding: 4px 6px; background: transparent; max-width: 100%; min-width: 0; }
.fld select:hover, .fld input:hover { border-color: var(--line); }
.fld input:disabled { opacity: .5; }
.fld .dates { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-ctl { display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden; background: var(--sc); }
.st-ctl select { color: #fff; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border: 0; padding: 4px 8px; border-radius: 0; background: var(--sc); max-width: 190px; }
.st-ctl select option { color: initial; background: initial; text-transform: none; }
.st-ctl button { color: #fff; padding: 0 7px; border-left: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.st-ctl button svg { width: 14px; height: 14px; }
.timer { display: inline-flex; align-items: center; gap: 8px; }
.timer button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 14px; border: 1px solid var(--line); font-size: 12.5px; }
.timer button.run { background: var(--danger); color: #fff; border-color: var(--danger); }
details.pick { position: relative; }
details.pick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; border: 1px solid transparent; }
details.pick > summary::-webkit-details-marker { display: none; }
details.pick > summary:hover { border-color: var(--line); }
details.pick .menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 4px; min-width: 240px; display: flex; flex-direction: column; }
details.pick .menu button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; }
details.pick .menu button:hover { background: var(--surface); }
details.pick .menu button .av { margin: 0; border: 0; }
details.pick .menu .ck { margin-left: auto; color: var(--text); }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec-h { display: flex; align-items: center; gap: 8px; }
.sec-h .n { color: var(--faint); font-family: var(--f-num); font-size: 14px; font-weight: 400; }
.box { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); }
.dep-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); width: 100%; min-width: 0; }
.dep-row:first-child { border-top: 0; }
.dep-row .k { font-size: 12px; font-weight: 500; width: 92px; flex: none; }
.dep-row .k.b { color: var(--danger); } .dep-row .k.w { color: var(--warn); }
.dep-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-row .t:hover { text-decoration: underline; }
.desc { width: 100%; min-height: 110px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--bg); resize: vertical; line-height: 1.55; }
.cfs .fld { padding: 2px 12px; border-top: 1px solid var(--line); grid-template-columns: 130px minmax(0, 1fr); }
.cfs .fld:first-child { border-top: 0; }
.cfs input { width: 100%; }
.subr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--line); }
.subr:first-child { border-top: 0; }
.subr .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.subr .t:hover { text-decoration: underline; }
.subr .t.done { text-decoration: line-through; color: var(--muted); }
.tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; }
.tick.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.tick svg { width: 11px; height: 11px; }
.addl { display: flex; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); align-items: center; color: var(--faint); }
.addl:first-child { border-top: 0; }
.addl input { flex: 1; border: 0; background: transparent; outline: none; min-width: 0; padding: 3px 0; color: var(--text); }
.ckl label { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); }
.ckl label:first-child { border-top: 0; }
.ckl input { width: 16px; height: 16px; accent-color: var(--text); }
.ckl label.done span { text-decoration: line-through; color: var(--muted); }
.task-side { border-left: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; background: var(--surface); }
.side-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.side-tabs button { padding: 10px 10px 9px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; }
.side-tabs button.on { color: var(--text); border-color: var(--text); }
.feed { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cmt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.cmt .av { margin: 0; border: 0; width: 28px; height: 28px; }
.cmt .bub { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cmt .who { font-weight: 500; font-size: 13px; }
.cmt .when { color: var(--faint); font-size: 12px; margin-left: 6px; }
.cmt p { margin: 3px 0 0; white-space: pre-wrap; }
.act { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; color: var(--muted); font-size: 13px; }
.act .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin: 6px auto 0; }
.compose { border-top: 1px solid var(--line); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.compose textarea { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--bg); resize: vertical; }
.compose .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ===== modais ===== */
.modal { position: fixed; z-index: 41; left: 50%; top: 10vh; transform: translateX(-50%); width: min(600px, calc(100% - 32px)); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; max-height: 80vh; }
.mscrim { z-index: 40; }
.modal-h { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 4px; }
.modal-b { padding: 8px 20px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-f { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.form { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.form label { color: var(--muted); font-size: 13px; }
.form input, .form select { border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; background: var(--bg); width: 100%; min-width: 0; }
.tpl { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.tpl:first-child { border-top: 0; }
.q { border: 0; border-bottom: 1px solid var(--line); padding: 16px 20px; font-size: 16px; background: transparent; outline: none; border-radius: 10px 10px 0 0; }
.results { overflow-y: auto; padding: 6px; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 5px; width: 100%; }
.res:hover, .res:focus-visible { background: var(--surface); }
.res .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res .ctx { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: 1 / -1; }
.toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; font-size: 13.5px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; gap: 14px; align-items: center; max-width: calc(100% - 32px); }
:root[data-theme="dark"] .toast { background: var(--paper); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: var(--paper); color: var(--ink); } }
.toast button { color: inherit; text-decoration: underline; }
.drawer-scrim { display: none; }

/* ===== painéis ===== */
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash .span2 { grid-column: 1 / -1; }
.chart-wrap { overflow-x: auto; }
.chart { width: 100%; min-width: 620px; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 13px; font-family: var(--f-body); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--faint); stroke-width: 1; }
.chart .mk { fill: var(--text); }
.chart .bar:hover .mk { opacity: .72; }
.chart .val { fill: var(--text); font-weight: 600; }
.card-tools { display: inline-flex; gap: 2px; }
.add-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.sel { border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px; background: var(--bg); font-size: 13px; max-width: 240px; }

/* ===== automações ===== */
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-top: 1px solid var(--line); }
.rule:first-child { border-top: 0; }
.rule .frase { color: var(--muted); margin: 3px 0 0; }
.rule .frase b { color: var(--text); font-weight: 500; }
.rule.off { opacity: .6; }
.switch { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); position: relative; cursor: pointer; flex: none; margin: 0; }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); transition: transform .15s; }
.switch:checked { background: var(--text); border-color: var(--text); }
.switch:checked::before { transform: translateX(16px); background: var(--bg); }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.log { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; width: 100%; }
.log:first-child { border-top: 0; }
button.log:hover { background: var(--surface); }
.rec-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.rec-row:first-child { border-top: 0; }
.rec-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row .t:hover { text-decoration: underline; cursor: pointer; }

/* ===== licenças e autorizações ===== */
.spill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--sc); background: color-mix(in srgb, var(--sc) 11%, var(--bg)); border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--bg)); }
.spill svg { width: 13px; height: 13px; }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--sc) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--sc) 28%, var(--bg)); }
.banner > svg { color: var(--sc); margin-top: 2px; }
.banner b { color: var(--text); }
.banner p { margin: 3px 0 0; color: var(--muted); line-height: 1.5; }
.kpi.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.lics .row { min-width: 1000px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.echip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 3px 2px 9px; border: 1px solid var(--line); border-radius: 14px; font-size: 12.5px; }
.echip svg { width: 13px; height: 13px; color: var(--muted); }
.echip button { display: inline-flex; padding: 3px; border-radius: 50%; color: var(--muted); }
.echip button:hover { background: var(--surface); color: var(--text); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lic-actions { display: flex; flex-direction: column; gap: 12px; }
details.mailbox summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.mailbox summary:hover { color: var(--text); }
.mail { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.mail .hd { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; white-space: normal; }
.task-side.lic-side { display: flex; flex-direction: column; gap: 22px; overflow-y: auto; padding: 16px; }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; font-size: 13px; }
.step::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }
.step .dotm { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--faint); background: var(--bg); margin-top: 2px; position: relative; z-index: 1; }
.step.feito .dotm { background: var(--faint); }
.step.feito b { color: var(--muted); font-weight: 500; }
.step.hoje .dotm { border-color: var(--s-crit); background: var(--s-crit); }
.step.hoje b { color: var(--s-crit); }
.step .qd { color: var(--muted); font-size: 12.5px; }
.t2 { display: flex; flex-direction: column; min-width: 0; }
.t2 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 .sub { font-size: 12px; color: var(--muted); }
.av-row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.av-row:first-child { border-top: 0; }
.av-row .t { text-align: left; min-width: 0; }
.av-row .t:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .task-grid { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .task-main { overflow: visible; }
  .task-side { border-left: 0; border-top: 1px solid var(--line); min-height: 420px; }
  .cards2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail, .tree { position: fixed; top: 0; bottom: 0; z-index: 35; transform: translateX(-120%); transition: transform .2s ease; }
  .rail { left: 0; width: 64px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .tree { left: 64px; width: min(290px, calc(100vw - 80px)); padding-top: env(safe-area-inset-top, 0px); }
  .app.nav .rail, .app.nav .tree { transform: none; }
  .app.nav .drawer-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 34; }
  .menu-btn { display: inline-flex; }
  .loc-head { padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
  .vbar { padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
  .vfind { width: 100%; order: 10; }
  .content { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
  .head-actions .btn .lbl { display: none; }
  h1 { font-size: 22px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task { inset: 0; border-radius: 0; }
  .task-main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .task-top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .gantt { grid-template-columns: 170px minmax(0, 1fr); }
  .lrow { grid-template-columns: minmax(0, 1fr) 80px; }
  .lrow .hide-m { display: none; }
  .bar-row { grid-template-columns: minmax(110px, 42%) minmax(0, 1fr) 34px; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .rec-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rec-row .hide-m { display: none; }
  .log { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .av-row { grid-template-columns: 76px minmax(0, 1fr); }
  .av-row > :nth-child(n+3) { grid-column: 2; }
}

/* ===================== Polimento visual: padrões de interface do ClickUp (marca HUB preservada) ===================== */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, .row, .node, .card, .tb, .btn, .vtab, .kpi, .proj, .drow, .lrow, .res, .ev, .g-bar, .rail-btn, .ibtn, .cellbtn, .st-ic, .pop-i, .sel, .vfind, .tree-filter, .search-btn {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .16s ease, opacity .12s ease, transform .16s ease;
}
/* barra lateral e barra global */
.node { min-height: 32px; border-radius: 6px; padding: 4px 6px 4px 8px; }
.node.on { background: var(--tree-on); font-weight: 600; }
.node .nadd { display: none; width: 22px; height: 22px; border-radius: 5px; place-items: center; color: var(--muted); flex: none; }
.node .nadd svg { width: 14px; height: 14px; }
.node .nadd:hover { background: var(--surface-2); color: var(--text); }
.node:hover .nadd, .node:focus-within .nadd { display: grid; }
.node:hover .cnt, .node:focus-within .cnt { display: none; }
.sp { border-radius: 6px; }
.search-btn { border-radius: 8px; min-height: 34px; }
.search-btn:hover { border-color: var(--line-strong); color: var(--muted); }
.rail-btn { border-radius: 8px; }
/* abas, barra da visão, botões e campos */
.vtab { border-radius: 6px 6px 0 0; padding: 8px 10px; }
.vtab:hover { background: var(--surface); }
.vtab svg { width: 15px; height: 15px; }
.tb { border: 0; border-radius: 6px; background: transparent; color: var(--muted); min-height: 30px; padding: 4px 10px; font-weight: 500; }
.tb:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.tb.on { background: var(--sel-bg); color: var(--text); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn { border-radius: 8px; min-height: 32px; padding: 6px 12px; box-shadow: var(--shadow-sm); border-color: var(--line); }
.btn:hover { border-color: var(--line-strong); }
.btn.primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.sel, .vfind, .tree-filter { min-height: 32px; border-radius: 8px; border-color: var(--line); }
.sel:hover, .vfind:hover, .tree-filter:hover { border-color: var(--line-strong); }
.sel:focus, .vfind:focus, .tree-filter:focus, .form input:focus, .form select:focus, .compose textarea:focus, .desc:focus, .pop input:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}
/* lista */
.tbl { border: 0; border-radius: 0; }
.row { min-height: 40px; padding: 3px 12px 3px 6px; border-top: 0; border-bottom: 1px solid var(--line); }
.row.hd { background: transparent; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 12px; font-weight: 500; color: var(--faint); min-height: 30px; padding-left: 36px; }
.lics .row.hd { padding-left: 6px; }
.row[data-a]:hover, .row[data-a]:focus-visible { background: var(--surface); cursor: pointer; }
.row.sub { background: transparent; }
.row .cf { color: var(--muted); }
.cell { display: flex; min-width: 0; }
.grp-head { padding: 10px 0 4px; }
.pill { min-height: 24px; border-radius: 6px; padding: 2px 9px 2px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; gap: 6px; }
.pill::before { display: none; }
.pill svg { width: 13px; height: 13px; flex: none; }
.st-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; flex: none; }
.st-ic:hover { background: var(--surface-2); }
.st-ic svg { width: 16px; height: 16px; }
.cellbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px; margin-left: -6px; border-radius: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cellbtn:hover { background: var(--surface-2); }
.cellbtn .vazio { color: var(--faint); opacity: 0; display: inline-flex; }
.row:hover .cellbtn .vazio, .row:focus-within .cellbtn .vazio { opacity: 1; }
.prio, .prio.urgente, .prio.alta, .prio.normal, .prio.baixa { color: var(--muted); }
.prio svg { width: 14px; height: 14px; }
.prio.urgente svg { color: var(--p-urg); } .prio.alta svg { color: var(--p-alta); } .prio.normal svg { color: var(--p-normal); } .prio.baixa svg { color: var(--p-baixa); }
.add-row { border-top: 0; min-height: 38px; padding-left: 12px; color: var(--faint); }
.add-row:hover { color: var(--muted); }
.add-row input::placeholder { color: var(--faint); }
.add-row:hover input::placeholder { color: var(--muted); }
.more { border-top: 0; color: var(--muted); }
/* quadro */
.col { background: var(--surface); border-radius: 10px; border-top: 0; padding: 8px; }
.col-head { padding: 4px 4px 6px; }
.card { border-radius: 10px; border-color: var(--line); box-shadow: var(--shadow-sm); }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card.dragging { opacity: .45; border-style: dashed; box-shadow: none; transform: none; }
.col.over { outline: 2px dashed color-mix(in srgb, var(--sc) 60%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--sc) 7%, var(--surface)); }
/* painéis, cartões e linhas */
.panel, .kpi, .proj, .empty, .gantt, .cal { border-radius: 12px; }
.kpi { box-shadow: var(--shadow-sm); }
button.kpi:hover, .proj:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.proj:hover { transform: translateY(-1px); }
.panel-h { padding: 12px 16px; }
.panel-b { padding: 14px 16px; }
.drow, .lrow, .av-row, .rec-row, .log { padding-inline: 16px; }
.ev { border-radius: 6px; }
.g-bar { border-radius: 6px; }
.box, .cfs, .dep, .subs, .mail, .banner { border-radius: 10px; }
.st-ctl { border-radius: 6px; }
/* janelas, menus e avisos */
.scrim { background: rgba(15, 18, 24, .42); }
.task, .modal { border-radius: 14px; box-shadow: var(--shadow-lg); }
.modal { border-color: var(--line); }
details.pick .menu { border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.toast { border-radius: 10px; box-shadow: var(--shadow-lg); animation: chToast .2s cubic-bezier(.2, .8, .2, 1); }
.pop { position: fixed; z-index: 70; min-width: 230px; max-width: 300px; max-height: min(380px, 72vh); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.pop.entra { animation: chPop .12s ease-out; }
.pop-h { font-size: 11px; font-weight: 600; color: var(--faint); padding: 6px 8px 4px; text-transform: uppercase; letter-spacing: .05em; }
.pop-i { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; width: 100%; text-align: left; }
.pop-i:hover, .pop-i:focus-visible { background: var(--surface); }
.pop-i svg { width: 16px; height: 16px; flex: none; }
.pop-i .ck { margin-left: auto; display: inline-flex; color: var(--text); }
.pop-i .av { margin: 0; border: 0; width: 22px; height: 22px; }
.pop-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.pop input[type="date"] { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--bg); }
#layer.entra .scrim { animation: chFade .16s ease-out; }
#layer.entra .task { animation: chSobe .2s cubic-bezier(.2, .8, .2, 1); }
#layer.entra .modal { animation: chSobeC .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes chFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chSobe { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes chSobeC { from { opacity: 0; transform: translate(-50%, 10px) scale(.985); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes chPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes chToast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 860px) { .task { border-radius: 0; } .row.hd { padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .card:hover, .proj:hover { transform: none; } }

/* ===================== Texto rico, chat da tarefa e caixa de entrada ===================== */
[hidden] { display: none !important; }
.tc-cinza { color: var(--tc-cinza); } .tc-vermelho { color: var(--tc-vermelho); } .tc-laranja { color: var(--tc-laranja); } .tc-amarelo { color: var(--tc-amarelo); }
.tc-verde { color: var(--tc-verde); } .tc-azul { color: var(--tc-azul); } .tc-roxo { color: var(--tc-roxo); } .tc-rosa { color: var(--tc-rosa); }
.bg-amarelo, .bg-verde, .bg-azul, .bg-rosa, .bg-cinza { border-radius: 3px; padding: 0 2px; }
.bg-amarelo { background: var(--bg-amarelo); } .bg-verde { background: var(--bg-verde); } .bg-azul { background: var(--bg-azul); } .bg-rosa { background: var(--bg-rosa); } .bg-cinza { background: var(--bg-cinza); }
.rt-dica { font-size: 12px; margin-left: auto; }
.rt-wrap { position: relative; }
.rt-wrap:not(.aberto):not(.curto) .rt { max-height: 168px; overflow: hidden; }
.sec-h .rt-topo { margin-left: 6px; min-height: 26px; padding: 2px 8px; font-size: 12.5px; }
.sec:has(.rt-wrap.curto) .rt-topo { display: none; }
.rt-fade { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.rt-wrap:not(.aberto):not(.curto) .rt-fade { display: block; }
.rt-wrap.curto + .rt-foot [data-a="rt-expandir"] { display: none; }
.rt-foot { display: flex; align-items: center; gap: 6px; }
.rt-foot .sep { flex: 1; }
/* Registro de ocorrências: blocos datados, o mais recente primeiro; texto longo mostra só as primeiras linhas */
#sec-oc .sec-h .oc-todas { margin-left: auto; min-height: 26px; padding: 2px 8px; font-size: 12.5px; }
.oc-box { display: flex; flex-direction: column; gap: 8px; }
.oc-novo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--faint); font-size: 14px; text-align: left; cursor: text; }
.oc-novo:hover { border-color: var(--line-strong); }
.oc-novo .av { margin: 0; border: 0; width: 24px; height: 24px; }
.oc-cmp { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.oc-cmp:focus-within { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.oc-cmp .rt { margin: 0; min-height: 76px; padding: 10px 12px; border-radius: 8px 8px 0 0; font-size: 14px; }
.oc-cmp .rt:hover, .oc-cmp .rt:focus { background: transparent; box-shadow: none; }
.oc-cmp .rt.vazio::before { left: 12px; right: 12px; top: 10px; }
.oc-cmp-f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.oc-cmp-f .sep { flex: 1; }
.oc-cmp-f .fbtn { margin-left: 0; font-size: 13px; color: var(--muted); }
.oc-cmp-f .fbtn svg { width: 14px; height: 14px; }
.oc-cmp-f .dica { font-size: 12px; color: var(--faint); }
.oc { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.oc:hover { border-color: var(--line-strong); }
.oc.realce { animation: chRealce 1.8s ease-out; }
.oc .oc-cmp { margin: 2px -4px 0; }
.oc-h { display: flex; align-items: center; gap: 8px; min-height: 24px; min-width: 0; font-size: 13px; }
.oc-dt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); white-space: nowrap; }
.oc-dt svg { width: 14px; height: 14px; color: var(--faint); }
.oc-quem { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; }
.oc-quem > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.oc-quem .av { margin: 0; border: 0; width: 20px; height: 20px; font-size: 9px; flex: none; }
.oc-h .faint { font-size: 12px; white-space: nowrap; }
.oc-h .chip { height: 20px; padding: 0 6px; font-size: 11.5px; }
.oc-acts { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.oc:hover .oc-acts, .oc-acts:focus-within { opacity: 1; }
.oc-wrap { position: relative; }
.rt.oc-b { min-height: 0; margin: 0; padding: 0; border-radius: 0; font-size: 14px; line-height: 1.6; }
.rt.oc-b:hover { background: transparent; }
.oc-wrap:not(.aberto) .oc-b { max-height: calc(1.6em * 3); overflow: hidden; }
.oc-fade { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7em; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.oc-wrap.longo:not(.aberto) .oc-fade { display: block; }
.oc-mais { display: none; align-self: flex-start; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.oc-mais:hover { color: var(--text); text-decoration: underline; }
.oc-wrap.longo + .oc-mais { display: inline-flex; }
.oc-imp { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 13px; color: var(--muted); }
.oc-imp > svg { width: 16px; height: 16px; flex: none; color: var(--faint); }
.oc-imp .btn { margin-left: auto; min-height: 28px; padding: 4px 10px; font-size: 13px; }
.oc-lista { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-left: -6px; padding: 4px 6px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.oc-lista:hover { background: var(--tree-hover); color: var(--text); }
.oc-lista svg { width: 12px; height: 12px; }
.pop.ocdp { width: 268px; padding: 0; overflow: hidden; }
.ocdp .pop-h { padding: 10px 12px 6px; }
.ocdp .oc-rap { display: flex; gap: 4px; padding: 0 12px 2px; }
.ocdp .oc-rap .dp-q { flex: 1; justify-content: center; padding: 0 6px; border: 1px solid var(--line); }
.ocdp .dp-d:disabled { opacity: .35; cursor: default; background: transparent; }
.ocdp .ibtn:disabled { opacity: .35; }
.oc-prev { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.oc-prev-h { padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); }
.oc-prev-h:first-child { border-top: 0; }
.oc-prev-d { padding: 8px 12px 0; margin-bottom: 8px; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oc-prev-r { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.oc-prev-r span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-prev-f { display: flex; justify-content: flex-end; gap: 8px; }
.rt { outline: none; min-height: 96px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; line-height: 1.6; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.rt:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.rt:focus { background: transparent; box-shadow: 0 0 0 1px var(--line-strong); }
.rt.vazio::before, .cmp.vazio::before { content: attr(data-ph); color: var(--faint); pointer-events: none; }
.rt { position: relative; }
.rt.vazio::before { position: absolute; left: 10px; right: 10px; top: 8px; }
.rt > :first-child { margin-top: 0; }
.rt p, .rt > div:not(.rt-banner) { margin: 0; min-height: 1.6em; }
.rt h1 { font-size: 24px; line-height: 1.25; margin: 18px 0 6px; }
.rt h2 { font-size: 20px; line-height: 1.3; margin: 16px 0 6px; }
.rt h3 { font-size: 17px; line-height: 1.35; margin: 14px 0 4px; }
.rt ul, .rt ol { margin: 4px 0; padding-left: 26px; }
.rt li { margin: 2px 0; padding-left: 2px; }
.rt li > ul, .rt li > ol { margin: 2px 0; }
.rt ul[data-ck] { list-style: none; padding-left: 2px; }
.rt ul[data-ck] > li { position: relative; padding-left: 28px; }
.rt ul[data-ck] > li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--faint); background: var(--bg); cursor: pointer; box-sizing: border-box; }
.rt ul[data-ck] > li[data-c="1"]::before { background: var(--text); border-color: var(--text); }
.rt ul[data-ck] > li[data-c="1"]::after { content: ""; position: absolute; left: 8px; top: calc(.3em + 3px); width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.rt ul[data-ck] > li[data-c="1"] { color: var(--muted); text-decoration: line-through; }
.rt blockquote { margin: 6px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.rt pre { margin: 6px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; white-space: pre-wrap; }
.rt code, .cmt-txt code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.rt hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.rt a, .cmt-txt a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.rt .al-c { text-align: center; } .rt .al-r { text-align: right; }
.rt-banner { margin: 8px 0; padding: 10px 14px 10px 38px; border-radius: 8px; position: relative; background: color-mix(in srgb, var(--bc) 9%, var(--bg)); border: 1px solid color-mix(in srgb, var(--bc) 30%, var(--bg)); }
.rt-banner::before { content: ""; position: absolute; left: 14px; top: calc(10px + .3em); width: 12px; height: 12px; border-radius: 50%; background: var(--bc); }
.rt-banner[data-tipo="info"] { --bc: var(--s-info); } .rt-banner[data-tipo="aviso"] { --bc: var(--s-warn); } .rt-banner[data-tipo="ok"] { --bc: var(--s-ok); } .rt-banner[data-tipo="perigo"] { --bc: var(--s-crit); }
.rt-prev { min-height: 0; max-height: 220px; overflow: auto; margin: 0; font-size: 13.5px; }
.rt-men, .men { display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 5px; color: var(--link); background: color-mix(in srgb, var(--link) 11%, transparent); font-weight: 500; white-space: nowrap; line-height: 1.5; vertical-align: baseline; font-size: inherit; }
.rt-men.eu, .men.eu { color: var(--text); background: color-mix(in srgb, var(--s-warn) 24%, transparent); }
.rt-men.tarefa, .men.tarefa { color: var(--text); background: var(--surface-2); cursor: pointer; white-space: normal; text-align: left; }
.men.tarefa:hover { background: var(--tree-on); }
.men.tarefa svg { width: 13px; height: 13px; }
/* barra flutuante de formatação */
.rt-bar { position: fixed; z-index: 80; display: flex; align-items: center; gap: 0; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); animation: chPop .12s ease-out; }
.rtb-g { display: flex; align-items: center; gap: 1px; padding: 0 4px; border-left: 1px solid var(--line); }
.rtb-g:first-child { border-left: 0; padding-left: 0; }
.rt-bar > .rtb-g button { min-width: 30px; height: 30px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: var(--text); font-size: 13px; white-space: nowrap; }
.rt-bar > .rtb-g button:hover { background: var(--surface-2); }
.rt-bar > .rtb-g button.on { background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rt-bar svg { width: 15px; height: 15px; }
.rt-bar svg.mini-car, .pop svg.mini-car { width: 11px; height: 11px; color: var(--faint); }
.rtb-a { font-weight: 700; border-bottom: 3px solid var(--rtb-cor, var(--text)); line-height: 1.05; padding: 0 2px; }
.rtb-h { display: inline-grid; place-items: center; width: 16px; font-size: 11px; color: var(--muted); }
.rtb-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); animation: chPop .12s ease-out; }
.rtb-cores { display: grid; grid-template-columns: repeat(9, 24px); gap: 5px; padding: 4px 6px 8px; }
.rtb-cor { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.rtb-cor:hover { box-shadow: 0 0 0 2px var(--line-strong); }
.rtb-cor svg { width: 12px; height: 12px; color: var(--muted); }
.rtb-link { display: flex; gap: 6px; padding: 4px 6px 6px; }
.rtb-link input { width: 220px; }
.pop.sug { z-index: 85; }
.pop .pop-i.sel { background: var(--surface-2); }
.sug-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sug-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-t .faint { font-size: 12px; }
/* painel de comentários */
.side-tabs { align-items: center; }
.seg-n { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; font-family: var(--f-num); }
.seg-n svg, .cmp-quem svg { width: 14px; height: 14px; }
.feed { gap: 8px; padding: 12px; }
.cmt-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cmt-card.realce { animation: chRealce 1.8s ease-out; }
@keyframes chRealce { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.cmt-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmt-h .av { margin: 0; border: 0; width: 26px; height: 26px; }
.cmt-h .who { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt-h .when { color: var(--faint); font-size: 12px; white-space: nowrap; }
.cmt-mais { margin-left: auto; opacity: 0; }
.cmt-card:hover .cmt-mais, .cmt-mais:focus-visible { opacity: 1; }
.cmt-txt { line-height: 1.55; overflow-wrap: anywhere; font-size: 14px; }
.cmt-f { display: flex; align-items: center; gap: 6px; }
.cmt-f .sep { flex: 1; }
.reac { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.reac:hover { border-color: var(--line-strong); color: var(--text); }
.reac.on { border-color: color-mix(in srgb, var(--focus) 45%, var(--line)); background: color-mix(in srgb, var(--focus) 10%, var(--bg)); color: var(--text); }
.reac svg { width: 14px; height: 14px; }
.cmt-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); padding: 4px 8px; border-radius: 6px; font-weight: 500; }
.cmt-link:hover { background: var(--surface-2); color: var(--text); }
.cmt-link svg { width: 14px; height: 14px; }
.atrib { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--s-warn) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--s-warn) 30%, var(--bg)); }
.atrib.ok { background: color-mix(in srgb, var(--s-ok) 9%, var(--bg)); border-color: color-mix(in srgb, var(--s-ok) 28%, var(--bg)); }
.atrib > svg { width: 14px; height: 14px; color: var(--s-warn); }
.atrib.ok > svg { color: var(--s-ok); }
.atrib .tb { margin-left: auto; min-height: 26px; padding: 2px 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.thread-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-weight: 600; min-height: 44px; }
.thread-sep { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 6px 2px 0; }
.cmt-vazio { text-align: center; font-size: 13px; }
.compose { gap: 6px; }
.cmp { min-height: 42px; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--bg); outline: none; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
.cmp:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.cmp-bar { display: flex; align-items: center; gap: 2px; }
.cmp-bar .ibtn.on { background: var(--sel-bg); color: var(--text); }
.cmp-quem { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: 6px; }
.cmp-bar .btn { margin-left: auto; }
.cmp-chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 4px 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--s-warn) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--s-warn) 30%, var(--bg)); }
.cmp-chip svg { width: 14px; height: 14px; }
.cmp-chip .ibtn { margin-left: auto; }
.pop-i.perigo { color: var(--s-crit); }
/* caixa de entrada */
.cx-item { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 0; border-top: 1px solid var(--line); }
.cx-item:first-child { border-top: 0; }
.cx-main { display: grid; grid-template-columns: 32px minmax(0, 1fr) 10px; gap: 12px; align-items: start; padding: 12px 0 12px 16px; flex: 1; min-width: 0; text-align: left; }
.cx-item:hover { background: var(--surface); }
.cx-main .av { margin: 0; border: 0; width: 32px; height: 32px; }
.cx-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-trecho { color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--focus); margin-top: 6px; }
.cx-item.lido .cx-txt > span:first-child { color: var(--muted); }
@media (max-width: 860px) { .rt-dica { display: none; } .cmt-mais { opacity: 1; } }

/* ===================== ClickUp 4.0: tokens, moldura, barra superior, trilho, barra lateral e cabeçalho (marca HUB preservada) ===================== */
:root { --bg: #FFFFFF; --app-bg: #FFFFFF; --surface: #F9F9F9; --surface-2: #F0F0F0; --line: #E8E8E8; --line-soft: #F0F0F0; --text: #202020; --muted: #646464; --faint: #838383; --tree-bg: #F9F9F9; --tree-hover: rgba(0, 0, 0, .04); --tree-on: rgba(0, 0, 0, .06); --line-strong: #D6D6D6; --sel-bg: rgba(0, 0, 0, .06); --hover-row: #FAFAFA; --danger: #C62A2F; --hot: #E5484D; --k: #202020; --k-text: #FFFFFF; --k-hover: #000000;
  --sh-card: 0 0 1px rgba(0, 0, 0, .27), 0 1px 2px rgba(0, 0, 0, .055); --sh-pop: 0 0 1px rgba(0, 0, 0, .27), 0 8px 24px rgba(0, 0, 0, .11); --shadow-lg: 0 0 1px rgba(0, 0, 0, .27), 0 16px 48px rgba(0, 0, 0, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1F1F1F; --app-bg: #141414; --surface: #191919; --surface-2: #2A2A2A; --line: #303030; --line-soft: #292929; --text: #E8E8E8; --muted: #ABABAB; --faint: #8A8A8A; --tree-bg: #191919; --tree-hover: rgba(255, 255, 255, .05); --tree-on: rgba(255, 255, 255, .09); --line-strong: #404040; --sel-bg: rgba(255, 255, 255, .09); --hover-row: #242424; --danger: #FF6B6B; --hot: #F2555A; --k: #F2F2F2; --k-text: #111111; --k-hover: #FFFFFF;
  --sh-card: 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5); --sh-pop: 0 0 1px rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 0, 0, .55); --shadow-lg: 0 0 1px rgba(255, 255, 255, .25), 0 18px 50px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --bg: #1F1F1F; --app-bg: #141414; --surface: #191919; --surface-2: #2A2A2A; --line: #303030; --line-soft: #292929; --text: #E8E8E8; --muted: #ABABAB; --faint: #8A8A8A; --tree-bg: #191919; --tree-hover: rgba(255, 255, 255, .05); --tree-on: rgba(255, 255, 255, .09); --line-strong: #404040; --sel-bg: rgba(255, 255, 255, .09); --hover-row: #242424; --danger: #FF6B6B; --hot: #F2555A; --k: #F2F2F2; --k-text: #111111; --k-hover: #FFFFFF;
  --sh-card: 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .5); --sh-pop: 0 0 1px rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 0, 0, .55); --shadow-lg: 0 0 1px rgba(255, 255, 255, .25), 0 18px 50px rgba(0, 0, 0, .6); }
body { background: var(--app-bg); font-size: 14px; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
.app { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr); background: var(--app-bg); }
/* barra superior */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; min-width: 0; }
.ws-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 4px; border-radius: 6px; background: var(--surface-2); font-weight: 600; font-size: 14px; color: var(--text); flex: none; }
.ws-btn:hover { background: var(--line); }
.ws-btn > svg { width: 12px; height: 12px; color: var(--muted); }
.ws-logo { width: 20px; height: 20px; border-radius: 5px; background: #000; color: #fff; display: grid; place-items: center; flex: none; }
.ws-logo svg { width: 15px; height: auto; display: block; }
.tb-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.search-pill { width: min(360px, 100%); height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--faint); font-size: 14px; }
.search-pill:hover { border-color: var(--line-strong); color: var(--muted); }
.search-pill svg { width: 15px; height: 15px; }
.search-pill kbd { margin-left: auto; font: inherit; font-size: 12px; font-weight: 500; color: var(--faint); opacity: .8; }
.tb-right { display: flex; align-items: center; gap: 2px; flex: none; }
.tb-ic { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); position: relative; flex: none; }
.tb-ic:hover { background: var(--tree-hover); color: var(--text); }
.tb-ic svg { width: 17px; height: 17px; }
.tb-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); border: 1.5px solid var(--app-bg); }
.tb-av { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 2px; border-radius: 8px; color: var(--muted); margin-left: 6px; }
.tb-av:hover { background: var(--tree-hover); }
.tb-av .av { width: 26px; height: 26px; border: 0; font-size: 10px; }
.tb-av > svg { width: 12px; height: 12px; }
.topbar .menu-btn { display: none; }
/* trilho preto (barra global) */
.rail { grid-row: 2; width: 52px; margin: 0 6px 6px; padding: 8px 0 10px; border-radius: 8px; background: #000; gap: 8px; }
.rail-btn { width: 52px; padding: 0; gap: 0; border-radius: 0; color: #fff; background: none; font-size: 10px; }
.rail-btn:hover, .rail-btn.on { background: none; color: #fff; }
.rail-btn .ri { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; position: relative; }
.rail-btn:hover .ri { background: rgba(255, 255, 255, .14); }
.rail-btn.on .ri { background: rgba(255, 255, 255, .22); }
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn .rl { font-size: 10px; font-weight: 600; line-height: 16px; color: #fff; opacity: .78; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-btn.on .rl, .rail-btn:hover .rl { opacity: 1; }
.rail-btn .dot { position: absolute; top: -5px; right: -7px; left: auto; min-width: 16px; height: 16px; border-radius: 8px; background: var(--hot); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 4px; text-align: center; border: 0; }
.rail-btn .dot.neutro { background: #fff; color: #000; }
/* cartão principal: barra lateral + conteúdo */
.frame { grid-row: 2; grid-column: 2; display: grid; grid-template-columns: 256px minmax(0, 1fr); margin: 0 6px 6px 0; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .055); overflow: hidden; background: var(--surface); min-height: 0; min-width: 0; }
.tree { background: var(--surface); border-right: 1px solid var(--line); }
.main { background: var(--bg); }
/* barra lateral */
.side-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 14px; }
.side-head h2 { font-size: 16px; font-weight: 600; line-height: 20px; }
.side-sp { flex: 1; }
.split { display: inline-flex; align-items: stretch; flex: none; }
.split.sm .sh-btn { height: 24px; width: 26px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 6px 0 0 6px; }
.split.sm .sh-btn.car { width: 20px; border-left: 0; border-radius: 0 6px 6px 0; }
.split.sm .sh-btn:hover { background: var(--surface-2); }
.split.sm svg { width: 14px; height: 14px; } .split.sm .car svg { width: 11px; height: 11px; }
.tree-body { padding: 2px 8px 24px; }
.nav-list { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav-i { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 8px; border-radius: 7px; font-size: 14px; color: var(--text); width: 100%; }
.nav-i > svg { width: 16px; height: 16px; color: var(--muted); }
.nav-i:hover { background: var(--tree-hover); }
.nav-i.on { background: var(--tree-on); font-weight: 500; }
.nav-i .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; background: var(--surface-2); color: var(--muted); flex: none; }
.badge.hot { background: var(--hot); color: #fff; }
.side-sec { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px 8px; font-size: 12px; font-weight: 500; color: var(--faint); }
.ibtn.sm { padding: 3px; } .ibtn.sm svg { width: 14px; height: 14px; } .ibtn.on { background: var(--tree-on); color: var(--text); }
.tree-filter { min-height: 28px; border-radius: 7px; font-size: 13px; margin: 2px 0 6px; padding: 4px 8px; }
.node, .node.d1, .node.d2 { min-height: 28px; height: 28px; border-radius: 7px; padding: 0 4px 0 calc(6px + var(--ind, 0) * 14px); gap: 6px; font-size: 14px; color: var(--text); }
.node:hover { background: var(--tree-hover); }
.node.on { background: var(--tree-on); font-weight: 500; }
.node .ni { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: 5px; color: var(--muted); position: relative; }
.node .ni-ic { display: grid; place-items: center; }
.node .ni svg { width: 16px; height: 16px; }
.node .ni-car { display: none; color: var(--muted); place-items: center; }
.node .ni-car svg { width: 10px; height: 10px; transition: transform .15s; }
.node .ni-car.open svg { transform: rotate(90deg); }
.node:hover .ni.tog .ni-ic, .node:focus-visible .ni.tog .ni-ic { display: none; }
.node:hover .ni.tog .ni-car, .node:focus-visible .ni.tog .ni-car { display: grid; }
.node .ni.tog:hover { background: var(--tree-on); }
.node .cnt { font-size: 12px; color: var(--faint); padding-right: 4px; }
.node .cnt.late { color: var(--danger); }
.node .nadd { width: 22px; height: 22px; }
.sp { width: 20px; height: 20px; border-radius: 5px; font-size: 11px; }
/* cabeçalho do local */
.loc-head { padding: 0 16px; gap: 0; border-bottom: 1px solid var(--line); }
.loc-row { display: flex; align-items: center; gap: 8px; min-height: 40px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--muted); min-width: 0; flex-wrap: nowrap; overflow: hidden; flex: 1; }
.crumbs .cr { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; white-space: nowrap; color: var(--muted); flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.crumbs .cr:hover { background: var(--tree-hover); color: var(--text); text-decoration: none; }
.crumbs .cr svg, .cr-cur > svg { width: 16px; height: 16px; color: var(--muted); }
.crumbs .sp { width: 18px; height: 18px; font-size: 10px; }
.cr-sep { color: var(--faint); padding: 0 2px; flex: none; }
.cr-cur { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; margin: 0; padding: 2px 4px; }
.cr-cur .cr-t { overflow: hidden; text-overflow: ellipsis; }
.loc-sub { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 8px; min-width: 0; }
.fav-btn { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--faint); flex: none; }
.fav-btn:hover { background: var(--tree-hover); color: var(--text); }
.fav-btn.on { color: #E8A100; }
.fav-btn svg { width: 15px; height: 15px; }
.loc-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.chips { gap: 4px; }
.chip { height: 24px; padding: 0 8px; border-radius: 6px; background: transparent; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.chip b { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.views { display: flex; gap: 2px; margin: 0 0 -1px -4px; overflow-x: auto; }
.vtab, .vtab.on { height: 36px; padding: 0 2px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; background: none; }
.vtab:hover { background: none; color: var(--text); }
.vtab.on { border-color: var(--text); color: var(--text); }
.vtab .vt-in { height: 24px; padding: 0 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; }
.vtab:hover .vt-in { background: var(--tree-hover); }
.vtab svg { width: 15px; height: 15px; }
.tab-n { font-weight: 500; color: var(--faint); margin-left: 2px; }
/* barra da visão */
.vbar { min-height: 44px; padding: 8px 16px; gap: 4px; border-bottom: 0; flex-wrap: nowrap; }
.tbp { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--text); flex: none; }
.tbp:hover { background: var(--line); }
.tbp svg { width: 14px; height: 14px; }
.tbi { min-width: 28px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px; color: var(--muted); position: relative; flex: none; padding: 0 4px; }
.tbi:hover { background: var(--tree-hover); color: var(--text); }
.tbi.on { background: var(--tree-on); color: var(--text); }
.tbi svg { width: 16px; height: 16px; }
.tbi .av { width: 20px; height: 20px; border: 0; font-size: 8px; }
.tbi.av-t.on .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.tbn { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--k); color: var(--k-text); font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 3px; text-align: center; }
.vsep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
.btn-k { height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--k); color: var(--k-text); font-size: 12px; font-weight: 500; border-radius: 6px 0 0 6px; white-space: nowrap; }
.btn-k.car { padding: 0 5px; border-radius: 0 6px 6px 0; border-left: 1px solid color-mix(in srgb, var(--k-text) 25%, transparent); }
.btn-k:hover { background: var(--k-hover); }
.btn-k svg { width: 14px; height: 14px; } .btn-k.car svg { width: 11px; height: 11px; }
.vfind-w { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--faint); background: var(--bg); }
.vfind-w:focus-within { border-color: var(--text); }
.vfind-w svg { width: 14px; height: 14px; }
.vfind, .vfind:hover, .vfind:focus { border: 0; width: 180px; padding: 0; min-height: 0; background: transparent; outline: none; box-shadow: none; font-size: 13px; }
.tgl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.content { padding: 12px 16px 48px; }
.stack { max-width: none; }
.stack.narrow { max-width: 920px; }
/* respostas e comentários atribuídos */
.th-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--bg); box-shadow: var(--sh-card); text-align: left; }
button.th-card:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .08); }
.th-card.novo { box-shadow: 0 0 0 1px var(--text); }
.th-card.ok { opacity: .75; }
.th-top { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; text-align: left; }
.th-top svg { width: 15px; height: 15px; flex: none; }
.th-top b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-ctx { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.th-top .badge { margin-left: auto; }
button.th-top:hover b { text-decoration: underline; }
.th-root { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); line-height: 1.45; }
.th-root .av { width: 24px; height: 24px; border: 0; margin-top: 1px; }
.th-ult { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.th-ult > svg { width: 14px; height: 14px; }
.th-ult .sep { flex: 1; }
.tb.dark { background: var(--k); color: var(--k-text); }
.tb.dark:hover { background: var(--k-hover); color: var(--k-text); }
.pop-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pop-who .av { width: 32px; height: 32px; border: 0; }
.pop-who b { font-size: 14px; }
.pop-note { font-size: 12px; color: var(--faint); padding: 0 10px 6px; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(44px + env(safe-area-inset-top, 0px)) minmax(0, 1fr); }
  .topbar { padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); }
  .topbar .menu-btn { display: grid; }
  .ws-btn .ws-n, .search-pill .sp-t, .search-pill kbd { display: none; }
  .search-pill { width: 34px; padding: 0; justify-content: center; }
  .tb-mid { justify-content: flex-end; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; margin: 0; border-radius: 0; z-index: 36; padding-top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-120%); }
  .frame { grid-column: 1; margin: 0; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
  .tree { position: fixed; left: 52px; top: 0; bottom: 0; width: min(290px, calc(100vw - 64px)); z-index: 36; transform: translateX(-130%); padding-top: env(safe-area-inset-top, 0px); }
  .app.nav .rail, .app.nav .tree { transform: none; }
  .loc-head { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
  .vbar { padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); overflow-x: auto; }
  .content { padding: 12px max(12px, env(safe-area-inset-right, 0px)) 40px max(12px, env(safe-area-inset-left, 0px)); }
  .loc-sub, .hide-m { display: none; }
}
/* ===================== ClickUp: lista, ações na linha, seleção em massa e menus ===================== */
.stack { gap: 16px; }
.grp-head { padding: 8px 0 2px; gap: 6px; min-height: 36px; }
.gcar { width: 18px; height: 18px; display: grid; place-items: center; color: var(--faint); border-radius: 4px; flex: none; }
.gcar svg { width: 10px; height: 10px; transition: transform .15s; }
.gcar.open svg { transform: rotate(90deg); }
.gcar:hover { background: var(--tree-hover); color: var(--text); }
.pill, .grp-head .pill, .col-head .pill { height: 20px; min-height: 20px; padding: 0 6px 0 4px; border-radius: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; gap: 4px; }
.pill svg { width: 12px; height: 12px; flex: none; }
.pill.claro { background: color-mix(in srgb, var(--sc) 18%, var(--bg)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 55%, var(--bg)); }
.grp-head .n { font-size: 12px; font-weight: 500; color: var(--faint); font-family: inherit; }
.g-acts { display: inline-flex; gap: 2px; opacity: 0; margin-left: 2px; }
.grp-head:hover .g-acts, .g-acts:focus-within { opacity: 1; }
.tbl { border: 0; }
.row { min-height: 35px; padding: 0 12px 0 calc(28px + var(--niv, 0) * 22px); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-soft); gap: 12px; position: relative; }
.row[data-a]:hover, .row[data-a]:focus-visible { background: var(--hover-row); }
.row.selrow, .row.selrow:hover { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
.row.sub { background: transparent; }
.row.hd, .lics .row.hd { min-height: 32px; padding-left: 28px; box-shadow: inset 0 -1px 0 var(--line); font-size: 12px; font-weight: 500; color: var(--faint); }
.hcol { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--faint); padding: 2px 4px; margin-left: -4px; border-radius: 4px; white-space: nowrap; }
.hcol:hover { background: var(--tree-hover); color: var(--text); }
.hcol.on { color: var(--text); }
.hcol svg { width: 12px; height: 12px; }
.hd-n { padding-left: 20px; }
.rsel { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: grid; place-items: center; opacity: 0; cursor: pointer; }
.row:hover .rsel, .row:focus-within .rsel, .row.selrow .rsel, .tem-sel .rsel { opacity: 1; }
.rsel input { width: 14px; height: 14px; margin: 0; accent-color: var(--k); cursor: pointer; }
.row[draggable="true"]:hover .r-grip, .node[draggable="true"]:hover .nd-grip { display: grid; }
.r-grip, .nd-grip { display: none; position: absolute; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.r-grip { left: -3px; }
.nd-grip { left: 0; }
.r-grip svg, .nd-grip svg { width: 12px; height: 12px; }
.node[draggable="true"] { position: relative; }
.node.dragging, .row.dragging { opacity: .4; }
.node.drop-antes, .row.drop-antes { box-shadow: inset 0 2px 0 var(--focus); }
.node.drop-depois, .row.drop-depois { box-shadow: inset 0 -2px 0 var(--focus); }
.node.drop-dentro { background: var(--tree-on); box-shadow: inset 0 0 0 1px var(--focus); }
.tn { gap: 6px; }
.sub-car { width: 14px; height: 14px; flex: none; display: grid; place-items: center; color: var(--faint); border-radius: 3px; }
.sub-car svg { width: 9px; height: 9px; transition: transform .15s; }
.sub-car.open svg { transform: rotate(90deg); }
button.sub-car:hover { background: var(--surface-2); color: var(--text); }
.st-ic { width: 20px; height: 20px; border-radius: 5px; }
.tn .t { font-size: 14px; font-weight: 500; color: var(--text); }
.tn .t.done { color: var(--faint); }
.ren-in { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; border: 1px solid var(--text); border-radius: 6px; padding: 3px 6px; background: var(--bg); outline: none; }
.r-acts { display: none; margin-left: auto; gap: 4px; flex: none; padding-left: 8px; }
.row:hover .r-acts, .row:focus-within .r-acts { display: inline-flex; }
.r-act { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.r-act:hover { color: var(--text); border-color: var(--line-strong); }
.r-act svg { width: 14px; height: 14px; }
.tag { height: 18px; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 10px; font-size: 12px; background: color-mix(in srgb, var(--text) 8%, var(--bg)); color: var(--text); }
.type { height: 18px; display: inline-flex; align-items: center; border-radius: 5px; font-size: 11.5px; }
.mini { font-size: 12px; color: var(--faint); gap: 3px; }
.mini svg { width: 14px; height: 14px; }
.cellbtn { font-size: 13px; color: var(--text); }
.cell .cellbtn { width: calc(100% + 6px); min-height: 30px; }
.due { font-size: 13px; } .due.late { color: var(--danger); font-weight: 400; } .due.soon { color: #B77B00; }
.cell .prio { font-size: 13px; color: var(--text); }
.cf { font-size: 13px; color: var(--muted); }
.avs .av { width: 24px; height: 24px; font-size: 9.5px; }
.add-row, button.add-row { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 0 12px 0 calc(48px + var(--niv, 0) * 22px); color: var(--muted); font-size: 14px; width: 100%; box-shadow: inset 0 -1px 0 var(--line-soft); min-width: 780px; border: 0; }
button.add-row:hover { background: var(--hover-row); color: var(--text); }
.add-row svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.add-row.on { background: var(--bg); box-shadow: inset 0 0 0 1px var(--text); border-radius: 6px; }
.add-row.on input { flex: 1; border: 0; background: transparent; outline: none; font-size: 14px; font-weight: 500; min-width: 0; color: var(--text); }
.add-hint { font-size: 12px; color: var(--faint); white-space: nowrap; }
.more { font-size: 13px; text-align: left; padding: 8px 12px 8px 48px; }
/* seleção em massa */
.bulk { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 12px; background: #202020; color: #fff; box-shadow: 0 12px 36px rgba(0, 0, 0, .3); max-width: calc(100vw - 24px); overflow-x: auto; animation: chPopC .16s ease-out; }
@keyframes chPopC { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bulk-n { padding: 0 6px 0 8px; font-size: 13px; white-space: nowrap; }
.bulk-x, .bulk-b { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: #fff; white-space: nowrap; }
.bulk-x { padding: 0 6px; color: #BDBDBD; }
.bulk-x:hover, .bulk-b:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bulk-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); margin: 0 4px; flex: none; }
.bulk svg { width: 15px; height: 15px; }
/* menus suspensos */
.pop { min-width: 247px; max-width: 320px; padding: 8px 0; border: 0; border-radius: 12px; box-shadow: var(--sh-pop); gap: 0; max-height: min(460px, 76vh); }
.pop-h { font-size: 12px; font-weight: 500; color: var(--faint); padding: 8px 16px 4px; text-transform: none; letter-spacing: 0; }
.pop-i, a.pop-i { gap: 10px; padding: 0 10px; margin: 0 6px; width: calc(100% - 12px); min-height: 32px; border-radius: 6px; font-size: 14px; text-decoration: none; color: var(--text); flex: none; }
.pop-i:hover, .pop-i:focus-visible { background: var(--tree-hover); outline: none; }
.pop-i > span:not(.ck):not(.prio) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-i.st > span:not(.ck) { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.pop-i.st.cur > span:not(.ck) { font-weight: 700; }
.pop-i.st.cur { background: var(--tree-on); }
.pop-i .ck.rm { color: var(--faint); }
.pop-i.perigo { color: var(--danger); }
.pop-i .kb { font: inherit; font-size: 12px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.pop-sep { margin: 6px 0; }
.pop-q { display: flex; align-items: center; gap: 8px; margin: 2px 8px 6px; padding: 0 10px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--faint); flex: none; }
.pop-q:focus-within { border-color: var(--text); }
.pop-q input { flex: 1; border: 0; outline: none; background: transparent; font-size: 14px; min-width: 0; color: var(--text); }
.pop-q input:focus { box-shadow: none; }
.pop-q svg { width: 14px; height: 14px; flex: none; }
.pop-seg { display: flex; margin: 0 8px 8px; padding: 2px; border-radius: 8px; background: var(--surface-2); flex: none; }
.pop-seg button { flex: 1; height: 26px; border-radius: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.pop-seg button.on { background: var(--bg); color: var(--text); box-shadow: var(--sh-card); font-weight: 500; }
.pop-list { display: flex; flex-direction: column; }
.pop-vazio { padding: 10px 16px; font-size: 13px; color: var(--faint); }
.pop.dpw { max-width: calc(100vw - 16px); width: 510px; padding: 0; overflow: hidden; max-height: none; }
.dp-top { display: flex; gap: 8px; padding: 10px 10px 2px; }
.dp-f { flex: 1; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; height: 34px; min-width: 0; }
.dp-f.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.dp-fb { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 100%; font-size: 13px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; }
.dp-fb svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.dp-x { width: 24px; height: 24px; display: grid; place-items: center; color: var(--faint); border-radius: 6px; margin-right: 4px; flex: none; }
.dp-x:hover { background: var(--tree-hover); color: var(--text); }
.dp-x svg { width: 13px; height: 13px; }
.dp-fb .dp-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); padding: 0; }
.dp-fb .dp-in::placeholder { color: var(--muted); opacity: 1; }
.dp-fb .dp-in:focus, .dp-fb .dp-in:focus-visible { outline: 0; box-shadow: none; }
.dp-ajuda { margin: 6px 12px 0; font-size: 12px; color: var(--faint); }
.dp-ajuda.ok { color: var(--text); }
.dp-ajuda.erro { color: var(--danger); }
.dp-body { display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.dp-rap { border-right: 1px solid var(--line); padding: 8px 6px; display: flex; flex-direction: column; gap: 1px; }
.dp-q { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px; min-height: 30px; align-items: center; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.dp-q:hover, .dp-q:focus-visible { background: var(--tree-hover); outline: none; }
.dp-q .faint { font-size: 12px; }
.dp-cal { padding: 10px 12px 12px; }
.dp-mes { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.dp-mes b { font-size: 14px; font-weight: 600; text-transform: none; }
.dp-mes .sep { flex: 1; }
.dp-mes .tb { min-height: 26px; padding: 2px 8px; font-size: 12px; margin-right: 4px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; }
.dp-w { font-size: 11px; color: var(--faint); padding: 4px 0; text-transform: none; }
.dp-rap .dp-rec { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; border-radius: 0 0 6px 6px; }
.dp-rap .dp-rec .i { margin-left: auto; width: 14px; height: 14px; color: var(--faint); }
.dp-d { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; margin: 0 auto; text-align: center; }
.dp-d:hover { background: var(--tree-hover); }
.dp-d.out { color: var(--faint); }
.dp-d.hoje { color: var(--hot); font-weight: 700; }
.dp-d.meio { background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 8px; }
.dp-d.sel, .dp-d.sel:hover { background: var(--k); color: var(--k-text); font-weight: 600; }
.dp-foot { border-top: 1px solid var(--line); padding: 8px 10px; display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .dp-body { grid-template-columns: minmax(0, 1fr); }
  .dp-rap { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; }
  .dp-q { flex: none; }
}
/* ===================== ClickUp: janela da tarefa e painel de atividade ===================== */
.scrim { background: rgba(0, 0, 0, .5); }
.task { inset: 24px max(16px, 7vw); max-width: none; margin: 0; border-radius: 12px; box-shadow: var(--shadow-lg); grid-template-rows: 48px minmax(0, 1fr); }
.task-top { height: 48px; padding: 0 10px 0 12px; gap: 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.task-top .crumbs { flex: 1; margin-left: 6px; }
.t-crumbs .cr { color: var(--text); font-weight: 500; }
.t-crumbs .cr svg { color: var(--muted); }
.t-criada { font-size: 12px; color: var(--faint); white-space: nowrap; margin-right: 6px; }
.task-top .ibtn svg { width: 17px; height: 17px; }
.task-grid { grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 560px); }
.task-main { padding: 20px max(24px, 4%) 56px; gap: 14px; }
.t-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t-tipo { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--muted); }
.t-tipo:hover { background: var(--tree-hover); color: var(--text); }
.t-tipo svg { width: 14px; height: 14px; } .t-tipo svg:last-child { width: 11px; height: 11px; }
.ttl-in { font-size: 28px; font-weight: 600; line-height: 1.25; padding: 2px 6px; letter-spacing: -.01em; }
.fgrid { gap: 0 32px; }
.fld { min-height: 34px; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; }
.fld > .lab { font-size: 14px; color: var(--faint); gap: 8px; white-space: nowrap; }
.fld > .lab svg { width: 16px; height: 16px; }
.fld .val { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px; margin-left: -6px; border-radius: 6px; font-size: 14px; color: var(--text); max-width: 100%; overflow: hidden; white-space: nowrap; }
.fbtn:hover { background: var(--tree-hover); }
.fbtn > svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.fbtn .tag { flex: none; }
.fbtn.late span { color: var(--danger); } .fbtn.soon span { color: #B77B00; }
.fbtn .avs .av { width: 24px; height: 24px; }
.fdates { display: inline-flex; align-items: center; gap: 0; }
/* alerta por e-mail: sino ao lado das datas; preenchido quando há alerta */
.al-btn { margin-left: 4px; color: var(--faint); }
.al-btn:hover { color: var(--text); }
.al-btn.on { color: var(--text); }
.al-btn.on svg path:first-child, .al-ind svg path:first-child { fill: currentColor; }
.al-ind { display: inline-flex; align-items: center; margin-left: 4px; color: var(--muted); }
.al-ind svg { width: 13px; height: 13px; }
.pop.alp { width: 300px; max-width: calc(100vw - 16px); max-height: min(600px, 84vh); }
.alp .pop-i > span.al-d { flex: none !important; margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.alp .pop-i .ck + .al-d, .alp .pop-i .al-d + .ck { margin-left: 8px; }
.alp .pop-i:disabled { opacity: .45; cursor: default; background: transparent; }
.alp .al-campo { cursor: default; }
.alp .al-campo input { margin-left: auto; width: auto; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); }
.alp .al-campo input:focus { outline: none; border-color: var(--text); }
.alp .al-campo input + .ck { margin-left: 8px; }
.alp .al-p { cursor: default; }
.alp .al-p .ibtn { margin-left: auto; }
.alp .al-dica { margin: 0 8px 6px; font-size: 12px; color: var(--faint); }
.al-prev { display: flex; gap: 10px; margin: 6px 4px 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.al-prev > svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--muted); }
.al-prev b { display: block; font-weight: 600; color: var(--text); }
.al-prev span { display: block; color: var(--muted); overflow-wrap: anywhere; }
.al-prev.passou b { color: var(--danger, #C4312C); }
.ct-card .panel-h { flex-wrap: wrap; gap: 8px; }
.ct-card .panel-h h2 { display: inline-flex; align-items: center; gap: 8px; }
.ct-card .panel-h h2 svg { width: 16px; height: 16px; }
.ct-card .chip.ok, .ct-lista .chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.ct-card .chip.warn, .ct-lista .chip.warn { color: #9A6200; border-color: color-mix(in srgb, #D9822B 45%, var(--line)); background: color-mix(in srgb, #D9822B 8%, var(--bg)); }
.ct-card .chip.crit, .ct-lista .chip.crit { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.ct-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.ct-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.ct-l .faint, .ct-horas .faint, .ct-ctr > .faint, .ct-pers > .faint { font-size: 12px; }
.ct-horas { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.ct-hn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.ct-hn .crit { color: var(--danger); font-size: 12.5px; }
.ct-horas .progress { height: 6px; }
.ct-ctr { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.ct-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct-pills .num { margin-right: 6px; font-size: 12.5px; }
.ct-esc { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--muted); }
.ct-pers { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.ct-per { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ct-nota { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.ct-esc-l { grid-column: 1 / -1; }
.ct-esc-l .ct-esc { color: var(--text); white-space: pre-line; }
.ct-esc-vazio { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 13px; }
.ct-esc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ct-sem-esc { margin-left: 8px; color: var(--muted); }
.ct-sug { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ct-sug .em-breve { align-self: flex-start; }
.ct-aviso { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.ct-aviso > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.ct-aviso.warn { border-color: color-mix(in srgb, #D9822B 45%, var(--line)); background: color-mix(in srgb, #D9822B 7%, var(--bg)); }
.ct-aviso.warn > svg { color: #D9822B; }
.ct-aviso.crit { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 6%, var(--bg)); }
.ct-aviso.crit > svg { color: var(--danger); }
.ct-aviso b { font-size: 14px; }
.ct-aviso p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.ct-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ct-lista .lrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.ct-chips { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.mg-res { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mg-feito { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--ok) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); font-size: 13.5px; }
.mg-feito .tb { margin-left: auto; }
.fav-lugares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 10px 6px; }
.fav-lugar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.fav-lugar .fl-prev { width: 66px; height: 42px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); position: relative; overflow: hidden; }
.fav-lugar:hover .fl-prev { border-color: var(--line-strong); }
.fav-lugar.on { color: var(--text); }
.fav-lugar.on .fl-prev { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.fl-prev i { position: absolute; background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 2px; }
.fl-prev.lateral i { left: 4px; top: 4px; bottom: 4px; width: 14px; }
.fl-prev.superior i { left: 4px; right: 4px; top: 4px; height: 6px; }
.fl-prev.inferior i { left: 4px; right: 4px; bottom: 4px; height: 6px; }
.fav-barra { display: flex; align-items: center; gap: 2px; padding: 3px 10px; min-height: 32px; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; flex: none; color: var(--faint); }
.fav-barra.inferior { border-bottom: 0; border-top: 1px solid var(--line); margin-top: auto; }
.fav-barra > .i { margin-right: 4px; }
.fb-i { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; flex: none; }
.fb-i span { overflow: hidden; text-overflow: ellipsis; }
.fb-i:hover { background: var(--tree-hover); }
.fb-i .i { width: 14px; height: 14px; }
.fb-v { font-size: 12.5px; }
.lb-in { padding: 8px 8px 6px; }
.lb-in input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--focus); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); outline: none; }
.pop-i .lb-q { margin-left: auto; font-size: 12px; white-space: nowrap; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 2px 10px 2px 16px; min-height: 30px; font-size: 13px; }
.lb-row .ibtn { margin-left: auto; }
.rel-ic { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; }
.rel-ic.bloq { border-radius: 50%; background: #E5484D; }
.rel-ic.bloq::after { content: ''; width: 8px; height: 2px; border-radius: 1px; background: #fff; }
.rel-ic.esp { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid #F5B400; }
.dep-row .k.v { color: var(--link); }
.dep-adds { display: flex; flex-wrap: wrap; }
.dep-adds .add-row { width: auto; }
.cfg-row.clic { cursor: pointer; }
.cfg-c.cfg-pap { width: 150px; text-align: right; }
.pap-b { min-height: 26px; padding: 2px 6px 2px 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; }
.pap-car { display: inline-flex; color: var(--faint); }
.pap-car svg { width: 12px; height: 12px; transform: rotate(90deg); }
.pap-i .tm-t { display: flex; flex-direction: column; gap: 1px; }
.t-acoes { display: flex; flex-direction: column; gap: 2px; }
.t-acao { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 8px; margin-left: -8px; border-radius: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.t-acao:hover { background: var(--tree-hover); }
.t-acao .i { color: var(--muted); }
.cf-vz { margin-top: 6px; }
.content.mapa-c { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.mapa-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.mapa-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.mapa-busca { margin: 12px 12px 6px; }
.mapa-lista { flex: 1; overflow: auto; padding: 0 8px 16px; }
.mapa-sec { display: flex; justify-content: space-between; padding: 10px 6px 4px; font-size: 12px; font-weight: 500; }
.mapa-vz { margin: 2px 6px 6px; font-size: 12.5px; }
.mapa-cli, .mapa-un { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.mapa-cli:hover, .mapa-cli.on { background: var(--tree-hover); }
.mapa-un { cursor: default; }
.mc-n { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; }
.mc-n b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-n .faint { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-globo { position: relative; min-height: 0; overflow: hidden; background: var(--surface); }
#globo { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
#globo:active { cursor: grabbing; }
#globo.pos { cursor: crosshair; }
.g-oceano { fill: color-mix(in srgb, var(--surface) 78%, #4f86c6 22%); stroke: var(--line-strong); stroke-width: 1; }
.g-grade { fill: none; stroke: color-mix(in srgb, var(--line) 70%, transparent); stroke-width: .5; }
.g-pais { fill: var(--bg); stroke: var(--line-strong); stroke-width: .5; }
.g-pais.br { fill: color-mix(in srgb, var(--bg) 86%, #6CBE45 14%); }
.g-uf { fill: none; stroke: color-mix(in srgb, var(--line-strong) 80%, var(--text) 20%); stroke-width: .6; }
.g-sigla { font-size: 11px; font-weight: 600; fill: var(--faint); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.g-pino { fill: var(--text); fill-opacity: .82; stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
.g-pino.atr { fill: var(--danger); }
.g-pino.vz { fill: var(--faint); }
.g-pino.sel { stroke: var(--text); stroke-width: 3; fill-opacity: 1; }
.mapa-ctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.mapa-leg { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12px; color: var(--muted); }
.mapa-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lg-p { width: 10px; height: 10px; border-radius: 50%; background: var(--text); opacity: .82; }
.lg-p.atr { background: var(--danger); opacity: 1; }
.lg-p.vz { background: var(--faint); }
.mapa-aviso { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 13px; }
.mapa-aviso .lk { color: inherit; text-decoration: underline; }
/* recolher a lista (pedido no quadro de telas, 04/11): o mapa ocupa a largura toda, e "Lista", no canto do mapa, abre de novo */
.mapa-topo { display: flex; align-items: center; gap: 4px; margin: 12px 8px 6px 12px; }
.mapa-topo .mapa-busca { margin: 0; flex: 1; min-width: 0; }
.mapa-wrap.sem-lista { grid-template-columns: minmax(0, 1fr); }
.mapa-abrir { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); font: inherit; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.mapa-abrir svg { width: 15px; height: 15px; color: var(--muted); }
.mapa-abrir .num { color: var(--faint); font-weight: 400; }
.mapa-card { position: absolute; z-index: 3; width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); font-size: 13px; }
.mapa-card .mc-top { display: flex; align-items: center; gap: 8px; }
.mapa-card .mc-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-card .mc-l { display: flex; align-items: center; gap: 6px; }
.mapa-card .mc-l .i, .mapa-card .mc-l svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.mapa-card .mc-n { flex-direction: row; gap: 12px; }
.mapa-card .mc-n .crit b { color: var(--danger); }
.mapa-card .mc-ct { display: flex; gap: 4px; flex-wrap: wrap; }
.mapa-card .mc-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esp-modo { display: flex; gap: 4px; padding: 2px 8px 6px; }
.esp-mapa-nota { margin: 4px 10px; font-size: 12px; }
@media (max-width: 860px) { .mapa-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(360px, 1fr); } .mapa-wrap.sem-lista { grid-template-rows: minmax(0, 1fr); } .mapa-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; } .mapa-card { width: 240px; } }
/* pedidos de 4/11, aprovados: grupos por cidade, contato no resumo, onde fica a unidade e contatos do cliente */
.g-grupo { cursor: pointer; }
.g-grupo .g-bola { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.g-grupo .g-anel { fill: none; stroke: var(--danger); stroke-width: 2.5; }
.g-grupo text { fill: var(--paper); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.lg-p.gr { width: 16px; height: 16px; background: var(--ink); opacity: 1; color: var(--paper); font-size: 9px; font-weight: 700; font-style: normal; display: inline-grid; place-items: center; }
.mapa-cli .sug { color: var(--muted); }
.mapa-card .mc-cto { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.mapa-card .mc-cto .av { flex: none; width: 24px; height: 24px; border: 0; font-size: 9.5px; }
.mapa-card .mc-cto .mc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mapa-card .mc-cto small { color: var(--faint); font-size: 12px; }
.mapa-card .mc-uns { display: flex; flex-direction: column; margin: 0 -6px; max-height: 280px; overflow: auto; }
.mapa-card .mc-un { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.mapa-card .mc-un:hover { background: var(--tree-hover); }
.mapa-card .mc-un .mc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mapa-card .mc-un b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-card .mc-un small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-card .mc-bola { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text); }
.mapa-card .mc-bola.atr { background: var(--danger); } .mapa-card .mc-bola.vz { background: var(--faint); }
.mapa-card .mc-nota { font-size: 12px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 8px; }
.un-onde { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.un-onde > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-onde svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.form .un-dica { grid-column: 2; margin-top: -6px; font-size: 12px; color: var(--faint); }
.form .un-dica.ok { color: var(--ok); }
.cto-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cto-bar .cto-sp { flex: 1; }
.cto-bar .cto-n { font-size: 12.5px; }
.cto-tbl { width: 100%; overflow-x: auto; }
.cto-row { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(90px, 1fr) minmax(120px, 1.3fr) 178px minmax(120px, 1.25fr) 128px 70px 30px; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; min-height: 52px; min-width: 1040px; }
.cto-row:first-child { border-top: 0; }
.cto-row.hd { min-height: 0; color: var(--faint); font-size: 11.5px; font-family: var(--f-num); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding-block: 8px; }
.cto-row:not(.hd):hover { background: var(--tree-hover); }
.cto-nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cto-nm .av { width: 30px; height: 30px; font-size: 11px; border: 0; }
.cto-nm > span:last-child { min-width: 0; }
.cto-nm b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cto-nm small { display: block; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cto-pri { color: #E8A100; display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.cto-pri svg { width: 13px; height: 13px; }
.cto-uns { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cto-un { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cto-un svg { width: 11px; height: 11px; color: var(--muted); flex: none; }
.cto-un.todo { color: var(--muted); background: transparent; border-style: dashed; }
.cto-tel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; font-family: var(--f-num); font-size: 12.5px; }
.cto-tel .t2 { color: var(--faint); }
.cto-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.cto-mail.vz { color: var(--faint); }
.cto-doc { font-family: var(--f-num); font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.cto-or { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.cto-or.crm { background: #E8EEFB; color: #2450B8; }
.cto-or.ch { background: var(--surface-2); color: var(--muted); }
.wa { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 7px; border-radius: 6px; border: 1px solid #BFE5CC; background: #EFFAF3; color: #137A3A; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-decoration: none; font-family: var(--f-num); }
.wa:hover { background: #E2F5E9; }
.wa svg { width: 14px; height: 14px; flex: none; }
.wa.sm { height: 22px; padding: 0 6px; font-size: 12px; }
.wa.ic { width: 26px; padding: 0; justify-content: center; }
.wa.fone { border-color: var(--line); background: var(--bg); color: var(--text); }
.wa.fone:hover { background: var(--tree-hover); }
.cto-nota { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 8px; background: var(--surface); font-size: 12.5px; color: var(--muted); }
.cto-nota svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.modal.cto-m { width: min(640px, calc(100% - 32px)); top: 6vh; max-height: 88vh; }
.form.cto-f { grid-template-columns: 128px minmax(0, 1fr); }
.form .cto-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.form .cto-wa { display: flex; align-items: center; gap: 8px; }
.form .cto-wa input[type="text"] { flex: 1; }
.form .cto-ck { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; white-space: nowrap; }
.form .cto-ck input { width: auto; accent-color: var(--k); }
.form .cto-unsel { display: flex; flex-wrap: wrap; gap: 6px; }
.form .cto-opt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--text); background: var(--bg); }
.form .cto-opt.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.form .cto-opt svg { width: 13px; height: 13px; color: var(--muted); }
.form .cto-hint { grid-column: 2; margin-top: -6px; font-size: 12px; color: var(--faint); }
.form .cto-trv { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 9px; border: 1px dashed var(--line); border-radius: 5px; background: var(--surface); color: var(--text); min-width: 0; }
.form .cto-trv > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form .cto-trv .cto-or { margin-left: auto; }
.form .cto-trv svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.form .cto-mask { display: flex; align-items: center; gap: 8px; }
.form .cto-mask input { flex: 1; font-family: var(--f-num); }
.cto-sec { grid-column: 1 / -1; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; font-family: var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.cto-hist { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--faint); }
.cto-crm-nota { margin-right: auto; font-size: 12.5px; align-self: center; }
.un-ctos { display: flex; flex-direction: column; gap: 6px; }
.un-cto { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.un-cto .av { width: 22px; height: 22px; font-size: 9px; border: 0; }
.un-cto .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--text); }
.un-cto .pp { color: var(--faint); font-size: 12px; white-space: nowrap; }
.un-cto-geral { font-size: 12px; }
.un-onde .lk, .un-sec .lk, .cto-trv .lk, .cto-mask .lk, .mapa-card .lk, .mapa-vz .lk { color: var(--link); font-size: 12.5px; white-space: nowrap; }
.un-onde .lk:hover, .un-sec .lk:hover, .cto-trv .lk:hover, .cto-mask .lk:hover, .mapa-card .lk:hover { text-decoration: underline; }
@media (max-width: 860px) { .cto-bar .vfind-w { flex: 1 1 100%; } .cto-bar .cto-sp { display: none; } }
.so-meus-av { display: flex; align-items: center; gap: 6px; margin: 2px 8px 6px; padding: 5px 8px; border-radius: 6px; background: var(--tree-hover); font-size: 12px; color: var(--muted); }
.so-meus-av .i, .so-meus-av svg { width: 13px; height: 13px; flex: none; }
.so-meus-av span { flex: 1; min-width: 0; }
.so-meus-av .lk { font-size: 12px; }
.esp-tg .switch { pointer-events: none; margin-left: auto; }
.side-sec .esp-menu { margin-left: auto; margin-right: 2px; }
.no-tudo .lbl .faint { font-size: 12px; }
.ctk { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--tree-hover); color: var(--text); white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; vertical-align: middle; }
.ctk > span { overflow: hidden; text-overflow: ellipsis; }
.ctk .i, .ctk svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.ctk.sem { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.ctk.def { background: color-mix(in srgb, #D9822B 14%, var(--bg)); color: #9A6200; }
.ctk.def .i, .ctk.def svg { color: #D9822B; }
.ctk.fim { opacity: .65; }
.ctk.leg { background: none; color: var(--faint); padding: 0; font-weight: 400; }
.cellbtn.ctc { min-width: 0; max-width: 100%; }
.ct-chips-l { display: inline-flex; gap: 4px; margin-left: 8px; min-width: 0; }
.ct-add { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.ct-add.pede { border-color: color-mix(in srgb, #D9822B 55%, var(--line)); color: #9A6200; }
.ct-add .i, .ct-add svg { width: 12px; height: 12px; }
.attr.pede { border-color: color-mix(in srgb, #D9822B 55%, var(--line)); color: #9A6200; }
.ct-pd { margin: 0 10px 4px; }
.ct-pend { width: 6px; height: 6px; border-radius: 50%; background: #D9822B; flex: none; margin-right: 4px; }
.g-ct { display: inline-flex; align-items: center; gap: 6px; }
.g-ct .faint { font-weight: 400; }
.g-ct.def .i, .g-ct.def svg { color: #D9822B; }
.ct-h { cursor: pointer; }
.ct-org { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ct-org-n { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.ct-org-n .crit b { color: var(--danger); }
.ct-org-n .tb { margin-left: auto; }
.ct-org-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ct-lchip { cursor: pointer; }
.ct-lchip .faint { margin-left: 4px; }
.ct-pend-av { margin: 0; }
.ov-add { margin-left: auto; }
.lm .lm-lab { font-size: 13px; color: var(--muted); align-self: start; padding-top: 2px; }
.lm .lm-op label { color: var(--text); font-size: 13.5px; }
.lm input[type="radio"], .lm input[type="checkbox"] { width: auto; flex: none; padding: 0; margin: 3px 0 0; border: 0; }
.lm-op { display: flex; flex-direction: column; gap: 6px; }
.lm-r { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.lm-r input { margin-top: 3px; }
.lm-r .tm-t, .lm-c .tm-t { display: flex; flex-direction: column; gap: 1px; }
.lm-cts, .lm-sem { margin-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.lm-c { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.lm-c:hover { background: var(--surface); }
.lm-c .tm-t > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.lm-c input { margin-top: 3px; }
.lm-vz { margin: 0; }
.lm:has(#lm-tipo-sem:checked) .lm-cts { opacity: .45; pointer-events: none; }
.lm:has(#lm-tipo-ct:checked) .lm-sem { opacity: .45; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.t-meta .mini { border: 0; background: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px; }
.t-meta .mini:hover { background: var(--tree-hover); color: var(--text); }
.t-bloq { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.t-bloq + .t-bloq { border-top: 0; padding-top: 2px; }
.t-bloq-k { display: inline-flex; align-items: center; gap: 6px; width: 140px; flex: none; color: var(--muted); }
.t-bloq-k .i { color: #F5B400; }
.t-bloq.bloqueando .t-bloq-k .i { color: var(--danger); }
.t-bloq-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-bloq-l .t { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.t-bloq-l .t:hover span { text-decoration: underline; }
.t-bloq-l .t svg { width: 14px; height: 14px; flex: none; }
.sub-tab .subr2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px 90px; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); cursor: pointer; min-height: 38px; }
.sub-tab .subr2:hover { background: var(--surface); }
.sub-tab .subr2.hd { border-top: 0; cursor: default; font-size: 12px; color: var(--faint); min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.sub-tab .subr2.hd:hover { background: none; }
.subr2 .sn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.subr2 .sn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subr2 .sn .t.done { text-decoration: line-through; color: var(--muted); }
.subr2 .sn .due { font-size: 12.5px; flex: none; }
.subr2 .sc { justify-self: start; border: 0; background: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; color: var(--muted); display: inline-flex; }
.subr2 .sc:hover { background: var(--tree-hover); }
.rel-tabs { display: flex; gap: 14px; margin-left: 4px; }
.rel-tab { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.rel-tab.on { color: var(--text); border-color: var(--text); }
.rel-tab .n { color: var(--faint); font-weight: 400; }
.rel-sp { flex: 1; }
.rel-vazio { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; font-size: 13px; }
.ck-cards { display: flex; flex-direction: column; gap: 8px; }
.ck-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ck-nome { padding: 8px 12px 4px; font-weight: 600; font-size: 13.5px; }
.ck-card .ck-r { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; min-height: 32px; }
.ck-card .ck-r .ck-lab { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.ck-card .ck-r.done .ck-lab span { text-decoration: line-through; color: var(--muted); }
.ck-card .ck-r input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--faint); margin: 0; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--bg); }
.ck-card .ck-r input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); }
.ck-card .ck-r input[type="checkbox"]:checked::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.ck-card .ck-resp { color: var(--faint); }
.ck-card .ck-resp .av { width: 20px; height: 20px; font-size: 9px; }
.ck-card .add-row { border-top: 0; }
.ck-mais { border: 0 !important; color: var(--muted); }
.anx-faixa { display: block; text-align: center; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; margin-bottom: 10px; }
.anx-faixa u { text-underline-offset: 2px; }
.anx-faixa:hover { background: var(--surface); color: var(--text); }
.cmt-nl { color: var(--link); font-size: 12.5px; margin-right: 8px; }
.feed-q { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 0 10px; height: 32px; border: 1px solid var(--focus); border-radius: 6px; background: var(--bg); color: var(--faint); }
.feed-q input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 13px; color: var(--text); }
.tag.cor { background: var(--tg); color: var(--tgt); }
.pop-h.tg-h { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.pop.tgcp { width: 420px; max-width: 420px; }
.tgc-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.tgc-row > .tag { max-width: 150px; overflow: hidden; text-overflow: ellipsis; flex: none; }
.tgc-cores { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; justify-content: flex-end; }
.tgc { width: 16px; height: 16px; border-radius: 4px; background: var(--c); border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tgc.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.tgc.sem { background: linear-gradient(135deg, transparent 44%, var(--danger) 44%, var(--danger) 56%, transparent 56%), var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dp-f .dp-hora { margin-left: auto; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--faint); cursor: pointer; padding: 0 6px; white-space: nowrap; }
.dp-f .dp-hora:hover { color: var(--text); }
.dp-f .dp-hin { margin-left: auto; width: 96px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; background: var(--surface); color: var(--text); }
.pop .pap-i { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.pop .pap-i .tm-t .faint { white-space: normal; font-size: 12px; line-height: 1.3; }
.pop.pai { z-index: 69; }
.pop.filho > .pop-h:first-child { display: none; }
.pop .pop-i.ativo { background: var(--tree-hover); }
.pop .pop-i.quebra { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.pop .pop-i.quebra > span:not(.ck):not(.prio) { white-space: normal; line-height: 1.25; overflow: visible; }
.pop.lbp { width: 290px; max-width: 290px; max-height: min(560px, 86vh); }
.lbp .pop-i > span.lb-q { flex: none !important; margin-left: auto; }
.tm-share { justify-content: center; text-align: center; }
.pop-i > span.kb-dica { flex: none !important; margin-left: auto; font-size: 12px; color: var(--faint); }
.pop-i > span.ck + span.kb-dica { margin-left: 8px; }
.pop-i > span.rel-ic { flex: none !important; }
.pop.relp { width: 300px; max-width: 300px; }
.un-wrap { gap: 14px; }
.un-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.un-top h2 { margin: 0; font-size: 18px; }
.un-top .btn-k { margin-left: auto; }
.un-prop .panel-h .tb { margin-left: auto; }
.un-pr { grid-template-columns: minmax(0, 1fr) 180px auto !important; }
.un-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.un-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.un-h { display: flex; align-items: center; gap: 10px; }
.un-h > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.un-h b { font-size: 14.5px; }
.un-h .faint { font-size: 12.5px; }
.un-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); flex: none; }
.un-ic svg { width: 16px; height: 16px; }
.un-card .chip.ok { color: var(--ok); } .un-card .chip.warn { color: #9A6200; } .un-card .chip.info { color: var(--link); }
.un-obs { margin: 0; font-size: 13px; color: var(--muted); }
.un-sec { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.un-sec > .faint { font-size: 12px; }
.un-grid { grid-auto-flow: row dense; }
.un-tr { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 4px; margin: 0 -4px; border-radius: 6px; text-align: left; font-size: 13px; color: var(--text); }
.un-tr:hover { background: var(--hover-row); }
.un-tr > svg { width: 14px; height: 14px; flex: none; }
.un-tr .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-tr .av { width: 20px; height: 20px; font-size: 9px; }
.un-tr .due { font-size: 12px; color: var(--muted); white-space: nowrap; }
.un-tr .due.late { color: var(--danger); }
.un-ver { align-self: flex-start; }
.un-lista { grid-column: 1 / -1; }
.un-lista-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.un-lic { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; text-align: left; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; font-size: 13px; }
.un-lic:hover { background: var(--hover-row); }
.ct-acoes-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-dem { width: 100%; text-align: left; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; }
.ct-dem:hover { background: var(--hover-row); }
.ct-dem > span:first-child { font-weight: 500; }
.ct-lista .crit { color: var(--danger); }
.ac-ic { display: inline-flex; width: 16px; height: 16px; flex: none; }
.ac-ic svg { width: 16px; height: 16px; }
.ct-lista .lrow.ov { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 150px minmax(0, 1fr) 120px; }
.ct-lista .lrow.ov > span:not(.nm) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .ct-lista .lrow.ov { grid-template-columns: minmax(0, 1fr) 120px; } .ct-lista .lrow.ov > :nth-child(n+3) { display: none; } }
.form .form-nota { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12.5px; }
.form textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; background: var(--bg); color: var(--text); }
@media (max-width: 860px) { .ct-b { grid-template-columns: minmax(0, 1fr); } }
.ctr-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--cc); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pop-i > span.ctr-pill { flex: none !important; }
.fld > .lab { white-space: normal; line-height: 1.2; }
.fld > .lab svg { flex: none; }
.pop-i .ctr-sug { margin-left: auto; font-size: 12px; color: var(--faint); }
.pop-i .ctr-sug + .ck { margin-left: 8px; }
.est-pop { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.est-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-t b { font-size: 13.5px; font-weight: 600; }
.est-t span { font-size: 12px; }
.est-pop input { width: 120px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); }
.est-pop input:focus { outline: none; border-color: var(--text); }
.pop.estw { width: 340px; max-width: calc(100vw - 16px); }
.fdates .fbtn { margin-left: 0; }
.fdates > .faint { display: inline-flex; padding: 0 2px; } .fdates > .faint svg { width: 13px; height: 13px; }
.f-vazio { color: var(--faint); }
.st-ctl { border-radius: 6px; height: 26px; background: var(--sc); display: inline-flex; overflow: hidden; }
.st-ctl .st-main { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; height: 100%; border-left: 0; color: #fff; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.st-ctl button + button { border-left: 1px solid rgba(255, 255, 255, .35); }
.st-main svg { width: 11px; height: 11px; }
.st-ctl button { color: #fff; }
.st-ctl button:hover { background: rgba(0, 0, 0, .12); }
.st-ok { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); margin-left: 4px; flex: none; }
.st-ok:hover { color: var(--ok); border-color: var(--ok); }
.fld[data-campo="status"] .val { flex-wrap: nowrap; }
.fld[data-campo="status"] .st-ctl { min-width: 0; flex: 0 1 auto; }
.fld[data-campo="status"] .st-main { min-width: 0; }
.st-main .st-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-ok svg { width: 15px; height: 15px; }
.timer button { height: 26px; border-radius: 13px; font-size: 13px; }
.t-vazios { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; color: var(--faint); padding: 3px 6px; margin: -4px 0 0 -6px; border-radius: 6px; }
.t-vazios:hover { background: var(--tree-hover); color: var(--text); }
.t-vazios svg { width: 12px; height: 12px; }
.t-sec { gap: 8px; }
.t-sec .sec-h { gap: 6px; min-height: 28px; margin-left: -4px; }
.t-sec .sec-h h3 { font-size: 14px; font-weight: 600; }
.t-sec .sec-h .n { font-size: 12px; color: var(--faint); }
.prog { width: 80px; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-left: 4px; }
.prog i { display: block; height: 100%; background: var(--ok); }
.cf-tab { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cf-r { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; min-height: 36px; border-top: 1px solid var(--line); cursor: text; }
.cf-r:first-child { border-top: 0; }
.cf-r:hover { background: var(--hover-row); }
.cf-n { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; color: var(--text); border-right: 1px solid var(--line); min-width: 0; }
.cf-n svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.cf-r input { border: 0; background: transparent; padding: 0 12px; min-height: 36px; font-size: 14px; width: 100%; min-width: 0; outline: none; }
.cf-r input:focus { box-shadow: inset 0 0 0 1px var(--text); background: var(--bg); }
.t-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.t-list .add-row, .t-list button.add-row { min-width: 0; padding-left: 12px; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
.t-list .add-row:first-child { border-top: 0; }
.t-list .add-row.on { box-shadow: inset 0 0 0 1px var(--text); }
.subr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 36px; padding: 0 12px; border-top: 1px solid var(--line); cursor: pointer; }
.subr:first-child { border-top: 0; }
.subr:hover { background: var(--hover-row); }
.subr .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subr .t:hover { text-decoration: none; }
.ckl .ck-r, .ck-r { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.ck-r:first-child { border-top: 0; } .ck-r:hover { background: var(--hover-row); }
.ck-r input { width: 16px; height: 16px; accent-color: var(--k); margin: 0; }
.ck-r.done span { text-decoration: line-through; color: var(--faint); }
.dep-row { min-height: 40px; }
.dep-row .t { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.dep-row .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-row .t svg { width: 15px; height: 15px; flex: none; }
/* painel de atividade (comentários e histórico juntos) */
.task-side { background: var(--surface); border-left: 1px solid var(--line); }
.side-h { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.side-h b { font-size: 14px; font-weight: 600; }
.side-h .num { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; } .side-h .num svg { width: 13px; height: 13px; }
.side-sp { flex: 1; }
.seg-n { margin-left: 0; }
.feed { padding: 12px 16px; gap: 10px; }
.ev-l { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); padding: 0 2px; line-height: 1.5; }
.ev-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); align-self: center; justify-self: center; }
.ev-t b { color: var(--text); font-weight: 500; }
.ev-q { color: var(--faint); white-space: nowrap; }
.feed-mais { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 6px; border-radius: 6px; align-self: flex-start; }
.feed-mais:hover { background: var(--tree-hover); color: var(--text); }
.feed-mais svg { width: 12px; height: 12px; }
.cmt-card { border: 0; border-radius: 12px; box-shadow: var(--sh-card); }
.compose { background: var(--surface); border-top: 0; padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.cmp-card { background: var(--bg); border-radius: 12px; box-shadow: var(--sh-card); display: flex; flex-direction: column; }
.cmp-card:focus-within { box-shadow: 0 0 0 1px var(--text); }
.cmp-card .cmp, .cmp-card .cmp:focus { border: 0; box-shadow: none; border-radius: 12px 12px 0 0; background: transparent; min-height: 46px; }
.cmp-card .cmp-bar { padding: 0 8px 8px; }
.cmp-tab { font-size: 12px; font-weight: 600; color: var(--text); padding: 8px 12px 0; }
@media (max-width: 1100px) { .task-grid { grid-template-columns: minmax(0, 1fr); overflow-y: auto; } .task-side { border-left: 0; border-top: 1px solid var(--line); min-height: 460px; } }
@media (max-width: 860px) {
  .task { inset: 0; border-radius: 0; }
  .task-top { padding-top: env(safe-area-inset-top, 0px); height: calc(48px + env(safe-area-inset-top, 0px)); }
  .t-criada { display: none; }
  .task-main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fld { grid-template-columns: 124px minmax(0, 1fr); }
  .cf-r { grid-template-columns: 130px minmax(0, 1fr); }
  .ttl-in { font-size: 22px; }
}
/* ===================== ClickUp: quadro, calendário e cronograma ===================== */
.v-quadro { background: var(--bg); }
.board { grid-auto-columns: 264px; gap: 8px; }
.col, .col.over { background: color-mix(in srgb, var(--sc) 7%, var(--bg)); border-radius: 12px; padding: 0; border-top: 0; gap: 0; min-height: 160px; }
.col.over { outline: 2px dashed color-mix(in srgb, var(--sc) 60%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--sc) 12%, var(--bg)); }
.col-head { height: 40px; padding: 8px 10px; gap: 6px; border-radius: 12px 12px 0 0; }
.col-head .n { font-size: 12px; font-weight: 500; color: var(--faint); }
.col:hover .g-acts { opacity: 1; }
.col-b { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 8px; }
.col-note { margin: 4px 6px; font-size: 12.5px; color: var(--faint); }
.card { border: 0; border-radius: 8px; box-shadow: var(--sh-card); padding: 10px 12px; gap: 6px; background: var(--bg); cursor: pointer; text-align: left; }
.card:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .1); border-color: transparent; transform: none; }
.card .ttl { font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.card .ctx { font-size: 12px; color: var(--faint); }
.c-props { display: flex; flex-direction: column; gap: 4px; }
.c-p { display: flex; align-items: center; gap: 6px; font-size: 13px; min-height: 22px; flex-wrap: wrap; }
.c-p > svg { width: 14px; height: 14px; color: var(--faint); }
.c-p.due.late, .c-p.due.late > svg { color: var(--danger); }
.c-p.prio { color: var(--text); }
.c-mini { gap: 10px; }
.card.dragging { opacity: .45; }
.col-add { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--muted); }
.col-add:hover { background: color-mix(in srgb, var(--sc) 12%, transparent); color: var(--text); }
.col-add svg { width: 14px; height: 14px; }
.add-card { cursor: default; box-shadow: 0 0 0 1px var(--text); }
.add-card input { border: 0; outline: none; background: transparent; font-size: 14px; font-weight: 500; width: 100%; }
.cal-head { gap: 4px; }
.cal-head h2 { font-size: 16px; font-weight: 600; margin-left: 8px; text-transform: capitalize; }
.cal-head .sep { flex: 1; }
.cal-dica { font-size: 12px; }
.btn.sm { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.cal-wrap { overflow-x: auto; }
.cal { border: 1px solid var(--line); border-radius: 8px; min-width: 770px; }
.cal .wd { background: var(--bg); font-size: 12px; letter-spacing: 0; text-transform: capitalize; color: var(--faint); font-weight: 500; padding: 8px; }
.cal .day { min-height: 116px; padding: 4px 4px 6px; gap: 3px; }
.cal .day.out { background: var(--surface); }
.cal .day.over { background: color-mix(in srgb, var(--text) 6%, var(--bg)); box-shadow: inset 0 0 0 2px var(--text); }
.day-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; min-height: 24px; }
.cal .dn { font-size: 13px; color: var(--muted); text-transform: capitalize; }
.cal .day.today .dn { color: #fff; background: var(--hot); border-radius: 12px; padding: 1px 7px; }
.day-add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); opacity: 0; }
.day:hover .day-add, .day-add:focus-visible { opacity: 1; }
.day-add:hover { background: var(--tree-hover); color: var(--text); }
.day-add svg { width: 14px; height: 14px; }
.ev { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 6px; border-radius: 6px; border-left: 0; background: var(--bg); box-shadow: var(--sh-card); cursor: pointer; }
.ev svg { width: 12px; height: 12px; flex: none; }
.ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev:hover { background: var(--hover-row); box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .08); }
.ev.done span { text-decoration: line-through; color: var(--faint); }
.ev.dragging { opacity: .4; }
.ev-mais { font-size: 12px; color: var(--muted); padding: 2px 6px; border-radius: 6px; text-align: left; }
.ev-mais:hover { background: var(--tree-hover); color: var(--text); }
.gantt { border-radius: 8px; }
.g-row.hd, .g-scale { background: var(--bg); }
.g-row.lst, .g-line.lst { background: var(--surface); }
.g-bar { border-radius: 6px; font-size: 12px; font-weight: 500; }
.g-today { background: var(--hot); } .g-today span { color: var(--hot); }
/* ===================== ClickUp: criar tarefa, busca e caixa de entrada ===================== */
.modal.criar { width: min(640px, calc(100% - 32px)); top: 12vh; border-radius: 12px; border: 0; box-shadow: var(--shadow-lg); }
.cm-tabs { display: flex; align-items: center; gap: 18px; padding: 0 10px 0 16px; height: 44px; border-bottom: 1px solid var(--line); flex: none; }
.cm-tabs > button:not(.ibtn) { height: 44px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.cm-tabs > button:not(.ibtn):hover { color: var(--text); }
.cm-tabs > button.on { color: var(--text); border-color: var(--text); }
.cm-tabs .sep { flex: 1; }
.cm-b { padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cm-loc { display: flex; gap: 6px; flex-wrap: wrap; }
.pillb { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--text); max-width: 280px; }
.pillb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pillb svg { width: 14px; height: 14px; color: var(--faint); flex: none; } .pillb svg:last-child { width: 11px; height: 11px; }
.pillb:hover { background: var(--tree-hover); }
.cm-n { border: 0; outline: none; background: transparent; font-size: 20px; font-weight: 600; padding: 6px 0 2px; width: 100%; }
.cm-n:focus { box-shadow: none; }
.cm-d { border: 0; outline: none; background: transparent; font-size: 14px; resize: none; min-height: 56px; padding: 2px 0; color: var(--text); width: 100%; }
.cm-d:focus { box-shadow: none; }
.cm-attrs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 10px; }
.attr { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--muted); max-width: 220px; }
.attr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr:hover { background: var(--tree-hover); color: var(--text); }
.attr.on { color: var(--text); }
.attr svg { width: 14px; height: 14px; flex: none; }
.attr .avs .av { width: 20px; height: 20px; font-size: 8px; }
.attr.st { color: var(--text); font-weight: 500; text-transform: uppercase; font-size: 12px; }
.attr.st { background: var(--sc); color: #fff; border-color: transparent; }
.attr.st:hover { background: var(--sc); color: #fff; filter: brightness(.95); }
.cm-n { font-size: 20px; font-weight: 500; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; margin: 10px -11px 2px; width: calc(100% + 22px); }
.cm-n:focus { border-color: var(--line-strong); }
.cm-anx { padding: 0 0 6px; }
.cm-campos { padding: 2px 0 12px; }
.cm-campos-h { font-size: 12px; color: var(--muted); margin: 6px 0 8px; }
.cm-chipb { height: 28px; padding: 0 10px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 13px; }
.cm-chipb:hover { color: var(--text); background: var(--tree-hover); }
.cm-campos .cf-r { grid-template-columns: 150px minmax(0, 1fr); min-height: 32px; }
.cm-campos .cf-r input { min-height: 32px; }
.cm-seg { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; padding: 0 8px 0 4px; }
.cm-seg svg { width: 15px; height: 15px; }
.cm-split .btn-k { height: 32px; font-size: 13px; padding: 0 14px; }
.cm-split .btn-k.car { padding: 0 8px; }
.attr.st.claro, .attr.st.claro:hover { background: color-mix(in srgb, var(--sc) 18%, var(--bg)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 55%, var(--bg)); }
.cm-f { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); flex: none; }
.cm-f .sep { flex: 1; }
.btn-k.solo { border-radius: 6px; height: 32px; padding: 0 14px; font-size: 13px; }
.cm-dica { font-size: 12px; }
.mscrim.leve { background: rgba(0, 0, 0, .25); }
.modal.busca { top: 64px; width: min(680px, calc(100% - 24px)); border-radius: 12px; border: 0; box-shadow: var(--shadow-lg); max-height: min(580px, calc(100vh - 96px)); }
.bq-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--line); flex: none; }
.bq-in > svg { width: 18px; height: 18px; color: var(--faint); }
.bq-in .q, .bq-in .q:focus { border: 0; padding: 0; font-size: 16px; flex: 1; height: 100%; border-radius: 0; box-shadow: none; min-width: 0; }
.bq-in kbd { font: inherit; font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.bq-f { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.bq-f button { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.bq-f button:hover { color: var(--text); background: var(--tree-hover); }
.bq-f button.on { background: var(--k); color: var(--k-text); border-color: var(--k); }
.results { padding: 4px 6px 8px; }
.res-h { font-size: 12px; font-weight: 500; color: var(--faint); padding: 10px 10px 4px; }
.res { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 36px; border-radius: 8px; width: 100%; }
.res:hover, .res:focus-visible { background: var(--tree-hover); outline: none; }
.res-ic { width: 20px; display: grid; place-items: center; color: var(--muted); flex: none; } .res-ic svg { width: 16px; height: 16px; }
.res-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.res-t .t { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.res .ctx, .res-t .ctx { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: auto; flex: 1 1 0; min-width: 0; }
.res .pill { flex: none; }
.res-dica { margin: 8px 10px; font-size: 13px; color: var(--muted); }
.res-vazio { padding: 16px 10px; color: var(--muted); }
.bq-foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); flex: none; }
.bq-foot span { display: inline-flex; align-items: center; gap: 3px; } .bq-foot svg { width: 12px; height: 12px; }
/* caixa de entrada */
.cx-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.cx-tab { display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 10px 16px; border-bottom: 2px solid transparent; color: var(--muted); text-align: left; }
.cx-tab:hover { background: var(--hover-row); }
.cx-tab.on { border-color: var(--text); color: var(--text); }
.cx-tab > svg { width: 16px; height: 16px; flex: none; }
.cx-tt { display: flex; flex-direction: column; line-height: 1.25; }
.cx-tt b { font-size: 14px; font-weight: 500; color: var(--text); }
.cx-tt span { font-size: 12px; color: var(--faint); }
.stack.cx { gap: 6px; max-width: none; }
.cx-mes { font-size: 14px; font-weight: 600; padding: 10px 2px 2px; }
.cx-grp { display: flex; flex-direction: column; gap: 6px; }
.cx-item { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-height: 40px; border-top: 1px solid var(--line); }
.cx-item:hover { background: var(--hover-row); box-shadow: var(--sh-card); }
.cx-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 4px 6px 12px; text-align: left; }
.cx-main > svg { width: 15px; height: 15px; flex: none; }
.cx-task { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32%; flex: none; }
.cx-main .av { width: 22px; height: 22px; border: 0; flex: none; }
.cx-main .cx-txt { display: block; flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: 0; }
.cx-grp .cx-item, .cx-grp .cx-item:first-child { border-top: 1px solid var(--line); padding: 0 8px 0 0; }
.cx-txt b { color: var(--text); font-weight: 500; }
.cx-main .cx-trecho { color: var(--text); display: inline; -webkit-line-clamp: unset; overflow: visible; }
.cx-q { font-size: 12px; color: var(--faint); white-space: nowrap; flex: none; }
.cx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); flex: none; margin: 0; }
.cx-item.lido .cx-task, .cx-item.lido .cx-trecho { color: var(--muted); font-weight: 400; }
.cx-acts { display: inline-flex; align-items: center; gap: 2px; opacity: 0; flex: none; }
.cx-item:hover .cx-acts, .cx-acts:focus-within { opacity: 1; }
@media (max-width: 860px) { .cx-task { max-width: 45%; } .cx-txt { display: none; } .cx-acts { opacity: 1; } .cx-tab { min-width: 150px; } }

/* ===================== ClickUp: cartões, painéis e páginas de visão geral ===================== */
.content.cinza, .content.v-geral { background: var(--surface); }
.panel, .kpi, .erp-card-w { border: 0; border-radius: 12px; box-shadow: var(--sh-card); background: var(--bg); }
button.kpi:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .08); }
.panel-h { border-bottom: 0; padding: 14px 16px 8px; }
.panel-h h2 { font-size: 14px; font-weight: 600; }
.panel-b { padding: 6px 16px 16px; }
.panel-b.flush { padding: 0 0 6px; }
.kpi { padding: 14px 16px; gap: 4px; }
.kpi .n { font-size: 30px; font-weight: 500; }
.kpi .l { font-size: 13px; color: var(--muted); }
.kpi.on { box-shadow: 0 0 0 2px var(--text); }
.drow, .lrow, .rec-row, .log, .rule, .av-row { border-top: 1px solid var(--line-soft); }
.drow:hover, button.lrow:hover, button.log:hover { background: var(--hover-row); }
.empty { border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg); }
.rule .switch, .switch { width: 32px; height: 18px; border: 0; background: var(--line-strong); }
.switch::before { top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.switch:checked { background: var(--k); }
.switch:checked::before { transform: translateX(14px); background: var(--k-text); }
.pessoas-row { display: flex; gap: 8px; padding: 10px 16px 4px; overflow-x: auto; }
.pessoa-c { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 10px; background: var(--bg); box-shadow: var(--sh-card); flex: none; text-align: left; }
.pessoa-c:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .08); }
.pessoa-c.on { box-shadow: 0 0 0 2px var(--text); }
.pessoa-c .av { width: 32px; height: 32px; border: 0; font-size: 11px; }
.pc-t { display: flex; flex-direction: column; line-height: 1.3; }
.pc-t b { font-size: 14px; font-weight: 600; }
.pc-t > span { font-size: 12px; color: var(--muted); }
.pc-t .late { color: var(--danger); }
.vbar .sel { min-height: 28px; border-radius: 6px; font-size: 13px; padding: 2px 8px; }

/* avisos (toast) no canto inferior esquerdo, como no ClickUp */
.toast { left: 76px; right: auto; transform: none; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 10px; padding: 10px 14px; font-size: 13px; max-width: min(460px, calc(100vw - 96px)); animation: chToastE .2s cubic-bezier(.2, .8, .2, 1); }
.toast button { text-decoration: none; font-weight: 600; opacity: .9; padding: 2px 6px; border-radius: 6px; }
.toast button:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
@keyframes chToastE { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .toast { left: 12px; right: 12px; max-width: none; } }
/* ===================== Colaboração, anexos e e-mail ===================== */
.selo { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.selo-d { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.selo.s-ao-vivo .selo-d { background: #2F9E44; box-shadow: 0 0 0 3px color-mix(in srgb, #2F9E44 22%, transparent); }
.selo.s-enviando .selo-d, .selo.s-conectando .selo-d { background: #E8A100; }
.selo.s-leitura .selo-d { background: var(--faint); }
.online { display: inline-flex; align-items: center; margin-right: 4px; }
.on-av .av { width: 24px; height: 24px; border: 2px solid var(--app-bg); font-size: 9px; }
.on-av + .on-av { margin-left: -6px; }
.on-mais { font-size: 11px; color: var(--muted); margin-left: 4px; }
.vendo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-right: 6px; }
.vendo .av { width: 22px; height: 22px; border: 2px solid var(--bg); font-size: 8.5px; }
.vendo .av + .av { margin-left: -6px; }
.digitando { min-height: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.digitando:empty { display: none; }
.pontos { display: inline-flex; gap: 2px; }
.pontos i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: chPonto 1.1s infinite ease-in-out; }
.pontos i:nth-child(2) { animation-delay: .15s; } .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes chPonto { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
.cmp-tabs { display: flex; gap: 14px; padding: 8px 12px 0; }
.cmp-tabs .cmp-tab { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 0 4px; border-bottom: 2px solid transparent; }
.cmp-tabs .cmp-tab.on { color: var(--text); border-color: var(--text); }
.cmp-email { display: flex; flex-direction: column; padding: 6px 12px 0; }
.cmp-email label { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); min-height: 30px; }
.cmp-email label span { width: 58px; font-size: 12px; color: var(--faint); flex: none; }
.cmp-email input { flex: 1; border: 0; outline: none; background: transparent; font-size: 13px; min-width: 0; padding: 4px 0; }
.cmp-anx { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
.anx-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 2px 0 8px; border: 1px solid var(--line); border-radius: 13px; font-size: 12px; max-width: 220px; }
.anx-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-chip svg { width: 13px; height: 13px; flex: none; }
.cmp-bar label.ibtn { cursor: pointer; }
.anx-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.anx { display: flex; flex-direction: column; border-radius: 10px; background: var(--bg); box-shadow: var(--sh-card); overflow: hidden; position: relative; }
.anx:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .1); }
.anx-prev { height: 110px; display: grid; place-items: center; background: var(--surface); overflow: hidden; }
.anx-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anx-ic { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.anx-ic svg { width: 22px; height: 22px; }
.anx-ic b { font-size: 11px; letter-spacing: .04em; }
.anx-ic.t-pdf { color: #C62A2F; } .anx-ic.t-planilha { color: #2F9E44; } .anx-ic.t-mapa { color: #1C7ED6; } .anx-ic.t-video { color: #7048E8; }
.anx-info { display: flex; flex-direction: column; padding: 8px 10px; gap: 2px; min-width: 0; }
.anx-n { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-m { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; }
.anx:hover .anx-acts, .anx-acts:focus-within { opacity: 1; }
.anx-acts .ibtn { background: var(--bg); box-shadow: var(--sh-card); }
.anx-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; text-align: center; padding: 8px; }
.anx-add:hover { background: var(--hover-row); color: var(--text); }
.anx-add svg { width: 18px; height: 18px; }
.anx-add .faint { font-size: 12px; }
.cmt-anx { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cmt-anx .anx-prev { height: 80px; }
.task.solta .task-main { outline: 2px dashed var(--text); outline-offset: -8px; background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
.anx-modal { width: min(980px, calc(100% - 32px)); top: 5vh; max-height: 90vh; border: 0; border-radius: 12px; }
.anx-mh { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.anx-mh b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.anx-mh .faint { font-size: 12px; white-space: nowrap; }
.anx-mh .sep { flex: 1; }
.anx-grande { display: grid; place-items: center; background: var(--surface); min-height: 300px; max-height: calc(90vh - 56px); overflow: auto; }
.anx-grande img { max-width: 100%; max-height: calc(90vh - 60px); display: block; }
.anx-grande.pdf iframe { width: 100%; height: calc(90vh - 60px); border: 0; }
.anx-grande.vazio { padding: 40px 24px; gap: 10px; color: var(--muted); text-align: center; }
.anx-grande.vazio svg { width: 28px; height: 28px; }
.email-c { border-left: 3px solid var(--link); }
.em-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--link); font-weight: 500; }
.em-tag svg { width: 13px; height: 13px; }
.em-cab { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--muted); }
.em-cab b { color: var(--text); font-weight: 500; }
.sem-arq { opacity: .4; }
@media (max-width: 860px) { .selo .selo-t { display: none; } .online { display: none; } }
/* ===================== ClickUp: calendário com barras, Gantt com zoom, Meu trabalho, Respostas, Automações ===================== */
.cal2 { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.cal2.com-lado { grid-template-columns: minmax(0, 1fr) 260px 28px; }
.cal2 .cal-wrap { overflow-x: auto; min-width: 0; }
.cal-g { min-width: 760px; }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-wd .wd { padding: 8px 10px; font-size: 13px; color: var(--text); font-weight: 500; text-transform: none; letter-spacing: 0; background: var(--bg); border: 0; }
.cal-sem { position: relative; border-bottom: 1px solid var(--line); min-height: calc(36px + max(var(--lanes), 2) * 26px + 22px); }
.cal-sem.semana { min-height: 420px; }
.cal-sem:last-child { border-bottom: 0; }
.cal-dias { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dias .day { position: relative; border-right: 1px solid var(--line); border-bottom: 0; min-height: 0; padding: 0; }
.cal-dias .day:last-child { border-right: 0; }
.cal-dias .day.out { background: var(--surface); }
.cal-dias .day.over { background: color-mix(in srgb, var(--text) 6%, var(--bg)); box-shadow: inset 0 0 0 2px var(--text); }
.cal-dias .dn { position: absolute; right: 8px; bottom: 6px; font-size: 13px; color: var(--faint); }
.cal-dias .day.today .dn { color: #fff; background: var(--hot); border-radius: 11px; padding: 1px 7px; }
.cal-dias .day-add { position: absolute; left: 6px; bottom: 4px; }
.cal-dias .ev-mais { position: absolute; left: 30px; bottom: 5px; }
.cal-barras { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 24px; row-gap: 2px; padding: 8px 0 30px; pointer-events: none; }
.cbar { pointer-events: auto; display: flex; align-items: center; gap: 6px; margin: 0 4px; padding: 0 8px; height: 24px; border-radius: 6px; font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--sc) 20%, var(--bg)); border-left: 3px solid var(--sc); min-width: 0; text-align: left; cursor: pointer; }
.cbar:hover { background: color-mix(in srgb, var(--sc) 30%, var(--bg)); }
.cbar svg { width: 12px; height: 12px; flex: none; }
.cbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar.cont-e { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cbar.cont-d { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cbar.done span { text-decoration: line-through; color: var(--faint); }
.cbar.dragging { opacity: .4; }
.cal-abas { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); }
.cal-abas button { writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.cal-abas button:hover, .cal-abas button.on { color: var(--text); background: var(--hover-row); }
.cal-abas b { font-weight: 600; color: var(--text); } .cal-abas b.late { color: var(--danger); }
.cal-painel { border-left: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 760px; background: var(--surface); }
.cp-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; font-size: 14px; }
.cp-dica { margin: 0 4px 6px; font-size: 12px; }
.side-ev { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg); box-shadow: var(--sh-card); font-size: 13px; text-align: left; cursor: grab; }
.side-ev svg { width: 13px; height: 13px; flex: none; }
.side-ev .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-ev .due { font-size: 12px; }
.cal-head .tbp svg { width: 11px; height: 11px; }
.g-tool { display: flex; align-items: center; gap: 6px; }
.g-tool .sep { flex: 1; }
.g-tool .tbp svg, .cal-head .tbp svg:last-child { width: 11px; height: 11px; }
.gantt { border-radius: 8px; grid-template-columns: 360px minmax(0, 1fr); }
.g-row.hd { height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 80px; padding: 0 12px 0 38px; font-size: 12px; font-weight: 500; color: var(--faint); align-items: end; padding-bottom: 8px; }
.g-row { gap: 6px; }
.g-row > svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.g-row .g-cd { margin-left: auto; width: 72px; text-align: right; font-size: 12.5px; flex: none; }
.g-row.lst .gcar { margin-left: -4px; }
.g-row.add { min-height: 36px; padding-left: 38px; color: var(--muted); }
.g-row.add input { flex: 1; border: 0; outline: none; background: transparent; font-size: 14px; }
.g-add { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.g-add:hover { color: var(--text); }
.g-add svg, .g-row.add > svg { width: 14px; height: 14px; }
.g-line.add { height: 36px; border-top: 1px solid var(--line); }
.g-line-add { display: none; }
.g-scale { height: 56px; flex-direction: column; }
.g-weeks { display: flex; height: 26px; }
.g-scale:not(.duas) .g-weeks { height: 56px; }
.g-days { display: flex; height: 30px; border-top: 1px solid var(--line); }
.g-week { justify-content: center; }
.g-scale.duas .g-week { flex-direction: row; gap: 6px; align-items: center; justify-content: flex-start; }
.g-day { flex: none; border-left: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
.g-day b { font-weight: 500; color: var(--text); }
.g-day.hoje b { background: var(--hot); color: #fff; border-radius: 10px; padding: 0 6px; }
.g-weekend { top: 56px; background: repeating-linear-gradient(135deg, var(--surface) 0 6px, transparent 6px 12px); opacity: 1; }
.g-today { width: 1px; background: var(--hot); opacity: 1; }
.g-bar { cursor: grab; touch-action: none; }
.g-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.g-bar.arrastando { cursor: grabbing; opacity: .85; box-shadow: var(--sh-pop); }
.g-res { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; pointer-events: auto !important; }
.hd-add { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--k); color: var(--k-text); display: grid; place-items: center; opacity: .85; }
.hd-add:hover { opacity: 1; }
.hd-add svg { width: 12px; height: 12px; }
.row.hd { padding-right: 34px; }
.row:not(.hd) { padding-right: 34px; }   /* mesma folga das linhas e do título: as colunas ficam alinhadas */
.mt-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; max-width: 1400px; }
.mt-card .panel-h { padding-bottom: 4px; }
.mt-seg { margin: 0; min-width: 190px; }
.mt-tabs { display: flex; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.mt-tabs button { height: 34px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.mt-tabs button.on { color: var(--text); border-color: var(--text); }
.mt-b { padding: 6px 8px 12px; }
.mt-g + .mt-g { margin-top: 4px; }
.mt-gh { display: flex; align-items: center; gap: 6px; width: 100%; height: 32px; padding: 0 8px; border-radius: 6px; font-size: 14px; }
.mt-gh:hover { background: var(--tree-hover); }
.mt-gh .n { font-size: 12px; color: var(--faint); }
.mt-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 2px 8px 2px 30px; border-radius: 6px; cursor: pointer; }
.mt-row:hover { background: var(--hover-row); }
.mt-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mt-n .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-n .t.done { text-decoration: line-through; color: var(--faint); }
.mt-c { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-row .cellbtn { flex: none; margin-left: 0; }
.mt-row .avs .av { width: 22px; height: 22px; }
.mt-vazio { margin: 4px 8px 8px 30px; font-size: 13px; color: var(--faint); }
.ag-card .panel-b { gap: 10px; }
.ag-dia { display: flex; flex-direction: column; gap: 4px; }
.ag-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; text-transform: none; }
.ag-h b { text-transform: capitalize; }
.ag-h .n { margin-left: auto; font-size: 12px; color: var(--faint); }
.ag-t { display: block; text-align: left; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--sc) 14%, var(--bg)); border-left: 3px solid var(--sc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-t:hover { background: color-mix(in srgb, var(--sc) 24%, var(--bg)); }
.ag-mais { font-size: 12px; padding-left: 8px; }
.vazio-cu { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 16px; text-align: center; color: var(--muted); }
.vazio-cu > svg { width: 34px; height: 34px; color: var(--faint); margin-bottom: 6px; }
.vazio-cu b { font-size: 16px; color: var(--text); }
.vazio-cu span { font-size: 13px; }
.vazio-cu .btn { margin-top: 8px; }
.tbp.on { background: var(--k); color: var(--k-text); }
.pop.largo { max-width: 440px; width: 420px; }
.auto-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 12px 8px; }
.auto-tile { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; box-shadow: var(--sh-card); background: var(--bg); position: relative; min-height: 76px; text-align: left; }
.auto-tile .at-ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.auto-tile.on .at-ic { background: var(--k); color: var(--k-text); }
.auto-tile .at-ic svg { width: 14px; height: 14px; }
.auto-tile .at-n { font-size: 13px; font-weight: 500; line-height: 1.3; }
.auto-tile .switch { position: absolute; top: 10px; right: 10px; }
.auto-tile .at-ic.leve { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.auto-tile .at-lado { position: absolute; top: 10px; right: 10px; display: inline-flex; color: var(--muted); }
.auto-tile .at-lado svg { width: 16px; height: 16px; }
.auto-tile .at-lado .avs .av { width: 20px; height: 20px; font-size: 9px; }
.auto-tile .at-sug { position: absolute; top: 12px; right: 50px; font-size: 11.5px; color: var(--faint); }
.at-h .at-ctx { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.at-h .at-ctx svg { width: 12px; height: 12px; }
.auto-tile.novo { border: 1px dashed var(--line-strong); box-shadow: none; color: var(--muted); }
.auto-tile.novo:hover { color: var(--text); background: var(--hover-row); }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 8px 16px 16px; }
.auto-grid .rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab sw" "lab del"; gap: 6px 12px; padding: 14px; border: 0; border-radius: 12px; box-shadow: var(--sh-card); background: var(--bg); align-items: start; }
.auto-grid .rule .switch { grid-area: sw; }
.auto-grid .rule label { grid-area: lab; }
.auto-grid .rule .ibtn { grid-area: del; justify-self: end; align-self: end; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; }
.nav-sh { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; font-size: 14px; color: var(--text); }
.nav-sh svg { width: 16px; height: 16px; color: var(--muted); }
.nav-sub .nav-i { padding-left: 22px; }
.nav-sub .nav-i .av { width: 16px; height: 16px; border: 0; font-size: 7px; }
@media (max-width: 1000px) { .mt-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .cal2, .cal2.com-lado { grid-template-columns: minmax(0, 1fr); } .cal-abas { flex-direction: row; border-left: 0; border-top: 1px solid var(--line); } .cal-abas button { writing-mode: horizontal-tb; transform: none; flex: 1; justify-content: center; border-bottom: 0; } .cal-painel { border-left: 0; border-top: 1px solid var(--line); } .gantt { grid-template-columns: 200px minmax(0, 1fr); } .pop.largo { width: calc(100vw - 16px); } }

.g-line { display: flex; align-items: center; justify-content: space-between; }
.g-ir { position: sticky; left: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--bg); box-shadow: var(--sh-card); color: var(--muted); }
.g-ir.dir { left: auto; right: 6px; margin-left: auto; }
.grp-head .spill { background: var(--sc); color: #fff; border: 0; height: 20px; padding: 0 6px 0 4px; border-radius: 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; gap: 4px; }
.grp-head .spill svg { width: 12px; height: 12px; color: #fff; }
.g-ir:hover { color: var(--text); }
.g-ir svg { width: 13px; height: 13px; }
/* pesquisa no padrão do ClickUp */
.bq-in .q, .bq-in .q:focus { font-size: 18px; }
.bq-f { gap: 8px; padding: 10px 12px; }
.bq-f button { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.bq-f button svg { width: 14px; height: 14px; color: var(--muted); }
.bq-f button.on { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.res-avs { display: inline-flex; flex: none; }
.res-avs .av { width: 18px; height: 18px; font-size: 8px; margin-left: -4px; box-shadow: 0 0 0 1.5px var(--bg); }
.res-avs .av:first-child { margin-left: 0; }
.res-q { flex: none; font-size: 12px; color: var(--faint); margin-left: auto; padding-left: 8px; }
.res-acts { display: none; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.res-acts kbd { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--k); color: var(--k-text); font: inherit; font-size: 12px; }
.res:hover .res-acts, .res:focus .res-acts, .modal.busca:has(#busca:focus) #resultados > .res:first-of-type .res-acts { display: inline-flex; }
.res:hover .res-q, .res:focus .res-q, .modal.busca:has(#busca:focus) #resultados > .res:first-of-type .res-q { display: none; }
.modal.busca:has(#busca:focus) #resultados > .res:first-of-type { background: var(--tree-hover); }
.bq-foot { align-items: center; }
.bq-foot .sep { flex: 1; }
.bq-foot kbd { font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin: 0 2px; color: var(--muted); }
.em-breve { flex: none; margin-left: auto; font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pop-nota { margin: 6px 0 0; padding: 8px 16px 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
/* avatares, etiquetas e pílulas nos menus mantêm o tamanho (não esticam com o nome) */
.pop-i > span:is(.av, .tag, .pill, .spill, .sp, .kb) { flex: none !important; }
/* caixa de entrada: uma linha por tarefa, como no ClickUp */
.cx-task { flex: 0 0 300px; max-width: 32%; }
.cx-item:not(.lido) .cx-task { font-weight: 600; }
.cx-n { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 11px; line-height: 18px; text-align: center; color: var(--muted); }
.cx-q { min-width: 44px; text-align: right; }
/* Respostas: conversa inteira no cartão, como no ClickUp */
.th-conv { display: block; padding: 0; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-align: left; overflow: hidden; }
.th-conv:hover { box-shadow: none; background: var(--bg); }
.th-conv .th-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--line); }
.th-conv .th-top .sep { flex: 1; }
.th-conv .th-loc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.th-conv .th-loc:hover { background: var(--hover-row); }
.th-conv .th-loc b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-conv .th-loc .th-ctx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.th-conv .th-loc svg { width: 14px; height: 14px; flex: none; }
.th-conv .th-msg { display: flex; gap: 10px; padding: 12px 14px 6px; }
.th-conv .th-msg.resp { padding: 6px 14px; }
.th-conv .th-msg .av { width: 28px; height: 28px; flex: none; margin: 0; border: 0; }
.th-conv .th-mb { min-width: 0; flex: 1; }
.th-conv .th-mh { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.th-conv .th-mh b { font-weight: 600; }
.th-conv .th-mh .faint { font-size: 12px; }
.th-conv .th-tx { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.th-conv .th-div { display: flex; align-items: center; gap: 10px; padding: 4px 14px; font-size: 12px; color: var(--muted); }
.th-conv .th-div::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 1; }
.th-conv .th-div .tb { order: 2; }
.th-conv .th-resp { display: flex; gap: 8px; align-items: flex-end; margin: 8px 12px 12px; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.th-conv .th-resp:focus-within { border-color: var(--line-strong); }
.th-conv .th-in { flex: 1; border: 0; outline: none; resize: none; font: inherit; font-size: 14px; background: transparent; min-height: 24px; max-height: 160px; padding: 4px 0; box-shadow: none !important; }
.th-conv .th-resp .btn-k { height: 28px; }
/* estado vazio no padrão do ClickUp: ícone em caixa */
.vazio-cu > svg { width: 40px; height: 40px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); box-sizing: border-box; }
/* Atribuídas a mim: grupos por data de vencimento */
.g-venc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.g-venc svg { width: 14px; height: 14px; color: var(--muted); }
.g-venc.atr, .g-venc.atr svg { color: var(--danger, #C62A2F); }
.vazio-cu .btn-k { margin-top: 10px; height: 30px; padding: 0 12px; font-size: 13px; }
/* Visão geral: Pastas e Listas como no ClickUp */
.ov-cards > .span2 { grid-column: 1 / -1; }
.ov-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ov-pasta { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; text-align: left; min-width: 0; }
.ov-pasta:hover { background: var(--hover-row); }
.ov-pasta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-pasta svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.lrow.ov { grid-template-columns: minmax(0, 1fr) 170px 80px 80px 64px 56px; }
.ov-prog { display: flex; align-items: center; gap: 8px; }
.ov-prog .progress { flex: 1; }
.ov-prog .num { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
@media (max-width: 860px) { .lrow.ov { grid-template-columns: minmax(0, 1fr) 120px; } }
/* Contratos: cartões brancos no padrão do ClickUp */
.erp-card { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px; clip-path: none; box-shadow: var(--sh-card); padding: 16px 18px 18px; }
:root[data-theme="dark"] .erp-card { background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .erp-card { background: var(--bg); } }
.erp-card .band { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 12px 12px 0 0; }
.erp-card .meta { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.erp-card .meta span:first-child { font-weight: 600; color: var(--text); }
.erp-card .meta span + span { padding: 0 6px; border-radius: 4px; background: var(--surface-2); }
.erp-card h3 { font-size: 16px; font-weight: 600; }
.erp-card p { color: var(--muted); font-size: 13.5px; }
.erp-card dl { color: var(--text); }
.erp-card dt { color: var(--faint); }
.erp-card .btn { background: var(--k); color: var(--k-text); border-color: var(--k); }
/* menu da foto (perfil) no padrão do ClickUp */
.pop.conta { width: 292px; max-width: 292px; max-height: calc(100vh - 64px); }
.pop-who { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; width: 100%; text-align: left; border-radius: 0; }
.pop-who:hover { background: var(--hover-row); }
.pop-who .av { width: 36px; height: 36px; font-size: 13px; flex: none; }
.who-t { display: flex; flex-direction: column; min-width: 0; }
.who-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2F9E44; flex: none; }
.pop-status { display: flex; align-items: center; gap: 8px; margin: 2px 10px 6px; padding: 0 10px; height: 32px; width: calc(100% - 20px); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13.5px; text-align: left; flex: none; }
.pop-status:hover { background: var(--hover-row); color: var(--text); }
.pop-status svg { width: 15px; height: 15px; }
.pop-i-w { display: flex; align-items: center; flex: none; }
.pop-i-w .pop-i { flex: 1; width: auto; margin-right: 0; min-width: 0; }
.pop-i-w .pin { margin: 0 8px 0 2px; color: var(--faint); opacity: 0; }
.pop-i-w:hover .pin, .pop-i-w .pin.on, .pop-i-w .pin:focus-visible { opacity: 1; }
.pop-i-w .pin.on { color: var(--text); }
.pop-i .lx-n { margin-left: auto; font-size: 12px; flex: none !important; }
.pop-acts { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; }
.pop-acts .sep { flex: 1; }
.st-dur { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 4px; }
.st-dur .tbp { height: 26px; }
.tb-av { position: relative; }
.tb-sil { position: absolute; left: -4px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
.tb-sil svg { width: 10px; height: 10px; }
/* janelas simples: atalhos, ajuda, tempo rastreado, bloco de notas */
.modal.simples { width: min(640px, calc(100% - 32px)); top: 10vh; border-radius: 12px; }
.modal.simples .modal-h { position: relative; padding-right: 48px; }
.modal.simples .m-x { position: absolute; right: 12px; top: 12px; }
.atl-g { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.atl-g:first-child { margin-top: 0; }
.atl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.atl-r { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.atl-r:first-child { border-top: 0; }
.atl-k { margin-left: auto; display: inline-flex; gap: 4px; flex: none; }
.atl-k kbd, .ajuda kbd { font: inherit; font-size: 12px; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); text-align: center; }
.ajuda h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
.ajuda ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ajuda p { font-size: 14px; margin: 0; }
.lnk { color: var(--text); text-decoration: underline; padding: 0; font: inherit; }
.notas-in { width: 100%; min-height: 300px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; background: var(--bg); color: var(--text); }
.notas-in:focus { outline: none; border-color: var(--line-strong); }
.notas-st { margin: 6px 2px 0; font-size: 12px; }
.tp-run { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; font-size: 13.5px; }
.tp-run .sep { flex: 1; }
.tp-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tp-tot > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.tp-tot .n { font-size: 22px; font-weight: 600; }
/* cronômetro com o Click Hub fechado (pedido de 04/11): o aviso e as duas contas, até o fechamento e até agora */
.form .tp-fechado { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.55; }
.form .tp-fech { grid-column: 1 / -1; margin: 4px 0 0; }
.tp-lst { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tp-r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border-top: 1px solid var(--line); text-align: left; font-size: 13.5px; }
.tp-r:first-child { border-top: 0; }
.tp-r:hover { background: var(--hover-row); }
.tp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-n .faint { font-size: 12px; }
/* Configurações */
.cfg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; max-width: 1080px; padding: 4px 0 40px; }
.cfg-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; align-self: start; }
.cfg-g { font-size: 12px; color: var(--faint); padding: 14px 10px 4px; }
.cfg-g:first-child { padding-top: 2px; }
.cfg-i { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 14px; text-align: left; color: var(--text); }
.cfg-i svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cfg-i .faint { margin-left: auto; font-size: 12px; }
.cfg-i:hover { background: var(--hover-row); }
.cfg-i.on { background: rgba(0, 0, 0, .06); font-weight: 500; }
:root[data-theme="dark"] .cfg-i.on { background: rgba(255, 255, 255, .1); }
.cfg-b { min-width: 0; }
.cfg-b h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.cfg-b h3 { font-size: 15px; font-weight: 600; margin: 26px 0 4px; }
.cfg-b .sub { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.cfg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.cfg-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 14px; border-top: 1px solid var(--line); text-align: left; font-size: 14px; }
.cfg-row:first-child { border-top: 0; }
button.cfg-row:hover, label.cfg-row:hover { background: var(--hover-row); }
.cfg-row > svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cfg-row .av { width: 26px; height: 26px; flex: none; margin: 0; }
.cfg-rn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-rn b { font-weight: 500; }
.cfg-rn .faint { font-size: 12.5px; }
.cfg-row .ck { margin-left: auto; display: inline-flex; }
.cfg-row.hd { min-height: 34px; font-size: 12px; color: var(--faint); }
.cfg-c { width: 90px; flex: none; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cfg-row.tg { cursor: pointer; }
.cfg-acts { display: flex; gap: 8px; margin-top: 12px; }
.cfg-acts.wrap { flex-wrap: wrap; }
.cfg-perfil { display: flex; align-items: center; gap: 14px; padding: 16px; }
.cfg-perfil .av { width: 52px; height: 52px; font-size: 18px; flex: none; }
.cfg-perfil > div { display: flex; flex-direction: column; gap: 4px; }
.cfg-perfil b { font-size: 16px; font-weight: 600; }
.cfg-perfil .faint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cfg-perfil .sep { flex: 1; }
.cfg-logo { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.cfg-temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cfg-tema { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: left; font-size: 14px; position: relative; }
.cfg-tema.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.cfg-tema .ck { position: absolute; right: 10px; bottom: 10px; display: inline-flex; }
.cfg-tema .prev { height: 86px; border-radius: 8px; border: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 14px 1fr; gap: 6px; padding: 8px; background: #FFFFFF; }
.cfg-tema .prev i { border-radius: 4px; background: #E8E8E8; }
.cfg-tema .prev i:first-child { grid-row: 1 / 3; background: #000; }
.cfg-tema .prev.dark { background: #1E1E1E; border-color: #333; }
.cfg-tema .prev.dark i { background: #3A3A3A; }
.cfg-tema .prev.auto { background: linear-gradient(135deg, #FFFFFF 50%, #1E1E1E 50%); }
.tb.perigo { color: var(--danger); }
@media (max-width: 860px) { .cfg { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cfg-nav { position: static; flex-direction: row; overflow-x: auto; } .cfg-g { display: none; } .cfg-i { flex: none; } .cfg-temas { grid-template-columns: 1fr; } .cfg-c { width: 64px; } }
/* trilho só com ícones: o nome aparece ao lado ao passar o mouse */
.rail { gap: 6px; padding-top: 10px; }
.rail-btn { height: 36px; justify-content: center; }
.rail-btn[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 6px); top: 50%; transform: translate(-3px, -50%); opacity: 0; pointer-events: none; background: #1F1F1F; color: #fff; font-size: 12px; font-weight: 500; line-height: 1; padding: 7px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transition: opacity .12s ease, transform .12s ease; z-index: 90; }
.rail-btn[data-tip]:hover::after, .rail-btn[data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 860px) { .rail-btn[data-tip]::after { display: none; } }
/* padrão da marca no pé do trilho, quase transparente e sumindo em direção aos ícones */
.rail { position: relative; }
.rail-btn { z-index: 1; }
.rail-pat { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 0 0 8px 8px; overflow: hidden; pointer-events: none; opacity: .16; -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 100%); mask-image: linear-gradient(to top, #000 25%, transparent 100%); }
.rail-pat use { color: transparent; stroke: #fff; stroke-width: 13; }
@media (max-width: 860px) { .rail-pat { border-radius: 0; } }
/* Equipes: cartões de pessoa como em "Todas as pessoas" do ClickUp */
.pessoas-row.cu { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 16px 6px; }
.pessoa-c.cu { width: 140px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); text-align: left; }
.pessoa-c.cu:hover { box-shadow: var(--sh-card); }
.pessoa-c.cu.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pc-foto { height: 104px; display: grid; place-items: center; background: var(--ac); color: #fff; font-size: 30px; font-weight: 600; letter-spacing: .02em; }
.pc-n { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; font-size: 13px; min-width: 0; }
.pc-n b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-s { padding: 2px 10px 10px; font-size: 12px; line-height: 1.35; color: var(--muted); min-height: 42px; }
@media (max-width: 860px) { .pessoa-c.cu { width: 120px; } .pc-foto { height: 84px; font-size: 24px; } }
/* Configurações no formato do ClickUp: título da navegação, Sair no fim e blocos em duas colunas */
.cfg-tt { font-size: 14px; font-weight: 600; padding: 2px 10px 6px; }
.cfg-sep { height: 1px; background: var(--line); margin: 10px 4px; }
.cfg-sec { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.cfg-b h2 + .cfg-sec { border-top: 0; padding-top: 8px; }
.cfg-sec-l b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.cfg-sec-l span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cfg-sec-r { min-width: 0; }
@media (max-width: 1000px) { .cfg-sec { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Lista no padrão do ClickUp 4.0 (comparada no Brave em 29/10/2026): uma linha de títulos fixa no topo, divisórias entre as colunas,
   cabeçalho do grupo fixo ao rolar, "Adicionar tarefa" em todos os grupos enquanto o mouse está sobre a lista e data de tarefa concluída em verde */
.stack.lst { gap: 0; }
.stack.lst > .grp { padding-bottom: 30px; }
.stack.lst > .grp.com-add { padding-bottom: 0; }
.hd-top { position: sticky; top: -12px; z-index: 6; background: var(--bg); margin: -12px 0 -7px; padding-top: 12px; overflow: visible; }
.tn .t.done { text-decoration: none; color: var(--text); }
.stack.lst > .grp > .grp-head { position: sticky; top: 32px; z-index: 5; background: var(--bg); }
.row > .cell, .row > .cf, .row.hd > .hcol, .row.hd > .hd-c { position: relative; align-self: stretch; display: flex; align-items: center; }
.row > .cf { overflow: visible; min-width: 0; }
.row > .cf > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row > .cell::before, .row > .cf::before, .row.hd > .hd-c::before, .row.hd > .hcol::before { content: ''; position: absolute; left: -6px; top: 0; bottom: 0; width: 1px; background: var(--line-soft); pointer-events: none; }
.row.hd > .hcol::before { left: -2px; }
.row.hd > .hcol { border-radius: 0; }
@media (hover: hover) {
  .grp:not(.vazio) > .tbl > .add-row:not(.on) { opacity: 0; transition: opacity .12s; }
  .stack.lst:hover .grp > .tbl > .add-row, .grp:focus-within > .tbl > .add-row { opacity: 1; }
}
.cellbtn.due.ok, .c-p.due.ok { color: var(--s-ok); }
.g-tipo { display: inline-flex; gap: 6px; align-items: center; }
.ic-tipo { width: 16px; height: 16px; flex: none; }
.tp-top { display: flex; align-items: center; gap: 12px; }
.tp-top h2 { margin: 0; }
.tp-top .btn-k { margin-left: auto; }
.tp-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; margin-bottom: 12px; }
.tp-icones { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-ic { border: 1px solid var(--line); }
.tp-ic.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tp-ic-l { width: 20px; display: grid; place-items: center; flex: none; }
.tp-n { white-space: nowrap; }
.tp-acts { display: flex; gap: 6px; }

/* Cartão do Quadro no padrão do ClickUp 4.0 (comparado no Brave em 29/10/2026): propriedades numa linha só e "Adicionar Tarefa" na cor do status */
.c-props.c-linha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.c-linha .c-p { min-height: 20px; gap: 4px; font-size: 12.5px; }
.c-linha .c-p > svg, .c-vz svg, .c-desc svg { width: 14px; height: 14px; color: var(--faint); }
.c-linha .c-p.due.late, .c-linha .c-p.due.late > svg { color: var(--danger); }
.c-linha .c-p.due.ok { color: var(--s-ok); }
.c-vz, .c-desc { display: inline-flex; align-items: center; color: var(--faint); }
.c-mini { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.col-add { color: var(--sc-t, var(--muted)); }

/* Calendário como no ClickUp (comparado no Brave em 29/10/2026): o dia de hoje tem a célula contornada e o número sem destaque */
.cal-dias .day.today { box-shadow: inset 0 0 0 1.5px var(--text); }
.cal-dias .day.today .dn, .cal .day.today .dn { color: inherit; background: none; padding: 0; border-radius: 0; font-weight: 600; }

/* Gantt como no ClickUp (comparado no Brave em 29/10/2026): ocultar tabela, zoom Ano com trimestres, Ajuste automático, Proteger visualização e tarefas sem datas */
.gantt.sem-tab { grid-template-columns: minmax(0, 1fr); }
.gantt.sem-tab .g-left { display: none; }
.gantt.protegido .g-bar { cursor: pointer; }
.g-day.q { justify-content: center; font-size: 12px; color: var(--faint); }
.g-semdata { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--faint); white-space: nowrap; pointer-events: none; }
.g-tool .tbi.on { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }

/* Painel de Automações no cabeçalho como no ClickUp (comparado no Brave em 29/10/2026): três colunas, "Criar automação" primeiro e "Gerenciar automações" em botão com borda */
.pop:has(.auto-tiles) { max-width: 460px; width: 460px; max-height: min(520px, 80vh); }
.auto-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto-tile.novo { border: 0; box-shadow: var(--sh-card); color: var(--text); }
.auto-tile.novo .at-ic { background: var(--k); color: var(--k-text); }
.pop-h.at-h { font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; padding: 10px 12px 6px; }
.at-ger { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 12px 12px; height: 32px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--text); width: calc(100% - 24px); flex: none; }
.at-ger:hover { background: var(--hover-row); }
.at-ger svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .pop:has(.auto-tiles) { width: calc(100vw - 24px); } .auto-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menu "..." da tarefa como no ClickUp (comparado no Brave em 29/10/2026): copiar link e ID lado a lado no topo e as opções que fazem sentido no Click Hub */
.tm-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px 4px 6px; }
.pop.tmw { max-height: min(720px, calc(100vh - 16px)); }
.tm-share { margin: 6px 6px 2px; min-height: 32px; border-radius: 8px; background: var(--ink, #0A0A0A); color: var(--paper, #fff); font-size: 13px; font-weight: 500; }
.tm-share:hover { opacity: .9; }
.pop-i .tm-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; white-space: normal; }
.pop-i .tm-t > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-i .tm-t .faint { font-size: 12px; }
.tm-conf { margin: 2px 10px 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tm-conf b { color: var(--text); font-weight: 600; }
.tm-conf-f { display: flex; justify-content: flex-end; gap: 6px; padding: 0 8px 6px; }
.t-arq { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--muted); }
.t-arq svg { width: 15px; height: 15px; }
.t-arq .tb { margin-left: auto; min-height: 26px; padding: 2px 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.mini.arq { color: var(--muted); }
.sh-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 8px; }
.sh-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.sh-sec b { display: block; font-size: 14px; margin-bottom: 4px; }
.sh-sec p { margin: 0; font-size: 13.5px; color: var(--muted); }
.sh-avs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.sh-avs .av { margin: 0; }
.tm-top .tb { justify-content: center; gap: 6px; height: 30px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
.tm-top .tb svg { width: 13px; height: 13px; }

/* Prévia da migração por contrato */
.mg-chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mg-chamada p { margin: 4px 0 0; max-width: 70ch; }
.mg-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mg-resumo > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.mg-resumo b { font-size: 22px; }
.mg-resumo span { font-size: 12.5px; color: var(--muted); }
.mg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.mg-lista { max-height: 72vh; overflow: auto; padding: 6px 8px; }
.mg-lista tr.atual td { background: var(--surface); }
.mg-cli { display: inline-flex; align-items: center; gap: 8px; }
.mg-alerta { color: var(--warn); font-weight: 600; }
.mg-det { display: grid; gap: 14px; }
.mg-det-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mg-det-h h3 { margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.mg-sec h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; gap: 6px; align-items: center; }
.mg-sec h4 .n { color: var(--faint); font-weight: 500; }
.mg-sem { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-sem .chip b { margin-left: 4px; }
.mg-dec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.mg-dec > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.seg-mini { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg-mini button { padding: 3px 10px; font-size: 12.5px; color: var(--muted); }
.seg-mini button.on { background: var(--k); color: var(--k-text); }
@media (max-width: 1100px) { .mg-grid { grid-template-columns: minmax(0, 1fr); } .mg-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mg-lista table, .mg-det table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mg-lista th, .mg-det th { text-align: left; font-size: 12px; font-weight: 500; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mg-lista td, .mg-det td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.mg-lista td.num, .mg-lista th:nth-child(n+2):nth-child(-n+5) { text-align: right; }
.mg-lista tr.clic { cursor: pointer; }
.mg-lista tr.clic:hover td { background: var(--hover-row); }
.mg-lista .num, .mg-det .num, .mg-resumo .num { font-variant-numeric: tabular-nums; }
.mg-lista .rolagem, .mg-det .rolagem { overflow-x: auto; }
.mg-det td.faint { font-size: 12.5px; }
.mg-sp { width: 18px; height: 18px; border-radius: 4px; background: var(--sc); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.mg-cli { white-space: nowrap; }

/* Pedidos dos usuários (03/11/2026). Notificações: Caixa de entrada e e-mail lado a lado. */
.nt-r .cfg-rn { flex: 1; min-width: 0; }
.nt-c { flex: none; width: 112px; display: inline-flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; cursor: pointer; }
.nt-c .switch { margin-left: 0; }
.cfg-row.hd .nt-c { cursor: default; }
#nt-freq { flex: none; max-width: 100%; }
@media (max-width: 600px) { .nt-c { width: 64px; } .cfg-row:has(#nt-freq) { flex-wrap: wrap; } }

/* Arquivar e excluir cliente, pasta e lista: seção Arquivados na barra lateral e janelas de confirmação. */
.arq-sec { margin-top: 10px; }
.arq-sec .side-sec .arq-n { margin-left: auto; font-size: 12px; color: var(--faint); }
.arq-node { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 8px; border-radius: var(--r); color: var(--muted); font-size: 13px; }
.arq-node:hover { background: var(--tree-hover); }
.arq-node > svg { width: 14px; height: 14px; flex: none; }
.arq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.arq-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-t .faint { font-size: 11.5px; }
.arq-node .lk { flex: none; font-size: 12px; }
.arq-vazio { margin: 4px 8px; font-size: 12.5px; }
.lg-txt { line-height: 1.5; }
.lg-ck { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; cursor: pointer; }
.lg-ck input { margin-top: 3px; }
.btn.primary.perigo { background: var(--danger); border-color: var(--danger); }
.bulk-b.perigo { color: var(--danger); }

/* Pedidos dos usuários, entrega 3: cadeia de documentos, texto do aviso, renovação de ponta a ponta e integrações. */
.lic-cad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.lic-cad .kc, .lc-kc { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--muted); background: var(--bg); }
.lic-cad .kc.on { border-color: var(--s-ok); color: var(--s-ok); }
.lic-seta { color: var(--faint); }
.lics .row.lic-ant-tg { min-height: 28px; font-size: 12.5px; color: var(--muted); }
.lics .row.lic-ant-tg > span { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; padding-left: 22px; }
.lics .row.lic-ant-tg svg { width: 12px; height: 12px; transition: transform .15s; }
.lics .row.lic-ant-tg[aria-expanded="true"] svg { transform: rotate(90deg); }
.lics .row.lic-ant { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--muted); }
.lics .row.lic-ant .tn { padding-left: 40px; }
.lic-cadeia { display: flex; flex-direction: column; gap: 10px; }
.lc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-list li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 10px; padding-bottom: 12px; }
.lc-list li::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.lc-list li:last-child::before { display: none; }
.lc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sc, var(--faint)); margin: 3px 0 0 3px; position: relative; z-index: 1; }
.lc-b { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; font-size: 13px; }
.lc-b:hover b { text-decoration: underline; }
.lc-este .lc-b { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--bg); }
.lc-d { font-size: 12px; color: var(--muted); }
.lc-prox .lc-dot { background: transparent; border: 2px dashed var(--faint); box-sizing: border-box; }
.lc-prox > div { display: flex; flex-direction: column; gap: 2px; color: var(--faint); font-size: 13px; }
.lc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-links { display: flex; gap: 12px; font-size: 12.5px; }
.nv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.nv-row > svg { width: 16px; height: 16px; flex: none; }
.nv-tag { font-size: 12px; border: 1px solid var(--link); color: var(--link); border-radius: 4px; padding: 0 6px; }
.nv-assunto { min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.nv-ed { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nv-ed input, .nv-ed textarea { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 6px 9px; background: var(--bg); color: var(--text); }
.nv-ed textarea { resize: vertical; line-height: 1.6; }
.nv-ed input:disabled, .nv-ed textarea:disabled { background: var(--surface); color: var(--muted); }
.nv-campos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; }
.nv-fc { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--surface); color: var(--link); font-size: 12px; font-weight: 600; }
.nv-fc:hover { background: color-mix(in srgb, var(--link) 12%, var(--surface)); }
.nv-nota { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0; padding: 8px 10px; border-radius: var(--r); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.45; }
.nv-nota svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.nv-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nv-padrao { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.nv-padrao .sec-h { display: flex; align-items: baseline; gap: 10px; }
.nv-padrao h3 { margin: 0; font-size: 14px; }
.nv-proprios { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.nv-proprios p { margin: 0; font-size: 12.5px; }
.nv-box { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.nv-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; }
/* No protótipo, o cadastro troca o conteúdo dentro de #nl-av-c; o espaçamento é o mesmo. */
.nv-box > .nv-grid, .nv-box > p, #nl-av-c > .nv-grid, #nl-av-c > p { padding: 10px 12px; }
.seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.seg label { position: relative; padding: 4px 10px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.seg label.on { background: var(--text); color: var(--bg); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.modal.nv-modal { width: min(980px, calc(100vw - 32px)); }
.la-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.la-col .faint { font-size: 12px; line-height: 1.4; }
.vt-n { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
.ren-quem { margin: 0; font-size: 13px; color: var(--muted); }
.ren-doc { text-align: left; min-width: 0; }
.ren-doc:hover b { text-decoration: underline; }
.ren-steps { display: flex; flex-direction: column; gap: 10px; }
.ren-st { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.ren-st > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ren-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; box-sizing: border-box; }
.ren-st.feito .ren-dot { background: var(--s-ok); border-color: var(--s-ok); color: #fff; }
.ren-dot svg { width: 11px; height: 11px; }
.ren-ops { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.ren-op { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; }
.ren-op.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ren-op input { margin-top: 2px; }
.ren-op-t { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.ren-op-t select { max-width: 100%; }
.int-card { margin-bottom: 14px; }
.int-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.int-seg button { padding: 4px 12px; font-size: 13px; color: var(--muted); }
.int-seg button.on { background: var(--text); color: var(--bg); }
.int-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.int-acts .sel { width: 320px; max-width: 100%; }
.int-nova { display: flex; gap: 10px; align-items: flex-start; margin: 0 12px 12px; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--s-warn) 10%, var(--bg)); border: 1px solid color-mix(in srgb, var(--s-warn) 35%, var(--line)); font-size: 13px; }
.int-nova > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.int-nova svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.int-cod { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.int-cod code, .int-eventos code, .int-ep code, .int-entrega code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.int-eventos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.int-ep { gap: 10px; }
.int-m { min-width: 52px; text-align: center; font-weight: 600; }
.int-json { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.lic-ants { display: block; margin: -2px 0 4px; font-size: 12px; }
.nl-ant-c { display: contents; }
@media (max-width: 760px) { .nv-grid { grid-template-columns: 1fr; } .nv-acts { margin-left: 0; } }

/* Pedidos dos usuários, entrega 4: e-mail enviado pela tarefa e avaliação NPS do cliente. */
.em-st { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); }
.em-st svg { width: 13px; height: 13px; }
.em-st.enviado { color: var(--s-ok); }
.em-st.falhou { color: var(--s-crit); }
.em-anx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.em-pe { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 0; font-size: 12.5px; }
.em-copia { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.pop-nota { display: block; padding: 4px 10px 6px; font-size: 12px; }
.nps-ban { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.nps-ban b { font-size: 14px; }
.nps-ban p { margin: 0; color: var(--muted); line-height: 1.5; }
.nps-mail { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.nps-mail input { font: inherit; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); color: var(--text); max-width: 360px; }
.nps-recente { color: var(--warn); }
.nps-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nps-acts .lk { margin-right: auto; font-size: 12.5px; }
.nps-so { margin: 0; font-size: 12.5px; }
.nps-kpis .kpi { align-content: start; }
.nps-delta { font-size: 12px; color: var(--muted); }
.nps-dist { display: flex; flex-direction: column; gap: 6px; }
.nps-barra { display: flex; height: 10px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--surface); }
.nps-barra i { display: block; height: 100%; }
.nps-meses { display: flex; align-items: flex-end; gap: 12px; height: 170px; padding: 0 6px; }
.nps-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; font-size: 12px; }
.nps-col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.nps-col i { display: block; width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.nps-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; font-size: 13px; }
.nps-lin { display: contents; }
.nps-nota { margin: 10px 0 0; font-size: 12px; }
.nps-resp { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.nps-resp:first-child { border-top: 0; }
.nps-nota-n { font-size: 16px; }
.nps-resp-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.nps-resp-t .lk { text-align: left; }
.nps-ret { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nps-ret .sel { flex: 1; min-width: 200px; }
.nps-grupos { display: flex; gap: 6px; }

/*
 * Tela pequena e toque (etapa F). prototipo.css é cópia exata do protótipo e não muda; o que vale só no celular fica aqui.
 * Toda regra mora em `@media (max-width: 860px)`, o limite em que o protótipo já troca a barra lateral por gaveta, ou em
 * `@media (hover: none)`, que só existe em tela de toque. `apps/web/test/celular.test.ts` reprova regra fora disso. O que
 * vale só no celular, e não no tablet, fica no bloco do fim, dentro do primeiro.
 */
@media (hover: none) {
  /* Sem mouse, o que só aparecia ao passar por cima fica sempre à vista. */
  .g-acts, .oc-acts, .anx-acts, .cx-acts, .pop-i-w .pin, .cmt-mais { opacity: 1; }
  .node .nadd { display: grid; }
  .node .ni.tog .ni-ic { display: none; }
  .node .ni.tog .ni-car { display: grid; }
  .rsel { opacity: 1; }
  .r-acts { display: inline-flex; }
  .res-acts { display: inline-flex; }
  .res-acts kbd { display: none; }
  .day-add { opacity: 1; }
  /* Numa tela de toque maior, onde o Gantt inteiro aparece: subir e descer rola a tela, e só o gesto de lado move a barra. */
  .g-bar { touch-action: pan-y; }
}

@media (max-width: 860px) {
  /* ===== Altura real da janela, área segura e toque ===== */
  html { height: 100%; height: 100dvh; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
  body { height: 100%; height: 100dvh; margin: 0; inset: 0; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  .row, .card, .node, .nav-i, .pop-i, .rail-btn, .cbar, .side-ev, .g-m, .agenda-t, .mt-row, .subr2, .vtab, .cfg-i { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .row input, .card input { -webkit-user-select: text; user-select: text; }

  /* Alvo de toque: 44 px em tudo o que recebe dedo. O desenho pequeno fica; quem cresce é a área do botão. */
  button:not(.lnk):not(.lk):not(.rtb-cor), a.btn, .ibtn, label.t-acao, label.tgl, .tbp, .node, .res, .ni.tog, .g-add { min-height: 44px !important; }
  button:not(.lnk):not(.lk):not(.rtb-cor), a.ibtn, label.ibtn, .ibtn { min-width: 44px !important; }
  .ibtn, .tbi, .fav-btn, .sh-btn { justify-content: center; align-items: center; }
  .ibtn, .ibtn.sm { padding: 0; }
  .btn, .tb, .tbp, .btn-k, .fbtn, .attr, .pillb, .bulk-b, .bulk-x, .t-acao, .tgl, .timer button { min-height: 44px !important; }
  .tgl { display: inline-flex; align-items: center; }
  .btn-k, .btn-k.solo, .btn-k.car { height: 44px; font-size: 14px; }
  .cmt-link, .feed-mais, .t-vazios, .oc-mais, .oc-lista, .more { display: inline-flex; align-items: center; }
  .lk, .lnk { min-height: 0; }
  .mt-row, .subr2, .dep-row, .cfg-row.clic, .lrow[data-a], .drow, .bar-row, .tp-r, .ag-t, .un-lic, .ct-per.ct-dem, .ov-pasta, .rule, .cx-main, .res, .side-ev, .chip[data-a], .pessoa-c, summary, label:has(input:not([type="hidden"]):not([type="file"]), select) { min-height: 44px; }
  summary { display: flex; align-items: center; }
  /* A chave desenhada fica do mesmo tamanho; a área de toque é que cresce. */
  .rule .switch, .switch { width: 52px; height: 44px; background: none; border: 0; flex: none; }
  .switch::after { content: ""; position: absolute; left: 6px; right: 6px; top: 12px; height: 20px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
  .switch:checked { background: none; }
  .switch:checked::after { background: var(--text); border-color: var(--text); }
  .switch::before { z-index: 1; top: 15px; left: 9px; }
  .switch:checked::before { transform: translateX(20px); }
  .auto-tile .at-sug { right: 66px; }

  /* Campo abaixo de 16 px dá zoom no iOS ao focar. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea, .rte, [contenteditable="true"] { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, .ttl-in, .th-in { min-height: 44px !important; }
  .ttl-in { font-size: 22px !important; }
  .cm-n { font-size: 20px !important; }

  /* Texto de 12 px para cima. */
  .av, .dot, .sp, .dp-w, .eyebrow, .anx-m, .anx-ic b, .type, .mg-sp, .badge, kbd, .thread-sep, .tbn, .on-mais, .tab-n, .chip, .chip b, .sec-h .n, .tag, .em-tag, .lrow.hd, .rtb-h, .pill, .at-sug, .g-today span { font-size: 12px !important; }
  .av { min-width: 24px; min-height: 24px; }

  /* ===== Barra superior enxuta ===== */
  .app { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(44px + env(safe-area-inset-top, 0px)) minmax(0, 1fr); }
  .topbar { gap: 0; min-height: 0; padding: env(safe-area-inset-top, 0px) max(2px, env(safe-area-inset-right, 0px)) 0 max(2px, env(safe-area-inset-left, 0px)); }
  .topbar .menu-btn, .tb-ic, .search-pill { width: 44px; height: 44px; margin: 0; border: 0; border-radius: 8px; background: none; }
  .tb-ic svg, .search-pill svg { width: 20px; height: 20px; }
  .tb-dot { top: 10px; right: 10px; }
  .ws-btn { height: 44px; padding: 0 4px; background: none; }
  .tb-mid { justify-content: flex-end; }
  .tb-right { gap: 0; }
  .tb-right .tb-ic:not([data-a="criar"]):not([data-tela="caixa"]) { display: none; }
  .tb-av { width: 44px; height: 44px; margin: 0; padding: 0; justify-content: center; }
  .tb-av .av { width: 28px; height: 28px; }
  .tb-av > svg { display: none; }
  #selo { display: inline-flex; padding: 0 6px; }

  /* ===== Gaveta: trilho com rótulos e barra lateral, sobre o fundo escurecido ===== */
  .frame { grid-row: 2; grid-column: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 36; width: calc(72px + env(safe-area-inset-left, 0px)); margin: 0; border-radius: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 calc(10px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px); gap: 4px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-120%); transition: transform .2s ease; }
  .rail-btn { width: 72px; height: auto; min-height: 56px; padding: 4px 0; justify-content: center; }
  .rail-btn[data-tip]::after { display: block; position: static; transform: none; opacity: 1; padding: 0; background: none; box-shadow: none; color: #fff; font-size: 12px; line-height: 16px; white-space: nowrap; }
  .rail-btn .dot { right: -9px; top: -6px; }
  .rail-pat { display: none; }
  .tree { position: fixed; left: calc(72px + env(safe-area-inset-left, 0px)); top: 0; bottom: 0; z-index: 36; width: min(300px, calc(100vw - 72px - env(safe-area-inset-left, 0px) - 44px)); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateX(-140%); transition: transform .2s ease; }
  .app.nav .rail, .app.nav .tree { transform: none; }
  .tree-body { overscroll-behavior: contain; }
  .side-head { padding: 4px 6px 4px 14px; }
  .split.sm .sh-btn, .split.sm .sh-btn.car { width: 44px; height: 44px; }
  .nav-i, .node, .node.d1, .node.d2 { min-height: 44px; height: auto; font-size: 15px; }
  .node { padding: 0 0 0 calc(var(--ind, 0) * 12px); gap: 2px; }
  .node .ni { width: 44px; height: 44px; }
  .node .ni.tog { width: 52px; grid-template-columns: 12px 22px; justify-content: center; gap: 4px; direction: rtl; }
  .node .ni.tog .ni-ic, .node .ni.tog .ni-car { display: grid; direction: ltr; }
  .node .nadd { width: 44px; height: 44px; }
  .side-sec { padding: 8px 0 0 8px; }
  .side-sec .ibtn.sm { width: 44px; height: 44px; }
  .tree-filter { min-height: 44px; }
  .ibtn.sm svg { width: 18px; height: 18px; }

  /* ===== Cabeçalho do local e barra da visão ===== */
  .loc-head { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
  .loc-row { min-height: 44px; gap: 4px; }
  .crumbs { overflow: hidden; }
  .loc-head .crumbs > .cr, .loc-head .crumbs > .cr-sep, .loc-head .crumbs > .lk { display: none; }
  .cr-cur { font-size: 16px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .cr-cur .cr-t { white-space: nowrap; }
  .loc-right { flex: 0 1 auto; min-width: 0; }
  .loc-right .chip:not(.warn) { display: none; }
  .loc-right .chip.warn { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .fav-btn { width: 44px; height: 44px; flex: none; }
  .tbi { min-width: 44px; height: 44px; }
  .tbi svg { width: 20px; height: 20px; }
  .tbi .av { width: 26px; height: 26px; }
  .views { margin: 0 -12px -1px; padding: 0 8px; }
  .vtab, .vtab.on { height: 44px; font-size: 13px; flex: none; }
  .vbar { padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); gap: 0; min-height: 44px; overflow-x: auto; scrollbar-width: none; flex: none; }
  .vbar::-webkit-scrollbar { display: none; }
  .vbar .split, .vbar .vsep { display: none; }
  /* A pílula continua com 32 px; a borda transparente dá os 44 px de toque. */
  .tbp { height: 44px; flex: none; font-size: 13px; border: solid transparent; border-width: 6px 0; border-radius: 16px; background-clip: padding-box; }
  .vfind-w { min-height: 44px; flex: 1 0 200px; }
  .vfind, .vfind:hover, .vfind:focus { width: 100%; order: 0; }
  .sel { max-width: 200px; flex: none; }
  .content { padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); overflow-x: hidden; overscroll-behavior-y: contain; }

  /* ===== Lista: duas linhas por tarefa, sem rolagem lateral =====
     Linha de cima: status e nome. Linha de baixo: responsável, vencimento, prioridade e contrato. O resto fica no menu da linha. */
  .hd-top { display: none; }
  .tbl { overflow: visible; }
  .stack.lst > .grp > .grp-head { top: 0; }
  .grp-head { min-height: 44px; gap: 2px; }
  .gcar { width: 44px; height: 44px; }
  .gcar svg { width: 12px; height: 12px; }
  .stack.lst .row:not(.hd) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; min-height: 60px; padding: 8px 44px 8px calc(46px + var(--niv, 0) * 12px); }
  .stack.lst .row:not(.hd) > .tn { display: contents; }
  .stack.lst .row:not(.hd) .sub-car { display: none; }
  .stack.lst .row:not(.hd) .st-ic { position: absolute; left: calc(2px + var(--niv, 0) * 12px); top: 2px; width: 44px; height: 44px; }
  .stack.lst .row:not(.hd) .st-ic svg { width: 20px; height: 20px; }
  .stack.lst .row:not(.hd) .t { flex: 0 0 100%; min-width: 0; font-size: 15px; line-height: 20px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .stack.lst .row:not(.hd) .ren-in { flex: 0 0 100%; }
  .stack.lst .row:not(.hd) .tag, .stack.lst .row:not(.hd) .mini, .stack.lst .row:not(.hd) .r-acts { display: none; }
  .stack.lst .row:not(.hd) .mini.block, .stack.lst .row:not(.hd) .mini[title$="subtarefas"], .stack.lst .row:not(.hd) .mini[title$="comentários"] { display: inline-flex; order: 3; }
  .row > .cell, .row > .cf { order: 2; align-self: auto; min-width: 0; flex: none; }
  .row > .cell::before, .row > .cf::before { display: none; }
  .row > .cell:has(.vazio), .row > .cell:has(.ctk.sem) { display: none; }
  .row > .cf { flex: 0 0 100%; order: 1; font-size: 12px; color: var(--faint); }
  .row > .cf:has(> span:empty) { display: none; }
  /* Os campos da linha só mostram: tocar neles abre a tarefa, e quem muda sem abrir usa o menu da linha. */
  .row > .cell .cellbtn { width: auto; min-width: 0 !important; min-height: 0 !important; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; font-size: 13px; overflow: visible; }
  .row > .cell .cellbtn.prio svg { width: 15px; height: 15px; }
  .row > .cell .avs .av { width: 26px; height: 26px; }
  .row > .cell .ctk { font-size: 12px; }
  .r-mais { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; color: var(--faint); transform: translateY(-50%); }
  .rsel { display: none; }
  .stack.lst.tem-sel .row:not(.hd) .rsel { display: grid; position: absolute; left: calc(2px + var(--niv, 0) * 12px); top: 2px; width: 44px; height: 44px; transform: none; opacity: 1; background: var(--bg); z-index: 1; }
  .rsel input { width: 20px; height: 20px; }
  .add-row, button.add-row { min-width: 0; min-height: 44px; padding: 0 8px 0 calc(14px + var(--niv, 0) * 12px); }
  .add-row.on { flex-wrap: wrap; padding: 4px 4px 4px 12px; }
  .add-row.on input { flex: 1 1 60%; min-height: 44px; }
  .add-acts { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
  .add-hint { display: none; }
  .more { padding: 8px 12px; width: 100%; }
  .bulk { left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(8px + var(--kb, 0px) + env(safe-area-inset-bottom, 0px)); transform: none; overflow-x: auto; scrollbar-width: none; animation: none; }
  .bulk::-webkit-scrollbar { display: none; }
  .bulk-x, .bulk-b { height: 44px; flex: none; }
  .bulk-n { flex: none; }

  /* ===== Menus viram folha inferior, sempre dentro da tela ===== */
  .pop-fundo { position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .5); }
  #layer .pop { position: fixed; left: 0; right: 0; top: auto; bottom: var(--kb, 0px); z-index: 70; width: auto; min-width: 0; max-width: 560px; max-height: calc(var(--vvh, 100dvh) - 44px - env(safe-area-inset-top, 0px)); margin: 0 auto; padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; animation: chFolha .16s ease-out; }
  #rt-sug { position: fixed; left: 0; right: 0; top: auto; bottom: var(--kb, 0px); width: auto; min-width: 0; max-width: 560px; max-height: min(45dvh, 280px); margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom, 0px); border-radius: 16px 16px 0 0; overflow-y: auto; overscroll-behavior: contain; }
  @keyframes chFolha { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  .pop-topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 2px 2px 2px 16px; background: var(--bg); border-bottom: 1px solid var(--line-soft); flex: none; }
  .pop-topo b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pop-topo .ibtn:first-child { margin-left: -14px; }
  .pop-h { font-size: 13px; padding: 10px 16px 4px; }
  .pop-i, a.pop-i { min-height: 46px; font-size: 15px; }
  .pop-i svg { width: 18px; height: 18px; }
  .pop .pop-i.quebra { min-height: 46px; }
  .pop-i > span:not(.ck):not(.prio) { white-space: normal; }
  .pop-q { height: 44px; margin: 8px 8px 6px; }
  .pop-seg { margin: 8px; }
  .pop-seg button { height: 40px; font-size: 14px; }
  .pop-list { flex: 0 1 auto; }
  .kb-dica, .pop-i .kb { display: none; }
  .pop-i-w .pin { width: 44px; height: 44px; margin: 0 2px; }
  .pop-status { min-height: 44px; height: 44px; }
  .tm-top { flex-wrap: wrap; }
  .tm-share { width: calc(100% - 12px); }
  .st-dur { flex-wrap: wrap; }
  #layer .pop.dpw, #layer .pop.ocdp, #layer .pop.lbp, #layer .pop.tgcp { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dp-top { flex-direction: column; padding: 8px 8px 2px; }
  .dp-f { flex: none; height: 44px; }
  .est-pop { flex-direction: column; align-items: stretch; }
  .est-pop input { width: 100%; margin: 0; }
  .dp-fb { font-size: 14px; }
  .dp-x { width: 44px; height: 44px; margin: 0; }
  .dp-hin { min-height: 44px; }
  .dp-body { grid-template-columns: minmax(0, 1fr); }
  .dp-rap { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .dp-q { flex: none; min-height: 44px; font-size: 14px; }
  .dp-cal { padding: 8px 12px; }
  .dp-mes .tb { min-height: 44px; }
  .dp-grid { gap: 0; }
  .dp-d { width: 100%; height: 44px; border-radius: 10px; font-size: 15px; }
  .tgc-cores { flex-wrap: wrap; }
  .tgc { width: 44px; height: 44px; }
  /* Cor do cliente novo: o círculo cresce um pouco, e o toque vale para os 44 px do rótulo em volta dele. */
  .form .cl-cor { width: 44px; height: 44px; margin-top: 0; }
  .form .cl-cor input { width: 32px; height: 32px; }
  .cl-cor svg.i { width: 18px; height: 18px; }
  .form .cl-lab { margin-top: 8px; font-size: 14px; }

  /* ===== Janelas em tela cheia ===== */
  .modal[role="dialog"], .modal[role="dialog"].criar, .modal[role="dialog"].simples, .modal[role="dialog"].busca, .modal[role="dialog"].anx-modal { position: fixed; inset: 0 0 var(--kb, 0px) 0; width: auto !important; max-width: none; max-height: none; transform: none; border: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  .modal-h { flex: none; padding: 12px 16px 8px; }
  .modal.simples .m-x { top: calc(4px + env(safe-area-inset-top, 0px)); right: 4px; }
  .modal-b { flex: 1; min-height: 0; padding: 8px 16px 16px; overscroll-behavior: contain; }
  .modal-f { flex: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .modal-f .btn { flex: 1; justify-content: center; }
  .oc-prev-f { position: sticky; bottom: 0; flex-wrap: wrap; margin-top: auto; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
  .form { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .form label { margin-top: 8px; font-size: 14px; }
  .form .form-nota, .form-nota { margin-top: 4px; }
  .cm-tabs { flex: none; gap: 12px; height: auto; }
  .cm-tabs > button:not(.ibtn) { min-height: 44px; font-size: 14px; }
  .cm-b { flex: 1; min-height: 0; overscroll-behavior: contain; }
  .cm-f { flex: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cm-split .btn-k { height: 44px; }
  .cm-campos .cf-r { grid-template-columns: minmax(0, 1fr); }
  .bq-in { padding: 0 4px 0 16px; height: 52px; }
  .bq-in kbd, .bq-foot { display: none; }
  .bq-f button { height: 44px; border-radius: 22px; flex: none; }
  .results { flex: 1; min-height: 0; overscroll-behavior: contain; }
  .res { min-height: 52px; padding: 4px 8px; }
  .res-t { flex-direction: column; gap: 0; align-items: flex-start; }
  .res .ctx, .res-t .ctx { flex: none; max-width: 100%; }
  .anx-grande { flex: 1; max-height: none; }
  .anx-grande img { max-height: 100%; }
  .anx-grande.pdf iframe { height: 100%; }
  .anx-mh { flex-wrap: wrap; }

  /* ===== Janela da tarefa em tela cheia: voltar, abas e campo de comentário acima do teclado ===== */
  .task { position: fixed; inset: 0 0 var(--kb, 0px) 0; display: flex; flex-direction: column; border-radius: 0; box-shadow: none; }
  .task-top { flex: none; height: auto; min-height: calc(44px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(2px, env(safe-area-inset-right, 0px)) 0 max(2px, env(safe-area-inset-left, 0px)); gap: 0; }
  .task-top .crumbs { flex: 1; margin-left: 2px; font-size: 13px; overflow-x: auto; scrollbar-width: none; }
  .task-top .crumbs::-webkit-scrollbar { display: none; }
  .task-top .crumbs > * { flex: none; }
  .task-top .crumbs .cr { max-width: none; }
  .task-top .right { gap: 0; }
  .t-abas { flex: none; display: flex; border-bottom: 1px solid var(--line); }
  .t-abas button { flex: 1; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 2px solid transparent; }
  .t-abas button.on { color: var(--text); border-color: var(--text); }
  .t-abas .n { margin-left: 6px; font-weight: 500; color: var(--faint); }
  .task-grid { flex: 1; min-height: 0; }
  .task-grid.abas { display: block; overflow: hidden; }
  .task-grid.abas > .task-main { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .task-grid.abas > .task-side { height: 100%; min-height: 0; border: 0; }
  .task-grid.abas.atividade > .task-main, .task-grid.abas:not(.atividade) > .task-side { display: none; }
  .task-main { padding: 12px max(12px, env(safe-area-inset-right, 0px)) 28px max(12px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .task-main > * { flex: none; }
  .feed { overscroll-behavior: contain; padding: 12px; }
  .compose { max-height: calc(var(--vvh, 100dvh) * .75); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .cmp.rte, .cmp-card .cmp { max-height: 30dvh; overflow-y: auto; }
  .cmp-tabs .cmp-tab { min-height: 44px; font-size: 13px; }
  .cmp-email input { min-height: 44px; }
  .cmp-bar { flex-wrap: wrap; }
  .fld { grid-template-columns: 112px minmax(0, 1fr); min-height: 44px; gap: 4px; }
  .fld > .lab { white-space: normal; line-height: 1.2; }
  .fbtn { margin-left: 0; }
  .fdates { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
  .st-ctl { min-height: 36px; }
  .st-ctl button, .st-main { min-height: 44px !important; }
  .st-ok { width: 44px; height: 44px; }
  .sec-h { min-height: 44px; }
  .cf-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cf-r input { width: 100%; }
  .subr2 { min-height: 52px; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 0; }
  .subr2.hd { display: none; }
  .subr2 .sn { position: relative; min-height: 44px; padding-left: 40px; flex-wrap: wrap; }
  .subr2 .sn .st-ic { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
  .subr2 .sc { width: 44px; min-height: 44px; }
  .subr2 .t { white-space: normal; }
  .dep-row { flex-wrap: wrap; min-height: 44px; padding: 4px 8px; gap: 4px 8px; }
  .dep-row .t { min-height: 44px; display: flex; align-items: center; gap: 6px; flex-basis: 60%; }
  .dep-row .k { width: auto; }
  .rel-tab { min-height: 44px; }
  .ck-r { min-height: 44px; }
  .ck-lab { min-height: 44px; display: flex; align-items: center; flex: 1; min-width: 0; }
  .ck-lab input { width: 20px; height: 20px; }
  .anx-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .anx-faixa { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .anx-acts .ibtn { background: var(--bg); }
  .oc-h { flex-wrap: wrap; }
  .oc-acts { margin-left: auto; }
  .oc-cmp-f .dica, .cmt-f > .faint:first-child { display: none; }
  .oc-imp { flex-wrap: wrap; }
  .oc-novo { min-height: 44px; }
  .t-meta { row-gap: 2px; }
  .t-arq, .t-bloq { flex-wrap: wrap; min-width: 0; }
  .t-arq > span { flex: 1 1 200px; min-width: 0; }
  .t-tipo { min-height: 44px; }
  .mini[data-a] { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .side-h { min-height: 44px; }
  .side-h .ibtn { width: 44px; height: 44px; }
  .thread-h { min-height: 44px; }
  .feed-q { min-height: 44px; }

  /* Barra de formatação encostada no teclado, e não flutuando sobre a seleção. */
  #rt-bar { left: 0; right: 0; top: auto; bottom: var(--kb, 0px); max-width: 100%; padding: 0 0 env(safe-area-inset-bottom, 0px); border-width: 1px 0 0; border-radius: 0; overflow-x: auto; scrollbar-width: none; animation: none; }
  #rt-bar::-webkit-scrollbar { display: none; }
  .rt-bar > .rtb-g button { min-width: 44px; height: 44px; font-size: 14px; }
  .rtb-g { flex: none; }
  .rtb-menu { position: fixed; left: 8px !important; right: 8px; top: auto; bottom: calc(var(--kb, 0px) + 52px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-height: 50dvh; overflow-y: auto; }
  .rtb-cores { grid-template-columns: repeat(auto-fill, 44px); }
  .rtb-cor { width: 44px; height: 44px; }
  .rtb-link { flex-wrap: wrap; }
  .rtb-link input { width: 100%; }
  .rt img { max-width: 100%; height: auto; }
  .rt, .cmt-txt { overflow-wrap: anywhere; }

  /* ===== Quadro: uma coluna por vez, encaixando ao deslizar ===== */
  .board { min-width: 0; overflow-x: auto; grid-auto-columns: min(84vw, 320px); scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
  .board::-webkit-scrollbar { display: none; }
  .col { scroll-snap-align: center; }
  .col-head { min-height: 44px; height: auto; }
  .col-head .ibtn.sm { width: 44px; height: 44px; }
  .card { position: relative; padding: 10px 44px 10px 12px; min-height: 60px; }
  .c-st { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; }
  .c-st svg { width: 18px; height: 18px; }
  .col-add { min-height: 44px; }

  /* ===== Calendário: agenda, um dia por linha ===== */
  .cal-head { flex-wrap: wrap; gap: 4px; }
  .cal-head h2 { flex-basis: 100%; order: 3; font-size: 16px; margin: 0; }
  .cal2, .cal2.com-lado { grid-template-columns: minmax(0, 1fr); gap: 8px; border: 0; border-radius: 0; overflow: visible; background: none; }
  .cal-abas { order: -2; flex-direction: row; border: 0; gap: 8px; }
  .cal-abas button { flex: 1; min-height: 44px; writing-mode: horizontal-tb; transform: none; justify-content: center; border: 1px solid var(--line); border-radius: 8px; }
  .cal-painel { order: -1; max-height: none; border: 1px solid var(--line); border-radius: 8px; }
  .cp-h { min-height: 44px; }
  .side-ev { min-height: 44px; }
  .agenda { display: flex; flex-direction: column; gap: 12px; }
  .agenda-h { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .agenda-d.hoje .agenda-h { color: var(--hot); }
  .agenda-h .sep { flex: 1; }
  .agenda-h .day-add { position: static; width: 44px; height: 44px; opacity: 1; }
  .agenda-t { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 8px; border-left: 3px solid var(--sc); }
  .agenda-t svg { width: 16px; height: 16px; flex: none; }
  .agenda-t .t { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; }
  .agenda-t .faint { flex: none; font-size: 12px; }
  .agenda-t.done .t { color: var(--faint); text-decoration: line-through; }
  .agenda-v { padding: 8px 0; font-size: 13px; color: var(--faint); }

  /* ===== Gantt: versão simplificada, uma barra por tarefa em linha inteira ===== */
  .g-tool { gap: 8px; flex-wrap: wrap; }
  .g-m { position: relative; }
  .g-m-esc { position: relative; height: 24px; font-size: 12px; color: var(--faint); }
  .g-m-esc span { position: absolute; top: 2px; white-space: nowrap; }
  .g-m-esc .fim { right: 0; }
  .g-m-esc .hoje { left: var(--hoje); transform: translateX(-50%); color: var(--hot); font-weight: 600; }
  .g-m-l { display: flex; align-items: center; gap: 2px; width: 100%; min-height: 44px; font-size: 14px; font-weight: 600; }
  .g-m-l .t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-m-l .n { font-weight: 500; color: var(--faint); }
  .g-m-t { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 100%; min-height: 56px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
  .g-m-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .g-m-n svg { width: 16px; height: 16px; flex: none; }
  .g-m-n .t { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-m-n .due { flex: none; font-size: 12px; }
  .g-m-b { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .g-m-b::after { content: ''; position: absolute; left: var(--hoje); top: 0; bottom: 0; width: 2px; background: var(--hot); }
  .g-m-b i { position: absolute; top: 0; bottom: 0; min-width: 4px; border-radius: 4px; background: var(--sc); }

  /* ===== Telas ===== */
  .kpis { gap: 8px; }
  .kpi { min-height: 44px; }
  .cx-tab { min-width: 140px; min-height: 44px; flex: none; }
  .cx-item { flex-wrap: wrap; }
  .cx-main { min-height: 44px; flex: 1 1 100%; flex-wrap: wrap; }
  .cx-task { max-width: none; flex: 1; }
  .cx-main .cx-txt { order: 1; flex: 1 1 100%; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .cx-n { font-size: 12px; }
  .cx-acts { margin-left: auto; }
  .dash, .cards2 { grid-template-columns: minmax(0, 1fr); }
  .dash .span2 { grid-column: auto; }
  .bar-row { min-height: 44px; }
  .chart { min-width: 0; }
  .card-tools .ibtn { width: 44px; height: 44px; }
  .lrow, .drow, .rec-row, .av-row { min-height: 44px; }
  .ct-lista .lrow, .ct-lista .lrow.ov, .lrow.ov { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .lrow > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ct-b { grid-template-columns: minmax(0, 1fr); }
  .ct-org-n .tb { margin-left: 0; }
  .ct-lchip { max-width: 100%; height: auto; white-space: normal; flex-wrap: wrap; }
  .un-grid { grid-template-columns: minmax(0, 1fr); }
  .un-pr { grid-template-columns: minmax(0, 1fr) auto !important; }
  .mg-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-lista { max-height: 60dvh; }
  .mg-lista tr.clic td { height: 44px; }
  .mg-grid, .mg-det { grid-template-columns: minmax(0, 1fr); }
  .mg-grid > *, .mg-det > * { min-width: 0; }
  .rec-row .t[data-a] { min-height: 44px; display: flex !important; align-items: center; }
  .seg-mini button { min-height: 44px; }

  /*
   * Contatos do cliente: cada contato vira um bloco, como as licenças. Nome e Editar na primeira linha; depois papel e
   * origem, as unidades, o telefone, o e-mail e os documentos. O WhatsApp e a escolha das unidades ganham o alvo de toque.
   */
  .cto-tbl { overflow: visible; }
  .cto-row.hd { display: none; }
  .cto-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; min-width: 0; }
  .cto-row > .cto-nm { order: 0; flex: 1 1 calc(100% - 64px); }
  .cto-row > :nth-child(8) { order: 1; flex: none; }
  .cto-row > :nth-child(2) { order: 2; }
  .cto-row > :nth-child(7) { order: 3; }
  .cto-row > .cto-uns { order: 4; flex: 1 1 100%; }
  .cto-row > .cto-tel { order: 5; }
  .cto-row > .cto-mail { order: 6; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; }
  .cto-or, .cto-sec { font-size: 12px; }
  .cto-row > .cto-doc { order: 7; flex: 1 1 100%; flex-direction: row; gap: 10px; }
  a.wa, a.wa.sm { height: 44px; }
  a.wa.ic { width: 44px; }
  .form .cto-opt { height: 44px; }

  /*
   * Mapa dos clientes: a lista em cima e o mapa no resto da tela, sem a altura mínima do computador, para caber no celular
   * deitado; "Recolher a lista" dá a tela toda ao mapa. Os números dos grupos e da legenda ficam com 12 px, e o botão do
   * crédito do mapa ganha o alvo de toque.
   */
  .mapa-wrap { grid-template-rows: auto minmax(0, 1fr); }
  .g-grupo text { font-size: 12px; }
  .lg-p.gr { width: 18px; height: 18px; font-size: 12px; }
  .mapa-globo .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 44px; padding-right: 44px; }
  .mapa-globo .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; min-width: 44px; }
  /* Celular deitado: o mapa fica baixo, e os botões de aproximar vão em linha no alto, com Mapa e Satélite ao lado deles. */
  @media (max-height: 500px) { .mapa-ctl { flex-direction: row; } .mapa-camada { right: 168px; } }

  /* Licenças: mesma linha em duas alturas da Lista. */
  .lics .row.hd { display: none; }
  .lics .row { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; min-height: 60px; width: 100%; }
  .lics .row > .tn { flex: 0 0 100%; min-width: 0; }
  .lics .row > .t2 { flex: 1 1 100%; min-width: 0; }
  .lics .row > .cf, .lics .row > .due, .lics .row > .avs { flex: none; }

  /* Configurações */
  .cfg { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cfg-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .cfg-nav::-webkit-scrollbar { display: none; }
  .cfg-tt, .cfg-g { display: none; }
  .cfg-i { flex: none; min-height: 44px; }
  .cfg-sec { grid-template-columns: minmax(0, 1fr); }
  .cfg-row { flex-wrap: wrap; min-height: 44px; }
  .cfg-rn { flex: 1 1 200px; }
  .cfg-row.hd, .cfg-row .cfg-c:not(.cfg-pap) { display: none; }
  .cfg-row.clic { min-height: 44px; }
  .cfg-c, .cfg-c.cfg-pap { width: auto; }
  .cfg-pap .sel { max-width: 100%; }

  /* Avisos */
  .toast { left: 12px; right: 12px; bottom: calc(12px + var(--kb, 0px) + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .toast button { min-height: 44px; }
  #app:has(.bulk) ~ #toast .toast { bottom: calc(72px + var(--kb, 0px) + env(safe-area-inset-bottom, 0px)); }

  /* ===== Só no celular: em pé, ou deitado (baixo e largo). No tablet as janelas seguem como acima. ===== */
  @media (max-width: 560px), (max-height: 500px) and (min-aspect-ratio: 3/2) {
    /* Janela curta (componente Simple, com a classe `folha`): folha que sobe de baixo, da altura do conteúdo, com ou sem
       teclado. Fica presa acima do teclado (`--kb`) e só esbarra no limite quando o conteúdo não cabe: aí o meio rola e os
       botões ficam presos no pé. O fundo escurecido acima fecha ao toque. A migração usa a mesma moldura sem a classe e
       continua em tela cheia. */
    .modal[role="dialog"].simples.folha { top: auto; bottom: var(--kb, 0px); left: 0; right: 0; max-width: 560px; max-height: calc(var(--vvh, 100dvh) - 44px - env(safe-area-inset-top, 0px)); margin: 0 auto; padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); border-radius: 16px 16px 0 0; animation: chFolha .16s ease-out; }
    /* Indicador de arraste: só desenho, sem gesto. */
    .modal.simples.folha::before { content: ""; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line-strong); }
    .modal.simples.folha .modal-h { padding: 6px 56px 4px 16px; }
    .modal.simples.folha .m-x { top: -6px; right: 4px; }
    /* O campo que recebe o foco para acima dos botões presos no pé: `scroll-padding-bottom` vale para o navegador e para `revealCaret`. */
    .modal.simples.folha .modal-b { flex: 0 1 auto; padding: 4px 16px 0; scroll-padding-bottom: 72px; }
    .modal.simples.folha .modal-b:not(:has(> .oc-prev-f)) { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .modal.simples.folha .oc-prev-f { margin-top: 0; }

    /* Teclado aberto (`data-teclado`, de lib/celular.ts): o que se digita fica com a maior área possível. A folha pode subir
       quase até o topo, os pés não guardam a área segura de baixo, que fica atrás do teclado, e a janela da tarefa esconde as
       abas Detalhes e Atividade enquanto se digita. */
    :root[data-teclado] .modal[role="dialog"].simples.folha { max-height: calc(var(--vvh, 100dvh) - 8px - env(safe-area-inset-top, 0px)); }
    :root[data-teclado] .modal.simples.folha .modal-b:not(:has(> .oc-prev-f)) { padding-bottom: 16px; }
    :root[data-teclado] .oc-prev-f, :root[data-teclado] .modal-f { padding-bottom: 8px; }
    :root[data-teclado] .cm-f { padding-top: 4px; padding-bottom: 4px; }
    :root[data-teclado] .compose { padding-bottom: 6px; }
    :root[data-teclado] #rt-bar, :root[data-teclado] #rt-sug { padding-bottom: 0; }
    :root[data-teclado] .toast { bottom: calc(12px + var(--kb, 0px)); }
    :root[data-teclado] .t-abas { display: none; }
  }
}

/* ===================== CRM da HUB Projetos: o que o Click Hub não tinha =====================
   Tudo usa os tokens do Click Hub (fundo, linhas, texto, sombras, cores de situação e gradientes da marca).
   Situação da negociação, como no RD: Nova (azul da marca), Em andamento, Esfriando, Pausada, Vendida e Perdida. */
:root { --st-nova: var(--arq-a); --st-and: var(--s-info); --st-esf: var(--s-warn); --st-pau: var(--s-neutral); --st-ven: var(--s-ok); --st-per: var(--s-crit); --col-bg: color-mix(in srgb, var(--text) 4%, var(--bg)); }
html, body { height: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input, select, textarea { font: inherit; color: var(--text); }
.ws-app { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; background: var(--text); color: var(--bg); }
.selo-ex { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg-amarelo, #FFF3BF); color: #6B4E00; margin-right: 4px; white-space: nowrap; }
.selo-rt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 2px 8px 2px 6px; border-radius: 10px; margin-right: 4px; white-space: nowrap; }
.selo-rt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.selo-rt.on { color: var(--s-ok); background: color-mix(in srgb, var(--s-ok) 10%, transparent); }
.selo-rt.on::before { background: var(--s-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-ok) 25%, transparent); }
.selo-rt.lento::before { background: var(--s-warn); }
.online { display: inline-flex; align-items: center; margin-right: 6px; }
.online .av { width: 24px; height: 24px; font-size: 9px; border: 2px solid var(--app-bg, var(--bg)); }
.online .av + .av { margin-left: -6px; }
.on-mais { font-size: 11px; color: var(--muted); margin-left: 4px; }
.frame.sem-arvore { grid-template-columns: minmax(0, 1fr); }
.frame.sem-arvore > .tree { display: none; }
.side-vz { font-size: 12.5px; color: var(--faint); padding: 2px 8px 8px; margin: 0; }
.side-kpi { display: flex; flex-direction: column; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.side-kpi b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.tree .node { display: flex; align-items: center; width: 100%; text-align: left; }
.tree .node .nn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pop { font-weight: 600; color: var(--text) !important; }
.cr-pop svg { width: 12px !important; height: 12px !important; }
.loc-row #aqui { margin-left: auto; }
.tbp.ativo { background: var(--text); color: var(--bg); }
.vbar .sep { flex: 1; }
.vbar.sem-b { border: 0; padding-left: 0; padding-right: 0; }

/* pílulas de filtros ativos */
.fpills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 8px; min-height: 30px; }
.fp { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 10px; border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--text); }
.fp svg { width: 13px; height: 13px; }
.fp button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.fp button:hover { background: var(--line); color: var(--text); }
.fp button svg { width: 11px; height: 11px; }
.fp-n { padding-right: 10px; background: none; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.fp-limpar { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.fp-nota { font-size: 12px; color: var(--faint); }

/* funil (quadro) */
.board-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 16px; }
.crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: 286px; gap: 10px; align-items: start; min-height: 100%; }
.crm-col { background: var(--col-bg); border-radius: 12px; display: flex; flex-direction: column; min-height: 200px; }
.crm-col.over { outline: 2px dashed color-mix(in srgb, var(--text) 45%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.crm-ch { height: auto !important; display: flex; flex-direction: column; align-items: stretch !important; gap: 2px; padding: 10px 10px 8px 12px !important; position: sticky; top: 0; z-index: 2; background: var(--col-bg); border-radius: 12px 12px 0 0; }
.ch-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch-l b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-l .n { font-size: 12px; color: var(--faint); font-weight: 500; }
.ch-prob { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ch-v { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.ch-v .ibtn { padding: 3px; } .ch-v .ibtn svg { width: 14px; height: 14px; }
.col-est { display: grid; gap: 2px; margin: 0 8px 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg); box-shadow: var(--sh-card); font-size: 12px; }
.col-est span { display: flex; justify-content: space-between; gap: 8px; } .col-est i { font-style: normal; color: var(--muted); } .col-est b { font-variant-numeric: tabular-nums; }
.crm-col .col-b { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 8px; }
.crm-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--bg); box-shadow: var(--sh-card); cursor: pointer; text-align: left; position: relative; }
.crm-card:hover { box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .1); }
.crm-card:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.crm-card.dragging { opacity: .4; }
.crm-card .ttl { font-size: 14px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.crm-card .ctx { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.crm-card .ctx svg { width: 13px; height: 13px; flex: none; color: var(--faint); }
.cc-top { display: flex; align-items: center; gap: 6px; }
.cc-v { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-olhos { display: inline-flex; align-items: center; gap: 2px; color: var(--faint); }
.cc-olhos svg { width: 13px; height: 13px; } .cc-olhos .av { width: 18px; height: 18px; font-size: 7px; border-width: 1px; }
.cc-mid { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.cc-mid .av { width: 22px; height: 22px; font-size: 8.5px; margin-left: auto; }
.cc-prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ex { font-size: 11.5px; color: var(--faint); }
.cc-task { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 8px; margin: 0 -4px -2px; border-radius: 6px; background: var(--surface); color: var(--text); min-width: 0; }
.cc-task svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.cc-tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-td { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.cc-task.late { background: color-mix(in srgb, var(--st-per) 10%, var(--bg)); } .cc-task.late .cc-td, .cc-task.late svg { color: var(--st-per); }
.cc-task.today .cc-td { color: var(--st-and); font-weight: 600; }
.cc-criar { display: flex; align-items: center; justify-content: center; gap: 4px; height: 26px; margin: 0 -4px -2px; border-radius: 6px; border: 1px dashed var(--line-strong); font-size: 12px; color: var(--muted); }
.cc-criar:hover { border-style: solid; color: var(--text); background: var(--surface); }
.cc-criar svg { width: 13px; height: 13px; }
.st-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; --c: var(--st-and); color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--bg)); }
.st-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.st-nova { --c: var(--st-nova); } .st-esfriando { --c: var(--st-esf); } .st-pausada { --c: var(--st-pau); } .st-ganha { --c: var(--st-ven); } .st-perdida { --c: var(--st-per); }
.estrelas { display: inline-flex; align-items: center; gap: 0; color: #E8A100; flex: none; }
.estrelas .est { display: inline-grid; place-items: center; color: var(--line-strong); }
.estrelas .est.on { color: #E8A100; }
.estrelas svg { width: 13px; height: 13px; }
button.est { padding: 1px; border-radius: 4px; } button.est:hover { background: var(--tree-hover); }
.neg-chips .estrelas svg { width: 16px; height: 16px; }

/* listas (tabelas) no padrão das linhas do Click Hub */
.tbl-wrap { padding-top: 0 !important; }
.tbl-x { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { position: sticky; top: 0; z-index: 2; background: var(--bg); text-align: left; font-size: 12px; font-weight: 500; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.crm-tbl tbody tr { cursor: pointer; } .crm-tbl tbody tr:hover { background: var(--hover-row, var(--surface)); }
.crm-tbl tr.sel { background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
.tbl .r { text-align: right; } .num { font-variant-numeric: tabular-nums; }
.tbl .ck { width: 32px; } .tbl .ck input { width: 15px; height: 15px; accent-color: var(--text); }
.tbl .t-nome b { display: block; font-weight: 500; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .t-nome small { display: block; font-size: 12px; color: var(--faint); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .who { white-space: nowrap; } .tbl .who .av { display: inline-grid; vertical-align: middle; width: 22px; height: 22px; font-size: 8.5px; margin-right: 6px; }
.tbl.in th { position: static; }
.tx-task { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-task svg { width: 13px; height: 13px; color: var(--muted); flex: none; } .tx-task.late, .tx-task.late svg { color: var(--st-per); }
.tbl-more { font-size: 12.5px; color: var(--faint); padding: 12px 10px; margin: 0; }
.ch-tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: var(--surface-2); color: var(--muted); margin-left: 6px; vertical-align: 1px; }
.wa-dot svg { width: 13px; height: 13px; color: #25A244; vertical-align: -2px; }
.bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 16px 8px; padding: 6px 8px 6px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; }
.bulk > svg { width: 15px; height: 15px; } .bulk .sep { flex: 1; }
.bulk .btn { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.bulk .btn:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.bulk .btn svg { width: 14px; height: 14px; } .bulk .ibtn { color: var(--bg); }
.btn svg { width: 15px; height: 15px; }
.btn.perigo { color: var(--danger); } .btn.primary.perigo { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.primary.ganho { background: var(--st-ven); border-color: var(--st-ven); color: #fff; }
.btn.ic-only { padding: 7px 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.lk { color: var(--link, var(--text)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.crm-vazio { border: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 56px 16px; max-width: 520px; margin: 0 auto; }
.crm-vazio .ev-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.crm-vazio .ev-ic svg { width: 22px; height: 22px; } .crm-vazio h3 { margin: 4px 0 0; font-size: 16px; color: var(--text); } .crm-vazio p { margin: 0; }
.ev-b { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* a negociação, a empresa, o contato e a proposta: página inteira */
.neg-page { flex: 1; min-height: 0; overflow-y: auto; }
.neg-top { padding: 0 20px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.neg-h { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.neg-tit { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.neg-tit h1 { font-size: 22px; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.neg-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.neg-chips .chip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.neg-chips .chip svg { width: 13px; height: 13px; }
.chip.ch { color: var(--text); }
.fl-q { font-size: 12px; color: var(--muted); }
.neg-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.etapas-bar { display: flex; gap: 2px; overflow-x: auto; padding: 4px 0 2px; }
.eb { flex: 1 0 118px; display: flex; flex-direction: column; gap: 1px; padding: 6px 12px 6px 18px; background: var(--surface-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); text-align: left; min-width: 0; }
.eb:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 12px; border-radius: 6px 0 0 6px; }
.eb:hover:not([disabled]) { background: var(--line); }
.eb-n { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-d { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.eb.feita { background: color-mix(in srgb, var(--text) 16%, var(--bg)); }
.eb.on { background: var(--text); color: var(--bg); } .eb.on .eb-d { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.eb[disabled] { cursor: default; }
.neg-corpo { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; padding: 16px 20px 48px; align-items: start; }
.neg-esq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.neg-dir { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nsec { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.nsec-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.nsec-h svg { width: 13px; height: 13px; color: var(--muted); transition: transform .15s; }
.nsec.fech .nsec-h svg { transform: rotate(-90deg); } .nsec.fech .nsec-b { display: none; }
.nsec-n { font-weight: 500; color: var(--faint); }
.nsec-b { padding: 0 6px 8px; display: flex; flex-direction: column; }
.fl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 6px; }
.fl-r { font-size: 12.5px; color: var(--muted); padding-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.fl-v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 4px 6px; border-radius: 6px; font-size: 13.5px; text-align: left; min-width: 0; overflow-wrap: anywhere; }
button.fl-v:hover { background: var(--tree-hover); }
.fl-v.fixo { cursor: default; }
.fl-v small { font-size: 12px; }
.fl-v .av { width: 22px; height: 22px; font-size: 8.5px; }
.fl.ed { grid-template-columns: 1fr; } .fl.ed .fl-v { flex-direction: column; align-items: stretch; padding: 0; }
.fl.ed input, .fl.ed select { border: 1px solid var(--text); border-radius: 6px; padding: 6px 8px; background: var(--bg); width: 100%; }
.fl-ed-b { display: flex; gap: 6px; justify-content: flex-end; }
.ed-por { display: inline-flex; align-items: center; gap: 3px; } .ed-por .av { width: 16px; height: 16px; font-size: 6.5px; border-width: 1px; } .ed-por small { font-size: 10.5px; color: var(--st-and); }
.erp-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--st-ven); font-size: 13px; } .erp-ok svg { width: 14px; height: 14px; }
.ncont { padding: 8px 6px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.ncont:first-child { border-top: 0; }
.ncont-h { display: flex; align-items: center; gap: 8px; } .ncont-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ncont-h small { font-size: 12px; color: var(--faint); }
.ncont-l { display: flex; align-items: center; gap: 6px; font-size: 13px; padding-left: 32px; } .ncont-l > svg { width: 13px; height: 13px; color: var(--muted); }
.ncont-l .ibtn { padding: 2px; } .ncont-l .ibtn svg { width: 12px; height: 12px; }
.wa-lk { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: #1E8E3E; text-decoration: none; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, #25A244 12%, var(--bg)); }
.wa-lk svg { width: 13px; height: 13px; }
.sel-txt { user-select: all; }
.add-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px; font-size: 13px; color: var(--muted); border-radius: 6px; }
.add-link:hover { color: var(--text); background: var(--tree-hover); } .add-link svg { width: 14px; height: 14px; }
.ch-box { display: flex; gap: 10px; align-items: center; margin: 6px; padding: 10px; border-radius: 8px; background: var(--surface); font-size: 13px; }
.ch-box > svg { width: 18px; height: 18px; flex: none; } .ch-box div { display: flex; flex-direction: column; } .ch-box small { color: var(--muted); font-size: 12px; }
.pad { padding: 10px 8px; margin: 0; }
.nbox { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nbox h3 { font-size: 14px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } .nbox h3 svg { width: 16px; height: 16px; }
.nbox-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .nbox-h h3 { margin: 0; } .nbox-h .sep { flex: 1; }
.nbox-pe { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.prox-vz { display: flex; align-items: center; gap: 8px; padding: 12px 6px; font-size: 13px; color: var(--muted); } .prox-vz svg { width: 18px; height: 18px; flex: none; }
.ntabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px -6px 8px; overflow-x: auto; }
.ntab { height: 36px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ntab:hover { color: var(--text); } .ntab.on { color: var(--text); border-color: var(--text); }
.ntab-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; font-size: 13.5px; min-width: 0; }
.tl:hover { background: var(--surface); }
.tl-ck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; }
.tl-ck svg { width: 13px; height: 13px; } .tl-ck:hover { border-color: var(--st-ven); color: var(--st-ven); }
.tl.feita .tl-ck { background: var(--st-ven); border-color: var(--st-ven); color: #fff; }
.tl.feita .tl-t b { text-decoration: line-through; color: var(--faint); font-weight: 400; }
.tl-ic { color: var(--muted); display: grid; place-items: center; flex: none; } .tl-ic svg { width: 16px; height: 16px; }
.tl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-t b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; margin-top: 2px; }
.tl-meta .tl-neg { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.tl-neg { font-size: 12px; color: var(--muted); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-neg:hover { text-decoration: underline; }
.tl-nota { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbadge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 9px; background: var(--surface-2); color: var(--muted); white-space: nowrap; flex: none; }
.tbadge.late { background: color-mix(in srgb, var(--st-per) 14%, var(--bg)); color: var(--st-per); }
.tbadge.hoje { background: color-mix(in srgb, var(--st-and) 14%, var(--bg)); color: var(--st-and); }
.tbadge.ok { background: color-mix(in srgb, var(--st-ven) 14%, var(--bg)); color: var(--st-ven); }
.tl-d { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; } .tl-d.late { color: var(--st-per); }
.tl .avs .av { width: 22px; height: 22px; font-size: 8.5px; }
.tl { position: relative; }
.tl-acts { display: none; gap: 2px; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 2px 2px 8px; border-radius: 8px; background: var(--surface); box-shadow: -8px 0 8px var(--surface); }
.tl:hover .tl-acts, .tl:focus-within .tl-acts { display: flex; }
.tl.ed { flex-wrap: wrap; background: var(--surface); }
.tl.ed input, .tl.ed select { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--bg); }
.tl.ed #et-n { flex: 1; min-width: 180px; }
.nota-nova { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.nota-nova:focus-within { border-color: var(--text); }
.nota-nova textarea, .email-novo textarea { border: 0; resize: vertical; outline: none; background: transparent; font-size: 14px; padding: 4px; min-height: 60px; }
.nn-tipos { display: flex; gap: 4px; flex-wrap: wrap; }
.nn-t { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; color: var(--muted); }
.nn-t svg { width: 13px; height: 13px; } .nn-t:hover { background: var(--tree-hover); } .nn-t.on { background: var(--text); color: var(--bg); }
.nn-b { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.hist-f { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hi { display: flex; gap: 10px; padding: 8px 4px; position: relative; }
.hi::before { content: ""; position: absolute; left: 17px; top: 34px; bottom: -8px; width: 1px; background: var(--line); }
.hi:last-child::before { display: none; }
.hi-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; position: relative; z-index: 1; }
.hi-ic svg { width: 14px; height: 14px; }
.hi-whatsapp .hi-ic { color: #1E8E3E; } .hi-email .hi-ic { color: var(--st-and); } .hi-proposta .hi-ic { color: var(--st-nova); }
.hi-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.hi-b p { margin: 0; } .hi-b small { font-size: 12px; color: var(--faint); }
.hi-nota { background: var(--surface); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.hi-acts { position: absolute; right: 6px; top: 6px; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg); box-shadow: var(--sh-card); }
.hi:hover .hi-acts, .hi-acts:focus-within { display: flex; }
.hi-ed textarea { width: 100%; border: 1px solid var(--text); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--text); resize: vertical; }
.hi-ed-b { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
@media (hover: none) { .hi-acts { display: flex; position: static; box-shadow: none; align-self: flex-start; } }
.email-novo { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.em-l { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.em-l label { color: var(--muted); } .em-l input, .em-l select { border: 0; background: transparent; padding: 4px 0; outline: none; min-width: 0; }
.em-nota { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-right: auto; } .em-nota svg { width: 14px; height: 14px; flex: none; }
.sub-h { font-size: 13px; margin: 10px 0 2px; }
.em-it { padding: 8px; border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.em-it small { color: var(--faint); } .em-it p { margin: 2px 0 0; color: var(--muted); } .em-it .ok { color: var(--st-ven); }
.tbl.itens td { padding: 6px 8px; }
.tbl.itens td small { display: block; font-size: 11.5px; color: var(--faint); }
.area { display: inline-flex !important; align-items: center; gap: 5px; } .area::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--a1); }
.it-in { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; width: 64px; background: var(--bg); text-align: right; font-variant-numeric: tabular-nums; }
.it-in.w { width: 110px; } select.it-in { width: auto; text-align: left; }
.itens-pe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .itens-pe .sep { flex: 1; }
.tot { display: flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; } .tot b { color: var(--text); font-variant-numeric: tabular-nums; } .tot .t-tot b { font-size: 15px; }
.prop-it { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-align: left; width: 100%; }
.prop-it:hover { background: var(--surface); } .prop-it > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.prop-it > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .prop-it small { font-size: 12px; color: var(--faint); }
.pst { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.pst-enviada { color: var(--st-and); background: color-mix(in srgb, var(--st-and) 12%, var(--bg)); }
.pst-lida { color: var(--st-esf); background: color-mix(in srgb, var(--st-esf) 12%, var(--bg)); }
.pst-aceita { color: var(--st-ven); background: color-mix(in srgb, var(--st-ven) 12%, var(--bg)); }
.pst-recusada { color: var(--st-per); background: color-mix(in srgb, var(--st-per) 12%, var(--bg)); }
.drop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 13px; cursor: pointer; }
.drop:hover { border-color: var(--text); color: var(--text); } .drop svg { width: 18px; height: 18px; }
.arq { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; } .arq:hover { background: var(--surface); }
.arq > svg { width: 18px; height: 18px; color: var(--muted); } .arq > div { flex: 1; display: flex; flex-direction: column; } .arq small { color: var(--faint); font-size: 12px; }
.aqui { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--st-and); padding: 3px 10px 3px 4px; border-radius: 14px; background: color-mix(in srgb, var(--st-and) 10%, var(--bg)); }
.aqui .av { width: 22px; height: 22px; font-size: 8.5px; } .aqui .av + .av { margin-left: -8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kpis.duo { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpis.seis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); text-align: left; min-width: 0; --c: var(--text); }
button.kpi:hover { box-shadow: var(--sh-card); }
.kpi-r { font-size: 12.5px; color: var(--muted); } .kpi-v { font-size: 22px; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; } .kpi-s { font-size: 12px; color: var(--faint); }
.kpi.ok { --c: var(--st-ven); } .kpi.late { --c: var(--st-per); } .kpi.warn { --c: var(--st-esf); } .kpi.azul { --c: var(--st-and); }
.kpi.area-amb { border-top: 3px solid var(--amb-a); } .kpi.area-arq { border-top: 3px solid var(--arq-a); } .kpi.area-top { border-top: 3px solid var(--top-a); }

/* início */
.ini { max-width: 1200px; gap: 18px !important; }
.ini-hi h1 { font-size: 24px; margin: 0; } .ini-hi p { margin: 2px 0 0; color: var(--muted); }
.ini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.mini-neg { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; text-align: left; width: 100%; min-width: 0; }
.mini-neg:hover, .mini-neg.on { background: var(--surface); }
.mn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mn-t b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-t small { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-d { font-size: 12.5px; color: var(--muted); white-space: nowrap; flex: none; } .mn-d.warn { color: var(--st-esf); }
.mini-funil { display: flex; flex-direction: column; gap: 4px; }
.mf { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 30px 80px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; text-align: left; }
.mf:hover { background: var(--surface); }
.mf-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.mf-b { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .mf-b i { display: block; height: 100%; background: var(--text); border-radius: 4px; }
.mf-q { text-align: right; font-variant-numeric: tabular-nums; } .mf-v { text-align: right; color: var(--muted); }
.un-it { display: flex; align-items: center; gap: 10px; padding: 8px 6px; } .un-it > svg { width: 16px; height: 16px; color: var(--muted); }
.un-it div { display: flex; flex-direction: column; } .un-it small { font-size: 12px; color: var(--faint); }
.seg-tabs { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--surface-2); gap: 2px; flex-wrap: wrap; }
.seg-tabs button { padding: 5px 12px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.seg-tabs button.on { background: var(--bg); color: var(--text); box-shadow: var(--sh-card); font-weight: 500; }
.rst { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 6px 3px 9px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.rst svg { width: 11px; height: 11px; }
.rst-realizada, .lead-pronto { background: color-mix(in srgb, var(--st-ven) 12%, var(--bg)); color: var(--st-ven); }
.rst-naoocorreu, .lead-descartado { background: color-mix(in srgb, var(--st-per) 12%, var(--bg)); color: var(--st-per); }
.lead-qualificacao { background: color-mix(in srgb, var(--st-and) 12%, var(--bg)); color: var(--st-and); }

/* gavetas, janelas e menus */
.gav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 44; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); z-index: 45; background: var(--bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); animation: gavEntra .18s cubic-bezier(.2, .8, .2, 1); }
.gaveta.g-filtros, .gaveta.g-atalho { width: min(420px, 100vw); }
@keyframes gavEntra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gaveta { animation: none; } }
.gav-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--line); } .gav-h h2 { font-size: 17px; margin: 0; flex: 1; }
.gav-b { flex: 1; overflow-y: auto; padding: 14px 20px 24px; }
.gav-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-wrap: wrap; }
.gaveta .form, .crm-modal .form { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.gaveta .form > label, .crm-modal .form > label, .dupla label, .tres label { color: var(--muted); font-size: 12.5px; font-weight: 500; margin-top: 6px; }
.gaveta input:not([type="checkbox"]):not([type="radio"]), .gaveta select, .gaveta textarea, .crm-modal input:not([type="checkbox"]):not([type="radio"]), .crm-modal select, .crm-modal textarea { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--bg); width: 100%; min-width: 0; font-size: 14px; }
.gaveta input:focus, .gaveta select:focus, .gaveta textarea:focus, .crm-modal input:focus, .crm-modal select:focus, .crm-modal textarea:focus { outline: none; border-color: var(--text); }
.gav-sec { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ajuda { font-size: 12px; color: var(--faint); margin: 0; }
.obr { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: none; }
.erro { font-size: 13px; color: var(--danger); background: var(--danger-bg); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; }
.aviso { font-size: 13px; color: var(--warn); margin: 8px 0 0; }
.dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .dupla > div, .tres > div { display: flex; flex-direction: column; gap: 6px; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.in-btn { display: flex; gap: 6px; } .in-btn input { flex: 1; }
.ck-l { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13.5px !important; color: var(--text) !important; font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.ck-l input { accent-color: var(--text); width: 15px; height: 15px; }
.form input[type="radio"], .form input[type="checkbox"] { width: auto; min-width: 0; padding: 0; border: 0; flex: none; accent-color: var(--text); }
.ck-l .av { width: 22px; height: 22px; font-size: 8.5px; }
.resp-l, .pred-l, .qual-l { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.tipos-t { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.tt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tt svg { width: 18px; height: 18px; } .tt:hover { color: var(--text); } .tt.on { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.atalhos-d { display: flex; gap: 6px; flex-wrap: wrap; } .atalhos-d .chip { cursor: pointer; } .atalhos-d .chip:hover { color: var(--text); border-color: var(--text); }
.estrelas-in { display: flex; align-items: center; gap: 2px; color: var(--line-strong); }
.estrelas-in .est.on { color: #E8A100; } .estrelas-in svg { width: 20px; height: 20px; } .estrelas-in .faint { margin-left: 8px; font-size: 13px; }
.crm-modal { width: min(560px, calc(100% - 32px)); max-height: 84vh; display: flex; flex-direction: column; }
.crm-modal .modal-h h2 { font-size: 18px; margin: 0; }
.crm-modal.m-busca { width: min(640px, calc(100% - 32px)); top: 12vh; padding: 0; }
.seg2 { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } .seg2 label { display: flex; align-items: center; gap: 8px; }
.mv-val { margin: 0; font-size: 14px; } .mv-val .lk { font-size: 12.5px; margin-left: 6px; }
.erp-box { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.erp-ck { display: flex; align-items: center; gap: 8px; font-size: 14px; } .erp-ck input { width: 16px; height: 16px; accent-color: var(--st-ven); }
.erp-box p { margin: 0; font-size: 12.5px; }
.erp-dl { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 10px; margin: 4px 0 0; font-size: 13px; } .erp-dl dt { color: var(--muted); } .erp-dl dd { margin: 0; overflow-wrap: anywhere; }
.crm-pop { max-width: none; }
.crm-pop .pop-i small { margin-left: auto; color: var(--faint); font-size: 12px; flex: none; }
.pi-ck { width: 15px !important; height: 15px !important; margin-left: auto; }
.pop-i.cur { font-weight: 600; }
.pop-i.perigo { color: var(--danger); }
.pi-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--a1); flex: none; }
.p-add-produto .pop-i > span:not(.pi-dot) { white-space: normal; }
.fl-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fl-h .lk { font-size: 12px; text-transform: none; }
.notif-l { max-height: 330px; overflow-y: auto; }
.pop-i.nt { align-items: flex-start; white-space: normal; } .pop-i.nt > svg { margin-top: 2px; color: var(--muted); }
.pop-i.nt.nova { background: color-mix(in srgb, var(--st-and) 7%, var(--bg)); }
.nt-b { display: flex; flex-direction: column; gap: 2px; white-space: normal !important; } .nt-b > span { font-size: 13px; line-height: 1.35; } .nt-b small { font-size: 12px; color: var(--faint); }
.vendi { display: flex; flex-direction: column; margin: 0 8px 6px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--st-ven) 9%, var(--bg)); font-size: 12px; color: var(--muted); }
.vendi b { font-size: 16px; color: var(--st-ven); font-variant-numeric: tabular-nums; }
.pop-who small { display: block; font-size: 12px; }
.pop-seg { display: flex; gap: 4px; padding: 2px 8px 4px; } .pop-seg button { flex: 1; padding: 5px 6px; border-radius: 6px; font-size: 12.5px; border: 1px solid var(--line); } .pop-seg button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.colinfo { display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 4px 16px 6px; font-size: 13px; } .colinfo dt { color: var(--muted); } .colinfo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pop-nota { font-size: 12px; color: var(--faint); padding: 6px 16px 4px; line-height: 1.4; }
.bus-q { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bus-q svg { width: 18px; height: 18px; color: var(--muted); } .bus-q input { flex: 1; border: 0 !important; outline: none; font-size: 16px; padding: 4px 0 !important; background: transparent; }
.bus-q kbd { font: inherit; font-size: 11.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.bus-r { max-height: 60vh; overflow-y: auto; padding: 6px 8px 10px; }
.bus-h { font-size: 12px; font-weight: 500; color: var(--faint); padding: 8px 8px 4px; }
.bus-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 8px; text-align: left; } .bus-i:hover, .bus-i:focus-visible { background: var(--surface); }
.bus-i > svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .bus-i span { display: flex; flex-direction: column; min-width: 0; } .bus-i b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bus-i small { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; text-transform: capitalize; } .at-cab .sep { flex: 1; }
.at-sem { display: flex; align-items: center; gap: 2px; margin-bottom: 12px; }
.at-d { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 8px; position: relative; }
.at-d small { font-size: 10.5px; color: var(--faint); font-weight: 600; } .at-d b { font-size: 15px; font-variant-numeric: tabular-nums; }
.at-d i { position: absolute; top: 2px; right: 4px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--surface-2); font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 14px; color: var(--muted); }
.at-d:hover { background: var(--surface); } .at-d.hoje b { color: var(--st-and); } .at-d.on { background: var(--text); } .at-d.on small, .at-d.on b { color: var(--bg); }
.at-lista { display: flex; flex-direction: column; gap: 2px; }

#toast .toast { display: inline-flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); z-index: 80; }
#toast .toast > svg { width: 16px; height: 16px; flex: none; }
#toast .toast button { margin-left: 6px; font-weight: 600; white-space: nowrap; }

/* propostas */
.prop-corpo { display: grid; grid-template-columns: minmax(0, 820px) minmax(240px, 300px); gap: 20px; padding: 18px 20px 60px; justify-content: center; align-items: start; }
.prop-lado { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.como { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.sel-m { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--bg); }
.app.publica { display: block; overflow: auto; background: var(--surface); }
.pub { max-width: 880px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 14px; }
.pub-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-amarelo, #FFF3BF); color: #6B4E00; font-size: 12.5px; flex-wrap: wrap; } .pub-aviso { flex: 1; min-width: 200px; }
.pub-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pub-top h1 { font-size: 22px; margin: 0; } .pub-top .sep { flex: 1; }
.pub-ok { display: flex; align-items: center; gap: 8px; color: var(--st-ven); margin: 0; } .pub-ok svg { width: 18px; height: 18px; }
.pub-aceite { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--bg); } .pub-aceite h3 { margin: 0 0 6px; }
.pub-aceite .form { display: flex; flex-direction: column; gap: 6px; } .pub-aceite input:not([type="checkbox"]) { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--bg); }

/* análises */
.rel-f { flex-wrap: wrap; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; align-items: start; } .rel-grid .span2 { grid-column: 1 / -1; }
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hb { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.hb-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.hb-t { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; } .hb-t i { display: block; height: 100%; border-radius: 5px; }
.hb-v { text-align: right; white-space: nowrap; } .hb-v small { color: var(--faint); font-size: 11.5px; }
.vbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; padding-top: 18px; }
.vb { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.vb-t { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; } .vb-t i { display: block; width: 100%; background: var(--st-ven); border-radius: 4px 4px 0 0; }
.vb-v { font-size: 10.5px; color: var(--muted); white-space: nowrap; min-height: 14px; visibility: hidden; } .vb.rot .vb-v, .vb:hover .vb-v { visibility: visible; } .vb-r { font-size: 11px; color: var(--faint); }
.rel-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; font-size: 13px; color: var(--muted); } .rel-mini span { display: flex; flex-direction: column; } .rel-mini b { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.conv { display: flex; flex-direction: column; gap: 6px; }
.cv { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 50px 130px 120px; gap: 10px; align-items: center; font-size: 13px; }
.cv-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-b { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .cv-b i { display: block; height: 100%; background: var(--st-and); border-radius: 4px; }
.cv.ganho .cv-b i { background: var(--st-ven); } .cv-q { text-align: right; } .cv-p, .cv-t { font-size: 12px; color: var(--muted); }
.meta-b { display: inline-block; width: 140px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 8px; } .meta-b i { display: block; height: 100%; background: var(--st-and); } .meta-b i.ok { background: var(--st-ven); }
td.ok { color: var(--st-ven); font-weight: 600; }
.live-page { flex: 1; overflow: auto; padding: 20px 24px 40px; background: #0d0f12; color: #f2f2f0; display: flex; flex-direction: column; gap: 18px; }
.lv-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .lv-top h1 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0; } .lv-top h1 svg { width: 24px; height: 24px; } .lv-top .faint { color: #9a9a94; } .lv-top .sep { flex: 1; } .lv-top .btn { background: #1d2025; color: #f2f2f0; border-color: #33363c; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lv-c { background: #171a1f; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .lv-c > span { color: #9a9a94; font-size: 14px; } .lv-c b { font-size: 34px; font-variant-numeric: tabular-nums; } .lv-c small { color: #7fd1a3; font-size: 13px; }
.lv-c.big { grid-column: span 2; } .lv-c.big b { font-size: 48px; color: #7fd1a3; }
.lv-c.rank b { font-size: 16px; } .lv-p { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .lv-p > span:not(.av) { flex: 1; } .lv-p .av { width: 30px; height: 30px; font-size: 11px; } .lv-p.top b { color: #ffd166; } .lv-p .av { border-color: #171a1f; }

/* configurações */
.cfg-pg { gap: 14px; }
.cfg-busca { width: min(420px, 100%); height: 34px; }
.cfg-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cfh-g { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; } .cfh-g h3 { font-size: 12px; font-weight: 600; color: var(--faint); margin: 2px 6px 6px; text-transform: uppercase; letter-spacing: .05em; }
.cfh-i { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 8px; text-align: left; } .cfh-i:hover { background: var(--surface); } .cfh-i > svg { width: 18px; height: 18px; color: var(--muted); flex: none; margin-top: 1px; }
.cfh-i span { display: flex; flex-direction: column; } .cfh-i b { font-weight: 500; font-size: 14px; } .cfh-i small { font-size: 12.5px; color: var(--faint); }
.et-linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 0; overflow-x: auto; padding: 8px 2px 4px; position: relative; }
.et-p { display: flex; flex-direction: column; gap: 3px; padding: 26px 10px 10px; text-align: left; border-radius: 8px; position: relative; min-width: 0; }
.et-p::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--line); }
.et-p:first-child::before { left: 20px; } .et-p:last-child::before { right: calc(100% - 20px); }
button.et-p:hover { background: var(--surface); }
.et-dot { position: absolute; top: 4px; left: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; display: grid; place-items: center; z-index: 1; }
.et-p b { font-size: 13.5px; } .et-p small { font-size: 12px; color: var(--muted); } .et-p small.obr { color: var(--st-esf); } .et-obj { color: var(--faint) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.funil-cfg .nbox-h h3 { font-size: 15px; }
.matriz th, .matriz td { white-space: normal; font-size: 12.5px; } .matriz td small { display: block; color: var(--faint); font-size: 11.5px; } .matriz .c { text-align: center; } .matriz svg.ok { width: 15px; height: 15px; color: var(--st-ven); }
.switch-s { position: relative; display: inline-flex; flex: none; } .switch-s input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-s i { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); position: relative; transition: background .15s; }
.switch-s i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); transition: transform .15s; }
.switch-s input:checked + i { background: var(--text); border-color: var(--text); } .switch-s input:checked + i::after { transform: translateX(14px); background: var(--bg); }
.switch-s input:focus-visible + i { outline: 2px solid var(--text); outline-offset: 2px; }
.auto-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.auto-c { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .auto-c.on { border-color: var(--text); }
.auto-h { display: flex; align-items: center; gap: 8px; } .auto-h > svg { width: 16px; height: 16px; } .auto-h .sep { flex: 1; } .auto-c p { margin: 0; font-size: 13px; color: var(--muted); }
.ls-i { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 6px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; } .ls-i:last-of-type { border-bottom: 0; }
.mod-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mod-c { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .mod-c i { height: 6px; margin: 0 -12px 8px; background: var(--pc); } .mod-c small { color: var(--faint); font-size: 12px; }
.passos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; counter-reset: p; }
.passos li { counter-increment: p; padding: 8px 10px; border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; font-size: 13px; } .passos li::before { content: counter(p); font-size: 11px; font-weight: 700; color: var(--faint); } .passos li.on { background: var(--text); color: var(--bg); } .passos li.on::before, .passos li.on small { color: color-mix(in srgb, var(--bg) 70%, transparent); } .passos small { font-size: 11.5px; color: var(--faint); }
.int-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.int-c { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; } .int-c > svg { width: 20px; height: 20px; } .int-c p { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .int-c .tbadge { grid-column: 2; justify-self: start; margin-top: 6px; white-space: normal; max-width: 100%; line-height: 1.35; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ev-tags code { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); } .pref span:first-child { display: flex; flex-direction: column; } .pref small { font-size: 12.5px; }
.lix-i { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); } .lix-i > svg { width: 16px; height: 16px; color: var(--muted); } .lix-i div { display: flex; flex-direction: column; } .lix-i small { color: var(--faint); font-size: 12px; } .lix-i .sep { flex: 1; }
.area-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; } .area-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--a1); }

/* tela pequena: a barra lateral vira gaveta (regra do Click Hub) e as colunas da negociação empilham */
@media (max-width: 860px) {
  .neg-corpo { grid-template-columns: minmax(0, 1fr); padding: 12px max(12px, env(safe-area-inset-right, 0px)) 40px max(12px, env(safe-area-inset-left, 0px)); }
  .neg-top { padding: 0 max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); }
  .neg-tit h1 { font-size: 19px; }
  .neg-acoes { width: 100%; } .neg-acoes .btn:not(.ic-only) { flex: 1; justify-content: center; }
  .prop-corpo { grid-template-columns: minmax(0, 1fr); padding: 12px; } .prop-lado { position: static; }

  .crm-board { grid-auto-columns: min(82vw, 286px); }
  .board-wrap { padding: 0 12px 12px; scroll-snap-type: x proximity; } .crm-col { scroll-snap-align: start; }
  .fpills { padding: 0 12px 8px; }
  .tbl th:nth-child(n+5), .tbl td:nth-child(n+5) { display: none; }
  .tbl.itens th:nth-child(n+5), .tbl.itens td:nth-child(n+5) { display: table-cell; }
  .tl-acts { display: flex; position: static; transform: none; box-shadow: none; background: none; padding: 0; }
  .cv { grid-template-columns: minmax(0, 1fr) 40px 90px; } .cv-b, .cv-t { display: none; }
  .hb { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
  .lv-c.big { grid-column: auto; } .lv-c.big b { font-size: 36px; }
  .selo-rt { font-size: 0; padding: 0; gap: 0; } .selo-rt::before { width: 9px; height: 9px; }
  .selo-ex, .online { display: none; }
  .ini-grid, .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .gav-f .btn { flex: 1; justify-content: center; }
  .loc-sub { display: none; }
}
@media (hover: none) { .tl-acts { display: flex; position: static; transform: none; box-shadow: none; background: none; padding: 0; } }

/* pedidos do Click Hub (time técnico → comercial) */
.ch-mini { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 10px; font-size: 11px; font-weight: 600; background: #000; color: #fff; white-space: nowrap; }
.ch-mini svg { width: 11px; height: 11px; }
.pedido-box { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.ch-selo { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 6px; border-radius: 11px; background: #000; color: #fff; font-size: 12px; font-weight: 600; }
.ch-selo svg { width: 13px; height: 13px; }
.ped-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 4px 0 6px; font-size: 13.5px; }
.ped-dl dt { color: var(--muted); font-size: 12.5px; padding-top: 1px; } .ped-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .ped-dl dd.late { color: var(--st-per); }
.ped-esc { white-space: pre-wrap; background: var(--surface); border-radius: 8px; padding: 8px 10px; }
.ctr-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; color: var(--cc); background: color-mix(in srgb, var(--cc) 13%, var(--bg)); white-space: nowrap; }
.conversa { border-top: 1px solid var(--line-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.conversa h4 { margin: 0; font-size: 13px; }
.msg { padding: 8px 10px; border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; max-width: 92%; font-size: 13.5px; }
.msg small { font-size: 11.5px; color: var(--faint); } .msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.comercial { align-self: flex-end; background: color-mix(in srgb, var(--st-and) 9%, var(--bg)); }
.msg-novo { display: flex; gap: 8px; align-items: flex-end; } .msg-novo textarea { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); resize: vertical; font-size: 13.5px; min-width: 0; }
.msg-novo textarea:focus { outline: none; border-color: var(--text); }
.crm-modal.m-pedido-ch, .crm-modal.m-ver-ch { width: min(660px, calc(100% - 32px)); }
.ch-h { gap: 6px !important; } .ch-h h2 { font-size: 19px !important; }
.ch-app { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ch-app .ws-logo { width: 20px; height: 20px; }
.ch-crumb { font-size: 12.5px; color: var(--muted); }
.ch-sec { display: flex; flex-direction: column; gap: 8px; } .ch-sec h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0; } .ch-sec h3 svg { width: 16px; height: 16px; }
.ch-trilha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-trilha li { display: flex; gap: 10px; padding: 0 0 12px; position: relative; }
.ch-trilha li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.ch-trilha li:last-child::before { display: none; }
.ch-trilha i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); display: grid; place-items: center; flex: none; z-index: 1; }
.ch-trilha li.ok i { background: var(--st-ven); border-color: var(--st-ven); color: #fff; } .ch-trilha i svg { width: 12px; height: 12px; }
.ch-trilha li.ok::before { background: color-mix(in srgb, var(--st-ven) 50%, var(--line)); }
.ch-trilha div { display: flex; flex-direction: column; } .ch-trilha b { font-size: 13.5px; font-weight: 600; } .ch-trilha li:not(.ok) b { color: var(--muted); font-weight: 500; } .ch-trilha small { font-size: 12.5px; color: var(--muted); }
.ch-pe { margin-right: auto; font-size: 12px; align-self: center; }
.ped-cfg { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; font-size: 13.5px; } .ped-cfg > label:not(.ck-l) { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; }
.ped-cfg select.it-in { max-width: 420px; padding: 6px 8px; } .ped-pz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text); font-size: 13.5px; } .ped-pz .it-in { width: 60px; }
@media (max-width: 860px) { .ped-dl { grid-template-columns: minmax(0, 1fr); } .ped-dl dt { padding-top: 6px; } }

/* escopo técnico: macroatividades com as microatividades dentro, e as horas somando */
.esc-box .who { display: flex; align-items: center; gap: 6px; } .esc-box .who .av { width: 22px; height: 22px; font-size: 8.5px; }
.esc-box.vazio p { margin: 0; font-size: 13px; }
.esc-tab { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.esc-ma { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.esc-mh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .esc-mh b { flex: 1; min-width: 0; font-weight: 600; } .esc-mh .num { font-weight: 600; }
.esc-mi { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 18px; font-size: 13px; color: var(--muted); } .esc-mi span:first-child { flex: 1; min-width: 0; } .esc-mi .num { color: var(--text); }
.esc-tot { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface); font-size: 13.5px; } .esc-tot b { font-size: 15px; }
.esc-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .esc-acoes .sep { flex: 1; } .esc-acoes .faint { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; } .esc-acoes .faint svg { width: 13px; height: 13px; }
.tec-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.tec { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.tec input { position: absolute; opacity: 0; pointer-events: none; } .tec .av { width: 24px; height: 24px; font-size: 9px; } .tec.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.tec:focus-within { outline: 2px solid var(--text); outline-offset: 1px; }
.crm-modal.m-escopo-ch { width: min(760px, calc(100% - 32px)); }
.esc-ped { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; } .esc-ped p { margin: 0; white-space: pre-wrap; } .esc-rev { color: var(--st-esf); }
.esc-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; } .esc-cab h3 { margin: 0; font-size: 14px; } .esc-cab .sep { flex: 1; }
.esc-total { font-size: 13px; color: var(--muted); } .esc-total b { font-size: 16px; color: var(--text); margin-left: 4px; }
.esc-lista { display: flex; flex-direction: column; gap: 10px; }
.esc-ma.ed { padding: 10px; gap: 6px; background: var(--bg); }
.esc-num { width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.esc-in { border: 1px solid transparent; border-radius: 6px; padding: 6px 8px !important; background: transparent; min-width: 0; font-size: 13.5px; }
.esc-in:hover:not([disabled]) { border-color: var(--line); } .esc-in:focus { outline: none; border-color: var(--text) !important; background: var(--bg); }
.esc-mn { flex: 1; font-weight: 600; font-size: 14px !important; }
.esc-mhs { font-weight: 700; font-size: 14px; min-width: 56px; text-align: right; }
.esc-mi.ed { padding: 0 0 0 30px; color: var(--text); } .esc-mi.ed > .esc-in:first-of-type { flex: 1; }
.esc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; }
.esc-h { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: 12.5px; } .esc-h input { width: 74px !important; text-align: right; border-color: var(--line) !important; }
.esc-add { margin-left: 24px; font-size: 12.5px; }
.ue-prev { margin-top: 8px; }
@media (max-width: 860px) { .esc-mi.ed { padding-left: 8px; flex-wrap: wrap; } .esc-mi.ed > .esc-in:first-of-type { flex: 1 1 100%; } }

/* escopo do técnico no formato da planilha "Escopo de horas" */
.esc-sec { display: flex; flex-direction: column; gap: 6px; } .esc-sec h3 { margin: 0; font-size: 14px; }
.esc-txt { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); font-size: 13.5px; resize: vertical; }
.esc-txt:focus { outline: none; border-color: var(--text); }
.esc-tecs { display: inline-flex; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } .esc-tecs label { display: inline-flex; align-items: center; gap: 5px; margin: 0; } .esc-tecs select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--bg); font-size: 12.5px; max-width: 150px; }
.esc-modelos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; } .esc-modelos .chip { cursor: pointer; } .esc-modelos .chip:hover { border-color: var(--text); color: var(--text); }
.esc-mh .esc-et { width: 92px; flex: none; border-color: var(--line) !important; } .esc-mh .esc-ent { width: 170px; flex: none; border-color: var(--line) !important; }
.esc-mi.ed, .esc-mi.hd { display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px 58px minmax(0, .8fr) 26px; gap: 6px; align-items: center; padding: 0 0 0 30px; }
.esc-mi.hd { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; } .esc-hc { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-hi { width: 100% !important; text-align: right; border-color: var(--line) !important; padding: 5px 6px !important; }
.esc-ob { font-size: 12.5px !important; color: var(--muted); }
.esc-soma { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; } .esc-soma > span:first-child { flex: 1; font-weight: 600; } .esc-soma span:not(:first-child) { display: flex; flex-direction: column; align-items: flex-end; } .esc-soma small { font-size: 11px; color: var(--muted); } .esc-soma b { font-size: 15px; } .esc-soma .s-tot b { font-size: 18px; }
.esc-t td, .esc-t th { font-size: 12.5px; } .esc-t .esc-et td { background: var(--surface); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .esc-t .esc-et .num { float: right; color: var(--text); }
.esc-t .esc-mt td { padding-top: 9px; } .esc-t .esc-mt small { color: var(--faint); font-weight: 400; } .esc-t .esc-mit td:first-child { padding-left: 22px; color: var(--muted); }
.esc-obs { display: block; font-size: 11.5px; color: var(--st-esf); }
.esc-t .esc-tt td { border-top: 2px solid var(--line); font-weight: 600; }
.esc-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 6px 0; } .esc-blocos h4 { margin: 0 0 4px; font-size: 13px; } .esc-blocos ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.esc-hh { font-weight: 700; font-size: 13px; }
@media (max-width: 860px) { .esc-mi.ed, .esc-mi.hd { grid-template-columns: minmax(0, 1fr) 52px 52px 52px 26px; padding-left: 4px; } .esc-ob, .esc-mi.hd > span:nth-child(5) { grid-column: 1 / -1; } .esc-mh { flex-wrap: wrap; } .esc-mh .esc-ent, .esc-mh .esc-et { width: auto; flex: 1; } }

/* composição do preço, viabilidade e histórico do mesmo serviço (só o comercial vê) */
.viab, .hist { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.viab-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .viab-h h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; } .viab-h h4 svg { width: 16px; height: 16px; } .viab-h .faint { font-size: 12px; }
.hist-sel { margin-left: auto; max-width: 340px; padding: 5px 8px; }
.viab-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.orc-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); min-width: 0; } .orc-f .it-in { width: 100%; text-align: left; } .orc-f.w { grid-column: 1 / -1; }
.viab-t td { padding: 5px 10px; font-size: 13px; } .viab-t tr.v-sub td { font-weight: 600; } .viab-t tr.v-tt td { font-weight: 700; background: var(--surface); }
.viab-r { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface); } .viab-r > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.viab-r div { display: flex; flex-direction: column; gap: 2px; } .viab-r small { font-size: 12.5px; color: var(--muted); }
.viab-r.ok { background: color-mix(in srgb, var(--st-ven) 10%, var(--bg)); } .viab-r.ok > svg, .viab-r.ok b { color: var(--st-ven); }
.viab-r.alerta { background: color-mix(in srgb, var(--st-per) 9%, var(--bg)); } .viab-r.alerta > svg, .viab-r.alerta b { color: var(--st-per); }
.viab-just textarea { text-align: left; }
.viab-dica summary { cursor: pointer; font-size: 13px; font-weight: 600; } .viab-dica ol { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.hist-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .hist-k .kpi { padding: 8px 12px; } .hist-k .kpi-v { font-size: 18px; }
.hist-cmp { margin: 0; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--surface); } .hist-cmp.late { color: var(--st-per); background: color-mix(in srgb, var(--st-per) 8%, var(--bg)); } .hist-cmp.ok { color: var(--st-ven); }
.hist-b { display: flex; gap: 6px; flex-wrap: wrap; }
.hist-t tbody tr { cursor: pointer; } .hist-t tbody tr:hover { background: var(--surface); }
.ue-l { display: flex; flex-direction: column; gap: 8px; }
.ue-et { display: grid; grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 1fr); gap: 8px 12px; align-items: end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ue-n { display: flex; flex-direction: column; gap: 3px; } .ue-n .it-in { width: 100%; text-align: left; font-weight: 600; }
.ue-luc { grid-column: 1 / -1; font-size: 12.5px; } .ue-luc.ok { color: var(--st-ven); } .ue-luc.late { color: var(--st-per); }
.ue-hist { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .ue-et { grid-template-columns: minmax(0, 1fr); } .hist-sel { margin-left: 0; max-width: 100%; } }

/* proposta no modelo da HUB: capa preta com a marca, títulos em caixa alta espaçada, rodapé escuro */

/* dentro da janela, os campos do escopo não esticam a 100% (regra geral das janelas do CRM) */
.crm-modal .esc-mh input, .crm-modal .esc-mh select, .crm-modal .esc-tecs select { width: auto; }
.crm-modal .esc-mh .esc-mn { flex: 1 1 200px; min-width: 120px; }
.crm-modal .esc-mh .esc-et { width: 96px; flex: none; }
.crm-modal .esc-mh .esc-ent { width: 180px; flex: 0 1 180px; min-width: 110px; }
.crm-modal .esc-tecs select { max-width: 150px; padding: 4px 6px; font-size: 12.5px; }
.crm-modal .esc-mi input { width: 100%; }
.crm-modal .ue-et input, .crm-modal .ue-et select { width: 100%; }
.tbl.itens td small.area { display: flex !important; margin-top: 2px; }

/* repasse de telas: classes que o CSS do Click Hub também usa */
:root[data-theme="dark"] .btn.primary.ganho { background: var(--st-ven); border-color: var(--st-ven); color: #fff; }
:root[data-theme="dark"] .btn.primary.perigo { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary.ganho { background: var(--st-ven); border-color: var(--st-ven); color: #fff; } :root:not([data-theme="light"]) .btn.primary.perigo { background: var(--danger); border-color: var(--danger); color: #fff; } }
.pop-seg button { white-space: nowrap; height: auto; min-height: 26px; }
.pop-i > span.pi-dot { flex: none !important; }
.pop-i > span:has(> .av) { display: flex; align-items: center; gap: 8px; }
.tbl td.nw { white-space: nowrap; }
.ped-tipos { table-layout: fixed; } .ped-tipos th:first-child { width: 40%; } .ped-tipos select.it-in { width: 100%; max-width: 100%; }
.lv-c small.cai { color: #f28b82; }
.cfg-busca { flex: none !important; }
.it-in.q-leg { width: 200px; text-align: left; }
.tx-1 { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl td.c-emp { min-width: 150px; }
.tbl.in .t-nome b, .tbl.in .t-nome small { max-width: 260px; }
@media (max-width: 860px) {
  .rail-btn[data-curto]::after { content: attr(data-curto); }
  .content.tbl-wrap { overflow-x: auto; }
  .neg-acoes .btn:not(.ic-only) { flex: 1 1 auto; }
  .tl-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .esc-cab .sep { display: none; } .esc-tecs { width: 100%; }
  .tl .tl-ic, .tl > .avs { display: none; }
  .tl-ck { border: 0 !important; background: none !important; position: relative; }
  .tl-ck::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .tl.feita .tl-ck::before { background: var(--st-ven); border-color: var(--st-ven); }
  .tl-ck svg { position: relative; z-index: 1; }
  .tbl .t-nome b, .tbl .t-nome small { max-width: 58vw; }
  .tbl.cont-t th:nth-child(3), .tbl.cont-t td:nth-child(3), .tbl.cont-t th:nth-child(4), .tbl.cont-t td:nth-child(4) { display: none; }
  .tbl.cont-t th:nth-child(5), .tbl.cont-t td:nth-child(5) { display: table-cell; }
}

/* cotações com terceiros: o técnico prevê no escopo, o comercial cota e escolhe */
.tr-cat { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; }
.esc-terc { display: flex; flex-direction: column; gap: 6px; }
.esc-tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13px; }
.esc-tr .faint { grid-column: 2 / -1; font-size: 12.5px; } .esc-tr .faint:empty { display: none; }
.esc-tr .tr-st { grid-column: 2 / -1; font-size: 12px; color: var(--st-ven); }
.esc-tr.ed { grid-template-columns: 150px minmax(0, 1.4fr) 64px 92px minmax(0, 1fr) 26px; padding: 4px; border: 0; gap: 6px; }
.crm-modal .esc-tr.ed input, .crm-modal .esc-tr.ed select { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; }
.esc-terc-crm { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .esc-terc-crm > .btn { align-self: flex-end; margin-top: 4px; }
.etc { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .etc-n { flex: 1; min-width: 0; }
.cot-st { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cot-st.ok { color: var(--st-ven); font-weight: 500; }
.cot { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.cot-it { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cot-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .cot-h .sep { flex: 1; }
.cot-h select.it-in { width: auto; } .cot-h .cot-nome { width: min(320px, 100%); text-align: left; } .cot-h .cot-un { width: 90px; text-align: left; }
.cot-tec { font-size: 12px; color: var(--faint); }
.cot-obs { margin: 0; font-size: 12.5px; color: var(--muted); }
.cot-t td { padding: 4px 6px; } .cot-t tr.on td { background: color-mix(in srgb, var(--st-ven) 6%, var(--bg)); }
.cot-t .it-in { text-align: left; } .cot-t .it-in.w { text-align: right; } .cot-forn { width: 180px; } .cot-pz { width: 100px; } .cot-dt { width: 130px; } .cot-ob { width: 180px; }
.cot-t input[type=radio] { accent-color: var(--st-ven); width: 16px; height: 16px; }
.cot-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .cot-pe .sep { flex: 1; }
.cot-mais { font-size: 11.5px; color: var(--st-ven); font-weight: 500; }
.viab-t tr.v-det td { font-size: 12.5px; color: var(--muted); padding-top: 2px; padding-bottom: 2px; } .viab-t tr.v-det td:first-child { padding-left: 22px; } .viab-t tr.v-det small { color: var(--faint); }
/* ligação automática com o Click Hub, no lugar do Clickup ID */
.ch-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text); } .ch-auto svg { width: 13px; height: 13px; }
.ch-auto.off { color: var(--muted); font-weight: 500; } .ch-auto-d { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; line-height: 1.35; }
/* caixa de entrada: o aviso do próprio CRM leva o ícone no lugar do avatar */
.cx-main .av.cx-sis { background: var(--surface-2); color: var(--muted); display: inline-grid; place-items: center; } .cx-main .av.cx-sis svg { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .esc-tr.ed { grid-template-columns: minmax(0, 1fr) 64px 92px 26px; } .esc-tr.ed > select { grid-column: 1 / -1; } .esc-tr.ed > .esc-ob { grid-column: 1 / -2; }
  .cx-task { max-width: 46%; }
}

/* proposta técnica: o técnico escreve no Click Hub, o comercial vê a versão, o que mudou e pede revisão */
.esc-v { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--muted); }
.esc-mudou, .esc-alerta { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.esc-mudou { background: color-mix(in srgb, var(--st-and) 8%, var(--bg)); } .esc-alerta { background: color-mix(in srgb, var(--st-per) 9%, var(--bg)); }
.esc-mudou svg, .esc-alerta svg { width: 15px; height: 15px; flex: none; margin-top: 2px; } .esc-alerta svg { color: var(--st-per); }
.esc-ptc { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; } .esc-ptc h4 { margin: 0 0 6px; font-size: 13.5px; }
.esc-ptc dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 12px; margin: 0 0 8px; font-size: 13px; } .esc-ptc dt { color: var(--muted); } .esc-ptc dd { margin: 0; }
.esc-modl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.crm-modal .esc-modl select { width: auto; max-width: 320px; padding: 4px 6px; font-size: 12.5px; }
.esc-ptx-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.esc-ptl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.crm-modal .esc-ptl select { width: auto; max-width: 340px; }
.esc-prev { margin-top: 8px; font-size: 13px; } .esc-prev summary { cursor: pointer; color: var(--muted); }
.esc-prev-b, .mt-t { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--surface); font-size: 12.5px; line-height: 1.5; }
.esc-prev-b .hp-sub, .mt-t .hp-sub { font-weight: 700; } .esc-prev-b .hp-li, .mt-t .hp-li { position: relative; padding-left: 1.2em; } .esc-prev-b .hp-mk, .mt-t .hp-mk { position: absolute; left: 0; } .esc-prev-b .hp-vz, .mt-t .hp-vz { height: .6em; }
.mt-i { border-top: 1px solid var(--line-soft); padding: 8px 2px; } .mt-i:first-of-type { border-top: 0; }
.mt-i summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none; } .mt-i summary::-webkit-details-marker { display: none; }
.mt-b h4 { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.lbl-s { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.prop-aviso { display: flex; align-items: center; gap: 10px; margin: 12px 20px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--st-and) 9%, var(--bg)); font-size: 13.5px; }
.prop-aviso span { flex: 1; } .prop-aviso svg { width: 16px; height: 16px; flex: none; }
.como-p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.prod-mt { max-width: 230px; }

/* quadro com muitos cartões: cada coluna rola sozinha e o cabeçalho (etapa, quantidade e valor) fica sempre à vista */
.board-wrap { overflow-x: auto; overflow-y: hidden; }
.crm-board { height: 100%; min-height: 0; align-items: stretch; }
.crm-col { min-height: 0; max-height: 100%; overflow: hidden; }
.crm-col .col-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-top: 2px; }
.crm-col .crm-ch { position: static; }
.crm-col > .col-add { flex: none; margin: 0 6px 8px; }
.col-mais { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px; border-radius: 8px; border: 1px dashed var(--line-strong); color: var(--text); font-size: 13px; font-weight: 500; }
.col-mais:hover { background: var(--bg); } .col-mais small { font-size: 11.5px; color: var(--faint); font-weight: 400; }
.crm-col .col-b > * { flex-shrink: 0; }
.crm-card.cc-comp { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; }
.cc-comp .cc-cl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-comp .ttl { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-comp .ctx { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-comp .ctx .late { color: var(--st-per); font-weight: 500; }
.cc-comp .cc-cr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; } .cc-comp .cc-v { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-comp.esfr { box-shadow: inset 3px 0 0 var(--st-esf, #C98A06), var(--sh-card); }
@media (max-width: 860px) { .board-wrap { overflow-y: hidden; } .crm-col .col-b { -webkit-overflow-scrolling: touch; } }

/* Com o time técnico */
.ex-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px dashed var(--line-strong); color: var(--faint); font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.tec-t td small.tec-obs { display: block; max-width: 260px; margin-top: 2px; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tec-t .late { color: var(--st-per); } .tec-t .hoje-t { color: var(--st-and); } .tec-t td small { color: var(--faint); }
.tec-pz { font-size: 12px; color: var(--muted); white-space: nowrap; } .tec-pz.late { color: var(--st-per); font-weight: 500; }

/* pedido de acréscimo do Click Hub: o comercial confere com o contrato e aprova ou não (05/11/2026) */
.ped-aprov { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid #F3D9A4; background: var(--bg-amarelo, #FFF3BF); border-radius: 8px; }
.ped-aprov > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 240px; font-size: 13px; }
.ped-aprov-b { display: flex; gap: 8px; }
.bk-crm-g td { background: var(--surface); font-weight: 600; font-size: 12.5px; }
.bk-crm-d { display: block; }

/* conversas com o time técnico, na empresa */
.conv-box { margin-bottom: 12px; }
.conv-box .nbox-h small { font-size: 12.5px; }

/* Conversas com o time técnico, no estilo do Slack (em aprovação) */
.cvs { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; border-top: 1px solid var(--line); }
.cvs-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cvs-h { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.cvs-ht { min-width: 0; }
.cvs-h h2 { margin: 0 0 1px; font-size: 16px; font-weight: 700; }
.cvs-h .faint { font-size: 12.5px; }
.cvs-h .sep { flex: 1; }
.cvs-res { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.cvs-res svg { width: 14px; height: 14px; }
.cvs-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; display: flex; flex-direction: column; }
.cvs-dia { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.cvs-dia::before, .cvs-dia::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.cvs-dia span { font-size: 12px; font-weight: 600; padding: 2px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.cvs-novo { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; color: #C0281C; font-size: 11.5px; font-weight: 700; }
.cvs-novo::before { content: ''; flex: 1; border-top: 1px solid #C0281C; }
.cvs-m { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px 8px 2px; margin: 0 -8px; border-radius: 6px; }
.cvs-m:hover { background: var(--surface); }
.cvs-m.seg { padding-top: 2px; }
.cvs-av .av { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; margin: 0; }
.cvs-av small { display: block; font-size: 10.5px; color: var(--faint); text-align: right; line-height: 21px; visibility: hidden; }
.cvs-m.seg:hover .cvs-av small { visibility: visible; }
.cvs-a { display: flex; align-items: baseline; gap: 8px; }
.cvs-a b { font-size: 14.5px; }
.cvs-a small { font-size: 12px; color: var(--muted); }
.cvs-lado { font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.cvs-t { font-size: 14.5px; line-height: 1.46; white-space: pre-wrap; overflow-wrap: anywhere; }
.cvs-comp { border: 1px solid var(--line-strong, #c9c9c4); border-radius: 10px; margin: 0 20px 16px; display: flex; flex-direction: column; background: var(--bg); }
.cvs-comp textarea { border: 0; resize: none; padding: 10px 12px 2px; font: inherit; font-size: 14px; min-height: 56px; outline: none; background: transparent; color: var(--text); }
.cvs-comp-b { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 12px; }
.cvs-comp-b .sep { flex: 1; }
.cvs-ctx { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); background: var(--surface); }
.cvs-ctx h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.cvs-card { width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; color: var(--text); }
.cvs-card + .cvs-card { margin-top: 6px; }
.cvs-card .btn { margin-top: 4px; }
.cvs-lk { cursor: pointer; }
.cvs-lk:hover { border-color: var(--line-strong, #c9c9c4); }
.cvs-st .late { color: #C0281C; font-weight: 600; }
.cvs-st, .cvs-tecs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin-top: 2px; }
.cvs-sts { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--sc); padding: 1px 6px; border-radius: 3px; }
.cvs-tecs .av { width: 20px; height: 20px; font-size: 9px; margin: 0; }
.cvs-ch { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cvs-ch svg { width: 13px; height: 13px; }
.cvs-q { display: flex; align-items: center; gap: 6px; margin: 2px 8px 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.cvs-q svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.cvs-q input { border: 0; outline: 0; background: transparent; padding: 6px 0; font: inherit; font-size: 13px; flex: 1; min-width: 0; color: var(--text); }
.cvs-cli { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvs-cli.nl { color: var(--text); }
.cvs-i { padding-left: 20px; }
.cvs-i .lbl { color: var(--muted); }
.cvs-i.nl .lbl { color: var(--text); font-weight: 700; }
.cvs-pend { width: 7px; height: 7px; border-radius: 50%; background: #E8590C; margin-left: auto; flex: none; }
.nt-sub { margin: 0 0 12px; color: var(--muted); }
.nt-r .cfg-rn { flex: 1; min-width: 0; }
.nt-c { flex: none; width: 112px; display: inline-flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; cursor: pointer; }
.nt-c .switch { margin-left: 0; }
.nt-h3 { margin: 22px 0 8px; font-size: 14px; }

/* Papel do contato no cliente */
.papeis { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.papel { display: inline-flex; align-items: center; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--text); white-space: nowrap; font-weight: 500; }
.papel.sem { color: var(--faint); border-style: dashed; background: transparent; font-weight: 400; }
.mn-t .papeis { margin-top: 3px; }
.papel-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.papel-op { position: relative; display: inline-flex; cursor: pointer; }
.papel-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.papel-op span { font-size: 13px; line-height: 20px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); }
.papel-op input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.papel-op input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 1px; }
.papel-ed { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.papel-tg { font-size: 12.5px; line-height: 18px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); }
.papel-tg.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.papel-bt { display: flex; padding: 0; margin-top: 3px; border: 0; background: none; cursor: pointer; text-align: left; }
.papel-bt:hover .papel { border-color: var(--line-strong, #c9c9c4); }
.pop-papel { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }

/* Produção: senha temporária e integração */
.senha-tmp { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.senha-tmp code { font-size: 18px; letter-spacing: .04em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ich-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ich-end code { font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow-wrap: anywhere; }

/* Proposta comercial no modelo da HUB. Medidas em cqw: 1cqw = 1% da largura da página A4 (210 x 297 mm). */
.hp-doc { container-type: inline-size; display: flex; flex-direction: column; gap: 22px; width: 100%; --hp-tit: "Segoe UI", "Open Sans", system-ui, sans-serif; --hp-txt: "Raleway", "Segoe UI", sans-serif; }
.hp-pg { position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; color: #222; container-type: inline-size; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .12); font-family: var(--hp-txt); font-size: 2.016cqw; line-height: 1.5; letter-spacing: .04em; text-align: left; }
.hp-pg * { box-sizing: border-box; }
.hp-pg img { display: block; }
.hp-barra { position: absolute; left: 3.3cqw; right: 3.3cqw; top: 2.97cqw; height: 1.98cqw; background: #000; }
.hp-rod { position: absolute; left: 0; right: 0; bottom: 0; height: 7.21cqw; background: #222; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 300 1.68cqw/1.38 "Open Sans", sans-serif; letter-spacing: 0; z-index: 2; }
.hp-h { margin: 0; font-family: var(--hp-tit); font-weight: 600; font-size: 3.36cqw; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #000; }
.hp-tx { color: #111; }
.hp-tx .hp-p { text-align: justify; hyphens: manual; }
.hp-tx .hp-vz { height: 1.5em; }
.hp-tx .hp-li { position: relative; padding-left: 1.2em; } .hp-mk { position: absolute; left: 0; }
.hp-tx .hp-sub, .hp-sub { font-weight: 700; text-transform: uppercase; color: #111; }
.hp-tx b { font-weight: 700; }

/* 1. capa */
.hp-capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-capa-preto { position: absolute; left: 58.6cqw; top: 0; width: 29.1cqw; height: 57.56cqw; background: #000; }
.hp-capa-selo { position: absolute; left: 65.55cqw; top: 35.6cqw; width: 14.85cqw; }
.hp-capa-k { position: absolute; left: 8.6cqw; top: 5.4cqw; margin: 0; font: 600 2.82cqw/1 var(--hp-tit); letter-spacing: .2em; color: #222; }
.hp-capa-t { position: absolute; left: 8.6cqw; top: 10.1cqw; width: 50cqw; font: 400 4.42cqw/1.24 "Google Sans", "Product Sans", "Open Sans", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #1f1f1f; }
.hp-capa-ac { position: absolute; left: 8.9cqw; top: 28.6cqw; width: 48.6cqw; font-size: 1.66cqw; line-height: 1.68; letter-spacing: .03em; color: #222; }
.hp-capa-ac > b { display: block; }
.hp-capa-ac b { font-weight: 700; }
.hp-capa-lema { position: absolute; left: 8.6cqw; top: 44.2cqw; width: 44.4cqw; margin: 0; font: 600 3.1cqw/1.44 var(--hp-tit); letter-spacing: .13em; color: #fff; }

/* 2. a empresa */
.hp-emp-foto { position: absolute; left: 54.05cqw; top: 0; width: 45.95cqw; height: 67.47cqw; object-fit: cover; }
.hp-emp-faixa { position: absolute; left: 7.86cqw; right: 0; top: 34.5cqw; height: 1.3cqw; background: #000; z-index: 1; }
.hp-emp-t { position: absolute; left: 7.8cqw; top: 11.6cqw; margin: 0; font: 600 5.56cqw/1.36 var(--hp-tit); letter-spacing: .13em; color: #222; }
.hp-emp-s { position: absolute; left: 7.8cqw; top: 26.2cqw; margin: 0; font-size: 2.29cqw; letter-spacing: .13em; color: #222; }
.hp-emp-a, .hp-emp-b, .hp-emp-c { position: absolute; line-height: 1.6; }
.hp-emp-a { left: 7.86cqw; top: 39.3cqw; width: 42.1cqw; }
.hp-emp-v { position: absolute; left: 7.8cqw; top: 84.1cqw; margin: 0; font: 600 5.04cqw/1.39 var(--hp-tit); letter-spacing: .13em; color: #222; }
.hp-emp-b { left: 7.86cqw; top: 108.9cqw; width: 42.1cqw; }
.hp-emp-c { left: 54.65cqw; top: 71.5cqw; width: 40.75cqw; }
.hp-scan { position: absolute; left: 66cqw; top: 120.8cqw; display: flex; align-items: center; gap: 1.6cqw; }
.hp-scan span { font-size: 1.6cqw; letter-spacing: .13em; margin-right: 1.2cqw; }
.hp-scan-f { width: 6.2cqw; } .hp-scan-q { width: 12.8cqw; }

/* páginas de texto corrido: o corpo fica entre a faixa preta e o rodapé */
.hp-corpo { position: absolute; left: 7.9cqw; right: 7.9cqw; top: 9.2cqw; bottom: 11.4cqw; overflow: hidden; display: flex; flex-direction: column; }
.hp-2c { display: grid; grid-template-columns: 29.5cqw minmax(0, 1fr); column-gap: 7.4cqw; align-items: start; }
.hp-2c > .hp-h { text-align: right; }
.hp-recuo { margin-left: 1.8cqw; }
.hp-pa .hp-obj { margin-bottom: 8.5cqw; }
.hp-pa .hp-h.hp-recuo { margin-bottom: 1.6cqw; }
.hp-pa .hp-ni { margin-top: 2.2cqw; letter-spacing: .03em; }
.hp-pa .hp-lista .hp-li { padding-left: 1.25em; }
.hp-cont .hp-corpo { top: 9.2cqw; }

/* 4. localização */
.hp-loc-t { position: absolute; left: 9.7cqw; top: 30.4cqw; }
.hp-loc-img { position: absolute; left: 0; top: 43cqw; width: 100%; height: 55.3cqw; object-fit: cover; }
.hp-loc-vz { position: absolute; left: 7.9cqw; right: 7.9cqw; top: 43cqw; height: 55.3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 0 12cqw; border: .3cqw dashed #c8c8c8; border-radius: 2cqw; color: #777; text-align: center; font-size: 1.9cqw; }
.hp-loc-vz svg { width: 5cqw; height: 5cqw; }

/* 5. como trabalhamos */
.hp-como-c { position: absolute; left: 8.8cqw; right: 7cqw; top: 9.9cqw; grid-template-columns: 37.8cqw minmax(0, 1fr); column-gap: 4cqw; }
.hp-como-c .hp-tx .hp-p { line-height: 1.5; }
.hp-diag { position: absolute; left: 4.2cqw; top: 43cqw; width: 44.5cqw; }
.hp-passos { position: absolute; left: 54.5cqw; top: 54.7cqw; width: 36.6cqw; margin: 0; padding: 0; list-style: none; }
.hp-passos li { position: absolute; left: 0; width: 100%; display: flex; align-items: flex-start; gap: 1.5cqw; line-height: 1.15; letter-spacing: 0; }
.hp-passos li:nth-child(1) { top: 0; } .hp-passos li:nth-child(2) { top: 12.1cqw; } .hp-passos li:nth-child(3) { top: 20.7cqw; } .hp-passos li:nth-child(4) { top: 33.3cqw; } .hp-passos li:nth-child(5) { top: 43.9cqw; }
.hp-passos i { flex: none; width: 4cqw; height: 3.96cqw; margin-top: .6cqw; }
.hp-passo { flex: 1; min-width: 0; font-size: 2.016cqw; }
.hp-rt { position: absolute; left: 7.3cqw; top: 115.7cqw; width: 57.7cqw; height: 19cqw; background: #000; color: #fff; display: grid; grid-template-columns: 10.5cqw minmax(0, 1fr) 13cqw; align-items: center; column-gap: 2.6cqw; padding: 0 1.6cqw 1.5cqw 2.6cqw; }
.hp-rt b { font: 700 3.36cqw/1.05 var(--hp-txt); text-align: right; letter-spacing: 0; }
.hp-rt p { margin: 0; font-size: 2.016cqw; line-height: 1.5; }
.hp-rt img { width: 12.4cqw; }

/* 6. investimento total e cases de sucesso */
.hp-pi .hp-corpo { left: 2.4cqw; right: 1.4cqw; bottom: 8cqw; }
.hp-pi .hp-inv-t, .hp-pi .hp-cases-t { margin-left: 5.4cqw; }
.hp-pi .hp-inv-t { margin-top: 1.6cqw; margin-bottom: 6.8cqw; }
.hp-pi .hp-inv { width: calc(100% - 7cqw); margin-left: 5.05cqw; }
.hp-pi .hp-nota-ed { margin-left: 5.4cqw; }
.hp-inv { width: 100%; border-collapse: separate; border-spacing: .35cqw; margin-left: -.35cqw; table-layout: fixed; font-size: 2.016cqw; letter-spacing: 0; }
.hp-pg:not(.hp-pi) .hp-inv { margin-left: -.35cqw; }
.hp-inv th, .hp-inv td { padding: .7cqw 1cqw; vertical-align: middle; }
.hp-inv th:first-child, .hp-inv td:first-child { width: 42%; background: none; color: #111; text-align: left; padding-left: 0; }
.hp-inv th:not(:first-child), .hp-inv td:not(:first-child) { background: #626468; color: #fff; text-align: center; }
.hp-inv th { font-weight: 700; line-height: 1.2; height: 6.9cqw; vertical-align: bottom; }
.hp-inv td { height: 5.3cqw; font-weight: 400; vertical-align: top; padding-top: .8cqw; }
.hp-inv td:first-child { vertical-align: middle; padding-top: 0; }
.hp-inv .hp-inv-tot td { font-weight: 700; }
.hp-nota-ed { margin: 1.4cqw 0 0; font-size: 1.6cqw; color: #8a6d00; }
.hp-cases-t { margin-top: 10cqw; }
.hp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.8cqw; margin-top: 2.2cqw; }
.hp-case { position: relative; margin: 0; padding-top: 9cqw; display: flex; flex-direction: column; align-items: center; }
.hp-case::before { content: ""; position: absolute; left: 0; right: 0; top: 9.6cqw; height: 45cqw; background: #f2f2f2; border-radius: 3.2cqw; }
.hp-case > * { position: relative; }
.hp-case-foto { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 11.6cqw; height: 11.6cqw; border-radius: 50%; object-fit: cover; z-index: 1; }
.hp-case blockquote { margin: 5.2cqw 0 0; padding: 0 3cqw; min-height: 27cqw; font: italic 400 1.6cqw/1.45 "Open Sans", "Segoe UI", sans-serif; letter-spacing: 0; text-align: justify; color: #111; }
.hp-estrelas { color: #ffc000; font-size: 3cqw; letter-spacing: .2cqw; line-height: 1; margin-top: 1cqw; }
.hp-case figcaption { margin-top: 3.4cqw; padding: .6cqw 3cqw; background: #494f56; color: #fff; font: 400 1.85cqw/1.4 "Lato", sans-serif; letter-spacing: 0; text-align: center; min-width: 24cqw; }
.hp-case-qr { width: 17cqw; margin-top: 1.6cqw; }
.hp-yt { display: inline-flex; align-items: center; gap: .6cqw; margin-top: 1.4cqw; font: 700 1.85cqw/1 "League Spartan", "Open Sans", sans-serif; letter-spacing: .08em; color: #fff; }
.hp-yt img { width: 3.6cqw; }
.hp-yt { background: linear-gradient(90deg, transparent 0 4.2cqw, #494f56 4.2cqw); padding: .5cqw 1cqw .4cqw 0; border-radius: .6cqw; }

/* 7. taxas, equipe técnica e obrigações */
.hp-pb .hp-corpo { bottom: 8.4cqw; }
.hp-pb .hp-taxas { margin-bottom: 9cqw; }
.hp-pb .hp-taxas .hp-tx { font-size: 1.85cqw; line-height: 1.6; }
.hp-pb .hp-h.hp-recuo { margin-bottom: 3cqw; }
.hp-eq { margin-left: 1.8cqw; line-height: 1.68; }
.hp-eq .hp-p { text-align: left; }
.hp-obr { position: relative; margin: auto 0 0; padding-left: 11.6cqw; }
.hp-obr-i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font: 800 7cqw/1 var(--hp-tit); font-style: normal; }
.hp-obr-t { border: .55cqw solid #bfbfbf; border-radius: 5cqw; padding: 2.4cqw 3.2cqw; line-height: 1.25; letter-spacing: 0; }

/* 8. prazos, validade e assinatura */
.hp-pc .hp-2c { margin-bottom: 6.5cqw; } .hp-pc .hp-ini { margin-bottom: 11.5cqw; }
.hp-pc .hp-2c .hp-tx .hp-p { text-align: left; }
.hp-ini { grid-template-columns: 33.2cqw 25cqw; column-gap: 5.4cqw; }
.hp-ini > .hp-h { order: 2; text-align: left; } .hp-ini > .hp-tx { order: 1; } .hp-ini > .hp-tx .hp-p { text-align: right !important; }
.hp-data { margin: 9cqw 0 0; text-align: right; }
.hp-ass { margin-top: 23cqw; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.5; }
.hp-ass { position: relative; } .hp-ass > :not(.hp-ass-img) { position: relative; z-index: 1; }
.hp-ass-img { position: absolute; right: 1.2cqw; top: -12.2cqw; width: 29.1cqw; z-index: 0; pointer-events: none; mix-blend-mode: multiply; }
.hp-ass-l { width: 35cqw; border-top: .25cqw dashed #222; margin-bottom: .6cqw; }
.hp-ass b { font-weight: 400; letter-spacing: .06em; }

/* 9. parceiros e 10. contracapa */
.hp-parc-t { position: absolute; left: 7.7cqw; top: 42.6cqw; margin: 0; font: 600 2.016cqw/1 var(--hp-tit); letter-spacing: .1em; color: #000; }
.hp-parc-f { position: absolute; left: 0; right: 0; top: 46.95cqw; height: 44cqw; background: #f0f3f5; display: grid; place-items: center; }
.hp-parc-f img { width: 75.6cqw; }
.hp-contra { background: #000; display: grid; place-items: center; }
.hp-contra img { width: 14.85cqw; margin-top: 2cqw; }

/* rascunho: o texto editável fica marcado e a página cresce se o texto passar; enviada, ela é paginada */
.hp-ed { outline: 1px dashed transparent; outline-offset: .5cqw; border-radius: .4cqw; cursor: text; transition: outline-color .15s; }
.hp-editando .hp-ed { outline-color: rgba(47, 111, 219, .35); }
.hp-ed:hover { outline-color: rgba(47, 111, 219, .7); }
.hp-ed:focus { outline: 1.5px solid #2f6fdb; background: rgba(47, 111, 219, .04); }
.hp-capa .hp-ed:focus { background: rgba(255, 255, 255, .7); }
.hp-editando .hp-flui { aspect-ratio: auto; min-height: 141.42cqw; overflow: visible; }
.hp-editando .hp-flui .hp-corpo { position: relative; inset: auto; padding: 9.2cqw 7.9cqw 13cqw; overflow: visible; }
.hp-editando .hp-flui .hp-rod { position: absolute; }
@media (max-width: 860px) { .hp-doc { gap: 12px; } }
@media print { .hp-doc { gap: 0; } .hp-pg { box-shadow: none; break-after: page; } }

/* rascunho: o que veio do técnico fica travado para o comercial (muda por revisão) */
.hp-editando .hp-trava { position: relative; outline: 1px dashed rgba(0, 0, 0, .22); outline-offset: .5cqw; border-radius: .4cqw; cursor: not-allowed; }
.hp-editando .hp-trava::after { content: "Do técnico"; position: absolute; right: 0; top: -2.9cqw; padding: 0 .9cqw; border-radius: .7cqw; background: #efefed; color: #666; font: 600 1.15cqw/1.7 system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.hp-editando .hp-passo.hp-trava::after { display: none; }