.hunter-relatorio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
}
#hunterAnalises textarea { width: 100%; min-height: 16rem; }
#hunterAnalises details, #adminHunter details { margin-block: 1rem; }

:root {
  color-scheme: light;
  --bg: #f1efe9;
  --surface: #fbfaf6;
  --surface-strong: #f6f3ed;
  --surface-muted: #e9e6df;
  --ink: #142231;
  --ink-soft: #54616e;
  --ink-faint: #74808b;
  --line: #d9d6cf;
  --line-strong: #c4c0b7;
  --navy: #0d1b2a;
  --navy-soft: #172b40;
  --teal: #0a7e6e;
  --teal-strong: #086858;
  --teal-wash: #dceee9;
  --coral: #bd4a32;
  --coral-wash: #f3e2dc;
  --warning: #8b641b;
  --warning-wash: #f4ead2;
  --danger: #a63f36;
  --danger-wash: #f4dfdc;
  --shadow: 0 16px 40px rgba(13, 27, 42, 0.08);
  --radius: 14px;
  --radius-small: 9px;
  --rail-width: 232px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101820;
    --surface: #16222d;
    --surface-strong: #1b2a36;
    --surface-muted: #22333f;
    --ink: #eef1ee;
    --ink-soft: #b9c2c7;
    --ink-faint: #8f9ca5;
    --line: #31424e;
    --line-strong: #425460;
    --navy: #09131d;
    --navy-soft: #142638;
    --teal: #36b3a0;
    --teal-strong: #56c5b3;
    --teal-wash: #173d39;
    --coral: #e3785e;
    --coral-wash: #472a27;
    --warning: #e0b862;
    --warning-wash: #41371f;
    --danger: #ef8c81;
    --danger-wash: #472825;
    --shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.rail {
  position: relative;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  padding: 28px 20px 20px;
  overflow: hidden;
  background: var(--navy);
  color: #f5f5ef;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup img {
  display: block;
  padding: 4px;
  border-radius: 12px;
  background: #f5f4ef;
}

.brand-lockup strong {
  display: block;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -1px;
}

.brand-lockup strong span {
  color: #45b8a6;
}

.brand-lockup small {
  display: block;
  margin-top: 5px;
  color: #91a6ba;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-label {
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}



.desktop-nav {
  display: grid;
  gap: 6px;
}

.nav-button {
  display: grid;
  width: 100%;
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: transparent;
  color: #d7dee4;
  text-align: left;
}

.nav-button span {
  font-weight: 700;
}

.nav-button small {
  color: #879bad;
  font-size: 12px;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.nav-button.is-active {
  border-color: rgba(105, 200, 185, 0.36);
  background: rgba(10, 126, 110, 0.2);
  color: #f5f5ef;
}

.nav-button.is-active small {
  color: #8fd5c9;
}

.rail-footer {
  margin-top: auto;
  padding: 16px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.status-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
}

.status-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #69c8b9;
}

.rail-footer p {
  margin: 9px 0 0;
  color: #8fa0af;
  font-size: 12px;
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: 100dvh;
  background: var(--bg);
}

.topbar {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(20px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.mobile-brand {
  display: none;
}

.topbar-title {
  min-width: 0;
}

.topbar-title span {
  display: block;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.topbar-title h1 {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.mode-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--teal) 36%, var(--line));
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal-strong);
  font-size: 12px;
  font-weight: 600;
}

.text-button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.text-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink);
}

.view {
  min-height: 0;
  overflow: auto;
  padding: clamp(20px, 3vw, 42px);
}

.view.is-active {
  display: block;
}

.chat-layout {
  display: grid;
  width: min(1180px, 100%);
  min-height: 100%;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 24px;
}

.chat-panel,
.form-column,
.result-column,
.library-layout {
  min-width: 0;
}

.chat-intro {
  padding: 4px 4px 26px;
  border-bottom: 1px solid var(--line);
}

.chat-intro h2,
.section-heading h2,
.context-panel h2,
.empty-state h2,
.access-card h1 {
  margin: 7px 0 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 730;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.chat-intro > p,
.section-heading > p,
.empty-state p,
.access-card > p {
  max-width: 660px;
  margin: 11px 0 0;
  color: var(--ink-soft);
}

.starter-grid {
  display: grid;
  margin-top: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.starter-grid button {
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.starter-grid button:hover {
  border-color: var(--teal);
  background: var(--teal-wash);
}

.message-list {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  gap: 14px;
  padding: 26px 4px;
}

.message {
  width: fit-content;
  max-width: min(720px, 88%);
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

.message span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message p {
  margin: 0;
  white-space: pre-wrap;
}

.user-message {
  align-self: flex-end;
  background: var(--teal);
  color: #f7f8f4;
  box-shadow: none;
}

.user-message span {
  color: #ccebe5;
}

.message.is-loading {
  color: var(--ink-soft);
}

.message-notice {
  margin-top: 9px !important;
  color: var(--warning);
  font-size: 12px;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.composer textarea {
  min-height: 52px;
  max-height: 160px;
  padding: 10px 8px;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--ink);
}

.composer-note {
  margin: 9px 4px 0;
  color: var(--ink-faint);
  font-size: 12px;
}

.primary-button {
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--teal);
  border-radius: var(--radius-small);
  background: var(--teal);
  color: #f7f8f4;
  font-weight: 600;
}

.primary-button:hover {
  border-color: var(--teal-strong);
  background: var(--teal-strong);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.context-panel {
  align-self: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.context-panel h2 {
  font-size: 22px;
}

.plain-list {
  display: grid;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: questions;
  list-style: none;
  gap: 14px;
}

.plain-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  color: var(--ink-soft);
  counter-increment: questions;
  gap: 8px;
}

.plain-list li::before {
  content: counter(questions);
  color: var(--teal);
  font-weight: 800;
}

.notice-panel {
  margin-top: 24px;
  padding: 15px;
  border-radius: var(--radius-small);
  background: var(--warning-wash);
}

.notice-panel strong {
  color: var(--warning);
  font-size: 13px;
}

.notice-panel p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.split-workspace {
  display: grid;
  width: min(1180px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.96fr);
  gap: clamp(24px, 4vw, 52px);
}

.section-heading {
  margin-bottom: 26px;
}

.section-heading h2 {
  max-width: 680px;
}

.data-form {
  display: grid;
  gap: 18px;
}

.data-form > .primary-button {
  justify-self: start;
  min-width: 170px;
  margin-top: 4px;
}

.field-grid {
  display: grid;
  gap: 14px;
}

.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: grid;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
}

input,
select {
  min-height: 46px;
  padding: 9px 11px;
}

textarea {
  padding: 11px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
  opacity: 0.88;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 35%, transparent);
  outline-offset: 2px;
}

.offer-preview {
  padding: 14px 16px;
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--teal-wash);
}

.offer-preview strong {
  display: block;
  color: var(--teal-strong);
}

.offer-preview p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.result-column {
  align-self: start;
  min-height: 440px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-state {
  display: flex;
  min-height: 370px;
  flex-direction: column;
  justify-content: center;
}

.empty-state > span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empty-state h2 {
  max-width: 430px;
  font-size: 28px;
}

.result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.result-header h2 {
  margin: 5px 0 0;
  font-size: 25px;
  letter-spacing: -0.025em;
}

.result-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal-strong);
  font-size: 11px;
  font-weight: 800;
}

.result-status.warning {
  background: var(--warning-wash);
  color: var(--warning);
}

