/* =============================================================
   esc-crm — Components (CSS plano sobre tokens)
   Versão: 1.0 — 2026-04-27
   Importar APÓS tokens.css.
   ============================================================= */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-base); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--line-base);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum", "ss01";
  transition: background var(--dur-out) var(--ease-micro), color var(--dur-out) var(--ease-micro);
}
a { color: var(--brand-azul-link); text-decoration: none; }
a:hover { color: var(--brand-azul-link-hover); }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Foco universal */
:focus-visible { outline: 2px solid var(--state-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Tipografia utilitária */
.h1 { font-size: var(--font-h1); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.h2 { font-size: var(--font-h2); font-weight: var(--weight-bold); line-height: 1.25; }
.h3 { font-size: var(--font-h3); font-weight: var(--weight-semibold); line-height: 1.3; }
.h4 { font-size: var(--font-h4); font-weight: var(--weight-semibold); line-height: 1.35; }
.h5 { font-size: var(--font-h5); font-weight: var(--weight-semibold); line-height: 1.4; }
.h6 { font-size: var(--font-h6); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.text-sm  { font-size: var(--font-body-sm); }
.text-xs  { font-size: var(--font-small); }
.text-micro { font-size: var(--font-micro); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-semibold); }
.text-muted { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }
.text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); }
.text-gold { color: var(--brand-dourado); }
.numeric { font-variant-numeric: tabular-nums; }

/* Layout utilitários (mínimos — não vira Tailwind) */
.flex { display: flex; }
.col  { display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; }
.middle { align-items: center; }
.between { justify-content: space-between; }
.gap-xs { gap: var(--gap-xs); } .gap-sm { gap: var(--gap-sm); } .gap-md { gap: var(--gap-md); } .gap-lg { gap: var(--gap-lg); }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }

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

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 100;
  transition: width var(--dur-in-out) var(--ease-out), background var(--dur-out) var(--ease-micro);
  border-right: 1px solid var(--sidebar-border);
}
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-logo {
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--header-height);
}
.sidebar-logo .logo-mark {
  width: 36px; height: 36px;
  background: var(--brand-dourado);
  color: var(--brand-azul);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: 13px; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.sidebar-logo .logo-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.sidebar-logo .logo-title { font-size: 14px; font-weight: var(--weight-semibold); color: #fff; }
.sidebar-logo .logo-sub   { font-size: 10px; color: var(--brand-dourado); letter-spacing: 1.2px; text-transform: uppercase; }
.sidebar.collapsed .logo-text { display: none; }

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }

.nav-section {
  padding: 16px 22px 6px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sidebar-section);
  white-space: nowrap;
}
.sidebar.collapsed .nav-section { opacity: 0; height: 8px; padding: 8px 0; overflow: hidden; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  font-size: 13.5px; font-weight: var(--weight-medium);
  color: var(--sidebar-text);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--dur-micro) var(--ease-micro), color var(--dur-micro) var(--ease-micro);
  white-space: nowrap;
  text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--sidebar-text-active); }
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-active);
  border-left-color: var(--brand-dourado);
}
.nav-item .nav-icon { width: 18px; height: 18px; stroke: var(--sidebar-icon); flex-shrink: 0; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { stroke: var(--brand-dourado); }
.nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-item .nav-label { display: none; }
.nav-item .nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}
.sidebar.collapsed .nav-item .nav-badge { display: none; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-footer .avatar { flex-shrink: 0; }
.sidebar-footer .user-info { flex: 1; min-width: 0; }
.sidebar-footer .user-name { font-size: 12.5px; font-weight: var(--weight-semibold); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .user-role { font-size: 11px; color: rgba(255,255,255,0.5); }
.sidebar.collapsed .sidebar-footer .user-info { display: none; }

/* Header sticky */
.app-main {
  flex: 1; margin-left: var(--sidebar-width);
  min-height: 100vh;
  /* min-width: 0 é OBRIGATÓRIO em flex items para evitar que o filho com
     overflow horizontal (ex: kanban .board com 11 colunas wide) faça o
     pai inteiro estourar e arrastar o toolbar junto no scroll horizontal. */
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-width));
  display: flex; flex-direction: column;
  transition: margin-left var(--dur-in-out) var(--ease-out);
}
.sidebar.collapsed ~ .app-main { margin-left: var(--sidebar-width-collapsed); }

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--content-pad-x);
}
.header h1 { font-size: var(--font-h3); font-weight: var(--weight-semibold); color: var(--text-primary); }
.header .breadcrumb { font-size: 12px; color: var(--text-secondary); }

.content {
  flex: 1;
  padding: var(--content-pad-y) var(--content-pad-x);
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  font-size: 14px; font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro), transform var(--dur-micro) var(--ease-micro), box-shadow var(--dur-micro) var(--ease-micro);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; stroke-width: 1.75; }

.btn-primary { background: var(--brand-azul-link); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-azul-link-hover); }

.btn-gold { background: var(--brand-dourado); color: var(--brand-azul); box-shadow: 0 1px 2px rgba(200,168,75,0.3); }
.btn-gold:hover:not(:disabled) { background: var(--brand-dourado-hover); transform: translateY(-1px); box-shadow: var(--shadow-2); }

.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover:not(:disabled) { background: var(--state-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--state-hover); color: var(--text-primary); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #A0301F; }

.btn-icon { padding: 8px; width: 36px; height: 36px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* =============================================================
   CARDS
   ============================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--pad-card);
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: var(--font-h4); font-weight: var(--weight-semibold); color: var(--text-primary); }
.card-subtitle { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: box-shadow var(--dur-micro), transform var(--dur-micro);
}
.kpi-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi-card .kpi-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-card .kpi-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.kpi-icon.blue   { background: var(--info-bg); color: var(--info); }
.kpi-icon.green  { background: var(--success-bg); color: var(--success); }
.kpi-icon.gold   { background: var(--brand-dourado-soft); color: var(--brand-dourado); }
.kpi-icon.red    { background: var(--danger-bg); color: var(--danger); }
.kpi-icon.amber  { background: var(--warning-bg); color: var(--warning); }
.kpi-icon.purple { background: rgba(124,58,237,0.12); color: #7C3AED; }

.kpi-card .kpi-body { flex: 1; min-width: 0; }
.kpi-card .kpi-label { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--weight-medium); margin-bottom: 4px; }
.kpi-card .kpi-value { font-size: 26px; font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-delta { font-size: 11.5px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; font-weight: var(--weight-semibold); }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* =============================================================
   BADGES & TAGS
   ============================================================= */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 11.5px; font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-info    { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--bg-surface-3); color: var(--text-secondary); }
.badge-gold    { background: var(--brand-dourado-soft); color: var(--brand-dourado); }
.badge-ai      { background: rgba(124,58,237,0.12); color: #7C3AED; }
.badge-ai::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Tag de origem (com bolinha de cor) */
.origin-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 11px; font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.origin-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.origin-instagram { color: var(--origin-instagram); background: rgba(225,48,108,0.10); }
.origin-inlead    { color: var(--origin-inlead); background: rgba(124,58,237,0.10); }
.origin-meta      { color: var(--origin-meta); background: rgba(24,119,242,0.10); }
.origin-lp        { color: var(--origin-lp); background: rgba(14,165,233,0.10); }
.origin-trafego   { color: var(--origin-trafego); background: var(--brand-dourado-soft); }
.origin-organico  { color: var(--origin-organico); background: var(--success-bg); }
.origin-indicacao { color: var(--text-primary); background: var(--bg-surface-3); }
.origin-chat      { color: var(--origin-chat); background: rgba(37,211,102,0.10); }
.origin-ativa     { color: var(--origin-ativa); background: var(--warning-bg); }

/* =============================================================
   AVATARS
   ============================================================= */

.avatar {
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--weight-semibold); font-size: 12px;
  color: #fff; background: var(--avatar-1);
  flex-shrink: 0;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.avatar.sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: 10px; }
