@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #06111a;
  --s1: #0a1c28;
  --s2: #0e2133;
  --s3: #12293f;
  --s4: #163048;
  --border: #1a3347;
  --border2: #1f3d55;
  --accent: #9fe5ac;
  --accent2: #b8edc2;
  --accent-g: linear-gradient(135deg, #9fe5ac, #5dcf72);
  --red: #f43f5e;
  --blue: #3b82f6;
  --text: #e8edf5;
  --text2: #94a3b8;
  --text3: #5d7f8f;
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb: 220px;
  --brand-dark: #0e2d43;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font);
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 13px;
}

a {
  color: var(--accent);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--s1);
  border: 1px solid var(--border);
  padding: 2.5rem;
  border-radius: 20px;
  width: 100%;
  max-width: 380px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-g);
}

.login-card h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.4px;
}

.login-card label {
  display: block;
  margin-top: 1rem;
  font-size: 0.7rem;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-card input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-top: 0.4rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}

.login-card input:focus {
  border-color: var(--accent);
}

.login-card input::placeholder {
  color: var(--text3);
}

.login-card button {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.8rem;
  background: var(--accent-g);
  color: var(--brand-dark);
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.login-card button:hover {
  opacity: 0.87;
  transform: translateY(-1px);
}

.error-message {
  color: var(--red);
  margin-top: 0.8rem;
  font-size: 0.8rem;
  min-height: 1rem;
}

.success-message {
  color: var(--accent);
  margin-top: 0.8rem;
  font-size: 0.8rem;
  min-height: 1rem;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.sidebar {
  width: var(--sb);
  flex-shrink: 0;
  background: var(--s1);
  color: var(--text);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.2s ease;
  z-index: 20;
}

.sidebar.collapsed {
  width: 54px;
}

.sidebar-brand {
  flex-shrink: 0;
  padding: 1.5rem 1.1rem;
  font-weight: 800;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.4;
}

.sidebar-brand-full {
  display: block;
}

.sidebar-brand-short {
  display: none;
  color: var(--accent);
}

.sidebar.collapsed .sidebar-brand-full {
  display: none;
}

.sidebar.collapsed .sidebar-brand-short {
  display: block;
}

.sidebar-brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}

.sidebar-brand-logo-short {
  height: 32px;
}

.sidebar-brand-slogan {
  margin-top: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  white-space: normal;
  line-height: 1.3;
}

.sidebar-nav {
  flex: 1;
  padding: 0.6rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar-section-title {
  padding: 0.4rem 0.7rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-section-title {
  display: none;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--text3);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.85rem;
  transition: background 0.12s, color 0.12s;
}

.sidebar-link:hover {
  background: var(--s3);
  color: var(--text);
}

.sidebar-link.active {
  background: rgba(159, 229, 172, 0.12);
  color: var(--accent2);
  font-weight: 600;
}

.sidebar-icon {
  display: flex;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-label {
  display: none;
}

.sidebar-collapse-btn {
  margin: 0.7rem;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text3);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, border-color 0.12s;
}

.sidebar-collapse-btn:hover {
  color: var(--text);
  border-color: var(--border2);
}

.sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.5rem;
  background: var(--s2);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text3);
  flex-shrink: 0;
}

.status-bar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(159, 229, 172, 0.15);
}

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  height: 52px;
  flex-shrink: 0;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  margin-right: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.header-menu-dropdown {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-user-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
}

.header-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
}

.header-link:hover {
  text-decoration: underline;
}

/* Acesso rapido a Caixa de Entrada no topo (pedido do usuario): mesma
   posicao/altura do CTA "+ Lead" ao lado, mas com peso visual secundario
   (pill suave com o verde da marca) -- fica sempre visivel em qualquer tela
   do CRM, sem precisar abrir o menu lateral. */
.btn-header-inbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: rgba(159, 229, 172, 0.12);
  border: 1px solid rgba(159, 229, 172, 0.35);
  color: var(--accent2);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.btn-header-inbox svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-header-inbox:hover {
  background: rgba(159, 229, 172, 0.22);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.btn-header-cta {
  background: var(--accent-g);
  color: var(--brand-dark);
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: opacity 0.15s, transform 0.15s;
}

.btn-header-cta:hover {
  opacity: 0.87;
  transform: translateY(-1px);
}

.btn-header-logout {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text3);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.btn-header-logout:hover {
  color: var(--red);
  border-color: var(--red);
}

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 15;
}

.mobile-backdrop.visible {
  display: block;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    width: 220px !important;
    transition: transform 0.2s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar .sidebar-label,
  .sidebar .sidebar-brand-full {
    display: inline !important;
  }

  .sidebar .sidebar-brand-short {
    display: none !important;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  /* So o icone no celular -- economiza espaco ao lado do "+ Lead" e do menu
     "..." no cabecalho, que ja disputam a mesma faixa estreita. */
  .btn-header-inbox span {
    display: none;
  }

  .btn-header-inbox {
    padding: 0.5rem 0.6rem;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .header-user-name {
    display: none;
  }

  .header-menu-btn {
    display: inline-flex;
  }

  .header-menu-dropdown {
    display: none;
    position: absolute;
    top: 52px;
    right: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--s1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 50;
  }

  .header-menu-dropdown.open {
    display: flex;
  }

  /* Tabelas viram cards empilhados no celular -- sem arrastar pro lado, com
     area de toque maior nos botoes de acao. O rotulo de cada valor vem do
     data-label do <td> (renderizado pelo JS), nao existe no HTML estatico. */
  .table-scroll {
    overflow-x: visible;
  }

  .leads-table thead {
    display: none;
  }

  .leads-table,
  .leads-table tbody,
  .leads-table tr,
  .leads-table td {
    display: block;
    width: 100%;
  }

  .leads-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.3rem 0.9rem;
    background: var(--s1);
  }

  .leads-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }

  .leads-table td:has(input[type="checkbox"]) {
    justify-content: flex-start;
  }

  .leads-table tr > td:last-child {
    border-bottom: none;
  }

  .leads-table td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text3);
    text-align: left;
    flex-shrink: 0;
  }

  .leads-table tr > td:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .leads-table tr > td:last-child::before {
    content: none;
  }

  .leads-table tr > td:last-child button,
  .leads-table tr > td:last-child a {
    flex: 1 1 auto;
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border2);
    border-radius: 8px;
    text-decoration: none;
    background: var(--s2);
  }
}

.dashboard {
  --bg: #f7f9fb;
  --s1: #ffffff;
  --s2: #f3f5f8;
  --s3: #eef1f5;
  --s4: #e6eaef;
  --border: #e3e8ee;
  --border2: #d2dae2;
  --text: #101828;
  --text3: #64748b;
  --accent: #178a44;
  --accent2: #178a44;
  --red: #be123c;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  color: var(--text);
  flex: 1;
}

