/* ===== Tokens =====
   Paleta e tipografia inspiradas na identidade visual da Prospectamos
   (agenciamivo.com.br): roxo/verde-sálvia sobre creme, cantos bem arredondados,
   títulos em serifa itálica misturados com texto em Poppins. */
:root {
  --primary: #0063fe;          /* roxo Prospectamos */
  --primary-dark: #0050d0;
  --primary-soft: #0063fe1f;
  --on-primary: #fff;
  --ink: #0c1b2e;              /* texto — "ink" da Prospectamos */
  --muted: #5b6678;            /* cinza-roxo neutro */
  --line: #dde3ec;             /* bordas creme */
  --line-strong: #c9d2df;
  --bg: #f4f7fb;               /* creme — fundo Prospectamos */
  --surface: #fff;
  --side: #04152f;             /* roxo bem escuro — sidebar */
  --side-ink: #dbe6f7;
  --side-accent: #0e2a54;
  --lilac: #9cc0ff;
  --sage: #3b8bff;             /* verde-sálvia Prospectamos (contraste AA em fundo claro) */
  --sage-soft: #c9dcff;
  --teal: #39ac99;             /* etapa ganha */
  --red: #d32c2c;              /* etapa perdida */
  --amber: #eda71d;
  --blue: #3c8cdd;
  --gradient-brand: linear-gradient(135deg, var(--primary), var(--sage));
  --stage-off: #e6eefc;        /* segmento inativo da barra de etapas (fundo claro, fora da sidebar) */
  --stage-off-ink: #34445e;
  --shadow-card: 0 1px 2px rgba(4,21,47,.04), 0 10px 28px rgba(4,21,47,.06);
  --shadow-bold: 0 18px 45px rgba(4,21,47,.14);
  --radius: 10px;
  --side-w: 252px;
  --font-sans: "Poppins", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; /* títulos: Poppins compacta */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.5 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.spacer { flex: 1; }
.ic { flex: none; }
[hidden] { display: none !important; }
::selection { background: var(--lilac); color: #04152f; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #00000022; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #00000038; background-clip: padding-box; }

/* ===== Layout ===== */
#app { display: flex; height: 100%; overflow: hidden; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view { flex: 1; overflow: auto; }

/* ===== Sidebar ===== */
#sidebar {
  width: var(--side-w); flex: none; background: var(--side); color: var(--side-ink); border-right: 1px solid var(--side);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 8px;
  transition: width .18s ease;
}
.collapsed #sidebar { width: 68px; }
.brand { display: block; margin-bottom: 14px; }
.brand-logo {
  display: flex; align-items: center; justify-content: flex-start; height: 40px;
  padding: 0 6px; overflow: hidden;
}
.brand-logo img { display: block; }
.brand-logo .logo-full { max-width: 100%; max-height: 30px; object-fit: contain; }
.brand-logo .logo-icon { display: none; max-height: 34px; object-fit: contain; }
.collapsed .brand-logo { padding: 0; justify-content: center; }
.collapsed .brand-logo .logo-full { display: none; }
.collapsed .brand-logo .logo-icon { display: block; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav.bottom { margin-top: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: 10px; color: #c7bfd9; background: none; border: 0; text-align: left; position: relative;
  white-space: nowrap; overflow: hidden; font-weight: 500;
}
.nav-item:hover { background: var(--side-accent); color: #fff; }
.nav-item.active { background: var(--side-accent); color: #fff; font-weight: 600; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--sage);
}
.collapsed .nav-item span { display: none; }
.collapsed .nav-item { justify-content: center; padding: 0; }
.collapsed [data-action="toggle-sidebar"] .ic { transform: rotate(180deg); }

/* ===== Topbar ===== */
#topbar {
  height: 60px; flex: none; background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
}
.search { position: relative; width: min(420px, 45vw); }
.search .s-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.search .input { padding-left: 32px; background: var(--bg); border-color: transparent; height: 34px; }
.search .input:focus { background: #fff; }
.search-results {
  position: absolute; top: 40px; left: 0; right: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-bold); z-index: 30; max-height: 380px; overflow: auto;
}
.search-results:empty { display: none; }
.sr-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.sr-item:hover { background: var(--bg); }
.sr-item small { color: var(--muted); display: block; }
.sr-item .sr-ic { width: 28px; height: 28px; border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; flex: none; }
.sr-empty { padding: 14px; color: var(--muted); }
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: 40px; width: 200px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-bold); padding: 6px; z-index: 30;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 4px; text-align: left; }
.menu button:hover { background: var(--bg); }
.user { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none;
}
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.uname { font-weight: 500; }