.avatar.lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: 14px; }
.avatar.xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: 22px; }
.avatar[data-color="2"]  { background: var(--avatar-2); color: var(--brand-azul); }
.avatar[data-color="3"]  { background: var(--avatar-3); }
.avatar[data-color="4"]  { background: var(--avatar-4); }
.avatar[data-color="5"]  { background: var(--avatar-5); }
.avatar[data-color="6"]  { background: var(--avatar-6); }
.avatar[data-color="7"]  { background: var(--avatar-7); }
.avatar[data-color="8"]  { background: var(--avatar-8); }
.avatar[data-color="9"]  { background: var(--avatar-9); }
.avatar[data-color="10"] { background: var(--avatar-10); }
.avatar[data-color="11"] { background: var(--avatar-11); }
.avatar[data-color="12"] { background: var(--avatar-12); }

.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--bg-surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* =============================================================
   FORMS
   ============================================================= */

.form-group { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-size: 12px; font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-azul-link);
  box-shadow: 0 0 0 3px var(--state-focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

.input-with-icon { position: relative; }
.input-with-icon .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.input-with-icon .input { padding-left: 38px; }

.checkbox, .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand-azul-link); }

.toggle { position: relative; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .switch {
  width: 36px; height: 20px;
  background: var(--border-default);
  border-radius: 999px;
  position: relative;
  transition: background var(--dur-micro);
}
.toggle .switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur-micro);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle input:checked + .switch { background: var(--brand-azul-link); }
.toggle input:checked + .switch::after { transform: translateX(16px); }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; overflow-x: auto; }
.tab {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"], .tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-dourado);
  font-weight: var(--weight-semibold);
}

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

.kanban-board {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x proximity;
}
.kanban-board::-webkit-scrollbar { height: 10px; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px; }

.kanban-column {
  flex-shrink: 0;
  width: 296px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 180px);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
.kanban-column[data-stage="lost"]::before,
.kanban-column[data-stage="won"]::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.kanban-column[data-stage="lost"]::before { background: var(--danger); }
.kanban-column[data-stage="won"]::before { background: var(--success); }
.kanban-column[data-stage="entrada"]::before { background: var(--info); content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }
.kanban-column[data-stage="qualificado"]::before { background: var(--brand-dourado); content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; }

.kanban-column-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 4px;
}
.kanban-column-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.kanban-column-title .name {
  font-size: 12.5px; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-primary);
}
.kanban-column-title .count {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px; font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.kanban-column-meta {
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.kanban-cards {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-cards::-webkit-scrollbar { width: 6px; }
.kanban-cards::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px; }

.kanban-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-1);
  cursor: grab;
  transition: box-shadow var(--dur-micro), transform var(--dur-micro), border-color var(--dur-micro);
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  border-color: var(--border-default);
}
.kanban-card[data-dragging="true"] {
  box-shadow: var(--shadow-drag);
  transform: rotate(1.5deg);
  opacity: 0.92;
  cursor: grabbing;
}
.kanban-card .card-name { font-size: 13.5px; font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; }
.kanban-card .card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kanban-card .card-value { font-size: 13px; font-weight: var(--weight-bold); color: var(--brand-dourado); font-variant-numeric: tabular-nums; }
.kanban-card .card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.kanban-card .card-meta .clock { width: 12px; height: 12px; }
.kanban-card .task-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--warning-bg);
}
.kanban-card .task-dot.overdue { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

.kanban-drop-zone {
  border: 2px dashed var(--brand-azul-link);
  background: var(--info-bg);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  font-size: 12px; font-weight: var(--weight-semibold);
  color: var(--brand-azul-link);
}

/* =============================================================
   TIMELINE
   ============================================================= */

.timeline {
  position: relative;
  padding-left: 36px;
}
.timeline::before {
  content: "";
  position: absolute; left: 15px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border-subtle);
}
.timeline-event {
  position: relative;
  margin-bottom: 16px;
}
.timeline-event:last-child { margin-bottom: 0; }
.timeline-event .marker {
  position: absolute;
  left: -29px; top: 0;
  width: 32px; height: 32px;
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.timeline-event .marker svg { width: 16px; height: 16px; stroke-width: 1.75; color: var(--text-secondary); }
.timeline-event .body {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.timeline-event .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-secondary);
  margin-bottom: 4px;
}
.timeline-event .meta .author { font-weight: var(--weight-semibold); color: var(--text-primary); }
.timeline-event .content { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.timeline-event[data-type="whatsapp"]    .marker { border-color: #25D366; color: #25D366; background: rgba(37,211,102,0.10); }
.timeline-event[data-type="whatsapp"]    .marker svg { color: #25D366; }
.timeline-event[data-type="note"]        .marker { border-color: var(--text-secondary); }
.timeline-event[data-type="stage"]       .marker { border-color: var(--brand-azul-link); background: var(--info-bg); }
.timeline-event[data-type="stage"]       .marker svg { color: var(--brand-azul-link); }
.timeline-event[data-type="task"]        .marker { border-color: var(--brand-dourado); background: var(--brand-dourado-soft); }
.timeline-event[data-type="task"]        .marker svg { color: var(--brand-dourado); }
.timeline-event[data-type="ai"]          .marker { border-color: #7C3AED; background: rgba(124,58,237,0.12); }
.timeline-event[data-type="ai"]          .marker svg { color: #7C3AED; }
.timeline-event[data-type="meeting"]     .marker { border-color: var(--brand-azul-link); background: var(--info-bg); }
.timeline-event[data-type="meeting"]     .marker svg { color: var(--brand-azul-link); }

/* Chat bubble (whatsapp) */
.chat-bubble {
  background: rgba(37,211,102,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 85%;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
  position: relative;
  margin-top: 6px;
}
.chat-bubble.outgoing { background: rgba(43,95,192,0.08); margin-left: auto; }
.chat-bubble .time { font-size: 10.5px; color: var(--text-secondary); margin-top: 4px; display: block; text-align: right; }

/* =============================================================
   MODAL & DROPDOWN
   ============================================================= */

.modal-overlay {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fade-in 200ms var(--ease-out);
}
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  max-width: var(--max-modal-width);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: slide-up 250ms var(--ease-out);
}
.modal-lg { max-width: var(--max-modal-width-lg); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal-title { font-size: var(--font-h3); font-weight: var(--weight-semibold); color: var(--text-primary); }
.modal-body { padding: 24px; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; justify-content: flex-end; }

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: 6px;
  min-width: 200px;
  z-index: 200;
  animation: slide-up 150ms var(--ease-out);
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
.dropdown-item:hover { background: var(--state-hover); }
.dropdown-item .icon { width: 16px; height: 16px; color: var(--text-secondary); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger .icon { color: var(--danger); }
.dropdown-separator { height: 1px; background: var(--border-subtle); margin: 6px 0; }

/* =============================================================
   LEAD DETAIL
   ============================================================= */

.lead-detail { display: grid; grid-template-columns: 1fr var(--detail-panel-width); gap: 16px; align-items: start; }
@media (max-width: 1280px) { .lead-detail { grid-template-columns: 1fr; } }

.field-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.field-group-header {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-size: 14px; font-weight: var(--weight-semibold);
  color: var(--text-primary);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-micro);
}
.field-group-header:hover { background: var(--state-hover); }
.field-group[data-open="true"] .field-group-header { border-bottom-color: var(--border-subtle); }
.field-group .chevron { transition: transform var(--dur-micro); }
.field-group[data-open="true"] .chevron { transform: rotate(90deg); }
.field-group-body { padding: 8px 18px 18px; display: none; }
.field-group[data-open="true"] .field-group-body { display: block; }

.field-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
}
.field-row:last-child { border-bottom: none; }
.field-row .field-label { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--weight-medium); }
.field-row .field-value { font-size: 14px; color: var(--text-primary); }
.field-row .field-value.empty { color: var(--text-disabled); font-style: italic; }

/* =============================================================
   TABLE
   ============================================================= */

.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11.5px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 16px;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--state-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* =============================================================
   SKELETON / LOADING
   ============================================================= */

.skeleton {
  background: var(--bg-skeleton);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fade-in  { from{opacity:0} to{opacity:1} }
@keyframes slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes slide-from-right { from{transform:translateX(100%)} to{transform:none} }

/* =============================================================
   THEME TOGGLE (cluster de 3 botões)
   ============================================================= */

.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--bg-surface);
  gap: 2px;
}
.theme-toggle button {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--brand-azul);
  color: #fff;
}
.theme-toggle button svg { width: 14px; height: 14px; }

/* =============================================================
   EMPTY STATE
   ============================================================= */

.empty-state {
  text-align: center; padding: 48px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--text-secondary);
}
.empty-state .empty-icon { color: var(--brand-dourado); opacity: 0.6; }
.empty-state .empty-title { font-size: var(--font-h4); font-weight: var(--weight-semibold); color: var(--text-primary); }
.empty-state .empty-msg { font-size: 13.5px; color: var(--text-secondary); max-width: 380px; }

/* =============================================================
   GRIDS DE DASHBOARD
   ============================================================= */

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .lead-detail { grid-template-columns: 1fr; }
}