.result-block {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.result-block:last-child {
  border-bottom: 0;
}

.result-block h3 {
  margin: 0 0 9px;
  font-size: 14px;
}

.result-block p,
.result-block pre {
  margin: 0;
  color: var(--ink-soft);
}

.result-block pre {
  overflow: auto;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.result-list {
  display: grid;
  margin: 0;
  padding-left: 19px;
  color: var(--ink-soft);
  gap: 8px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 18px;
}

.secondary-button {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.secondary-button:hover {
  border-color: var(--teal);
  color: var(--teal-strong);
}

.library-layout {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.wide-heading {
  max-width: 800px;
}

.brand-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.brand-sheet {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.brand-sheet[data-brand="realty"] {
  border-top-color: var(--coral);
}

.brand-sheet[data-brand="insurtech"] {
  border-top-color: var(--teal);
}

/* Era o one-liner em CAIXA ALTA, duas linhas inteiras. Caixa alta e' para
   rotulo de duas ou tres palavras; numa frase ela para a leitura. */
.brand-sheet .one-liner {
  margin: 10px 0 0;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

.brand-sheet h2 { margin-top: 0; }

.brand-sheet h2 {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-sheet .tagline {
  margin: 4px 0 0;
  font-size: var(--t-md);
  color: var(--teal-strong);
  font-weight: 600;
}

.brand-sheet[data-brand="realty"] .tagline {
  color: var(--coral);
}

.brand-sheet .pitch {
  margin: 18px 0 0;
  color: var(--ink-soft);
}

.brand-sheet h3 {
  margin: 22px 0 9px;
  font-size: 13px;
}

.library-section {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.compact-heading {
  margin-bottom: 18px;
}

.compact-heading h2 {
  font-size: 28px;
}

.offer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.offer-row {
  min-height: 160px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.offer-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.offer-row h3 {
  margin: 0;
  font-size: 18px;
}

.offer-row .brand-name {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.offer-row p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.price-state {
  display: inline-block;
  margin-top: 15px;
  color: var(--warning);
  font-size: 12px;
  font-weight: 600;
}

.rule-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0 28px;
}

.rule-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.mobile-nav {
  display: none;
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 15, 23, 0.78);
}

.access-card {
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.access-card img {
  display: block;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 12px;
  background: #f5f4ef;
}

.access-card h1 {
  font-size: 30px;
}

.access-card label {
  margin-top: 24px;
}

.access-card .primary-button {
  width: 100%;
  margin-top: 14px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  max-width: 360px;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--navy);
  color: #f5f5ef;
  box-shadow: var(--shadow);
  font-size: 13px;
}

@media (max-width: 980px) {
  :root {
    --rail-width: 208px;
  }

  .chat-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .context-panel {
    display: none;
  }

  .split-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-column {
    min-height: 300px;
  }

  .empty-state {
    min-height: 250px;
  }
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .app-shell {
    display: block;
  }

  .rail {
    display: none;
  }

  .workspace {
    height: 100dvh;
  }

  .topbar {
    min-height: 66px;
    padding: 10px 15px;
  }

  .mobile-brand {
    display: block;
    flex: 0 0 auto;
  }

  .mobile-brand img {
    display: block;
    padding: 3px;
    border-radius: 9px;
    background: #f5f4ef;
  }

  .topbar-title span {
    display: none;
  }

  .topbar-title h1 {
    margin: 0;
    font-size: 17px;
  }

  .topbar-actions {
    gap: 5px;
  }

  .mode-badge {
    display: none;
  }

  .text-button {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .view {
    padding: 20px 16px 104px;
  }

  .chat-intro {
    padding-bottom: 20px;
  }

  .chat-intro h2,
  .section-heading h2 {
    font-size: 28px;
  }

  .starter-grid,
  .brand-columns,
  .offer-list,
  .rule-list,
  .two-columns,
  .three-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .starter-grid button {
    min-height: 48px;
  }

  .message {
    max-width: 94%;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer .primary-button {
    width: 100%;
  }

  .result-column {
    padding: 20px;
  }

  .mobile-nav {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .mobile-nav button {
    min-height: 47px;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-faint);
    font-size: 11px;
    font-weight: 600;
  }

  .mobile-nav button.is-active {
    background: var(--teal-wash);
    color: var(--teal-strong);
  }

  .toast {
    right: 14px;
    bottom: 82px;
    left: 14px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-button,
  .starter-grid button,
  .primary-button,
  .secondary-button,
  .text-button,
  .mobile-nav button {
    transition:
      background-color 140ms ease,
      border-color 140ms ease,
      color 140ms ease,
      opacity 140ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────── CRM: funil de leads ─────────── */

.crm-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.crm-cartao {
  flex: 1 1 140px;
  max-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.crm-cartao strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
}

.crm-cartao span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-faint);
}

.crm-equipe {
  flex: 1 1 100%;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.crm-equipe h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.crm-equipe-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}

.crm-equipe-linha:first-of-type {
  border-top: none;
}

.crm-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.crm-filtro {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13px;
  cursor: pointer;
}

.crm-filtro.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.crm-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.crm-lead {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.crm-lead header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* sem isto o <select> de etapa estica e empurra o nome da empresa
   para duas linhas, e o card ganha rolagem horizontal */
.crm-lead header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.crm-lead h3 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  overflow-wrap: break-word;
}

.crm-sub {
  margin: 3px 0 0;
  overflow-wrap: break-word;
  font-size: 13px;
  color: var(--ink-faint);
}

.crm-etapa {
  flex: 0 0 auto;
  max-width: 200px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 13px;
}

.crm-proximo,
.crm-ultimo {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.crm-atrasado {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
}

.crm-contato {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.crm-contato textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.crm-contato-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.crm-contato-linha select,
.crm-contato-linha input {
  flex: 1 1 150px;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  color: var(--ink);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}

.crm-contato-linha .primary-button {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .crm-lead header {
    flex-direction: column;
  }
  .crm-contato-linha .primary-button {
    flex: 1 1 100%;
  }
}

/* ─────────── CRM: sinais de compra ─────────── */

.crm-sinais {
  /* <fieldset> nao encolhe sozinho: o padrao dele e' min-width:min-content,
     e por isso a grade estourava a tela. */
  min-width: 0;
  inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 16px 18px 18px;
  margin: 4px 0 16px;
}

.crm-sinais legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.crm-sinais-ajuda {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-faint);
}

.crm-sinais-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 8px;
  min-width: 0;
}

.crm-sinal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}

/* o .data-form deixa todo input com width:100%, e isso fazia o checkbox
   ocupar 293px do label, sobrando 0 para o texto. Aqui ele tem tamanho fixo. */
.crm-sinal input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  width: 16px;
  min-width: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal);
}

/* `anywhere` (ao contrario de `break-word`) entra no calculo de largura minima
   do elemento: o span virava 0px e o texto quebrava letra a letra. Aqui o span
   precisa e' ocupar o espaco que sobra do checkbox. */
.crm-sinal > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

.crm-sinal strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.crm-sinal small {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.35;
}

.crm-sinal.is-mata {
  border-color: var(--danger);
  background: var(--danger-wash);
}

.crm-sinal.is-mata strong,
.crm-sinal.is-mata small {
  color: var(--danger);
}

.crm-sinais-corta {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}

.crm-selo {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-selo-quente {
  background: var(--coral-wash);
  color: var(--coral);
}

.crm-selo-morno {
  background: var(--warning-wash);
  color: var(--warning);
}

.crm-selo-frio {
  background: var(--surface-muted);
  color: var(--ink-faint);
}

.crm-selo-descartar {
  background: var(--danger-wash);
  color: var(--danger);
}

.crm-lead-balcao {
  border-left: 3px solid var(--teal);
}

.crm-pegar {
  flex: 0 0 auto;
  white-space: nowrap;
}

.crm-dono {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
}

/* ─────────── Carteira de clientes ─────────── */

.crm-acoes {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cli-trabalhos {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cli-trabalho {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  padding: 14px 16px;
}

.cli-trabalho-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cli-trabalho-identidade {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cli-trabalho-identidade strong {
  color: var(--ink);
  font-size: 15px;
  min-width: 0;
  overflow-wrap: break-word;
}

.cli-trabalho-valor {
  color: var(--teal);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cli-marco,
.cli-novo-trabalho {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cli-marco input,
.cli-marco select,
.cli-novo-trabalho input,
.cli-novo-trabalho select {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}

.cli-novo-trabalho input[name="titulo"] { flex-grow: 2; }
.cli-novo-trabalho input[name="valor"] { flex: 0 1 140px; }
.cli-novo-trabalho select { flex: 0 1 170px; }

.cli-marco .primary-button,
.cli-novo-trabalho .primary-button {
  flex: 0 0 auto;
}

.cli-novo-trabalho {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ─────────── Pre-analise ─────────── */

.pre-analise { margin-bottom: 8px; }

.pa-bloco {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  padding: 14px 16px;
}

.pa-bloco h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.pa-lista { list-style: none; margin: 0; padding: 0; }

.pa-lista li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  min-width: 0;
}

.pa-lista li > span {
  flex: 0 0 auto;
  width: 16px;
  font-weight: 700;
  text-align: center;
}

.pa-ok > span { color: var(--teal); }
.pa-falta > span { color: var(--warning); }
.pa-alerta > span { color: var(--coral); }

.pa-atacar { border-color: var(--coral); }
.pa-atacar h3 { color: var(--coral); }

.pa-erro {
  margin-top: 12px;
  color: var(--danger);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   Visual v2 — densidade e hierarquia
   Referencia: o projeto de CRM que o Gabriel mandou (fundo escuro,
   cartao grande com bastante raio, um acento vivo, pilula de status forte).
   A paleta continua a nossa: navy, teal, coral, ambar.
   ═══════════════════════════════════════════════════════════ */

:root {
  --raio-cartao: 18px;
  --elevacao: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px -24px rgba(0, 0, 0, 0.7);
}

/* ── painel de numeros: o que antes era caixinha vira placar ── */

.crm-resumo {
  display: grid;
  /* 5 cartoes tem que caber numa linha; com minimo alto o ultimo caia sozinho */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.crm-cartao {
  position: relative;
  flex: initial;
  max-width: none;
  border-radius: var(--raio-cartao);
  padding: 20px 18px 16px;
  box-shadow: var(--elevacao);
  overflow: hidden;
}

/* fiozinho de acento no topo: dá leitura de painel sem poluir */
.crm-cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line-strong);
}

.crm-cartao[data-tom="bom"]::before { background: var(--teal); }
.crm-cartao[data-tom="atencao"]::before { background: var(--warning); }
.crm-cartao[data-tom="ruim"]::before { background: var(--danger); }

.crm-cartao strong {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.crm-cartao span {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── barra do funil: distribuicao em uma linha ── */

.crm-funil {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio-cartao);
  padding: 18px 20px;
  box-shadow: var(--elevacao);
}

.crm-funil h3 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.crm-barra {
  display: flex;
  height: 10px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-muted);
}

.crm-barra i {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}

.crm-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.crm-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.crm-legenda i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: block;
}

/* ── cartoes de lead e cliente ── */

.crm-lead {
  border-radius: var(--raio-cartao);
  padding: 20px 22px;
  box-shadow: var(--elevacao);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.crm-lead:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.crm-lead h3 {
  font-size: 19px;
  letter-spacing: -0.2px;
}

/* ── inicial de quem esta com o lead ── */

.crm-dono {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12px;
}

.crm-inicial {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ── pilulas de prioridade mais presentes ── */

.crm-selo {
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.07em;
}

.crm-selo-quente {
  background: var(--coral);
  color: #fff;
}

/* ── filtros do funil ── */

.crm-filtro {
  padding: 8px 16px;
  font-size: 12.5px;
  transition: background 0.15s ease, color 0.15s ease;
}

.crm-filtro:hover { border-color: var(--teal); color: var(--ink); }

/* ── titulo de secao mais firme ── */

.section-label {
  letter-spacing: 0.14em;
}

@media (max-width: 720px) {
  .crm-cartao strong { font-size: 30px; }
  .crm-lead { padding: 16px 16px; }
}

.crm-equipe-linha {
  align-items: center;
}

.crm-equipe-linha span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   FUNDAÇÃO — reescrita depois da crítica do Gabriel

   O que estava errado: fonte do sistema (Segoe UI), tamanhos soltos
   (25/27/28/30px sem escala) e título de 30px, que é medida de landing
   page. CRM não é landing: cabeçalho pequeno, dado denso, leitura rápida.

   Direção: "Data-Dense Dashboard" — KPI, tabela, padding enxuto.
   Tipografia: IBM Plex, a mesma do SubCheck, para os produtos da casa
   terem parentesco. Paleta continua a nossa.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* escala tipográfica — razão 1.2, sem número inventado no meio */
  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 21px;
  --t-2xl: 26px;

  /* espaçamento em passos de 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;

  /* profundidade: três níveis, não mais */
  --s-1: 0 1px 2px rgba(2, 6, 23, 0.06);
  --s-2: 0 2px 8px -2px rgba(2, 6, 23, 0.10), 0 1px 2px rgba(2, 6, 23, 0.05);
  --s-3: 0 12px 28px -12px rgba(2, 6, 23, 0.22);

  --raio-cartao: 10px;
  --radius: 10px;
  --radius-small: 7px;
  --elevacao: var(--s-2);

  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv05" 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --s-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --s-2: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
    --s-3: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  }
}

body,
input,
select,
textarea,
button {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

/* número é dado: monoespaçado e alinhado na coluna */
.crm-cartao strong,
.crm-legenda,
.crm-equipe-linha span:last-child,
.section-label,
.crm-selo,
.crm-inicial {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── hierarquia: cabeçalho de CRM, não de site ── */

.section-heading h2,
.library-layout .wide-heading h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.section-heading p,
.wide-heading p {
  font-size: var(--t-base);
  line-height: 1.55;
  max-width: 68ch;
  color: var(--ink-soft);
}

.section-label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.topbar h1,
#viewTitle {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.compact-heading h2 {
  font-size: var(--t-md);
  font-weight: 600;
}

/* ── KPI: o número manda, o rótulo sussurra ── */

.crm-resumo {
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.crm-cartao {
  border-radius: var(--radius);
  padding: var(--e-4) var(--e-4) var(--e-3);
  box-shadow: var(--s-1);
}

.crm-cartao strong {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.crm-cartao span {
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ── linhas de dado: densas e escaneáveis ── */

.crm-lead {
  border-radius: var(--radius);
  padding: var(--e-4) var(--e-5);
  box-shadow: var(--s-1);
}

.crm-lead:hover {
  box-shadow: var(--s-2);
  transform: none; /* mover a linha no hover atrapalha quem está lendo */
}

.crm-lead h3 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.crm-sub {
  font-size: var(--t-sm);
}

.crm-lista {
  gap: var(--e-2);
}

.crm-funil {
  border-radius: var(--radius);
  padding: var(--e-4) var(--e-5);
  box-shadow: var(--s-1);
}

.crm-funil h3 {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
}

.crm-legenda span { font-size: var(--t-xs); }

.crm-selo {
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.crm-inicial {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 9px;
}

.crm-filtro {
  padding: 6px 12px;
  font-size: var(--t-sm);
  border-radius: 6px;
}

/* ── formulário: campo de sistema, não de formulário de contato ── */

.data-form label,
.crm-sinais legend {
  font-size: var(--t-sm);
  font-weight: 500;
}

.data-form input,
.data-form select,
.data-form textarea,
.crm-contato-linha input,
.crm-contato-linha select,
.crm-contato textarea,
.cli-marco input,
.cli-marco select,
.cli-novo-trabalho input,
.cli-novo-trabalho select {
  border-radius: 7px;
  padding: 8px 11px;
  font-size: var(--t-base);
}

.primary-button {
  border-radius: 7px;
  padding: 9px 16px;
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
}

/* ── navegação ── */

.nav-button span { font-size: var(--t-base); font-weight: 600; }
.nav-button small { font-size: var(--t-xs); }

/* ── acessibilidade: foco visível e movimento respeitado ── */

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   A TELA DO CHAT — refeita

   O Gabriel abriu e disse "ta a mesma coisa", e estava certo: eu tinha
   mexido nas outras abas e deixado a porta de entrada igual. O problema
   aqui não era cor, era ESTRUTURA: um balão solto no meio de muito vazio,
   com o compositor longe, e um painel lateral de conselho genérico.

   Agora: a conversa ocupa a altura, o compositor fica fixo embaixo (como
   em qualquer ferramenta de chat séria) e a lateral mostra o dado real
   do funil — a tela de entrada passa a dizer algo sobre o trabalho dele.
   ═══════════════════════════════════════════════════════════ */

#view-chat {
  height: 100%;
  min-height: 0;
}

.chat-layout {
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--e-3);
}

.chat-intro {
  flex: 0 0 auto;
  padding: 0 0 var(--e-4);
}

.chat-intro h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.chat-intro > p {
  margin: var(--e-2) 0 0;
  font-size: var(--t-base);
  color: var(--ink-soft);
  max-width: 62ch;
}

/* a conversa cresce e rola sozinha, em vez de empurrar o compositor */
.message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--e-2) var(--e-1) var(--e-4);
  gap: var(--e-3);
  scroll-behavior: smooth;
}

.message {
  max-width: min(660px, 92%);
  padding: var(--e-3) var(--e-4);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: var(--t-base);
  line-height: 1.6;
}

.message span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: var(--e-1);
}

.user-message { border-color: transparent; }

/* compositor: ancorado embaixo e com cara de campo de verdade */
.composer {
  flex: 0 0 auto;
  padding: var(--e-2);
  border-radius: 12px;
  box-shadow: var(--s-2);
  align-items: end;
}

.composer:focus-within {
  border-color: var(--teal);
  box-shadow: var(--s-2), 0 0 0 3px rgba(10, 126, 110, 0.12);
}

.composer textarea {
  min-height: 44px;
  font-size: var(--t-base);
  line-height: 1.5;
}

.composer-note {
  flex: 0 0 auto;
  margin: var(--e-2) var(--e-1) 0;
  font-size: var(--t-xs);
}

/* ── lateral: o dia dele, não conselho de cartaz ── */

.context-panel { gap: var(--e-4); }

.rail-hoje .section-label { display: block; margin-bottom: var(--e-3); }

.rail-numeros {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.rail-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 10px var(--e-3);
  background: var(--surface);
}

.rail-linha b {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.rail-linha span {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.rail-linha[data-alerta="sim"] b { color: var(--danger); }

.context-panel .plain-list li { font-size: var(--t-sm); }
.context-panel h2 { font-size: var(--t-md); }
.notice-panel strong { font-size: var(--t-sm); }
.notice-panel p { font-size: var(--t-sm); }

@media (max-width: 960px) {
  #view-chat, .chat-layout, .chat-panel { height: auto; }
  .message-list { overflow: visible; max-height: none; }
}

/* ── tela de entrada ── */

.access-card {
  gap: var(--e-3);
  padding: var(--e-8) var(--e-6);
  border-radius: 14px;
  box-shadow: var(--s-3);
  width: min(400px, 92vw);
}

.access-card h1 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.access-card p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
}

.access-card label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: left;
}

.access-card input {
  width: 100%;
  margin-top: var(--e-1);
  padding: 9px 11px;
  font-size: var(--t-base);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-strong);
  color: var(--ink);
}

.access-card input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.acesso-dica {
  margin: var(--e-2) 0 0 !important;
  font-size: var(--t-xs) !important;
  line-height: 1.5;
  color: var(--ink-faint) !important;
  text-align: left;
}

#acessoSenhaBloco { display: flex; flex-direction: column; gap: var(--e-3); }

/* quem está dentro, no rodapé da barra */
.quem-entrou {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.admin-linha header { align-items: center; }
.admin-linha h3 { font-size: var(--t-base); }
.admin-remover { flex: 0 0 auto; white-space: nowrap; color: var(--danger); }
.admin-remover[data-confirmar] { border-color: var(--danger); font-weight: 700; }

.convite-cartao {
  margin-top: var(--e-3);
  padding: var(--e-5);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.convite-codigo {
  display: block;
  margin: var(--e-3) 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--teal);
  user-select: all;
}

.convite-cartao p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--e-2); }
.admin-cancelar { flex: 0 0 auto; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════
   TELA DE ENTRADA — refeita

   O que estava errado: o cartão usava gap:12px E margens próprias
   (24px, 14px, 4px) nos filhos. Os espaços somavam e ficavam
   irregulares — era o "espaçamento errado" que o Gabriel viu.
   Aqui o ritmo é um só, vindo de uma escala.

   E ela não mostrava identidade nenhuma. Agora a casa aparece:
   Nexus no meio, Insurtech em teal e Realty em coral.
   ═══════════════════════════════════════════════════════════ */

.access-gate {
  display: grid;
  place-items: center;
  padding: var(--e-5);
  background: rgba(8, 17, 28, 0.82);
  backdrop-filter: blur(6px);
}

.acesso-palco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(920px, 100%);
  max-height: 92vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

/* ── lado da marca ── */

.acesso-marca {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  padding: var(--e-8);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(47, 208, 184, 0.16), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(255, 107, 74, 0.14), transparent 55%),
    #0d1b2a;
  color: #fff;
}

.acesso-logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.acesso-logo svg { width: 34px; height: 34px; flex: none; }

.acesso-logo strong {
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.acesso-logo strong span { color: #2fd0b8; }

.acesso-logo small {
  display: block;
  margin-top: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.acesso-frase {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.acesso-frase em {
  font-style: normal;
  background: linear-gradient(90deg, #2fd0b8, #ff8f6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.acesso-frentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.acesso-frentes li {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.acesso-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
}

li[data-frente="insurtech"] .acesso-ponto { background: #2fd0b8; box-shadow: 0 0 0 4px rgba(47, 208, 184, 0.18); }
li[data-frente="realty"] .acesso-ponto { background: #ff6b4a; box-shadow: 0 0 0 4px rgba(255, 107, 74, 0.18); }

.acesso-frentes strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.acesso-frentes small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.acesso-rodape {
  margin: auto 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
}

/* ── lado do formulário: um ritmo só ── */

.access-card {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  width: auto;
  max-width: none;
  padding: var(--e-8);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  text-align: left;
  overflow-y: auto;
}

.acesso-topo h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.acesso-topo p {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* os campos têm o próprio ritmo; nada de margem solta somando com gap */
.acesso-campos,
#acessoSenhaBloco,
#acessoConviteBloco {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.campo { display: block; }

.campo > span {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.access-card input {
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  font-size: var(--t-base);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.access-card input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10, 126, 110, 0.14);
}

.acesso-dica {
  margin: 0 !important;
  font-size: var(--t-xs) !important;
  line-height: 1.5;
  color: var(--ink-faint) !important;
}

.acesso-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: auto;
}

.acesso-acoes .primary-button {
  width: 100%;
  padding: 12px;
  font-size: var(--t-base);
}

.acesso-acoes .text-button {
  padding: var(--e-2);
  font-size: var(--t-sm);
}

@media (max-width: 780px) {
  .acesso-palco { grid-template-columns: 1fr; max-height: none; }
  .acesso-marca { gap: var(--e-4); padding: var(--e-6); }
  .acesso-frase { font-size: 24px; }
  .acesso-frentes { display: none; }
  .access-card { padding: var(--e-6); }
}

/* ── ícones da navegação ── */

.nav-button {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  column-gap: var(--e-3);
  row-gap: 0;
  text-align: left;
}

.nav-icone {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.nav-button:hover .nav-icone,
.nav-button.is-active .nav-icone { opacity: 1; }
.nav-button.is-active .nav-icone { color: var(--teal); }

/* ── as duas frentes, sempre à vista ── */

.frentes-casa {
  display: flex;
  gap: var(--e-2);
  margin: var(--e-4) 0 var(--e-5);
}

.frente-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.frente-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

.frente-chip[data-frente="insurtech"] i { background: #0a7e6e; }
.frente-chip[data-frente="realty"] i { background: #ff6b4a; }

@media (prefers-color-scheme: dark) {
  .frente-chip[data-frente="insurtech"] i { background: #2fd0b8; }
}

/* ═══════════════════════════════════════════════════════════
   CELULAR — a Sara na rua

   No desktop a pessoa trabalha a carteira: comparar, filtrar, decidir.
   No celular ela faz outra coisa — registrar o que acabou de acontecer,
   antes de esquecer, de pé, com uma mão.

   Por isso aqui a lista vira LINHA (padrão de table view: título à
   esquerda, estado à direita, seta para abrir) e o formulário só aparece
   quando ela toca. Antes, cada lead abria um formulário inteiro e a tela
   virava um rolo sem fim.

   Regras de toque: alvo de 44px e texto de 16px — abaixo disso não se
   acerta nem se lê andando.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* ── tipografia que se lê em movimento ── */
  .crm-lead h3,
  .cli-trabalho-topo strong { font-size: 16px; }
  .crm-sub, .crm-ultimo, .crm-proximo { font-size: 14px; }
  .crm-cartao span { font-size: 12px; }

  /* ── a fila vira lista agrupada, não pilha de cartões ── */
  .crm-lista {
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }

  .crm-lista .crm-lead {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .crm-lista .crm-lead:first-child { border-top: 0; }
  .crm-lead:hover { transform: none; box-shadow: none; }

  /* a linha: toda ela é o alvo do toque */
  .crm-lead > header {
    min-height: 56px;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    cursor: pointer;
    position: relative;
    padding-right: 38px;
  }

  /* a seta que diz "tem mais aqui dentro" */
  .crm-lead > header::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.2s ease;
  }

  .crm-lead.is-aberto > header::after {
    transform: translateY(-30%) rotate(45deg);
  }

  /* o miolo só aparece quando ela toca */
  .crm-lead .crm-contato,
  .crm-lead .cli-trabalhos,
  .crm-lead .cli-novo-trabalho,
  .crm-lead > .crm-proximo,
  .crm-lead > .crm-ultimo {
    display: none;
  }

  .crm-lead.is-aberto .crm-contato,
  .crm-lead.is-aberto .cli-trabalhos,
  .crm-lead.is-aberto .cli-novo-trabalho,
  .crm-lead.is-aberto > .crm-proximo,
  .crm-lead.is-aberto > .crm-ultimo {
    display: block;
  }

  .crm-lead.is-aberto {
    background: var(--surface-strong);
  }

  .crm-lead.is-aberto .crm-contato,
  .crm-lead.is-aberto .cli-novo-trabalho {
    margin: 0;
    padding: var(--e-4);
    border-top: 1px solid var(--line);
  }

  .crm-lead.is-aberto > .crm-proximo,
  .crm-lead.is-aberto > .crm-ultimo {
    padding: 0 var(--e-4) var(--e-3);
    margin: 0;
  }

  /* o seletor de etapa sai da linha e vira campo de largura inteira */
  .crm-acoes {
    position: static;
    flex-direction: row;
    width: 100%;
    order: 3;
  }

  .crm-lead > header { flex-wrap: wrap; }
  .crm-lead.is-aberto .crm-acoes { padding: 0 var(--e-4) var(--e-3); }
  .crm-lead:not(.is-aberto) .crm-acoes { display: none; }

  /* ── alvos de dedo ── */
  .crm-etapa,
  .crm-contato-linha select,
  .crm-contato-linha input,
  .crm-contato textarea,
  .cli-marco input,
  .cli-marco select,
  .cli-novo-trabalho input,
  .cli-novo-trabalho select,
  .data-form input,
  .data-form select,
  .data-form textarea,
  .access-card input {
    min-height: 44px;
    font-size: 16px; /* abaixo de 16 o iOS dá zoom sozinho no foco */
  }

  .primary-button,
  .crm-pegar,
  .text-button {
    min-height: 44px;
    font-size: 15px;
  }

  .crm-filtro {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* o campo de conversa e o botão ficam onde o polegar alcança */
  .composer { position: sticky; bottom: 0; }
  .composer textarea { font-size: 16px; }

  /* ── o balcão continua em cartão: é decisão, não consulta ── */
  .crm-lead-balcao {
    border-radius: 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    padding: var(--e-4);
    margin-bottom: var(--e-2);
    background: var(--surface);
  }

  #crmBalcao { border: 0; background: transparent; }
  #crmBalcao .crm-lead > header { min-height: 0; padding: 0; cursor: default; flex-direction: column; align-items: flex-start; }
  #crmBalcao .crm-lead > header::after { content: none; }
  #crmBalcao .crm-pegar { width: 100%; margin-top: var(--e-3); }
  #crmBalcao .crm-lead .crm-ultimo { display: block; padding: var(--e-2) 0 0; }

  /* ── menu de rodapé: rótulo legível ── */
  .mobile-nav button { font-size: 12px; min-height: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   REVISÃO GERAL — "não rola, tipografia ruim, nem perto da HubSpot"

   Três coisas estavam erradas, e nenhuma era cor:

   1. A barra tinha overflow:hidden. Com sete itens mais o rodapé, o que
      passava da altura da tela ficava inalcançável.
   2. A base do texto era 16px — medida de site de conteúdo. Ferramenta de
      trabalho lê 14px: cabe mais dado na tela sem apertar a vista.
   3. O mesmo título aparecia duas vezes: no topo e de novo no corpo, com
      outras palavras. Quem abre a tela lia a mesma coisa duas vezes antes
      de chegar no dado. Agora o título mora no topo, e o corpo começa no
      trabalho.

   O wordmark é Space Grotesk, como no site. Minúsculo é de propósito —
   a marca se escreve "nexus".
   ═══════════════════════════════════════════════════════════ */

/* ── a base do texto ── */

body {
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── a barra: rola, e é estreita o bastante para não precisar ── */

.rail {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 100px;
}
.rail::-webkit-scrollbar-track { background: transparent; }

.brand-lockup { gap: 10px; padding: 0 4px; }
.brand-lockup img { width: 34px; height: 34px; border-radius: 9px; }

/* Space Grotesk: é a letra do wordmark no site. Sem ela a marca saía em
   IBM Plex e não parecia a marca. */
.brand-lockup strong,
.entrar-logo strong,
.acesso-logo strong {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-lockup strong { font-size: 21px; }

.brand-lockup small {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.frentes-casa { margin: 18px 0 14px; }

.desktop-nav { gap: 1px; }

/* Linha de menu de ferramenta: uma linha, ícone e nome. O que a tela faz
   já está escrito no topo dela — não precisa repetir sete vezes aqui. */
.nav-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #b9c6d2;
}

.nav-button span {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.nav-button .nav-icone { width: 17px; height: 17px; flex: none; }

.nav-button:hover { background: rgba(255, 255, 255, 0.06); color: #eef2f5; }

.nav-button.is-active {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-button.is-active span { font-weight: 600; }

.rail-footer {
  margin-top: auto;
  padding: 14px 4px 0;
}

.status-row { font-size: 12px; font-weight: 500; }
.rail-footer p { margin-top: 7px; font-size: 11px; line-height: 1.45; }

/* ── o topo: um título por tela, e as ações à direita ── */

.topbar {
  min-height: 58px;
  padding: 11px clamp(16px, 2.2vw, 32px);
}

.topbar-title span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.topbar-title h1 {
  margin-top: 1px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ── a orientação da tela: uma linha, não um cabeçalho ──

   Era <rótulo> + <h2> + <parágrafo>, três blocos repetindo o topo.
   Virou a frase que de fato ajuda, no tamanho de nota de rodapé útil. */

.view-dica,
.view-dica-bloco p {
  margin: 0 0 var(--e-4);
  max-width: 78ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-faint);
}

.view-dica-bloco { margin-bottom: var(--e-4); }
.view-dica-bloco .section-label { display: none; }

/* ── hierarquia interna: subtítulo de bloco, não de página ── */

.compact-heading h2 {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.compact-heading p {
  margin-top: 2px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-faint);
}

.section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ── tabela e formulário: alinhados na mesma malha ── */

.data-form label,
.crm-sinais legend { font-size: var(--t-sm); font-weight: 500; }

.crm-lead h3 { font-size: var(--t-base); font-weight: 600; }
.crm-sub { font-size: var(--t-sm); line-height: 1.45; }

.crm-cartao strong { font-size: 24px; font-weight: 600; letter-spacing: -0.035em; }
.crm-cartao span { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; }

/* ── o texto longo respeita medida de leitura ── */

.view p,
.library-card p,
.message p { max-width: 78ch; }

/* ── celular: a barra não existe, mas o texto precisa crescer ── */

@media (max-width: 760px) {
  body { font-size: 15px; }
  .view-dica,
  .view-dica-bloco p { font-size: 13.5px; }
}

/* ── densidade da lista: linha de ferramenta, não cartão de site ──

   Cada lead ocupava 110px. Com dez leads a Sara rolava a tela inteira para
   ver o que cabia numa. A referência (HubSpot) põe a linha em torno de 60px:
   nome, estado e a ação, tudo na mesma altura do olho. */

.crm-lead { padding: var(--e-3) var(--e-4); }

.crm-lead header {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.crm-lead h3 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  line-height: 1.3;
}

/* ── respiro dentro do cartao ──────────────────────────────────────────

   A densidade acima foi escrita para a LINHA da fila: nome, estado e acao na
   mesma altura do olho, cartao de 60px. Para aquilo ela esta' certa.

   So' que o mesmo componente serve o BALCAO, onde o cartao carrega seis coisas
   empilhadas — nome, selo, "ver ficha", segmento/UF/origem, dois botoes e a
   lista de sinais. Com 2px entre elas o cartao vira um bloco unico de texto: o
   olho nao encontra onde uma informacao termina e a outra comeca.

   A correcao nao e' desfazer a densidade: e' parar de contar com margem de 2px
   entre irmaos e usar UMA regra de ritmo. A coluna de texto vira grade com
   espaco proprio, e quem empilha mais conteudo respira mais sem que a linha
   simples engorde. */
.crm-lead header > div {
  display: grid;
  gap: 6px;
  align-content: start;
  /* Sem isto o botao "Ver ficha completa", que e' display:block, estica para a
     largura inteira da coluna e o texto dele fica centralizado no meio do
     cartao — flutuando, solto de tudo. Item de grade nasce esticado; aqui ele
     tem que ter o tamanho do proprio conteudo. */
  justify-items: start;
}

/* A ordem de leitura e' nome, o que e', o que fazer.

   O botao estava ENTRE o nome e a linha de segmento/UF, partindo a
   identificacao da empresa em duas. Ler "Coemi Imoveis / Ver ficha completa /
   imobiliario · DF" e' ler o meio da frase no fim. */
.crm-lead header > div > .crm-sub {
  order: 1;
}
.crm-lead header > div > .text-button {
  order: 2;
  /* O margin-left:auto vem da regra de densidade, feita para os botoes de ACAO
     que ficam a' direita do cartao. Aplicado tambem a este, que vive DENTRO da
     coluna de texto, ele empurra o botao para o fim da coluna — e margem
     automatica vence justify-items, entao o start sozinho nao resolvia. Ele
     pertence a' coluna, alinhado com o nome. */
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.crm-lead .crm-sub { margin: 0; }

/* O cartao do balcao carrega mais e pede mais. A linha da fila continua
   magra — e' outro uso do mesmo desenho. */
.crm-lead-balcao {
  padding: var(--e-4);
}
.crm-lead-balcao header {
  align-items: flex-start;
}

.crm-ultimo,
.crm-proximo {
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--ink-faint);
}

/* o botão de uma linha não é o botão de um formulário */
.crm-lead .primary-button,
.crm-lead .text-button {
  flex: none;
  margin-left: auto;
  padding: 6px 12px;
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ── o quadro de números: uma faixa, não cinco caixas soltas ── */

.crm-cartao { padding: var(--e-3) var(--e-4); }
.crm-cartao strong { font-size: 21px; line-height: 1.1; }

.crm-equipe-linha { padding: var(--e-2) 0; font-size: var(--t-sm); }

/* ── o balcão e a fila ganham respiro entre si, não dentro de si ── */

.crm-lista { gap: 6px; }

/* ── altura de controle: dedo no celular, ponteiro no computador ──

   Estava 46px em todo botão e todo campo, sempre. 46px é medida de dedo —
   é o certo no celular e é o que fazia a tela do computador parecer inflada:
   uma linha de lead não conseguia ficar mais baixa que o botão dentro dela.

   Abaixo de 760px as regras de toque continuam mandando (44px e 16px de
   texto, mais acima neste arquivo); daqui para cima o controle encolhe. */

@media (min-width: 761px) {
  .primary-button {
    min-height: 34px;
    padding: 7px 14px;
    font-size: var(--t-base);
  }

  .text-button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: var(--t-sm);
  }

  input,
  select {
    min-height: 34px;
    padding: 7px 10px;
    font-size: var(--t-base);
  }

  textarea { padding: 9px 10px; font-size: var(--t-base); }

  .crm-lead .primary-button,
  .crm-lead .text-button { min-height: 30px; padding: 5px 11px; }

  .mode-badge { min-height: 28px; font-size: var(--t-xs); }

  .crm-filtro { min-height: 30px; padding: 5px 11px; }
}

/* ── o formulário também é um painel ──

   A coluna do formulário ficava solta sobre o fundo enquanto a coluna do
   resultado tinha cartão. Duas metades da mesma tela com tratamentos
   diferentes: uma parecia conteúdo, a outra parecia rascunho. */

.form-column {
  padding: var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-cartao, var(--radius));
  background: var(--surface);
  box-shadow: var(--s-1);
}

.form-column > .view-dica-bloco { margin-bottom: var(--e-4); }

/* respiro entre rótulo e campo, e entre um campo e o próximo */
.data-form { gap: var(--e-4); }
.data-form label { display: grid; gap: 5px; }

@media (max-width: 760px) {
  .form-column {
    padding: var(--e-4);
    border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PERFIL — a conta vista por quem é dona dela

   Quatro blocos, na ordem em que a pergunta aparece: quem eu sou,
   como eu estou, como troco a senha, e o que protege isso tudo.
   ═══════════════════════════════════════════════════════════ */

.perfil-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e-4);
  align-items: start;
  max-width: 1000px;
}

.perfil-cartao {
  padding: var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--s-1);
}

/* ── quem eu sou ── */

.perfil-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--line);
}

.perfil-inicial {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--navy);
  color: #f5f5ef;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
}

.perfil-topo > div { min-width: 0; flex: 1 1 auto; }

.perfil-topo strong {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.perfil-topo span {
  display: block;
  margin-top: 1px;
  font-size: var(--t-sm);
  color: var(--ink-faint);
  /* quebra no @ ou no ponto, nao no meio de "exemplo" */
  overflow-wrap: break-word;
}

.perfil-papel {
  margin-left: auto;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.perfil-papel[data-papel="admin"] {
  background: color-mix(in srgb, var(--coral, #ff6b4a) 14%, transparent);
  color: var(--coral, #ff6b4a);
}

.perfil-dados {
  margin: 0;
  padding-top: var(--e-4);
  display: grid;
  gap: var(--e-3);
}

.perfil-dados > div {
  display: grid;
  gap: 2px;
}

.perfil-dados dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.perfil-dados dd {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.45;
}

/* ── os meus números ── */

.perfil-numeros {
  display: grid;
  margin-top: var(--e-3);
}

.perfil-numero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-base);
}

.perfil-numero:first-child { border-top: 0; }

.perfil-numero b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  font-weight: 600;
}

.perfil-numero[data-alerta="sim"] b { color: var(--danger); }

/* ── trocar a senha ── */

.perfil-senha { margin-top: var(--e-3); }
.perfil-senha .primary-button { justify-self: start; }

.perfil-dica {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ── o que protege a conta ── */

.perfil-lista {
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e-3);
}

.perfil-lista li {
  padding-left: 16px;
  position: relative;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

.perfil-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.perfil-lista b { color: var(--ink); font-weight: 600; }

.perfil-seguranca .text-button { margin-top: var(--e-4); }

/* ── o rodapé da barra virou botão: clicar em si mesma leva ao perfil ── */

.quem-entrou {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--e-3);
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #b9c6d2;
  font: inherit;
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.quem-entrou:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.quem-entrou.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.quem-entrou span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .perfil-layout { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .perfil-cartao { padding: var(--e-4); }
}

/* O bloco de segurança é texto corrido, não cartão de número: ocupa a largura
   toda embaixo em vez de sobrar sozinho numa coluna de 320px. */
.perfil-seguranca { grid-column: 1 / -1; }
.perfil-seguranca .perfil-lista {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e-3) var(--e-5);
}

/* ── o menu do celular: uma linha que rola ──

   Era grade de 4 colunas. Com sete telas isso vira duas fileiras, ocupa uns
   110px de tela e — pior — tapava o fim do conteúdo, porque nada reservava
   espaço para ele embaixo.

   Agora é uma fileira só que corre com o dedo, e a página reserva a altura
   dela. O item aberto é trazido para a vista sozinho (em app.js). */

@media (max-width: 760px) {
  .mobile-nav {
    display: flex;
    grid-template-columns: none;
    gap: 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-padding-inline: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav::-webkit-scrollbar { display: none; }

  .mobile-nav button {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* o conteúdo termina acima do menu, não atrás dele */
  .workspace { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* No celular o cartao e' estreito e o selo caia sozinho na linha de baixo,
   encostado na direita, parecendo solto. Fica junto do nome. */
@media (max-width: 760px) {
  .perfil-papel { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   PLACAR E CARTÃO — a forma veio da referência, a cor é nossa

   O Gabriel mandou um CRM de fidelidade (GIVY) e pediu "igual". O que
   dá para copiar é a FORMA: nível com barra até o próximo, números
   grandes, cartões, cara de aplicativo no celular. O que não dá é a
   cor — aquilo é roxo, e a Nexus é navy com teal na Insurtech e coral
   na Realty. Copiar o roxo jogaria fora a identidade que ele mesmo
   mandou reforçar na semana passada.

   E o conteúdo muda de natureza: lá o ponto vem de compra, aqui vem do
   funil que a comercial já preenche. Cupom e "total de moedas" não
   existem no nosso caso, então não entraram só para parecer.
   ═══════════════════════════════════════════════════════════ */

.placar {
  margin: 0 0 var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, #16324a 100%);
  color: #f5f5ef;
  box-shadow: var(--s-2);
}

.placar-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.placar-nivel {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.placar-topo small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: rgba(245, 245, 239, 0.6);
}

.placar-topo strong {
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* a barra do GIVY: trilho apagado, preenchimento na cor da casa */
.placar-barra {
  height: 6px;
  margin-top: var(--e-3);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.placar-barra i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--teal) 0%, #6fe3d0 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .placar-barra i { transition: none; }
}

.placar-ajuda {
  margin-top: var(--e-3);
  padding: 0;
  border: 0;
  background: none;
  color: rgba(245, 245, 239, 0.66);
  font: inherit;
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.placar-ajuda:hover { color: #fff; }

.placar-tabela {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: var(--e-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: var(--e-2);
}

.placar-tabela li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
}

.placar-tabela b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
  font-weight: 600;
}

.placar-tabela small {
  grid-column: 2;
  font-size: var(--t-xs);
  color: rgba(245, 245, 239, 0.52);
}

.placar-feitos {
  grid-template-columns: 1fr !important;
  margin-top: var(--e-1);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs) !important;
  color: rgba(245, 245, 239, 0.62);
}

/* ── o cartão ── */

.cartao-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e-4);
  align-items: start;
  max-width: 1000px;
}

.cartao-face {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy) 0%, #16324a 100%);
  color: #f5f5ef;
  box-shadow: var(--s-3);
}

.cartao-qr {
  width: min(260px, 70vw);
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  line-height: 0; /* sem isto o svg deixa uma folga embaixo */
}

.cartao-qr svg { width: 100%; height: auto; display: block; }

.cartao-dados { text-align: center; }

.cartao-dados strong {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Filho DIRETO: este e' o rotulo da frente ("NEXUS REALTY"). Sem o ">", a
   regra tambem pegava os spans de telefone e e-mail dentro do <small>, e o
   contato saia em teal e caixa alta como se fosse rotulo. */
.cartao-dados > span {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

.cartao-dados small {
  display: grid;
  gap: 2px;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: rgba(245, 245, 239, 0.66);
}

/* o e-mail e' longo e nao pode estourar a largura do cartao */
.cartao-dados small span { overflow-wrap: anywhere; }

.cartao-form { margin-top: var(--e-3); }
.cartao-form .primary-button { justify-self: start; }
.cartao-instalar { margin-top: var(--e-3); display: grid; gap: var(--e-3); justify-items: start; }

/* ═══════════════════════════════════════════════════════════
   CELULAR: cara de aplicativo

   "No celular tem que parecer um app." O que separa site de app não é
   enfeite: é a barra de baixo com ícone, o conteúdo que respeita o
   entalhe da tela, o toque que não seleciona texto sem querer, e o
   portal abrindo sem barra de navegador — o que só acontece depois de
   instalado (manifest.webmanifest + sw.js).
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* respeita o entalhe e a barra de gestos */
  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }

  .mobile-nav {
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 18px;
    /* vidro, como barra de app */
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
  }

  /* ícone em cima, nome embaixo — o padrão de barra de app */
  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 68px;
    min-height: 50px;
    padding: 5px 8px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ink-faint);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav button .nav-icone {
    width: 21px;
    height: 21px;
    opacity: 0.75;
  }

  .mobile-nav button.is-active { color: var(--teal-strong); font-weight: 600; }
  .mobile-nav button.is-active .nav-icone { opacity: 1; }

  /* o toque não seleciona texto de rótulo nem de botão */
  .mobile-nav button,
  .crm-selo,
  .placar-nivel,
  .section-label { -webkit-user-select: none; user-select: none; }

  .workspace { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  .placar { margin: 0 0 var(--e-4); padding: var(--e-4); }
  .placar-topo strong { font-size: 21px; }

  .cartao-layout { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .cartao-face { padding: var(--e-5) var(--e-4); }
}

/* Instalado (sem barra de navegador), o topo encosta no relógio do sistema.
   Aqui a folga precisa ser maior do que no navegador. */
@media (display-mode: standalone) {
  .topbar { padding-top: max(16px, env(safe-area-inset-top)); }
}

/* O e-mail do cartão não é campo: é informação. Fica com a cara de um dado
   confirmado, não de um input vazio esperando ser preenchido. */
.cartao-fixo {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
}

.cartao-fixo > span {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.cartao-fixo strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-weight: 500;
  overflow-wrap: break-word;
}

.cartao-fixo small {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════
   ABAS E A VISÃO DO DONO
   ═══════════════════════════════════════════════════════════ */

/* As abas: o padrão "Home | Rewards" da referência, com o sublinhado na cor
   da casa. Perguntar e Aprender são a mesma tarefa — duvidar. */
.abas {
  display: flex;
  gap: var(--e-5);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--line);
}

.aba {
  position: relative;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}

.aba:hover { color: var(--ink); }

.aba.is-active { color: var(--ink); font-weight: 600; }

.aba.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-strong);
}

/* ── precisa de você ── */

.atencao {
  margin-bottom: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--s-1);
}

.atencao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.atencao-topo small {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.atencao-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.atencao-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.atencao-item:first-child { border-top: 0; }

.atencao-marca {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-soft);
}

/* o que vence prazo é vermelho; o que só está quieto, não */
.atencao-item[data-tipo="passou_da_data"] .atencao-marca,
.atencao-item[data-tipo="dono_removido"] .atencao-marca {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.atencao-item[data-tipo="balcao_parado"] .atencao-marca {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: var(--teal-strong);
}

.atencao-item > div { display: grid; gap: 1px; min-width: 0; }

.atencao-item strong {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.atencao-item span {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

.atencao-item small {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.atencao-vazio {
  padding: 4px 0;
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* ── quadro da equipe ── */

.equipe-quadro { display: grid; margin-top: var(--e-3); }

.equipe-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--line);
}

.equipe-linha:first-child { border-top: 0; }
.equipe-linha[data-alerta="sim"] .crm-inicial { background: var(--danger); color: #fff; }

.equipe-quem { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }

.equipe-quem strong {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
}

.equipe-quem small {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.equipe-numeros { display: flex; gap: var(--e-4); flex: none; }

.equipe-numeros > div { text-align: right; }

.equipe-numeros b {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.1;
}

.equipe-numeros span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .abas { gap: var(--e-4); }
  .aba { font-size: var(--t-base); }

  .atencao { padding: var(--e-4); }

  /* no celular o nome fica em cima e os números embaixo: lado a lado eles
     espremem os dois e nada fica legível */
  .equipe-linha { flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .equipe-numeros { justify-content: space-between; gap: var(--e-2); }
  .equipe-numeros > div { text-align: left; }
}

/* No celular o botão de ação do topo quebrava em duas linhas e espremia o
   título até virar "Pergunte o que pre...". A ação continua alcançável, mas
   deixa de disputar espaço com o nome da tela. */
@media (max-width: 760px) {
  .topbar-actions .text-button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: var(--t-xs);
    white-space: nowrap;
  }

  .topbar-title h1 { font-size: var(--t-md); }
  .topbar-title span { display: none; } /* o eyebrow repete o item aceso no menu */
}

/* ═══════════════════════════════════════════════════════════
   A CONVERSA NO CELULAR — refeita

   No vídeo do Gabriel o compositor aparecia POR CIMA da mensagem do agente.
   A culpa é minha e é de uma linha: eu tinha dado `bottom` a um elemento
   `position: sticky`.

   Sticky guarda o lugar dele no fluxo e, com deslocamento inferior, é PUXADO
   para cima a partir daquele ponto. Quando a conversa é curta, o lugar natural
   dele fica abaixo do deslocamento — então ele sobe e cobre o que está em
   cima. Sem o deslocamento ele encostava no fim da tela, atrás do menu. Os
   dois jeitos estavam errados: o problema não era o valor, era usar sticky.

   Agora é o desenho normal de aplicativo de conversa: a tela não rola — rola a
   LISTA. O compositor fica preso no fim da coluna, por construção, e não tem
   como cobrir nada.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  #view-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* quem rola é a lista, não a tela */
  }

  #view-chat .abas { flex: none; }

  #view-chat .aba-pane {
    flex: 1;
    min-height: 0; /* sem isto o filho que rola estoura o pai em flex */
  }

  /* Aprender é leitura corrida: essa aba rola inteira, como qualquer página. */
  #view-chat .aba-pane[data-pane="aprender"] { overflow-y: auto; }

  #view-chat .aba-pane[data-pane="perguntar"] {
    display: flex;
    flex-direction: column;
  }

  #view-chat .chat-layout,
  #view-chat .chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  #view-chat .message-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 0;
    -webkit-overflow-scrolling: touch;
  }

  #view-chat .composer {
    position: static; /* era sticky; virou o fim da coluna */
    flex: none;
  }

  #view-chat .composer-note { flex: none; margin-bottom: 0; }
  #view-chat .view-dica { flex: none; }

  /* ── vazio que não ocupa meia tela ──
     A caixa de "nenhum cliente ainda" tinha 250px de altura mínima com o texto
     centralizado no meio do nada. Num celular isso é metade da tela dizendo
     que não há nada. */
  .empty-state,
  .result-column {
    min-height: 0;
    padding: var(--e-5) var(--e-4);
  }

  .empty-state p { margin: 0; }

  /* ── os cartões de número ficam do mesmo tamanho ──
     "PESSOAS COM ACESSO" quebra em duas linhas e "NO BALCÃO" não; sem uma
     altura comum para o rótulo, a fileira sai desalinhada. */
  .crm-cartao { display: flex; flex-direction: column; justify-content: space-between; }
  .crm-cartao span { min-height: 2.2em; display: flex; align-items: flex-end; }

  /* ── a barra de baixo mostra que corre ──
     Ela rola, mas cortava o item na borda sem nenhum sinal de que havia mais.
     A máscara desbota as pontas: fica claro que dá para arrastar. */
  .mobile-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
}

/* A altura do menu de baixo estava reservada DUAS VEZES: uma no .workspace e
   outra no padding de cada .view. Somadas davam 182px, e sobrava aquele buraco
   entre o compositor e o menu. Quem reserva é o .workspace, uma vez só. */
@media (max-width: 760px) {
  .view { padding-bottom: var(--e-4); }
}

/* ═══════════════════════════════════════════════════════════
   UMA MARGEM SÓ NO CELULAR

   O Gabriel disse "tem coisa desalinhada". Está: em Qualificar e Orçamento o
   formulário mora num cartão, e em Clientes e Administração mora solto. O
   cartão acrescenta o próprio recuo, então o texto de uma tela começa em 32px
   e o da outra em 16px. Trocando de aba, tudo escorrega para o lado.

   No computador o cartão faz sentido: são duas colunas lado a lado e ele
   emparelha o formulário com o resultado. No celular só existe uma coluna —
   ali o cartão não emparelha nada, só desalinha.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .form-column,
  .result-column {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* o resultado precisa continuar se distinguindo do formulário acima dele */
  .result-column {
    margin-top: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--line);
  }

  /* mesma distância entre blocos em toda tela */
  .library-section { margin-top: var(--e-6); padding-top: var(--e-5); }
}

/* ═══════════════════════════════════════════════════════════
   O BALCÃO NÃO É A FILA — no celular eles se comportavam igual

   A lista da fila virou table view de iOS: linha de 56px, seta à direita e o
   miolo abre ao toque. Isso serve para o lead que É dela, que tem histórico
   para abrir.

   O lead do balcão não tem nada para abrir — tem UMA ação, pegar. Com as
   mesmas regras ele saía sem cartão, sem separação entre um e outro, com uma
   seta que não abre nada e um botão esparramado na largura toda.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .crm-lead-balcao {
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    padding: var(--e-3) var(--e-4) !important;
    margin-bottom: var(--e-2);
    box-shadow: var(--s-1) !important;
  }

  /* nada a expandir: sem seta, sem alvo de toque na linha inteira */
  .crm-lead-balcao > header {
    min-height: 0;
    padding: 0;
    padding-right: 0;
    cursor: default;
    flex-wrap: wrap;
    row-gap: var(--e-3);
  }

  .crm-lead-balcao > header::after { content: none; }

  .crm-lead-balcao > header > div { flex: 1 1 100%; min-width: 0; }

  .crm-lead-balcao .crm-pegar { margin-left: 0; }

  /* o que o lead tem de sinal continua visível: é o que ela usa para decidir */
  .crm-lead-balcao > .crm-ultimo,
  .crm-lead-balcao > .crm-proximo { display: block; }
}

/* O botão do balcão ocupa a largura toda no celular — isso já estava decidido
   em `#crmBalcao .crm-pegar`, e está certo: é a única ação do cartão e o dedo
   acerta em qualquer lugar. Aqui ele só perde peso, para o nome da empresa
   continuar sendo a primeira coisa que ela lê. */
@media (max-width: 760px) {
  #crmBalcao .crm-pegar {
    min-height: 40px;
    font-size: var(--t-base);
    font-weight: 500;
    margin-top: var(--e-2);
  }

  /* linha de sinais vazia deixava um resto de marca embaixo do cartão */
  .crm-lead-balcao > .crm-ultimo:empty,
  .crm-lead-balcao > .crm-proximo:empty { display: none; }
}

/* ── o que o agente escreve ──
   A resposta deixou de ser um parágrafo só e virou blocos: parágrafo, lista e
   a linha que era de tabela. Precisa respirar como texto, não como dado. */
.message p + p,
.message p + .resposta-lista,
.message .resposta-lista + p { margin-top: 10px; }

.message .resposta-titulo { font-weight: 600; }

.resposta-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.resposta-lista li { line-height: 1.55; }
.message strong { font-weight: 600; }

/* ── linha que não abre nada não ganha seta ──
   A lista do sistema (Administração) usa a marcação da fila de leads, e no
   celular herdava a seta do "toque para abrir" — só que ali não abre nada, e
   o selo era empurrado para baixo pelo espaço reservado à seta. */
@media (max-width: 760px) {
  .nao-abre > header {
    padding-right: var(--e-4);
    cursor: default;
    min-height: 0;
    padding-top: var(--e-3);
    padding-bottom: var(--e-3);
  }

  .nao-abre > header::after { content: none; }
  .nao-abre > header > div { flex: 1 1 auto; min-width: 0; }
  .nao-abre .crm-selo { flex: none; align-self: center; }
}

/* ── a dica não encosta no botão ──
   No Cartão, "Sem o telefone o contato sai só com e-mail e site" ficava colada
   embaixo do botão, parecendo parte dele. */
.cartao-form + .perfil-dica,
.data-form + .perfil-dica { margin-top: var(--e-3); }

/* ── o foco do compositor ──
   O contorno inteiro acendia em teal forte e a caixa parecia em alerta, não em
   uso. Fica a borda acesa e um halo discreto — o suficiente para saber onde o
   cursor está. */
.composer:focus-within {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line-strong));
  box-shadow: var(--s-1), 0 0 0 2px color-mix(in srgb, var(--teal) 14%, transparent);
}

/* ── o texto não termina cortado no nada ──
   A lista rola por baixo do compositor; sem um desvanecimento, a última linha
   some no meio da palavra e parece defeito em vez de continuação. */
@media (max-width: 760px) {
  #view-chat .message-list {
    /* Só embaixo. Em cima o desvanecimento apagava o começo da mensagem em vez
       de sugerir que havia mais — e o começo é justamente o que ela quer ler. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 12px), transparent 100%);
  }
}

/* ── a lista do sistema, com layout próprio ──

   Ela reusa a marcação da fila de leads e vinha herdando `flex-wrap: wrap` com
   `justify-content: space-between`: o selo caía para a segunda linha e o bloco
   de texto ficava solto no meio, cada linha começando num lugar diferente
   (114, 119, 136, 98 px — foi o que o Gabriel circulou).

   Aqui o layout é escrito inteiro, sem depender do que a fila define. */

.nao-abre > header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: nowrap;
  text-align: left;
}

.nao-abre > header > div {
  min-width: 0;
  display: grid;
  gap: 1px;
  justify-items: start;
}

.nao-abre h3 {
  display: block !important;
  margin: 0;
  text-align: left;
}

.nao-abre .crm-sub { margin: 0; text-align: left; }
.nao-abre .crm-selo { justify-self: end; align-self: center; }

/* O selo de estado do sistema reusava as cores de temperatura de lead: "ok"
   saía em coral, que é a cor de lead quente — e num painel de estado coral lê
   como PROBLEMA. Aqui verde é "está de pé" e âmbar é "olhe isto". */
.admin-linha .crm-selo-quente {
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--teal-strong);
}

.admin-linha .crm-selo-morno {
  background: color-mix(in srgb, #d99a2b 20%, transparent);
  color: #d99a2b;
}

/* ═══════════════════════════════════════════════════════════
   ÍCONE NO TÍTULO E O ROSTO DA CONTA
   ═══════════════════════════════════════════════════════════ */

.topbar-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal-strong);
}

.topbar-icone svg { width: 18px; height: 18px; }

/* no celular o símbolo da marca já ocupa a esquerda do topo */
@media (max-width: 760px) {
  .topbar-icone { display: none; }
}

/* ── o avatar ── */

.perfil-avatar {
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: filter 0.15s ease;
}

.perfil-avatar:hover { filter: brightness(1.15); }

/* a marca d'água de "dá para trocar" — some quando não há ponteiro */
@media (pointer: fine) {
  .perfil-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .perfil-avatar:hover::after { opacity: 1; }
}

/* foto, ícone e iniciais moram no mesmo quadrado */
.crm-inicial img,
.perfil-inicial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.crm-inicial svg,
.perfil-inicial svg {
  width: 58%;
  height: 58%;
  stroke-width: 2;
}

.crm-inicial,
.perfil-inicial { overflow: hidden; padding: 0; }

/* ── a escolha ── */

.avatar-escolha {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--line);
}

.avatar-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--e-2);
  margin: var(--e-3) 0;
}

.avatar-opcao {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.avatar-opcao svg { width: 22px; height: 22px; }
.avatar-opcao:hover { border-color: var(--line-strong); color: var(--ink); }

.avatar-opcao[data-frente="realty"] { color: var(--coral, #ff6b4a); }
.avatar-opcao[data-frente="insurtech"] { color: var(--teal-strong); }

.avatar-opcao.is-active {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal-strong);
}

.avatar-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

/* o <label> vira botão: o <input type=file> cru não combina com o resto */
.avatar-arquivo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 760px) {
  .avatar-acoes .text-button { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* O bloco de escolha vem logo depois do topo do perfil, que já termina com uma
   linha. As duas juntas viravam um risco duplo. */
.perfil-topo + .avatar-escolha {
  margin-top: 0;
  padding-top: var(--e-4);
  border-top: 0;
}

/* O rosto ao lado do nome, na lista da equipe. A bolinha passa a ser o
   primeiro elemento da linha, então o cabeçalho precisa acomodá-la. */
.equipe-pessoa > header { align-items: flex-start; }

.equipe-pessoa > header > .crm-inicial {
  width: 34px;
  height: 34px;
  flex: none;
  margin-top: 1px;
  border-radius: 9px;
  font-size: 12px;
}

/* "OK" e "!" nessa mesma lista são estado, não rosto: ficam pequenos. */
.equipe-pessoa .crm-dono .crm-inicial { width: 18px; height: 18px; font-size: 8.5px; border-radius: 5px; }

/* No celular a linha da equipe herdava o desenho da fila de leads e o rosto
   caía ACIMA do nome, em tamanho de cartão. Ele é uma marca ao lado do nome,
   não o assunto da linha. */
@media (max-width: 760px) {
  .equipe-pessoa > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--e-3);
    padding-right: var(--e-4);
  }

  .equipe-pessoa > header > .crm-inicial { width: 36px; height: 36px; border-radius: 10px; }

  /* nada a expandir nessa lista: a seta não abre coisa nenhuma */
  .equipe-pessoa > header::after { content: none; }

  /* o botão de remover desce para a própria linha, alinhado com o texto */
  .equipe-pessoa .admin-remover { grid-column: 2; justify-self: start; margin-top: var(--e-2); }
}

/* ═══════════════════════════════════════════════════════════
   A CONVERSA — com cara de conversa

   "Nem dá pra ler a resposta direito." Estava certo: no celular o placar
   ocupava 200px, as abas mais 50, a dica mais 70, e o que sobrava para a
   resposta do agente era uma janela de três linhas.

   O placar saiu (ele é do funil). A dica virou estado vazio. E o balão deixou
   de ter uma linha escrita "Agente Comercial Nexus" acima de cada resposta —
   em quinze respostas eram quinze linhas repetindo o óbvio.

   O que sobra é o que importa: a conversa ocupa a tela, e o compositor fica
   embaixo.
   ═══════════════════════════════════════════════════════════ */

.message {
  width: fit-content;
  max-width: min(720px, 88%);
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.55;
}

/* quem fala vira marca pequena, não título */
.message > span {
  display: block;
  margin-bottom: 3px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* duas falas seguidas da mesma pessoa: a segunda não repete o nome nem o
   espaço, e os cantos se juntam como numa conversa de verdade */
.message.segue { margin-top: -8px; }
.assistant-message.segue { border-top-left-radius: 6px; }
.user-message.segue { border-top-right-radius: 6px; }

.assistant-message { border-bottom-left-radius: 6px; }
.user-message { border-bottom-right-radius: 6px; }

/* os três pontinhos de "está escrevendo" */
.digitando {
  display: flex;
  gap: 4px;
  align-items: center;
  min-height: 20px;
}

.digitando i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: pulsa 1.2s ease-in-out infinite;
}

.digitando i:nth-child(2) { animation-delay: 0.18s; }
.digitando i:nth-child(3) { animation-delay: 0.36s; }

@keyframes pulsa {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .digitando i { animation: none; opacity: 0.5; }
}

@media (max-width: 760px) {
  /* a conversa é a tela: as abas encolhem e a dica não volta depois de sumir */
  #view-chat .abas { margin-bottom: var(--e-3); }
  #view-chat .view-dica { margin-bottom: var(--e-3); }

  .message { max-width: 86%; padding: 10px 13px; }
  .message-list { gap: 10px; }
}

/* ── o compositor de uma linha ── */

#sendButton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#sendButton svg { display: none; }

@media (max-width: 760px) {
  /* duas colunas: o campo cresce, o botão é um círculo do lado */
  #view-chat .composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
  }

  #view-chat .composer textarea {
    min-height: 40px;
    max-height: 132px;
    padding: 9px 8px;
    resize: none; /* cresce sozinho conforme ela escreve */
  }

  #view-chat #sendButton {
    width: 42px;
    height: 42px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
  }

  #view-chat #sendButton svg { display: block; width: 19px; height: 19px; }
  #view-chat #sendButton .rotulo-enviar {
    /* continua no documento para o leitor de tela, sai do desenho */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .composer-note { margin: 6px 4px 0; font-size: 11px; }
}

/* ── o resumo da esteira ── */

.esteira-resumo {
  margin: var(--e-4) 0 var(--e-2);
  font-size: var(--t-base);
}

.esteira-resumo b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-lg);
  color: var(--teal-strong);
}

.esteira-lista {
  list-style: none;
  margin: 0 0 var(--e-3);
  padding: 0;
  display: grid;
}

.esteira-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}

.esteira-lista li:first-child { border-top: 0; }
.esteira-lista strong { font-weight: 600; }
.esteira-lista span { color: var(--ink-faint); font-size: var(--t-xs); }

/* quem ficou de fora não é erro: é informação de que já estava lá */
.esteira-fora strong { color: var(--ink-faint); font-weight: 500; }

/* Uma ação única, com cara de operação em andamento — não de formulário que o
   Gabriel precisa alimentar na mão. */
.procurar-form {
  margin: var(--e-3) 0 var(--e-5);
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--teal) 9%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 94%, var(--teal) 6%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--teal) 62%, transparent);
}

.procurar-form .text-button { justify-self: start; }

.procurar-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* As marcas que dizem de relance se dá para ligar agora e se o dinheiro dela
   já está saindo em anúncio. */
.esteira-marca {
  padding: 2px 7px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-size: 10px !important;
  font-weight: 500;
  color: var(--ink-soft) !important;
}

.esteira-anuncia {
  background: color-mix(in srgb, var(--coral, #ff6b4a) 16%, transparent);
  color: var(--coral, #ff6b4a) !important;
}

@media (max-width: 760px) {
  .procurar-acoes .primary-button,
  .procurar-acoes .text-button { flex: 1 1 auto; justify-content: center; }
}

.esteira-progresso {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.esteira-ver-leads { margin-top: var(--e-3); }


/* ═══════════════════════════════════════════════════════════════════════
   OS NÚMEROS — orçamento, tabela de preços, produção e placar

   Uma regra atravessa as quatro telas: número é para ser LIDO E COMPARADO,
   não decorado. Por isso todo valor aqui é tabular (os dígitos alinham na
   vertical, então a coluna de dinheiro vira uma coluna de verdade), e o
   destaque é sempre o número, nunca o rótulo.
   ═══════════════════════════════════════════════════════════════════════ */

.numero-cartao strong,
.orcamento-total strong,
.placar-numeros strong,
.preco-valor,
.producao-tabela td,
.producao-funil b,
.producao-conversao b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ── cartão de número, usado pela produção ── */

.numero-cartao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.numero-cartao > span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.numero-cartao strong {
  font-size: var(--t-lg);
  line-height: 1.15;
  color: var(--ink);
  /* Rede de seguranca: se algum dia entrar um valor maior do que a celula,
     ele quebra a linha em vez de sair por cima do cartao vizinho. */
  overflow-wrap: anywhere;
}
.numero-cartao.is-destaque strong {
  font-size: var(--t-xl);
}
.numero-cartao small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.numero-cartao.is-destaque {
  border-color: var(--teal);
  background: var(--teal-wash);
}
.numero-cartao.is-destaque strong {
  color: var(--teal-strong);
}

/* ── orçamento ── */

.orcamento-linhas {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.orcamento-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 92px 32px;
  gap: var(--e-2);
  align-items: end;
}
.orcamento-campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
}
.orcamento-campo > span {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.orcamento-campo select,
.orcamento-campo input {
  width: 100%;
  min-width: 0;
}
.orcamento-tirar {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink-faint);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
}
.orcamento-tirar:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.orcamento-acoes {
  margin-top: var(--e-3);
}
.orcamento-sem-tabela {
  padding: var(--e-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-small);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.orcamento-conta {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--line);
}
.orcamento-totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-3);
}

/* O valor do contrato ocupa a linha inteira em qualquer largura. Ele e' o maior
   numero da tela e o assunto da conversa — meia celula nao comportava nem o que
   ja' existe ("R$ 10.800,00" pedia 187px numa celula de 144px). */
.orcamento-total.is-destaque {
  grid-column: 1 / -1;
}
.orcamento-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.orcamento-total > span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.orcamento-total strong {
  font-size: var(--t-lg);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.orcamento-total small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
/* O valor do contrato é o número da conversa: ele manda na hierarquia. */
.orcamento-total.is-destaque {
  border-color: var(--teal);
  background: var(--teal-wash);
}
.orcamento-total.is-destaque strong {
  font-size: var(--t-2xl);
  color: var(--teal-strong);
}

.orcamento-detalhe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-4);
  margin: var(--e-4) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  font-size: var(--t-sm);
}
.orcamento-detalhe dt {
  color: var(--ink-soft);
}
.orcamento-detalhe dd {
  margin: 0;
  text-align: right;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.orcamento-detalhe dd small {
  margin-left: var(--e-2);
  font-family: inherit;
  color: var(--ink-faint);
}

.orcamento-avisos {
  margin: var(--e-4) 0 0;
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-6);
  list-style: disc;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--warning-wash);
  color: var(--ink);
  font-size: var(--t-sm);
}
.orcamento-avisos.precisa-aprovar {
  border-left-color: var(--coral);
  background: var(--coral-wash);
}
.orcamento-avisos li + li {
  margin-top: var(--e-1);
}

.orcamento-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.orcamento-aviso-envio {
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  color: var(--teal-strong);
}
.orcamento-texto {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
}
.orcamento-texto summary {
  cursor: pointer;
  color: var(--ink-soft);
}
.orcamento-texto pre {
  margin: var(--e-2) 0 0;
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  white-space: pre-wrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* ── tabela de preços ── */

.preco-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
.preco-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "alto acoes" "detalhe acoes";
  gap: 2px var(--e-3);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.preco-item.is-inativo {
  opacity: 0.55;
}
.preco-alto {
  grid-area: alto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  min-width: 0;
}
.preco-valor {
  color: var(--teal-strong);
  font-size: var(--t-sm);
}
.preco-detalhe {
  grid-area: detalhe;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}
.preco-acoes {
  grid-area: acoes;
  display: flex;
  gap: var(--e-1);
}
.preco-vazio {
  padding: var(--e-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-small);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.ghost-button.is-mini {
  padding: 4px 10px;
  font-size: var(--t-xs);
}
.ghost-button.is-perigo:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.parametros-titulo {
  margin-top: var(--e-6);
}

/* ── produção ── */

.producao-cartoes {
  display: grid;
  /* 170px e' o minimo que "R$ 199.905,00" precisa no corpo abaixo mais o
     respiro do cartao — abaixo disso o numero vaza por cima da borda. Mas o
     minimo aqui e' 240: com 170 cabiam TRES numa largura de 560px e o quarto
     cartao ficava sozinho na linha de baixo, com um vao ao lado. Em 240 eles
     caem 2x2 ate' a tela dar para os quatro de uma vez. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.producao-titulo {
  margin: var(--e-6) 0 var(--e-2);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.producao-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-6);
}
.producao-funil,
.producao-conversao {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.producao-funil-topo {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-sm);
}
/* Chamava-se .placar-barra e batia de frente com a barra do painel escuro de
   pontos, que ja' existia: minha regra vinha depois no arquivo, entao o trilho
   translucido dele virava cinza-claro sobre o cartao navy, e o preenchimento
   perdia o gradiente. Nome proprio resolve. */
.producao-barra,
.placar-progresso {
  height: 6px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}
.producao-barra i,
.placar-progresso i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
}
.producao-conversao li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.producao-conversao b {
  color: var(--teal-strong);
}
.producao-conversao small {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

/* Tabela larga rola dentro da própria caixa: o corpo da página nunca rola
   de lado — é a regra que vale para todo o portal. */
.producao-tabela-caixa {
  overflow-x: auto;
}
.producao-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  white-space: nowrap;
}
.producao-tabela th {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}
.producao-tabela td {
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.producao-tabela tr:last-child td {
  border-bottom: 0;
}
.producao-tabela td:first-child {
  font-family: inherit;
}

.producao-meses {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  height: 120px;
  padding-top: var(--e-2);
}
.producao-mes {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-1);
  height: 100%;
  min-width: 26px;
}
.producao-mes i {
  width: 100%;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  background: var(--teal);
}
.producao-mes small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.producao-vazio {
  color: var(--ink-faint);
  font-size: var(--t-sm);
}

/* ── placar ── */

/* Mesmo caso da barra: .placar-topo ja' era o cabecalho do painel de pontos, e
   o meu align-items: flex-end passou a empurrar o numero dele para baixo. */
.placar-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
}
.placar-periodo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.placar-faixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.placar-faixa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.placar-faixa .crm-inicial {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  font-size: var(--t-sm);
}
.placar-faixa-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.placar-faixa-texto > span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.placar-faixa-texto strong {
  font-size: var(--t-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placar-faixa-texto small {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--teal-strong);
  overflow-wrap: anywhere;
}

.placar-eu {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--teal-wash);
}
.placar-eu .crm-inicial {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  font-size: var(--t-md);
}
.placar-eu-corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.placar-eu-corpo > span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.placar-eu-corpo strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  color: var(--teal-strong);
  overflow-wrap: anywhere;
}
.placar-eu-corpo small {
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
.placar-sequencia {
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  font-style: normal;
  color: var(--coral);
}

.placar-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
.placar-linha {
  display: grid;
  grid-template-columns: 34px 28px minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.placar-linha.is-eu {
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--teal);
}
.placar-posicao {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-md);
  text-align: center;
  color: var(--ink-faint);
}
.placar-quem {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.placar-quem strong {
  font-size: var(--t-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.placar-quem small,
.placar-numeros small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.placar-numeros {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.placar-numeros strong {
  font-size: var(--t-md);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.placar-vazio {
  margin-top: var(--e-4);
  color: var(--ink-faint);
  font-size: var(--t-sm);
}

/* A regua do jogo. Eu reaproveitei a marcacao do painel de pontos mas troquei o
   nome da classe, e essa nunca chegou a ter CSS: as tres partes da linha saiam
   coladas — "+5Contato registradoCada conversa que voce anota". O painel antigo
   e' escuro e tem estilo proprio; este vive no fundo claro, entao precisa do
   seu. */
.pontos-tabela {
  display: grid;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}
.pontos-tabela li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.pontos-tabela li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.pontos-tabela b {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--teal-strong);
}
.pontos-tabela small {
  grid-column: 2;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* ── celular: o que é grade vira pilha ── */

@media (max-width: 640px) {
  .orcamento-linha {
    grid-template-columns: minmax(0, 1fr) 1fr 32px;
    grid-template-areas: "item item tirar" "qtd desc .";
  }
  .orcamento-campo.is-item {
    grid-area: item;
  }
  .orcamento-linha .orcamento-campo.is-curto:nth-of-type(2) {
    grid-area: qtd;
  }
  .orcamento-linha .orcamento-campo.is-curto:nth-of-type(3) {
    grid-area: desc;
  }
  .orcamento-tirar {
    grid-area: tirar;
  }
  .placar-linha {
    grid-template-columns: 26px 30px minmax(0, 1fr);
    grid-template-areas: "pos rosto quem" ". . numeros";
  }
  .placar-posicao {
    grid-area: pos;
  }
  .placar-linha .crm-inicial {
    grid-area: rosto;
  }
  .placar-quem {
    grid-area: quem;
  }
  .placar-numeros {
    grid-area: numeros;
    flex-direction: row;
    align-items: baseline;
    gap: var(--e-2);
  }
  .producao-meses {
    height: 96px;
  }

  /* O minimo de 240px existe para o numero caber no computador; no celular ele
     joga os quatro cartoes num por linha e empurra o funil para fora da tela.
     Aqui sao duas colunas fixas: "R$ 199.905,00" a 17px cabe em 165px, e o
     overflow-wrap segura qualquer valor maior. */
  .producao-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* E o cartao em destaque volta ao mesmo corpo dos outros aqui. A 21px numa
     celula de 165px o valor quebrava no meio do numero — "R$ 14.300," numa
     linha e "00" na outra, que e' pior do que nao destacar. O fundo teal ja'
     diz qual e' o cartao principal; nao precisa do tamanho tambem. */
  .numero-cartao.is-destaque strong {
    font-size: var(--t-lg);
  }

  /* Na tabela de precos o nome e o valor dividem a linha quando cabem e
     quebram quando nao cabem — entao "Landing page R$ 4.200,00" ficava em uma
     linha e "Conteudo mensal" / "R$ 900,00/mes" em duas, item por item. Lista
     onde cada linha tem uma forma nao se le' de relance. No celular o valor
     sempre desce. */
  .preco-alto {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* No celular a grade cai para duas colunas, e o valor do contrato a 26px
     nao cabia em meia largura: "R$ 10.800,00" saia cortado em "R$ 10.800,0".
     Ele e' o numero da conversa — entao ocupa a linha inteira. */
  .orcamento-totais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sobram tres cartoes embaixo do valor do contrato, e tres em duas colunas
     deixam um sozinho com um vao do lado — o mesmo formato que o Gabriel
     mandou tirar da Administracao. A primeira cobranca fica com a linha
     inteira: e' a segunda pergunta que o cliente faz, depois do total. */
  .orcamento-totais > .orcamento-total:last-child {
    grid-column: 1 / -1;
  }

  /* As faixas empilhadas comiam a tela inteira antes de o ranking aparecer — e
     o ranking e' o assunto. Viram uma fileira que desliza: continuam la', sem
     empurrar o placar para baixo da dobra. */
  .placar-faixas {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--e-4) * -1);
    padding-inline: var(--e-4);
  }
  .placar-faixa {
    flex: 0 0 auto;
    width: 62%;
    max-width: 240px;
    scroll-snap-align: start;
  }
}

/* ── tema escuro: só o que muda de papel ── */

@media (prefers-color-scheme: dark) {
  .numero-cartao,
  .orcamento-total,
  .preco-item,
  .placar-faixa,
  .placar-linha {
    background: var(--surface);
    border-color: var(--line);
  }
  .orcamento-detalhe,
  .orcamento-texto pre {
    background: var(--surface-strong);
  }
  .producao-barra,
  .placar-progresso {
    background: var(--surface-muted);
  }
}

/* O valor da proposta no cartao do lead. Tabular para as linhas do funil
   poderem ser comparadas de relance, e em teal porque e' dinheiro fechado ou
   em jogo — nao e' mais um dado de cadastro. */
.crm-valor {
  margin: 2px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--teal-strong);
}

/* O cartao e' uma coluna com justify-content: space-between. Isso nao aparecia
   enquanto os cinco tinham o mesmo conteudo; assim que UM ganhou segunda linha,
   ele ficou mais alto, a grade esticou os vizinhos para a mesma altura e o
   rotulo deles desceu para o rodape — "2" la' em cima e "PESSOAS COM ACESSO"
   la' embaixo, com um buraco no meio. Com o conteudo preso no topo, a altura
   que sobra fica embaixo, onde ninguem repara. */
.crm-resumo .crm-cartao {
  justify-content: flex-start;
}

/* A segunda linha do cartao de resumo. So' o cartao de leads usa, para o balcao
   caber dentro dele em vez de ocupar um cartao inteiro sozinho. */
.crm-cartao small {
  display: block;
  margin-top: 3px;
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* ── A ficha do lead ──────────────────────────────────────────────────────
   A ordem visual repete a ordem da cabeca de quem vai discar: primeiro o
   botao que age, depois o motivo, depois o que dizer. */

.ficha-voltar {
  margin-bottom: var(--e-4);
}

.ficha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--line);
}
.ficha-nome h2 {
  margin: 0 0 var(--e-2);
  font-size: var(--t-2xl);
  line-height: 1.15;
}
.ficha-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.ficha-etapa,
.ficha-pontos {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.ficha-valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ficha-valor span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.ficha-valor strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  color: var(--teal-strong);
  overflow-wrap: anywhere;
}

.ficha-bloco {
  margin-top: var(--e-6);
}
.ficha-bloco h3 {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Botao que AGE: no celular o WhatsApp abre o aplicativo e o telefone disca. */
.ficha-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-2);
}
.ficha-acao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
}
.ficha-acao:hover {
  border-color: var(--teal);
}
.ficha-acao strong {
  font-size: var(--t-sm);
}
.ficha-acao small {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.ficha-contato,
.ficha-proximo {
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.ficha-vazio {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-small);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.ficha-sinais,
.ficha-historico {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ficha-sinais li {
  padding: var(--e-3);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--surface-strong);
}
.ficha-sinais strong,
.ficha-historico span {
  display: block;
  font-size: var(--t-sm);
}
.ficha-sinais small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.ficha-analise p {
  margin: 0 0 var(--e-3);
  padding-left: var(--e-4);
  border-left: 3px solid var(--coral);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.ficha-dados {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-2) var(--e-5);
  margin: 0;
  font-size: var(--t-sm);
}
.ficha-dados dt {
  color: var(--ink-faint);
}
.ficha-dados dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ficha-historico li {
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--line);
}
.ficha-historico small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

.ficha-abrir {
  padding-left: 0;
}

@media (max-width: 640px) {
  .ficha-topo {
    flex-direction: column;
    align-items: flex-start;
  }
  .ficha-valor {
    align-items: flex-start;
  }
  .ficha-acoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Numero impar de contatos deixa o ultimo sozinho com um vao do lado — o
     mesmo formato que ja' foi tirado da Administracao e do orcamento. O
     :nth-child(odd) faz a regra valer SO' quando a contagem e' impar: com
     quatro contatos nada muda. */
  .ficha-acoes > .ficha-acao:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* O dinheiro do cliente, na linha dele. Tabular para as linhas da carteira
   poderem ser comparadas de relance, como no resto do portal. */
.cli-dinheiro {
  margin: 2px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  color: var(--teal-strong);
}

#carteiraTotais:empty {
  display: none;
}

/* Sao sempre QUATRO cartoes aqui, e o auto-fit os punha em 3+1 nesta largura —
   "Clientes" sozinho com um vao do lado. Com quatro, so' 2 ou 4 colunas nao
   deixam sobra; entao a conta e' fixa, nao automatica. */
#carteiraTotais {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1100px) {
  #carteiraTotais {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* O botao de orcar dentro do cabecalho da ficha. O cabecalho e' um flex de duas
   pontas (nome de um lado, valor do outro); sem regra propria o botao virava um
   terceiro item disputando espaco com os dois. Ele quebra para a linha de baixo
   e ocupa a largura toda no celular, onde e' o proximo passo obvio depois de
   ler a ficha. */
.ficha-orcar,
.ficha-abertura {
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 640px) {
  .ficha-orcar,
  .ficha-abertura {
    width: 100%;
    align-self: stretch;
  }
}

/* O aviso de como a leitura foi feita. Teal quando a IA organizou, âmbar
   quando ela não respondeu — no segundo caso metade dos campos está vazia de
   propósito, e a cor evita que a pessoa ache que o portal falhou. */
.enquadrar-aviso {
  margin: var(--e-3) 0 0;
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--teal-wash);
  font-size: var(--t-sm);
  color: var(--ink);
}
.enquadrar-aviso.is-local {
  border-left-color: var(--warning);
  background: var(--warning-wash);
}

/* Item do catalogo ainda sem preco. Ambar e nao teal: nao e' um valor, e' a
   falta dele — e a diferenca tem que se ver de relance na lista. */
.preco-falta {
  font-size: var(--t-sm);
  color: var(--warning);
}

/* ─── O que a qualificacao aponta ───
   Fica acima das linhas do orcamento e precisa parecer OUTRA coisa: nao e' um
   campo a preencher, e' uma leitura do lead. Por isso fundo proprio e borda
   tracejada — ela some visualmente assim que a pessoa comeca a montar. */
.orcamento-sugestoes {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
}
.sugestao-titulo {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sugestao-cartao {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.sugestao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}
.sugestao-nome {
  font-size: var(--t-md);
  color: var(--ink);
}
.sugestao-preco {
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--teal-strong);
}
.sugestao-porques {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sugestao-porques li {
  display: grid;
  gap: 2px;
}
.sugestao-sinal {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--teal-strong);
}
.sugestao-frase {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.sugestao-usar {
  justify-self: start;
}
.sugestao-motivo,
.sugestao-pendente,
.sugestao-sem-resposta {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Ambar: falta preco e' pendencia da casa, nao erro da pessoa. */
.sugestao-pendente {
  color: var(--warning);
}
/* O item que a qualificacao pede e a casa ainda nao sabe cobrar usa o mesmo
   cartao do item orcavel — com a borda em ambar, para a pessoa ver de longe
   que aquele ali ela ainda nao poe na proposta. */
.sugestao-cartao-pendente {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
}
.sugestao-preco-falta {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
}

/* ── Pipeline comercial ──────────────────────────────────────────────────
   Sete etapas nao cabem lado a lado sem esmagar os nomes. A faixa desliza na
   horizontal e cada coluna conserva largura de leitura — no celular isso
   também deixa claro que existe continuidade para a direita. */
.crm-pipeline-secao {
  margin-top: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--line);
}

.crm-pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(218px, 1fr);
  gap: var(--e-2);
  overflow-x: auto;
  padding: 2px 2px var(--e-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.pipeline-coluna {
  min-height: 178px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.pipeline-coluna[data-etapa="tentando"],
.pipeline-coluna[data-etapa="proposta"] {
  border-top-color: var(--warning);
}

.pipeline-coluna[data-etapa="conversando"],
.pipeline-coluna[data-etapa="reuniao"] {
  border-top-color: var(--teal);
}

.pipeline-coluna[data-etapa="ganho"] {
  border-top-color: var(--teal-strong);
}

.pipeline-coluna[data-etapa="perdido"] {
  border-top-color: var(--danger);
}

.pipeline-coluna > header {
  display: grid;
  gap: 3px;
  padding: var(--e-3);
  border-bottom: 1px solid var(--line);
}

.pipeline-coluna > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.pipeline-coluna h3 {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
}

.pipeline-coluna header span,
.pipeline-coluna header > strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.pipeline-coluna header span {
  display: inline-grid;
  min-width: 21px;
  min-height: 21px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-soft);
  font-size: var(--t-xs);
}

.pipeline-coluna header > strong {
  color: var(--teal-strong);
  font-size: var(--t-xs);
  font-weight: 500;
}

.pipeline-cartoes {
  display: grid;
  gap: 6px;
  padding: var(--e-2);
}

.pipeline-lead {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--s-1);
}

.pipeline-lead:hover,
.pipeline-lead:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--s-2);
}

.pipeline-lead strong,
.pipeline-lead span,
.pipeline-lead small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-lead strong {
  font-size: var(--t-sm);
  font-weight: 600;
}

.pipeline-lead span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--teal-strong);
}

.pipeline-lead small {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.pipeline-vazio,
.pipeline-restantes {
  margin: 0;
  padding: var(--e-3);
  color: var(--ink-faint);
  font-size: var(--t-xs);
  text-align: center;
}

.pipeline-restantes {
  padding-block: var(--e-2);
}

.crm-lead-clicavel {
  cursor: pointer;
}

.crm-lead-clicavel:focus-visible {
  border-color: var(--teal);
  outline: 3px solid color-mix(in srgb, var(--teal) 30%, transparent);
  outline-offset: 2px;
}

.crm-lead-clicavel :is(button, a, input, select, textarea) {
  cursor: auto;
}

/* ── Carteira e painel individual do cliente ─────────────────────────────
   A marca com iniciais e' o fallback honesto quando nao ha arquivo de logo.
   Ela funciona como icone de reconhecimento e ainda separa visualmente as
   duas frentes sem inventar uma identidade do cliente. */
.cliente-cartao {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--s-1);
  cursor: pointer;
}

.cliente-cartao:hover,
.cliente-cartao:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--s-2);
}

.cliente-cartao:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 30%, transparent);
  outline-offset: 2px;
}

.cliente-cartao > header,
.cliente-identidade,
.cliente-painel-identidade {
  display: flex;
  align-items: center;
}

.cliente-cartao > header {
  justify-content: space-between;
  gap: var(--e-3);
}

.cliente-identidade,
.cliente-painel-identidade {
  min-width: 0;
  gap: var(--e-3);
}

.cliente-identidade-texto {
  min-width: 0;
}

.cliente-identidade-texto h3 {
  overflow: hidden;
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-identidade-texto p {
  margin: 2px 0 0;
}

.cliente-marca {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--line));
  border-radius: 12px;
  background: var(--teal-wash);
  color: var(--teal-strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cliente-marca[data-frente="realty"] {
  border-color: color-mix(in srgb, var(--coral) 42%, var(--line));
  background: var(--coral-wash);
  color: var(--coral);
}

.cliente-marca.is-grande {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border-radius: 16px;
  font-size: var(--t-md);
}

.cliente-abrir {
  flex: 0 0 auto;
}

.cliente-cartao-dados {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.8fr;
  border-top: 1px solid var(--line);
}

.cliente-cartao-dados p {
  display: grid;
  min-width: 0;
  gap: 2px;
  margin: 0;
  padding: var(--e-3) var(--e-4) 0 0;
}

.cliente-cartao-dados p + p {
  padding-left: var(--e-4);
  border-left: 1px solid var(--line);
}

.cliente-cartao-dados span,
.cliente-responsavel span,
.cliente-metricas span,
.cliente-secao-titulo span,
.cliente-servico-ultimo span {
  color: var(--ink-faint);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cliente-cartao-dados strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cliente-painel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--line);
}

.cliente-painel-identidade h2 {
  margin: 0;
  font-size: var(--t-2xl);
  line-height: 1.15;
}

.cliente-painel-identidade p {
  margin: var(--e-1) 0 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.cliente-responsavel {
  display: grid;
  flex: 0 0 auto;
  gap: var(--e-1);
  text-align: right;
}

.cliente-responsavel strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
}

.cliente-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.cliente-metricas > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--s-1);
}

.cliente-metricas strong {
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cliente-metricas small {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.cliente-painel-secao {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--line);
}

.cliente-secao-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.cliente-secao-titulo h3 {
  margin: 2px 0 0;
  font-size: var(--t-md);
  font-weight: 600;
}

.cliente-secao-titulo > small {
  color: var(--ink-faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
}

.cliente-servicos {
  display: grid;
  gap: var(--e-2);
}

.cliente-servicos > .empty-state,
.cliente-painel-secao > .empty-state {
  min-height: 110px;
  margin: 0;
  padding: var(--e-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.cliente-servico {
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--s-1);
}

.cliente-servico-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.cliente-servico-topo h4 {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
}

.cliente-servico-topo p {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.cliente-servico-estado {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  text-align: right;
}

.cliente-servico-estado strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--teal-strong);
}

.cliente-servico-estado span {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.cliente-servico-escopo {
  margin: var(--e-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.cliente-servico-ultimo {
  display: grid;
  gap: 3px;
  margin: var(--e-3) 0 0;
  padding: var(--e-3);
  border-left: 3px solid var(--teal);
  background: var(--surface-strong);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.cli-novo-trabalho > label {
  flex: 1 1 180px;
  min-width: 0;
}

.cli-novo-trabalho > label:first-child {
  flex-grow: 2;
}

.cli-novo-trabalho > label > span {
  font-size: var(--t-xs);
}

.cli-novo-trabalho > .primary-button {
  min-height: 46px;
  align-self: end;
}

.cliente-linha-do-tempo {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cliente-linha-do-tempo li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--e-4);
  padding: 0 0 var(--e-4);
}

.cliente-linha-do-tempo li::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: -1px;
  left: 98px;
  width: 1px;
  background: var(--line);
}

.cliente-linha-do-tempo li::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 94px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--teal);
}

.cliente-linha-do-tempo li:last-child::before {
  display: none;
}

.cliente-linha-do-tempo time {
  color: var(--ink-faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
}

.cliente-linha-do-tempo li > div {
  display: grid;
  gap: 2px;
  padding-left: var(--e-3);
}

.cliente-linha-do-tempo strong,
.cliente-linha-do-tempo span,
.cliente-linha-do-tempo small {
  display: block;
}

.cliente-linha-do-tempo strong {
  font-size: var(--t-sm);
  font-weight: 600;
}

.cliente-linha-do-tempo span {
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.cliente-linha-do-tempo small {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.ficha-topo-acoes {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
}

.ficha-pegar {
  min-width: 150px;
}

@media (max-width: 760px) {
  .crm-pipeline {
    grid-auto-columns: minmax(76vw, 270px);
    margin-inline: calc(var(--e-4) * -1);
    padding-inline: var(--e-4);
    scroll-snap-type: x mandatory;
  }

  .cliente-cartao {
    padding: var(--e-4);
  }

  .cliente-cartao-dados {
    grid-template-columns: minmax(0, 1fr);
  }

  .cliente-cartao-dados p {
    padding: var(--e-2) 0;
  }

  .cliente-cartao-dados p + p {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .cliente-painel-topo {
    align-items: flex-start;
  }

  .cliente-responsavel {
    text-align: left;
  }

  .cliente-responsavel strong {
    justify-content: flex-start;
  }

  .cliente-metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .cliente-abrir {
    display: none;
  }

  .cliente-painel-topo,
  .cliente-servico-topo {
    flex-direction: column;
  }

  .cliente-servico-estado {
    text-align: left;
  }

  .cliente-linha-do-tempo li {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: var(--e-3);
  }

  .cliente-linha-do-tempo li::before {
    left: 80px;
  }

  .cliente-linha-do-tempo li::after {
    left: 76px;
  }

  .ficha-topo-acoes,
  .ficha-topo-acoes > .primary-button {
    width: 100%;
  }
}

/* ── Evolução operacional: filtros, comissão e aprovações ─────────────── */

.pipeline-filtros {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(130px, 1fr)) auto;
  gap: var(--e-2);
  align-items: end;
  margin: 0 0 var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
}

.pipeline-filtros label,
.aprovacao-decisao label {
  display: grid;
  min-width: 0;
  gap: var(--e-1);
}

.pipeline-filtros label > span,
.aprovacao-decisao label > span {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.pipeline-filtros input,
.pipeline-filtros select,
.aprovacao-comissao,
.aprovacao-motivo {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--ink);
}

.pipeline-limpar {
  min-height: 40px;
  white-space: nowrap;
}

.pipeline-servico {
  overflow: hidden;
  color: var(--teal-strong);
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-selo-adicional {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  background: var(--teal-wash);
  color: var(--teal-strong);
}

.crm-oportunidade,
.ficha-oportunidade {
  margin: var(--e-1) 0 0;
  color: var(--teal-strong);
  font-size: var(--t-sm);
  font-weight: 600;
}

.ficha-pendente {
  display: block;
  margin-top: var(--e-2);
  color: var(--warning);
}

.cliente-servico-prazo {
  margin: var(--e-2) 0 0;
  color: var(--teal-strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.orcamento-linha {
  grid-template-columns: minmax(220px, 1.5fr) 72px minmax(120px, 0.75fr) 104px 32px;
}

.orcamento-campo.is-valor {
  min-width: 120px;
}

.orcamento-preco-final,
.orcamento-comissao {
  font-variant-numeric: tabular-nums;
}

.producao-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--e-2);
}

.operacao-nota {
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: 1.65;
  max-width: 90ch;
  overflow-wrap: anywhere;
}
.operacao-guia details, details.operacao-guia {
  margin-top: var(--e-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--e-3);
}
.operacao-guia summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: var(--e-1);
}
.operacao-guia summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}
.operacao-guia li {
  margin-top: var(--e-2);
  line-height: 1.6;
}
.producao-filtros select { max-width: 100%; }

.aprovacoes-orcamento {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}

.aprovacoes-lista {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.aprovacao-cartao {
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--s-1);
}

.aprovacao-cartao > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
}

.aprovacao-cartao h3,
.aprovacao-cartao p {
  margin: var(--e-1) 0 0;
}

.aprovacao-cartao header p {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.aprovacao-cartao header > strong {
  color: var(--teal-strong);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

.aprovacao-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  margin: var(--e-3) 0 0;
}

.aprovacao-numeros > div {
  display: grid;
  gap: 2px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
}

.aprovacao-numeros dt {
  color: var(--ink-faint);
  font-size: var(--t-xs);
}

.aprovacao-numeros dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.aprovacao-motivos {
  margin: var(--e-3) 0 0;
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-6);
  border-left: 3px solid var(--warning);
  background: var(--warning-wash);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.aprovacao-decisao {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) minmax(240px, 1fr) auto;
  gap: var(--e-2);
  align-items: end;
  margin-top: var(--e-3);
}

.aprovacao-observacao {
  min-width: 0;
}

.aprovacao-acoes {
  display: flex;
  gap: var(--e-2);
}

@media (max-width: 900px) {
  .pipeline-filtros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-busca,
  .pipeline-limpar {
    grid-column: 1 / -1;
  }

  .aprovacao-decisao {
    grid-template-columns: minmax(130px, 0.5fr) minmax(200px, 1fr);
  }

  .aprovacao-acoes {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .orcamento-linha {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
    grid-template-areas:
      "item item tirar"
      "qtd comissao ."
      "preco preco .";
  }

  .orcamento-linha .orcamento-campo.is-curto:nth-of-type(2) {
    grid-area: qtd;
  }

  .orcamento-linha .orcamento-campo.is-valor:nth-of-type(3) {
    grid-area: preco;
  }

  .orcamento-linha .orcamento-campo.is-curto:nth-of-type(4) {
    grid-area: comissao;
  }

  .pipeline-filtros,
  .aprovacao-decisao,
  .aprovacao-numeros {
    grid-template-columns: minmax(0, 1fr);
  }

  .pipeline-busca,
  .pipeline-limpar,
  .aprovacao-acoes {
    grid-column: auto;
  }

  .pipeline-limpar {
    justify-self: start;
  }

  .aprovacao-cartao > header {
    flex-direction: column;
  }

  .aprovacao-acoes {
    justify-content: stretch;
  }

  .aprovacao-acoes > button {
    flex: 1;
  }

  .producao-filtros {
    width: 100%;
    justify-content: stretch;
  }

  .producao-filtros .placar-periodo {
    flex: 1 1 140px;
  }
}

/* ─── O que aconteceu com a proposta deste lead ───
   Tres estados e tres cores, porque a diferenca entre "esperando", "pode
   mandar" e "refaca" e' a unica coisa que a comercial precisa ler de relance. */
.ficha-proposta-pendente,
.ficha-proposta-aprovada,
.ficha-proposta-recusada {
  display: grid;
  gap: var(--e-1);
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.ficha-proposta-pendente {
  color: var(--warning);
}
.ficha-proposta-aprovada {
  color: var(--teal-strong);
}
.ficha-proposta-recusada {
  color: var(--danger);
}
/* O motivo em tom de texto comum: a cor ja' foi dada pela linha de cima, e
   repeti-la no paragrafo inteiro faria a frase mais importante ser a mais
   dificil de ler. */
.ficha-proposta-motivo {
  color: var(--ink-soft);
}
.aprovacao-ajuda {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--ink-faint);
}

/* O botao que prova a IA. Discreto: fica dentro da linha do painel, e so'
   aparece quando ha' provedor configurado para testar. */
.ia-sonda {
  margin-top: var(--e-1);
  padding: 0;
  font-size: var(--t-xs);
}
.ia-sonda[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ─── Rascunho da primeira mensagem ───
   Caixa a' parte da ficha: nao e' informacao sobre o lead, e' trabalho pronto
   esperando revisao. Por isso fundo proprio e borda cheia. */
.ficha-abertura-caixa {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.abertura-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}
.abertura-titulo {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.abertura-canais {
  display: flex;
  gap: var(--e-1);
}
.abertura-canal {
  padding: 6px 14px;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.abertura-canal.is-ativo {
  color: var(--teal-strong);
  border-color: var(--teal-strong);
  background: var(--teal-wash);
}
/* <pre> para o texto sair com as quebras que o modelo escreveu: paragrafo
   colado num bloco so' e' o que faz rascunho parecer robo. */
.abertura-texto {
  margin: 0;
  padding: var(--e-3);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface-strong);
  border-radius: var(--radius-small);
}
.abertura-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.abertura-origem {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.abertura-espera {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* ─── A agenda do dia ───
   Lista de tarefas, nao de registros: cada linha tem uma cor de entrada que
   diz a urgencia sem precisar ler, e o botao que resolve do lado direito. */
.agenda-secao {
  margin-bottom: var(--e-4);
}
.agenda-lista {
  display: grid;
  gap: var(--e-2);
}
.agenda-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--line);
  /* A barra da esquerda e' o unico lugar onde a cor faz trabalho aqui: diz a
     urgencia antes de a pessoa ler uma palavra. */
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.agenda-item.agenda-venceu {
  border-left-color: var(--danger);
}
.agenda-item.agenda-calou {
  border-left-color: var(--warning);
}
.agenda-item.agenda-novo {
  border-left-color: var(--teal-strong);
}
.agenda-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.agenda-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
}
.agenda-tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.agenda-empresa {
  font-size: var(--t-md);
  color: var(--ink);
}
.agenda-motivo {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.agenda-passo {
  font-size: var(--t-sm);
  color: var(--ink);
}
.agenda-sem-contato {
  font-size: var(--t-xs);
  color: var(--warning);
}
.agenda-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  flex: 0 0 auto;
}
.agenda-limpa,
.agenda-fila-curta {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.agenda-fila-curta {
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px dashed var(--line);
  color: var(--warning);
}
.agenda-erro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
}
.agenda-erro p { flex: 1 1 260px; }

@media (max-width: 640px) {
  /* No celular o botao ao lado do texto espremia a empresa em duas linhas. */
  .agenda-item {
    flex-direction: column;
    align-items: stretch;
  }
  .agenda-acoes button {
    flex: 1 1 0;
  }
}

/* Quantos leads o filtro deixou de fora. Sem isto a fila parece curta e a
   pessoa acha que perdeu lead. */
.crm-filtro-aviso {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}

/* ─── Uma carteira, duas formas ───
   O quadro e a lista eram duas caixas com os mesmos leads. Agora sao dois
   botoes: o filtro em cima governa os dois. */
.carteira-modos {
  display: flex;
  gap: var(--e-1);
  margin: var(--e-3) 0 var(--e-2);
}
.carteira-modo {
  padding: 7px 16px;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.carteira-modo.is-ativo {
  color: var(--teal-strong);
  border-color: var(--teal-strong);
  background: var(--teal-wash);
}

/* Os sinais propostos pela leitura, dentro da confirmacao do novo lead. */
.enquadrar-sinais {
  margin: 0;
  padding: var(--e-3) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.enquadrar-sinais legend {
  padding: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Item com preco e sem custo. Nao e' erro: e' a margem que nao vai aparecer. */
.preco-sem-custo {
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* ── ritmo vertical: uma volta pelo portal inteiro ─────────────────────

   O Gabriel apontou o cartao do balcao e disse "isso tem pelo portal todo" —
   e tinha. Os lugares abaixo empilhavam informacao com 2px ou 6px entre
   irmaos, que e' menos que a altura de uma letra minuscula: o olho le' tudo
   como um bloco so' e nao acha onde uma coisa acaba.

   Sao dois valores, nao quinze: 6px separa linhas da MESMA informacao (rotulo
   e valor), 12px separa informacoes DIFERENTES. Mais que isso vira decoracao;
   menos, vira bloco. */

/* a linha de acoes cola no texto acima dela */
.crm-acoes {
  gap: var(--e-1);
  margin-top: var(--e-2);
}

/* Os sinais do balcao saem como .crm-ultimo (a mesma classe do "ultimo
   contato"), entao ja' pegam o ritmo da regra acima. O que faltava era
   entrelinha: e' a linha mais longa do cartao e vinha em 1.4. */
.crm-lead .crm-ultimo {
  line-height: 1.5;
}

/* a agenda: eu mesmo escrevi 2px aqui, e e' pouco pelo mesmo motivo */
.agenda-texto {
  gap: 6px;
}
.agenda-item {
  padding: var(--e-3) var(--e-4);
}

/* o porque de cada sugestao: rotulo e frase sao a mesma informacao, mas
   precisam de mais que 2px para nao virar uma linha so' */
.sugestao-porques li {
  gap: 4px;
}
.sugestao-porques {
  gap: var(--e-2);
}

/* a ficha do lead: blocos diferentes encostados */
.ficha-bloco + .ficha-bloco {
  margin-top: var(--e-4);
}

/* "Por examinar" nao e' temperatura — e' trabalho a fazer. Por isso nao entra
   na escala quente/morno/frio: fica neutro, com a borda pontilhada de quem
   ainda nao tem resposta. */
.crm-selo-sem_leitura {
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line-strong);
}

/* O que a casa aprendeu. Medido e palpite precisam se distinguir de relance —
   e' a diferenca entre um numero em que se aposta e um que ainda nao vale. */
.aprendizado-lista {
  display: grid;
  gap: var(--e-2);
}
.aprendizado-base {
  margin: 0 0 var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.aprendizado-vazio {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--warning);
}
.aprendizado-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
}
.aprendizado-item.is-medido {
  border-left-color: var(--teal-strong);
}
.aprendizado-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.aprendizado-rotulo {
  font-size: var(--t-base);
  color: var(--ink);
}
.aprendizado-detalhe {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.aprendizado-peso {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  color: var(--teal-strong);
}
/* Palpite nao pode parecer medida. */
.aprendizado-peso.is-palpite {
  color: var(--ink-faint);
}

/* ── Atendimento ───────────────────────────────────────────── */
.nav-contador {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.nav-contador[hidden] { display: none; }
.mobile-nav button { position: relative; }
.mobile-nav .nav-contador { position: absolute; top: 3px; right: 8px; margin: 0; }

.atendimento { display: flex; flex-direction: column; gap: 14px; height: calc(100dvh - 190px); min-height: 460px; }
.atend-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.atend-chip {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
}
.atend-chip.is-ligado { border-color: transparent; background: var(--teal-wash); color: var(--teal-strong); font-weight: 600; }

.atend-colunas {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(250px, 320px) 1fr;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.atend-lista { overflow-y: auto; border-right: 1px solid var(--line); }
.atend-vazio { padding: 22px 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.atend-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.atend-item:hover { background: var(--surface-strong); }
.atend-item.is-aberta { background: var(--teal-wash); }
.atend-item-linha { display: flex; justify-content: space-between; gap: 10px; }
.atend-item-linha strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.atend-item-linha time { flex: none; color: var(--ink-faint); font-size: 11px; }
.atend-item-previa { overflow: hidden; color: var(--ink-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.atend-item-marcas { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 11px; }
.atend-item-marcas .is-aguardando { color: var(--coral); font-weight: 600; }
.atend-naolidas {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
}

.atend-detalhe { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.atend-detalhe[hidden] { display: none; }
.atend-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.atend-topo-titulo { display: grid; gap: 2px; min-width: 0; }
.atend-topo-titulo strong { font-size: 15px; }
.atend-topo-titulo span { color: var(--ink-soft); font-size: 12.5px; }
.atend-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.atend-modo { color: var(--ink-soft); font-size: 12px; }
.atend-voltar { display: none; }

.atend-mensagens { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; overflow-y: auto; }
.atend-balao { max-width: min(74%, 560px); padding: 9px 12px; border-radius: 12px; background: var(--surface-muted); }
.atend-balao p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.atend-balao small { display: block; margin-top: 4px; color: var(--ink-faint); font-size: 11px; }
.atend-balao.de-agente, .atend-balao.de-pessoa { align-self: flex-end; }
.atend-balao.de-agente { background: var(--teal-wash); }
.atend-balao.de-pessoa { background: var(--coral-wash); }
.atend-balao.de-sistema { align-self: center; max-width: 90%; background: var(--warning-wash); }
.atend-balao.de-sistema p { font-size: 12.5px; }

.atend-aviso { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--warning-wash); color: var(--warning); font-size: 12.5px; }
.atend-resposta { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.atend-resposta[hidden] { display: none; }
.atend-resposta textarea {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.atend-canais { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.atend-canais[hidden] { display: none; }
.atendimento.mostrando-canais { height: auto; }
.atendimento.mostrando-canais .atend-colunas { display: none; }
.atend-canais h3 { margin: 6px 0 0; font-size: 14px; }
.atend-canais-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atend-canais-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.atend-canais-form input { padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--surface-strong); color: var(--ink); font: inherit; font-weight: 400; }
.atend-canais-form small { color: var(--ink-faint); font-size: 11.5px; font-weight: 400; }
.atend-canais-form .primary-button { justify-self: start; }

@media (max-width: 820px) {
  .atend-canais-form { grid-template-columns: 1fr; }
  .atendimento { height: calc(100dvh - 200px); }
  .atend-colunas { grid-template-columns: 1fr; }
  .atend-lista { border-right: 0; }
  .atendimento.com-conversa .atend-lista { display: none; }
  .atendimento:not(.com-conversa) .atend-detalhe { display: none; }
  .atend-voltar { display: inline-flex; }
  .atend-balao { max-width: 88%; }
}
.crm-contato-retorno { margin: 8px 0 0; overflow-wrap: anywhere; }
.crm-contato-retorno[role="alert"] { color: var(--danger, #b42318); }