.dashboard h1 {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.dashboard .login-card h1 {
  text-align: center;
  font-size: 1.5rem;
}

.leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.leads-toolbar h1 {
  margin-bottom: 0;
}

.leads-toolbar button {
  background: var(--accent-g);
  color: var(--brand-dark);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.leads-toolbar-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.leads-toolbar .btn-secondary {
  background: var(--s3);
  color: var(--text);
  border: 1px solid var(--border);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.leads-toolbar .btn-secondary:hover {
  border-color: var(--border2);
  color: var(--accent);
}

.lead-form {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: none;
}

.lead-form.visible {
  display: block;
}

.merge-results {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}

.merge-result-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.merge-result-item:hover {
  border-color: var(--accent);
}

.merge-result-item span {
  font-size: 0.75rem;
  color: var(--text3);
}

.merge-selected {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(159, 229, 172, 0.08);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 0.8rem;
}

.oneoff-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  max-height: 220px;
  overflow-y: auto;
}

/* Vinculos sugeridos entre canais (Fase C -- identidade entre WhatsApp e
   Instagram) -- mesma linguagem visual de .merge-result-item, so com os
   dois leads lado a lado e acoes de confirmar/rejeitar. */
.link-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.link-suggestion-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  flex-wrap: wrap;
}

.link-suggestion-leads {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.link-suggestion-lead {
  font-size: 0.82rem;
  color: var(--text);
}

.link-suggestion-lead span {
  display: block;
  font-size: 0.72rem;
  color: var(--text3);
}

.link-suggestion-match {
  font-size: 0.75rem;
  color: var(--text3);
}

.link-suggestion-actions {
  display: flex;
  gap: 0.5rem;
}

.oneoff-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.oneoff-item-name {
  flex: 1;
  font-size: 0.85rem;
}

.oneoff-item-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.oneoff-item-date {
  font-size: 0.75rem;
  color: var(--text3);
}

.btn-delete-oneoff {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--red);
  text-decoration: underline;
}

.lead-form h2 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 700;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.lead-form label {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.35rem;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  outline: none;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--accent);
}

.lead-form-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.7rem;
}

.lead-form-actions button,
.btn-primary,
.btn-secondary {
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--accent-g);
  color: var(--brand-dark);
}

.btn-primary:hover {
  opacity: 0.87;
}

.btn-secondary {
  background: var(--s3);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--border2);
  color: var(--accent);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.leads-table {
  width: 100%;
  border-collapse: collapse;
}

.leads-table th,
.leads-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.leads-table th {
  color: var(--text3);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.leads-table td {
  color: var(--text);
}

.leads-table tr:hover td {
  background: rgba(16, 24, 40, 0.035);
}

.leads-table tr.row-highlight td {
  background: rgba(159, 229, 172, 0.18);
  transition: background 0.3s ease;
}

.leads-table button,
.leads-table td a {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  color: var(--text3);
  text-decoration: underline;
}

.leads-table button:hover,
.leads-table td a:hover {
  color: var(--text);
}

.leads-table .btn-delete {
  color: var(--red);
}

.leads-table .btn-promote {
  color: var(--accent);
  font-weight: 700;
}

.leads-table .btn-complete-task {
  color: var(--accent);
  font-weight: 700;
}

.leads-table .btn-complete-task.is-done {
  color: var(--text3);
  font-weight: 400;
}

/* "Ver mensagem" (pedido do usuario): destacado do resto das acoes, que sao
   so links de texto sublinhado -- vira um botao-pilula com icone do canal,
   pra ser a acao mais facil de notar/clicar na linha (a mais usada no dia a
   dia: abrir a conversa do lead). */
.leads-table .btn-view-message {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  margin-right: 0.6rem;
  border-radius: 999px;
  background: rgba(159, 229, 172, 0.14);
  border: 1px solid rgba(23, 138, 68, 0.35);
  color: var(--accent2);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.leads-table .btn-view-message svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.leads-table .btn-view-message:hover {
  background: rgba(159, 229, 172, 0.28);
  border-color: var(--accent2);
  color: var(--accent2);
  transform: translateY(-1px);
}

.leads-table .btn-view-message:active {
  transform: translateY(0);
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  background: rgba(159, 229, 172, 0.12);
  color: var(--accent2);
  font-weight: 600;
}

.status-badge-inactive {
  background: rgba(190, 18, 60, 0.08);
  color: var(--red);
}

.status-badge-warm {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.status-badge-cold {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text3);
}

.role-select {
  padding: 0.35rem 0.5rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font);
}

.btn-toggle-active {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text3);
  text-decoration: underline;
}

.btn-toggle-active:hover {
  color: var(--red);
}

.btn-toggle-active:disabled {
  color: var(--border2);
  cursor: not-allowed;
  text-decoration: none;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--text3);
}

.kanban-board {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.kanban-column {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 260px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Sem isso, a coluna cresce sem limite conforme ganha cards, e a barra de
     rolagem horizontal do .kanban-board (que fica embaixo da coluna mais alta)
     acaba fora da tela, so alcancavel depois de rolar a pagina inteira pra
     baixo -- cada coluna passa a rolar so os proprios cards, mantendo o
     scroll lateral sempre visivel logo abaixo do cabecalho das colunas.
     230px ~= cabecalho/status-bar (78px) + toolbar "Pipeline" + padding da
     pagina acima do board. */
  max-height: calc(100vh - 230px);
}

.kanban-column.drag-over {
  background: rgba(159, 229, 172, 0.05);
  outline: 2px dashed var(--accent);
}

/* Etapa automation_mode='event' -- so um indicativo visual (cadeado no
   titulo, cabecalho levemente diferenciado); o bloqueio de verdade e sempre
   no servidor (dealsController.js::updateDeal). */
.kanban-column-event-gated .kanban-column-header {
  background: var(--s2);
}

/* Painel de orientacao (Fase B.2) -- mesmo padrao do resto do app (bloco
   dedicado, sem modal/toast generico) mostrado quando o usuario tenta
   arrastar pra uma etapa controlada por evento. */
.stage-guidance-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
}

.stage-guidance-text strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.stage-guidance-text p {
  font-size: 0.8rem;
  color: var(--text2);
  margin: 0;
}

.stage-guidance-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.kanban-column-header {
  padding: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.kanban-column-header h3 {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 700;
}

.kanban-column-header .kanban-column-meta {
  font-size: 0.7rem;
  color: var(--text3);
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-column-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text3);
  text-decoration: underline;
  margin-left: 0.4rem;
}

.kanban-column-body {
  padding: 0.6rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.kanban-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.7rem;
  cursor: grab;
  transition: border-color 0.12s;
}

.kanban-card:hover {
  border-color: var(--accent);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.45;
}

.kanban-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.kanban-card-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
}

.kanban-value-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text);
  background: var(--s3);
  white-space: nowrap;
}

.kanban-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.kanban-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.kanban-card-lead {
  color: var(--text3);
  font-size: 0.75rem;
  margin-top: 0.35rem;
}

.kanban-card-proposal {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.kanban-card-proposal a {
  color: var(--text3);
  text-decoration: underline;
}

.kanban-card-proposal a:hover {
  color: var(--text);
}

.kanban-card-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.6rem;
}

.kanban-card-actions button,
.kanban-card-actions a {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--text3);
  text-decoration: underline;
  padding: 0;
}

.kanban-card-actions button:hover,
.kanban-card-actions a:hover {
  color: var(--text);
}

.agenda-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.agenda-toolbar h1 {
  margin-right: auto;
}

.agenda-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agenda-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}

.agenda-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.agenda-month-label {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 140px;
  text-align: center;
}

@media (max-width: 480px) {
  .agenda-month-label {
    min-width: 0;
    font-size: 0.85rem;
  }

  .agenda-nav {
    gap: 0.35rem;
  }
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.agenda-weekday {
  background: var(--s2);
  padding: 0.5rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}

.agenda-day-cell {
  background: var(--s1);
  min-height: 108px;
  min-width: 0;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.agenda-day-cell.other-month {
  background: var(--bg);
}

.agenda-day-cell.other-month .agenda-day-number {
  color: var(--text3);
}

.agenda-day-number {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
}

.agenda-day-cell.today .agenda-day-number {
  background: var(--accent);
  color: var(--brand-dark);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agenda-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.agenda-event-chip {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--s3);
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-event-chip:hover {
  background: var(--s4);
}

.agenda-event-chip.cancelado {
  border-left-color: var(--text3);
  color: var(--text3);
  text-decoration: line-through;
}

.agenda-event-more {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.65rem;
  color: var(--text3);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
}

.agenda-event-more:hover {
  color: var(--text);
}

.agenda-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.agenda-detail-row:last-of-type {
  border-bottom: none;
}

.agenda-detail-row span:first-child {
  color: var(--text3);
  flex-shrink: 0;
}

.agenda-detail-row span:last-child {
  text-align: right;
}

.kanban-card-actions .btn-delete {
  color: var(--red);
}

.stage-manager-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.stage-manager-row input {
  flex: 1;
  padding: 0.45rem 0.6rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font);
}

.stage-manager-row button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text3);
  text-decoration: underline;
}

.stage-manager-row button:hover {
  color: var(--text);
}

.stage-manager-row .btn-delete {
  color: var(--red);
}

.template-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.template-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}

.template-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text3);
}

.template-card-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.15rem;
}

.template-card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent2);
  padding: 0;
}

.template-card-actions button:hover {
  text-decoration: underline;
}

.template-card-actions .btn-delete {
  color: var(--red);
}

.task-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.task-filters label {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.35rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.task-filters select {
  padding: 0.5rem 0.6rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.8rem;
  min-width: 180px;
  font-family: var(--font);
}

.task-overdue {
  color: var(--red);
  font-weight: 700;
}

.task-done-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.task-row-done td {
  color: var(--text3);
  text-decoration: line-through;
}

/* Grid de verdade, nao flex -- com flex:1 + min-width, um 5o/6o card de
   destaque nao quebrava de forma confiavel pra segunda linha (chegava a
   ficar cortado na borda da tela, bug real reportado pelo usuario). Grid com
   4 colunas fixas garante no maximo 4 por fila sempre, sobrando pra proxima
   linha automaticamente. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}

@media (max-width: 900px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
}

.kpi-tile {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  overflow: hidden;
}

.kpi-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-g);
}

.kpi-tile-warning::before {
  background: var(--red);
}

.kpi-value {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -1px;
  line-height: 1.1;
}

.kpi-label {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.kpi-sublabel {
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 600;
  margin-top: 0.15rem;
}

.kpi-tile-warning .kpi-sublabel {
  color: var(--red);
}

/* Dashboard Executivo (Fase 1, operador unico, 2026-07-28) -- cada card
   responde UMA pergunta (nunca so um numero solto): pergunta em cima,
   resposta grande, 1 linha de contexto embaixo. */
.dashboard-answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.answer-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}

.answer-question {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.answer-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.answer-detail {
  font-size: 0.8rem;
  color: var(--text2);
}


.kpi-tile-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.kpi-tile-link:hover {
  border-color: var(--accent-g);
  transform: translateY(-1px);
}

.dashboard-section {
  margin-bottom: 2.2rem;
}

.dashboard-section h2 {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 700;
}

.dashboard-section-subtitle {
  font-size: 0.8rem;
  color: var(--text3);
  margin: -0.6rem 0 1rem;
}

/* Observabilidade da Sofia -- reusa .kpi-tile/.status-badge ja existentes,
   so acrescenta o que e proprio dessa tela (banner de saude, alertas,
   seletores de periodo/metrica, paginacao de logs). */
.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-section-header h2,
.dashboard-section-header h3 {
  margin-bottom: 0;
}

.so-health-banner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.so-health-banner .status-badge {
  font-size: 0.95rem;
  padding: 0.4rem 0.9rem;
}

.so-health-percent {
  font-size: 0.85rem;
  color: var(--text3);
  font-weight: 600;
}

.so-alerts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.so-alerts-list li {
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  border-left: 4px solid var(--red);
  background: rgba(190, 18, 60, 0.06);
  color: var(--text);
}

.so-alerts-list li.so-alert-yellow {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.so-period-select {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-size: 0.8rem;
}

.so-chart-controls,
.so-logs-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.so-logs-search {
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-size: 0.8rem;
  min-width: 220px;
}

.so-logs-pagination {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text3);
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-section-header h2,
.dashboard-section-header h3 {
  margin-bottom: 0;
}

.stat-tiles-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat-tile {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}

.stat-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-g);
}

.stat-tile-label {
  font-size: 0.65rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.stat-tile-value {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.5px;
}

.stat-tile-critical {
  color: var(--red);
}

.pipeline-bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pipeline-bar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pipeline-bar-label {
  width: 160px;
  font-size: 0.85rem;
  color: var(--text);
  flex-shrink: 0;
}

.pipeline-bar-track {
  flex: 1;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 26px;
  overflow: hidden;
}

.pipeline-bar-fill {
  background: var(--accent-g);
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.pipeline-bar-value {
  width: 140px;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

.range-toggle {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.range-toggle-btn {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text3);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
}

.range-toggle-btn:hover {
  border-color: var(--border2);
}

.range-toggle-btn.active {
  background: var(--accent-g);
  color: var(--brand-dark);
  border-color: transparent;
}

/* Filtro de data personalizada (Anuncios, 2026-08-12) -- fora de um
   .lead-form, entao os inputs de data ganham estilo proprio aqui, espelhando
   .lead-form input acima (mesmas variaveis de cor/borda/raio). */
.ads-custom-range {
  display: none;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ads-custom-range.visible {
  display: flex;
}

.ads-custom-range label {
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.35rem;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ads-custom-range input[type="date"] {
  padding: 0.55rem 0.7rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  outline: none;
}

.ads-custom-range input[type="date"]:focus {
  border-color: var(--accent);
}

.reports-chart {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  overflow-x: auto;
}

.reports-chart svg {
  display: block;
  overflow: visible;
}

.reports-bar {
  fill: var(--accent);
  transition: opacity 0.15s ease;
}

.reports-bar:hover {
  opacity: 0.75;
}

.reports-bar-label {
  fill: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}

.reports-axis-label {
  fill: var(--text3);
  font-size: 9px;
  text-anchor: middle;
}

.reports-baseline {
  stroke: var(--border);
  stroke-width: 1;
}

/* Business Health Score (Fase 2.1, Business Health Engine, 2026-07-29) --
   nota total + composicao por componente (nunca so um numero solto, mesmo
   principio dos cards de "O que decidir agora"). */
.health-score-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
}

.health-score-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.health-score-score-group {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.health-score-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent2);
  line-height: 1;
}

.health-score-max {
  font-size: 1.1rem;
  color: var(--text3);
  font-weight: 600;
}

.health-score-total .status-badge {
  margin-left: auto;
}

.health-score-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}

.health-score-component-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.health-score-component-bar-track {
  height: 8px;
  background: var(--s3);
  border-radius: 4px;
  overflow: hidden;
}

.health-score-component-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.health-score-component-bar-fill.health-score-weak {
  background: var(--red);
}

.health-score-component-explanation {
  font-size: 0.75rem;
  color: var(--text3);
  margin-top: 0.3rem;
}

.health-score-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 0.8rem;
}

/* Nota (problema/destaque) e acao recomendada precisam chamar mais atencao
   que os componentes (achado de QA, 2026-07-29 -- antes tinham MENOS peso
   visual que a lista de componentes, o oposto do esperado). Mesmas cores
   semanticas ja usadas em .so-alerts-list (vermelho) e reaproveitadas aqui
   como utilitarias, pra nao duplicar o mesmo rgba em 3 lugares. */
.health-score-tint-positive {
  background: rgba(159, 229, 172, 0.12);
  border-left: 4px solid var(--accent);
}

.health-score-tint-negative {
  background: rgba(190, 18, 60, 0.06);
  border-left: 4px solid var(--red);
}

.health-score-note {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
}

.health-score-note-label {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.health-score-action {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.health-score-trend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text3);
}

.health-score-trend strong {
  color: var(--text);
}

.health-score-trend-empty {
  font-style: italic;
}

@media (max-width: 480px) {
  .health-score-total {
    flex-wrap: wrap;
  }

  .health-score-total .status-badge {
    margin-left: 0;
  }
}

/* Terceiro tint semantico (amber/atencao) -- mesma cor ja usada em
   .so-alerts-list li.so-alert-yellow, so como utilitaria reaproveitavel fora
   daquele contexto especifico (evita uma 4a paleta de cor pra "atencao"). */
.health-score-tint-warning {
  background: rgba(217, 119, 6, 0.08);
  border-left: 4px solid #d97706;
}

/* Executive Insights (Fase 2.2.c, Executive Insights Engine, 2026-07-29) --
   hero insight em destaque + grid de cards compactos (critico/evolucao/
   tendencia), com hierarquia capada no JS (1 hero, ate 2 criticos, ate 2
   evolucoes, 1 tendencia) -- o resto fica atras do botao "Ver mais". */
.executive-hero-card {
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.1rem;
}

.executive-hero-label {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.executive-hero-summary {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin: 0.3rem 0 0.4rem;
}

.executive-hero-action {
  font-size: 0.9rem;
  color: var(--text3);
}

.executive-hero-empty {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.1rem;
  color: var(--text3);
  font-size: 0.9rem;
}

.executive-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.executive-insights-hidden {
  margin-top: 1rem;
}

.executive-insight-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.executive-insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.executive-insight-title {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.executive-insight-summary {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.executive-insight-explanation {
  font-size: 0.78rem;
  color: var(--text3);
}

#executive-insights-toggle {
  margin-top: 1rem;
}

.wa-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* .dashboard aplica flex:1 (flex-basis:0%) no mesmo elemento, o que ignora
     qualquer height explicito no calculo de tamanho do item flex -- precisa
     cancelar isso aqui pra altura abaixo realmente valer. */
  flex: none;
  /* Sem isso, o painel de mensagens nunca tem um teto de altura real pra
     estourar contra -- em vez de rolar so por dentro (como o WhatsApp Web),
     a pagina inteira crescia conforme a conversa tinha mais mensagens.
     78px = altura da status-bar (~26px) + do cabecalho (52px). */
  height: calc(100vh - 78px);
  overflow-y: auto;
}

/* .wa-main fica com altura travada tanto no desktop quanto no mobile de
   proposito -- e o flex:1 do .wa-thread (regra base) que distribui o
   espaco restante depois da lista de conversas empilhada no celular.
   Uma tentativa anterior de "desfazer" isso so no mobile usando altura
   auto/overflow visible recriou o bug original (pagina crescendo sem fim
   numa conversa longa) -- o .wa-messages so rola por dentro se tudo acima
   dele, ate o .wa-main, tiver um teto real de altura. */

.wa-layout {
  display: flex;
  gap: 1rem;
  flex: 1;
  /* Pedido do usuario (2026-07-24, ajustado de novo no mesmo dia -- 78vh
     ainda nao dava pra ver pelo menos 3 mensagens). flex:1 ja estica pra
     ocupar o espaco sobrando de .wa-main, mas esse piso minimo garante uma
     area de conversa generosa mesmo em janelas mais baixas. */
  min-height: 85vh;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--s1);
}

.wa-conversation-list {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--s1);
}

.wa-conversation-search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  color: var(--text3);
}

.wa-conversation-search svg {
  flex-shrink: 0;
}

.wa-conversation-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 0.82rem;
  color: var(--text);
  font-family: var(--font);
}

.wa-conversation-search input::placeholder {
  color: var(--text3);
}

.wa-conversation-item {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.wa-conversation-item:hover {
  background: var(--s2);
}

.wa-conversation-item.active {
  background: rgba(159, 229, 172, 0.08);
  border-left: 2px solid var(--accent);
}

.wa-conversation-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.channel-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

.channel-icon svg {
  width: 14px;
  height: 14px;
}

#inbox-thread-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wa-conversation-phone {
  font-size: 0.7rem;
  color: var(--text3);
  margin-top: 0.15rem;
}

.wa-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative; /* ancora .wa-drop-overlay (drag-and-drop de anexo) */
  /* Mesmo motivo do min-height:0 em .wa-messages logo abaixo -- sem isso,
     esta coluna tambem se recusa a encolher abaixo da altura natural do
     conteudo (cabecalho + stats + analise da Sofia + mensagens + formulario
     somados), empurrando tudo pra fora da tela em vez de deixar so
     .wa-messages rolar por dentro. */
  min-height: 0;
}

/* Overrides de mobile pra .wa-layout/.wa-conversation-list precisam ficar
   AQUI (depois das regras base acima), nao la em cima no bloco de media
   query geral do topo do arquivo -- as duas tem a mesma especificidade
   (uma classe so), e quem vem por ultimo no arquivo e que vale. Um
   override no bloco do topo nunca teve efeito nenhum nessas duas classes
   especificas (bug real, custou uma rodada de investigacao pra achar). */