/* =============================================================
   FUNNEL CHART (SVG-friendly classes)
   ============================================================= */

.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel-row { display: grid; grid-template-columns: 1fr 80px; gap: 12px; align-items: center; }
.funnel-bar {
  position: relative;
  height: 32px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.funnel-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-azul-link), var(--brand-dourado));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; padding-left: 12px;
  color: #fff; font-size: 12.5px; font-weight: var(--weight-semibold);
  transition: width 400ms var(--ease-out);
}
.funnel-label { font-size: 12.5px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* =============================================================
   KANBAN PREMIUM — Apple / Hermes / Loro Piana
   Classes que ESTENDEM o kanban base. Aplicadas via .premium
   no .app-shell ou diretamente nos componentes do mockup.
   ============================================================= */

/* ---------- Tipografia serifada utilitária ---------- */
.serif        { font-family: var(--font-serif); }
.serif-display { font-family: var(--font-serif-display); }
.eyebrow {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm-taupe);
}
.italic { font-style: italic; }

/* Linha fina dourada com losango central — ornamento institucional */
.gold-rule {
  position: relative;
  height: 1px;
  background: var(--gold-hairline);
  margin: 8px 0;
}
.gold-rule::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  background: var(--brand-dourado);
  transform: translate(-50%, -50%) rotate(45deg);
}
.gold-rule.left-anchored::before { left: 0; transform: translate(0, -50%) rotate(45deg); }

/* ---------- Body em modo creme ---------- */
body.premium {
  background: var(--bg-cream);
}

/* ---------- Sidebar refinada (sem reescrever a base) ---------- */
.sidebar.premium {
  background: var(--sidebar-bg);
  /* Textura ruído sutilíssimo (SVG inline em base64-friendly format) */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, rgba(0,0,0,0.04) 100%),
    var(--sidebar-bg, var(--brand-azul));
}
.sidebar.premium .sidebar-logo {
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 18px;
  gap: 10px;
  border-bottom: none;
  position: relative;
}
.sidebar.premium .sidebar-logo .logo-row {
  display: flex; align-items: center; gap: 12px;
}
.sidebar.premium .sidebar-logo .logo-mark {
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--brand-dourado);
  color: var(--brand-dourado);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
}
.sidebar.premium .logo-firm-name {
  font-family: var(--font-serif-display);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}
.sidebar.premium .logo-firm-sub {
  font-family: var(--font-serif);
  font-size: 10.5px;
  color: var(--brand-dourado);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: italic;
}
.sidebar.premium .sidebar-logo::after {
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: 0;
  height: 1px;
  background: var(--gold-hairline-2);
}
.sidebar.premium .sidebar-logo .logo-ornament {
  position: absolute;
  left: 50%; bottom: -3px;
  width: 5px; height: 5px;
  background: var(--brand-dourado);
  transform: translateX(-50%) rotate(45deg);
}

.sidebar.premium .nav-section {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.30em;
  font-weight: 500;
  padding: 22px 24px 10px;
  color: rgba(255,255,255,0.40);
  text-transform: uppercase;
  position: relative;
}

.sidebar.premium .nav-item {
  padding: 11px 22px 11px 19px;
  border-left: 3px solid transparent;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.sidebar.premium .nav-item.active {
  background: rgba(200, 168, 75, 0.10);
  border-left-color: var(--brand-dourado);
  color: #fff;
}
.sidebar.premium .nav-item.active .nav-icon { stroke: var(--brand-dourado); }
.sidebar.premium .nav-item .nav-badge {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 0 7px;
}
.sidebar.premium .sidebar-footer {
  border-top: 1px solid var(--gold-hairline);
  padding: 14px 22px;
}

/* ---------- Header refinado ---------- */
.header.premium {
  background: var(--bg-cream);
  border-bottom: 1px solid var(--gold-hairline-2);
  padding: 0 32px;
}
.header.premium .page-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--warm-taupe);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.header.premium .page-title {
  font-family: var(--font-serif-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
}
.header.premium .page-title .ampersand {
  color: var(--brand-dourado);
  font-style: italic;
  font-weight: 400;
  margin: 0 4px;
}

/* Filtro chip — REGRA REMOVIDA (sobra do mockup "Loro Piana" descartado).
   A regra real está mais abaixo (Sprint 0.3 — kanban toolbar) e a regra
   global é definida em `.chip` no fim do arquivo (Sprint 0.5).
   Mantido o seletor vazio só para não quebrar dependências de regra adjacente. */
.chip svg { width: 14px; height: 14px; opacity: 0.7; }
.chip .chip-caret { width: 10px; height: 10px; opacity: 0.5; }

/* Toggle de tema premium (sol / lua dentro de círculo dourado discreto) */
.theme-pill {
  display: inline-flex; align-items: center;
  width: 56px; height: 28px;
  border: 1px solid var(--warm-line);
  border-radius: 999px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur-micro);
}
.theme-pill:hover { border-color: var(--brand-dourado); }
.theme-pill .indicator {
  width: 22px; height: 22px;
  background: var(--brand-dourado);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-azul);
  transition: transform var(--dur-out) var(--ease-out), background var(--dur-out) var(--ease-out);
}
.theme-pill .indicator svg { width: 12px; height: 12px; stroke-width: 2; }
:root[data-theme="dark"] .theme-pill .indicator { transform: translateX(28px); background: var(--brand-dourado); color: var(--bg-base); }