/* ===== Buttons & inputs ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--gradient-brand); border-color: transparent; color: var(--on-primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 38%, transparent); }
.btn.won { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.suspended { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.lost { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger-ghost { color: var(--red); border-color: transparent; background: none; }
.btn.danger-ghost:hover { background: #d32c2c1a; }
.btn.round { width: 34px; padding: 0; border-radius: 50%; height: 34px; }
.btn.icon { width: 32px; padding: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { background: none; border: 0; padding: 4px; border-radius: 8px; color: var(--muted); display: inline-flex; }
.icon-btn:hover { background: var(--bg); color: var(--ink); }

.input {
  width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit;
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; min-height: 84px; }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.sm { width: auto; min-width: 150px; }
.input[type="color"] { padding: 2px; width: 48px; }
.fld { display: block; margin-bottom: 12px; }
.fld > span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: #fff; }
.seg-btn { border: 0; background: none; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.seg-btn + .seg-btn { border-left: 1px solid var(--line-strong); }
.seg-btn.on { background: var(--ink); color: #fff; }
.seg-btn:not(.on):hover { background: var(--bg); }

/* ===== Page ===== */
.page { padding: 20px 24px 32px; }
.page.narrow { max-width: 980px; }
.page.fill { height: 100%; display: flex; flex-direction: column; padding: 14px 20px 0; }
.h1 { font: 600 22px/1.25 var(--font-display); margin-bottom: 16px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.summary { color: var(--muted); }
.summary b { color: var(--ink); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.panel h2 { font-size: 16px; margin-bottom: 14px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ===== Kanban ===== */
.deals-body { flex: 1; min-height: 0; overflow: auto; }
.board { height: 100%; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; }
.col { flex: 1 0 calc((100% - 50px) / 6); min-width: 176px; display: flex; flex-direction: column; min-height: 0; }
.col-head {
  padding: 11px 14px 10px; margin-bottom: 8px; border-radius: 14px; color: #fff;
  background: color-mix(in srgb, var(--sc, var(--primary)) 84%, #000);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sc, var(--primary)) 32%, transparent);
}
.stage-head {
  font-weight: 700; font-size: 14px; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-sum { padding: 3px 0 0; font-size: 12px; color: #ffffffd9; display: flex; justify-content: space-between; }
.col-body {
  flex: 1; overflow-y: auto; padding: 8px 8px 40px; border-radius: 14px;
  background: color-mix(in srgb, var(--sc, var(--primary)) 9%, #e6ebf2);
}
.col-body.over { background: color-mix(in srgb, var(--sc, var(--primary)) 22%, #e6ebf2); }
.col-empty { color: var(--muted); text-align: center; font-size: 12px; padding: 18px 8px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--sc, var(--primary)); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; box-shadow: var(--shadow-card);
}
.card:hover { border-color: var(--line-strong); border-left-color: var(--sc, var(--primary)); box-shadow: 0 6px 20px rgba(4,21,47,.12); }
.card.dragging { opacity: .35; }
.card-title { font-weight: 600; word-break: break-word; }
.card-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; font-size: 13px; }
.card-val { font-weight: 500; }
.rot { font-size: 11px; color: var(--red); background: #d32c2c1a; padding: 1px 6px; border-radius: 10px; }
.ph { height: 4px; margin: -2px 0 6px; background: var(--primary); border-radius: 2px; }
.ind { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.ind.ok { border: 1.5px solid var(--teal); color: var(--teal); }
.ind.late { background: var(--red); color: #fff; }
.ind.warn { background: var(--amber); color: #fff; }

.dropzones {
  position: fixed; left: 0; right: 0; bottom: 0; height: 84px; display: none; gap: 12px; padding: 12px 24px;
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.08); z-index: 40;
}
body.is-dragging .dropzones { display: flex; }
.dz {
  flex: 1; display: grid; place-items: center; border: 2px dashed; border-radius: 8px; font-weight: 600; font-size: 15px;
}
.dz.won { color: #21806f; border-color: var(--teal); }
.dz.suspended { color: #96690a; border-color: var(--amber); }
.dz.lost { color: var(--red); border-color: var(--red); }
.dz.del { color: var(--muted); border-color: var(--line-strong); }
.dz.over.won { background: var(--teal); color: #fff; }
.dz.over.suspended { background: var(--amber); color: #fff; }
.dz.over.lost { background: var(--red); color: #fff; }
.dz.over.del { background: var(--ink); color: #fff; }

/* ===== Tables ===== */
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; background: var(--bg);
  border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; position: sticky; top: 0;
}
.tbl th:hover { color: var(--ink); }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, #fff); }
.cell-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }

.xls-help { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 14px; background: var(--bg); }
.xls-help summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 13px; color: var(--ink); user-select: none; }
.xls-help[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.xls-help .tbl.xls-cols { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.xls-cols td { font-size: 13px; }
.xls-cols td:first-child { white-space: nowrap; width: 1%; }
.muted { color: var(--muted); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.chip.won { background: #39ac9922; border-color: transparent; color: #21806f; }
.chip.suspended { background: #eda71d26; border-color: transparent; color: #96690a; }
.chip.lost { background: #d32c2c1a; border-color: transparent; color: var(--red); }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* ===== Activities ===== */
.check {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff;
  display: inline-grid; place-items: center; color: transparent; padding: 0; flex: none;
}
.check:hover { border-color: var(--primary); color: var(--primary); }
.check.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.act-type { display: inline-flex; align-items: center; gap: 6px; }
.late-txt { color: var(--red); font-weight: 500; }
.type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.type-chips label { cursor: pointer; }
.type-chips input { position: absolute; opacity: 0; pointer-events: none; }
.type-chips span {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: #fff; font-size: 13px;
}
.type-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.type-chips input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ===== Deal detail ===== */
.deal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.deal-head h1 { font: 600 24px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.deal-meta { color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.stagebar { display: flex; margin: 0 0 18px 6px; }
.st {
  flex: 1; height: 38px; border: 0; margin-left: -6px; background: var(--stage-off); color: var(--stage-off-ink); font-size: 12.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding: 0 16px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  min-width: 0;
}
.st span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st small { font-weight: 400; font-size: 10.5px; opacity: .9; }
.st:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 4px 0 0 4px; margin-left: 0; }
.st.on { background: var(--gradient-brand); color: var(--on-primary); }
.st:not(.on):not(:disabled):hover { background: var(--lilac); color: #04152f; }
.st:disabled { cursor: default; }
.deal-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.side-card h3 { font-size: 13px; padding: 12px 14px 8px; display: flex; align-items: center; justify-content: space-between; }
.kv { padding: 0 14px 12px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #f0f1f2; }
.kv div:first-child { border-top: 0; }
.kv dt, .kv span.k { color: var(--muted); }
.kv .v { text-align: right; word-break: break-word; }
.link { color: var(--blue); cursor: pointer; background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; }
.composer { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 8px; }
.tabs button { border: 0; background: none; padding: 12px 14px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--primary); }
.composer-body { padding: 14px; }
.section-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.tl-item { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.tl-item.hist { background: none; border: 0; padding: 4px 14px; color: var(--muted); font-size: 13px; }
.tl-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); flex: none; }
.tl-item.hist .tl-ic { width: 20px; height: 20px; }
.tl-body { flex: 1; min-width: 0; }
.tl-body p { white-space: pre-wrap; word-break: break-word; }
.tl-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.badge-big { font-size: 13px; padding: 4px 10px; border-radius: 12px; font-weight: 600; }

/* ===== KPI / charts ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.kpi small { color: var(--muted); font-weight: 500; }
.kpi b { display: block; font: 600 22px/1.2 var(--font-display); margin: 4px 0 2px; }
.kpi span { color: var(--muted); font-size: 12px; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 110px; gap: 12px; align-items: center; margin: 10px 0; }
.funnel-row .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef0f2; border-radius: 4px; height: 26px; position: relative; overflow: hidden; }
.bar { background: var(--primary); height: 100%; border-radius: 4px; min-width: 3px; }
.bar-txt { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; text-align: right; }
.bar-txt small { color: var(--muted); font-size: 11px; }
.months { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding-top: 18px; }
.month { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.month .col-bar { width: 100%; max-width: 56px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 3px; }
.month .val { font-size: 11px; font-weight: 600; white-space: nowrap; }
.month .lbl { font-size: 12px; color: var(--muted); }

/* ===== Settings ===== */
.brand-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.preview-side { background: var(--side); padding: 14px 12px; border-radius: 14px; width: 100%; max-width: 236px; }
.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.stage-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stage-row .grip { width: 24px; height: 24px; border-radius: 50%; background: #eef0f2; display: grid; place-items: center; font-size: 12px; color: var(--muted); flex: none; }
.stage-row .prob { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.stage-row .prob .input { width: 72px; }
.inline-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Modal / toast ===== */
.overlay { position: fixed; inset: 0; background: rgba(38,41,44,.5); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 8px; width: 520px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 17px; }
.modal form { display: flex; flex-direction: column; min-height: 0; }
.modal-body { padding: 18px 20px 6px; overflow: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 8px 8px; }
.linked { margin: 4px 0 12px; }
.linked a { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
#toast-root { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-bold); animation: pop .2s ease; }
.toast.error { background: var(--red); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  #sidebar { width: 68px; }
  #sidebar .nav-item span { display: none; }
  #sidebar .brand-logo { padding: 0; justify-content: center; }
  #sidebar .brand-logo .logo-full { display: none; }
  #sidebar .brand-logo .logo-icon { display: block; }
  .nav-item { justify-content: center; padding: 0; }
  .deal-grid, .charts, .brand-grid { grid-template-columns: 1fr; }
  .uname { display: none; }
  .page { padding: 16px; }
}

/* ===== Início (dashboard) e acabamento arredondado ===== */
.panel, .table-wrap, .kpi, .side-card, .composer, .tl-item, .stat, .banner {
  border-radius: 18px; box-shadow: var(--shadow-card);
}
.card { border-radius: 14px; }
.modal { border-radius: 22px; }
.modal-foot { border-radius: 0 0 22px 22px; }
.btn { border-radius: 10px; }
.input { border-radius: 10px; }
.seg { border-radius: 10px; }

.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); padding: 20px 24px; margin-bottom: 20px;
}
.banner-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.banner h1 { font: 600 22px/1.25 var(--font-display); }
.banner p { color: var(--muted); }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg); border-radius: 999px; padding: 4px; }
.pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pill:hover:not(.on) { color: var(--ink); }
.pill.on { background: var(--primary); color: var(--on-primary); }
/* "Personalizado" precisa se destacar das outras opções de período mesmo sem estar selecionado. */
.pill-custom { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.pill-custom:hover:not(.on) { background: var(--primary-soft); color: var(--primary-dark); }
.pill-custom.on { border-color: var(--primary); }
.only-mobile { display: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); padding: 16px 18px 16px 22px; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.stat-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 500; }
.stat-val { font: 600 22px/1.2 var(--font-display); margin-top: 8px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 0; }
.feed-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.feed-item:first-of-type { border-top: 0; }
.feed-item:hover .feed-body b { color: var(--primary-dark); }
.feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.feed-body b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-body span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-item small { color: var(--muted); white-space: nowrap; }

.mini-chart { display: flex; align-items: flex-end; gap: 16px; height: 190px; padding-top: 8px; }
.mini-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.mini-bar { width: 100%; max-width: 72px; border-radius: 8px 8px 0 0; }
.mini-n { font-weight: 600; }
.mini-l { font-size: 12px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pills, .status-seg { display: none; } .only-mobile { display: block; } }

.two-col > * { min-width: 0; }
.feed-item .chip { flex: none; }

/* ===== Etiqueta de temperatura do lead ===== */
.temp {
  --tc: var(--muted); --tcd: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--tcd);
  background: color-mix(in srgb, var(--tc) 15%, transparent);
}
.temp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex: none; }
.temp.cold { --tc: #3c8cdd; --tcd: #1f63ad; }
.temp.warm { --tc: #eda71d; --tcd: #8a5e00; }
.temp.hot { --tc: #e8452c; --tcd: #b62d18; }
.temp.none { --tc: var(--line-strong); }
.temp-pick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.temp-pick .temp { cursor: pointer; opacity: .5; }
.temp-pick .temp:hover { opacity: .85; }
.temp-pick .temp.on { opacity: 1; border-color: var(--tc); }
.temp-pick .temp:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.deal-meta .temp { align-self: center; }
/* Versão grande e de destaque (cartão do kanban e cabeçalho do negócio) */
.temp-lg {
  padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: var(--tc); box-shadow: 0 1px 3px color-mix(in srgb, var(--tc) 50%, transparent);
}
.temp-lg::before { display: none; }
.temp-lg .ic { flex: none; }
.temp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.temp-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.temp-stat b { font-size: 18px; font-weight: 600; }
.temp-stat span:last-child { color: var(--muted); font-size: 13px; }

/* ===== Login, equipe e permissões ===== */
body.authing #app, body.authing .dropzones { display: none; }
.auth {
  min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(1100px 620px at 12% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 560px at 112% 110%, color-mix(in srgb, var(--sage) 20%, transparent), transparent 60%),
    var(--bg);
}
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-bold); }
.auth-brand { margin-bottom: 16px; }
.auth-brand .brand-logo { justify-content: flex-start; padding-left: 0; height: auto; }
.auth-brand .brand-logo .logo-full { max-height: 40px; }
.auth-card h1 { font: 600 24px/1.25 var(--font-display); margin-bottom: 4px; }
.auth-card > p { margin-bottom: 18px; }
.auth-msg { min-height: 20px; margin: 4px 0 12px; color: var(--red); font-size: 13px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14px; }
.btn.block { width: 100%; height: 40px; }

.user-btn { background: none; border: 0; padding: 3px 8px 3px 3px; border-radius: 999px; }
.user-btn:hover { background: var(--bg); }
.menu-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.menu-head small { color: var(--muted); word-break: break-all; }
.menu-head .chip { margin-top: 4px; }

.notice { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.invite-form { display: grid; grid-template-columns: 1fr 200px auto; gap: 12px; align-items: end; }
.invite-form .fld { margin: 0; }
.tbl select.input.sm { min-width: 150px; }
.perm.yes { display: inline-flex; color: var(--teal); }
.perm.no { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .invite-form { grid-template-columns: 1fr; } }

body.authing #auth-root { height: 100%; }

/* ===== Histórico de ações ===== */
.nowrap { white-space: nowrap; }
.block { display: block; }
.audit-text { max-width: 560px; word-break: break-word; }
.load-more { display: flex; justify-content: center; padding: 16px 0 4px; }
.audit-user { min-width: 190px; }

/* ===== Anexos em notas (arquivo, print e áudio) ===== */
.note-tools { display: flex; align-items: center; gap: 6px; }
.note-tools .icon-btn { width: 32px; height: 32px; justify-content: center; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; }
.note-tools .icon-btn.recording { background: var(--red); border-color: var(--red); color: #fff; animation: rec-pulse 1.4s ease-in-out infinite; }
.note-tools .btn { margin-left: auto; }
.rec-timer { font-size: 12px; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes rec-pulse { 50% { opacity: .55; } }

.att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.att { position: relative; }
.att-img { width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); flex: none; }
.att-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.att-audio { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; }
.att-audio audio { height: 32px; max-width: 230px; }
.att-file { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.att-file a, a.att-file { display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--ink); text-decoration: none; max-width: 220px; }
.att-file .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.att-file .att-size { color: var(--muted); font-size: 11px; white-space: nowrap; }
.att-x {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; border: 2px solid #fff; padding: 0; flex: none;
}
.att-x:hover { background: var(--red); }

.lightbox-inner { position: relative; max-width: min(92vw, 900px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox-inner img { max-width: 100%; max-height: 78vh; border-radius: 8px; display: block; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lightbox-close { position: absolute; top: -42px; right: -4px; color: #fff; }
.lightbox-close:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ===== Filtro de período (Início e Insights) ===== */
.period-filter { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.period-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-filter .hint { margin: 0; }

/* ===== Histórico maior + nota importante fixada ===== */
.tl-item { padding: 15px 16px; gap: 14px; align-items: flex-start; }
.tl-ic { width: 34px; height: 34px; }
.tl-item.hist .tl-ic { width: 22px; height: 22px; }
.tl-body p { font-size: 14.5px; line-height: 1.55; }
.tl-meta { font-size: 12.5px; margin-top: 4px; }
.section-title-lg { font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 24px 0 10px; }

.pinned-note {
  background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-left: 4px solid var(--primary); border-radius: 12px; padding: 14px 18px; margin: -4px 0 18px;
}
.pinned-note-head { display: flex; align-items: center; gap: 8px; color: var(--primary-dark); margin-bottom: 6px; }
.pinned-note-head b { font-size: 14px; }
.pinned-note p { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.pinned-note .icon-btn { color: var(--primary-dark); }

/* ===== Pessoas vinculadas ao negócio (múltiplas) =====
   Especificidade maior que ".kv div" de propósito: sem isso, a regra genérica do .kv
   (display:flex + justify-content:space-between) bagunça estas linhas, que têm várias partes. */
.kv.people-list { padding: 0 0 6px; }
.kv .person-row { display: block; padding: 9px 14px; border-top: 1px solid #f0f1f2; }
.kv .person-row:first-child { border-top: 0; }
.kv .person-row-head { display: flex; align-items: flex-start; gap: 6px; flex-wrap: nowrap; padding: 0; border-top: 0; }
.person-row-head .chip { flex: none; margin-top: 2px; }
.person-row-head .link { font-weight: 600; }
.person-row-head .icon-btn { padding: 3px; }
.person-actions { display: inline-flex; flex: none; margin-left: auto; }
.person-row-head .link { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.kv .person-row-contact { display: block; padding: 0; border-top: 0; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ===== Tela de conexão do Claude (conectar-claude.html) ===== */
.auth-card.wide { max-width: 460px; }
.consent-list { margin: 12px 0 4px; padding-left: 20px; }
.consent-list li { margin: 6px 0; }
.consent-actions { display: flex; gap: 10px; margin-top: 16px; }
.consent-actions .btn { flex: 1; height: 42px; }
.notice.warn { border-color: var(--amber); background: #eda71d1f; margin: 14px 0 0; }
.grant-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }

/* ===== Produtos negociados ===== */
.chip.prod { background: color-mix(in srgb, var(--primary) 11%, #fff); border-color: transparent; color: var(--primary-dark); font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.chip.prod.more { background: var(--bg); color: var(--muted); border-color: var(--line); }
.card-prods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.card-prods .chip.prod { font-size: 11px; padding: 1px 8px; }
.prod-cell { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.kv .prod-line { align-items: flex-start; }
.prod-list { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.prod-list .chip.prod { white-space: normal; }
.prod-pick { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; max-height: 280px; overflow: auto; background: #fff; }
.prod-group + .prod-group { margin-top: 10px; }
.prod-group > small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.prod-pick .type-chips { margin-bottom: 0; }
.prod-pick .type-chips span { height: auto; min-height: 30px; padding: 4px 10px; line-height: 1.25; }
.prod-pick .type-chips input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.fld > span small { font-weight: 400; }
.chip.prod.plan { background: color-mix(in srgb, var(--sage) 26%, #fff); color: #0d3371; font-weight: 600; }

/* ===== Foto de perfil ===== */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.has-img { background: var(--line); }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; }
.photo-edit { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.photo-edit .hint { max-width: 260px; margin-top: 8px; }
.card { position: relative; }
.card-owner { position: absolute; top: 8px; right: 8px; line-height: 0; }
.card-owner .avatar { box-shadow: 0 0 0 2px #fff; }
.card.has-owner .card-title { padding-right: 30px; }
.owner-v { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* Produto negociado em destaque no cartão do kanban: nome inteiro (quebra de linha), sem cortar */
.card-prods { margin-top: 8px; gap: 5px; }
.card-prods .chip.prod { font-size: 12px; line-height: 1.3; padding: 3px 10px; white-space: normal; text-align: left; border-radius: 10px; font-weight: 600; }
.card-prods .chip.prod.more { font-weight: 600; }
.card-prods.none { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ===== Comemoração de negócio ganho ===== */
#celebrate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; cursor: pointer; background: radial-gradient(closest-side, rgba(43,36,56,.38), rgba(43,36,56,.62)); animation: cele-fade .25s ease both; }
#celebrate.out { opacity: 0; transition: opacity .35s ease; }
#celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cele-card { position: relative; background: #fff; border-radius: 28px; padding: 26px 44px 22px; text-align: center; max-width: min(92vw, 480px); box-shadow: var(--shadow-bold); animation: cele-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.cele-icon { width: 112px; height: 112px; object-fit: contain; animation: cele-spin 1s cubic-bezier(.2, 1.3, .4, 1) both, cele-pulse 1.8s ease-in-out 1s infinite; }
.cele-title { font: 600 30px/1.2 var(--font-display); color: var(--primary-dark); margin-top: 2px; }
.cele-deal { font-weight: 600; font-size: 17px; margin-top: 6px; word-break: break-word; }
.cele-value { font: 600 24px/1.2 var(--font-display); color: #0d3371; margin-top: 2px; }
.cele-logo { display: block; height: 28px; margin: 16px auto 0; }
@keyframes cele-fade { from { opacity: 0; } }
@keyframes cele-pop { from { opacity: 0; transform: scale(.55) translateY(30px); } }
@keyframes cele-spin { from { transform: rotate(-200deg) scale(.2); opacity: 0; } }
@keyframes cele-pulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cele-card, .cele-icon { animation: none; } }

/* ===== Lixeira (Configurações) ===== */
.trash-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.trash-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.trash-row:first-child { border-top: 0; }
.trash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trash-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-main span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-meta { font-size: 12px; text-align: right; line-height: 1.35; white-space: nowrap; }
@media (max-width: 700px) { .trash-row { flex-wrap: wrap; } .trash-meta { text-align: left; width: 100%; order: 3; } }

/* =====================================================================
   CELULAR E TOQUE
   - até 760 px: barra de abas embaixo, menu em gaveta, tabelas viram cartões, janelas viram painéis,
     kanban desliza de lado (uma etapa por vez).
   - 761–900 px (tablet): menu lateral só com ícones (regra acima).
   - toque (qualquer tamanho): alvos maiores e campos de 16 px (evita o zoom automático do iPhone).
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-x: none; }
button, a, select, .card, .tab { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#tabbar, #drawer-backdrop, .top-brand, .card-move, .only-mobile-flex { display: none; }
.filters { display: contents; }
.sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 500; text-align: left; }
.sheet-item .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sheet-item .grow { flex: 1; min-width: 0; }
.sheet-item small { color: var(--muted); font-weight: 600; }
.sheet-item.on { border-color: var(--primary); background: var(--primary-soft); }
.sheet-item.open { margin-top: 6px; color: var(--primary-dark); font-weight: 600; }
.card-move { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--primary-dark); place-items: center; padding: 0; flex: none; }

@media (max-width: 760px), (pointer: coarse) {
  .btn { height: 42px; padding: 0 16px; }
  .btn.icon { width: 42px; padding: 0; }
  .btn.round { width: 44px; height: 44px; }
  .icon-btn { padding: 9px; }
  .input { height: 44px; font-size: 16px; }
  textarea.input { font-size: 16px; height: auto; }
  .input[type="color"] { padding: 3px; width: 56px; }
  .seg-btn { height: 40px; padding: 0 14px; }
  .type-chips span { height: 40px; }
  .check { width: 26px; height: 26px; }
  .pill { padding: 9px 16px; }
  .nav-item { height: 46px; }
  .menu button { padding: 12px; }
  .swatch { width: 34px; height: 34px; }
  .temp-pick .temp { padding: 5px 12px; font-size: 13px; }
  .card-move { display: inline-grid; }
}

@media (max-width: 760px) {
  .dropzones { display: none !important; }
  .only-mobile-flex { display: inline-flex; }
  #app { height: 100dvh; }
  #main { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  /* menu lateral vira gaveta */
  #sidebar, body.collapsed #sidebar {
    position: fixed; z-index: 130; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-104%); transition: transform .22s ease;
  }
  body.drawer-open #sidebar { transform: none; box-shadow: 14px 0 44px rgba(0,0,0,.4); }
  #sidebar .nav-item span, body.collapsed #sidebar .nav-item span { display: inline; }
  #sidebar .nav-item, body.collapsed #sidebar .nav-item { justify-content: flex-start; padding: 0 14px; }
  #sidebar .brand-logo, body.collapsed #sidebar .brand-logo { justify-content: flex-start; padding: 0 6px; }
  #sidebar .brand-logo .logo-full, body.collapsed #sidebar .brand-logo .logo-full { display: block; }
  #sidebar .brand-logo .logo-icon, body.collapsed #sidebar .brand-logo .logo-icon { display: none; }
  #sidebar [data-action="toggle-sidebar"] { display: none; }
  #drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 120; background: rgba(4,21,47,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.drawer-open #drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }

  /* barra de abas */
  #tabbar { display: flex; position: fixed; z-index: 110; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(4,21,47,.08); padding-bottom: env(safe-area-inset-bottom); }
  .tab { flex: 1; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; padding: 0; position: relative; color: var(--muted); font-size: 11px; font-weight: 500; }
  .tab.active { color: var(--primary-dark); font-weight: 600; }
  .tab.active::before { content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 4px 4px; background: var(--gradient-brand); }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* topo */
  #topbar { height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; gap: 10px; }
  #topbar .spacer { display: none; }
  .top-brand { display: grid; place-items: center; flex: none; }
  .search { flex: 1; width: auto; min-width: 0; }
  .search .input { height: 42px; }
  .search-results { max-height: 60vh; }
  .user-btn { padding: 2px; }
  .menu { width: min(260px, 88vw); }

  /* páginas */
  .page { padding: 14px 14px 20px; }
  .page.fill { padding: 10px 12px 0; }
  .h1 { font-size: 24px; margin-bottom: 12px; }
  .panel { padding: 16px; border-radius: 16px; }
  .banner { padding: 16px; gap: 12px; }
  .banner h1, .deal-head h1 { font-size: 22px; }
  .banner-l { gap: 12px; }
  .avatar.lg { width: 48px; height: 48px; font-size: 18px; }
  .stats, .kpis, .temp-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 12px 12px 16px; }
  .stat-head { font-size: 12px; }
  .stat-val, .kpi b { font-size: 21px; }
  .kpi { padding: 12px; }
  .funnel-row { grid-template-columns: 86px 1fr 80px; gap: 8px; }
  .period-filter, .period-bar, .date-range { width: 100%; }
  .period-bar .input, .date-range .input { flex: 1; min-width: 0; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex: none; }
  .toolbar { gap: 8px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .invite-form { grid-template-columns: 1fr; }

  /* filtros do kanban: recolhidos atrás do botão "Filtros" */
  .filters { display: none; flex: 1 0 100%; flex-wrap: wrap; gap: 8px; }
  .toolbar.filters-open .filters { display: flex; }
  .filters .input.sm { flex: 1 1 calc(50% - 8px); min-width: 0; width: auto; }
  .filters .input.sm[data-input="deal-filter"] { flex-basis: 100%; }
  .toolbar .summary { flex: 1; }

  /* kanban: uma etapa por vez, desliza de lado */
  .board { gap: 10px; scroll-snap-type: x mandatory; scroll-padding: 0 12px; overscroll-behavior-x: contain; padding-bottom: 8px; }
  .col { flex: 0 0 87%; min-width: 0; scroll-snap-align: center; }
  .card { padding: 12px 14px; }
  .card-title { font-size: 15px; }
  .col-body { padding-bottom: 24px; }

  /* tela do negócio */
  .deal-head { gap: 10px; }
  .deal-head .btn { height: 40px; padding: 0 14px; }
  .stagebar { overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stagebar::-webkit-scrollbar { display: none; }
  .st { flex: 0 0 136px; height: 46px; }
  .tl-item { padding: 12px; gap: 10px; }
  .composer-body { padding: 12px; }
  .note-tools { flex-wrap: wrap; }
  .pinned-note { padding: 12px 14px; }

  /* tabelas viram cartões (cada linha é um cartão, com o nome da coluna ao lado do valor) */
  .table-wrap { border: 0; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
  .tbl:not(.keep):not(.xls-cols), .tbl:not(.keep):not(.xls-cols) tbody { display: block; }
  .tbl:not(.keep):not(.xls-cols) thead { display: none; }
  .tbl:not(.keep):not(.xls-cols) tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--shadow-card); }
  .tbl:not(.keep):not(.xls-cols) td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; text-align: right; font-size: 14px; min-width: 0; }
  .tbl:not(.keep):not(.xls-cols) td::before { content: attr(data-label); flex: none; max-width: 42%; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; }
  .tbl:not(.keep):not(.xls-cols) td:first-child { display: block; text-align: left; font-size: 16px; font-weight: 600; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .tbl:not(.keep):not(.xls-cols) td:first-child::before, .tbl:not(.keep):not(.xls-cols) td:empty { display: none; }
  .tbl:not(.keep):not(.xls-cols) tbody tr:hover { background: #fff; }
  .tbl .cell-name { min-width: 0; }
  .tbl .audit-text { max-width: none; }
  .tbl.keep { font-size: 13px; }
  .tbl.keep th, .tbl.keep td { padding: 8px 8px; }
  .table-wrap:has(.tbl.keep) { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
  .xls-cols, .xls-cols tbody, .xls-cols tr, .xls-cols td { display: block; width: auto; }
  .xls-cols td:first-child { white-space: normal; padding-bottom: 0; border-bottom: 0; }
  .xls-help { padding: 2px 12px; }

  /* configurações */
  .stage-row { flex-wrap: wrap; }
  .stage-row input[data-change="stage-name"] { flex: 1 1 150px; min-width: 0; }
  .inline-tools .input.sm, .inline-tools select { flex: 1 1 100%; width: auto; }
  .data-actions .btn { flex: 1 1 auto; }
  .trash-main span { white-space: normal; }
  .prod-pick { max-height: 46vh; }
  .photo-edit { flex-direction: column; align-items: flex-start; }

  /* janelas viram painéis que sobem de baixo */
  .overlay { place-items: end center; padding: 0; }
  .modal { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; animation: sheet-up .24s ease both; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px 16px 4px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .spacer { display: none; }
  .modal.sheet .modal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .lightbox-close { top: -46px; right: 4px; }

  /* avisos e comemoração */
  #toast-root { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 92vw; }
  .toast { border-radius: 16px; text-align: center; }
  .cele-card { padding: 22px 22px 18px; }
  .cele-icon { width: 92px; height: 92px; }
  .cele-title { font-size: 30px; }
  .cele-value { font-size: 24px; }
  .auth { padding: 16px; }
  .auth-card { padding: 22px; }
}
@keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } }
@media (max-width: 760px) {
  .page.fill > .toolbar > * { order: 4; }
  .page.fill > .toolbar > .seg:first-child { order: 1; }
  .page.fill > .toolbar > .btn.primary { order: 2; }
  .page.fill > .toolbar > .only-mobile-flex { order: 3; margin-left: auto; }
  .page.fill > .toolbar > select.only-mobile { order: 4; flex: 0 0 auto; width: auto; min-width: 130px; }
  .page.fill > .toolbar > .summary { order: 5; font-size: 13px; }
  .page.fill > .toolbar > .filters { order: 6; }
}
@media (max-width: 760px) {
  .card-foot { row-gap: 8px; }
  .card-move { margin-left: auto; }
  .card-foot .spacer { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 760px) {
  .deal-head { align-items: flex-start; }
  .deal-head > div:not(.spacer) { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .deal-head .spacer { display: none; }
  .deal-head > .btn.won, .deal-head > .btn.suspended, .deal-head > .btn.lost { flex: 1 1 28%; justify-content: center; }
  .deal-head > .btn:not(.icon):not(.won):not(.suspended):not(.lost) { flex: 1 1 60%; justify-content: center; }
  .deal-meta { gap: 8px 12px; }
}
@media (max-width: 760px), (pointer: coarse) {
  .icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .person-row-head .icon-btn { min-width: 38px; min-height: 38px; padding: 6px; }
  .temp-pick .temp { min-height: 36px; }
  .link { padding: 6px 0; }
  .att-x { width: 26px; height: 26px; top: -9px; right: -9px; }
}
@media (max-width: 760px) {
  /* Atividades: o círculo de concluir fica ao lado do assunto (que vira o título do cartão) */
  .tbl:not(.keep):not(.xls-cols) tr:has(> td:first-child .check) { position: relative; }
  .tbl:not(.keep):not(.xls-cols) tr:has(> td:first-child .check) > td:first-child { position: absolute; left: 12px; top: 10px; width: auto; padding: 0; margin: 0; border: 0; }
  .tbl:not(.keep):not(.xls-cols) tr:has(> td:first-child .check) > td:nth-child(2) { display: block; text-align: left; font-size: 16px; font-weight: 600; padding: 4px 0 10px 40px; margin-bottom: 4px; border-bottom: 1px solid var(--line); min-height: 36px; }
  .tbl:not(.keep):not(.xls-cols) tr:has(> td:first-child .check) > td:nth-child(2)::before { display: none; }
}
@media (max-width: 760px) { .overlay { z-index: 150; } }
@media (max-width: 760px) {
  .tbl:not(.keep):not(.xls-cols) td:not(:first-child):has(> .muted:only-child) { display: none; }
}
@media (max-width: 760px) {
  .panel .tbl:not(.keep):not(.xls-cols) tr { box-shadow: none; background: var(--bg); border-color: transparent; }
  .panel .tbl:not(.keep):not(.xls-cols) tbody tr:hover { background: var(--bg); }
}
@media (max-width: 760px) {
  .toolbar > select.input.sm { flex: 1 1 calc(50% - 8px); min-width: 0; width: auto; }
  .toolbar > input.input.sm { flex: 1 1 100%; width: auto; }
}
body.authing #tabbar, body.authing #drawer-backdrop { display: none !important; }
@media (max-width: 760px) {
  .charts > *, .kpis > *, .stats > *, .temp-stats > *, .two-col > * { min-width: 0; }
  .kpi b, .stat-val { overflow-wrap: anywhere; }
  .months { gap: 6px; }
}
@media (max-width: 360px) {
  .stat-val, .kpi b { font-size: 18px; }
  .funnel-row { grid-template-columns: 70px 1fr 74px; }
  .page { padding: 12px 12px 18px; }
}

/* ---------- Gerar listas (administradores) ---------- */
.lists-intro { font-size: 13.5px; line-height: 1.5; }
.lists-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 4px; }
.lmode { display: flex; flex-wrap: wrap; gap: 8px; }
.lmode-opt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; background: #fff; }
.lmode-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, #fff); color: var(--primary-dark); font-weight: 500; }
.lcheck { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 14px; cursor: pointer; }
.lcheck input { margin-top: 3px; }
.lists-bar { height: 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: 6px 0; }
.lists-bar i { display: block; height: 100%; background: var(--gradient-brand); transition: width .3s; }
.lists-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.lead-list { display: flex; flex-direction: column; gap: 10px; }
.lead-card { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; }
.lead-card.made { background: color-mix(in srgb, var(--teal) 7%, #fff); }
.lead-sel { padding-top: 2px; }
.lead-sel input { width: 18px; height: 18px; }
.lead-main { flex: 1; min-width: 0; }
.lead-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.lead-head b { font-size: 15px; margin-right: 4px; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.lead-grid .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lead-grid .v { overflow-wrap: anywhere; }
.lead-more { margin-top: 8px; font-size: 13px; }
.lead-more summary { cursor: pointer; color: var(--primary-dark); font-weight: 500; }
.lead-more p { margin: 6px 0; line-height: 1.5; white-space: pre-wrap; }
.lead-src { margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.lists-disc { margin-top: 14px; font-size: 13px; }
.lists-disc summary { cursor: pointer; font-weight: 500; }
.lists-disc ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {
  .lists-grid, .lead-grid { grid-template-columns: 1fr; }
  .lead-card { padding: 12px; }
  .lists-toolbar .btn { flex: 1 1 140px; }
}

/* =====================================================================
   Visual moderno — Insights e Gerar listas
   ===================================================================== */
/* ---------- Insights ---------- */
.ins-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ins-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.ins .kpis { gap: 14px; margin-bottom: 18px; }
.ins .kpi { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; background: #fff; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s; }
.ins .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-bold); }
.ins .kpi .k-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); margin-bottom: 12px; }
.ins .kpi small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }
.ins .kpi b { display: block; font: 600 23px/1.15 var(--font-display); margin: 3px 0 6px; letter-spacing: -.01em; }
.ins .kpi .k-sub { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ins .kpi.k-hero { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.ins .kpi.k-hero .k-ic { background: rgba(255,255,255,.22); color: #fff; }
.ins .kpi.k-hero small, .ins .kpi.k-hero .k-sub { color: rgba(255,255,255,.88); }
.ins-row { display: grid; grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: 16px; }
.ins .panel { border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px 22px; }
.ins .panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 4px 0; }
.donut { width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.donut-in { width: 98px; height: 98px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line); }
.donut-in b { font: 600 22px/1 var(--font-display); }
.donut-in small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 9px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend b { margin-left: auto; padding-left: 14px; }
.ins .temp-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ins .temp-stat { border-radius: 14px; background: var(--bg); border: 0; padding: 14px; gap: 4px; }
.ins .temp-stat b { font-size: 16px; }
.t-bar { width: 100%; height: 5px; background: #fff; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.t-bar i { display: block; height: 100%; background: var(--gradient-brand); border-radius: 99px; }
.ins .charts { margin-top: 16px; gap: 16px; }
.ins .funnel-row { grid-template-columns: 138px 1fr 118px; margin: 12px 0; }
.ins .funnel-row .nm { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ins .funnel-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ins .bar-track { background: var(--bg); border-radius: 99px; height: 14px; }
.ins .bar { border-radius: 99px; min-width: 6px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ins .months { height: 210px; gap: 12px; padding-top: 20px; background: repeating-linear-gradient(to top, transparent 0, transparent 34px, var(--line) 34px, var(--line) 35px); background-position: 0 -27px; border-radius: 10px; }
.ins .month .col-bar { max-width: 46px; border-radius: 12px 12px 4px 4px; background: linear-gradient(to top, var(--sage), var(--primary)); opacity: .5; transition: opacity .15s; }
.ins .month.now .col-bar, .ins .month:hover .col-bar { opacity: 1; }
.ins .month .lbl { font-weight: 500; text-transform: capitalize; }
.ins .month.now .lbl { color: var(--primary-dark); font-weight: 600; }
@media (max-width: 900px) { .ins-row { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ins-head { align-items: stretch; }
  .ins .kpi { padding: 14px; border-radius: 16px; }
  .ins .kpi .k-ic { width: 30px; height: 30px; margin-bottom: 8px; }
  .ins .kpi b { font-size: 19px; }
  .ins .panel { padding: 16px; border-radius: 16px; }
  .donut { width: 118px; height: 118px; } .donut-in { width: 84px; height: 84px; }
  .ins .funnel-row { grid-template-columns: 84px 1fr 86px; gap: 8px; }
  .ins .months { gap: 6px; }
}

/* ---------- Gerar listas ---------- */
.lg-hero { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 20px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, var(--side) 0%, var(--primary-dark) 55%, var(--primary) 100%); box-shadow: var(--shadow-bold); position: relative; overflow: hidden; }
.lg-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(73,120,196,.45), transparent 70%); pointer-events: none; }
.lg-hero .h1 { color: #fff; }
.lg-hero p { margin: 4px 0 0; color: rgba(255,255,255,.82); font-size: 14px; max-width: 560px; }
.lg-hero-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.lg-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lg-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lg-steps b { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; font-size: 12px; }
.lg-how { margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; font-size: 13.5px; }
.lg-how summary { cursor: pointer; font-weight: 500; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; list-style: none; }
.lg-how summary::-webkit-details-marker { display: none; }
.lg-how p { margin: 8px 0 2px; line-height: 1.55; color: #3a4556; }
.lg-panel { border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow-card); }
.lg-sec { display: flex; align-items: center; gap: 10px; font-size: 14.5px !important; font-weight: 600; margin: 22px 0 12px !important; }
.lg-sec:first-child { margin-top: 0 !important; }
.lg-sec i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-size: 12px; }
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mode-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mode-card:hover { border-color: var(--lilac); transform: translateY(-1px); }
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card.on, .mode-card:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, #fff); box-shadow: 0 0 0 3px var(--primary-soft); }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.mc-top { display: flex; align-items: center; justify-content: space-between; }
.mc-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; }
.mode-card.on .mc-ic, .mode-card:has(input:checked) .mc-ic { background: var(--gradient-brand); color: #fff; }
.mc-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--bg); color: var(--muted); }
.mc-tag.gratis { background: #39ac9924; color: #21806f; }
.mc-tag.profunda { background: #0063fe24; color: var(--primary-dark); }
.mode-card b { font-size: 14.5px; }
.mode-card small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mode-help { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.5; color: #3a4556; }
.lg-panel .input { border-radius: 12px; }
#lists-go { height: 44px; padding: 0 26px; font-size: 15px; border-radius: 14px; }
.lg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.lg-stats > div { background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.lg-stats b { display: block; font: 600 20px/1.1 var(--font-display); }
.lg-stats small { color: var(--muted); font-size: 12px; }
.lg-stats .ok b { color: #21806f; } .lg-stats .no b { color: var(--red); }
.lists-bar { height: 10px; background: var(--bg); border: 0; }
.lists-bar i { background: linear-gradient(90deg, var(--primary), var(--sage), var(--primary)); background-size: 200% 100%; animation: lgflow 1.6s linear infinite; }
@keyframes lgflow { to { background-position: -200% 0; } }
.pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); margin-right: 10px; animation: lgpulse 1.1s ease-in-out infinite; vertical-align: middle; }
@keyframes lgpulse { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.lists-toolbar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); padding: 10px 0; border-bottom: 1px solid var(--line); }
.lead-card { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(4,21,47,.04); transition: box-shadow .15s, border-color .15s; }
.lead-card:hover { box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.lead-av { width: 30px; height: 30px; border-radius: 10px; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.lead-head b { font-size: 15.5px; }
.chip.star { background: #eda71d24; color: #96690a; font-weight: 600; }
.lead-grid { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
@media (max-width: 760px) {
  .lg-hero { padding: 16px; border-radius: 16px; gap: 12px; }
  .lg-hero-ic { width: 42px; height: 42px; border-radius: 13px; }
  .lg-hero p { font-size: 13px; }
  .lg-steps { display: none; }
  .lg-panel { padding: 16px; border-radius: 16px; }
  .mode-cards { grid-template-columns: 1fr; gap: 8px; }
  .mode-card { padding: 12px 14px; }
  .lg-stats { gap: 8px; } .lg-stats > div { padding: 10px; } .lg-stats b { font-size: 20px; }
  #lists-go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lists-bar i, .pulse, .ins .bar { animation: none; transition: none; } }

/* ---------- Início moderno ---------- */
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 26px; border-radius: 22px; color: #fff; margin-bottom: 14px; background: linear-gradient(135deg, var(--side) 0%, var(--primary-dark) 58%, var(--primary) 100%); box-shadow: var(--shadow-bold); position: relative; overflow: hidden; }
.home-hero::after { content: ""; position: absolute; right: -50px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(73,120,196,.5), transparent 70%); pointer-events: none; }
.hh-main { display: flex; align-items: center; gap: 18px; min-width: 0; position: relative; z-index: 1; }
.hh-txt small { display: block; color: rgba(255,255,255,.75); font-size: 12.5px; letter-spacing: .02em; }
.hh-txt h1 { font: 600 24px/1.2 var(--font-display); color: #fff; margin: 2px 0; }
.hh-txt p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.hh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font-size: 12.5px; font-weight: 500; text-decoration: none; transition: background .15s; }
.hh-pill:hover { background: rgba(255,255,255,.28); }
.hh-pill.warn { background: #eda71d; color: #3b2a00; }
.hh-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hh-btn { background: #fff; color: var(--primary-dark); border-color: transparent; font-weight: 600; height: 40px; border-radius: 12px; }
.hh-btn:hover { background: #f6f3fb; }
.hh-btn.ghost { background: rgba(255,255,255,.14); color: #fff; }
.hh-btn.ghost:hover { background: rgba(255,255,255,.26); }
.home-period { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.home .stats { gap: 14px; margin-bottom: 18px; }
.home .stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s; }
.home .stat::before { display: none; }
.home .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-bold); }
.st-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.st-body { min-width: 0; }
.home .stat-head { font-size: 12.5px; }
.home .stat-val { margin-top: 2px; font-size: 25px; }
.home .panel { border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px 22px; }
.home .panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.home .feed-item { padding: 10px 8px; margin: 0 -8px; border-radius: 12px; border-top: 0; transition: background .15s; }
.home .feed-item:hover { background: var(--bg); }
.home .feed-item .tl-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-dark); }
.home .feed-item .tl-ic.fi-note { background: #eda71d24; color: #96690a; }
.home .feed-item .tl-ic.fi-flag { background: #39ac9924; color: #21806f; }
.empty-mini { color: var(--muted); font-size: 13.5px; padding: 18px 0; text-align: center; }
.home .mini-chart { gap: 14px; height: 200px; }
.home .mini-bar { max-width: 60px; border-radius: 12px 12px 4px 4px; transition: height .4s cubic-bezier(.2,.8,.2,1); }
.home .mini-n { font: 600 14px/1 var(--font-display); }
@media (max-width: 760px) {
  .home-hero { padding: 18px; border-radius: 18px; gap: 14px; }
  .hh-main { gap: 12px; align-items: flex-start; }
  .hh-txt h1 { font-size: 22px; }
  .hh-actions { width: 100%; } .hh-btn { flex: 1; justify-content: center; }
  .home-period { justify-content: stretch; }
  .home .stat { padding: 12px; gap: 10px; border-radius: 16px; }
  .st-ic { width: 36px; height: 36px; border-radius: 11px; }
  .home .stat-val { font-size: 19px; }
  .home .panel { padding: 16px; border-radius: 16px; }
}
.home .stat-val { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 760px) { .home .stat-val { font-size: 17px; } .home .st-body { min-width: 0; } .hh-pills { gap: 6px; } .hh-pill { padding: 4px 10px; font-size: 12px; } }

/* =====================================================================
   Visual moderno — todas as páginas (administrador e usuário)
   ===================================================================== */
.h1 { font-size: 28px; letter-spacing: -.01em; }
.pg-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pg-title .h1 { margin: 0; }
.pg-sub { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.pg-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-search { position: relative; }
.list-search .s-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.list-search .input { padding-left: 34px; width: min(270px, 100%); border-radius: 12px; height: 38px; background: #fff; }
.pg-actions .btn.primary { height: 38px; border-radius: 12px; padding: 0 16px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill-row .pill { background: #fff; border: 1px solid var(--line); padding: 7px 16px; box-shadow: 0 1px 2px rgba(4,21,47,.04); }
.pill-row .pill:hover:not(.on) { border-color: var(--lilac); color: var(--primary-dark); }
.pill-row .pill.on { background: var(--gradient-brand); border-color: transparent; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn { border-radius: 12px; }
.input { border-radius: 12px; }
.table-wrap { border-radius: 18px; border-color: var(--line); }
.tbl th { background: #f8fafd; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; }
.tbl td { padding: 13px 16px; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, #fff); }
.avatar { background: var(--gradient-brand); }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.cell-name { font-weight: 600; }
.act-type { padding: 3px 11px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); font-size: 12.5px; font-weight: 500; }
.late-txt { color: var(--red); font-weight: 600; }
.empty { padding: 56px 20px; }
.empty b { font: 600 18px/1.3 var(--font-display); }
/* Negócios: barra de ferramentas e cartões do kanban */
.toolbar .seg { border-radius: 12px; border-color: var(--line); box-shadow: 0 1px 2px rgba(4,21,47,.04); }
.toolbar .seg-btn { height: 34px; padding: 0 13px; }
.toolbar .seg-btn.on { background: var(--gradient-brand); color: #fff; }
.toolbar .btn.primary { height: 36px; border-radius: 12px; padding: 0 16px; }
.toolbar .input.sm { height: 36px; border-radius: 12px; background: #fff; }
.card { border-radius: 16px; padding: 12px 14px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.card:hover { transform: translateY(-2px); }
.card-title { font-size: 14.5px; }
.col-head { border-radius: 16px; }
.col-body { border-radius: 16px; }
/* Telas internas */
.panel h2 { letter-spacing: -.005em; }
.side-card, .composer, .tl-item { border-radius: 16px; }
.modal-head h3 { font: 600 18px/1.3 var(--font-display); }
@media (max-width: 760px) {
  .h1 { font-size: 24px; }
  .pg-head { align-items: stretch; }
  .pg-actions { width: 100%; }
  .pg-actions .btn.primary { flex: none; }
  .list-search { flex: 1; } .list-search .input { width: 100%; }
}
/* Grupos de filtros longos quebram em linhas no celular (Histórico etc.) */
@media (max-width: 760px) {
  .seg.seg-wrap { display: flex; flex-wrap: wrap; gap: 6px; border: 0; background: none; box-shadow: none; overflow: visible; }
  .seg.seg-wrap .seg-btn { border: 1px solid var(--line) !important; border-radius: 99px; background: #fff; height: 34px; padding: 0 14px; }
  .seg.seg-wrap .seg-btn.on { background: var(--gradient-brand); color: #fff; border-color: transparent !important; }
}
/* Telas de login/consentimento: o fundo cobre a tela inteira no celular */
body.authing { min-height: 100vh; min-height: 100dvh; background-attachment: fixed; }
.auth { min-height: 100vh; min-height: 100dvh; }
.ins .kpi b { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 760px) { .ins .kpi b { font-size: 17px; } .ins .kpi .k-sub { overflow-wrap: anywhere; } }
@media (max-width: 760px) { .ins .kpi b, .home .stat-val { font-size: clamp(14px, 4.6vw, 17px); } .ins .kpi { min-width: 0; } }

/* ---------- Aquecimento por WhatsApp ---------- */
.chip.warm { background: #eda71d24; color: #96690a; font-weight: 600; text-decoration: none; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 10px; }
.wm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.wm-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wm-card small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.wm-card b { font: 600 22px/1.1 var(--font-display); }
.wm-card .hint { margin: 0; }
.wm-test { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; font-size: 13.5px; }
.wm-test summary { cursor: pointer; font-weight: 500; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; list-style: none; }
.wm-test summary::-webkit-details-marker { display: none; }
.wm-test-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wm-test-row .input { height: 36px; }
.wm-batch { border-radius: 18px; }
.wm-bh { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.wm-bh h2 { margin: 0 0 2px !important; }
.wm-bh .hint { margin: 0; line-height: 1.5; }
.wm-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 12px; font-size: 13px; color: var(--muted); }
.wm-stats b { color: var(--ink); font-size: 15px; }
.wm-stats .ok b { color: #21806f; } .wm-stats .no b { color: var(--red); }
.wm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-reply { font-style: italic; color: #3a4556; }
.wm-live { margin: 0 0 10px; }
.wm-prev { white-space: pre-wrap; background: #e7f6dc; border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; color: #1f2b17; }
.wm-h { margin: 14px 0 8px; font-size: 14px; }
@media (max-width: 760px) { .wm-actions .btn { flex: 1 1 140px; } .wm-bh { gap: 6px; } }
@media (max-width: 760px) { .wm-cards { grid-template-columns: 1fr 1fr; gap: 8px; } .wm-card { padding: 12px; } .wm-card:last-child { grid-column: 1 / -1; } .wm-card b { font-size: 22px; } }

/* ---------- Aquecimento: conversas, etiquetas e conexão ---------- */
.nav-badge { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #eda71d; color: #3b2a00; display: inline-grid; place-items: center; }
.pill-n { font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #eda71d; color: #3b2a00; display: inline-grid; place-items: center; margin-left: 6px; }
.wm-lab { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); white-space: nowrap; }
.wm-lab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.wm-labs { display: flex; flex-wrap: wrap; gap: 5px; }
.wm-chat { display: grid; grid-template-columns: 340px 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; min-height: 560px; height: calc(100vh - 250px); }
.wm-clist { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wm-cfilter { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.wm-cfilter .input { height: 38px; }
.wm-cfilter .pill-row { margin: 0; gap: 6px; } .wm-cfilter .pill { padding: 4px 11px; font-size: 12px; }
#wm-chat-list { overflow-y: auto; flex: 1; }
.wm-citem { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.wm-citem:hover, .wm-citem.on { background: color-mix(in srgb, var(--primary) 7%, #fff); }
.wm-citem.unread b { color: var(--primary-dark); }
.wm-cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wm-cmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.wm-cmain small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-ctime { font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.wm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); display: block; }
.wm-cthread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f4ef; }
.wm-empty-chat { margin: auto; text-align: center; color: var(--muted); padding: 20px; max-width: 280px; }
.wm-chead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.wm-ctitle { display: flex; flex-direction: column; min-width: 0; }
.wm-ctitle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-ctitle small { color: var(--muted); }
.wm-back { display: none; }
.wm-cbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.wm-cacts { display: flex; gap: 6px; flex-wrap: wrap; }
.wm-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.wm-msg { display: flex; flex-direction: column; max-width: 78%; }
.wm-msg.out { align-self: flex-end; align-items: flex-end; } .wm-msg.in { align-self: flex-start; }
.wm-bubble { white-space: pre-wrap; overflow-wrap: anywhere; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.wm-msg.out .wm-bubble { background: #dcf3c9; border-bottom-right-radius: 4px; }
.wm-msg.in .wm-bubble { background: #fff; border-bottom-left-radius: 4px; }
.wm-msg small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.wm-cfoot { padding: 8px 16px; font-size: 12px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.wm-labpick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wm-labrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm-conn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 14px; }
.wm-conn h2 { margin: 0 0 2px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-qr { margin-top: 12px; text-align: center; padding: 12px; background: var(--bg); border-radius: 14px; }
.wm-qr img { border-radius: 10px; background: #fff; padding: 8px; max-width: 100%; height: auto; }
.wm-copy { margin-top: 10px; } .wm-copy small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.wm-copy div { display: flex; gap: 8px; align-items: center; } .wm-copy code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; background: var(--bg); padding: 6px 8px; border-radius: 8px; }
.wm-test2 { margin-bottom: 14px; }
@media (max-width: 900px) {
  .wm-chat { grid-template-columns: 1fr; height: calc(100vh - 230px); min-height: 480px; }
  .wm-chat .wm-cthread { display: none; }
  .wm-chat.open .wm-clist { display: none; } .wm-chat.open .wm-cthread { display: flex; }
  .wm-back { display: grid; }
  .wm-msg { max-width: 88%; }
}
@media (max-width: 760px) { .wm-conn-grid { grid-template-columns: 1fr; } .wm-chat { height: calc(100dvh - 280px); border-radius: 16px; } }

/* ---------- Editor da primeira mensagem ---------- */
.wm-editor .wm-modes { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.wm-editor .mode-card { padding: 11px 13px; }
.wm-editor .mode-card.off { opacity: .55; cursor: not-allowed; }
.wm-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.wm-vars small { color: var(--muted); }
.wm-var { border: 1px solid var(--line-strong); background: #fff; border-radius: 99px; padding: 3px 10px; font: 500 12px var(--font-sans); color: var(--primary-dark); cursor: pointer; }
.wm-var:hover { background: var(--primary-soft); }
.wm-vars .input.sm { height: 30px; min-width: 140px; font-size: 12.5px; margin-left: auto; }
.wm-prevbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.wm-prevbar .input.sm { height: 30px; min-width: 150px; max-width: 220px; margin-left: 6px; }
@media (max-width: 760px) { .wm-editor .wm-modes { grid-template-columns: 1fr; } .wm-vars .input.sm { margin-left: 0; width: 100%; } }

/* =====================================================================
   ERP: setores, Marketing e Projetos internos
   ===================================================================== */
.sector-switch { position: relative; margin: 0 12px 6px; }
.sector-cur, .sector-one { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: var(--side-ink); font: 600 13.5px var(--font-sans); cursor: pointer; text-align: left; }
.sector-cur span { flex: 1; }
.sector-cur:hover { background: rgba(255,255,255,.13); }
.sector-one { margin: 0 12px 6px; width: auto; cursor: default; }
.sector-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; padding: 6px; min-width: 210px; }
.sector-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.sector-opt:hover { background: var(--bg); }
.sector-opt.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.sector-opt.soon { color: var(--muted); }
.sector-opt em { margin-left: auto; font-style: normal; font-size: 10.5px; background: var(--bg); border-radius: 99px; padding: 1px 8px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(231,226,239,.5); padding: 8px 14px 2px; }
body.collapsed .sector-cur span, body.collapsed .sector-cur .ic:last-child, body.collapsed .sector-one span, body.collapsed .nav-label { display: none; }
body.collapsed .sector-switch, body.collapsed .sector-one { margin: 0 8px 6px; }
body.collapsed .sector-cur, body.collapsed .sector-one { justify-content: center; padding: 10px 0; }

.wk-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); white-space: nowrap; }
.wk-prio { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.wk-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.wk-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.wk-due.late { color: var(--red); font-weight: 600; }
.wk-avs { display: inline-flex; } .wk-avs > span + span { margin-left: -6px; } .wk-avs .avatar { border: 2px solid #fff; }
.wk-more { font-size: 11px; color: var(--muted); padding-left: 4px; }
.wk-bar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: 8px 0 4px; }
.wk-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c, var(--primary)), var(--sage)); }
.wk-bar.big { height: 10px; margin: 12px 0 0; }
.wk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wk-note { margin: 6px 0 0; font-style: italic; color: #3a4556; }
.wk-desc { white-space: pre-wrap; line-height: 1.55; margin: 0; }
.wk .two-col { margin-bottom: 16px; }
.wk .panel { border-radius: 18px; box-shadow: var(--shadow-card); }
.wk .panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.wk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.wk-kpi { position: relative; display: block; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.wk-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-bold); }
.wk-kpi .k-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-dark); margin-bottom: 10px; }
.wk-kpi small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.wk-kpi b { display: block; font: 600 22px/1.15 var(--font-display); margin: 2px 0 4px; }
.wk-kpi .k-sub { color: var(--muted); font-size: 12px; }
.wk-kpi.hero { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.wk-kpi.hero .k-ic { background: rgba(255,255,255,.22); color: #fff; } .wk-kpi.hero small, .wk-kpi.hero .k-sub { color: rgba(255,255,255,.9); }
.wk-kpi.warn .k-ic { background: #d32c2c1f; color: var(--red); } .wk-kpi.warn b { color: var(--red); }
.wk-trow { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.wk-trow:first-of-type { border-top: 0; } .wk-trow:hover { background: var(--bg); }
.wk-trow.done .wk-tmain b { text-decoration: line-through; color: var(--muted); }
.wk-tmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wk-tmain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wk-tmain small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-group h2 .muted { font-weight: 400; font-size: 13px; }
.wk-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.wk-pcard { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s; }
.wk-pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-bold); }
.wk-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .wk-ph b { font-size: 15px; }
.wk-pcard small { color: var(--muted); }
.wk-pmeta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); } .wk-pmeta .late { color: var(--red); font-weight: 600; }
.wk-pfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.wk-budget { font-size: 12px; font-weight: 600; color: var(--primary-dark); }
.wk-phead { margin-bottom: 10px; }
.wk-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; text-decoration: none; margin-bottom: 6px; }
.wk-ptitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wk-ptitle .h1 { margin: 0; }
.wk-psub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 6px; } .wk-psub > span { display: inline-flex; align-items: center; gap: 5px; }
.wk-tabs { margin-top: 12px; } .wk-tabs .pill { text-decoration: none; }
.wk-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.wk-nums div { background: var(--bg); border-radius: 12px; padding: 10px 12px; } .wk-nums small { display: block; color: var(--muted); font-size: 12px; } .wk-nums b { font: 600 18px var(--font-display); }
.wk-sbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 70px; gap: 10px; align-items: center; margin: 7px 0; font-size: 13px; }
.wk-sbar > div { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; } .wk-sbar i { display: block; height: 100%; border-radius: 99px; min-width: 2px; } .wk-sbar b { text-align: right; font-size: 12.5px; }
.wk-team { display: flex; flex-wrap: wrap; gap: 8px; } .wk-member { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border-radius: 99px; padding: 4px 12px 4px 5px; font-size: 13px; text-decoration: none; color: var(--ink); }
.wk-strow { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .wk-strow .input[type=color] { width: 44px; flex: none; } .wk-strow .input:not([type=color]):not(select) { flex: 1; min-width: 0; }
.wk-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.wk-col { flex: 0 0 280px; background: color-mix(in srgb, var(--c, #888) 4%, #f1eee9); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 290px); min-height: 160px; }
.wk-colhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 3px solid var(--c); margin-bottom: 8px; } .wk-colhead b { font-size: 13.5px; } .wk-colhead span { background: #fff; border-radius: 99px; font-size: 11.5px; padding: 1px 8px; color: var(--muted); }
.wk-colbody { flex: 1; overflow-y: auto; min-height: 40px; display: flex; flex-direction: column; gap: 8px; padding: 2px; border-radius: 10px; } .wk-colbody.over { background: color-mix(in srgb, var(--primary) 12%, transparent); outline: 2px dashed var(--lilac); }
.wk-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 12px; padding: 10px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(4,21,47,.05); transition: box-shadow .15s, transform .15s; }
.wk-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); } .wk-card.dragging { opacity: .4; } .wk-card.done .wk-ct b { text-decoration: line-through; color: var(--muted); }
.wk-ct { display: flex; gap: 8px; align-items: flex-start; } .wk-ct b { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .wk-ct .wk-prio { margin-top: 5px; }
.wk-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .wk-tags span { background: var(--primary-soft); color: var(--primary-dark); border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 500; }
.wk-cm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); } .wk-mi { display: inline-flex; align-items: center; gap: 3px; }
.wk-appr { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; } .wk-appr.pend { background: #eda71d26; color: #96690a; } .wk-appr.adj { background: #d32c2c1a; color: var(--red); } .wk-appr.ok { background: #39ac9926; color: #21806f; }
.wk-quick { margin-top: 8px; } .wk-quick .input { height: 34px; background: transparent; border-style: dashed; font-size: 13px; } .wk-quick .input:focus { background: #fff; border-style: solid; }
.wk-mv { margin-top: 8px; width: 100%; height: 30px; font-size: 12px; }
.wk-calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .wk-calhead h2 { margin: 0 8px !important; text-transform: capitalize; flex: 1; }
.wk-calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .wk-dow { display: contents; } .wk-dow span { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
.wk-day { min-height: 96px; background: var(--bg); border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .wk-day.out { background: transparent; cursor: default; } .wk-day.today { outline: 2px solid var(--primary); background: #fff; }
.wk-dn { font-size: 12px; font-weight: 600; color: var(--muted); } .wk-day.today .wk-dn { color: var(--primary-dark); }
.wk-evt { text-align: left; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); border-radius: 5px; padding: 2px 6px; font: 500 11.5px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .wk-evt.done { text-decoration: line-through; opacity: .6; }
.wk-gtools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .wk-gtools .pill { border: 1px solid var(--line); background: #fff; } .wk-gtools .pill.on { background: var(--primary); color: #fff; }
.wk-gwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; } .wk-gin { position: relative; }
.wk-ghead, .wk-grow { display: flex; border-bottom: 1px solid var(--line); } .wk-ghead { background: #f8fafd; }
.wk-glabel { width: 220px; flex: none; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: 13px; position: sticky; left: 0; background: #fff; z-index: 3; border-right: 1px solid var(--line); overflow: hidden; } .wk-ghead .wk-glabel { background: #f8fafd; }
.wk-glabel a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wk-glabel small { margin-left: auto; color: var(--muted); } .wk-glabel.sub { padding-left: 32px; cursor: pointer; color: #3a4556; } .wk-glabel.sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-gtog { border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; padding: 0; }
.wk-gtrack { position: relative; height: 38px; flex: none; } .wk-ghead .wk-gtrack { height: 44px; }
.wk-gmonths { display: flex; height: 22px; } .wk-gmonths span { font-size: 11px; font-weight: 600; text-transform: capitalize; color: var(--muted); padding: 3px 6px; border-left: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.wk-gticks { position: relative; height: 22px; } .wk-gticks span { position: absolute; top: 0; text-align: center; font-size: 10px; color: var(--muted); } .wk-gticks .we { background: #00000008; }
.wk-gbar { position: absolute; top: 9px; height: 20px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; padding: 0 6px; overflow: hidden; white-space: nowrap; cursor: pointer; display: flex; align-items: center; opacity: .92; } .wk-gbar.proj { top: 7px; height: 24px; opacity: 1; font-weight: 600; } .wk-gbar.done { opacity: .45; } .wk-gbar.late { outline: 2px solid var(--red); }
.wk-gbar span { overflow: hidden; text-overflow: ellipsis; }
.wk-gtoday { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .6; z-index: 2; pointer-events: none; }
.wk-ts th.today, .wk-ts td.today { background: var(--primary-soft); } .wk-ts .wk-tot td { background: #f8fafd; }
.wk-appcard { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; } .wk-appcard .wk-tmain { cursor: pointer; min-width: 220px; } .wk-appcard .wk-tmain b { white-space: normal; }
.wk-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wk-ccard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-card); cursor: pointer; transition: transform .18s; } .wk-ccard:hover { transform: translateY(-2px); }
.wk-cav { width: 42px; height: 42px; border-radius: 13px; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; }
.wk-ccard > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wk-ccard small { color: var(--muted); }
.wk-cstats { width: 100%; display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); } .wk-cstats b { color: var(--ink); }
.wk-pcard.tpl { border-top-color: var(--primary); } .wk-tdet { margin-top: 6px; font-size: 13px; } .wk-tdet summary { cursor: pointer; color: var(--primary-dark); font-weight: 500; } .wk-tdet ul { margin: 6px 0 6px 18px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.wk-soon { text-align: center; padding: 34px 24px; } .wk-soon-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 12px; background: var(--primary-soft); color: var(--primary-dark); } .wk-soon ul { text-align: left; display: inline-flex; flex-direction: column; gap: 4px; margin: 6px 0 14px; }
.wk-timer { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d32c2c40; background: #d32c2c12; color: var(--red); border-radius: 99px; padding: 5px 12px; font: 600 12.5px var(--font-sans); cursor: pointer; max-width: 260px; } .wk-timer i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: lgpulse 1.1s ease-in-out infinite; flex: none; } .wk-timer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; }
.wk-ov { display: flex; justify-content: flex-end; align-items: stretch; padding: 0; background: rgba(4,21,47,.45); }
.wk-drawer { width: min(560px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -18px 0 45px rgba(4,21,47,.22); border-top: 5px solid var(--pc); overflow-y: auto; animation: wkslide .22s ease-out; }
@keyframes wkslide { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.wk-dh { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; } .wk-dpath { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .wk-dpath a { color: var(--primary-dark); text-decoration: none; font-weight: 600; }
.wk-dbody { padding: 14px 18px 8px; flex: 1; }
.wk-dtitle { width: 100%; border: 1px solid transparent; border-radius: 10px; font: 600 18px/1.3 var(--font-display); padding: 6px 8px; margin: 0 -8px 10px; background: none; color: var(--ink); } .wk-dtitle:hover, .wk-dtitle:focus { border-color: var(--line); outline: 0; background: #fff; }
.wk-dmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .wk-dmeta label span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; margin-bottom: 3px; } .wk-dmeta .input { height: 36px; }
.wk-dsec { margin: 16px 0; } .wk-dsec h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wk-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wk-ck { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 14px; } .wk-ck .done { text-decoration: line-through; color: var(--muted); }
.wk-inline { display: flex; gap: 8px; margin-top: 6px; } .wk-inline .input { flex: 1; min-width: 0; } .wk-inline.two { flex-wrap: wrap; } .wk-inline textarea { resize: vertical; }
.wk-approval { background: var(--bg); border-radius: 14px; padding: 12px 14px; } .wk-approval.pendente { background: #eda71d1c; } .wk-approval.aprovado { background: #39ac991c; } .wk-approval.ajustes { background: #d32c2c14; }
.wk-cmt { display: flex; gap: 10px; margin: 10px 0; } .wk-cmt p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.wk-dfoot { display: flex; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; }
.wk-sw { cursor: pointer; } .wk-sw input { position: absolute; opacity: 0; } .wk-sw i { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); } .wk-sw input:checked + i { border-color: #fff; box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 900px) { .wk-col { flex-basis: 250px; } }
@media (max-width: 760px) {
  .wk-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .wk-kpi { padding: 12px; border-radius: 16px; } .wk-kpi b { font-size: clamp(16px, 5vw, 21px); }
  .wk-pgrid, .wk-cgrid { grid-template-columns: 1fr; } .wk-col { flex-basis: 84vw; max-height: none; } .wk-dmeta { grid-template-columns: 1fr; } .wk-drawer { width: 100%; }
  .wk-day { min-height: 62px; padding: 3px; } .wk-evt { font-size: 10px; padding: 1px 4px; } .wk-trow { flex-wrap: wrap; } .wk-trow .wk-tmain { flex-basis: calc(100% - 50px); }
  .wk-sbar { grid-template-columns: 90px 1fr 60px; } .wk-timer span { display: none; } .wk-glabel { width: 130px; } .wk-psub { gap: 8px; }
}

/* ===== Financeiro ===== */
.fin .wk-bh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin .wk-nums.fin-sum { margin-bottom: 14px; }
.fin .wk-nums b.late-txt, .fin .late-txt { color: var(--red); }
.fin-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.fin-amt.receita { color: #1f8a76; } .fin-amt.despesa { color: var(--red); }
.fin-big { font: 600 18px/1.2 var(--font-display); } .fin-big.receita { color: #1f8a76; } .fin-big.despesa { color: var(--red); }
.fin-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.fin-row:last-child { border-bottom: 0; } .fin-row:hover { background: var(--bg); }
.fin-ty { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; }
.fin-ty.receita { background: #39ac9922; color: #1f8a76; } .fin-ty.despesa { background: #d32c2c1a; color: var(--red); }
.fin-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 6px; }
.fin-chart.wide { height: 170px; }
.fin-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.fin-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.fin-bars i { display: block; width: 36%; max-width: 22px; min-height: 3px; border-radius: 6px 6px 2px 2px; }
.fin-bars i.in, .fin-dot.in { background: #39ac99; } .fin-bars i.out, .fin-dot.out { background: #ed6c1d; }
.fin-col small { color: var(--muted); font-size: 11.5px; }
.fin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; }
.fin-month { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.fin-month b { min-width: 118px; text-align: center; }
.fin-dre-l { min-width: 140px; text-align: center; }
.fin-dre tr.tot td { font-weight: 700; background: var(--bg); } .fin-dre tr.neg td:nth-child(2) { color: var(--red); }
.fin-dre td:not(:first-child), .fin-dre th:not(:first-child) { text-align: right; white-space: nowrap; }
.fin-dre .ind { display: inline-block; width: 16px; }
.fin-contract.off { opacity: .55; }
.fin-off { opacity: .55; }
.fin-cat { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.fin-cat:hover { background: var(--bg); } .fin-cat i { width: 12px; height: 12px; border-radius: 50%; flex: none; } .fin-cat small { margin-left: auto; text-align: right; }
.fin-conc { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--line); cursor: pointer; flex-wrap: wrap; }
.fin-conc.ok { background: #39ac9910; } .fin-conc input { width: 18px; height: 18px; accent-color: var(--primary); }
.fin-conc small { color: var(--muted); } .fin-conc .spacer { flex: 1; }
.fin-ext .input { margin: 6px 0 4px; width: 100%; }
.fin-paidnow { align-self: end; padding-bottom: 10px; }
@media (max-width: 760px) {
  .fin-row { flex-wrap: wrap; gap: 8px; } .fin-row .wk-tmain { flex-basis: calc(100% - 50px); }
  .fin-month { margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .fin-chart { gap: 6px; } .fin-conc .spacer { display: none; }
  .fin-dre td, .fin-dre th { font-size: 12.5px; padding: 8px 8px; }
}

/* ===== Formulários, NPS e onboarding ===== */
.wk-bh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-dark); flex: none; }
.nps-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.nps-chip b { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 99px; background: var(--c); color: #fff; font-size: 12px; }
.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; margin-top: 6px; }
.nps-scale label { position: relative; cursor: pointer; }
.nps-scale input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.nps-scale span { display: grid; place-items: center; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; transition: all .12s; }
.nps-scale input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); }
.nps-scale input:focus-visible + span { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.form-link { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.form-link small { color: var(--muted); } .form-link input { font-size: 12.5px; }
.form-link-act { display: flex; gap: 8px; flex-wrap: wrap; }
.form-ans { margin: 0; } .form-ans dt { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 10px; }
.form-ans dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .nps-scale { grid-template-columns: repeat(6, 1fr); } }

/* ===== Menu por setores (setor em destaque; as funções aparecem só no setor aberto) ===== */
.nav.secs { gap: 6px; }
.sec { border-radius: 16px; transition: background .18s; }
.sec.open { background: rgba(255,255,255,.07); padding-bottom: 6px; }
.sec-head { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px 0 8px; border-radius: 14px; color: #e9e4f2; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .005em; white-space: nowrap; overflow: hidden; }
.sec-head:hover { background: rgba(255,255,255,.1); color: #fff; }
.sec-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--sc) 30%, transparent); color: #fff; transition: background .18s, transform .18s; }
.sec.open .sec-ic { background: var(--sc); box-shadow: 0 4px 14px color-mix(in srgb, var(--sc) 55%, transparent); }
.sec-head:hover .sec-ic { transform: scale(1.06); }
.sec-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sec-head em { font-style: normal; font-size: 10px; font-weight: 500; background: rgba(255,255,255,.14); border-radius: 99px; padding: 1px 8px; }
.sec-chev { display: grid; opacity: .55; transition: transform .2s; transform: rotate(-90deg); }
.sec.open .sec-chev { transform: none; opacity: .9; }
.sec.open .sec-head { color: #fff; }
.sec-items { display: flex; flex-direction: column; gap: 2px; margin: 4px 6px 2px 24px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--sc) 55%, transparent); animation: sec-in .18s ease; }
.sec-items .nav-item { height: 36px; font-size: 14px; }
@keyframes sec-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.collapsed .sec-name, .collapsed .sec-chev, .collapsed .sec-head em { display: none; }
.collapsed .sec-head { justify-content: center; padding: 0; }
.collapsed .sec.open { background: none; }
.collapsed .sec-items { margin: 2px 0; padding: 0; border: 0; align-items: center; }
@media (max-width: 760px) { #sidebar .sec-name, body.collapsed #sidebar .sec-name, #sidebar .sec-chev, body.collapsed #sidebar .sec-chev { display: block; } #sidebar .sec-head, body.collapsed #sidebar .sec-head { justify-content: flex-start; padding: 0 12px 0 8px; } #sidebar .sec-items, body.collapsed #sidebar .sec-items { margin: 4px 6px 2px 24px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--sc) 55%, transparent); align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .sec-items { animation: none; } }

/* ===== Geral (painel executivo) ===== */
.geral-alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--bg); border-left: 4px solid var(--c, #8a94a6); transition: transform .12s, background .12s; }
.geral-alert:hover { transform: translateX(3px); background: #fff; box-shadow: var(--shadow-card); }
.geral-alert > span:nth-child(2) { flex: 1; font-size: 14px; }
.geral-alert.red { --c: #d32c2c; } .geral-alert.orange { --c: #ed6c1d; } .geral-alert.blue { --c: #3c8cdd; }
.ga-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); flex: none; }
.geral-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.geral-sec { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fff; transition: transform .15s, box-shadow .15s; }
.geral-sec:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.geral-sec .sec-ic { background: var(--sc); }
.geral-sec b { display: block; } .geral-sec small { color: var(--muted); }
.sec-head { gap: 10px; padding: 0 8px 0 7px; font-size: 14.5px; }
.sec-ic { width: 32px; height: 32px; }
.sec-head em { display: none; }
.sec-items { margin-left: 20px; }
.sec-items .nav-item { gap: 10px; padding: 0 10px; font-size: 13.5px; }

/* ===== RH e Administrativo ===== */
.warn-txt { color: #b87800; font-weight: 600; }
.rec-board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.rec-col { background: var(--bg); border-radius: 16px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.rec-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 3px solid var(--c); margin-bottom: 2px; }
.rec-h span { background: #fff; border-radius: 99px; padding: 0 9px; font-size: 12px; font-weight: 600; }
.rec-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; box-shadow: var(--shadow-card); }
.rec-card:hover { box-shadow: var(--shadow-bold); }
.rec-card small { color: var(--muted); } .rec-meta { display: flex; gap: 6px; align-items: center; color: #eda71d; font-size: 13px; } .rec-card select { margin-top: 4px; }
.ck-item { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-size: 13.5px; } .ck-done { text-decoration: line-through; color: var(--muted); }
@media (max-width: 760px) { .rec-board { grid-template-columns: repeat(6, 78vw); scroll-snap-type: x mandatory; } .rec-col { scroll-snap-align: start; } }
button.sec-head { width: 100%; border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; }
.sec.cur .sec-ic { background: var(--sc); box-shadow: 0 4px 14px color-mix(in srgb, var(--sc) 55%, transparent); }
.sec.cur .sec-head { color: #fff; }
.sec.cur:not(.open) { background: rgba(255,255,255,.05); }

/* ===== Aprovação do cliente, calendário editorial e arquivos ===== */
.cap-it { border: 1px solid var(--line); border-left: 4px solid #39ac99; border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.cap-it.adj { border-left-color: #d32c2c; } .cap-it-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .cap-it p { margin: 6px 0; white-space: pre-wrap; }
.ed-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.ed-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; } .ed-st i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .ed-st.total { background: none; border: 0; color: var(--muted); }
.ed-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ed-dow { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.ed-day { min-height: 112px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-day.pad { background: none; border: 0; } .ed-day.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ed-n { display: flex; justify-content: space-between; align-items: center; border: 0; background: none; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 0 2px; text-align: left; }
.ed-n i { font-style: normal; opacity: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; font-size: 13px; } .ed-day:hover .ed-n i { opacity: 1; }
.ed-wd { display: none; text-transform: capitalize; }
.ed-post { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 7px; padding: 4px 6px; font: inherit; font-size: 12px; line-height: 1.25; cursor: pointer; overflow: hidden; }
.ed-post:hover { background: color-mix(in srgb, var(--c) 22%, #fff); } .ed-post em { display: block; font-style: normal; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-post small { font-weight: 600; } .ed-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
@media (max-width: 760px) { .ed-grid { grid-template-columns: 1fr; } .ed-dow, .ed-day.pad { display: none; } .ed-day:not(.has) { display: none; } .ed-day { min-height: 0; } .ed-wd { display: inline; } .ed-n i { opacity: 1; } }

/* ===== Áreas do Marketing e capacidade ===== */
.nav-label.sub { padding: 8px 8px 2px; margin-top: 2px; }
.cp-cell { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 9px; border-radius: 9px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.cp-cell small { font-weight: 400; opacity: .7; font-size: 11px; }
.cp-cell.low { background: #3c8cdd1f; color: #2467a8; } .cp-cell.ok { background: #39ac9922; color: #1f8a76; } .cp-cell.high { background: #eda71d30; color: #8a5a00; } .cp-cell.over { background: #d32c2c26; color: #b01f1f; }
.tbl.cp td, .tbl.cp th { text-align: center; } .tbl.cp td:first-child, .tbl.cp th:first-child { text-align: left; }
.pf-bar { display: inline-block; width: 54px; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; vertical-align: middle; margin-right: 4px; } .pf-bar i { display: block; height: 100%; border-radius: 99px; }
.hl-score { display: flex; align-items: center; gap: 12px; } .hl-score b { font: 600 29px/1 var(--font-display); min-width: 54px; } .hl-score .wk-bar { flex: 1; }
.hl-parts { display: flex; gap: 8px; align-items: flex-end; height: 54px; margin: 6px 0; }
.hl-p { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; background: var(--bg); border-radius: 8px; overflow: hidden; position: relative; } .hl-p i { display: block; width: 100%; border-radius: 0; } .hl-p small { position: absolute; bottom: 1px; font-size: 9px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.5); }
.hl-why { margin: 4px 0 0 16px; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.fin-idx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .fin-idx input { width: 74px; }
.sec-head { height: auto; min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
.sec-name { white-space: normal; line-height: 1.2; }

/* ===== Biblioteca ===== */
.lib-prev { color: var(--muted); font-size: 13px; margin: 4px 0; min-height: 2.6em; }
.lib-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lib-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; } .lib-opt:hover { border-color: var(--c); box-shadow: var(--shadow-card); } .lib-opt .sec-ic { background: var(--c); } .lib-opt small { display: block; color: var(--muted); }
.lib-start { max-height: 52vh; overflow: auto; }
.lib-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.lib-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); } .lib-link:hover { background: var(--bg); } .lib-link b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-link .chip { background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--c); font-weight: 600; }
.lib-steps { margin: 0; padding-left: 22px; } .lib-steps li { padding: 8px 0; border-bottom: 1px solid var(--line); } .lib-steps li > span { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.md { line-height: 1.65; } .md h2 { font-size: 22px; margin: 16px 0 6px; } .md h3 { font-size: 17px; margin: 14px 0 4px; } .md h4 { font-size: 15px; margin: 12px 0 4px; } .md p { margin: 8px 0; } .md ul, .md ol { margin: 6px 0 6px 20px; } .md ul.md-ck { list-style: none; margin-left: 4px; } .md blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--primary); background: var(--bg); border-radius: 0 10px 10px 0; } .md code { background: var(--bg); padding: 1px 6px; border-radius: 6px; font-size: .9em; } .md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; } .md a { color: var(--primary-dark); }
.lib-imp { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lib-sec { margin-top: 22px; }
.lib-sec-h { font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: var(--primary-dark); text-transform: uppercase; letter-spacing: .05em; }
.lib-sec-h small { background: var(--primary-soft); color: var(--primary-dark); border-radius: 99px; padding: 1px 9px; font-size: 12px; letter-spacing: 0; }
.lib-brand { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 4px 0 12px; border-radius: 16px; background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--sage-soft) 45%, transparent)); }
.lib-brand img { height: 30px; width: auto; }
.lib-brand b { display: block; font-size: 15px; }
.lib-brand small { color: var(--muted); font-style: italic; }
.lib-brand-foot { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.6; padding: 14px 8px; margin-top: 12px; border-top: 1px solid var(--line); }
.lib-brand-foot b { color: var(--primary-dark); }
@media print { .lib-brand-foot { display: block; } }
.msg-box { white-space: pre-wrap; background: var(--bg); border-radius: 12px; padding: 12px 14px; margin: 8px 0 0; font: inherit; line-height: 1.55; }
.rule-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.rule-row:first-of-type { border-top: 0; }
.rule-t { flex: 1 1 60%; min-width: 0; } .rule-t p { margin: 0; }
.rule-p { display: flex; flex-direction: column; gap: 6px; flex: 0 0 220px; }
.rule-pp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rule-pp small { color: var(--muted); flex-basis: 100%; }
.rule-n input { width: 76px; }
@media (max-width: 720px) { .rule-row { flex-direction: column; } .rule-p { flex: none; width: 100%; } }
.q-list { display: grid; gap: 12px; }
.q-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.q-card.late { border-left-color: var(--red); }
.q-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.q-who { display: flex; flex-direction: column; min-width: 0; } .q-who small { color: var(--muted); }
.q-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.q-sub { margin: 6px 0 0; font-weight: 500; }
.q-msg { margin: 8px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 12px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; }
.q-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.msg-lint { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sec-list { margin: 6px 0 0 18px; padding: 0; } .sec-list li { margin: 6px 0; line-height: 1.5; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.att-grid.compact { grid-template-columns: 1fr; gap: 8px; margin: 6px 0 8px; }
.att-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-width: 0; }
.att-grid.compact .att-card { flex-direction: row; align-items: center; }
.att-prev { display: grid; place-items: center; height: 120px; background: var(--bg); border-radius: 10px; overflow: hidden; }
.att-grid.compact .att-prev { width: 56px; height: 56px; flex: none; }
.att-thumb { max-width: 100%; max-height: 100%; object-fit: cover; width: 100%; height: 100%; cursor: zoom-in; }
.att-ico { color: var(--primary); } .att-prev audio { width: 100%; }
.att-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .att-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-info small { color: var(--muted); }
.att-task { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-btns { display: flex; gap: 6px; }
.capm-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.capm { position: relative; width: 96px; display: flex; flex-direction: column; gap: 3px; }
.capm-p { height: 72px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; overflow: hidden; color: var(--primary); }
.capm-p img { width: 100%; height: 100%; object-fit: cover; }
.capm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.capm .icon-btn { position: absolute; top: 3px; right: 3px; background: rgba(255,255,255,.92); border-radius: 50%; }
.capm-th { height: 72px; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; }
.cap-it-h { flex-wrap: wrap; gap: 8px; }
.app-pinwrap { position: relative; display: block; margin: 10px 0 0; line-height: 0; max-width: 560px; }
.app-pinwrap img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.app-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font: 600 13px/22px 'Poppins', sans-serif; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.app-pinlist { margin: 8px 0 0 20px; padding: 0; line-height: 1.5; } .app-pinlist li { margin: 3px 0; }

/* =====================================================================
   Menu lateral: ícones dos setores em "vidro colorido", com brilho, luz que passeia e movimento ao passar o mouse
   ===================================================================== */
.sec-ic { position: relative; overflow: hidden; width: 38px; height: 38px; border-radius: 13px; isolation: isolate;
  color: color-mix(in srgb, var(--sc) 35%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--sc) 42%, transparent), color-mix(in srgb, var(--sc) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s, background .25s, color .25s, border-color .25s; }
.sec-ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.5), transparent 58%); opacity: .55; transition: opacity .25s; }
.sec-ic::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.sec-ic .ic { position: relative; z-index: 2; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.sec-head:hover .sec-ic { transform: translateY(-1px) scale(1.07); color: #fff; border-color: color-mix(in srgb, var(--sc) 80%, #fff 10%); box-shadow: 0 6px 16px color-mix(in srgb, var(--sc) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.sec-head:hover .sec-ic::before { opacity: .9; }
.sec-head:hover .sec-ic::after { animation: sec-sheen .7s ease; }
.sec-head:hover .sec-ic .ic { transform: scale(1.12) rotate(-7deg); }
/* setor aberto ou atual: cor cheia, relevo e brilho que pulsa de leve */
.sec.cur .sec-ic, .sec.open .sec-ic { color: #fff; border-color: color-mix(in srgb, var(--sc) 70%, #fff 30%);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 78%, #fff), var(--sc) 55%, color-mix(in srgb, var(--sc) 78%, #000));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.18); animation: sec-glow 3.4s ease-in-out infinite; }
.sec.cur .sec-ic::before, .sec.open .sec-ic::before { opacity: .85; }
.sec.cur .sec-ic .ic { animation: sec-float 3.4s ease-in-out infinite; }
.sec.open { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 14%, rgba(255,255,255,.05)), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 24%, transparent); }
.sec-head:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 20%, transparent), transparent); }
.sec.open .sec-head:hover { background: transparent; }
.sec-items { border-left-color: color-mix(in srgb, var(--sc) 60%, transparent); }
.sec-items .nav-item { transition: background .15s, transform .15s, color .15s; }
.sec-items .nav-item:hover { transform: translateX(3px); background: color-mix(in srgb, var(--sc) 22%, transparent); }
.sec-items .nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 34%, transparent), color-mix(in srgb, var(--sc) 8%, transparent)); box-shadow: inset 3px 0 0 var(--sc); }
.sec-items .nav-item.active .ic { color: color-mix(in srgb, var(--sc) 40%, #fff); }
.geral-sec .sec-ic { color: #fff; border-color: transparent; background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 78%, #fff), var(--sc) 55%, color-mix(in srgb, var(--sc) 78%, #000)); box-shadow: 0 5px 14px color-mix(in srgb, var(--sc) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.4); animation: none; }
.geral-sec:hover .sec-ic { transform: translateY(-1px) scale(1.07); } .geral-sec:hover .sec-ic::after { animation: sec-sheen .7s ease; } .geral-sec:hover .sec-ic .ic { transform: scale(1.1) rotate(-6deg); }
.sector-opt .ic, .sector-cur .ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
@keyframes sec-sheen { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
@keyframes sec-glow { 0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--sc) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.18); } 50% { box-shadow: 0 8px 26px color-mix(in srgb, var(--sc) 78%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.18); } }
@keyframes sec-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px) scale(1.04); } }
.collapsed .sec-ic { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .sec.cur .sec-ic, .sec.open .sec-ic, .sec.cur .sec-ic .ic { animation: none; } .sec-head:hover .sec-ic::after, .geral-sec:hover .sec-ic::after { animation: none; } .sec-ic, .sec-ic .ic { transition: none; } }
.acl-sec { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); } .acl-sec:first-of-type { border-top: 0; padding-top: 0; }
.acl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin-top: 8px; }

/* =====================================================================
   Menu lateral — estilo "limpo" (alternativa ao "vidro"): ícones duotone sem bloco, barra de cor no setor atual e linhas finas.
   Escolha em: menu da conta (canto superior direito) → "Estilo do menu".
   ===================================================================== */
body.menu-clean .sec { border-radius: 14px; position: relative; }
body.menu-clean .sec.open { background: none; box-shadow: none; padding-bottom: 8px; }
body.menu-clean .sec.cur:not(.open) { background: none; }
body.menu-clean .sec.cur::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); box-shadow: 0 0 14px color-mix(in srgb, var(--sc) 85%, transparent); }
body.menu-clean .sec-head { height: 44px; padding-left: 4px; }
body.menu-clean .sec-head:hover, body.menu-clean .sec.open .sec-head:hover { background: rgba(255,255,255,.06); }
body.menu-clean .sec-ic { width: 34px; height: 34px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: color-mix(in srgb, var(--sc) 55%, #fff); animation: none; }
body.menu-clean .sec-ic::before, body.menu-clean .sec-ic::after { display: none; }
body.menu-clean .sec-ic .ic { width: 24px; height: 24px; stroke-width: 1.7; fill: color-mix(in srgb, var(--sc) 30%, transparent); filter: none; animation: none; }
body.menu-clean .sec-head:hover .sec-ic { transform: none; box-shadow: none; border: 0; color: #fff; }
body.menu-clean .sec-head:hover .sec-ic .ic { transform: translateX(2px) scale(1.06) rotate(0); fill: color-mix(in srgb, var(--sc) 55%, transparent); }
body.menu-clean .sec.cur .sec-ic, body.menu-clean .sec.open .sec-ic { background: none; border: 0; box-shadow: none; color: #fff; animation: none; }
body.menu-clean .sec.cur .sec-ic .ic, body.menu-clean .sec.open .sec-ic .ic { fill: color-mix(in srgb, var(--sc) 62%, transparent); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sc) 80%, transparent)); animation: none; }
body.menu-clean .sec-name { font-weight: 600; letter-spacing: .01em; }
body.menu-clean .sec.cur .sec-name { color: color-mix(in srgb, var(--sc) 30%, #fff); }
body.menu-clean .sec-items { margin-left: 17px; border-left: 1px solid rgba(255,255,255,.14); }
body.menu-clean .sec-items .nav-item { border-radius: 8px; }
body.menu-clean .sec-items .nav-item:hover { transform: none; background: rgba(255,255,255,.07); }
body.menu-clean .sec-items .nav-item.active { background: color-mix(in srgb, var(--sc) 20%, transparent); box-shadow: none; position: relative; }
body.menu-clean .sec-items .nav-item.active::after { content: ''; position: absolute; left: -11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 10px var(--sc); }
body.menu-clean .geral-sec .sec-ic { width: 38px; height: 38px; }
body.menu-clean.collapsed .sec.cur::before { left: -14px; }
body.menu-clean.collapsed .sec-ic { width: 40px; }

/* =====================================================================
   UX: blocos do menu, favoritos, sino, busca rápida, primeiros passos, desfazer e acessibilidade
   ===================================================================== */
/* --- Acessibilidade --- */
:root { --muted: #5b6678; } /* contraste 4,8:1 no fundo creme */
.wk-chip { color: color-mix(in srgb, var(--c) 60%, #000); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
#sidebar :focus-visible, #tabbar :focus-visible { outline-color: #fff; }
.input:focus-visible { outline: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 400; background: var(--primary-dark); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font: 600 14px 'Poppins', sans-serif; cursor: pointer; transition: top .15s; }
.skip-link:focus { top: 10px; }
@media (pointer: coarse) {
  .btn.sm, .pill { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
  .btn.icon, .icon-btn, .icon-top, .fav-btn, .grp-head, .bell-x { min-height: 44px; }
  .icon-btn, .btn.icon, .icon-top, .bell-x { min-width: 44px; }
  .check { min-width: 28px; min-height: 28px; }
}
/* --- Menu em blocos e favoritos --- */
.nav-row { position: relative; }
.nav-row .nav-item { padding-right: 34px; }
.fav-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.nav-row:hover .fav-btn, .fav-btn:focus-visible, .fav-btn.on { opacity: 1; }
.fav-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.fav-btn.on { color: #f3c64a; } .fav-btn.on svg { fill: currentColor; }
@media (hover: none) { .fav-btn { opacity: .55; } .fav-btn.on { opacity: 1; } }
.favs { margin: 4px 0 8px; padding: 6px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.favs .nav-label { margin: 0 0 2px; padding-left: 8px; }
.grp { margin: 2px 0; }
.grp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px 7px 6px; border: 0; background: none; color: rgba(255,255,255,.62); font: 600 11px 'Poppins', sans-serif; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; border-radius: 8px; text-align: left; }
.grp-head span { flex: 1; }
.grp-head em { font-style: normal; font-size: 10px; background: rgba(255,255,255,.12); border-radius: 99px; padding: 0 7px; letter-spacing: 0; }
.grp-head svg { transition: transform .2s; transform: rotate(-90deg); } .grp.open .grp-head svg { transform: none; }
.grp-head:hover { color: #fff; background: rgba(255,255,255,.06); }
.grp:not(.open) .grp-items { display: none; }
.collapsed .grp-head, .collapsed .favs .nav-label, .collapsed .fav-btn { display: none; }
.collapsed .grp-items { display: block !important; } .collapsed .favs { padding: 4px 0; background: none; border: 0; }
.collapsed .nav-row .nav-item { padding-right: 0; }
@media (max-width: 760px) { #sidebar .grp-head, body.collapsed #sidebar .grp-head { display: flex; } #sidebar .fav-btn, body.collapsed #sidebar .fav-btn { display: grid; } }
/* --- Topo: busca rápida, sino e ajuda --- */
.icon-top { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; cursor: pointer; font: 500 12px 'Poppins', sans-serif; transition: background .15s, box-shadow .15s; }
.icon-top:hover { background: var(--primary-soft); box-shadow: 0 2px 10px rgba(4,21,47,.1); }
.icon-top kbd, .cmdk kbd, .help-keys kbd { font: 600 11px 'Poppins', sans-serif; background: var(--bg); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--muted); }
@media (max-width: 900px) { .kbd-top kbd { display: none; } }
.bell-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--amber); color: #3b2a00; font: 700 11px/19px 'Poppins', sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-n.red { background: var(--red); color: #fff; }
.bell-menu { width: min(380px, 92vw); padding: 6px; max-height: 70vh; overflow: auto; right: 0; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 6px; } .bell-head a { font-size: 12.5px; color: var(--primary-dark); }
.bell-row { display: flex; align-items: stretch; border-radius: 10px; } .bell-row:hover { background: var(--bg); }
.bell-row a { flex: 1; display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.bell-row .ga-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #3c8cdd22; color: #2a6cb0; }
.bell-row.red .ga-ic { background: #d32c2c1f; color: var(--red); } .bell-row.orange .ga-ic { background: #eda71d29; color: #96690a; }
.bell-x { align-self: center; width: 28px; height: 28px; margin-right: 4px; border: 0; background: none; border-radius: 8px; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .bell-x:hover { background: var(--line); }
.bell-empty, .bell-more { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
/* --- Busca rápida --- */
.cmdk-ov { position: fixed; inset: 0; z-index: 300; background: rgba(28, 20, 40, .55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 14px 14px; }
.cmdk { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); overflow: hidden; animation: cmdk-in .14s ease; }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.cmdk-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdk-in { flex: 1; border: 0; outline: 0; background: none; font: 500 16px 'Poppins', sans-serif; color: var(--ink); min-width: 0; }
.cmdk-list { overflow: auto; padding: 6px; }
.cmdk-g { padding: 10px 12px 4px; font: 600 11px 'Poppins', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmdk-it { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-it.on { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.cmdk-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg); color: var(--primary-dark); }
.cmdk-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .cmdk-it small { color: var(--muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-empty { padding: 28px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; background: var(--bg); } .cmdk-foot kbd { margin-right: 3px; }
/* --- Primeiros passos e ajuda --- */
.tour-ov { position: fixed; inset: 0; z-index: 320; background: rgba(28, 20, 40, .6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.tour { position: relative; width: min(460px, 100%); background: var(--surface); border-radius: 24px; padding: 30px 26px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: cmdk-in .18s ease; }
.tour-skip { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: var(--muted); cursor: pointer; font: 500 13px 'Poppins', sans-serif; }
.tour-ic { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: var(--gradient-brand); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 40%, transparent); }
.tour-n { color: var(--muted); } .tour h2 { margin: 4px 0 8px; font: 600 21px/1.2 var(--font-display); } .tour p { margin: 0 0 14px; line-height: 1.55; color: var(--ink); }
.tour-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 14px; } .tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .tour-dots i.on { width: 22px; border-radius: 8px; background: var(--primary); }
.tour-nav { display: flex; justify-content: space-between; gap: 10px; }
.help-list { margin: 0 0 12px 18px; padding: 0; line-height: 1.55; } .help-list li { margin: 6px 0; }
.help-keys { background: var(--bg); border-radius: 12px; padding: 4px 14px; font-size: 13px; } .help-keys p { margin: 8px 0; line-height: 1.7; }
/* --- Desfazer --- */
.toast.undo { display: flex; align-items: center; gap: 14px; pointer-events: auto; padding-right: 8px; }
.toast-undo { border: 0; background: rgba(255,255,255,.18); color: #fff; font: 600 13px 'Poppins', sans-serif; padding: 7px 14px; border-radius: 9px; cursor: pointer; } .toast-undo:hover { background: rgba(255,255,255,.3); }
body.menu-clean .favs { background: none; border-color: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { .cmdk, .tour { animation: none; } }
@media (max-width: 640px) { .kbd-top, .icon-top[data-action="open-help"] { display: none; } }

/* =====================================================================
   Ícones do menu mais marcantes: bloco de cor cheia em todos os setores, traço grosso com preenchimento, anel e brilho no setor atual.
   Projetos internos usa o monograma verde da marca.
   ===================================================================== */
.sec-ic { width: 40px; height: 40px; border-radius: 14px; color: #fff; border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 80%, #fff), var(--sc) 52%, color-mix(in srgb, var(--sc) 70%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--sc) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 4px rgba(0,0,0,.2); }
.sec-ic .ic { stroke-width: 2.3; fill: rgba(255,255,255,.22); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.sec:not(.cur):not(.open) .sec-ic { filter: saturate(.92) brightness(.95); }
.sec.cur .sec-ic, .sec.open .sec-ic { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 55%, transparent), 0 8px 24px color-mix(in srgb, var(--sc) 72%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.2); animation: sec-glow2 3.2s ease-in-out infinite; }
@keyframes sec-glow2 { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 55%, transparent), 0 8px 22px color-mix(in srgb, var(--sc) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.2); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 70%, transparent), 0 10px 30px color-mix(in srgb, var(--sc) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.2); } }
.sec-name { font-weight: 600; font-size: 15px; }
/* monograma verde da Prospectamos no setor "Projetos internos" */
.ic-logo { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)) saturate(1.2) brightness(1.04); }
body:not(.menu-clean) .sec-ic:has(.ic-logo) { background: linear-gradient(150deg, #0a4fc4, #1f3354 60%, #04152f); border-color: #6aa7ff; box-shadow: 0 4px 12px rgba(73,120,196,.35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.3); }
body:not(.menu-clean) .sec.cur .sec-ic:has(.ic-logo), body:not(.menu-clean) .sec.open .sec-ic:has(.ic-logo) { box-shadow: 0 0 0 2px #6aa7ff, 0 8px 24px rgba(73,120,196,.65), inset 0 1px 0 rgba(255,255,255,.3); animation: none; }
.sector-opt .ic-logo, .sector-cur .ic-logo { width: 22px; height: 22px; filter: none; }
.sec-ic .ic-logo { position: relative; z-index: 2; }
/* funções dentro do setor: ícone mais forte, na cor do setor */
.sec-items .nav-item .ic { stroke-width: 2.15; color: color-mix(in srgb, var(--sc, #fff) 58%, #fff); }
.sec-items .nav-item.active .ic, .sec-items .nav-item:hover .ic { color: #fff; }
.favs .nav-item .ic { stroke-width: 2.15; }
/* menu limpo: ícone grande, traço firme e preenchimento forte */
body.menu-clean .sec-ic { box-shadow: none; border: 0; }
body.menu-clean .sec-ic .ic { width: 27px; height: 27px; stroke-width: 2.1; fill: color-mix(in srgb, var(--sc) 52%, transparent); }
body.menu-clean .sec-ic .ic-logo { width: 30px; height: 30px; fill: none; filter: drop-shadow(0 0 6px rgba(73,120,196,.55)); }
body.menu-clean .sec.cur .sec-ic, body.menu-clean .sec.open .sec-ic { box-shadow: none; animation: none; }
body.menu-clean .sec:not(.cur):not(.open) .sec-ic { filter: none; }
.collapsed .sec-ic { width: 42px; height: 42px; }
@media (prefers-reduced-motion: reduce) { .sec.cur .sec-ic, .sec.open .sec-ic { animation: none; } }

/* =====================================================================
   Base de conhecimento da Prospectamos (página aberta pelo logo)
   ===================================================================== */
.kb-hero { position: relative; border-radius: 26px; overflow: hidden; min-height: 400px; display: flex; align-items: center; color: #fff; margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(12,29,57,.96) 0%, rgba(23,48,89,.84) 36%, rgba(23,48,89,.12) 70%, rgba(23,48,89,0) 100%), var(--kb-img) 66% 38% / cover no-repeat, #2a9d8f;
  box-shadow: 0 22px 50px rgba(4,21,47,.28); }
.kb-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: radial-gradient(circle, rgba(114,179,146,.7) 1.2px, transparent 1.6px); background-size: 10px 10px; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, transparent 62%); }
.kb-hero-in { position: relative; z-index: 2; max-width: 540px; padding: 34px 34px 36px; }
.kb-logo { display: inline-block; background: #f2f6fb; border-radius: 14px; padding: 11px 18px; transform: rotate(-2deg); box-shadow: 0 8px 22px rgba(0,0,0,.35); margin-bottom: 16px; }
.kb-logo img { display: block; height: 42px; width: auto; }
.kb-eyebrow { display: block; font: 600 12px 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c9dcff; }
.kb-hero h1 { font: 600 clamp(22px, 3.6vw, 34px)/1.15 var(--font-display); margin: 8px 0 12px; color: #fff; }
.kb-hero p { margin: 0 0 18px; color: rgba(255,255,255,.92); line-height: 1.6; max-width: 46ch; }
.kb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-b { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; backdrop-filter: blur(4px); } .kb-b:hover { background: rgba(255,255,255,.26); }
@media (max-width: 760px) {
  .kb-hero { min-height: 0; align-items: flex-end; padding-top: 58vw; background: linear-gradient(180deg, rgba(23,45,81,0) 30%, #0a1f44 58%), var(--kb-img) center top / 100% auto no-repeat, #0a1f44; }
  .kb-hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%); mask-image: linear-gradient(180deg, transparent 30%, #000 100%); }
  .kb-hero-in { padding: 8px 20px 24px; }
}
.kb-tabs { margin: 4px 0 16px; }
.kb-tabs .pill small { opacity: .75; margin-left: 2px; }
.kb-sec { display: block; }
.kb-lead { font-size: 17px; line-height: 1.65; max-width: 70ch; margin: 4px 0 6px; }
.kb-h { font: 600 19px/1.25 var(--font-display); margin: 26px 0 10px; color: var(--ink); }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kb-grid.cases { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; }
.kb-card h3 { margin: 0; font: 600 17px 'Poppins', sans-serif; } .kb-card p { margin: 0; color: var(--ink); line-height: 1.55; } .kb-card small { color: var(--muted); }
.kb-card ul { margin: 4px 0 8px 18px; padding: 0; line-height: 1.55; color: var(--muted); } .kb-card .btn { align-self: flex-start; margin-top: auto; }
.kb-person h3 { font: 600 20px var(--font-display); } .kb-person b { color: var(--primary-dark); font-weight: 600; }
.kb-phrases { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.kb-phrases span { background: #f2f6fb; border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; font: 600 14px var(--font-display); color: var(--primary-dark); transform: rotate(-1.2deg); box-shadow: 0 4px 10px rgba(4,21,47,.08); } .kb-phrases span:nth-child(even) { transform: rotate(1deg); }
.kb-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 8px; }
.kb-qc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.kb-qc:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--primary); } .kb-qc svg { color: var(--primary); } .kb-qc small { color: var(--muted); }
.kb-start { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--sage-soft) 40%, transparent)); text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: transform .15s; } .kb-start:hover { transform: translateY(-2px); } .kb-start small { color: var(--muted); }
.kb-folder { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; } .kb-folder:hover { border-color: var(--primary); background: var(--primary-soft); } .kb-folder small { color: var(--muted); }
.kb-steps { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; counter-reset: k; }
.kb-steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.kb-steps p { margin: 2px 0 0; color: var(--muted); } .kb-n { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font: 700 17px 'Poppins', sans-serif; }
.kb-quote { margin-top: 16px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(135deg, #0a1f44, #0063fe); color: #fff; line-height: 1.6; font-size: 16px; } .kb-quote small { color: #c0d2f0; font-size: 14px; }
.kb-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #f2f6fb; border: 1px dashed var(--line-strong); line-height: 1.55; color: var(--ink); font-size: 14px; }
.kb-case { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .kb-case small { color: var(--primary-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } .kb-case b { font: 600 16px var(--font-display); }
.kb-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.kb-ct { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; } .kb-ct li { display: flex; gap: 12px; align-items: center; } .kb-ct li > svg { color: var(--primary); flex: none; } .kb-ct small { display: block; color: var(--muted); } .kb-ct a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.kb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 8px 0; } .kb-two ul { margin: 4px 0 0 18px; padding: 0; line-height: 1.6; }
.kb-det { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 8px 0; overflow: hidden; }
.kb-det summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; } .kb-det summary::-webkit-details-marker { display: none; }
.kb-det summary::after { content: '+'; margin-left: auto; font-size: 22px; color: var(--primary); line-height: 1; } .kb-det[open] summary::after { content: '-'; }
.kb-det summary small { color: var(--muted); } .kb-det[open] summary { background: var(--primary-soft); }
.kb-detb { padding: 6px 18px 16px; } .kb-md h2 { font-size: 20px; } .kb-md p, .kb-md li { line-height: 1.6; }
.kb-spec-d { font: 600 25px/1.2 var(--font-display); color: var(--primary-dark); margin: 6px 0; } .kb-spec-s { font: 500 20px 'Poppins', sans-serif; margin: 6px 0; }
/* paleta com a textura do site: pontilhado em duas camadas, linhas de papel e etiqueta recortada */
.kb-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; margin: 14px 0 6px; padding: 8px 4px 14px; }
.kb-sw { margin: 0; transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(0 10px 14px rgba(4,21,47,.2)); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.kb-sw:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); }
.kb-chip { position: relative; height: 128px; padding: 12px 14px; border-radius: 6px 6px 0 0; background: var(--c); color: #fff; display: flex; align-items: flex-end; overflow: hidden; }
.kb-chip.light { color: #04152f; }
.kb-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(15,39,78,.3) 0 1px, transparent 1.5px); background-size: 6px 6px; background-position: 0 0, 3px 3px; -webkit-mask-image: radial-gradient(ellipse 120% 100% at 18% 12%, #000 18%, rgba(0,0,0,.45) 100%); mask-image: radial-gradient(ellipse 120% 100% at 18% 12%, #000 18%, rgba(0,0,0,.45) 100%); }
.kb-paper { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.14) 4px), radial-gradient(circle at 20% 10%, rgba(255,255,255,.2), transparent 34%); mix-blend-mode: soft-light; }
.kb-chip b { position: relative; z-index: 2; font: 600 18px/1.1 var(--font-display); text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.kb-chip.light b { text-shadow: none; }
.kb-rec { margin: 0; padding: 11px 14px 22px; background-color: #f2f6fb; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(54,75,108,.03) 5px); display: grid; gap: 3px; }
.kb-rec code { font: 700 15px 'Poppins', sans-serif; letter-spacing: .04em; color: var(--ink); background: none; padding: 0; } .kb-rec small { color: var(--muted); } .kb-rec span { font-size: 12.5px; line-height: 1.45; color: #5b5168; }
@media (prefers-reduced-motion: reduce) { .kb-sw, .kb-qc, .kb-start { transition: none; } }

/* =====================================================================
   Todos os ícones do menu com as cores do ícone de "Projetos internos":
   bloco roxo profundo, borda e brilho em verde-sálvia e o desenho em verde (como o monograma da marca)
   ===================================================================== */
body:not(.menu-clean) .sec-ic { color: #a9cbff; border-color: #6aa7ff;
  background: linear-gradient(150deg, #0a4fc4, #1f3354 60%, #04152f);
  box-shadow: 0 4px 12px rgba(73,120,196,.35), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.3); }
.sec-ic .ic:not(.ic-logo) { color: #a9cbff; stroke-width: 2.3; fill: rgba(132,166,222,.24); filter: drop-shadow(0 0 4px rgba(73,120,196,.55)); }
body:not(.menu-clean) .sec:not(.cur):not(.open) .sec-ic { filter: brightness(.94); }
body:not(.menu-clean) .sec.cur .sec-ic, body:not(.menu-clean) .sec.open .sec-ic { border-color: #a8c4f1; animation: sec-glow3 3.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px #6aa7ff, 0 8px 24px rgba(73,120,196,.65), inset 0 1px 0 rgba(255,255,255,.3); }
@keyframes sec-glow3 { 0%, 100% { box-shadow: 0 0 0 2px #6aa7ff, 0 8px 22px rgba(73,120,196,.55), inset 0 1px 0 rgba(255,255,255,.3); } 50% { box-shadow: 0 0 0 3px #a9cbff, 0 10px 30px rgba(73,120,196,.85), inset 0 1px 0 rgba(255,255,255,.35); } }
.sec-head:hover .sec-ic { border-color: #a8c4f1; }
body:not(.menu-clean) .geral-sec .sec-ic { background: linear-gradient(150deg, #0a4fc4, #1f3354 60%, #04152f); border-color: #6aa7ff; animation: none; box-shadow: 0 5px 14px rgba(31,51,84,.35), inset 0 1px 0 rgba(255,255,255,.25); }
/* funções dentro do setor: ícone no mesmo verde */
.sec-items .nav-item .ic, .favs .nav-item .ic { color: #c9dcff; }
.sec-items .nav-item.active .ic, .sec-items .nav-item:hover .ic, .favs .nav-item.active .ic, .favs .nav-item:hover .ic { color: #fff; }
/* menu limpo: desenho verde com preenchimento e brilho, igual ao monograma */
body.menu-clean .sec-ic { color: #6aa7ff; }
body.menu-clean .sec-ic .ic:not(.ic-logo) { color: #6aa7ff; fill: rgba(73,120,196,.4); filter: none; }
body.menu-clean .sec:hover .sec-ic .ic:not(.ic-logo), body.menu-clean .sec.cur .sec-ic .ic:not(.ic-logo), body.menu-clean .sec.open .sec-ic .ic:not(.ic-logo) { color: #a8c4f1; fill: rgba(132,166,222,.5); filter: drop-shadow(0 0 7px rgba(73,120,196,.8)); }
body.menu-clean .sec.cur::before { background: #6aa7ff; box-shadow: 0 0 14px rgba(73,120,196,.9); }
@media (prefers-reduced-motion: reduce) { body:not(.menu-clean) .sec.cur .sec-ic, body:not(.menu-clean) .sec.open .sec-ic { animation: none; } }
.kb-hero h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -.01em; margin: 10px 0 14px; text-shadow: 0 3px 22px rgba(20,12,34,.45); }
.kb-hero .kb-eyebrow { font-size: 11.5px; }
@media (max-width: 760px) { .kb-hero h1 { font-size: clamp(38px, 12vw, 52px); } }

/* Títulos compactos: Poppins semibold com espaçamento mais justo */
.h1, .banner h1, .auth-card h1, .hh-txt h1, .modal-head h3, .empty b, .kpi b, .ins .kpi b, .stat-val, .wk-kpi b, .wm-card b, .wk-nums b, .fin-big, .hl-score b, .donut-in b, .lg-stats b, .cele-title, .cele-value, .kb-h, .kb-hero h1, .kb-person h3, .tour h2 { letter-spacing: -.02em; }
.kb-hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -.03em; }
@media (max-width: 760px) { .kb-hero h1 { font-size: clamp(32px, 10vw, 44px); } }

/* Capa da Base de conhecimento: título na fonte original da capa (Playfair itálico semibold) */
.kb-hero h1 { font: italic 600 clamp(40px, 6.4vw, 72px)/1.02 'Playfair Display', Georgia, serif; letter-spacing: -.01em; margin: 10px 0 14px; text-shadow: 0 3px 22px rgba(20,12,34,.45); }
@media (max-width: 760px) { .kb-hero h1 { font-size: clamp(38px, 12vw, 52px); } }

/* Fotos das fundadoras */
.kb-person { flex-direction: row; align-items: center; gap: 16px; }
.kb-person > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-av { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, #3b8bff, #0a1f44); color: #a9cbff; font: italic 600 44px 'Playfair Display', serif; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px #72b392, 0 10px 20px rgba(4,21,47,.25); }
.kb-person:nth-child(2) .kb-av { background: linear-gradient(150deg, #43b996, #1f7f68); color: #fff; }
.kb-av b { color: inherit !important; font: inherit !important; }
.kb-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
@media (max-width: 480px) { .kb-av { width: 80px; height: 80px; font-size: 34px; } }

/* Explore: botões grandes, com cor, borda de relevo e seta */
.kb-quick { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.kb-qc { position: relative; overflow: hidden; flex-direction: row; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--qc) 82%, #fff), var(--qc) 55%, color-mix(in srgb, var(--qc) 78%, #000)); box-shadow: 0 5px 0 color-mix(in srgb, var(--qc) 60%, #000), 0 12px 22px color-mix(in srgb, var(--qc) 32%, transparent); transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s, filter .16s; }
.kb-qc::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse 80% 100% at 100% 0%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse 80% 100% at 100% 0%, #000 0%, transparent 65%); }
.kb-qc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
.kb-qc:hover { transform: translateY(-4px); filter: saturate(1.08); box-shadow: 0 9px 0 color-mix(in srgb, var(--qc) 60%, #000), 0 20px 30px color-mix(in srgb, var(--qc) 40%, transparent); border-color: transparent; }
.kb-qc:hover::after { transform: translateX(120%); }
.kb-qc:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--qc) 60%, #000), 0 4px 8px color-mix(in srgb, var(--qc) 30%, transparent); }
.kb-qc:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.kb-qi { position: relative; z-index: 1; flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.kb-qc svg.ic { color: #fff; stroke-width: 2.2; fill: rgba(255,255,255,.2); }
.kb-qt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.kb-qt b { font: 600 16px/1.2 'Poppins', sans-serif; letter-spacing: -.01em; }
.kb-qc .kb-qt small { color: rgba(255,255,255,.85); line-height: 1.35; font-size: 12.5px; }
.kb-qa { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 99px; background: #f2f6fb; color: #0a1f44; font: 600 12px 'Poppins', sans-serif; box-shadow: 0 3px 8px rgba(0,0,0,.2); transition: gap .16s, padding .16s; }
.kb-qa svg.ic { color: currentColor; fill: none; stroke-width: 2.6; }
.kb-qc:hover .kb-qa { gap: 9px; padding-right: 13px; }
@media (prefers-reduced-motion: reduce) { .kb-qc, .kb-qc::after, .kb-qa { transition: none; } .kb-qc:hover { transform: none; } }

/* Fotos das fundadoras: maiores e com zoom no rosto */
.kb-av { width: 124px; height: 124px; }
.kb-foto { object-position: 50% 30%; transform: scale(1.7); transform-origin: 50% 28%; }
@media (max-width: 480px) { .kb-av { width: 92px; height: 92px; } .kb-qa { display: none; } }
.kb-grid:has(.kb-person) { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Abas da Base de conhecimento: todos os botões com o visual do botão ativo (degradê da marca) */
.kb-tabs .pill, .mk-pills .pill { background: var(--gradient-brand); border: 0; color: #fff; font-weight: 600; padding: 8px 17px; box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 28%, transparent); transition: transform .15s, box-shadow .15s, filter .15s; }
.kb-tabs .pill:hover:not(.on), .mk-pills .pill:hover:not(.on) { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 38%, transparent); filter: saturate(1.1); }
.kb-tabs .pill:active, .mk-pills .pill:active { transform: translateY(1px); }
.kb-tabs .pill.on, .mk-pills .pill.on { box-shadow: 0 0 0 3px var(--bg, #f4f7fb), 0 0 0 5px var(--primary), 0 8px 18px color-mix(in srgb, var(--primary) 40%, transparent); transform: translateY(-1px); }
.kb-tabs .pill:not(.on), .mk-pills .pill:not(.on) { filter: saturate(.8) brightness(1.04); }
.kb-tabs .pill:not(.on):hover, .mk-pills .pill:not(.on):hover { filter: saturate(1.1); }
.kb-tabs .pill small, .mk-pills .pill small { background: rgba(255,255,255,.25); padding: 0 7px; border-radius: 99px; opacity: 1; }
.kb-tabs, .mk-pills { padding: 4px 4px 8px; }
@media (prefers-reduced-motion: reduce) { .kb-tabs .pill, .mk-pills .pill { transition: none; } }

/* Marketing digital: guia por área */
.mk-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 14px; }
.mk-fl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #f2f6fb; border: 1px solid var(--line); font: 600 12.5px 'Poppins', sans-serif; color: var(--primary-dark); }
.mk-ar { color: #72b392; display: grid; }
.mk-search { max-width: 560px; margin: 4px 0 12px; }
.mk-area { margin-top: 26px; scroll-margin-top: 80px; }
.mk-ah { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; color: #fff; background: linear-gradient(100deg, var(--ac), color-mix(in srgb, var(--ac) 68%, #000)); box-shadow: 0 8px 18px color-mix(in srgb, var(--ac) 30%, transparent); margin-bottom: 14px; position: relative; overflow: hidden; }
.mk-ah::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.4) 0 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse 60% 120% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 120% at 100% 0%, #000, transparent 70%); opacity: .6; }
.mk-ai { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); position: relative; z-index: 1; }
.mk-ai .ic { stroke-width: 2.2; fill: rgba(255,255,255,.2); color: #fff; }
.mk-ah > div { position: relative; z-index: 1; flex: 1; min-width: 0; } .mk-ah h2 { margin: 0; font: 600 19px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; color: #fff; } .mk-ah p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.mk-ah em { position: relative; z-index: 1; flex: none; font: 600 12px 'Poppins', sans-serif; font-style: normal; background: rgba(255,255,255,.22); padding: 4px 11px; border-radius: 99px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.mk-c { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ac); box-shadow: var(--shadow-card); }
.mk-c h3 { margin: 0; font: 600 15.5px/1.25 'Poppins', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.mk-c p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.mk-f { align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ac) 12%, transparent); color: color-mix(in srgb, var(--ac) 65%, #000); font: 600 12.5px 'Poppins', sans-serif; }
.mk-p { margin-top: auto; padding: 9px 11px; border-radius: 10px; border-left: 3px solid #72b392; background: #f2f6fb; font-size: 13px; line-height: 1.5; color: #4a4157; }
.mk-p b { display: block; margin-bottom: 1px; font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #2f7d63; }
@media (max-width: 640px) { .mk-ah { flex-wrap: wrap; } .mk-ah em { order: 3; } }
.mk-search { width: 100%; max-width: 620px; } .mk-search .input { width: 100%; }

/* Serviços e Cases: visual melhorado */
.kb2-head { margin: 8px 0 18px; max-width: 76ch; }
.kb2-head h2 { margin: 6px 0 8px; font: 600 clamp(22px, 3vw, 30px)/1.15 'Poppins', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.kb2-head p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.kb2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-dark); }
.kb2-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: #72b392; }
.kb2-eyebrow.light { color: #c9dcff; } .kb2-eyebrow.light::before { background: #c9dcff; }
.kb-dots, .kb2-dots { position: absolute; inset: 0; pointer-events: none; }
.kb2-dots { background-image: radial-gradient(circle, rgba(255,255,255,.4) 0 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse 90% 90% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 90% 90% at 100% 0%, #000 10%, transparent 70%); }
/* Serviços */
.kb2-group { margin: 26px 0 0; }
.kb2-gh { display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden; padding: 12px 18px; border-radius: 14px; color: #fff; background: linear-gradient(100deg, var(--g), color-mix(in srgb, var(--g) 70%, #000)); margin-bottom: 14px; }
.kb2-gh b { position: relative; font: 600 16px 'Poppins', sans-serif; letter-spacing: -.01em; } .kb2-gh em { position: relative; margin-left: auto; font: 500 12px 'Poppins', sans-serif; font-style: normal; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 99px; }
.kb2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.kb2-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.kb2-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--g); }
.kb2-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(4,21,47,.14); }
.kb2-num { position: absolute; right: 16px; top: 12px; font: 700 34px/1 'Poppins', sans-serif; letter-spacing: -.04em; color: color-mix(in srgb, var(--g) 16%, transparent); }
.kb2-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--g, #0063fe) 75%, #fff), var(--g, #0063fe) 55%, color-mix(in srgb, var(--g, #0063fe) 70%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--g, #0063fe) 36%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.kb2-ic .ic { stroke-width: 2.2; fill: rgba(255,255,255,.2); }
.kb2-card h4 { margin: 4px 0 0; font: 600 17px/1.25 'Poppins', sans-serif; letter-spacing: -.015em; color: var(--ink); }
.kb2-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.kb2-card ul { list-style: none; margin: 4px 0 6px; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); display: grid; gap: 7px; }
.kb2-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.kb2-card li .ic { flex: none; margin-top: 1px; color: var(--g); stroke-width: 3; }
.kb2-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; align-self: flex-start; padding: 7px 14px; border-radius: 99px; font: 600 13px 'Poppins', sans-serif; text-decoration: none; color: color-mix(in srgb, var(--g) 70%, #000); background: color-mix(in srgb, var(--g) 13%, transparent); }
.kb2-link:hover { background: color-mix(in srgb, var(--g) 24%, transparent); }
.kb2-callout { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: 18px; background: #f2f6fb; border: 1px dashed var(--line-strong); line-height: 1.6; font-size: 14.5px; }
.kb2-callout .kb2-ic { --g: #72b392; width: 40px; height: 40px; }

.kb2-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(120deg, var(--primary-soft), color-mix(in srgb, #c9dcff 40%, transparent)); border: 1px solid var(--line); }
.kb2-cta b { font: 600 17px 'Poppins', sans-serif; } .kb2-cta p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.kb3-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; padding: 4px 2px 6px; }
.kb3-case { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.kb3-case:hover { transform: translateY(-5px); box-shadow: 0 18px 32px rgba(4,21,47,.2); }
.kb3-img { position: relative; display: block; aspect-ratio: 808 / 632; overflow: hidden; background: color-mix(in srgb, var(--cc) 20%, #fff); }
.kb3-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.kb3-case:hover .kb3-img img { transform: scale(1.06); }
.kb3-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,29,57,.35)); opacity: 0; transition: opacity .2s; }
.kb3-case:hover .kb3-img::after { opacity: 1; }
.kb3-info { display: flex; flex-direction: column; gap: 5px; padding: 13px 48px 15px 16px; border-top: 4px solid var(--cc); }
.kb3-info em { align-self: flex-start; font: 600 10.5px 'Poppins', sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 4px; background: color-mix(in srgb, var(--cc) 14%, transparent); color: color-mix(in srgb, var(--cc) 70%, #000); }
.kb3-info b { font: 600 16px/1.25 'Poppins', sans-serif; letter-spacing: -.015em; }
.kb3-go { position: absolute; right: 12px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; transition: transform .2s; }
.kb3-case:hover .kb3-go { transform: translateX(3px); }
.kb3-go .ic { stroke-width: 2.6; fill: none; }
@media (prefers-reduced-motion: reduce) { .kb3-case, .kb3-img img, .kb3-go, .kb2-card { transition: none; } }

/* Time, dores, mercado, etiquetas e pacotes (informações da proposta comercial) */
.kb-team { gap: 14px; }
.kb-team .kb-person { align-items: flex-start; }
.kb-team .kb-av { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--pc, #72b392), 0 10px 20px rgba(4,21,47,.22); background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); color: #fff; }
.kb-person .kb-tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; line-height: 1.3; color: var(--ink); }
.kb-person .kb-tags li { padding: 3px 10px; border-radius: 99px; font-size: 12px; background: color-mix(in srgb, var(--pc, #0063fe) 12%, transparent); color: color-mix(in srgb, var(--pc, #0063fe) 62%, #000); border: 1px solid color-mix(in srgb, var(--pc, #0063fe) 25%, transparent); }
.kb-team .kb-person b { color: color-mix(in srgb, var(--pc) 70%, #000); }
.kb-dores { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.kb-dor { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; background: #f2f6fb; border: 1px dashed var(--line-strong); }
.kb-dor span { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.kb-dor p { margin: 0; line-height: 1.45; font-size: 14px; }
.kb-dor-fim { margin-top: 12px; font: italic 600 18px/1.4 'Playfair Display', serif; color: var(--primary-dark); }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.kb-stat { position: relative; overflow: hidden; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0a1f44, #0063fe); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; }
.kb-stat:nth-child(even) { background: linear-gradient(135deg, #1f8a5c, #39ae8b); }
.kb-stat b { font: 700 40px/1 'Poppins', sans-serif; letter-spacing: -.04em; }
.kb-stat span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.92); }
.kb-stickers { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 4px; }
.kb-stickers span { display: inline-block; padding: 8px 17px; border-radius: 99px; background: var(--sc); color: #fff; font: italic 600 18px 'Playfair Display', serif; transform: rotate(var(--r)); box-shadow: 0 6px 14px rgba(4,21,47,.2); }
.kb-machine { margin-top: 12px; font-size: 17px; background: linear-gradient(135deg, #1f8a5c, #2a9d8f 60%, #0a1f44); }
.kb2-price { display: flex; flex-direction: column; margin: -2px 0 2px; }
.kb2-price b { font: 700 28px/1.1 'Poppins', sans-serif; letter-spacing: -.03em; color: var(--g); filter: brightness(.85); }
.kb2-price small { color: var(--muted); font-size: 12.5px; }
.kb2-group .hint { margin: 10px 2px 0; }

/* A Prospectamos: nova organização visual */
.kb2-fi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--fc, #0063fe) 78%, #fff), var(--fc, #0063fe) 55%, color-mix(in srgb, var(--fc, #0063fe) 72%, #000)); box-shadow: 0 5px 12px color-mix(in srgb, var(--fc, #0063fe) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.kb2-fi .ic { stroke-width: 2.2; fill: rgba(255,255,255,.2); }
.kb2-manifesto { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 34px 36px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 92% 12%, rgba(114,179,146,.42), transparent 42%), linear-gradient(135deg, #0a1f44, #0a1f44 70%, #04152f); box-shadow: 0 18px 40px rgba(4,21,47,.25); }
.kb2-mt { position: relative; z-index: 1; max-width: 62ch; }
.kb2-mt h2 { margin: 10px 0 12px; font: 600 clamp(26px, 3.6vw, 38px)/1.12 'Poppins', sans-serif; letter-spacing: -.025em; color: #fff; }
.kb2-mt mark { background: none; color: #a9cbff; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; letter-spacing: 0; }
.kb2-mt p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.9); } .kb2-mt p b { color: #fff; }
.kb2-tag { display: inline-block; padding: 8px 16px; background: #f2f6fb; color: #0a1f44; border-radius: 6px; transform: rotate(-1.6deg); font: italic 600 17px 'Playfair Display', serif; box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.kb2-seal { position: relative; z-index: 1; width: 150px; height: 150px; }
.kb2-seal-t { transform-origin: 60px 60px; animation: kb2-spin 28s linear infinite; }
.kb2-seal-c { fill: rgba(255,255,255,.07); stroke: rgba(152,181,228,.5); stroke-width: 1; }
@keyframes kb2-spin { to { transform: rotate(360deg); } }
.kb2-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.kb2-start a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s, border-color .15s; }
.kb2-start a:hover { transform: translateY(-2px); border-color: var(--fc); box-shadow: var(--shadow-card); }
.kb2-start a > div { flex: 1; min-width: 0; } .kb2-start small { display: block; color: var(--muted); font-size: 11.5px; } .kb2-start b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.kb2-start a > svg { color: var(--muted); flex: none; }
.kb2-seal text { font: 600 8.4px 'Poppins', sans-serif; fill: #c9dcff; }
.kb5 { display: block; }
.kb5 .kb2-manifesto { margin-top: 4px; }
.kb5-phrases { margin: 18px 0 6px; }
.kb5-sec { margin-top: 38px; position: relative; }
.kb5-sec > .kb2-head:first-child { margin-top: 0; }
/* time */
.kb5-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 8px; }
.kb5-card { position: relative; grid-column: span 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.kb5-card.founder { grid-column: span 3; }
.kb5-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(4,21,47,.16); }
.kb5-band { position: relative; align-self: stretch; height: 84px; margin: 0 -18px; background: linear-gradient(120deg, var(--pc), color-mix(in srgb, var(--pc) 60%, #000)); }
.kb5-band .kb-dots { opacity: .55; background-image: radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse 80% 120% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 120% at 100% 0%, #000, transparent 70%); }
.kb5-card .kb-av { width: 116px; height: 116px; margin-top: -58px; z-index: 1; box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--pc), 0 10px 22px rgba(4,21,47,.22); background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); color: #fff; }
.kb5-role { margin-top: 12px; padding: 3px 12px; border-radius: 99px; font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--pc) 14%, transparent); color: color-mix(in srgb, var(--pc) 65%, #000); }
.kb5-card h3 { margin: 8px 0 2px; font: 600 20px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; }
.kb5-card > b { font-weight: 600; font-size: 14px; color: color-mix(in srgb, var(--pc) 70%, #000); }
.kb5-tg { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kb5-tg li { padding: 4px 11px; border-radius: 99px; font-size: 12px; line-height: 1.3; background: #f2f6fb; border: 1px solid var(--line); color: var(--ink); }
/* ideias */
.kb5-idea { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; padding: 28px 30px; border-radius: 24px; background: #f2f6fb; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(54,75,108,.03) 5px); border: 1px solid var(--line); }
.kb5-idea .kb2-head { margin: 0; }
.kb5-first small { display: block; margin-bottom: 10px; font: 600 11px 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kb5-first div { display: flex; flex-wrap: wrap; gap: 8px; }
.kb5-first span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 99px; color: #fff; font: 600 13.5px 'Poppins', sans-serif; background: linear-gradient(135deg, #0063fe, #0a1f44); box-shadow: 0 4px 10px rgba(42,73,124,.25); }
.kb5-first span:nth-child(even) { background: linear-gradient(135deg, #39ae8b, #1f8a5c); box-shadow: 0 4px 10px rgba(31,138,92,.25); }
.kb5-first .ic { stroke-width: 2.3; }
/* dores */
.kb5-dores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.kb5-dor { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #3b8bff; box-shadow: var(--shadow-card); }
.kb5-dor:nth-child(even) { border-left-color: #39ae8b; }
.kb5-dor b { flex: none; font: 700 26px/1 'Poppins', sans-serif; letter-spacing: -.04em; color: color-mix(in srgb, #3b8bff 35%, transparent); }
.kb5-dor:nth-child(even) b { color: color-mix(in srgb, #39ae8b 40%, transparent); }
.kb5-dor p { margin: 0; line-height: 1.5; font-size: 14.5px; }
.kb5-fim { position: relative; overflow: hidden; margin-top: 14px; padding: 18px 24px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #1f8a5c, #2a9d8f 60%, #0a1f44); }
.kb5-fim p { position: relative; margin: 0; font: italic 600 clamp(17px, 2.2vw, 21px)/1.45 'Playfair Display', serif; }
.kb5-fim b { color: #c1d7fa; }
/* mercado */
.kb5-market { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: center; padding: 30px; border-radius: 26px; color: #fff; overflow: hidden; background: radial-gradient(circle at 95% 8%, rgba(114,179,146,.38), transparent 42%), linear-gradient(135deg, #0a1f44, #0a1f44 70%, #04152f); box-shadow: 0 18px 40px rgba(4,21,47,.25); }
.kb5-mh { position: relative; z-index: 1; } .kb5-mh h2 { margin: 8px 0 10px; font: 600 clamp(24px, 3vw, 32px)/1.15 'Poppins', sans-serif; letter-spacing: -.025em; color: #fff; }
.kb5-mh p { margin: 0 0 10px; line-height: 1.65; color: rgba(255,255,255,.9); } .kb5-mh small { display: block; color: rgba(255,255,255,.65); line-height: 1.5; }
.kb5-st { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kb5-st div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(2px); }
.kb5-st b { display: block; font: 700 38px/1 'Poppins', sans-serif; letter-spacing: -.04em; color: #a9cbff; }
.kb5-st div:nth-child(even) b { color: #fff; }
.kb5-st span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.88); }
@media (max-width: 860px) { .kb5-team { grid-template-columns: 1fr 1fr; } .kb5-card, .kb5-card.founder { grid-column: span 1; } .kb5-idea, .kb5-market { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kb2-manifesto { grid-template-columns: 1fr; padding: 26px 22px; } .kb2-seal { width: 110px; height: 110px; order: -1; } .kb5-team { grid-template-columns: 1fr; } .kb5-idea, .kb5-market { padding: 22px 20px; } .kb5-st { grid-template-columns: 1fr 1fr; } .kb5-st b { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .kb5-card, .kb2-seal-t { transition: none; animation: none; } }

/* Manifesto da A Prospectamos: sem traço no rótulo, texto mais arejado e logo ao lado */
.kb2-eyebrow::before, .kb2-eyebrow.light::before { content: none; display: none; }
.kb2-manifesto { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 40px; padding: 44px 48px; }
.kb2-mt { max-width: 56ch; }
.kb2-mt h2 { margin: 12px 0 18px; }
.kb2-mt > p:first-of-type { font-size: 18px; line-height: 1.65; margin-bottom: 20px; }
.kb2-mt .kb2-p2 { margin: 0; padding: 4px 0 0 18px; border-left: 3px solid rgba(161,191,239,.5); font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.74); }
.kb2-vis { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.kb2-vis .kb-logo { margin: 0; padding: 16px 26px; border-radius: 16px; }
.kb2-vis .kb-logo img { height: 56px; }
.kb2-vis .kb2-seal { width: 118px; height: 118px; opacity: .9; }
@media (max-width: 860px) { .kb2-manifesto { grid-template-columns: 1fr; padding: 30px 26px; gap: 26px; } .kb2-vis { order: -1; flex-direction: row; justify-content: flex-start; gap: 20px; } .kb2-vis .kb2-seal { width: 84px; height: 84px; } .kb2-vis .kb-logo img { height: 40px; } }
@media (max-width: 640px) { .kb2-manifesto { padding: 24px 20px; } .kb2-vis .kb2-seal { order: 0; } }
.kb2-vis .kb-logo { padding: 14px 22px; max-width: 100%; box-sizing: border-box; }
.kb2-vis .kb-logo img { height: 46px; max-width: 100%; }
.kb2-manifesto { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); }
@media (max-width: 860px) { .kb2-manifesto { grid-template-columns: 1fr; } .kb2-vis .kb-logo { flex: none; } .kb2-vis .kb2-seal { flex: none; } }
@media (max-width: 640px) { .kb2-vis .kb2-seal { display: none; } .kb2-vis .kb-logo { margin: 0; } }

/* Plano e tabela de preços (Base de conhecimento) e soma dos produtos no negócio */
.kb6 { margin-top: 30px; }
.kb6-plan { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 92% 10%, rgba(114,179,146,.42), transparent 42%), linear-gradient(135deg, #0a1f44, #0a1f44 75%); box-shadow: 0 16px 36px rgba(4,21,47,.24); }
.kb6-pt { position: relative; z-index: 1; } .kb6-pt h3 { margin: 8px 0 4px; font: 600 clamp(24px, 3vw, 32px)/1.15 'Poppins', sans-serif; letter-spacing: -.025em; color: #fff; } .kb6-pt p { margin: 0; color: rgba(255,255,255,.88); }
.kb6-pp { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; } .kb6-pp b { font: 700 clamp(32px, 4vw, 44px)/1 'Poppins', sans-serif; letter-spacing: -.04em; color: #a9cbff; } .kb6-pp span { color: rgba(255,255,255,.8); font-size: 14px; }
.kb6-note { margin: 14px 2px 4px; line-height: 1.6; color: var(--muted); max-width: 80ch; }
.kb6-group { margin-top: 22px; } .kb6-group h4 { margin: 0 0 10px; font: 600 16px 'Poppins', sans-serif; display: flex; align-items: center; gap: 10px; } .kb6-group h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.kb6-rows { display: grid; gap: 8px; }
.kb6-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #0063fe; box-shadow: var(--shadow-card); }
.kb6-row:nth-child(even) { border-left-color: #39ae8b; }
.kb6-n { min-width: 0; } .kb6-n b { font: 600 15px 'Poppins', sans-serif; } .kb6-n p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.kb6-v { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 130px; }
.kb6-v b { font: 700 19px/1.1 'Poppins', sans-serif; letter-spacing: -.02em; color: var(--primary-dark); } .kb6-v span, .kb6-v small { color: var(--muted); font-size: 12px; } .kb6-v em { margin-top: 4px; font: 600 11px 'Poppins', sans-serif; font-style: normal; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, #39ae8b 16%, transparent); color: #1f6b52; }
.kb6-sc { font-size: 14px !important; color: var(--muted) !important; font-weight: 600 !important; }
@media (max-width: 640px) { .kb6-row { flex-direction: column; align-items: flex-start; } .kb6-v { align-items: flex-start; text-align: left; } .kb6-pp { align-items: flex-start; } }
.prod-sum { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; line-height: 1.45; }
.type-chips label span small { margin-left: 5px; opacity: .72; font-weight: 500; }
.kb6-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.prc-list { display: grid; gap: 14px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.prc-g > b { display: block; margin-bottom: 6px; font: 600 13px 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-dark); }
.prc-r { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr; gap: 10px; align-items: end; padding: 8px 0; border-top: 1px solid var(--line); }
.prc-r > span { font-weight: 600; font-size: 14px; line-height: 1.3; } .prc-r > span small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.prc-r label small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
@media (max-width: 640px) { .prc-r { grid-template-columns: 1fr 1fr; } .prc-r > span { grid-column: 1 / -1; } }

/* Logo do menu: maior, centralizada e em destaque; o menu começa mais abaixo */
.brand { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-logo { height: 70px; padding: 0 10px; justify-content: center; border-radius: 18px; background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(73,120,196,.24), transparent 72%); transition: transform .2s; }
.brand:hover .brand-logo { transform: scale(1.03); }
.brand-logo .logo-full { max-height: 48px; filter: drop-shadow(0 4px 14px rgba(73,120,196,.5)); }
.brand-logo .logo-icon { max-height: 42px; filter: drop-shadow(0 3px 10px rgba(73,120,196,.5)); }
.collapsed .brand { margin-bottom: 20px; padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .brand-logo { transition: none; } }
.kb6-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kb6-pl { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(255,255,255,.2), transparent 40%), linear-gradient(135deg, #39ae8b, #1f7f68); box-shadow: 0 14px 30px rgba(31,127,104,.25); }
.kb6-pl:nth-child(2) { background: radial-gradient(circle at 92% 8%, rgba(114,179,146,.4), transparent 42%), linear-gradient(135deg, #0063fe, #0a1f44); box-shadow: 0 14px 30px rgba(42,73,124,.28); }
.kb6-pl:nth-child(3) { background: radial-gradient(circle at 92% 8%, rgba(161,191,239,.35), transparent 42%), linear-gradient(135deg, #1e3964, #1d1330); box-shadow: 0 14px 30px rgba(29,19,48,.35); }
.kb6-pl > * { position: relative; z-index: 1; } .kb6-pl .kb2-dots { position: absolute; z-index: 0; }
.kb6-pl small { font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.kb6-pl h3 { margin: 0; font: 600 26px/1.1 'Poppins', sans-serif; letter-spacing: -.03em; color: #fff; }
.kb6-ppr { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; } .kb6-ppr b { font: 700 34px/1 'Poppins', sans-serif; letter-spacing: -.04em; color: #fff; } .kb6-ppr span { font-size: 13px; color: rgba(255,255,255,.8); }
.kb6-pl ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.25); display: grid; gap: 9px; }
.kb6-pl li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.95); } .kb6-pl li .ic { flex: none; margin-top: 2px; stroke-width: 3; color: #a9cbff; }

/* Logo do menu nítida: sem brilho nem sombra; destaque por um painel limpo com fio em verde-sálvia */
.brand-logo { background: rgba(255,255,255,.06); border: 1px solid rgba(152,181,228,.32); box-shadow: none; }
.brand-logo .logo-full, .brand-logo .logo-icon { filter: none; }
.brand:hover .brand-logo { transform: none; border-color: rgba(152,181,228,.6); background: rgba(255,255,255,.1); }

/* Menu lateral: roxo com a textura de pontos (meio-tom) da marca Prospectamos; logo sobre painel branco */
#sidebar {
  background:
    linear-gradient(180deg, rgba(19,38,68,0) 0%, rgba(19,38,68,.55) 60%, rgba(19,38,68,.92) 100%),
    radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(5,23,51,.38) 0 1px, transparent 1.6px) 3.5px 3.5px / 7px 7px,
    linear-gradient(165deg, #335790 0%, #214174 50%, #0a1f44 100%);
  border-right-color: #1e3964;
}
.brand-logo { background: #fffdf9; border: 1px solid #fff; box-shadow: 0 8px 18px rgba(20,10,40,.35); }
.brand:hover .brand-logo { background: #fff; border-color: #fff; box-shadow: 0 10px 22px rgba(20,10,40,.45); }
.brand { border-bottom-color: rgba(255,255,255,.18); }

/* Menu mais escuro, com a textura de pontos mais leve (principalmente atrás da logo) */
#sidebar {
  background:
    linear-gradient(180deg, rgba(25,16,42,.35) 0%, rgba(25,16,42,.55) 55%, rgba(25,16,42,.9) 100%),
    radial-gradient(circle, rgba(255,255,255,.085) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(15,8,28,.3) 0 1px, transparent 1.6px) 3.5px 3.5px / 7px 7px,
    linear-gradient(165deg, #1f3c6b 0%, #162c50 50%, #21172f 100%);
  border-right-color: #14294b;
}

/* Divisor em relevo entre a logo e o menu: sulco gravado com um losango verde em alto relevo */
.brand { position: relative; border-bottom: 0; padding-bottom: 22px; margin-bottom: 28px; }
.brand::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(10,4,22,.75) 14%, rgba(10,4,22,.75) 86%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.24), 0 -1px 0 rgba(0,0,0,.25); }
.brand::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 13px; height: 13px; transform: translateX(-50%) rotate(45deg); border-radius: 4px; background: linear-gradient(145deg, #b2ccf5, #72b392 55%, #3d8f6d); box-shadow: 0 0 0 3px #182e52, 0 4px 7px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25); }

/* Tom de roxo ameixa (mais quente) e relevo discreto sob a logo */
#sidebar {
  background:
    linear-gradient(180deg, rgba(9,21,39,.3) 0%, rgba(9,21,39,.5) 55%, rgba(9,21,39,.88) 100%),
    radial-gradient(circle, rgba(255,255,255,.075) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(2,12,28,.28) 0 1px, transparent 1.6px) 3.5px 3.5px / 7px 7px,
    linear-gradient(165deg, #1e3964 0%, #152b4f 50%, #0e1d36 100%);
  border-right-color: #122440;
}
.brand { padding-bottom: 18px; margin-bottom: 24px; }
.brand::before { left: 14px; right: 14px; height: 1px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(12,4,18,.55) 20%, rgba(12,4,18,.55) 80%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.brand::after { bottom: -3px; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(145deg, #a9cbff, #72b392); box-shadow: 0 0 0 2px #142848, 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4); }

/* Sem a bolinha: só um risco fino separando a logo do menu */
.brand::after { content: none; display: none; }
.brand::before { left: 6px; right: 6px; height: 1px; border-radius: 0; background: rgba(255,255,255,.26); box-shadow: 0 1px 0 rgba(10,3,16,.55); }
.brand { padding-bottom: 20px; margin-bottom: 22px; }
.brand::before { background: rgba(255,255,255,.38); }

/* Roxo da marca (violeta) no menu, escuro o bastante para manter o contraste do texto (acima de 7:1) */
#sidebar {
  background:
    linear-gradient(180deg, rgba(30,20,56,.25) 0%, rgba(30,20,56,.5) 55%, rgba(30,20,56,.85) 100%),
    radial-gradient(circle, rgba(255,255,255,.075) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle, rgba(20,10,44,.28) 0 1px, transparent 1.6px) 3.5px 3.5px / 7px 7px,
    linear-gradient(165deg, #2f599d 0%, #1f437e 50%, #16325e 100%);
  border-right-color: #193869;
}
.brand::before { background: rgba(226,216,255,.4); box-shadow: 0 1px 0 rgba(18,8,40,.55); }

/* Envio pelo CRM: e-mail, WhatsApp por QR code e disparo em massa */
.person-comm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wa-box { min-height: 120px; } .wa-ok { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, #39ac99 14%, transparent); color: #1f6b52; } .wa-ok b { display: block; } .wa-ok small { display: block; color: var(--muted); }
.wa-steps { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; } .wa-qr { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; width: max-content; margin: 0 auto 8px; max-width: 100%; } .wa-qr img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.bk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .bk-top .pill { background: var(--surface); border: 1px solid var(--line); } .bk-top .pill.on { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.bk-list { max-height: 190px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; margin: 10px 0 14px; background: var(--surface); }
.bk-lh { padding: 9px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.bk-row { display: flex; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: pointer; } .bk-row small { display: block; color: var(--muted); font-size: 12px; } .bk-row:last-child { border-bottom: 0; }
.bk-prev { margin-top: 6px; } .bk-prev small { color: var(--muted); } .bk-prev pre { white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: #f2f6fb; border: 1px dashed var(--line-strong); font: 13.5px/1.55 'Poppins', sans-serif; max-height: 170px; overflow: auto; }
.run-log { max-height: 280px; overflow: auto; margin-top: 8px; }

/* Indicador da próxima tarefa no card do funil: ícone do tipo + dia */
.ind.typed { width: auto; min-width: 20px; height: 22px; padding: 0 7px 0 6px; border-radius: 99px; gap: 4px; display: inline-flex; align-items: center; font-weight: 600; }
.ind.typed small { font-size: 11px; line-height: 1; white-space: nowrap; }
.ind.typed.ok { background: color-mix(in srgb, var(--teal) 12%, transparent); }
.ind.typed.today { border: 1.5px solid var(--amber); color: #8a5a00; background: color-mix(in srgb, var(--amber) 18%, transparent); }
.ind.typed.late { background: var(--red); color: #fff; }

/* Conversa do WhatsApp no card, página WhatsApp e avisos de mensagem nova */
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; padding: 8px; margin-bottom: 8px; border-radius: 14px; background: #efeae2; background-image: radial-gradient(circle, rgba(0,0,0,.035) 0 1px, transparent 1.4px); background-size: 8px 8px; }
.msg { max-width: 86%; padding: 7px 10px 5px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.msg p { margin: 0; white-space: pre-wrap; word-break: break-word; } .msg small { display: block; margin-top: 2px; font-size: 10.5px; opacity: .65; text-align: right; }
.msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; } .msg.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 4px; }
.conv { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .conv .msg.in { background: #f2f6fb; } .conv .msg.out { background: color-mix(in srgb, var(--primary) 12%, #fff); }
.chat-in { display: flex; gap: 8px; align-items: flex-end; } .chat-in textarea { flex: 1; resize: vertical; min-height: 40px; max-height: 140px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--ink); }
.reply-quote { margin-bottom: 10px; padding: 9px 12px; border-left: 4px solid #39ae8b; border-radius: 8px; background: #f2f6fb; } .reply-quote small { color: var(--muted); font-weight: 600; } .reply-quote p { margin: 2px 0 0; white-space: pre-wrap; max-height: 90px; overflow: auto; }
.wa-un { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 99px; background: #25d366; color: #fff; font: 700 11px/1 'Poppins', sans-serif; }
.wa-pill { background: color-mix(in srgb, var(--muted) 12%, transparent); } .wa-pill.on { background: color-mix(in srgb, #25d366 18%, transparent); color: #128c4a; border-color: color-mix(in srgb, #25d366 40%, transparent); } .wa-pill .wa-un { margin-left: 6px; }
.wa-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 22px; margin-bottom: 14px; color: var(--ink); background: linear-gradient(120deg, #f2f6fb, #efe9dc); border: 1px solid var(--line); }
.wa-hero.on { background: linear-gradient(120deg, #d9fdd3, #bfeeb8); border-color: #7bd88a; }
.wa-hero-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #34d673, #128c4a); box-shadow: 0 6px 14px rgba(18,140,74,.35); } .wa-hero:not(.on) .wa-hero-ic { background: linear-gradient(150deg, #9cc0ff, #0063fe); box-shadow: 0 6px 14px rgba(0,99,254,.3); }
.wa-hero-tx { flex: 1; min-width: 220px; } .wa-hero-tx b { display: block; font: 600 18px 'Poppins', sans-serif; } .wa-hero-tx small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.5; }
.wa-list { display: grid; margin-top: 8px; } .wa-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); } .wa-row:first-child { border-top: 0; } .wa-row:hover { background: var(--primary-soft); border-radius: 12px; } .wa-row.un .wa-rt b { color: #128c4a; }
.wa-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 16px 'Poppins', sans-serif; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.wa-rt { flex: 1; min-width: 0; } .wa-rt b { display: block; font-weight: 600; } .wa-rt b small { color: var(--muted); font-weight: 400; } .wa-rt span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-rm { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .wa-rm small { color: var(--muted); font-size: 11.5px; }
.card-foot .wa-un { margin-right: 4px; }

/* Caixa de conversas do WhatsApp na Produção */
.wa-inbox { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); min-height: 460px; }
.wa-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; } .wa-sh { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); } .wa-sh small { color: var(--muted); }
.wa-slist { overflow: auto; max-height: 520px; } .wa-row2 { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); background: none; cursor: pointer; font: inherit; color: var(--ink); } .wa-row2:hover { background: var(--primary-soft); } .wa-row2.on { background: color-mix(in srgb, #25d366 14%, transparent); } .wa-row2.un .wa-rt b { color: #128c4a; }
.wa-main { display: flex; flex-direction: column; min-width: 0; padding: 12px; } .wa-mh { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; flex-wrap: wrap; } .wa-mh b { display: block; } .wa-mh small { color: var(--muted); }
.chat.tall { flex: 1; max-height: 380px; min-height: 280px; } .wa-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 30px; }
@media (max-width: 760px) { .wa-inbox { grid-template-columns: 1fr; } .wa-side { border-right: 0; border-bottom: 1px solid var(--line); } .wa-slist { max-height: 200px; } }

/* Tela de login: logo como era antes, sem o painel branco do menu */
.auth-brand .brand-logo { background: none; border: 0; box-shadow: none; border-radius: 0; height: auto; padding: 0; justify-content: flex-start; transform: none; overflow: visible; }
.auth-brand .brand-logo .logo-full { max-height: 40px; filter: none; }
.auth-brand:hover .brand-logo { transform: none; background: none; }

/* Negócio: barra de etapas mais calma, cabeçalho em duas linhas e cartões mais organizados */
.stagebar { margin: 4px 0 20px 6px; }
.st { height: 46px; padding: 0 20px 0 22px; background: #efecf4; color: #7a7088; font-size: 12.5px; transition: background .15s, color .15s; }
.st span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; text-overflow: clip; line-height: 1.15; }
.st.on { background: #d6e4ff; color: #0a1f44; }
.st.on.cur { background: linear-gradient(135deg, #0063fe, #0a4fc4); color: #fff; box-shadow: inset 0 -3px 0 rgba(255,255,255,.25); }
.st.on.won { background: #cfe9dc; color: #1f6b52; }
.st:not(.on):not(:disabled):hover { background: #e3dcf1; color: #0a1f44; }
.st small { opacity: .85; font-size: 10.5px; margin-top: 1px; }
.deal-head { gap: 14px; margin-bottom: 10px; align-items: flex-start; }
.deal-head h1 { font-size: 26px; margin: 0 0 6px; }
.deal-meta { gap: 8px 14px; align-items: center; font-size: 13.5px; }
.deal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 16px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.deal-actions .dg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-actions .dg + .dg { padding-left: 22px; border-left: 1px solid var(--line); }
.deal-actions .dg.end { margin-left: auto; padding-left: 0; border-left: 0; }
.btn.ghost { background: transparent; color: var(--muted); border-color: transparent; } .btn.ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--muted) 10%, transparent); }
@media (max-width: 760px) { .deal-actions .dg + .dg { padding-left: 0; border-left: 0; } .deal-actions .dg.end { margin-left: 0; } }
.deal-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 18px; }
.side-card h3 { padding: 14px 16px 10px; }
.h3t { display: inline-flex; align-items: center; gap: 8px; font: 600 14px 'Poppins', sans-serif; } .h3i { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); } .h3i.wa { background: linear-gradient(150deg, #34d673, #128c4a); } .h3i .ic { stroke-width: 2.3; }
.rs-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 16px 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #eaf2ff, #e8f2ec); }
.rs-hero small { display: block; color: var(--muted); font-size: 11.5px; } .rs-hero b { font: 700 24px/1.1 'Poppins', sans-serif; letter-spacing: -.03em; color: var(--primary-dark); } .rs-stage { min-width: 120px; text-align: right; } .rs-stage .wk-bar { display: block; margin-top: 6px; }
.rs-card .kv, .side-card .kv { padding: 0 16px 14px; }
.kv .person-row { padding: 12px 16px; }
.person-row-head { display: flex; align-items: center; gap: 10px; }
.pr-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 14px 'Poppins', sans-serif; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.pr-nm { flex: 1; min-width: 0; } .pr-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .pr-chips:empty { display: none; }
.pr-contacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 44px; }
.pr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font: 500 12px 'Poppins', sans-serif; text-decoration: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-pill:hover { border-color: var(--primary); } .pr-pill.wa { color: #128c4a; border-color: color-mix(in srgb, #25d366 45%, transparent); background: color-mix(in srgb, #25d366 10%, transparent); } .pr-pill.off { color: var(--muted); cursor: default; } .pr-pill.act { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.wa-card { border-color: color-mix(in srgb, #25d366 35%, var(--line)); } .wa-pick { padding: 0 16px 8px; } .wa-pick-l small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; } .wa-pick-l .input { width: 100%; }
.wa-card .chat { margin: 0 16px 10px; max-height: 340px; min-height: 160px; } .wa-card .chat-in { padding: 0 16px; } .wa-card .hint, .wa-card .person-comm, .wa-card .conv { margin-left: 16px; margin-right: 16px; } .wa-card > p.muted, .wa-card > button { margin-left: 16px; }
.wa-card .person-comm { padding-bottom: 14px; }
.rs-stage .wk-bar { height: 6px; border-radius: 99px; background: rgba(42,73,124,.15); overflow: hidden; } .rs-stage .wk-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3b8bff, #0a4fc4); }
.deal-head h1 { line-height: 1.15; } .deal-actions .btn.won, .deal-actions .btn.suspended, .deal-actions .btn.lost { min-width: 84px; }

/* Pessoas no mesmo padrão da Organização; Nicho em botões; Qualificação em passos */
.kv.people-list .person-row { padding: 10px 16px 6px; }
.kv.people-list .person-row .v { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.kv .person-row-head { align-items: center; justify-content: space-between; padding: 0 0 2px; }
.pr-tag { font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-tag.main { color: var(--primary-dark); background: var(--primary-soft); padding: 2px 8px; border-radius: 99px; }
.nc-sub { margin: 0 16px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px; }
.nc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 500 12.5px 'Poppins', sans-serif; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.nc-chip:hover { border-color: #3b8bff; background: #f2f7ff; }
.nc-chip:active { transform: scale(.97); }
.nc-chip.on { background: linear-gradient(135deg, #0063fe, #0a4fc4); border-color: transparent; color: #fff; }
.nc-now { margin: 12px 16px 14px; padding: 10px 12px; border-radius: 12px; background: #f2f7ff; color: var(--muted); font-size: 12.5px; line-height: 1.45; } .nc-now b { color: var(--primary-dark); }
.niche-card .notice { margin: 0 16px 14px !important; }
.sp-prog { margin: 0 16px 6px; } .sp-prog small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.sp-bar { display: block; height: 6px; border-radius: 99px; background: rgba(42,73,124,.13); overflow: hidden; } .sp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3b8bff, #0a4fc4); transition: width .3s; }
.sp-f { margin: 10px 16px 0; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.sp-f:focus-within { border-color: #3b8bff; box-shadow: 0 0 0 3px rgba(102,139,199,.18); }
.sp-f.ok { border-color: color-mix(in srgb, #39ac99 55%, var(--line)); background: color-mix(in srgb, #39ac99 5%, var(--surface)); }
.sp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .sp-h b { font: 600 13.5px 'Poppins', sans-serif; }
.sp-l { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font: 700 13px 'Poppins', sans-serif; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.sp-f.ok .sp-l { background: linear-gradient(150deg, #4cc3ae, #2a8f7d); }
.sp-ok { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: #39ac99; color: #fff; } .sp-f.ok .sp-ok { display: grid; }
.sp-q { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.sp-ask { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #f2f7ff; color: var(--primary-dark); font-size: 12px; line-height: 1.4; }
.sp-f textarea.input { width: 100%; min-height: 64px; resize: vertical; field-sizing: content; max-height: 220px; }
.sp-st { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-chip { padding: 4px 10px; border-radius: 99px; border: 1px dashed #a0b8de; background: transparent; color: var(--primary-dark); font: 500 11.5px 'Poppins', sans-serif; cursor: pointer; } .sp-chip:hover { background: #eaf2ff; border-style: solid; }
.sp-f.ok .sp-st { display: none; }
.spin-card { padding-bottom: 16px; }
.kv span.k { white-space: nowrap; flex: none; }

/* Reunião com o closer: tarefa em destaque, card do negócio e registro da reunião */
.tl-item.kit { border: 1.5px solid #3b8bff; background: linear-gradient(135deg, #f2f7ff, #fff); box-shadow: 0 6px 18px rgba(56,93,152,.12); position: relative; }
.tl-item.kit::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #3b8bff, #0a1f44); }
.chip.kit { background: linear-gradient(135deg, #0063fe, #0a4fc4); color: #fff; border-color: transparent; font-weight: 600; }
.mt-top { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, #eaf2ff, #e8f2ec); }
.mt-top > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); flex: none; }
.mt-top b { display: block; font-size: 14px; } .mt-top small { color: var(--muted); font-size: 12.5px; }
.meet-card { border-color: #bbceec; }
.mc-when { margin: 0 16px 8px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #0063fe, #0a4fc4); color: #fff; }
.mc-when b { display: block; font: 600 16px 'Poppins', sans-serif; } .mc-when small { opacity: .85; font-size: 12.5px; word-break: break-word; }
.mc-mail { margin: 0 16px 10px; font-size: 12.5px; color: var(--muted); word-break: break-all; }
.mc-act { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.mc-p { margin: 0 16px 10px; font-size: 13px; line-height: 1.5; color: var(--muted); } .mc-p b { color: var(--ink); }
.mc-deb { padding-bottom: 8px; }
.db-sec { margin: 16px 0 8px; font: 600 11.5px 'Poppins', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--primary-dark); } .db-sec:first-of-type { margin-top: 0; }
.db-chips { margin-bottom: 10px; }
.db-obj { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.db-ob { cursor: pointer; } .db-ob input { position: absolute; opacity: 0; pointer-events: none; }
.db-ob span { display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1.5px solid var(--line); font: 500 12.5px 'Poppins', sans-serif; background: var(--surface); }
.db-ob input:checked + span { background: linear-gradient(135deg, #0063fe, #0a4fc4); color: #fff; border-color: transparent; }
.db-ob input:focus-visible + span { outline: 2px solid #3b8bff; outline-offset: 2px; }

/* Produção e demais telas no mesmo padrão dos cartões do Comercial (só visual, nada muda no funcionamento) */
.wk-pcard { border: 1px solid var(--line); border-left: 4px solid var(--c); border-top: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 6%, #fff), #fff 55%); }
.wk-pcard:hover { border-color: var(--line-strong); border-left-color: var(--c); }
.wk-pcard.tpl { border-left-color: var(--primary); border-top-color: var(--line); }
.wk-col { background: transparent; padding: 0; border-radius: 16px; }
.wk-colhead { padding: 11px 14px 10px; margin-bottom: 8px; border-radius: 16px; border-bottom: 0; color: #fff; background: color-mix(in srgb, var(--c, var(--primary)) 84%, #000); box-shadow: 0 6px 16px color-mix(in srgb, var(--c, var(--primary)) 32%, transparent); }
.wk-colhead b { color: #fff; font-weight: 700; font-size: 14px; } .wk-colhead span { background: rgba(255,255,255,.22); color: #fff; font-weight: 600; }
.wk-colbody { padding: 8px 8px 24px; border-radius: 16px; background: color-mix(in srgb, var(--c, var(--primary)) 9%, #e6ebf2); }
.wk-colbody.over { background: color-mix(in srgb, var(--c, var(--primary)) 22%, #e6ebf2); outline: 0; }
.wk-card { border-radius: 14px; border-left-width: 3px; box-shadow: var(--shadow-card); } .wk-card:hover { border-color: var(--line-strong); border-left-color: var(--pc); box-shadow: 0 6px 20px rgba(4,21,47,.12); transform: translateY(-2px); }
.wk-ccard { border-left: 4px solid var(--c, var(--primary)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--primary)) 6%, #fff), #fff 55%); } .wk-ccard:hover { border-color: var(--line-strong); border-left-color: var(--c, var(--primary)); box-shadow: 0 6px 20px rgba(4,21,47,.12); }
.wk-kpi, .wk-appcard { border-radius: 16px; }
.panel { border-radius: 16px; } .panel > h2 { display: flex; align-items: center; gap: 8px; }

/* Botão Marcar reunião: no cartão do kanban e em faixa no topo do negócio */
.mt-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 10px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #0063fe, #0a4fc4); color: #fff; font: 600 12.5px 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgba(56,93,152,.28); transition: transform .12s, box-shadow .12s; }
.mt-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(56,93,152,.38); }
.mt-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 99px; background: #eaf2ff; color: var(--primary-dark); font: 600 12px 'Poppins', sans-serif; }
.meet-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #eaf2ff, #e8f2ec); border: 1.5px solid #bbceec; }
.meet-cta .mt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.meet-cta > div { flex: 1; min-width: 200px; } .meet-cta b { display: block; font: 600 14.5px 'Poppins', sans-serif; } .meet-cta small { color: var(--muted); font-size: 12.5px; }

/* Colunas de resultado (Ganho, Suspenso, Perdido) no fim do quadro de negócios */
.close-col { border-left: 0; margin-left: 6px; position: relative; }
.close-col::before { display: none; content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line-strong); opacity: .6; }
.col:not(.close-col) + .close-col::before { display: block; }
.close-col .card { opacity: .94; }

/* Etapa final do negócio fechado: Ganho, Suspenso ou Perdido na barra de etapas */
.st.on.res { color: #fff; font-weight: 700; opacity: 1; }
.st.on.res.won { background: linear-gradient(135deg, #4cc3ae, #2a8f7d); }
.st.on.res.suspended { background: linear-gradient(135deg, #f2b84b, #d98e0c); }
.st.on.res.lost { background: linear-gradient(135deg, #e5604f, #b8281b); }
.st.res:disabled { cursor: default; }

/* Lead sem próxima tarefa: aviso no cartão, filtro e faixa no negócio */
.ind.typed.none { background: var(--red); color: #fff; animation: ntpulse 2.4s ease-in-out infinite; }
@keyframes ntpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(211,44,44,.45); } 50% { box-shadow: 0 0 0 5px rgba(211,44,44,0); } }
@media (prefers-reduced-motion: reduce) { .ind.typed.none { animation: none; } }
.card.no-task { border-color: #f0b4b4; border-left-color: var(--red); background: linear-gradient(135deg, #fff5f5, #fff 60%); }
.notask-chip { color: var(--red); border-color: #f0b4b4; background: #fff5f5; font-weight: 600; } .notask-chip.on { background: var(--red); color: #fff; border-color: var(--red); }
.notask-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 8px; border-radius: 16px; border: 1.5px solid #f0b4b4; background: #fff5f5; color: var(--red); }
.notask-banner > div { flex: 1; min-width: 180px; } .notask-banner b { display: block; color: var(--ink); font: 600 14px 'Poppins', sans-serif; } .notask-banner small { color: var(--muted); font-size: 12.5px; }

/* Sem tarefa em amarelo (substitui o vermelho acima) */
.ind.typed.none { background: #f6c343; color: #5c4200; animation: ntpulse 2.4s ease-in-out infinite; }
@keyframes ntpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(237,167,29,.5); } 50% { box-shadow: 0 0 0 5px rgba(237,167,29,0); } }
.card.no-task { border-color: #f1d27a; border-left-color: #eda71d; background: linear-gradient(135deg, #fff9e6, #fff 60%); }
.notask-chip { color: #8a5a00; border-color: #f1d27a; background: #fff9e6; } .notask-chip.on { background: #f6c343; color: #5c4200; border-color: #eda71d; }
.notask-banner { border-color: #f1d27a; background: #fff9e6; color: #b87800; }

/* Playbook comercial na Biblioteca: identidade Prospectamos (violeta, verde sálvia, pontilhado da marca) */
.pb { margin-top: 6px; }
.pb-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; margin-bottom: 14px; border-radius: 22px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #0e2a54, #0a4fc4 55%, #4b8f78); box-shadow: 0 10px 30px rgba(31,62,113,.25); }
.pb-banner::before { content: ''; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.1px, transparent 1.5px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); pointer-events: none; }
.pb-banner > * { position: relative; }
.pb-banner h2 { margin: 4px 0 6px; font: 600 clamp(20px, 3vw, 28px)/1.15 var(--font-display); color: #fff; }
.pb-banner p { margin: 0; max-width: 62ch; color: rgba(255,255,255,.92); line-height: 1.55; font-size: 14px; }
.pb-banner img { background: #fff; border-radius: 18px; padding: 8px; flex: none; }
.pb-banner .kb2-eyebrow { color: #cfe8da; }
.pb-tabs { margin: 0 0 14px; }
.pb-steps { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 8px; scroll-snap-type: x proximity; }
.pb-step { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 500 13px 'Poppins', sans-serif; cursor: pointer; white-space: nowrap; scroll-snap-align: start; transition: transform .12s, box-shadow .15s, border-color .15s; }
.pb-step:hover { transform: translateY(-1px); border-color: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 22%, transparent); }
.pb-step .pb-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font: 700 12px 'Poppins', sans-serif; }
.pb-step.past { background: color-mix(in srgb, var(--c) 8%, #fff); }
.pb-step.on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 35%, transparent); } .pb-step.on .pb-n { background: rgba(255,255,255,.25); color: #fff; }
.pb-panel { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 20px; padding: 20px 22px 22px; box-shadow: var(--shadow-card); }
.pb-ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pb-ph h2 { margin: 0; font: 600 22px/1.2 var(--font-display); color: var(--c); } .pb-ph small { color: var(--muted); font-size: 12px; } .pb-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pb-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c, #0a4fc4) 75%, #fff), var(--c, #0a4fc4)); box-shadow: 0 6px 16px color-mix(in srgb, var(--c, #0a4fc4) 30%, transparent); }
.pb-ic.sm { width: 34px; height: 34px; border-radius: 11px; }
.pb-sla { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font: 600 12px 'Poppins', sans-serif; max-width: 100%; }
.pb-goal { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c) 7%, #fff); line-height: 1.55; font-size: 14px; }
.pb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.pb-two section, .pb-offer { padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.pb-panel h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 600 14px 'Poppins', sans-serif; color: var(--c); }
.pb-h3 { margin: 20px 0 10px !important; }
.pb-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.pb-ul li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.pb-ul li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #72b392); }
.pb-ul.crm li::before { border-radius: 2px; background: #72b392; } .pb-ul.bad li::before { background: #d32c2c; }
.pb-ol { margin: 0; padding: 0; list-style: none; counter-reset: pb; display: flex; flex-direction: column; gap: 9px; }
.pb-ol li { counter-increment: pb; position: relative; padding-left: 32px; font-size: 13.5px; line-height: 1.5; }
.pb-ol li::before { content: counter(pb); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 11.5px 'Poppins', sans-serif; }
.pb-says { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pb-say { border: 1.5px dashed color-mix(in srgb, var(--c, #0a4fc4) 45%, #fff); border-radius: 16px; padding: 12px 14px; background: #fffdf9; }
.pb-say-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .pb-say-h b { font-size: 13px; color: var(--ink); }
.pb-say p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #2e3a4b; white-space: pre-wrap; }
.pb-copy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: #fff; color: var(--primary-dark); font: 600 11.5px 'Poppins', sans-serif; cursor: pointer; flex: none; } .pb-copy:hover { background: var(--primary-soft); }
.pb-bad { background: #fff5f5 !important; } .pb-bad h3 { color: #b8281b !important; }
.pb-next { background: color-mix(in srgb, #39ac99 10%, #fff) !important; } .pb-next h3 { color: #21806f !important; } .pb-next p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.pb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.pb-niche-tip { margin: 14px 0; padding: 14px 16px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--c) 40%, #fff); background: color-mix(in srgb, var(--c) 6%, #fff); }
.pb-nt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .pb-nt-h > span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--c); color: #fff; } .pb-nt-h b { color: var(--c); }
.pb-niche-tip p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.pb-link { margin-left: auto; border: 0; background: none; color: var(--primary-dark); font: 600 12px 'Poppins', sans-serif; cursor: pointer; text-decoration: underline; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pb-niche-tip .pb-chips { margin: 0; }
.pb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; font: 500 12.5px 'Poppins', sans-serif; cursor: pointer; transition: transform .12s, border-color .15s; } .pb-chip:hover { border-color: var(--c); transform: translateY(-1px); }
.pb-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.pb-offer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; background: linear-gradient(135deg, #eaf2ff, #e8f2ec) !important; margin-top: 4px; } .pb-offer small { display: block; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } .pb-offer h3 span { font-weight: 500; color: var(--ink); font-size: 13px; } .pb-offer p { margin: 0; font-size: 13.5px; line-height: 1.55; }
@media (max-width: 700px) { .pb-offer { grid-template-columns: 1fr; } .pb-banner img { display: none; } .pb-panel { padding: 16px 14px 18px; } }
.pb-spin { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pb-sp { padding: 12px 14px; border-radius: 16px; background: var(--bg); } .pb-sp b { display: inline-block; margin: 0 0 8px 8px; font-size: 14px; }
.pb-l { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; font: 700 14px 'Poppins', sans-serif; background: linear-gradient(150deg, #3b8bff, #0a1f44); vertical-align: middle; }
.pb-acc details { border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; padding: 0; margin-bottom: 8px; background: #fff; overflow: hidden; }
.pb-acc summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; } .pb-acc summary::-webkit-details-marker { display: none; }
.pb-acc summary .pb-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 12px 'Poppins', sans-serif; }
.pb-acc details[open] summary { background: color-mix(in srgb, var(--c) 8%, #fff); } .pb-acc details p { margin: 0; padding: 4px 16px 14px 48px; font-size: 13.5px; line-height: 1.6; }
.pb-objs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pb-obj { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 8px; } .pb-obj p { margin: 0; font-size: 13.5px; line-height: 1.6; } .pb-q { display: flex; align-items: center; gap: 6px; color: #b8281b; font-size: 13.5px; } .pb-obj .pb-copy { align-self: flex-start; }
.pb-camp { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.55; border: 1px dashed var(--line-strong); }
.pb-lead { margin: 0 0 14px; color: var(--muted); line-height: 1.6; max-width: 70ch; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pb-card { background-color: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-card); background-image: linear-gradient(135deg, color-mix(in srgb, var(--c) 5%, #fff), #fff 50%); }
.pb-card.wide { grid-column: 1 / -1; margin-bottom: 14px; }
.pb-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pb-card h3 { margin: 0; font: 600 15px 'Poppins', sans-serif; color: var(--c); } .pb-card header small { color: var(--muted); font-size: 11.5px; }
.pb-card > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #2e3a4b; }
.pb-tipbox { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, #fff); color: #2e3a4b; font-size: 13px; line-height: 1.5; } .pb-tipbox svg { flex: none; margin-top: 2px; color: var(--c); }
.pb-ex { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.55; font-style: italic; }
.pb-table { display: grid; gap: 4px; overflow-x: auto; } .pb-tr { display: grid; grid-template-columns: 110px repeat(3, minmax(170px, 1fr)); gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45; } .pb-tr:nth-child(even) { background: var(--bg); } .pb-tr.head { font-weight: 700; color: var(--primary-dark); } .pb-tr .hl { background: color-mix(in srgb, #72b392 20%, #fff); border-radius: 8px; padding: 2px 8px; }
.pb-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; } .pb-gloss div { padding: 8px 12px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; } .pb-gloss b { color: #21806f; }
.pb-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; } .pb-guide div { padding: 14px 16px; border-radius: 16px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.5; } .pb-guide b { color: var(--c); font: 600 15px 'Poppins', sans-serif; }
.pb-feature { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, #eaf2ff, #e8f2ec); border: 1.5px solid #bbceec; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s; } .pb-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-bold); }
.pb-feature > div { flex: 1; min-width: 220px; } .pb-feature b { display: block; font: 600 16px 'Poppins', sans-serif; color: #0a4fc4; } .pb-feature small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pb-feature .pb-ic { --c: #0a4fc4; }
.card-pb { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--primary-dark); display: inline-grid; place-items: center; padding: 0; cursor: pointer; flex: none; transition: background .15s, transform .12s; } .card-pb:hover { background: var(--primary-soft); transform: scale(1.08); }

/* Plano dia a dia no playbook */
.pb-auto { font: 500 11.5px 'Poppins', sans-serif; color: var(--muted); margin-left: 6px; }
.pb-days { display: grid; gap: 10px; }
.pb-day { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; }
.pb-dh { padding: 8px 0; text-align: center; border-radius: 12px; background: var(--c); color: #fff; font: 700 12.5px 'Poppins', sans-serif; position: sticky; top: 0; }
.pb-di { display: grid; gap: 8px; }
.pb-it { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.pb-it b { font-size: 13.5px; } .pb-it p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: #2e3a4b; }
.pb-ci { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: #0063fe; }
.pb-it.ch-ligacao .pb-ci { background: #e8590c; } .pb-it.ch-whatsapp .pb-ci { background: #25a860; } .pb-it.ch-email .pb-ci { background: #3c8cdd; } .pb-it.ch-tarefa .pb-ci { background: #eda71d; }
.pb-it.ch-tarefa { background: #fff9e6; border-color: #f1d27a; }
@media (max-width: 640px) { .pb-day { grid-template-columns: 1fr; } .pb-dh { padding: 6px 12px; text-align: left; } }

/* Conversa no WhatsApp sem número: texto e botão alinhados com o resto do cartão */
.wa-card .wa-empty-s { padding: 0 16px 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wa-card .wa-empty-s p { margin: 0; font-size: 13px; line-height: 1.5; }
.wa-card > .conv, .wa-card > .person-comm { padding-left: 16px; padding-right: 16px; }

/* Capa do Playbook comercial e subseções em destaque */
.pb-cover { min-height: 460px; }
.pb-cover .kb-hero-in { max-width: 760px; padding: 40px 38px 42px; }
.pb-cover h1 { font: italic 600 clamp(44px, 7.4vw, 84px)/1 'Playfair Display', Georgia, serif; letter-spacing: -.01em; margin: 10px 0 16px; text-shadow: 0 3px 22px rgba(20,12,34,.45); }
.pb-cover p { font-size: 16px; max-width: 52ch; }
.pb-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pb-stats span { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(4px); font-size: 13px; color: #fff; }
.pb-stats b { font: 700 18px 'Poppins', sans-serif; margin-right: 4px; color: #cfe8da; }
.pb-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.pb-tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 16px; border-radius: 20px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s, border-color .15s; }
.pb-tile:hover { transform: translateY(-3px); border-color: #3b8bff; box-shadow: 0 12px 28px rgba(56,93,152,.2); }
.pb-ti { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); }
.pb-tile:nth-child(2) .pb-ti { background: linear-gradient(150deg, #4cc3ae, #2a8f7d); } .pb-tile:nth-child(3) .pb-ti { background: linear-gradient(150deg, #f08a4b, #d9480f); } .pb-tile:nth-child(4) .pb-ti { background: linear-gradient(150deg, #7fa4e0, #0a4fc4); } .pb-tile:nth-child(5) .pb-ti { background: linear-gradient(150deg, #f2b84b, #d98e0c); }
.pb-tt { display: flex; flex-direction: column; min-width: 0; }
.pb-tt small { font: 600 10.5px 'Poppins', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pb-tt b { font: 600 15px/1.2 'Poppins', sans-serif; margin: 2px 0; }
.pb-tt em { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pb-tile.on { background: linear-gradient(135deg, #0a4fc4, #4b8f78); border-color: transparent; color: #fff; box-shadow: 0 14px 32px rgba(56,93,152,.35); }
.pb-tile.on small, .pb-tile.on em { color: rgba(255,255,255,.88); } .pb-tile.on .pb-ti { background: rgba(255,255,255,.22); }
@media (max-width: 1100px) { .pb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-tile { flex-direction: column; align-items: flex-start; padding: 14px; } .pb-cover { min-height: 380px; } .pb-cover .kb-hero-in { padding: 28px 22px 30px; } }

/* Celular e tablet: o negócio inteiro numa coluna só (corrige a segunda coluna que sumia), cabeçalho compacto e atalhos */
.deal-jump { display: none; }
@media (max-width: 900px) {
  .deal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .deal-grid > div { display: contents; }
  .deal-grid .rs-card { order: 1; } .deal-grid .meet-card { order: 2; } .deal-grid .dg-foco { order: 3; } .deal-grid .wa-card { order: 4; } .deal-grid .composer { order: 5; }
  .deal-grid .dg-pessoas { order: 6; } .deal-grid .dg-org { order: 7; } .deal-grid .niche-card { order: 8; } .deal-grid .spin-card { order: 9; } .deal-grid .dg-hist { order: 10; }
  .deal-grid > div > * { min-width: 0; }
  .deal-grid [id], .deal-grid .spin-card { scroll-margin-top: 62px; }
  .deal-jump { display: flex; gap: 6px; overflow-x: auto; position: sticky; top: 0; z-index: 20; margin: 0 -12px 12px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .deal-jump::-webkit-scrollbar { display: none; }
  .deal-jump button { flex: none; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--primary-dark); font: 600 12.5px 'Poppins', sans-serif; cursor: pointer; }
  .deal-jump button:active { background: var(--primary-soft); }
}
@media (max-width: 760px) {
  .deal-head { gap: 10px; flex-wrap: nowrap; } .deal-head h1 { font-size: 20px; line-height: 1.2; margin-bottom: 4px; } .deal-meta { font-size: 12.5px; gap: 4px 10px; }
  .deal-actions { display: grid; gap: 8px; padding: 10px; margin-bottom: 12px; }
  .deal-actions .dg { flex-wrap: nowrap; overflow-x: auto; padding: 0 !important; border: 0 !important; margin: 0 !important; scrollbar-width: none; }
  .deal-actions .dg::-webkit-scrollbar { display: none; }
  .deal-actions .dg:first-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .deal-actions .dg:first-child .btn { min-width: 0; padding-left: 6px; padding-right: 6px; justify-content: center; }
  .deal-actions .dg .btn { flex: none; white-space: nowrap; }
  .stagebar { margin-left: 0; }
  .kv .person-row, .side-card h3, .rs-hero { margin-left: 0; }
  .rs-hero { margin: 0 12px 10px; flex-wrap: wrap; } .rs-hero b { font-size: 21px; } .rs-stage { text-align: left; min-width: 0; width: 100%; }
  .side-card h3 { padding: 12px 14px 8px; } .kv, .rs-card .kv, .side-card .kv { padding-left: 14px; padding-right: 14px; }
  .kv .person-row { padding-left: 14px; padding-right: 14px; }
  .kv.people-list .person-row .v { justify-content: flex-start; }
  .kv div { flex-wrap: wrap; } .kv .v { text-align: right; max-width: 100%; }
  .wa-card .chat { margin-left: 12px; margin-right: 12px; max-height: 300px; } .wa-card .chat-in { padding: 0 12px; } .wa-pick { padding: 0 12px 8px; }
  .sp-f, .sp-prog { margin-left: 12px; margin-right: 12px; } .nc-chips, .nc-sub, .nc-now { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; } .nc-now { padding: 10px 12px; }
  .composer { margin-left: 0; margin-right: 0; }
}
@media (max-width: 760px) { .deal-actions .dg:not(:first-child) { flex-wrap: wrap; overflow: visible; } }

/* Telas de entrada, cadastro e recuperação de senha com a voz da Prospectamos */
.auth-card h1 { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; color: var(--primary-dark, #2a4c83); letter-spacing: -.01em; }
.auth-card .muted { line-height: 1.55; }

/* Base de conhecimento: botões das seções grandes, para convidar o time a usar */
.kb-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
.kb-tile { position: relative; display: flex; align-items: center; gap: 13px; text-align: left; padding: 16px 16px; min-height: 84px; border-radius: 20px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s, border-color .15s; }
.kb-tile:hover { transform: translateY(-3px); border-color: #3b8bff; box-shadow: 0 14px 30px rgba(56,93,152, .22); }
.kb-tile:active { transform: translateY(-1px) scale(.99); }
.kt-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(150deg, #3b8bff, #0a1f44); box-shadow: 0 6px 16px rgba(56,93,152, .3); }
.kb-tile:nth-child(5n+2) .kt-ic { background: linear-gradient(150deg, #4cc3ae, #2a8f7d); } .kb-tile:nth-child(5n+3) .kt-ic { background: linear-gradient(150deg, #f08a4b, #d9480f); } .kb-tile:nth-child(5n+4) .kt-ic { background: linear-gradient(150deg, #7fa4e0, #0a4fc4); } .kb-tile:nth-child(5n) .kt-ic { background: linear-gradient(150deg, #f2b84b, #d98e0c); }
.kt-tx { display: flex; flex-direction: column; min-width: 0; }
.kt-tx b { font: 600 15.5px/1.2 'Poppins', sans-serif; }
.kt-tx em { font-style: normal; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.kt-n { position: absolute; top: 10px; right: 12px; min-width: 24px; padding: 2px 8px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); font: 700 11.5px 'Poppins', sans-serif; text-align: center; }
.kb-tile.on { background: linear-gradient(135deg, #0a4fc4, #4b8f78); border-color: transparent; color: #fff; box-shadow: 0 16px 34px rgba(56,93,152, .38); }
.kb-tile.on .kt-ic { background: rgba(255, 255, 255, .22); box-shadow: none; } .kb-tile.on .kt-tx em { color: rgba(255, 255, 255, .9); } .kb-tile.on .kt-n { background: rgba(255, 255, 255, .25); color: #fff; }
.kb-tile:focus-visible { outline: 3px solid #3b8bff; outline-offset: 2px; }
@media (max-width: 1180px) { .kb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kb-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 0; } .kt-ic { width: 44px; height: 44px; border-radius: 14px; } .kt-tx b { font-size: 14.5px; } }

/* Base de conhecimento: capa mais compacta para os botões das seções aparecerem inteiros na primeira tela */
.kb-hero, .kb-hero.pb-cover { min-height: 0; margin-bottom: 14px; border-radius: 24px; }
.kb-hero .kb-hero-in, .kb-hero.pb-cover .kb-hero-in { max-width: 780px; padding: 22px 30px 24px; }
.kb-hero .kb-logo { margin-bottom: 12px; padding: 8px 14px; } .kb-hero .kb-logo img { height: 32px; }
.kb-hero h1, .kb-hero.pb-cover h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; margin: 6px 0 8px; }
.kb-hero p { margin: 0 0 14px; max-width: 66ch; font-size: 14.5px; line-height: 1.5; }
.kb-hero.pb-cover .pb-stats { margin-top: 12px; }
.kb-tiles { gap: 10px; margin: 0 0 18px; }
.kb-tile { min-height: 74px; padding: 12px 14px; border-radius: 18px; gap: 12px; border: 1px solid #e6e0f0; background: linear-gradient(180deg, #ffffff, #faf8fd); box-shadow: 0 2px 10px rgba(26,60,115, .07); }
.kb-tile::after { content: ''; position: absolute; right: 14px; bottom: 12px; width: 8px; height: 8px; border-right: 2px solid #9cb5dd; border-bottom: 2px solid #9cb5dd; transform: rotate(-45deg); opacity: 0; transition: opacity .15s, right .15s; }
.kb-tile:hover::after { opacity: 1; right: 11px; }
.kb-tile.on::after { border-color: #fff; opacity: .9; }
.kt-ic { width: 44px; height: 44px; border-radius: 14px; }
.kt-ic svg { width: 21px; height: 21px; }
.kt-tx b { font-size: 14.5px; text-wrap: balance; } .kt-tx em { font-size: 11.5px; margin-top: 2px; }
.kt-n { top: 8px; right: 10px; }
@media (max-width: 1180px) { .kb-hero .kb-hero-in { padding: 20px 22px 22px; } }
@media (max-width: 700px) { .kb-hero h1, .kb-hero.pb-cover h1 { font-size: clamp(28px, 8.4vw, 38px); } .kb-hero .kb-hero-in, .kb-hero.pb-cover .kb-hero-in { padding: 18px 18px 20px; } .kb-hero p { font-size: 13.5px; } .kb-tile { min-height: 0; } }

/* Base de conhecimento v3: capa e botões ocupam a primeira tela inteira; o conteúdo da seção aparece ao rolar */
.kb-first { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 60px - 20px - 14px); margin-bottom: 18px; }
.kb-first .kb-hero, .kb-first .kb-hero.pb-cover { flex: 1 1 auto; min-height: 250px; margin: 0; border-radius: 28px; box-shadow: 0 22px 54px rgba(26,60,115, .32); }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 820px; padding: 28px 38px 30px; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(40px, 5.8vw, 82px); line-height: 1.02; margin: 8px 0 12px; }
.kb-first .kb-hero p { font-size: 16px; max-width: 60ch; margin: 0 0 18px; }
.kb-first .kb-logo { margin-bottom: 16px; } .kb-first .kb-logo img { height: 38px; }
.kb-first .kb-tiles { margin: 0; gap: 12px; flex: none; }
.kb-first .kb-tile { --a: #0a1f44; --b: #3b8bff; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; min-height: clamp(108px, 15.5vh, 148px); padding: 16px 18px; border: 0; border-radius: 24px; color: #fff; text-align: left; background: linear-gradient(150deg, var(--b), var(--a)); box-shadow: 0 12px 26px color-mix(in srgb, var(--a) 42%, transparent); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s; }
.kb-first .kb-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 1.2px, transparent 1.7px); background-size: 11px 11px; -webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 62%); mask-image: radial-gradient(circle at 100% 0%, #000, transparent 62%); }
.kb-first .kb-tile::after { content: none; }
.kb-first .kb-tile:hover { transform: translateY(-5px) scale(1.012); border-color: transparent; box-shadow: 0 20px 38px color-mix(in srgb, var(--a) 55%, transparent); }
.kb-first .kb-tile:active { transform: translateY(-1px) scale(.99); }
.kb-first .kb-tile:nth-child(1) { --a: #0a1f44; --b: #3b8bff; }
.kb-first .kb-tile:nth-child(2) { --a: #1f7f6c; --b: #55c9b1; }
.kb-first .kb-tile:nth-child(3) { --a: #c2410c; --b: #f8a25a; }
.kb-first .kb-tile:nth-child(4) { --a: #0a4fc4; --b: #92b4ea; }
.kb-first .kb-tile:nth-child(5) { --a: #b4730a; --b: #f4c04e; }
.kb-first .kb-tile:nth-child(6) { --a: #2f7a5c; --b: #8fc9a8; }
.kb-first .kb-tile:nth-child(7) { --a: #b4301b; --b: #f58c73; }
.kb-first .kb-tile:nth-child(8) { --a: #2f4fa0; --b: #78a3e8; }
.kb-first .kb-tile:nth-child(9) { --a: #0e2a54; --b: #0063fe; }
.kb-first .kb-tile:nth-child(10) { --a: #2a7f5a; --b: #72b392; }
.kb-first .kt-ic { position: static; width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); backdrop-filter: blur(4px); color: #fff; }
.kb-first .kt-ic svg { width: 23px; height: 23px; }
.kb-first .kt-tx { position: relative; z-index: 1; }
.kb-first .kt-tx b { font: 600 17px/1.15 'Poppins', sans-serif; color: #fff; text-wrap: balance; }
.kb-first .kt-tx em { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .9); }
.kb-first .kt-num { position: absolute; top: 6px; right: 16px; font: italic 600 40px/1 'Playfair Display', Georgia, serif; color: rgba(255, 255, 255, .3); pointer-events: none; }
.kb-first .kt-go { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .24); color: #fff; transition: background .15s, color .15s, transform .15s; }
.kb-first .kb-tile:hover .kt-go { background: #fff; color: var(--a); transform: translateX(3px); }
.kb-first .kt-n { top: auto; bottom: 16px; right: 52px; background: rgba(255, 255, 255, .26); color: #fff; }
.kb-first .kb-tile.on { transform: translateY(-3px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--a), 0 22px 40px color-mix(in srgb, var(--a) 50%, transparent); background: linear-gradient(150deg, var(--b), var(--a)); }
.kb-first .kb-tile.on .kt-ic { background: #fff; color: var(--a); border-color: #fff; }
.kb-first .kb-tile.on .kt-go { background: #fff; color: var(--a); }
.kb-scroll { align-self: center; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--primary-dark); font: 600 12.5px 'Poppins', sans-serif; cursor: pointer; opacity: .85; }
.kb-scroll svg { animation: kbbounce 1.6s ease-in-out infinite; } .kb-scroll:hover { opacity: 1; background: var(--primary-soft); }
@keyframes kbbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .kb-scroll svg { animation: none; } .kb-first .kb-tile { transition: none; } }
@media (max-width: 1180px) { .kb-first .kb-tile { min-height: 112px; } }
@media (max-width: 700px) {
  .kb-first { min-height: calc(100dvh - 58px - 62px - 28px); gap: 10px; }
  .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { padding: 20px 18px 22px; }
  .kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(30px, 9.4vw, 44px); }
  .kb-first .kb-hero p { font-size: 13.5px; margin-bottom: 12px; }
  .kb-first .kb-tile { min-height: 96px; padding: 12px 14px; border-radius: 20px; gap: 8px; } .kb-first .kt-ic { width: 38px; height: 38px; border-radius: 12px; } .kb-first .kt-ic svg { width: 19px; height: 19px; }
  .kb-first .kt-tx b { font-size: 14.5px; } .kb-first .kt-tx em { font-size: 11.5px; } .kb-first .kt-num { font-size: 28px; top: 8px; right: 12px; } .kb-first .kt-go { width: 24px; height: 24px; right: 10px; bottom: 10px; }
}
.kb-first .kb-hero, .kb-first .kb-hero.pb-cover { flex: 1 1 0; min-height: 240px; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(32px, min(5.8vw, 8.6vh), 82px); margin: 6px 0 10px; }
.kb-first .kb-hero .kb-logo { margin-bottom: clamp(8px, 2vh, 16px); }
.kb-first .kb-hero p { font-size: clamp(13px, 1.9vh, 16px); margin-bottom: clamp(10px, 2vh, 18px); }
@media (max-height: 760px) { .kb-first .kb-tile { min-height: 96px; padding: 12px 16px; } .kb-first .kt-ic { width: 38px; height: 38px; } .kb-first .kt-ic svg { width: 19px; height: 19px; } .kb-first .kt-num { font-size: 32px; } }
.kb-first .kt-tx { padding-right: 40px; }
@media (max-width: 700px) { .kb-first .kt-tx { padding-right: 26px; } }

/* Todos os botões das seções em roxo (como o primeiro) e capa um pouco maior */
.kb-first .kb-tile, .kb-first .kb-tile:nth-child(n) { --a: #0a1f44; --b: #3b8bff; }
.kb-first .kb-tile { min-height: clamp(92px, 12.6vh, 122px); padding: 13px 18px; gap: 10px; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(34px, min(6.2vw, 9.4vh), 90px); }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 880px; }
@media (max-height: 760px) { .kb-first .kb-tile { min-height: 86px; } }
.kb-first .kb-tile:nth-child(n) .kt-ic { background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.kb-first .kb-tile.on:nth-child(n) .kt-ic { background: #fff; box-shadow: none; }

/* Base de conhecimento v4: capa e botões numa só composição (foto da marca ao fundo, botões em vidro roxo) */
.kb-first { position: relative; gap: 0; border-radius: 32px; overflow: hidden; isolation: isolate; box-shadow: 0 28px 64px rgba(18,48,96, .4);
  background: linear-gradient(90deg, rgba(9,26,53, .97) 0%, rgba(18,44,85, .86) 36%, rgba(18,44,85, .28) 72%, rgba(18,44,85, .04) 100%), url('mivo-base.webp') 70% 34% / cover no-repeat, #2a9d8f; }
.kb-first::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 14, 42, 0) 34%, rgba(24, 14, 42, .86) 100%); }
.kb-first::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .26; background-image: radial-gradient(circle, rgba(114, 179, 146, .9) 1.2px, transparent 1.7px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 58%); mask-image: linear-gradient(90deg, #000, transparent 58%); }
.kb-first > * { position: relative; z-index: 1; }
.kb-first .kb-hero, .kb-first .kb-hero.pb-cover { background: none !important; box-shadow: none; border-radius: 0; overflow: visible; }
.kb-first .kb-hero::before { display: none; }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { padding: 34px 46px 20px; }
.kb-first .kb-tiles { padding: 0 24px 10px; gap: 12px; }
.kb-first .kb-tile, .kb-first .kb-tile:nth-child(n) { min-height: clamp(86px, 11.6vh, 112px); padding: 14px 18px; gap: 6px; justify-content: center; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .26); color: #fff;
  background: linear-gradient(150deg, rgba(108,149,214, .5), rgba(33,67,123, .66)); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 8px 24px rgba(20, 10, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .28); }
.kb-first .kb-tile::before { content: none; }
.kb-first .kb-tile:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .6); background: linear-gradient(150deg, rgba(128,167,230, .66), rgba(44,84,148, .78)); box-shadow: 0 16px 34px rgba(20, 10, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
.kb-first .kb-tile .kt-ic, .kb-first .kb-tile:nth-child(n) .kt-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, #7fa4e0, #0a4fc4); border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 16px rgba(20, 10, 40, .35); }
.kb-first .kb-tile .kt-tx { padding-left: 60px; padding-right: 34px; }
.kb-first .kt-tx b { font-size: 16px; }
.kb-first .kt-tx em { color: rgba(255, 255, 255, .82); font-size: 12px; }
.kb-first .kt-num { top: 9px; right: 14px; font: 600 11px/1 'Poppins', sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.kb-first .kt-go { right: 12px; bottom: 12px; width: 26px; height: 26px; background: rgba(255, 255, 255, .2); }
.kb-first .kt-n { right: 46px; bottom: 14px; }
.kb-first .kb-tile.on, .kb-first .kb-tile.on:nth-child(n) { background: linear-gradient(150deg, #ffffff, #efe9fa); color: #0e2a54; border-color: #fff; box-shadow: 0 0 0 3px rgba(114, 179, 146, .9), 0 18px 38px rgba(20, 10, 40, .5); }
.kb-first .kb-tile.on .kt-tx b { color: #0e2a54; } .kb-first .kb-tile.on .kt-tx em { color: #486aa0; } .kb-first .kb-tile.on .kt-num { color: #a99fc4; }
.kb-first .kb-tile.on .kt-ic, .kb-first .kb-tile.on:nth-child(n) .kt-ic { background: linear-gradient(150deg, #0063fe, #0a1f44); color: #fff; border-color: transparent; }
.kb-first .kb-tile.on .kt-go { background: #0a4fc4; color: #fff; }
.kb-first .kb-tile.on .kt-n { background: #0a4fc4; color: #fff; }
.kb-first .kb-scroll { color: rgba(255, 255, 255, .88); margin: 2px 0 8px; } .kb-first .kb-scroll:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 1180px) { .kb-first .kb-hero .kb-hero-in { padding: 26px 28px 16px; } .kb-first .kb-tiles { padding: 0 16px 8px; } }
@media (max-width: 700px) {
  .kb-first { border-radius: 26px; }
  .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { padding: 22px 18px 14px; }
  .kb-first .kb-tiles { padding: 0 10px 8px; gap: 10px; }
  .kb-first .kb-tile, .kb-first .kb-tile:nth-child(n) { min-height: 104px; padding: 12px 12px 12px; justify-content: flex-end; border-radius: 20px; }
  .kb-first .kb-tile .kt-ic, .kb-first .kb-tile:nth-child(n) .kt-ic { position: static; transform: none; width: 38px; height: 38px; }
  .kb-first .kb-tile .kt-tx { padding-left: 0; padding-right: 22px; }
}

/* Base de conhecimento v5: a foto da marca fica no canto superior direito, sem ser tampada pelos botões */
.kb-first { background: radial-gradient(circle at 86% 16%, rgba(42, 157, 143, .5), transparent 50%), radial-gradient(circle at 8% 100%, rgba(0,99,254, .35), transparent 45%), linear-gradient(135deg, #0a1e3e 0%, #1a335a 56%, #2c4a5c 100%); }
.kb-first::before { background: linear-gradient(180deg, rgba(24, 14, 42, 0) 55%, rgba(24, 14, 42, .5) 100%); }
.kb-first::after { opacity: .2; -webkit-mask-image: linear-gradient(90deg, #000, transparent 50%); mask-image: linear-gradient(90deg, #000, transparent 50%); }
.kb-first .kb-hero::before { content: ''; display: block; position: absolute; z-index: 0; top: 20px; right: 26px; height: calc(100% - 28px); aspect-ratio: 1040 / 807; max-width: 50%; border-radius: 28px; background: url('mivo-base.webp') center / cover no-repeat; box-shadow: 0 20px 48px rgba(8, 4, 22, .55), 0 0 0 1px rgba(255, 255, 255, .12); -webkit-mask-image: none; mask-image: none; opacity: 1; }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 52%; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(32px, min(4.9vw, 8vh), 76px); }
.kb-first .kb-hero p { max-width: 46ch; }
@media (max-width: 1180px) { .kb-first .kb-hero::before { top: 16px; right: 16px; max-width: 46%; } .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 56%; } }
@media (max-width: 760px) {
  .kb-first .kb-hero::before { right: -40px; top: 12px; max-width: 80%; opacity: .38; height: calc(100% - 16px); }
  .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 100%; }
}
.kb-first .kb-hero::before { left: auto; bottom: auto; width: auto; }
@media (max-width: 760px) { .kb-first .kb-hero::before { left: auto; } }

/* Base de conhecimento v6: foto de volta ao fundo (mesclada com o roxo), capa e botões no mesmo tom e alinhados */
.kb-first { background:
    linear-gradient(90deg, #04152f 0%, rgba(14,39,79, .9) 28%, rgba(14,39,79, 0) 64%),
    linear-gradient(180deg, rgba(14,39,79, 0) 46%, rgba(14,39,79, .9) 84%, #04152f 100%),
    radial-gradient(circle at 82% 22%, rgba(42, 157, 143, .28), transparent 52%),
    url('mivo-base.webp') right 1% top 0 / auto 80% no-repeat,
    #04152f; }
.kb-first::before { content: none; }
.kb-first .kb-hero::before { display: none; }
.kb-first::after { opacity: .16; -webkit-mask-image: linear-gradient(90deg, #000, transparent 46%); mask-image: linear-gradient(90deg, #000, transparent 46%); }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 58%; padding: 32px 32px 18px; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(34px, min(5.3vw, 8.6vh), 80px); text-shadow: 0 4px 26px rgba(14, 7, 30, .55); }
.kb-first .kb-hero p { max-width: 52ch; text-shadow: 0 2px 14px rgba(14, 7, 30, .5); }
.kb-first .kb-tiles { padding: 0 32px 8px; gap: 12px; }
.kb-first .kb-tile, .kb-first .kb-tile:nth-child(n) { background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 28px rgba(12, 6, 28, .35), inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.kb-first .kb-tile:hover { background: linear-gradient(155deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); border-color: rgba(255, 255, 255, .5); box-shadow: 0 16px 34px rgba(12, 6, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
.kb-first .kb-tile .kt-ic, .kb-first .kb-tile:nth-child(n) .kt-ic { background: linear-gradient(150deg, #719ce2, #0a4fc4); border: 1px solid rgba(255, 255, 255, .45); }
.kb-first .kb-scroll { margin: 0 0 8px; }
@media (max-width: 1180px) { .kb-first .kb-hero .kb-hero-in { max-width: 64%; padding: 24px 24px 14px; } .kb-first .kb-tiles { padding: 0 20px 8px; } .kb-first { background-size: auto, auto, auto, auto 70%, auto; } }
@media (max-width: 760px) {
  .kb-first { background:
      linear-gradient(180deg, rgba(14,39,79, .78) 0%, rgba(14,39,79, .55) 38%, rgba(14,39,79, .92) 70%, #04152f 100%),
      url('mivo-base.webp') right -60px top 0 / auto 52% no-repeat, #04152f; }
  .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 100%; padding: 20px 18px 12px; }
  .kb-first .kb-tiles { padding: 0 12px 8px; }
}
.kb-first { background: radial-gradient(circle at 82% 22%, rgba(42, 157, 143, .28), transparent 52%), radial-gradient(circle at 6% 100%, rgba(0,99,254, .3), transparent 46%), #04152f; }
.kb-first::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('mivo-base.webp') right 1% top 0 / auto 82% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 64%), linear-gradient(180deg, #000 52%, transparent 90%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, #000 64%), linear-gradient(180deg, #000 52%, transparent 90%); mask-composite: intersect; }
@media (max-width: 1180px) { .kb-first { background: radial-gradient(circle at 82% 22%, rgba(42, 157, 143, .28), transparent 52%), #04152f; } .kb-first::before { background-size: auto 72%; } }
@media (max-width: 760px) { .kb-first { background: #04152f; } .kb-first::before { background-position: right -60px top 0; background-size: auto 52%; opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 78%); mask-image: linear-gradient(180deg, #000 30%, transparent 78%); } }

/* Base de conhecimento v7: foto das meninas recortada (sem moldura branca), com todas as bordas dissolvendo no roxo, longe do título */
.kb-first { background: radial-gradient(circle at 80% 24%, rgba(42, 157, 143, .3), transparent 50%), radial-gradient(circle at 6% 100%, rgba(0,99,254, .3), transparent 46%), #04152f; }
.kb-first::before { content: ''; position: absolute; z-index: 0; pointer-events: none; inset: auto; top: 16px; right: 0; bottom: auto; left: auto; width: min(60%, 800px); aspect-ratio: 796 / 520; opacity: .95;
  background: #9cbcef url('kb-meninas.jpg') center / cover no-repeat; background-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 56%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 56%, transparent 100%); mask-composite: intersect; }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 52%; }
.kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(32px, min(4.7vw, 8vh), 72px); }
@media (max-width: 1180px) { .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 58%; } .kb-first::before { width: 56%; } }
@media (max-width: 760px) { .kb-first::before { width: 92%; right: -22%; top: 8px; opacity: .5; background-size: cover; } .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 100%; } }

/* v8: menos sombra na esquerda da foto: a menina morena aparece mais antes da transição roxa */
.kb-first::before { width: min(58%, 780px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, #000 24%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, #000 24%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 58%, transparent 100%); }
.kb-first .kb-hero p { max-width: 44ch; }
.kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 50%; }
@media (max-width: 1180px) { .kb-first::before { width: 54%; } .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 56%; } }
@media (max-width: 760px) { .kb-first::before { width: 92%; } .kb-first .kb-hero .kb-hero-in, .kb-first .kb-hero.pb-cover .kb-hero-in { max-width: 100%; } }

/* Nomes de menu por extenso: "Base de conhecimento" e os demais quebram em duas linhas em vez de serem cortados */
.sec-items .nav-item { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.25; overflow: visible; }
.sec-items .nav-item span { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 760px) { .tab span { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.05; font-size: 10.5px; } .tab { height: 60px; } }
/* a capa nunca é menor que o seu conteúdo (em telas baixas a página cresce um pouco em vez de os botões cobrirem o texto) */
.kb-first .kb-hero, .kb-first .kb-hero.pb-cover { flex: 1 0 auto; }
@media (max-height: 860px) { .kb-first .kb-hero h1, .kb-first .kb-hero.pb-cover h1 { font-size: clamp(30px, min(4.3vw, 7.2vh), 64px); } .kb-first .kb-hero p { font-size: 13.5px; margin-bottom: 10px; } .kb-first .kb-hero .kb-logo { margin-bottom: 8px; } .kb-first .kb-hero .kb-hero-in { padding-top: 22px; padding-bottom: 12px; } }

/* ===== Celular: acabamento geral do ERP (toques fáceis, textos legíveis, nada vazando para o lado) ===== */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea, .input, .input.sm { font-size: 16px; }
  .check { position: relative; } .check::after { content: ''; position: absolute; inset: -8px; }
}
@media (max-width: 760px) {
  /* o iPhone dá zoom automático em campo com letra menor que 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea, .input, .input.sm { font-size: 16px; }
  /* áreas de toque de pelo menos 40px sem mudar o desenho */
  .check { position: relative; } .check::after { content: ''; position: absolute; inset: -8px; }
  .card-pb { width: 34px; height: 34px; }
  .kb-scroll { min-height: 40px; }
  .hh-pill { min-height: 34px; display: inline-flex; align-items: center; }
  .wk-gtog { min-width: 30px; min-height: 30px; }
  .ed-n { min-width: 30px; min-height: 30px; }
  .btn.sm, .icon-btn { min-height: 36px; }
  /* textos pequenos demais */
  #view small { font-size: max(11.5px, .84em); } #view code { font-size: 11.5px; }
  /* tabelas largas rolam dentro delas e a página não balança */
  table.tbl.keep { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .table-wrap table.tbl.keep { display: table; }
  #view { overflow-x: hidden; }
  /* faixa de configuração da Nutrição e linhas parecidas quebram em vez de vazar */
  .pill-row:has(.fin-idx) { flex-wrap: wrap; } .fin-idx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; white-space: normal; max-width: 100%; }
  /* calendário: dias legíveis, rolando para o lado em vez de espremer */
  section.panel:has(.wk-calgrid) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wk-calgrid { min-width: 600px; } .wk-day { min-height: 84px; } .wk-evt { font-size: 11px; min-height: 22px; padding: 2px 5px; }
  /* cronograma */
  .wk-gwrap { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px) {
  .wk-back { min-height: 36px; display: inline-flex; align-items: center; }
  .pr-pill { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .pr-tag, .wk-appr { font-size: 11px; }
  .wk-mv { min-height: 36px; }
}

/* ===== Marcar pessoas com @ nos comentários e notas ===== */
.men-box { position: fixed; z-index: 400; width: min(268px, calc(100vw - 16px)); max-height: 230px; overflow: auto; background: var(--card, #fff); border: 1px solid var(--line, #e6e0ef); border-radius: 14px; box-shadow: 0 10px 30px rgba(26,60,115, .22); padding: 6px; }
.men-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font: inherit; cursor: pointer; color: inherit; min-height: 44px; }
.men-it:hover, .men-it.on { background: rgba(0,99,254, .14); }
.men-it b { display: block; font-weight: 600; font-size: 14px; }
.men-it small { display: block; color: var(--muted, #8a8397); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.men-chip { display: inline-block; padding: 0 7px; border-radius: 999px; background: rgba(0,99,254, .16); color: #0a4fc4; font-weight: 600; }
.wk-inline [data-action=men-at] { flex: 0 0 auto; min-width: 38px; font-weight: 700; }

/* ===== Nova solicitação de aprovação: peças com as artes no próprio formulário ===== */
.capf-p { display: grid; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line, #e6e0ef); border-radius: 14px; background: rgba(0,99,254, .05); }
.capf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.capf-p .capm-grid { margin: 0; }

/* ===== Revisão interna do pedido de aprovação ===== */
.rv-wrap { cursor: crosshair; touch-action: manipulation; }
.rv-wrap img { cursor: crosshair; }
.rv-pins { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rv-pins li { display: flex; align-items: center; gap: 8px; }
.rv-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--red, #d32c2c); color: #fff; font: 600 12px/24px 'Poppins', sans-serif; text-align: center; }
.rv-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.cap-it .vid { display: block; width: 100%; max-height: 60vh; border-radius: 12px; background: #000; margin: 8px 0; }
.cap-it textarea { margin-top: 6px; }

/* ===== Lead no celular: ordem das seções e topo quando está ganho, perdido ou suspenso ===== */
.deal-head > div { min-width: 0; }
.deal-meta .chip { max-width: 100%; white-space: normal; line-height: 1.3; }
@media (max-width: 900px) {
  /* ordem no celular: Tarefas, Nota, Resumo, Conversa, Qualificação, Pessoas, Organização e Histórico */
  .deal-grid .dg-foco { order: 1; } .deal-grid .composer { order: 2; }
  .deal-grid .rs-card { order: 3; } .deal-grid .meet-card { order: 3; }
  .deal-grid .wa-card { order: 4; }
  .deal-grid .niche-card { order: 5; } .deal-grid .spin-card { order: 5; }
  .deal-grid .dg-pessoas { order: 6; } .deal-grid .dg-org { order: 7; } .deal-grid .dg-hist { order: 8; }
}
@media (max-width: 760px) {
  /* ganho, perdido ou suspenso: chips e botões quebram de linha e o texto fica dentro do balão */
  .deal-actions .dg.closed { display: flex; flex-wrap: wrap; align-items: stretch; overflow: visible; gap: 8px; }
  .deal-actions .dg.closed .btn { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.25; height: auto; min-height: 42px; padding: 8px 12px; }
  .deal-actions .dg.closed .chip { flex: 1 1 100%; max-width: 100%; white-space: normal; line-height: 1.3; }
  .deal-actions .dg .btn.primary, .deal-actions .dg a.btn { white-space: normal; }
}
@media (min-width: 761px) {
  .deal-actions .dg.closed .chip { white-space: nowrap; }
}

/* ===== Cartão da tarefa (Produção) no celular: mesma ordem do lead e nada fora do balão ===== */
@media (max-width: 760px) {
  .wk-dh { flex-wrap: nowrap; gap: 6px; padding: 10px 14px; }
  .wk-dpath { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wk-dbody { display: flex; flex-direction: column; padding-left: 14px; padding-right: 14px; }
  .wk-dbody > * { min-width: 0; }
  .wk-dbody > .wk-dtitle { order: 0; }
  /* ordem: Tarefa (checklist), Nota (comentários), Resumo (dados), Responsáveis, Descrição, Aprovação, Links, Anexos, Horas */
  .wk-dbody > .ds-check { order: 1; } .wk-dbody > .ds-comm { order: 2; } .wk-dbody > .wk-dmeta { order: 3; } .wk-dbody > .ds-resp { order: 4; }
  .wk-dbody > .ds-desc { order: 5; } .wk-dbody > .wk-approval { order: 6; } .wk-dbody > .ds-links { order: 7; } .wk-dbody > .ds-att { order: 8; } .wk-dbody > .ds-horas { order: 9; }
  .wk-dsec .btn, .wk-approval .btn, .wk-actions .btn { white-space: normal; text-align: center; line-height: 1.25; height: auto; min-height: 40px; max-width: 100%; }
  .wk-approval p, .wk-approval .wk-note, .wk-cmt p { overflow-wrap: anywhere; }
  .wk-dmeta label, .wk-dmeta select, .wk-dmeta input { min-width: 0; max-width: 100%; }
}

/* ===== Escolha do som da comemoração ===== */
.snd-opt { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1.5px solid var(--line, #e6e0ef); border-radius: 14px; cursor: pointer; }
.snd-opt:has(input:checked) { border-color: var(--primary, #0063fe); background: rgba(0,99,254, .08); }
.snd-opt > span { flex: 1; min-width: 0; } .snd-opt b { display: block; } .snd-opt small { display: block; color: var(--muted, #8a8397); font-size: 12.5px; }
.snd-opt .btn { flex: 0 0 auto; }

/* ===== Cartão da tarefa: aprovação do cliente (envio dentro do cartão) ===== */
@media (max-width: 760px) { .wk-dbody > .ds-capp { order: 6; } }
.ds-capp .wk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ===== Som no celular: botão de tocar na comemoração e teste do som ===== */
.cele-snd { margin-top: 14px; padding: 13px 20px; min-height: 46px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #0063fe, #3b8bff); color: #fff; font: 600 15px 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(26,60,115, .25); }
.snd-diag-box { margin-top: 10px; }
.snd-diag { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2, #f4f1f8); border-radius: 10px; padding: 10px; margin: 8px 0 0; }
.snd-diag:empty { display: none; }

/* ===== Playbook: preços em destaque e aba "Comece aqui" ===== */
.pb-price { margin: 18px 0; padding: 18px 18px 20px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(114, 179, 146, .35), transparent 40%), linear-gradient(135deg, #0a4fc4, #192f53); box-shadow: 0 12px 28px rgba(26,60,115, .25); }
.pb-price-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pb-price-h > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .16); }
.pb-price-h > div { flex: 1; min-width: 200px; } .pb-price-h b { display: block; font-size: 18px; } .pb-price-h small { opacity: .85; font-size: 12.5px; }
.pb-price-h .pb-link { color: #fff; text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.pb-price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pb-pc { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .18); display: flex; flex-direction: column; gap: 4px; }
.pb-pc.hl { background: rgba(255, 255, 255, .95); color: #192f53; border-color: #a9cbff; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.pb-pc small { font-size: 11.5px; opacity: .8; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .pb-pc h4 { margin: 0; font-size: 17px; }
.pb-pc-v { display: flex; align-items: baseline; gap: 6px; } .pb-pc-v b { font-size: 28px; line-height: 1.1; } .pb-pc-v span { font-size: 13px; opacity: .85; }
.pb-pc p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; opacity: .9; } .pb-pc em { font-style: normal; font-size: 12px; font-weight: 600; opacity: .85; margin-top: 4px; }
.pb-route { display: grid; gap: 14px; margin: 8px 0 16px; }
.pb-rs { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.pb-rs-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #0063fe, #3b8bff); color: #fff; font-weight: 700; margin-top: 2px; }
.pb-rs-b h4 { margin: 4px 0 8px; font-size: 15.5px; }
.pb-objs { display: grid; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) { .pb-rs { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; } .pb-rs-n { width: 28px; height: 28px; font-size: 13px; } .pb-price { padding: 14px; } .pb-pc-v b { font-size: 24px; } }

/* v9: capa do playbook com a foto mais clara (o roxo continua dissolvendo as bordas) */
.kb-first::before { opacity: 1; background-color: #f3ecff; filter: brightness(1.28) saturate(1.04); }
@media (max-width: 760px) { .kb-first::before { opacity: .72; } }

/* Equipe: ações dos convites pendentes; botão de trocar responsável */
.inv-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.owner-chg { margin-left: 8px; vertical-align: middle; }

/* v10: a foto se funde ao roxo: as bordas ganham o tom roxo da capa (multiplicado) e somem em degradê suave, sem recorte retangular nem faixa cinza */
.kb-first::before { opacity: 1; filter: brightness(1.28) saturate(1.18);
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image:
    linear-gradient(#ebe2ff, #ebe2ff),
    linear-gradient(90deg, #0050d0 0%, #4782e1 7%, #91bafd 16%, #efe8ff 28%, #fff 38%),
    linear-gradient(270deg, #0050d0 0%, #4782e1 6%, #91bafd 13%, #efe8ff 22%, #fff 30%),
    linear-gradient(180deg, #0050d0 0%, #6ea1f4 9%, #d1e3ff 20%, #fff 32%),
    linear-gradient(0deg, #0050d0 0%, #4782e1 8%, #91bafd 20%, #efe8ff 36%, #fff 50%),
    url('kb-meninas.jpg');
  background-blend-mode: multiply, multiply, multiply, multiply, multiply, normal;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.68) 15%, rgba(0,0,0,.93) 21%, #000 28%, #000 80%, rgba(0,0,0,.78) 88%, rgba(0,0,0,.4) 94%, rgba(0,0,0,.1) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.65) 12%, rgba(0,0,0,.95) 20%, #000 28%, #000 56%, rgba(0,0,0,.75) 70%, rgba(0,0,0,.35) 84%, rgba(0,0,0,.08) 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.68) 15%, rgba(0,0,0,.93) 21%, #000 28%, #000 80%, rgba(0,0,0,.78) 88%, rgba(0,0,0,.4) 94%, rgba(0,0,0,.1) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.65) 12%, rgba(0,0,0,.95) 20%, #000 28%, #000 56%, rgba(0,0,0,.75) 70%, rgba(0,0,0,.35) 84%, rgba(0,0,0,.08) 95%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 760px) { .kb-first::before { opacity: .78; } }

/* Resumo do negócio: grade organizada (rótulo em cima, valor embaixo, duas colunas) */
.rs-card .kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; padding: 6px 16px 16px; }
.rs-card .kv > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; padding: 0; border-top: 0; min-width: 0; }
.rs-card .kv > .kv-wide { grid-column: 1 / -1; }
.rs-card .kv > .kv-wide + .kv-wide { padding-top: 12px; border-top: 1px solid #f0f1f2; }
.rs-card .kv > div > .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: normal; }
.rs-card .kv > div > .v { text-align: left; font-weight: 500; font-size: 14px; width: 100%; word-break: break-word; }
.rs-card .kv .prod-list, .rs-card .kv .temp-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.rs-card .kv .owner-v { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 8px; }
.rs-card .kv .owner-chg { margin-left: 0; }
@media (max-width: 760px) { .rs-card .kv { gap: 12px 14px; padding: 4px 14px 14px; } }
.wa-card .em-empty { padding: 0 16px 10px; margin: 0; font-size: 13px; }

/* Cancelamentos de clientes (Produção) */
.cn-kv { padding: 0 0 8px; }
.cn-detail { margin: 4px 0 12px; padding: 10px 12px; background: #f6f3fb; border-left: 3px solid #0063fe; border-radius: 8px; font-size: 13.5px; white-space: pre-wrap; }
.cn-list { margin-top: 6px; }
.cn-lh { display: grid; grid-template-columns: 1fr auto minmax(70px, 120px); align-items: center; gap: 10px; margin: 6px 0 8px; }
.cn-it { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid #f0f1f2; }
.cn-it.done > span { color: var(--muted); text-decoration: line-through; }
.cn-rank > div { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr 28px; align-items: center; gap: 10px; padding: 6px 0; }
.cn-rank b { text-align: right; }
.tbl .wk-bar { display: inline-block; width: 70px; vertical-align: middle; margin-left: 6px; }
@media (max-width: 760px) {
  .cn-lh { grid-template-columns: 1fr auto; } .cn-lh .wk-bar { grid-column: 1 / -1; }
  .cn-rank > div { grid-template-columns: 1fr 28px; } .cn-rank .wk-bar { grid-column: 1 / -1; order: 3; }
}

/* Calendário no celular: a grade cabe na tela (os prazos viram pontos coloridos) e a lista do mês fica logo abaixo */
.wk-agenda { display: none; }
@media (max-width: 760px) {
  section.panel:has(.wk-calgrid) { overflow-x: visible; }
  .wk-calgrid { min-width: 0; gap: 3px; }
  .wk-day { min-height: 52px; padding: 4px 3px; gap: 3px; align-items: stretch; }
  .wk-day .wk-dn { font-size: 12px; text-align: center; }
  .wk-evt { font-size: 0; min-height: 0; height: 6px; padding: 0; border-left: 0; border-radius: 4px; background: var(--c); pointer-events: none; }
  .wk-evt.done { opacity: .35; }
  .wk-more { font-size: 10px; text-align: center; color: var(--muted); }
  .wk-dow span { font-size: 10.5px; }
  .wk-agenda { display: block; margin-top: 14px; border-top: 1px solid #f0f1f2; padding-top: 10px; }
  .wk-agenda h3 { margin: 0 0 6px; font-size: 14px; }
  .wk-ag { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; margin-bottom: 6px; text-align: left; border: 0; border-left: 4px solid var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 10%, #fff); font: 500 14px var(--font-sans); color: inherit; }
  .wk-ag .ag-d { flex: none; min-width: 48px; font-weight: 700; color: var(--muted); font-size: 12.5px; }
  .wk-ag .ag-t.done { text-decoration: line-through; color: var(--muted); }
}
.cn-c { display: inline-block; }
@media (max-width: 760px) { .cn-c { display: block; text-align: right; } .cn-c .wk-bar { display: block; width: 90px; margin: 4px 0 0 auto; } }

/* Acesso por setor (Equipe): sem acesso · só ver · ver e editar */
.sec-lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin-top: 6px; }
.sec-lv { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 0; }
.sec-lv > span { font-weight: 600; color: var(--muted); }
.sec-lv select { width: 100%; }
.sector-edit.sec-lv-grid { margin-top: 0; min-width: 330px; }
.invite-form .sector-pick { grid-column: 1 / -1; }
@media (max-width: 760px) { .sec-lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sector-edit.sec-lv-grid { min-width: 0; } }

/* Setor só de visualização: aviso no topo e os botões que alteram dados somem */
#ro-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 14px; border-radius: 10px; background: #fff6df; color: #7a5a00; font-size: 13px; line-height: 1.35; }
#ro-banner[hidden] { display: none; }
body.ro-mode .page-head .btn.primary, body.ro-mode [data-action^="new-"], body.ro-mode [data-action^="edit-"], body.ro-mode [data-action^="delete-"], body.ro-mode [data-action^="add-"], body.ro-mode [data-action^="del-"],
body.ro-mode [data-action^="mk-new"], body.ro-mode [data-action^="mk-edit"], body.ro-mode [data-action^="wk-del"], body.ro-mode [data-action^="cancel-client"], body.ro-mode .composer, body.ro-mode .wk-quick,
body.ro-mode .meet-cta .btn, body.ro-mode .stagebar-edit { display: none !important; }
body.ro-mode .check, body.ro-mode .wk-card, body.ro-mode .card[data-deal] { cursor: default; }
body.ro-mode .check { opacity: .5; }
body.ro-mode button[aria-label="Adicionar"] { display: none !important; }
.ro-off { display: none !important; }
.page.narrow:has(.sector-edit) { max-width: 1240px; }
.sector-edit.sec-lv-grid { grid-template-columns: repeat(2, minmax(118px, 1fr)); gap: 6px 10px; min-width: 260px; }
.sector-edit .sec-lv select { padding: 4px 8px; }
@media (max-width: 760px) { .sector-edit.sec-lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sector-edit.sec-lv-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 5px 8px; min-width: 215px; }
.sector-edit .sec-lv { font-size: 11.5px; } .sector-edit .sec-lv select { font-size: 12.5px; }

/* Rodapé dos modais: quando há muitos botões (ex.: cadastro de cliente) eles quebram em mais de uma linha em vez de sair da janela */
.modal-foot { flex-wrap: wrap; row-gap: 8px; }
.modal-foot .btn { white-space: nowrap; }
.modal-foot .spacer { flex: 1 1 8px; min-width: 0; }

/* Base de conhecimento: em telas médias os 5 cartões ficam estreitos; o ícone vai para cima do texto (como no celular), sem o texto esbarrar na seta */
@media (min-width: 701px) and (max-width: 1700px) {
  .kb-first .kb-tile, .kb-first .kb-tile:nth-child(n) { justify-content: flex-end; padding: 12px 14px; gap: 10px; min-height: clamp(116px, 17vh, 150px); }
  .kb-first .kb-tile .kt-ic, .kb-first .kb-tile:nth-child(n) .kt-ic { position: static; transform: none; width: 40px; height: 40px; }
  .kb-first .kb-tile .kt-tx { padding-left: 0; padding-right: 26px; }
}

/* Tabelas soltas dentro de painéis e janelas: se não couberem na largura, rolam de lado em vez de vazar para fora do cartão */
.panel > table.tbl, .modal-body table.tbl { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }