/* =========================================================
   AETech Painel — Design System extension
   App layout: sidebar + main content
   ========================================================= */

.painel-body {
  background: var(--surface-soft);
  color: var(--ink);
  min-height: 100vh;
  overflow: hidden;
}

/* =========================================================
   AUTH SCREEN
   ========================================================= */

.auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 100;
  padding: 24px;
  overflow: hidden;
}
/* Atributo hidden tem que ganhar sobre display:grid acima */
.auth-screen[hidden] { display: none !important; }
.app-shell[hidden] { display: none !important; }
.auth-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(99,102,241,.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(168,85,247,.22) 0%, transparent 50%);
  pointer-events: none;
}
.auth-card {
  position: relative;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 48px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.auth-logo-stack {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.auth-logo-img {
  width: 240px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(139, 92, 246, 0.45));
}
.auth-card h1 {
  color: white;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
.auth-card p {
  color: #94A3B8;
  margin-bottom: 36px;
  font-size: 15px;
}
.auth-users {
  display: grid;
  gap: 12px;
}
.auth-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
  text-align: left;
  width: 100%;
}
.auth-user:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(99,102,241,.4);
  transform: translateY(-2px);
}
.auth-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}
.auth-user-name {
  font-weight: 600;
  font-size: 15px;
  color: white;
}
.auth-user-role {
  font-size: 13px;
  color: #94A3B8;
}

/* === Login form (email + senha Supabase) === */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  text-align: left;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: #CBD5E1;
}
.auth-field input {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: white;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
}
.auth-field input:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.auth-field input::placeholder { color: #64748B; }
.auth-erro {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.auth-submit {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.18s, opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-submit-text { display: inline-flex; align-items: center; }
.auth-submit-loader { display: inline-flex; align-items: center; gap: 6px; }
/* Hidden tem que ganhar sobre as classes acima */
.auth-submit-text[hidden],
.auth-submit-loader[hidden] { display: none !important; }
.auth-footer {
  margin-top: 16px;
  text-align: center;
  color: #64748B;
  font-size: 12px;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(99,102,241,.12) 0%, transparent 50%);
  pointer-events: none;
}
.sidebar > * { position: relative; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 16px;
}
.sidebar-brand .logo-mark {
  width: 38px; height: 38px;
  font-size: 12px;
  filter: drop-shadow(0 4px 10px rgba(139, 92, 246, 0.4));
}
.sidebar-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #F0ABFC 0%, #67E8F9 50%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sidebar-brand-tag {
  font-size: 10px;
  color: #94A3B8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 12px;
  margin: 18px 0 8px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #CBD5E1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-align: left;
  width: 100%;
  border: none;
  background: none;
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,.05);
  color: white;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(99,102,241,.2), rgba(99,102,241,.05));
  color: white;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--primary-light);
}
.nav-item svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.nav-item-badge {
  margin-left: auto;
  background: var(--gradient);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.sidebar-user {
  margin-top: auto;
  padding: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.sidebar-user:hover { background: rgba(255,255,255,.08); }
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
}
.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
  line-height: 1.2;
}
.sidebar-user-role {
  font-size: 11px;
  color: #94A3B8;
}
.sidebar-user-menu {
  margin-left: auto;
  color: #64748B;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */

.main {
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.topbar-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.topbar-search {
  flex: 1;
  max-width: 400px;
  position: relative;
  margin-left: 24px;
}
.topbar-search svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 16px; height: 16px;
}
.topbar-search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.topbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.btn-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-icon:hover {
  background: var(--surface-soft);
  border-color: var(--ink-3);
}
.btn-icon svg { width: 18px; height: 18px; }

.btn-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--gradient);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
  transition: transform var(--t-fast), box-shadow var(--t);
}
.btn-new:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(99,102,241,.45);
}
.btn-new svg { width: 16px; height: 16px; }

/* Content area */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}
.view { display: none; }
.view.active { display: block; }

.view-header {
  margin-bottom: 28px;
}
.view-header h2 {
  font-size: 28px;
  margin-bottom: 6px;
}
.view-header p {
  color: var(--muted);
  font-size: 15px;
}
.view-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.greeting h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 4px;
}
.greeting p { color: var(--muted); font-size: 15px; }
.greeting-date {
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.greeting-date svg { width: 16px; height: 16px; color: var(--primary); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-card.featured {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-3) 100%);
  color: white;
  border-color: rgba(255,255,255,.08);
}
.kpi-card.featured .kpi-label { color: #94A3B8; }
.kpi-card.featured .kpi-value { color: white; }
.kpi-card.featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(99,102,241,.25) 0%, transparent 60%);
  pointer-events: none;
}
.kpi-card.featured > * { position: relative; }

.kpi-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.kpi-card.featured .kpi-icon {
  background: rgba(99,102,241,.2);
  color: var(--primary-light);
}
.kpi-card:not(.featured) .kpi-icon {
  background: var(--gradient-soft);
  color: var(--primary);
}
.kpi-icon svg { width: 18px; height: 18px; }

.kpi-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.kpi-value-small {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
  margin-left: 4px;
}
.kpi-trend {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16,185,129,.12);
  color: var(--success);
}
.kpi-card.featured .kpi-trend {
  background: rgba(110,231,183,.12);
  color: #6EE7B7;
}
.kpi-trend svg { width: 12px; height: 12px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.card-action {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
}
.card-action:hover { text-decoration: underline; }

/* Mini chart */
.chart-area {
  height: 220px;
  position: relative;
}
.chart-svg {
  width: 100%;
  height: 100%;
}

/* Próximas reuniões */
.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meeting-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.meeting-item:hover {
  background: var(--surface-soft);
  border-color: rgba(99,102,241,.3);
}
.meeting-date {
  width: 56px;
  background: var(--gradient-soft);
  border-radius: 10px;
  text-align: center;
  padding: 8px 4px;
  flex-shrink: 0;
}
.meeting-date-day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
}
.meeting-date-mon {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  margin-top: 2px;
}
.meeting-info {
  flex: 1;
  min-width: 0;
}
.meeting-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meeting-meta {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}
.meeting-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.meeting-meta svg { width: 12px; height: 12px; }

/* Stage distribution */
.stage-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stage-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stage-bar-label {
  width: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  flex-shrink: 0;
}
.stage-bar-track {
  flex: 1;
  height: 8px;
  background: var(--surface-mid);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.stage-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-bar-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   PIPELINE / KANBAN
   ========================================================= */

.kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(260px, 1fr));
  gap: 14px;
  height: calc(100vh - 200px);
  overflow-x: auto;
}

.kanban-column {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kanban-column-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.kanban-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.kanban-stage-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.kanban-column-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.3;
}
.kanban-column-count {
  font-weight: 600;
  color: var(--ink-2);
}
.kanban-column-body {
  padding: 12px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-column-body.drag-over {
  background: var(--gradient-soft);
}

.kanban-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  cursor: grab;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.kanban-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(99,102,241,.3);
}
.kanban-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.kanban-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.3;
}
.kanban-card-empresa {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
}
.kanban-card-value {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kanban-card-prob {
  background: var(--gradient-soft);
  color: var(--primary-deep);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}
.kanban-card-tags {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--surface-mid);
  color: var(--ink-3);
  font-weight: 500;
}