/* Botão dourado premium — texto serifado, hover elevação suave */
.btn-gold-premium {
  background: var(--brand-dourado);
  color: var(--brand-azul);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-dourado);
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: transform var(--dur-out) var(--ease-out), box-shadow var(--dur-out) var(--ease-out), background var(--dur-micro);
}
.btn-gold-premium:hover {
  background: var(--brand-dourado-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 168, 75, 0.32);
}
.btn-gold-premium svg { width: 14px; height: 14px; stroke-width: 1.75; }

.btn-ghost-serif {
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color var(--dur-micro), color var(--dur-micro);
}
.btn-ghost-serif:hover { border-color: var(--warm-line); color: var(--brand-dourado); }
.btn-ghost-serif svg { width: 14px; height: 14px; }

/* ---------- Sumário "boutique" do funil ---------- */
.funnel-summary-premium {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 18px 0;
  border-top: 1px solid var(--gold-hairline);
  border-bottom: 1px solid var(--gold-hairline);
  margin-bottom: 28px;
}
.funnel-summary-premium .stat {
  padding: 4px 18px;
  border-right: 1px solid var(--warm-line);
  display: flex; flex-direction: column; gap: 4px;
}
.funnel-summary-premium .stat:last-child { border-right: none; }
.funnel-summary-premium .stat .v {
  font-family: var(--font-serif-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.funnel-summary-premium .stat .l {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--warm-taupe);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- Kanban board premium ---------- */
.kanban-board.premium {
  gap: 20px;
  padding: 0 0 32px;
}

.kanban-column.premium {
  width: 308px;
  background: var(--bg-cream-2);
  border: 1px solid var(--warm-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.kanban-column.premium::before { display: none; } /* removemos a faixa do base */

.kanban-column-header.premium {
  padding: 22px 20px 16px;
  border-bottom: none;
  background: transparent;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}

.kanban-column-header.premium .stage-eyebrow {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.kanban-column-header.premium[data-stage="entrada"] .stage-eyebrow         { color: var(--stage-entrada); }
.kanban-column-header.premium[data-stage="pre"] .stage-eyebrow             { color: var(--stage-pre); }
.kanban-column-header.premium[data-stage="desqualificado"] .stage-eyebrow  { color: var(--stage-desqualificado); }
.kanban-column-header.premium[data-stage="qualificacao"] .stage-eyebrow    { color: var(--stage-qualificacao); }
.kanban-column-header.premium[data-stage="qualificado"] .stage-eyebrow     { color: var(--stage-qualificado); }
.kanban-column-header.premium[data-stage="reuniao-ag"] .stage-eyebrow      { color: var(--stage-reuniao-ag); }
.kanban-column-header.premium[data-stage="noshow"] .stage-eyebrow          { color: var(--stage-noshow); }
.kanban-column-header.premium[data-stage="reuniao-real"] .stage-eyebrow    { color: var(--stage-reuniao-real); }
.kanban-column-header.premium[data-stage="proposta"] .stage-eyebrow        { color: var(--stage-proposta); }
.kanban-column-header.premium[data-stage="contrato"] .stage-eyebrow        { color: var(--stage-contrato); }
.kanban-column-header.premium[data-stage="standby"] .stage-eyebrow         { color: var(--stage-standby); }

.kanban-column-header.premium .stage-rule {
  height: 1px;
  background: var(--gold-hairline);
  position: relative;
  margin: 0;
}
.kanban-column-header.premium .stage-rule::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  background: var(--brand-dourado);
  transform: translateY(-50%) rotate(45deg);
}

.kanban-column-header.premium .stage-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.kanban-column-header.premium .stage-count {
  font-family: var(--font-serif-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kanban-column-header.premium .stage-count-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--warm-taupe);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.kanban-column-header.premium .stage-total {
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.kanban-column-header.premium .stage-total .currency {
  color: var(--warm-taupe);
  font-style: italic;
  font-size: 10.5px;
  margin-right: 2px;
}

.kanban-column-header.premium .stage-spark {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px;
}
.kanban-column-header.premium .stage-spark svg {
  height: 16px;
  flex: 1;
  opacity: 0.85;
}
.kanban-column-header.premium .stage-stagnant-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stage-noshow);
  margin-left: 8px;
  box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.10);
}

.kanban-cards.premium {
  padding: 12px;
  gap: 12px;
  background: transparent;
}

/* ---------- CARD PREMIUM ---------- */
.kanban-card.premium {
  background: var(--bg-paper);
  border: 1px solid var(--warm-line);
  border-radius: var(--radius-md);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur-out) var(--ease-out),
              box-shadow var(--dur-out) var(--ease-out),
              border-color var(--dur-out) var(--ease-out);
  position: relative;
  overflow: hidden;
  animation: paper-settle 320ms var(--ease-out) backwards;
}
.kanban-card.premium::before {
  /* marble accent — gradient diagonal sutilíssimo */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marble-accent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease-out);
}
.kanban-card.premium:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-paper-lift);
  border-color: var(--gold-hairline-strong);
}
.kanban-card.premium:hover::before { opacity: 1; }

.kanban-card.premium.is-premium {
  border-color: var(--gold-hairline-strong);
  box-shadow: var(--shadow-card-gold);
}
.kanban-card.premium.is-premium::before { opacity: 0.6; }