@media (max-width: 768px) {
  .wa-layout {
    flex-direction: column;
    min-height: 0;
  }

  .wa-conversation-list {
    width: 100%;
    max-height: 240px;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* .wa-thread ja tem min-width:0 (precisa disso no desktop, onde
     .wa-layout e uma linha) -- no celular .wa-layout vira coluna, entao o
     eixo que precisa poder encolher e a altura, nao a largura. Sem isso o
     .wa-thread nao encolhe pro espaco restante depois da lista de
     conversas, e o .wa-messages nunca chega a rolar por dentro. */
  .wa-thread {
    min-height: 0;
  }
}

.wa-back-btn {
  display: none;
}

/* No celular, lista + thread empilhados dividindo a mesma altura fixa
   deixava a area de mensagens com uma fatia minima (~140px numa tela de
   844px) -- praticamente ilegivel. Igual todo app de chat mobile, abrir uma
   conversa agora esconde a lista e a thread ocupa a tela toda; o botao
   voltar (so existe visualmente no celular) fecha a conversa e volta pra
   lista. Especificidade de .thread-open ja garante que isso ganha da regra
   base de cima, sem precisar se preocupar com ordem no arquivo. */
@media (max-width: 768px) {
  .wa-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
  }

  .wa-layout:not(.thread-open) .wa-thread {
    display: none;
  }

  .wa-layout.thread-open .wa-conversation-list {
    display: none;
  }

  .wa-layout.thread-open .wa-thread {
    flex: 1;
    min-height: 0;
  }
}

.wa-thread-header {
  /* Reduzido de 0.7rem pra dar mais espaco pra .wa-messages (pedido do
     usuario, 2026-07-24) -- o cabecalho tem 2 linhas (titulo + acoes) na
     maioria das conversas, entao um padding menor ja economiza bastante
     altura acumulada. */
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  gap: 1rem;
  background: var(--s1);
}

.wa-thread-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.wa-thread-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Botoes de acao da conversa (Enviar Proposta/Sugestao/Analisar/Encerrar/
   Excluir) sao varios e costumam quebrar em 2 linhas -- reduzidos so aqui
   (nunca no .btn-secondary global, usado no resto do CRM) pra economizar
   altura real acima de .wa-messages (pedido do usuario, 2026-07-24). */
.wa-thread-header-actions .btn-secondary {
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
}

/* No celular a linha de titulo + a linha de acoes (Sofia/Encerrar/Excluir)
   juntas eram mais largas que a tela; com flex-wrap sozinho os dois grupos
   tentavam continuar lado a lado e o texto de um sobrepunha o outro (bug
   real reportado pelo usuario -- nome do lead ilegivel). Forcando a linha de
   acoes pra sua propria largura total, ela sempre cai pra uma linha nova
   abaixo do titulo, nunca dividindo espaco com ele. */
@media (max-width: 768px) {
  .wa-thread-header-actions {
    flex-basis: 100%;
  }
}

.wa-thread-stats {
  padding: 0.3rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--s2);
  font-size: 0.72rem;
  color: var(--text3);
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.wa-commercial-analysis {
  margin: 0.5rem 0.9rem;
  padding: 0.5rem 0.9rem;
  background: rgba(159, 229, 172, 0.08);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text);
  /* Nunca deixa a analise sozinha tomar mais que ~40% da altura da coluna de
     mensagens -- se o texto for longo, rola so por dentro dela (pedido do
     usuario: a analise nao pode "tampar" a conversa). Botao de recolher
     abaixo ainda permite esconder o texto todo quando quiser mais espaco. */
  max-height: 40vh;
  overflow-y: auto;
  flex-shrink: 0;
}

/* Recolhida (so a linha de titulo + "Mostrar" visivel), o box nao precisa do
   mesmo respiro vertical de quando esta mostrando o texto da analise --
   reduz ainda mais o espaco que sobra pra .wa-messages (pedido do usuario,
   2026-07-24: area de conversa aparecia pequena demais). */
.wa-commercial-analysis.collapsed {
  margin: 0.4rem 0.9rem;
  padding: 0.4rem 0.9rem;
}

.wa-commercial-analysis-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wa-commercial-analysis-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text3);
  text-decoration: underline;
  flex-shrink: 0;
}

.wa-commercial-analysis-toggle:hover {
  color: var(--accent2);
}

.wa-commercial-analysis.collapsed .wa-commercial-analysis-body,
.wa-commercial-analysis.collapsed .wa-commercial-analysis-csat {
  display: none;
}

/* Prazo pra nao esfriar (dentro de .wa-thread-stats, ao lado das outras
   metricas) -- neutro por padrao, vira amber/vermelho quando urgente ou ja
   passou do prazo, pra chamar atencao sem depender so do texto. */
.wa-thread-stat-deadline {
  font-weight: 600;
  color: var(--text3);
}

.wa-thread-stat-deadline.urgent {
  color: var(--red);
}

/* Sugestao de resposta da Sofia (Caixa de Entrada) -- mesma linguagem visual
   da analise comercial (fundo verde suave, borda solida), mas fica colada
   no rodape, perto de onde o humano vai realmente agir (digitar/enviar). */
.wa-suggestion-box {
  margin: 0 0.9rem 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(159, 229, 172, 0.08);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text);
}

.wa-suggestion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wa-suggestion-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text3);
  flex-shrink: 0;
}

.wa-suggestion-close:hover {
  color: var(--text);
}

.wa-suggestion-text {
  white-space: pre-wrap;
  margin-bottom: 0.6rem;
}

.wa-suggestion-actions {
  display: flex;
  justify-content: flex-end;
}

.wa-suggestion-actions .btn-primary {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

.wa-commercial-analysis-csat {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text3);
}

#wa-thread-sofia-toggle {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

#wa-sofia-settings-section textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  resize: vertical;
}

#wa-sofia-settings-section label {
  display: block;
  font-size: 0.75rem;
  color: var(--text3);
  margin-bottom: 0.3rem;
}

.wa-messages {
  flex: 1;
  /* min-height:0 (em vez de auto) e o que permite este item encolher quando
     o resto do .wa-thread (cabecalho/stats/analise) precisa de mais espaco
     -- sem isso, uma analise comercial longa empurrava a area de mensagens
     pra fora da tela em vez de rolar so por dentro (bug real reportado pelo
     usuario, 2026-07-22). O piso de 200px abaixo garante uma area minima
     sempre visivel (pedido do usuario, 2026-07-24: precisa ver pelo menos 3
     mensagens) sem abrir mao desse comportamento de encolher quando precisa. */
  min-height: 200px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg);
}

.wa-message {
  max-width: 65%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.wa-message-in {
  align-self: flex-start;
  background: var(--s3);
  color: var(--text);
  border-bottom-left-radius: 3px;
}

.wa-message-out {
  align-self: flex-end;
  background: rgba(159, 229, 172, 0.12);
  border: 1px solid rgba(159, 229, 172, 0.25);
  color: var(--accent2);
  border-bottom-right-radius: 3px;
}

.wa-message-time {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 0.2rem;
}

.wa-message-media img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.3rem;
}

.wa-message-media audio {
  max-width: 100%;
  margin-bottom: 0.3rem;
}

.wa-send-form {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
  background: var(--s1);
}

.wa-send-attach-wrap {
  position: relative;
  display: flex;
}

.wa-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--text3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wa-icon-btn:hover {
  color: var(--accent2);
  border-color: var(--border2);
  background: var(--s3);
}

.wa-icon-btn svg {
  display: block;
}

.wa-emoji-picker {
  position: absolute;
  bottom: 2.7rem;
  left: 0;
  width: 220px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.wa-emoji-picker button {
  background: none;
  border: none;
  font-size: 1.15rem;
  line-height: 1.4;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
}

.wa-emoji-picker button:hover {
  background: var(--s3);
}

.wa-send-form input {
  flex: 1;
  padding: 0.55rem 0.7rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

/* Aparece sobre a area de mensagens enquanto um arquivo e arrastado sobre a
   conversa (drag-and-drop) -- some assim que o arquivo e solto ou o drag
   sai da area. */
.wa-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(159, 229, 172, 0.12);
  border: 2px dashed var(--accent2);
  border-radius: 8px;
  color: var(--accent2);
  font-size: 0.95rem;
  font-weight: 600;
  pointer-events: none;
}

/* Barra de preview antes de enviar (imagem/PDF colado, arrastado ou
   selecionado) -- pedido do usuario (2026-07-29): nunca envia direto, sempre
   com um passo de confirmacao/legenda no meio. */
.wa-attachment-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
  background: var(--s2);
}

.wa-attachment-preview-thumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text2);
}

.wa-attachment-preview-thumb img {
  max-height: 48px;
  max-width: 64px;
  border-radius: 6px;
  display: block;
}

.wa-attachment-preview input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
}

.wa-message-media a {
  color: var(--accent2);
  font-size: 0.85rem;
  text-decoration: none;
}

.wa-message-media a:hover {
  text-decoration: underline;
}

.wa-connection-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  /* Reduzido (pedido do usuario, 2026-07-24: ainda pouco espaco pra ver a
     conversa) -- essa barra fica ACIMA de .wa-layout dentro de .wa-main, que
     tem altura travada, entao cada rem economizado aqui vira espaco real a
     mais pra .wa-messages. */
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.wa-connection-panel span {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 700;
}

.wa-qr-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.wa-qr-section img {
  max-width: 260px;
  border-radius: 8px;
  background: #fff;
  padding: 0.5rem;
}

.proposal-status-rascunho { background: rgba(93, 127, 143, 0.14); color: var(--text3); }
.proposal-status-enviada { background: rgba(59, 130, 246, 0.14); color: var(--blue); }
.proposal-status-visualizada { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.proposal-status-aceita { background: rgba(23, 138, 68, 0.14); color: var(--accent2); }
.proposal-status-recusada { background: rgba(190, 18, 60, 0.1); color: var(--red); }
.proposal-status-expirada { background: rgba(93, 127, 143, 0.1); color: var(--text3); }

.proposal-block {
  margin: 1.4rem 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.proposal-block-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.proposal-block-title-include::before { content: '✓'; color: var(--accent2); }
.proposal-block-title-exclude::before { content: '✕'; color: var(--red); }

/* Condicoes comerciais aceita paragrafo (varias linhas) no editor -- preserva
   as quebras de linha na renderizacao (visualizacao, proposta salva e link
   publico), em vez de esmagar tudo numa linha so como um <li> normal faria. */
.proposal-term-multiline {
  white-space: pre-wrap;
}

.proposal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin: 1.4rem 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.proposal-two-col .proposal-block {
  margin: 0;
  padding-top: 0;
  border-top: none;
}

.proposal-auto-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.proposal-info-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}

.proposal-info-card .info-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.proposal-info-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem; }
.proposal-info-card dt { color: var(--text3); font-size: 0.78rem; }
.proposal-info-card dd { margin: 0; font-weight: 600; font-size: 0.82rem; color: var(--text); }

.accept-info-note {
  font-size: 0.8rem;
  color: var(--text3);
  background: rgba(159, 229, 172, 0.06);
  border: 1px dashed var(--accent2);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}

table.proposal-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.proposal-items-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
table.proposal-items-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
table.proposal-items-table input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
  font-family: var(--font);
  background: var(--s2);
  color: var(--text);
}
table.proposal-items-table .num-col { width: 90px; }
table.proposal-items-table .subtotal-col { width: 120px; font-weight: 700; color: var(--accent2); text-align: right; }
table.proposal-items-table .remove-col { width: 40px; text-align: center; }

.proposal-items-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--border2);
  font-size: 0.85rem;
}
.proposal-items-total .value { font-size: 1.15rem; font-weight: 800; color: var(--accent2); }

.proposal-add-row-btn {
  margin-top: 0.5rem;
  background: none;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
}
.proposal-add-row-btn:hover { color: var(--text); }

.bullet-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bullet-editor .bullet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bullet-editor .bullet-row input,
.bullet-editor .bullet-row textarea {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font);
}
.bullet-editor .bullet-row-multiline {
  align-items: flex-start;
}
.bullet-editor .bullet-textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.2rem;
}
.bullet-editor .bullet-row-multiline .bullet-remove {
  margin-top: 0.5rem;
}
.bullet-editor .bullet-remove {
  color: var(--text3);
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.bullet-editor .bullet-remove:hover { color: var(--red); }

.event-row {
  display: flex;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}

.event-row:last-child { border-bottom: none; }
.event-row .event-time { color: var(--text3); font-family: monospace; white-space: nowrap; }
.event-row .event-label { color: var(--text); font-weight: 600; }

.proposal-public-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 3rem 1.2rem;
}

.proposal-public-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  height: fit-content;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.proposal-public-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-g);
}

.proposal-public-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.8rem 2rem 1rem;
  border-bottom: 1px solid var(--border);
}

.proposal-public-header img {
  height: 32px;
  width: auto;
  border-radius: 6px;
}

.proposal-public-header span {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}

.proposal-public-body { padding: 1.6rem 2rem; }

.proposal-public-body h1 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.proposal-public-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  margin: 0.6rem 0 1.2rem;
}

.proposal-public-content {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text2);
}
.proposal-public-content h3 { color: var(--text); margin: 1rem 0 0.4rem; }
.proposal-public-content ul, .proposal-public-content ol { padding-left: 1.4rem; margin: 0.5rem 0; }
.proposal-public-content p { margin: 0.5rem 0; }

.proposal-public-footer {
  padding: 1.4rem 2rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.proposal-public-footer button {
  flex: 1;
  min-width: 160px;
  padding: 0.9rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
}

.btn-accept-proposal { background: var(--accent-g); color: var(--brand-dark); }
.btn-accept-proposal:hover { opacity: 0.88; }
.btn-reject-proposal { background: var(--s3); color: var(--text); border: 1px solid var(--border); }
.btn-reject-proposal:hover { background: var(--s4); }

.proposal-public-banner {
  margin: 0 2rem 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}
.proposal-public-banner.ok { background: rgba(23,138,68,0.14); color: #1fa855; }
.proposal-public-banner.no { background: rgba(190,18,60,0.12); color: var(--red); }
.proposal-public-banner.expired { background: rgba(93,127,143,0.14); color: var(--text3); }

.proposal-public-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text3);
}

.proposal-public-section {
  margin: 1.4rem 0;
}
.proposal-public-section h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
  margin: 0 0 0.6rem;
}

.proposal-public-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

table.proposal-public-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
table.proposal-public-items th {
  text-align: left;
  color: var(--text3);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
table.proposal-public-items td { padding: 0.5rem 0; border-bottom: 1px solid var(--s3); }
table.proposal-public-items .num { text-align: right; }
table.proposal-public-items tfoot td { border-bottom: none; font-weight: 800; color: var(--accent); padding-top: 0.7rem; }

.proposal-public-payment-box {
  background: var(--s3);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  color: var(--text2);
}

.proposal-accept-name {
  margin: 0 2rem 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--s3);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.proposal-accept-name input {
  flex: 1;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font);
}

@media print {
  .proposal-public-footer, .proposal-public-banner, .proposal-accept-name { display: none; }
  body { background: #fff; }
  .proposal-public-card { box-shadow: none; border: none; }
}

.wa-qr-section p {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text3);
}

/* ============================================================
   Leads -- redesign visual (cabecalho, cards de resumo, filtros,
   selecao em massa, tabela e menu de acoes). Todas as classes abaixo
   sao exclusivas da tela de Leads (prefixo leads-), nao reaproveitam
   nem alteram .status-badge/.kpi-tile usados em outras paginas.
   ============================================================ */

.leads-title-block h1 {
  margin-bottom: 0.2rem;
}

.leads-subtitle {
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 500;
}

.leads-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 1100px) {
  .leads-summary-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .leads-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.leads-summary-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.leads-summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(23, 138, 68, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.leads-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.leads-summary-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.leads-summary-label {
  font-size: 0.66rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
}

.leads-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 260px;
  min-width: 220px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  color: var(--text3);
  transition: border-color 0.15s ease;
}

.leads-search-box:focus-within {
  border-color: var(--border2);
}

.leads-search-box svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.leads-search-box input {
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  width: 100%;
  font-family: var(--font);
}

.leads-filter-select {
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font);
  min-width: 140px;
  cursor: pointer;
}

.leads-filter-clear {
  background: none;
  border: none;
  color: var(--text3);
  text-decoration: underline;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.leads-filter-clear:hover {
  color: var(--accent);
}

.leads-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(23, 138, 68, 0.06);
  border: 1px solid rgba(23, 138, 68, 0.25);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  flex-wrap: wrap;
}

.leads-bulk-bar.visible {
  display: flex;
}

.leads-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.leads-bulk-select {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font);
  cursor: pointer;
}

.btn-delete-bulk {
  background: none;
  border: 1px solid rgba(190, 18, 60, 0.35);
  color: var(--red);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-delete-bulk:hover {
  background: rgba(190, 18, 60, 0.08);
}

.leads-bulk-clear {
  background: none;
  border: none;
  color: var(--text3);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.78rem;
}

.leads-th-checkbox {
  width: 34px;
}

.leads-table .leads-cell-checkbox,
.leads-table .leads-th-checkbox {
  padding-right: 0;
}

.leads-row-checkbox,
#leads-select-all {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.leads-table td {
  transition: background 0.18s ease;
}

.leads-cell-name {
  cursor: pointer;
}

.leads-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.leads-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(23, 138, 68, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.leads-name-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.leads-name-primary {
  font-weight: 700;
  color: var(--text);
}

.leads-cell-name:hover .leads-name-primary {
  color: var(--accent);
  text-decoration: underline;
}

.leads-name-secondary {
  font-size: 0.72rem;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: block;
}

.leads-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.leads-contact-line svg {
  width: 13px;
  height: 13px;
  color: var(--text3);
  flex-shrink: 0;
}

.leads-contact-empty {
  color: var(--text3);
}

.leads-origem-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.leads-origem-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.leads-origem-empty {
  color: var(--text3);
}

.leads-status-pill {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--s2);
  color: var(--text2);
  white-space: nowrap;
}

.leads-status-novo {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.leads-status-contatado {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text3);
}

.leads-status-qualificado {
  background: rgba(23, 138, 68, 0.1);
  color: var(--accent);
}

.leads-status-negociacao {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.leads-status-convertido {
  background: rgba(23, 138, 68, 0.16);
  color: var(--accent);
  font-weight: 800;
}

.leads-status-perdido {
  background: rgba(190, 18, 60, 0.1);
  color: var(--red);
}

.leads-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem 0.22rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.leads-score-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.leads-score-quente {
  background: rgba(23, 138, 68, 0.12);
  color: var(--accent);
}

.leads-score-quente .leads-score-dot {
  background: var(--accent);
}

.leads-score-morno {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.leads-score-morno .leads-score-dot {
  background: #d97706;
}

.leads-score-frio {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text3);
}

.leads-score-frio .leads-score-dot {
  background: var(--text3);
}

.leads-cell-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.leads-table .leads-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.leads-table .leads-action-pill:hover {
  background: var(--s3);
  border-color: var(--border2);
  color: var(--text);
  transform: translateY(-1px);
}

.leads-table .btn-kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--text3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.leads-table .btn-kebab:hover {
  background: var(--s3);
  color: var(--text);
  border-color: var(--border2);
}

.leads-dropdown-menu {
  position: fixed;
  min-width: 190px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  padding: 0.4rem;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  z-index: 200;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.leads-dropdown-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.leads-dropdown-menu button {
  text-align: left;
  background: none;
  border: none;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  margin-right: 0;
}

.leads-dropdown-menu button:hover {
  background: var(--s3);
  color: var(--text);
}

.leads-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}

.leads-dropdown-menu .leads-dropdown-danger {
  color: var(--red);
}

.leads-dropdown-menu .leads-dropdown-danger:hover {
  background: rgba(190, 18, 60, 0.08);
  color: var(--red);
}

.leads-skeleton-row td {
  padding: 0.9rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

.leads-skeleton-bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 37%, var(--s2) 63%);
  background-size: 400% 100%;
  animation: leads-skeleton-shimmer 1.4s ease infinite;
}

@keyframes leads-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .leads-skeleton-bar {
    animation: none;
  }
}

.leads-empty-state {
  padding: 3rem 1rem;
  text-align: center;
}