/* =========================================================
   TABELA DE CLIENTES
   ========================================================= */

.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 20px;
  width: fit-content;
}
.tab {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--ink);
  color: white;
}

.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.table td {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.table tr:last-child td { border-bottom: none; }
.table tr {
  cursor: pointer;
  transition: background var(--t-fast);
}
.table tbody tr:hover { background: var(--surface-soft); }

.client-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: white;
  flex-shrink: 0;
}
.client-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.client-empresa {
  font-size: 12.5px;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.badge.stage-prospect { background: #F1F5F9; color: #475569; }
.badge.stage-prospect .badge-dot { background: #94A3B8; }
.badge.stage-contato { background: #DBEAFE; color: #1E40AF; }
.badge.stage-contato .badge-dot { background: #3B82F6; }
.badge.stage-reuniao { background: #EDE9FE; color: #5B21B6; }
.badge.stage-reuniao .badge-dot { background: #8B5CF6; }
.badge.stage-proposta { background: #FEF3C7; color: #92400E; }
.badge.stage-proposta .badge-dot { background: #F59E0B; }
.badge.stage-negociacao { background: #FED7AA; color: #9A3412; }
.badge.stage-negociacao .badge-dot { background: #F97316; }
.badge.stage-rodando { background: #D1FAE5; color: #065F46; }
.badge.stage-rodando .badge-dot { background: #10B981; }
.badge.stage-encerrado { background: #E5E7EB; color: #374151; }
.badge.stage-encerrado .badge-dot { background: #6B7280; }
.badge.stage-perdido { background: #FEE2E2; color: #991B1B; }
.badge.stage-perdido .badge-dot { background: #EF4444; }

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--muted-2); }
.empty-state h3 { font-size: 16px; margin-bottom: 8px; }
.empty-state p { font-size: 14px; }

/* =========================================================
   FICHA DE CLIENTE
   ========================================================= */

.cliente-detalhe {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.cliente-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.cliente-back {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-3);
}
.cliente-back:hover { background: var(--surface-soft); }
.cliente-back svg { width: 18px; height: 18px; }

.cliente-title-block .client-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cliente-title-block .client-empresa { font-size: 14px; }

.cliente-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.cliente-tab {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cliente-tab:hover { color: var(--ink); }
.cliente-tab.active {
  color: var(--ink);
  border-bottom-color: var(--primary);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.info-item-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.info-item-value {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
}

.cliente-side .card { margin-bottom: 16px; }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 24px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.timeline-item {
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 8px;
  width: 13px; height: 13px;
  background: white;
  border: 2px solid var(--primary);
  border-radius: 50%;
}
.timeline-item-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-item-content {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

/* =========================================================
   AGENDA
   ========================================================= */

.agenda-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.agenda-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
}
.agenda-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-day-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.agenda-day-title.today {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.agenda-day-count {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.agenda-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agenda-event {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  align-items: center;
  cursor: pointer;
}
.agenda-event-interna {
  border-left-color: #7C3AED;
  background: linear-gradient(90deg, rgba(124,58,237,.04) 0%, transparent 30%);
  cursor: default;
}
.agenda-event-interna .agenda-event-tag {
  background: rgba(124,58,237,.12);
  color: #7C3AED;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.agenda-event:hover {
  background: var(--surface-soft);
  border-color: rgba(99,102,241,.25);
}
.agenda-event-time {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}
.agenda-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.agenda-event-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.agenda-event-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--gradient-soft);
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================================
   PROSPECÇÃO
   ========================================================= */

.prospect-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.prospect-tools .card {
  background: var(--gradient-soft);
  border-color: rgba(99,102,241,.2);
}
.prospect-source {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.prospect-source-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.prospect-source-icon svg { width: 18px; height: 18px; }
.prospect-source-name {
  font-size: 14px;
  font-weight: 600;
}
.prospect-source-tip {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.template-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
}
.template-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.template-text {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  background: var(--surface-soft);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  font-family: var(--font-mono);
}
.template-copy {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.template-copy:hover { text-decoration: underline; }

/* =========================================================
   RECEITA
   ========================================================= */

.receita-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.receita-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.receita-service {
  display: flex;
  align-items: center;
  gap: 12px;
}
.receita-service-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
}
.receita-service-icon svg { width: 18px; height: 18px; }
.receita-service-info { flex: 1; }
.receita-service-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.receita-service-bar {
  height: 6px;
  background: var(--surface-mid);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}
.receita-service-fill {
  height: 100%;
  border-radius: 3px;
}
.receita-service-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.top-clients {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.top-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-soft);
  border-radius: 10px;
}
.top-client-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.top-client-empresa {
  font-size: 12px;
  color: var(--muted);
}
.top-client-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--success);
}

/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.96);
  transition: transform var(--t);
}
.modal-overlay.show .modal { transform: scale(1); }

.modal-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--surface-soft);
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast);
}
.modal-close:hover { background: var(--line); }
.modal-close svg { width: 18px; height: 18px; }

.modal-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.modal-grid-full { grid-column: 1 / -1; }

/* Section labels dentro do form (Empresa / Contato / Negociação) */
.form-section-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0 6px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
}
.modal-grid > .modal-grid-full:first-child .form-section-label {
  margin-top: 0;
}

/* =========================================================
   CONTRATO — Documento legal profissional
   ========================================================= */
.contrato-doc {
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a1a1a;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 48px;
  background: white;
  line-height: 1.6;
  font-size: 13px;
}

.contrato-header {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 3px solid var(--primary);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.contrato-logo { width: 56px; height: 56px; }
.contrato-header-text h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.15;
}
.contrato-numero {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.contrato-section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-deep);
  margin: 22px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}
.contrato-subtitle {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 6px;
}

.contrato-p {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
  text-align: justify;
}

.contrato-partes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.contrato-parte {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 12px 14px;
}
.contrato-parte-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contrato-parte-nome {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.contrato-parte-info {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.55;
}

.contrato-escopo {
  background: var(--surface-soft);
  border-left: 3px solid var(--primary);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.contrato-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 18px;
  font-size: 12px;
}
.contrato-tabela th {
  background: var(--surface-soft);
  border-bottom: 2px solid var(--ink);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.contrato-tabela th.right { text-align: right; }
.contrato-tabela td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.contrato-tabela td.right { text-align: right; font-variant-numeric: tabular-nums; }
.contrato-mensal {
  font-size: 9px;
  font-weight: 700;
  background: rgba(124,58,237,.12);
  color: #7C3AED;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.contrato-item-detalhe {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.contrato-list {
  margin: 6px 0 12px 22px;
  font-size: 12px;
  color: var(--ink-2);
}
.contrato-list li {
  margin-bottom: 4px;
  line-height: 1.55;
}

.contrato-assinaturas {
  margin-top: 36px;
  page-break-inside: avoid;
}
.contrato-data {
  text-align: center;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.contrato-assinaturas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.contrato-assinatura {
  text-align: center;
}
.contrato-assinatura-linha {
  width: 100%;
  border-top: 1px solid var(--ink);
  margin: 0 0 6px;
  height: 1px;
}
.contrato-assinatura-label {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}
.contrato-assinatura-label small {
  font-size: 9.5px;
  color: var(--muted);
}

.contrato-testemunhas {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 28px 0 14px;
}

.contrato-rodape {
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* Print do contrato */
@media print {
  .contrato-doc {
    padding: 16mm 18mm;
    max-width: 100%;
    font-size: 11.5px;
  }
  .contrato-section-title {
    page-break-after: avoid;
    margin-top: 14px;
  }
  .contrato-partes, .contrato-tabela, .contrato-assinaturas {
    page-break-inside: avoid;
  }
}

/* Previsão de receita — próximos meses */
.prev-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .prev-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .prev-grid { grid-template-columns: repeat(2, 1fr); } }

.prev-mes {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-height: 220px;
}
.prev-mes.atual {
  background: linear-gradient(180deg, rgba(99,102,241,.08) 0%, rgba(168,85,247,.04) 100%);
  border-color: rgba(99,102,241,.3);
}
.prev-mes-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prev-mes.atual .prev-mes-label { color: var(--primary); }
.prev-mes-valor {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.prev-mes.atual .prev-mes-valor {
  background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.prev-mes-bar {
  height: 70px;
  background: rgba(99,102,241,.08);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
}
.prev-mes-fill {
  width: 100%;
  background: linear-gradient(180deg, #A855F7 0%, #6366F1 100%);
  border-radius: 6px;
  transition: height 0.6s ease;
  min-height: 4px;
}
.prev-mes.atual .prev-mes-fill {
  background: linear-gradient(180deg, #EC4899 0%, #8B5CF6 100%);
}
.prev-mes-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
}
.prev-mes-detail span {
  font-weight: 600;
  color: var(--ink-3);
}
.prev-leads-count {
  font-size: 10px;
  color: var(--success) !important;
  font-weight: 600;
}

.prev-explain {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.prev-explain strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 12.5px;
}
.prev-explain ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.prev-explain li {
  padding: 3px 0;
  line-height: 1.5;
}
.prev-explain li strong {
  display: inline;
  margin-bottom: 0;
  color: var(--ink-2);
}

/* Tabs de categoria de reunião */
.reu-categoria-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .reu-categoria-tabs { grid-template-columns: 1fr; }
}
.reu-cat-btn {
  padding: 12px;
  background: var(--surface-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
}
.reu-cat-btn:hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.04);
}
.reu-cat-btn.active {
  background: linear-gradient(135deg, rgba(99,102,241,.1) 0%, rgba(168,85,247,.06) 100%);
  border-color: var(--primary);
  color: var(--primary-deep);
  font-weight: 700;
}

/* Toggle estilizado (checkbox) */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.toggle-label:hover { border-color: var(--primary); background: rgba(99,102,241,.04); }
.toggle-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 38px; height: 22px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.toggle-checkbox::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-checkbox:checked {
  background: var(--primary);
}
.toggle-checkbox:checked::before {
  transform: translateX(16px);
}
.toggle-text {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}

/* Card de manutenção mensal */
.orc-manutencao-card {
  background: linear-gradient(135deg, rgba(16,185,129,.05) 0%, rgba(99,102,241,.03) 100%);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 10px;
  padding: 14px 16px;
}
.orc-manutencao-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .orc-manutencao-grid { grid-template-columns: 1fr; }
}

/* Chips de condições de pagamento (multi-select visual) */
.cp-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cp-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: 12.5px;
}
.cp-chip:hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.04);
}
.cp-chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.cp-chip input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.cp-chip input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.cp-chip:has(input:checked) {
  background: rgba(99,102,241,.08);
  border-color: var(--primary);
  font-weight: 600;
}
.cp-chip span {
  color: var(--ink-2);
}

.modal-footer {
  padding: 18px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.field-painel { display: flex; flex-direction: column; gap: 6px; }
.field-painel label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.field-painel input,
.field-painel select,
.field-painel textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-painel input:focus,
.field-painel select:focus,
.field-painel textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.field-painel textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.btn-secondary {
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t-fast);
}
.btn-secondary:hover { background: var(--line); }

/* =========================================================
   TOAST
   ========================================================= */

.toasts {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: white;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: all;
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.success { background: var(--success); }
.toast.error { background: #EF4444; }
.toast svg { width: 18px; height: 18px; }
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* =========================================================
   ORÇAMENTOS — LISTA E MODAL
   ========================================================= */

.modal-wide { max-width: 760px !important; }

/* Picker de template de orçamento */
.template-picker {
  background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(168,85,247,.04) 100%);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 12px;
  padding: 14px 16px !important;
  margin-bottom: 4px;
}
.template-picker label {
  font-weight: 700 !important;
  color: var(--primary-deep) !important;
}
.template-picker select {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  width: 100%;
  cursor: pointer;
}
.template-picker select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.template-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}

/* =========================================================
   BUSCAR NEGÓCIOS — Prospecção por geolocalização
   ========================================================= */

/* Badge de fonte ativa */
.bn-fonte-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bn-fonte-badge.google {
  background: rgba(16,185,129,.12);
  color: #065F46;
  border: 1px solid rgba(16,185,129,.3);
}
.bn-fonte-badge.google svg { color: #10B981; }
.bn-fonte-badge.osm {
  background: rgba(245,158,11,.1);
  color: #92400E;
  border: 1px solid rgba(245,158,11,.3);
}
.bn-fonte-badge.osm svg { color: #F59E0B; }
.bn-fonte-badge strong { font-weight: 700; }
.bn-fonte-badge a { color: inherit; text-decoration: underline; }

.bn-search-card {
  background: linear-gradient(135deg, rgba(139,92,246,.05) 0%, rgba(236,72,153,.03) 100%);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.bn-search-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1.3fr 0.5fr 0.7fr 1fr 1.1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 1400px) {
  .bn-search-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 900px) {
  .bn-search-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .bn-search-grid {
    grid-template-columns: 1fr;
  }
}

.bn-search-grid .field-painel label {
  font-weight: 600;
}

.bn-hint {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}

.bn-search-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(139,92,246,.18);
}

.bn-search-actions .btn-new {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  font-weight: 600;
  font-size: 13.5px;
}

.bn-status {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.bn-status.loading {
  color: var(--primary);
  font-style: normal;
}
.bn-status.error {
  color: #DC2626;
  font-style: normal;
}
.bn-status.success {
  color: var(--success);
  font-style: normal;
}

/* Resultados */
.bn-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bn-results-count {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.bn-results-count strong {
  background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 22px;
}

.bn-results-actions {
  display: flex;
  gap: 8px;
}

.bn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.bn-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.bn-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bn-card-name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bn-card-cat {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139,92,246,.12);
  color: #6D28D9;
}

.bn-card-dist {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

.bn-card-address {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.bn-card-address svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; color: var(--muted-2); }

.bn-card-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.bn-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: all var(--t-fast);
}
.bn-contact-pill:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.bn-contact-pill svg {
  width: 12px;
  height: 12px;
  color: var(--primary);
}
.bn-contact-pill:hover svg { color: white; }

.bn-contact-pill.wa { color: #128C7E; }
.bn-contact-pill.wa svg { color: #128C7E; }
.bn-contact-pill.wa:hover { background: #25D366; color: white; border-color: #25D366; }
.bn-contact-pill.wa:hover svg { color: white; }

.bn-contact-pill.site { color: #2563EB; }
.bn-contact-pill.site svg { color: #2563EB; }

.bn-contact-pill.no-info {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.2);
  color: #B91C1C;
  cursor: default;
}
.bn-contact-pill.no-info svg { color: #B91C1C; }
.bn-contact-pill.no-info:hover {
  background: rgba(239,68,68,.06);
  color: #B91C1C;
  border-color: rgba(239,68,68,.2);
}

.bn-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.bn-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.bn-action-btn:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.bn-action-btn.primary {
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  border-color: transparent;
  color: white;
}
.bn-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139,92,246,.3);
  color: white;
}
.bn-action-btn.saved {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: var(--success);
  cursor: default;
}
.bn-action-btn svg { width: 12px; height: 12px; }

.bn-empty {
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.bn-empty h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.bn-empty p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.bn-loading {
  text-align: center;
  padding: 50px 20px;
}
.bn-spinner {
  display: inline-block;
  width: 38px; height: 38px;
  border: 3px solid rgba(139,92,246,.2);
  border-top-color: #8B5CF6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 14px;
}
.bn-loading-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.bn-loading-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.orc-itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-soft);
}
.orc-item-row {
  display: grid;
  grid-template-columns: 1fr 100px 110px 130px 36px;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.orc-item-row input,
.orc-item-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.orc-item-row input:focus,
.orc-item-row select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99,102,241,.1);
}
.orc-item-remove {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: none;
  background: rgba(239,68,68,.1);
  color: #DC2626;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast);
}
.orc-item-remove:hover { background: rgba(239,68,68,.2); }
.orc-item-remove svg { width: 16px; height: 16px; }

.orc-totais {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 18px;
  background: var(--surface-soft);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.orc-totais strong { color: var(--ink); margin-left: 6px; font-variant-numeric: tabular-nums; }
.orc-total-grande { font-size: 16px; }
.orc-total-grande strong {
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

/* Status badges para orçamentos */
.badge.status-rascunho { background: #F1F5F9; color: #475569; }
.badge.status-rascunho .badge-dot { background: #94A3B8; }
.badge.status-enviado { background: #DBEAFE; color: #1E40AF; }
.badge.status-enviado .badge-dot { background: #3B82F6; }
.badge.status-aceito { background: #D1FAE5; color: #065F46; }
.badge.status-aceito .badge-dot { background: #10B981; }
.badge.status-recusado { background: #FEE2E2; color: #991B1B; }
.badge.status-recusado .badge-dot { background: #EF4444; }
.badge.status-expirado { background: #FED7AA; color: #9A3412; }
.badge.status-expirado .badge-dot { background: #F97316; }

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.row-action-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.row-action-btn:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.row-action-btn svg { width: 15px; height: 15px; }

/* =========================================================
   PROPOSTA PROFISSIONAL (PDF)
   Layout compacto, print-safe (cores sólidas em vez de gradientes)
   ========================================================= */

.orc-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.orc-toolbar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.orc-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.proposta-page {
  background: white;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  color: #0A0E1A;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
}

/* === HEADER === */
.proposta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 2px solid #0A0E1A;
  margin-bottom: 18px;
}
.proposta-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.proposta-logo-mark {
  width: 52px; height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(139, 92, 246, 0.25));
}
.proposta-logo-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(90deg, #EC4899 0%, #8B5CF6 45%, #4F46E5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media print {
  /* No PDF, gradient text pode falhar — usa cor sólida violet */
  .proposta-logo-name {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #6D28D9 !important;
  }
  /* ESCONDER UI INTEIRA — só mostra a proposta/contrato */
  .sidebar,
  .topbar,
  .bottom-nav,
  .sidebar-backdrop,
  .offline-banner,
  .toasts,
  .modal-overlay,
  .view-header,
  .view-header-row,
  .tabs,
  .filtros-row,
  .pendencias-card,
  .kpi-grid,
  .dashboard-grid,
  .nav-item,
  .btn-new,
  .btn-icon,
  .btn-secondary,
  .btn-primary,
  .sync-chip,
  .pwa-bottom-spacer { display: none !important; }
  /* App shell sem grid (vira coluna única) */
  .app-shell { display: block !important; grid-template-columns: none !important; }
  .main { grid-column: 1/-1 !important; padding: 0 !important; }
  .content { padding: 0 !important; }
  /* Esconder todas as views EXCETO orcamento/contrato */
  .view:not(.print-visible) { display: none !important; }
  .view.active.print-visible,
  .view[data-view="orcamento"].active,
  .view[data-view="contrato"].active { display: block !important; }
  /* Sem fundo cinza em volta da proposta */
  body, .painel-body, .app-shell, .main, .content {
    background: white !important;
  }
  /* Remove margens internas que sobram */
  .proposta-doc,
  .contrato-doc {
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Evita áreas em branco */
  .proposta-rodape, .contrato-rodape {
    page-break-inside: avoid;
  }
  /* Esconde container vazio que vinha aparecendo como retângulo cinza */
  .card:empty,
  div:empty:not(.contrato-assinatura-linha):not(.proposta-assinatura-linha) {
    display: none !important;
  }
}
.proposta-logo-tag {
  font-size: 9.5px;
  color: #6B7280;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 600;
}
.proposta-header-info {
  text-align: right;
}
.proposta-numero-badge {
  display: inline-block;
  padding: 5px 11px;
  background: #4F46E5;
  color: white;
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.proposta-data-info {
  font-size: 11px;
  color: #4B5563;
  line-height: 1.5;
}
.proposta-data-info strong { color: #0A0E1A; font-weight: 600; }

/* === TÍTULO === */
.proposta-titulo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0A0E1A;
  margin-bottom: 4px;
  line-height: 1.15;
}
.proposta-subtitulo {
  font-size: 13px;
  color: #4B5563;
  margin-bottom: 18px;
  line-height: 1.5;
}
.proposta-subtitulo .accent {
  color: #4F46E5;
  font-weight: 600;
}

/* === SEÇÕES === */
.proposta-section {
  margin-bottom: 14px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.proposta-section-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  color: #4F46E5;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* === CLIENTE (2 colunas, compacto) === */
.proposta-cliente {
  background: #FAFAFB;
  border: 1px solid #E5E7EB;
  border-left: 3px solid #4F46E5;
  padding: 12px 16px;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 24px;
}
.proposta-cliente-row {
  display: flex;
  font-size: 12px;
  line-height: 1.45;
  align-items: baseline;
}
.proposta-cliente-row span:first-child {
  color: #6B7280;
  font-weight: 500;
  min-width: 72px;
  flex-shrink: 0;
}
.proposta-cliente-row span:last-child {
  color: #0A0E1A;
  font-weight: 600;
  word-break: break-word;
}

/* === ESCOPO === */
.proposta-escopo {
  font-size: 12.5px;
  color: #1F2937;
  white-space: pre-wrap;
  background: #FAFAFB;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  line-height: 1.55;
}

/* === TABELA INVESTIMENTO === */
.proposta-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.proposta-tabela th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 10px;
  border-bottom: 2px solid #0A0E1A;
}
.proposta-tabela th.right { text-align: right; }
.proposta-tabela td {
  padding: 9px 10px;
  border-bottom: 1px solid #E5E7EB;
  font-size: 12px;
  color: #1F2937;
  vertical-align: top;
}
.proposta-tabela td.right { text-align: right; font-variant-numeric: tabular-nums; }
.proposta-tabela tr { page-break-inside: avoid; break-inside: avoid; }
.proposta-item-name {
  font-weight: 700;
  color: #0A0E1A;
  font-size: 12.5px;
  margin-bottom: 2px;
}
.proposta-item-desc {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.4;
}
.proposta-recorrencia {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #EDE9FE;
  color: #5B21B6;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* === TOTAIS (alinhados à direita) === */
.proposta-totais-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.proposta-totais {
  background: #FAFAFB;
  border: 1px solid #E5E7EB;
  border-radius: 7px;
  padding: 10px 16px;
  min-width: 280px;
}
.proposta-totais-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  color: #4B5563;
}
.proposta-totais-row strong {
  color: #0A0E1A;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.proposta-totais-row.discount strong { color: #DC2626; }
.proposta-totais-row.mensal strong {
  color: #4F46E5;
  font-family: var(--font-display);
  font-size: 13.5px;
}
.proposta-totais-row.mensal small {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  margin-left: 2px;
}
.proposta-totais-row.final {
  border-top: 1.5px solid #0A0E1A;
  margin-top: 5px;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0A0E1A;
}
.proposta-totais-row.final strong {
  font-family: var(--font-display);
  font-size: 21px;
  color: #4F46E5;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* === CONDIÇÕES (grid 2x2 compacto) === */
.proposta-condicoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.proposta-condicao {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #FAFAFB;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
}
.proposta-condicao-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #4F46E5;
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.proposta-condicao-icon svg { width: 13px; height: 13px; stroke: white; }
.proposta-condicao-title {
  font-weight: 700;
  font-size: 12px;
  color: #0A0E1A;
  margin-bottom: 1px;
  font-family: var(--font-display);
}
.proposta-condicao-text {
  font-size: 11px;
  color: #6B7280;
  line-height: 1.4;
}

/* === GARANTIA + PRÓXIMOS PASSOS lado a lado === */
.proposta-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.proposta-garantia {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 7px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.proposta-garantia-shield {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: #10B981;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.proposta-garantia-shield svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: white;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proposta-garantia h4 {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: #065F46;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.proposta-garantia p {
  font-size: 11px;
  color: #047857;
  line-height: 1.45;
}

.proposta-passos-card {
  background: #FAFAFB;
  border: 1px solid #E5E7EB;
  border-radius: 7px;
  padding: 12px 14px;
}
.proposta-passos-card h4 {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  color: #4F46E5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.proposta-passos {
  display: flex;
  flex-direction: column;
  gap: 5px;
  counter-reset: passo;
}
.proposta-passo {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 11.5px;
  color: #1F2937;
  line-height: 1.4;
}
.proposta-passo::before {
  counter-increment: passo;
  content: counter(passo);
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* === CTA + CANAIS combinados (sem fundo escuro) === */
.proposta-cta-rodape {
  margin-top: 12px;
  padding: 14px 18px;
  background: #FAFAFB;
  border: 1px solid #E5E7EB;
  border-top: 3px solid #4F46E5;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.proposta-cta-msg {
  font-size: 12px;
  color: #4B5563;
  line-height: 1.5;
}
.proposta-cta-msg strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #0A0E1A;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.proposta-cta-canais {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proposta-canal {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #0A0E1A;
}
.proposta-canal svg {
  width: 14px; height: 14px;
  color: #4F46E5;
  flex-shrink: 0;
}

/* === RODAPÉ === */
.proposta-rodape {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  color: #9CA3AF;
}
.proposta-rodape-marca {
  font-family: var(--font-display);
  font-weight: 700;
  color: #0A0E1A;
}

/* === OBSERVAÇÕES === */
.proposta-observacoes {
  font-size: 11.5px;
  color: #4B5563;
  background: #FFFBEB;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #F59E0B;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* =========================================================
   PRINT STYLES — A4 print-safe (cores sólidas, no break)
   ========================================================= */

@media print {
  @page {
    size: A4;
    margin: 8mm 10mm;
  }
  /* Reset agressivo de alturas pra eliminar páginas em branco */
  html, body, .painel-body {
    background: white !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sidebar, .topbar, .orc-toolbar, .no-print, .toasts, .whats-float,
  .bottom-nav, .offline-banner, .sidebar-backdrop, .modal-overlay,
  .pendencias-card, .view-header, .view-header-row, .tabs, .filtros-row {
    display: none !important;
  }
  .app-shell {
    display: block !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .content {
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .view { display: none !important; }
  .view[data-view="orcamento"].active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Anti-página-em-branco: força o último elemento a não criar quebra depois */
  .view[data-view="orcamento"].active > *:last-child,
  .proposta-page > *:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
    margin-bottom: 0 !important;
  }

  /* === FORÇAR 1 PÁGINA A4 === */
  .proposta-page {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    color: #1F2937 !important;
  }

  /* HEADER compacto */
  .proposta-header {
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1.5px solid #E5E7EB !important;
  }
  .proposta-logo-mark { width: 38px !important; height: 38px !important; }
  .proposta-logo-name { font-size: 16px !important; }
  .proposta-logo-tag { font-size: 8px !important; margin-top: 2px !important; }
  .proposta-numero-badge { padding: 3px 8px !important; font-size: 9.5px !important; }
  .proposta-data-info { font-size: 9px !important; margin-top: 4px !important; }

  /* TÍTULO E SUBTÍTULO bem compactos */
  .proposta-titulo {
    font-size: 18px !important;
    margin: 6px 0 2px 0 !important;
    line-height: 1.15 !important;
  }
  .proposta-subtitulo {
    font-size: 10px !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
  }

  /* CARD do cliente compacto */
  .proposta-cliente {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }
  .proposta-cliente-label { font-size: 8px !important; margin-bottom: 2px !important; }
  .proposta-cliente-nome { font-size: 13px !important; margin-bottom: 2px !important; }
  .proposta-cliente-info { font-size: 9.5px !important; }

  /* SEÇÕES gerais */
  .proposta-section { margin-bottom: 7px !important; }
  .proposta-section-label {
    font-size: 8.5px !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.1em !important;
  }

  /* ITENS / tabela */
  .proposta-tabela { font-size: 9.5px !important; }
  .proposta-tabela th, .proposta-tabela td {
    padding: 5px 6px !important;
    font-size: 9.5px !important;
  }
  .proposta-tabela th { font-size: 8px !important; }
  .proposta-item-titulo { font-size: 10px !important; }
  .proposta-item-detalhe { font-size: 8.5px !important; line-height: 1.3 !important; margin-top: 2px !important; }

  /* TOTAIS compactos */
  .proposta-totais-wrap { padding: 6px 0 !important; }
  .proposta-totais-row { padding: 3px 0 !important; font-size: 10px !important; }
  .proposta-totais-row.final { padding-top: 6px !important; margin-top: 4px !important; }
  .proposta-totais-row.final strong { font-size: 16px !important; }
  .proposta-totais-mensal { font-size: 9.5px !important; padding: 4px 8px !important; margin-top: 4px !important; }

  /* CONDIÇÕES grid 2x2 */
  .proposta-condicoes {
    gap: 6px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .proposta-condicao {
    padding: 6px 8px !important;
    border-radius: 6px !important;
    gap: 6px !important;
  }
  .proposta-condicao-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
    flex-shrink: 0;
  }
  .proposta-condicao-icon svg { width: 11px !important; height: 11px !important; }
  .proposta-condicao-title { font-size: 9.5px !important; line-height: 1.2 !important; }
  .proposta-condicao-text { font-size: 8.5px !important; line-height: 1.3 !important; margin-top: 1px !important; }

  /* BOTTOM grid (garantia + próximos passos) */
  .proposta-bottom-grid { margin-bottom: 6px !important; gap: 6px !important; }
  .proposta-garantia {
    padding: 8px !important;
    gap: 6px !important;
  }
  .proposta-garantia-shield { width: 28px !important; height: 28px !important; }
  .proposta-garantia-shield svg { width: 14px !important; height: 14px !important; }
  .proposta-garantia h4 { font-size: 10px !important; margin: 0 0 2px 0 !important; }
  .proposta-garantia p { font-size: 8.5px !important; line-height: 1.3 !important; margin: 0 !important; }

  .proposta-passos-card { padding: 8px !important; }
  .proposta-passos-card h4 { font-size: 10px !important; margin: 0 0 4px 0 !important; }
  .proposta-passo {
    font-size: 8.5px !important;
    padding: 2px 0 !important;
    line-height: 1.3 !important;
  }

  /* CTA + rodapé bem fininhos */
  .proposta-cta-rodape {
    margin-top: 6px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
  }
  .proposta-rodape {
    margin-top: 6px !important;
    padding-top: 5px !important;
    font-size: 8px !important;
  }

  /* OBSERVAÇÕES (se houver) */
  .proposta-section p, .proposta-section .escopo-text {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
  }

  /* Anti-quebra rigoroso — TUDO numa só página */
  .proposta-page {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
  }
  .proposta-section,
  .proposta-bottom-grid,
  .proposta-garantia,
  .proposta-passos-card,
  .proposta-cta-rodape,
  .proposta-totais,
  .proposta-totais-wrap,
  .proposta-cliente,
  .proposta-condicoes,
  .proposta-condicao,
  .proposta-tabela tr,
  .proposta-rodape {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Forçar todas as cores sólidas a aparecerem na impressão */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* =========================================================
   CONFLITOS DE AGENDA — avisos no modal e destaque no calendário
   ========================================================= */

.conflito-aviso {
  display: none;
  padding: 14px 16px;
  background: linear-gradient(180deg, #FEF2F2, #FFF7F7);
  border: 1px solid #FECACA;
  border-left: 3px solid #EF4444;
  border-radius: 8px;
  font-size: 13px;
  color: #7F1D1D;
}
.conflito-aviso.show { display: block; }

.conflito-aviso-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  color: #991B1B;
  margin-bottom: 10px;
}
.conflito-aviso-head svg {
  color: #DC2626;
  flex-shrink: 0;
}

.conflito-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conflito-lista li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: white;
  border: 1px solid #FECACA;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1F2937;
  flex-wrap: wrap;
}
.conflito-tipo {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}
.conflito-tipo-reuniao {
  background: rgba(99,102,241,.15);
  color: #4F46E5;
}
.conflito-tipo-bloqueio {
  background: rgba(107,114,128,.15);
  color: #4B5563;
}
.conflito-titulo {
  font-weight: 600;
  color: #0A0E1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conflito-quem {
  font-size: 11.5px;
  color: #6B7280;
  white-space: nowrap;
}
.conflito-horario {
  font-size: 11.5px;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.conflito-rodape {
  margin-top: 10px;
  font-size: 12px;
  color: #B91C1C;
  font-style: italic;
}

@media (max-width: 600px) {
  .conflito-lista li {
    grid-template-columns: auto 1fr;
  }
  .conflito-quem, .conflito-horario {
    grid-column: 2;
    margin-left: 0;
  }
}

/* Eventos em conflito no calendário */
.cal-event.tem-conflito {
  outline: 2px solid #EF4444;
  outline-offset: -2px;
  box-shadow: 0 0 0 1px white inset, 0 4px 14px rgba(239,68,68,.18);
  position: relative;
}
.cal-event.tem-conflito::after {
  content: '⚠';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 11px;
  color: #DC2626;
  font-weight: 700;
  text-shadow: 0 0 2px white;
}

/* =========================================================
   CONFIGURAÇÕES
   ========================================================= */

.config-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.config-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  transition: border-color var(--t-fast);
}
.config-section:hover { border-color: rgba(99,102,241,.2); }

.config-section.danger-zone {
  border-color: rgba(239,68,68,.2);
  background: linear-gradient(180deg, rgba(239,68,68,.02), transparent 60%);
}

.config-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
}

.config-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.config-section-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 580px;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.config-grid .modal-grid-full { grid-column: 1 / -1; }

.config-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.config-actionbar {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}
.config-status {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.config-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
}
.config-status.dirty {
  color: var(--warning);
}
.config-status.dirty::before {
  background: var(--warning);
  animation: pulse 1.5s ease-in-out infinite;
}
.config-status.dirty::after {
  content: 'Alterações pendentes';
}
.config-status:not(.dirty)::after {
  content: 'Tudo salvo';
}
.config-status > span { display: none; }

@media (max-width: 768px) {
  .config-grid { grid-template-columns: 1fr; }
  .config-section { padding: 18px 20px; }
}

/* =========================================================
   DISPONIBILIDADE — CALENDÁRIO SEMANAL
   ========================================================= */

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  flex-wrap: wrap;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cal-nav-btn:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.cal-nav-btn svg { width: 16px; height: 16px; }
.cal-today {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cal-today:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.cal-range {
  margin-left: 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cal-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-filter-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cal-chip:hover { background: var(--surface-soft); }
.cal-chip.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.cal-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Legenda */
.cal-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.cal-legend-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.cal-legend-swatch.reuniao {
  background: white;
  border-color: #6366F1;
  box-shadow: inset 3px 0 0 #6366F1;
}
.cal-legend-swatch.bloqueio {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.4);
}
.cal-legend-swatch.andre { background: #6366F1; }
.cal-legend-swatch.eurides { background: #10B981; }

/* Calendário */
.cal-wrapper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cal-header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.cal-header-cell {
  padding: 10px 12px;
  text-align: center;
  border-left: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.cal-header-cell:first-child { border-left: none; }
.cal-header-cell.today {
  background: rgba(99,102,241,.08);
  color: var(--primary);
}
.cal-header-day {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.cal-header-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cal-header-cell.today .cal-header-num {
  color: var(--primary);
}

.cal-body {
  position: relative;
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  height: 720px; /* 16 horas * 45px */
  overflow-y: auto;
  background: var(--surface);
}
.cal-hours-col {
  background: var(--surface-soft);
  border-right: 1px solid var(--line);
  position: sticky;
  left: 0;
  z-index: 2;
}
.cal-hour-row {
  height: 45px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted-2);
  padding: 4px 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cal-day-col {
  position: relative;
  border-right: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background var(--t-fast);
}
.cal-day-col:last-child { border-right: none; }
.cal-day-col:hover { background: rgba(99,102,241,.02); }
.cal-day-col.today {
  background: rgba(99,102,241,.03);
}
.cal-day-col.today:hover {
  background: rgba(99,102,241,.06);
}
.cal-hour-line {
  height: 45px;
  border-bottom: 1px solid var(--line-soft);
}

/* Linha do horário atual (red line) */
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #EF4444;
  z-index: 5;
  pointer-events: none;
}
.cal-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #EF4444;
}

/* Eventos */
.cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  z-index: 3;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-event:hover {
  transform: translateX(1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 4;
}

/* Reunião AETech (sólido com borda) */
.cal-event.reuniao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  color: var(--ink);
}
.cal-event.reuniao.andre { border-left-color: #6366F1; }
.cal-event.reuniao.eurides { border-left-color: #10B981; }
.cal-event.reuniao.ambos {
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, #6366F1 50%, #10B981 50%) 1;
}

/* Bloqueio pessoal (translúcido) */
.cal-event.bloqueio {
  border: 1px dashed;
}
.cal-event.bloqueio.andre {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.4);
  color: #4338CA;
}
.cal-event.bloqueio.eurides {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.4);
  color: #047857;
}
.cal-event.bloqueio.ambos {
  background: rgba(107,114,128,.12);
  border-color: rgba(107,114,128,.4);
  color: #374151;
}

.cal-event-title {
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.cal-event-meta {
  font-size: 10px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-event-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(99,102,241,.15);
  color: #4F46E5;
  margin-right: 4px;
  vertical-align: middle;
}
.cal-event.reuniao .cal-event-badge { background: rgba(99,102,241,.12); color: #4F46E5; }

/* Eventos curtos (< 30min) — exibe só o título */
.cal-event.curto {
  padding: 3px 8px;
}
.cal-event.curto .cal-event-meta { display: none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .cliente-detalhe { grid-template-columns: 1fr; }
  .prospect-grid { grid-template-columns: 1fr; }
  .receita-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PENDÊNCIAS (follow-ups + pagamentos)
   ========================================================= */
.pendencias-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(220,38,38,0.04));
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}
.pendencias-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pendencias-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.pendencias-count {
  background: linear-gradient(135deg, #F59E0B, #DC2626);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  min-width: 28px;
  text-align: center;
}
.pendencias-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pendencia-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.pendencia-item:hover {
  border-color: var(--primary);
  transform: translateX(2px);
}
.pendencia-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pendencia-item-dot.atrasada { background: #DC2626; animation: pulse-action 2s infinite; }
.pendencia-item-dot.hoje { background: #F59E0B; }
.pendencia-item-dot.proxima { background: #10B981; }
.pendencia-item-content {
  flex: 1;
  min-width: 0;
}
.pendencia-item-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pendencia-item-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.pendencia-item-acao {
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(16,185,129,0.12);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 100px;
  cursor: pointer;
  font-weight: 600;
}
.pendencia-item-acao:hover { background: #10B981; color: white; }

/* =========================================================
   SYNC CHIP + OFFLINE BANNER + WHATSAPP BUTTONS
   ========================================================= */

/* Indicador de sincronização */
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 100px;
  font-size: 11.5px;
  color: #10B981;
  font-weight: 600;
  transition: all 0.25s;
  white-space: nowrap;
}
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  transition: background 0.25s;
}
.sync-chip[data-state="syncing"] {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.sync-chip[data-state="syncing"] .sync-dot {
  background: #F59E0B;
  animation: sync-pulse 1s ease-in-out infinite;
}
.sync-chip[data-state="offline"] {
  color: #94A3B8;
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
}
.sync-chip[data-state="offline"] .sync-dot { background: #94A3B8; }
.sync-chip[data-state="error"] {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}
.sync-chip[data-state="error"] .sync-dot { background: #DC2626; }
@keyframes sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Banner offline */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: slide-down 0.3s ease-out;
}
/* Garante que [hidden] vença o display:flex acima */
.offline-banner[hidden] { display: none !important; }
@keyframes slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Botão WhatsApp na ficha do cliente */
.btn-whatsapp-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border-radius: 100px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.18s;
  white-space: nowrap;
}
.btn-whatsapp-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}
.btn-whatsapp-mini:active { transform: scale(0.95); }

/* Botão WhatsApp na linha da tabela */
.btn-wa-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 50%;
  color: #25D366;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  vertical-align: middle;
}
.btn-wa-quick:hover {
  background: #25D366;
  color: white;
  transform: scale(1.1);
}
.btn-wa-quick:active { transform: scale(0.92); }

/* Pulse animation pra alerta de próxima ação */
@keyframes pulse-action {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* Kanban: confirmação visual ao soltar */
@keyframes kanban-drop-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); border-color: #10B981; transform: scale(1.02); }
  60% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); border-color: #10B981; }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); border-color: var(--line); transform: scale(1); }
}
.kanban-card.just-dropped {
  animation: kanban-drop-pulse 0.9s ease-out;
}

/* Badge mini (notificações) */
.badge-mini {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 16px;
  height: 16px;
  background: #DC2626;
  color: white;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.btn-icon { position: relative; }

/* === Botão hamburger (desktop oculto) === */
.topbar-menu-btn {
  display: none;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.topbar-menu-btn:hover { background: rgba(148,163,184,0.12); }
.topbar-menu-btn:active { transform: scale(0.95); }

/* === Backdrop do drawer mobile === */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 49;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.sidebar-backdrop.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* === Safe area iPhone (notch / dynamic island) === */
@supports (padding: env(safe-area-inset-top)) {
  .painel-body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* =========================================================
   RESPONSIVO — TABLET (≤ 1100px)
   ========================================================= */
@media (max-width: 1100px) {
  .topbar-search { max-width: 280px; }
}

/* =========================================================
   RESPONSIVO — MOBILE (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  /* Layout principal: sidebar vira drawer */
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }
  .sidebar.open { transform: translateX(0); }

  /* Mostra hamburger */
  .topbar-menu-btn { display: inline-flex; flex-shrink: 0; }

  /* Topbar compacta */
  .topbar {
    padding: 12px 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(12px);
    background: rgba(10, 14, 26, 0.85);
  }
  .topbar-title {
    font-size: 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-search { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn-icon { padding: 8px; }
  .btn-new {
    padding: 9px 12px;
    font-size: 13px;
  }
  .btn-new svg { width: 16px; height: 16px; }

  /* Content */
  .content { padding: 16px 14px 80px; }

  /* Dashboard */
  .greeting h1 { font-size: 22px; }
  .greeting-date { font-size: 12px; }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 22px; }
  .kpi-label { font-size: 11.5px; }

  /* Cards genéricos */
  .card { padding: 16px; border-radius: 14px; }
  .card-header h3 { font-size: 15px; }

  /* Tabs e filtros */
  .tabs, .filtros-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .filtros-row::-webkit-scrollbar { display: none; }
  .tab, .filtro-chip { flex-shrink: 0; }

  /* Tabelas: scroll horizontal */
  .tabela-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }

  /* Modais — tela cheia no mobile */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-overlay { padding: 0 !important; }
  .modal-grid { grid-template-columns: 1fr !important; }
  .modal-grid-full { grid-column: span 1 !important; }
  .modal-body { padding: 16px; max-height: calc(100vh - 130px); overflow-y: auto; }
  .modal-header { padding: 14px 16px; }
  .modal-footer {
    padding: 12px 16px;
    position: sticky;
    bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  .modal-footer button { flex: 1; min-height: 44px; }

  /* Formulários — campos maiores e mais touch-friendly */
  .field-painel input,
  .field-painel select,
  .field-painel textarea {
    font-size: 16px; /* Evita zoom no iOS ao focar */
    padding: 12px 14px;
    min-height: 44px;
  }

  /* Kanban: scroll horizontal com colunas maiores */
  .kanban {
    grid-template-columns: repeat(6, 85vw);
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .kanban-col { scroll-snap-align: start; }

  /* Calendário: força scroll horizontal */
  .calendar-grid { min-width: 700px; }
  .calendar-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cliente detalhe */
  .cliente-detalhe { grid-template-columns: 1fr; gap: 16px; }

  /* Pipeline cards no kanban */
  .kanban-card { padding: 12px; }

  /* Toasts mais visíveis */
  .toasts {
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .toast { font-size: 14px; padding: 14px 16px; }

  /* Botões com área de toque mínima de 44px (Apple HIG) */
  button:not(.tab):not(.filtro-chip):not(.btn-icon):not(.kanban-card *) {
    min-height: 40px;
  }
  .btn-secondary, .btn-primary, .btn-danger {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Buscar Negócios: form em coluna */
  .bn-search-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bn-resultados { gap: 12px; }

  /* Login: ajusta padding pra mobile */
  .auth-card {
    margin: 12px;
    padding: 28px 22px;
    max-width: calc(100vw - 24px);
  }
  .auth-logo-img { max-width: 180px; }
  .auth-card h1 { font-size: 22px; }
}

/* =========================================================
   RESPONSIVO — MOBILE PEQUENO (≤ 480px)
   ========================================================= */
@media (max-width: 480px) {
  .topbar-title { font-size: 15px; }
  .btn-new span,
  .btn-new {
    font-size: 0; /* esconde texto, só ícone */
  }
  .btn-new::after {
    content: '+';
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
  }
  .btn-new svg { display: none; }
  .greeting h1 { font-size: 20px; }
  .kpi-value { font-size: 20px; }
}

/* =========================================================
   BOTTOM NAV (Mobile only) — visual nativo iOS
   ========================================================= */
.bottom-nav { display: none; }

@media (max-width: 768px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bnav-item {
    background: transparent;
    border: 0;
    color: #94A3B8;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 500;
    transition: color 0.15s, transform 0.1s;
    min-height: 56px;
  }
  .bnav-item:active { transform: scale(0.92); }
  .bnav-item.active { color: #A78BFA; }
  .bnav-item.active svg { stroke: #A78BFA; }
  .bnav-item span {
    font-size: 10.5px;
    line-height: 1;
  }
  /* Botão "+" central elevado (FAB-like) */
  .bnav-new {
    position: relative;
  }
  .bnav-new svg {
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    color: white;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
    width: 48px !important;
    height: 48px !important;
    margin-top: -14px;
  }
  .bnav-new span { display: none; }

  /* Conteúdo deixa espaço pro bottom nav não cobrir o final */
  .content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toasts ficam acima do bottom nav */
  .toasts {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Modal footer não conflita com bottom nav */
  .modal-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide hamburger - bottom nav is the primary navigation now */
  /* (mas mantém disponível pra abrir sidebar com config/disponibilidade/etc) */
}

/* =========================================================
   AJUSTES EXTRA pra iPhone (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  /* PWA standalone: ajustes especiais */
  @media (display-mode: standalone) {
    .topbar {
      padding-top: max(20px, env(safe-area-inset-top));
    }
  }

  /* Topbar mais clean no mobile */
  .topbar-actions .btn-new {
    display: none; /* já tem o + no bottom nav */
  }
  .topbar { gap: 8px; }
  .topbar-title { font-weight: 600; }

  /* Modais com X grande no header */
  .modal-header [data-close] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
  }

  /* Sidebar drawer: bigger close area */
  .sidebar-brand {
    padding-top: max(20px, env(safe-area-inset-top));
  }

  /* Login: melhor proporção no iPhone */
  .auth-card {
    padding: 32px 24px;
    width: calc(100vw - 32px);
    border-radius: 24px;
  }
  .auth-logo-stack { margin-bottom: 12px; }
  .auth-card h1 {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .auth-card > p {
    margin-bottom: 16px;
    font-size: 14px;
  }

  /* Dashboard: KPIs em 2 colunas (não 4 ou 1) */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .kpi-card { padding: 14px; }
  .kpi-icon { width: 36px; height: 36px; }
  .kpi-label { font-size: 11px; }
  .kpi-value { font-size: 19px; }
  .kpi-trend { font-size: 11px; }

  /* Cards de cliente mais compactos */
  .cliente-card {
    padding: 12px;
    border-radius: 12px;
  }

  /* Calendário: dia atual em destaque, sem precisar ver tudo */
  .calendar-header { font-size: 12px; }
  .calendar-cell { font-size: 11.5px; padding: 6px 4px; }

  /* Botão flutuante de menu na sidebar (X pra fechar) */
  .sidebar::before {
    content: '✕';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
  }
}