@keyframes paper-settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Top row: avatar serifado + nome + origem + more */
.kanban-card.premium .card-top {
  display: flex; align-items: flex-start; gap: 12px;
  position: relative; z-index: 1;
}
.kanban-card.premium .lead-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif-display);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: var(--warm-sepia);
  border: 1px solid rgba(0,0,0,0.04);
}
/* 8 tons sutis para hash-de-nome (sépia / azul-marinho / oliva / pedra...) */
.kanban-card.premium .lead-avatar[data-tone="1"] { background: linear-gradient(135deg, #6B4423 0%, #4A2E16 100%); }
.kanban-card.premium .lead-avatar[data-tone="2"] { background: linear-gradient(135deg, #16315F 0%, #0A1A3A 100%); }
.kanban-card.premium .lead-avatar[data-tone="3"] { background: linear-gradient(135deg, #6B7A4E 0%, #4A5535 100%); }
.kanban-card.premium .lead-avatar[data-tone="4"] { background: linear-gradient(135deg, #8B7355 0%, #6B5740 100%); }
.kanban-card.premium .lead-avatar[data-tone="5"] { background: linear-gradient(135deg, #2E5A3E 0%, #1F4128 100%); }
.kanban-card.premium .lead-avatar[data-tone="6"] { background: linear-gradient(135deg, #7A2E2E 0%, #5A1F1F 100%); }
.kanban-card.premium .lead-avatar[data-tone="7"] { background: linear-gradient(135deg, #B8993F 0%, #8C7128 100%); }
.kanban-card.premium .lead-avatar[data-tone="8"] { background: linear-gradient(135deg, #4A5578 0%, #2E3650 100%); }

.kanban-card.premium .card-identity {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.kanban-card.premium .lead-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kanban-card.premium .origin-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.kanban-card.premium .origin-mark::before {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.kanban-card.premium .origin-mark[data-origin="instagram"] { color: var(--origin-instagram); }
.kanban-card.premium .origin-mark[data-origin="inlead"]    { color: var(--warm-sepia); }
.kanban-card.premium .origin-mark[data-origin="meta"]      { color: var(--brand-azul-3); }
.kanban-card.premium .origin-mark[data-origin="lp"]        { color: var(--origin-lp); }
.kanban-card.premium .origin-mark[data-origin="trafego"]   { color: var(--brand-dourado); }
.kanban-card.premium .origin-mark[data-origin="organico"]  { color: var(--success); }
.kanban-card.premium .origin-mark[data-origin="indicacao"] { color: var(--text-primary); }
.kanban-card.premium .origin-mark[data-origin="chat"]      { color: var(--origin-chat); }
.kanban-card.premium .origin-mark[data-origin="ativa"]     { color: var(--warning); }
.kanban-card.premium .origin-mark[data-origin="whatsapp"]  { color: var(--origin-chat); }

.kanban-card.premium .card-more {
  color: var(--warm-stone);
  cursor: pointer;
  padding: 0 4px;
  opacity: 0;
  transition: opacity var(--dur-micro), color var(--dur-micro);
  font-size: 18px;
  line-height: 1;
}
.kanban-card.premium:hover .card-more { opacity: 1; }
.kanban-card.premium .card-more:hover { color: var(--brand-dourado); }

/* Linha central: valor + SDR */
.kanban-card.premium .card-value-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: relative; z-index: 1;
}
.kanban-card.premium .lead-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.kanban-card.premium .lead-value .currency {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--warm-taupe);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.kanban-card.premium .lead-value-empty {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--warm-stone);
  letter-spacing: 0.06em;
}

.kanban-card.premium .sdr-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: var(--brand-azul);
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.kanban-card.premium .sdr-avatar[data-color="2"] { background: var(--brand-dourado); color: var(--brand-azul); }
.kanban-card.premium .sdr-avatar[data-color="10"]{ background: #16315F; }

/* Saúde do lead — mini-bar com gradiente */
.kanban-card.premium .health-bar {
  height: 3px;
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  overflow: hidden;
  position: relative; z-index: 1;
}
:root[data-theme="dark"] .kanban-card.premium .health-bar { background: rgba(255,255,255,0.06); }
.kanban-card.premium .health-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--health-cool) 0%, var(--health-warm) 60%, var(--health-hot) 100%);
  border-radius: 999px;
  transition: width var(--dur-out) var(--ease-out);
}

/* Footer indicators */
.kanban-card.premium .card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  position: relative; z-index: 1;
}
.kanban-card.premium .card-footer .stage-time {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--warm-taupe);
  letter-spacing: 0.04em;
}
.kanban-card.premium .card-footer .stage-time.alert { color: var(--stage-noshow); }
.kanban-card.premium .indicators {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--warm-stone);
}
.kanban-card.premium .indicator {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--warm-taupe);
  letter-spacing: 0.02em;
}
.kanban-card.premium .indicator svg { width: 13px; height: 13px; stroke-width: 1.5; }
.kanban-card.premium .indicator.task { color: var(--brand-dourado); }
.kanban-card.premium .indicator.task.overdue { color: var(--stage-noshow); }
.kanban-card.premium .indicator.chat { color: var(--origin-chat); }
.kanban-card.premium .indicator.assistant {
  color: var(--brand-azul-3);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.10em;
}
.kanban-card.premium .indicator.assistant svg { color: var(--brand-dourado); }

/* Empty card de coluna vazia */
.kanban-empty-premium {
  padding: 32px 20px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--warm-taupe);
  letter-spacing: 0.04em;
  border: 1px dashed var(--warm-line);
  border-radius: var(--radius-md);
  margin: 4px;
}

/* Watermark institucional */
.legal-watermark {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 110px;
  height: 110px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  color: var(--brand-azul);
}
:root[data-theme="dark"] .legal-watermark { opacity: 0.06; color: var(--brand-dourado); }

/* "Esc" monogram em pontos de respiro */
.monogram {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--brand-dourado);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
}
.monogram::before, .monogram::after {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--gold-hairline);
}

/* Toolbar refinada */
.funnel-toolbar.premium {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gold-hairline);
  margin-bottom: 24px;
}
.funnel-toolbar.premium .toolbar-divider {
  width: 1px; height: 20px; background: var(--warm-line);
}
.funnel-toolbar.premium .meta-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--warm-taupe);
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Search-pill premium */
.search-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid var(--warm-line);
  border-radius: 999px;
  width: 320px;
  transition: border-color var(--dur-micro);
}
.search-pill:focus-within { border-color: var(--brand-dourado); }
.search-pill svg { width: 14px; height: 14px; color: var(--warm-taupe); }
.search-pill input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.search-pill input::placeholder { color: var(--warm-stone); font-style: italic; }
.search-pill .kbd {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--warm-taupe);
  border: 1px solid var(--warm-line);
  padding: 2px 6px;
  border-radius: 4px;
}

/* =============================================================
   SPRINT 0.3 — Kanban app, Lead Detail, Modal "Novo lead"
   Estilos novos colocados após os mockups premium para não
   quebrar nada existente.
   ============================================================= */

/* ---------- Kanban: toolbar de filtros ---------- */
.kanban-toolbar {
  display: flex; align-items: center; gap: 12px;
  /* Sprint 2.1 — padding-top maior pra dar respiro do header acima.
     Aplicado globalmente (kanban + lista compartilham essa toolbar). */
  padding: 24px var(--content-pad-x) 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  /* Fica grudado no topo (logo abaixo do header sticky) e cobre toda a
     viewport horizontalmente, mesmo se algo dentro do .board tentar
     empurrar. position: sticky com left:0 garante que ele não acompanha
     o scroll horizontal do board. */
  position: sticky;
  top: var(--header-height);
  left: 0;
  z-index: 40;
}
.kanban-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.kanban-kpis { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kpi-pill {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.kpi-pill strong { color: var(--text-primary); font-weight: 700; }
.kpi-pill.kpi-gold {
  background: var(--brand-dourado-soft);
  border-color: var(--gold-hairline);
  color: var(--brand-dourado);
}

.kanban-toolbar .chip {
  /* Anula estilos "premium" residuais (font-serif/uppercase/letter-spacing
     do bloco luxo descartado mais acima). Sprint 0.3 usa Inter normal. */
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  transition: background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.kanban-toolbar .chip:hover {
  background: var(--state-hover);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.kanban-toolbar .chip.active {
  background: var(--brand-azul) !important;
  color: #fff !important;
  border-color: var(--brand-azul) !important;
}
.kanban-toolbar .chip svg { opacity: 1; }
[data-theme="dark"] .chip.active { background: var(--brand-azul-link); border-color: var(--brand-azul-link); }
.chip svg { width: 14px; height: 14px; }

/* ---------- Kanban board layout ---------- */
.board {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px var(--content-pad-x) 24px;
}
.board-inner {
  display: flex;
  gap: 14px;
  min-width: max-content;
  align-items: flex-start;
}

.kanban-column {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--header-height) - 110px);
  overflow: hidden;
  position: relative;
}
.kanban-column .col-stripe {
  height: 3px;
  width: 100%;
  background: var(--text-disabled);
}
.col-empty {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--text-disabled);
  padding: 14px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}
.kanban-cards.drag-over {
  background: var(--info-bg);
  outline: 2px dashed var(--brand-azul-link);
  outline-offset: -4px;
}

.kanban-card { text-decoration: none; }
.kanban-card .card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.kanban-card .card-name {
  flex: 1;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kanban-card .card-value {
  font-size: 13px; font-weight: 700;
  color: var(--brand-dourado);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kanban-card .card-sdr {
  display: inline-flex; align-items: center; gap: 6px;
}
.kanban-card .card-time {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-tertiary, var(--text-disabled));
  font-variant-numeric: tabular-nums;
}

/* ---------- Toast (drag-drop feedback) ---------- */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-3);
  z-index: 1100;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }

/* ---------- Lead Detail ---------- */
.lead-detail-page { max-width: 100%; }
.lead-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lead-hero .lead-meta { flex: 1; min-width: 0; }
.lead-hero .lead-name {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.lead-hero .lead-sub {
  font-size: 13px; color: var(--text-secondary);
  margin-top: 4px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.lead-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-dourado-soft);
  color: var(--brand-dourado);
  font-size: 12px; font-weight: 600;
}
.stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.save-status { font-size: 11.5px; color: var(--text-secondary); margin-left: auto; }
.save-status[data-state="saving"] { color: var(--warning); }
.save-status[data-state="saved"]  { color: var(--success); }
.save-status[data-state="error"]  { color: var(--danger); }

.lead-tab-panel.hidden { display: none; }
.lead-tab-panel {
  /* padding interno para os campos não colarem na borda do card */
  padding: 6px 24px 18px;
  animation: fade-in 200ms var(--ease-out);
}
/* Mais respiro vertical entre cada linha de campo */
.lead-tab-panel .field-row {
  padding: 14px 0;
  grid-template-columns: 180px 1fr;
}
.lead-tab-panel .field-row .field-value { min-width: 0; }
.lead-tab-panel .field-row .lead-input,
.lead-tab-panel .field-row .textarea,
.lead-tab-panel .field-row select {
  width: 100%;
}
@media (max-width: 720px) {
  .lead-tab-panel { padding: 6px 16px 14px; }
  .lead-tab-panel .field-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}

/* Lead inputs em modo "salvando/salvo/erro" */
.lead-input.is-saving { border-color: var(--warning) !important; }
.lead-input.is-saved  { border-color: var(--success) !important; }
.lead-input.is-error  { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-bg) !important; }
.field-saving { color: var(--warning); display: inline-flex; align-items: center; }
.field-saving svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Timeline panel (lateral direita) */
.timeline-panel {
  position: sticky; top: calc(var(--header-height) + 12px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 18px;
  max-height: calc(100vh - var(--header-height) - 32px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.timeline-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.timeline-scroll { flex: 1; overflow-y: auto; padding-right: 4px; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform var(--dur-out) var(--ease-out); }
  .sidebar.is-open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .board { padding: 12px; }
  .kanban-column { width: 84vw; max-width: 320px; }
  .lead-hero { flex-direction: column; align-items: flex-start; }
  .lead-hero .actions { width: 100%; }
}

/* Esconder utilitário */
.hidden { display: none !important; }

/* =============================================================
   SPRINT 0.3.1 — Gestão de funis (pipelines dinâmicos)
   ============================================================= */

/* ---------- Sidebar: section action (botão "+" ao lado do título da seção) ---------- */
.nav-section { display: flex; align-items: center; justify-content: space-between; }
.nav-section-action {
  color: var(--sidebar-section);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  transition: background var(--dur-micro), color var(--dur-micro);
  text-decoration: none;
}
.nav-section-action:hover { background: rgba(255,255,255,0.06); color: var(--sidebar-text-active); }

/* ---------- Pipelines index — grid de cards ---------- */
.pipelines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 24px; }
.pipeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--dur-micro), box-shadow var(--dur-micro), border-color var(--dur-micro);
}
.pipeline-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand-azul-link); }
.pipeline-card .pipeline-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.pipeline-card .pipeline-desc { font-size: 13px; color: var(--text-secondary); min-height: 36px; }
.pipeline-card .pipeline-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.pipeline-card .pipeline-stats strong { color: var(--text-primary); font-weight: 600; }
.pipeline-card .pipeline-actions { display: flex; gap: 8px; margin-top: auto; }