.leads-empty-title {
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.leads-empty-sub {
  color: var(--text3);
  font-size: 0.8rem;
}

/* Tablet: reduz informacao secundaria pra aliviar a largura antes de
   depender so do scroll horizontal do .table-scroll. */
@media (max-width: 1024px) and (min-width: 769px) {
  .leads-th-checkbox,
  .leads-table .leads-cell-checkbox {
    display: none;
  }

  .leads-name-secondary {
    display: none;
  }
}

@media (max-width: 768px) {
  .leads-table .leads-cell-name {
    justify-content: flex-start;
  }

  .leads-table .leads-cell-name::before {
    content: none;
  }

  .leads-table .leads-cell-checkbox {
    border-bottom: 1px solid var(--border);
  }

  .leads-table .leads-cell-checkbox::before {
    content: 'Selecionar';
  }

  .leads-bulk-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .leads-table tr > td:last-child .btn-kebab {
    flex: 0 0 auto;
    min-width: 44px;
    max-width: 44px;
  }
}

.dashboard-muted {
  color: var(--text3);
  font-size: 0.78rem;
}

.attendance-suggestion-text {
  display: block;
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 0.4rem;
  max-width: 320px;
}

.btn-send-reactivation {
  background: var(--accent-g);
  color: var(--brand-dark);
  border: none;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.btn-send-reactivation:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-confirm-payment {
  background: var(--accent-g);
  color: var(--brand-dark);
  border: none;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.btn-confirm-payment:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* "Baixar PDF" do card de Atendimentos que precisam melhorar (pedido do
   usuario): reaproveita window.print() do navegador (mesmo mecanismo ja
   usado na pagina publica de proposta, ver .proposal-public-* acima) --
   sem biblioteca nova, o usuario so escolhe "Salvar como PDF" na propria
   caixa de impressao do navegador. Essas regras escondem tudo que nao e
   essa secao especifica quando a pagina do Dashboard e impressa. */
@media print {
  .sidebar,
  .mobile-backdrop,
  .app-header,
  .dashboard > *:not(#attendance-report-section) {
    display: none !important;
  }

  body,
  .dashboard {
    background: #fff;
    padding: 0;
  }

  #attendance-report-print-btn,
  #attendance-report-tbody .btn-send-reactivation,
  #attendance-report-section .leads-table th:last-child,
  #attendance-report-section .leads-table td:last-child {
    display: none !important;
  }
}

/* Central de Oportunidades (Oportunidades Inteligentes, 2026-07-28) --
   reaproveita .kpi-tile/.status-badge/.leads-filter-* ja existentes, so os
   cards de oportunidade (.op-card) sao novos, mesma linguagem visual de
   .link-suggestion-card (fundo --s2, borda --border, cantos arredondados). */
.op-disabled-notice {
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #b45309;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.op-executive-summary {
  margin-top: 0.8rem;
  color: var(--text2);
  font-size: 0.85rem;
  line-height: 1.5;
}

.op-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.op-opportunities-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Centro de Decisao (pedido do usuario, 2026-07-28): as listas de card
   (prioridade/fechamento/parados/etc.) nao tem paginacao -- com muitos leads
   a pagina inteira ficava gigante. Vira um painel com altura fixa e scroll
   proprio, nunca empurrando o resto da tela pra baixo. */
#decisao-page .op-opportunities-list {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 0.4rem;
}

.op-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

.op-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.op-card-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.op-card-classification {
  font-size: 0.75rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.op-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.op-card-company {
  font-size: 0.8rem;
  color: var(--text3);
}

.op-card-priority {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}

.op-card-priority-alta {
  background: rgba(190, 18, 60, 0.1);
  color: var(--red);
}

.op-card-priority-media {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.op-card-priority-baixa {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text3);
}

/* Score de Risco de Perda (2026-07-28) -- mesma linguagem visual de
   .op-card-priority-*, cores por faixa (baixo->critico). */
.op-risk-block {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--s3);
  border: 1px solid var(--border);
}

.op-risk-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.op-risk-score {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.op-risk-tier {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}

.op-risk-tier-baixo {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text3);
}

.op-risk-tier-atencao {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.op-risk-tier-alto {
  background: rgba(190, 18, 60, 0.14);
  color: var(--red);
}

.op-risk-tier-critico {
  background: rgba(190, 18, 60, 0.26);
  color: var(--red);
}

.op-risk-reasons {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.5;
}

.op-risk-factors-label {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.op-risk-weight {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.op-risk-action {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text2);
}

.op-card-scores {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text2);
}

.op-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.op-card-flag {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  background: rgba(159, 229, 172, 0.12);
  color: var(--accent2);
}

.op-card-summary,
.op-card-reason,
.op-card-action,
.op-card-message {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.5;
}

.op-card-message {
  font-style: italic;
}

.op-card-warning {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--red);
}

.op-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text3);
  flex-wrap: wrap;
}

/* Minha Agenda Comercial (Fase 1, operador unico, 2026-07-28) -- reaproveita
   a linguagem visual do .op-card (mesmo fundo/borda), so acrescenta o
   numero grande de prioridade e a linha de acoes propria (nao reusa
   .op-card-footer de proposito -- aqui sao botoes de acao, nao metadado). */
.ac-agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ac-agenda-item {
  display: flex;
  gap: 1rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

.ac-agenda-number {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-g);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-agenda-body {
  flex: 1;
  min-width: 0;
}

.ac-agenda-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

.ac-agenda-actions a,
.ac-agenda-actions .btn-log-contact {
  color: var(--accent2);
  text-decoration: none;
  font-weight: 600;
}

.ac-agenda-actions .btn-log-contact {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

.ac-agenda-actions .btn-log-contact:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.op-card-history-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
}

.op-card-history {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

.op-history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text2);
}

.op-history-date {
  color: var(--text3);
}

/* Widget de "Anotacoes" (Agenda Comercial + Dinheiro Parado, 2026-07-30) --
   toggle pequeno + painel colapsavel, reutilizado via layout.js. */
.lead-notes-widget {
  margin-top: 0.5rem;
}

.lead-notes-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.lead-notes-toggle:hover {
  text-decoration: underline;
}

.lead-notes-panel {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 360px;
}

.lead-notes-textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font);
  outline: none;
  resize: vertical;
}

.lead-notes-textarea:focus {
  border-color: var(--accent);
}

.lead-notes-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lead-notes-status {
  font-size: 0.75rem;
  color: var(--text3);
}

/* Enriquecimento de Prospects (Iniciativa C, Fase C.3, 2026-07-30). */
.pb-enrichment-result {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 220px;
}

.pb-enrichment-meta {
  font-size: 0.72rem;
  color: var(--text3);
}

.pb-enrichment-meta .btn-enrich-prospect {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent2);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

/* Diagnostico Comercial (Iniciativa C, Fase C.4, 2026-07-31). */
.pb-diagnostic-result {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 260px;
}

.pb-diagnostic-findings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pb-diagnostic-opinion {
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.4;
  margin: 0;
}

.pb-enrichment-meta .btn-diagnose-prospect {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent2);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

/* Sugestao de Abordagem (Iniciativa C, Fase C.5, 2026-08-03). */
.pb-outreach-result {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 260px;
}

.pb-outreach-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}