/* ---------- Pipeline configure — lista de stages ---------- */
.stage-list { display: flex; flex-direction: column; gap: 8px; }

/* Sprint 4.24 — grid: [drag] [#id] [cor] [nome 1fr] [categoria] [papel] [excluir] */
.stage-row {
  display: grid;
  grid-template-columns: 20px 56px 28px minmax(160px, 1fr) 150px 220px 96px;
  gap: 10px; align-items: center;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.stage-row .drag-handle { cursor: grab; color: var(--text-secondary); display:inline-flex; }
.stage-row .stage-color {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-default);
  cursor: pointer;
  padding: 0;
}
.stage-row .stage-name { min-width: 0; }
.stage-row .stage-name input { width: 100%; }
.stage-row > .select,
.stage-row > select.select { width: 100%; min-width: 0; }
.stage-row .btn-delete-stage { white-space: nowrap; justify-self: end; }
.stage-row.is-deleting { opacity: 0.5; }
.stage-row.dragging { opacity: 0.5; cursor: grabbing; }

/* Em telas estreitas, quebra em duas linhas pra não cortar nada */
@media (max-width: 1180px) {
  .stage-row {
    grid-template-columns: 20px 56px 28px 1fr 96px;
    grid-template-areas:
      "drag id color name  del"
      "drag id kind  kind  kind"
      "drag id purpose purpose purpose";
    row-gap: 8px;
  }
  .stage-row .drag-handle    { grid-area: drag; }
  .stage-row .stage-id-chip  { grid-area: id; }
  .stage-row .stage-color    { grid-area: color; }
  .stage-row .stage-name     { grid-area: name; }
  .stage-row > select.select[data-field="kind"]    { grid-area: kind; }
  .stage-row > select.select[data-field="purpose"] { grid-area: purpose; }
  .stage-row .btn-delete-stage { grid-area: del; }
}

/* Modal "Novo funil" */
.modal-novo-funil .modal-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; min-width: 420px; }

/* ----- Forms dentro de qualquer modal: respiro vertical entre campos ----- */
.modal .modal-body, form.modal-body, .modal-overlay form.modal-body {
  padding: 24px;
}
.modal-body > .form-group + .form-group,
.modal-body > .form-group + .grid,
.modal-body > .grid + .form-group,
.modal-body > .grid + .grid {
  margin-top: 16px;
}
.modal-body .form-group .label { display: block; margin-bottom: 6px; }
.modal-body .form-group .input,
.modal-body .form-group .select,
.modal-body .form-group .textarea {
  width: 100%;
}

/* =============================================================
   Sprint 0.5 — Dashboard, Tasks, Audit log
   ============================================================= */

/* ---------- KPI grid (dashboard) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 24px; }
.kpi-grid .kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl, var(--radius-lg));
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-grid .kpi-card .kpi-label { font-size: 12.5px; color: var(--text-secondary); }
.kpi-grid .kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi-grid .kpi-card .kpi-diff  { font-size: 12px; color: var(--text-tertiary, var(--text-secondary)); }
.kpi-grid .kpi-card .kpi-diff.up   { color: var(--success); }
.kpi-grid .kpi-card .kpi-diff.down { color: var(--danger); }
.kpi-grid .kpi-card.warn   { border-color: var(--warning); }
.kpi-grid .kpi-card.danger { border-color: var(--danger); }

/* ---------- Tasks ---------- */
.task-row {
  display: grid; grid-template-columns: 24px 1fr 90px 100px 110px 60px 90px;
  gap: 12px; align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: 8px;
}
.task-row.is-overdue   { border-color: var(--danger); }
.task-row.is-completed { opacity: 0.6; }
.task-row .task-check {
  width: 22px; height: 22px;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  background: var(--bg-surface);
  transition: background var(--dur-micro);
}
.task-row .task-check:hover { background: var(--state-hover); }
.task-row.is-completed .task-check {
  background: var(--success); border-color: var(--success);
}
.task-priority {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-block; text-align: center;
}
.task-priority.alta  { background: var(--danger-bg);  color: var(--danger); }
.task-priority.media { background: var(--warning-bg); color: var(--warning); }
.task-priority.baixa { background: var(--bg-surface-3, var(--bg-surface-2)); color: var(--text-secondary); }
.task-due { font-size: 13px; color: var(--text-secondary); }
.task-due.is-overdue { color: var(--danger); font-weight: 600; }
.task-due.is-today   { color: var(--warning); font-weight: 500; }

.lead-tasks .task-row { margin-bottom: 6px; padding: 8px 10px; }

/* ---------- Audit log ---------- */
.audit-table { width: 100%; border-collapse: collapse; }
.audit-table th {
  text-align: left; padding: 10px 14px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.audit-table td {
  padding: 12px 14px; font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.audit-table tr:hover { background: var(--state-hover); }
.audit-action {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--brand-azul-link);
}
.audit-detail-row { background: var(--bg-surface-2); }
.audit-detail-row pre {
  margin: 0; padding: 12px 16px; font-size: 12px;
  max-height: 300px; overflow: auto;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* ============================================================
   CHIP global — usado em todos os toolbars (kanban, dashboard, etc.)
   Substitui a regra "premium" descartada que estava causando font-serif
   + uppercase + letter-spacing nos filtros de período do dashboard.
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.chip:hover {
  background: var(--state-hover);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.chip.active,
.chip[aria-pressed="true"] {
  background: var(--brand-azul);
  color: #fff;
  border-color: var(--brand-azul);
}
[data-theme="dark"] .chip.active,
[data-theme="dark"] .chip[aria-pressed="true"] {
  background: var(--brand-azul-link);
  border-color: var(--brand-azul-link);
}
.chip svg { width: 14px; height: 14px; opacity: 1; }

/* ============================================================
   Widget Funis × Etapas (Dashboard) — replica o widget Kommo
   ============================================================ */
.funnels-matrix {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  align-items: stretch;
}
.funnels-list {
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}
.funnel-list-item {
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-left: 3px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--dur-micro), border-color var(--dur-micro);
  font-family: inherit;
}
.funnel-list-item:hover { background: var(--state-hover); }
.funnel-list-item.active {
  background: var(--bg-surface);
  border-left-color: var(--brand-dourado);
}
.funnel-list-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funnel-list-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.funnel-list-meta strong { color: var(--text-secondary); }

.funnels-stages {
  padding: 0;
  overflow-x: auto;
}
.funnel-stages-panel.hidden { display: none; }
.funnel-stages-panel { animation: fade-in 200ms var(--ease-out); }

.stage-cards-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  min-width: max-content;
  align-items: flex-start;
}
.stage-mini-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  flex: 1 0 110px;
  padding: 8px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--stage-cor, var(--brand-azul-link));
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--dur-micro), box-shadow var(--dur-micro);
}
.stage-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.stage-mini-head {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-mini-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stage-mini-valor {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .funnels-matrix { grid-template-columns: 1fr; }
  .funnels-list { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .funnel-list-item { min-width: 160px; flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent; }
  .funnel-list-item.active { border-bottom-color: var(--brand-dourado); border-left-color: transparent; }
}

/* ============================================================
   Status Cards (Dashboard) — Ativos / Ganhos / Perdidos / Sem Tarefa
   ============================================================ */
.status-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 18px 24px 8px;
}
/* Variante 2x2 — usada dentro do widget inferior */
.status-cards-grid.status-cards-2x2 {
  grid-template-columns: 1fr 1fr;
  padding: 16px;
}
@media (max-width: 540px) {
  .status-cards-grid.status-cards-2x2 { grid-template-columns: 1fr; }
}
.status-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--brand-azul-link);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.status-card-count {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.status-card-valor {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.status-card-desc {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.status-card.is-success { border-left-color: var(--success); }
.status-card.is-success .status-card-count { color: var(--success); }
.status-card.is-danger  { border-left-color: var(--danger); }
.status-card.is-danger  .status-card-count { color: var(--danger); }
.status-card.is-warning { border-left-color: var(--warning); }
.status-card.is-warning .status-card-count { color: var(--warning); }
.status-card.is-info    { border-left-color: var(--brand-azul-link); }
.status-card.is-info    .status-card-count { color: var(--brand-azul-link); }
.hidden { display: none !important; }

/* ---------- Preferências: avatar picker ---------- */
.avatar-picker { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.avatar-picker .swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--dur-micro), border-color var(--dur-micro);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.avatar-picker .swatch:hover { transform: scale(1.08); }
.avatar-picker .swatch.selected {
  border-color: var(--brand-dourado);
  transform: scale(1.05);
}

/* ---------- Preferências: theme picker ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-picker label {
  cursor: pointer;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  transition: border-color var(--dur-micro), background var(--dur-micro);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.theme-picker label:hover { border-color: var(--brand-azul-link); }
.theme-picker input[type="radio"] { display: none; }
.theme-picker label.selected,
.theme-picker input:checked + label {
  border-color: var(--brand-dourado);
  background: rgba(200,168,75,0.05);
}
.theme-picker svg { width: 28px; height: 28px; color: var(--text-secondary); }
.theme-picker label.selected svg { color: var(--brand-dourado); }
.theme-picker .theme-name { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }

/* ---------- Preferências: layout 2 colunas ---------- */
.profile-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  padding: 24px;
  align-items: start;
}
@media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-identity-card .avatar-xl {
  width: 96px; height: 96px;
  font-size: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  margin: 0 auto 14px;
}

/* =============================================================
   Toggles, role badges, integration cards (Sprint 0.6)
   ============================================================= */

/* Toggle switch (notificações) */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border-default); border-radius: 999px;
  transition: background var(--dur-micro);
}
.toggle-switch .slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform var(--dur-micro);
}
.toggle-switch input:checked + .slider { background: var(--brand-dourado); }
.toggle-switch input:checked + .slider::before { transform: translateX(20px); }
.toggle-switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

.notif-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 16px;
}
.notif-row:last-of-type { border-bottom: none; }
.notif-row .notif-info { flex: 1; min-width: 0; }
.notif-row .notif-title { font-size: 14px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-row .notif-desc  { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.notif-row .notif-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-surface-2); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* Role badges */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.role-badge.admin    { background: var(--danger-bg);            color: var(--danger); }
.role-badge.gestor   { background: rgba(107,76,154,0.15);       color: #6B4C9A; }
.role-badge.sdr      { background: var(--info-bg);              color: var(--info); }
.role-badge.closer   { background: rgba(200,168,75,0.15);       color: var(--brand-dourado); }
.role-badge.readonly { background: var(--bg-surface-2);         color: var(--text-tertiary); }

/* Integration cards */
.integrations-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; padding: 16px 24px 32px;
}
.integration-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.integration-card .integration-logo {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.integration-card .integration-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.integration-card .integration-desc { font-size: 12.5px; color: var(--text-secondary); flex: 1; line-height: 1.45; }
.integration-card .integration-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  align-self: flex-start;
  margin-top: 4px;
}
.integration-card .integration-status.disconnected { background: var(--bg-surface-2); color: var(--text-tertiary); }
.integration-card .integration-status.connected    { background: var(--success-bg);   color: var(--success); }
.integration-card .integration-status.error        { background: var(--danger-bg);    color: var(--danger); }
.integration-card .integration-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ============================================================
   Agenda — calendário visual
   ============================================================ */

.agenda-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  position: sticky; top: var(--header-height); left: 0; z-index: 30;
}
.agenda-nav { display: inline-flex; align-items: center; gap: 4px; }
.agenda-nav-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: none;
}
.agenda-nav-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.agenda-period-label {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  margin: 0 8px;
  text-transform: capitalize;
  min-width: 140px; text-align: center;
}
.agenda-stat {
  margin-left: auto;
  font-size: 12.5px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* View MÊS — grade calendário */
.agenda-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--border-subtle);
  gap: 1px;
  padding: 24px;
}
.agenda-month-header {
  background: var(--bg-surface-2);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}
.agenda-day-cell {
  background: var(--bg-surface);
  min-height: 100px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.agenda-day-cell.is-other-month { opacity: 0.4; }
.agenda-day-cell.is-today {
  outline: 2px solid var(--brand-dourado);
  outline-offset: -2px;
}
.agenda-day-num {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.agenda-day-cell.is-today .agenda-day-num { color: var(--brand-dourado); }
.agenda-event-mini {
  font-size: 11px;
  padding: 3px 6px;
  background: var(--bg-surface-2);
  border-left: 3px solid var(--brand-azul-link);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--dur-micro);
}
.agenda-event-mini:hover { transform: translateX(1px); background: var(--state-hover); }
.agenda-event-mini .ev-time {
  color: var(--text-secondary); font-weight: 500; margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.agenda-event-mini.origin-meta      { border-left-color: var(--origin-meta); }
.agenda-event-mini.origin-inlead    { border-left-color: var(--origin-inlead); }
.agenda-event-mini.origin-instagram { border-left-color: var(--origin-instagram); }
.agenda-event-mini.origin-lp        { border-left-color: var(--origin-lp); }
.agenda-event-mini.origin-trafego   { border-left-color: var(--origin-trafego); }
.agenda-event-mini.origin-organico  { border-left-color: var(--origin-organico); }
.agenda-event-mini.origin-indicacao { border-left-color: var(--origin-indicacao); }
.agenda-event-mini.origin-chat      { border-left-color: var(--origin-chat); }
.agenda-event-mini.is-realizada { opacity: 0.6; }
.agenda-event-mini.is-no_show   { background: var(--danger-bg); border-left-color: var(--danger); }
.agenda-event-more {
  font-size: 10.5px; color: var(--text-tertiary);
  padding: 2px 6px; cursor: pointer;
  text-decoration: none;
}
.agenda-event-more:hover { color: var(--brand-azul-link); }

/* View SEMANA */
.agenda-week {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  padding: 24px;
  gap: 1px;
  background: var(--border-subtle);
}
.agenda-week-hour {
  background: var(--bg-surface);
  font-size: 10.5px;
  color: var(--text-tertiary);
  padding: 2px 6px;
  text-align: right;
  height: 48px;
  font-variant-numeric: tabular-nums;
}
.agenda-week-day-header {
  background: var(--bg-surface-2);
  padding: 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.agenda-week-day-header strong { display: block; font-size: 18px; color: var(--text-primary); margin-top: 2px; }
.agenda-week-day-cell {
  background: var(--bg-surface);
  position: relative;
  height: 48px;
  border-bottom: 1px dashed var(--border-subtle);
}
.agenda-week-day-cell.is-today { background: rgba(200,168,75,0.04); }
.agenda-event-block {
  position: absolute;
  left: 4px; right: 4px;
  background: var(--brand-azul);
  color: #fff;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  border-left: 3px solid var(--brand-dourado);
  z-index: 2;
}
.agenda-event-block .ev-title { font-weight: 600; }
.agenda-event-block:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.agenda-event-block.is-realizada { opacity: 0.6; }
.agenda-event-block.is-no_show   { background: var(--danger); border-left-color: #fff; }
.agenda-event-block.is-cancelada { background: var(--text-tertiary); border-left-color: var(--border-default); }

/* View DIA */
.agenda-day {
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 800px; margin: 0 auto;
}
.agenda-day-row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.agenda-day-row .ev-hour {
  font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
}
.agenda-day-row .ev-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-azul-link);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  transition: transform var(--dur-micro), box-shadow var(--dur-micro);
  text-decoration: none;
  color: var(--text-primary);
}
.agenda-day-row .ev-card.origin-meta      { border-left-color: var(--origin-meta); }
.agenda-day-row .ev-card.origin-inlead    { border-left-color: var(--origin-inlead); }
.agenda-day-row .ev-card.origin-instagram { border-left-color: var(--origin-instagram); }
.agenda-day-row .ev-card.origin-lp        { border-left-color: var(--origin-lp); }
.agenda-day-row .ev-card.origin-trafego   { border-left-color: var(--origin-trafego); }
.agenda-day-row .ev-card.origin-organico  { border-left-color: var(--origin-organico); }
.agenda-day-row .ev-card.origin-indicacao { border-left-color: var(--origin-indicacao); }
.agenda-day-row .ev-card.origin-chat      { border-left-color: var(--origin-chat); }
.agenda-day-row .ev-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.agenda-day-row .ev-card-info { flex: 1; min-width: 0; }
.agenda-day-row .ev-card-title { font-weight: 600; }
.agenda-day-row .ev-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.agenda-day-row .ev-card-meet {
  font-size: 11px; color: var(--brand-azul-link);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  text-decoration: none;
}
.agenda-day-row .ev-card-meet:hover { text-decoration: underline; }

.agenda-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-tertiary);
}

/* Mobile: mês degrada para lista */
@media (max-width: 720px) {
  .agenda-month { grid-template-columns: 1fr; padding: 12px; }
  .agenda-month-header { display: none; }
  .agenda-day-cell { min-height: auto; }
  .agenda-day-cell.is-other-month { display: none; }
  .agenda-week { grid-template-columns: 50px repeat(7, minmax(80px, 1fr)); overflow-x: auto; padding: 12px; }
  .agenda-toolbar { padding: 8px 12px; gap: 6px; }
  .agenda-period-label { min-width: 0; }
}

/* ============================================================
   Scrollbars finas e discretas — estilo macOS, global.
   Aplica no sistema inteiro (qualquer área com overflow).
   Firefox:  scrollbar-width / scrollbar-color (herdam do html).
   Webkit:   ::-webkit-scrollbar (Chrome / Edge / Brave / Safari).
   ============================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,120,0.30) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(120,120,120,0.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(120,120,120,0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* Esconde os botões de seta (▲▼) que o Windows mostra por padrão. */
::-webkit-scrollbar-button {
  display: none;
}