/* Fontes vendorizadas localmente (static/fonts/), mesmo princípio já aplicado
   ao Sortable.js: nenhuma dependência de CDN em tempo de execução. Baixadas
   da Google Fonts API, restritas aos subsets latin/latin-ext (suficiente pra
   português) — subsets cirílico/grego/vietnamita do payload original da
   Google Fonts foram descartados de propósito. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/outfit-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/outfit-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --primary:      #1B3A63;
  --secondary:    #2F6B62;
  --accent:       #B8863E;
  --bg:           #F5F3EE;
  --surface:      #FFFFFF;
  --surface-alt:  #ECE9E2;
  --ink:          #1B1F23;
  --ink-soft:     #565049;
  --border:       #DEDACE;
  --success:      #2F9E6E;
  --warning:      #C89B3C;
  --error:        #B3432D;
  --info:         #3B82F6;
  --sidebar-bg:      #161B2E;
  --sidebar-accent:  #6C63F5;

  --font-display: 'Outfit', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(27, 31, 35, 0.05), 0 6px 20px rgba(27, 31, 35, 0.06);
}

/* ---------- Paletas sequenciais para dados (gráficos/BI) — registradas 08/08/2026 ----------
   Ideais para dados ORDENADOS (ex.: evolução temporal, valores crescentes) — cada escala vai
   do passo 1 (mais claro) ao passo 6 (mais escuro). Não usar pra dados categóricos sem ordem
   (nesse caso, misturar hues diferentes, não passos da mesma escala). Consumidor previsto:
   módulo de Relatórios e BI e gráficos de KPI (ainda não implementados — ver PROJETO_STATUS.md
   e kpi-dashboard-builder). Não confundir com as paletas de tema da interface (tabela `paletas`,
   seed.sql) — aquelas são cores semânticas de UI; estas são escalas de dado pra visualização. */
:root {
  --seq-azul-1: #e9f0fb;    --seq-azul-2: #a6c2f0;    --seq-azul-3: #6294e5;
  --seq-azul-4: #2368d6;    --seq-azul-5: #184792;    --seq-azul-6: #0d264f;

  --seq-ciano-1: #e9f4fb;   --seq-ciano-2: #a6d4f0;   --seq-ciano-3: #62b3e5;
  --seq-ciano-4: #2391d6;   --seq-ciano-5: #186392;   --seq-ciano-6: #0d364f;

  --seq-indigo-1: #e9ebfb;  --seq-indigo-2: #a6aef0;  --seq-indigo-3: #6271e5;
  --seq-indigo-4: #2338d6;  --seq-indigo-5: #182692;  --seq-indigo-6: #0d154f;

  --seq-roxo-1: #f2e9fb;    --seq-roxo-2: #cba6f0;    --seq-roxo-3: #a462e5;
  --seq-roxo-4: #7c23d6;    --seq-roxo-5: #551892;    --seq-roxo-6: #2e0d4f;

  --seq-teal-1: #e9fbf7;    --seq-teal-2: #a6f0de;    --seq-teal-3: #62e5c5;
  --seq-teal-4: #23d6a9;    --seq-teal-5: #189274;    --seq-teal-6: #0d4f3e;

  --seq-verde-1: #effbe9;   --seq-verde-2: #c0f0a6;   --seq-verde-3: #90e562;
  --seq-verde-4: #62d623;   --seq-verde-5: #439218;   --seq-verde-6: #244f0d;

  --seq-magenta-1: #fbe9fb; --seq-magenta-2: #f0a6ee; --seq-magenta-3: #e562e1;
  --seq-magenta-4: #d623d0; --seq-magenta-5: #92188e; --seq-magenta-6: #4f0d4d;

  --seq-dourado-1: #fbf7e9; --seq-dourado-2: #f0dfa3; --seq-dourado-3: #e5c75d;
  --seq-dourado-4: #cea922; --seq-dourado-5: #886f16; --seq-dourado-6: #42360b;
}

html[data-theme="dark"] {
  --bg:           #14181C;
  --surface:      #1B2025;
  --surface-alt:  #23292F;
  --ink:          #EDEAE3;
  --ink-soft:     #A7A196;
  --border:       #30363C;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.3);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg:           #14181C;
    --surface:      #1B2025;
    --surface-alt:  #23292F;
    --ink:          #EDEAE3;
    --ink-soft:     #A7A196;
    --border:       #30363C;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.3);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}

a { color: inherit; text-decoration: none; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }

.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { background: var(--surface-alt); }

.btn-block { width: 100%; }

/* ---------- Formulários ---------- */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ---------- Flash messages ---------- */

.flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.flash-success { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.flash-error   { background: color-mix(in srgb, var(--error) 15%, var(--surface));   color: var(--error);   border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); }

/* ---------- Tela de login (portal) ---------- */

.portal-page { margin: 0; font-family: var(--font-body); background: var(--bg); }

.portal-theme-toggle {
  position: fixed; top: 20px; right: 20px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #161B2E; color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.portal-theme-toggle:hover { background: #232a45; }
.portal-layout { display: flex; min-height: 100vh; }

.portal-hero {
  display: none;
  width: 44%;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--sidebar-bg);
  background-size: cover;
  background-position: center;
  padding: 40px;
}
@media (min-width: 1024px) { .portal-hero { display: flex; } }

.portal-hero-logo { width: 140px; mix-blend-mode: screen; }
.portal-hero-title { color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; margin: 64px auto 0; max-width: 30rem; text-align: center; }
.portal-hero-footer { color: rgba(255,255,255,0.6); font-size: 12px; margin: 0; text-align: center; }

.portal-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.portal-panel { width: 100%; max-width: 440px; }

.portal-mobile-logo { display: block; width: 120px; margin: 0 auto 28px; }
@media (min-width: 1024px) { .portal-mobile-logo { display: none; } }

.portal-apps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.portal-app {
  appearance: none; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); font-family: inherit; text-align: left; cursor: pointer;
  transition: transform 0.15s cubic-bezier(.2,.8,.2,1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.portal-app:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--card-color) 45%, var(--border)); }
.portal-app:active { transform: translateY(0) scale(0.99); }
.portal-app-selected {
  border-color: color-mix(in srgb, var(--card-color) 40%, var(--border));
  background: color-mix(in srgb, var(--card-color) 7%, var(--surface));
}

.portal-app-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card-color) 16%, var(--surface));
  color: var(--card-color);
}
.portal-app-icon svg { width: 18px; height: 18px; }

.portal-app-body { flex: 1; min-width: 0; }
.portal-app-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.portal-app-desc { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.35; margin-top: 1px; }

.portal-app-arrow {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-alt); color: var(--ink-soft);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), background 0.2s ease, color 0.2s ease;
}
.portal-app-arrow svg { width: 12px; height: 12px; }
.portal-app:hover .portal-app-arrow { transform: translateX(3px); background: var(--card-color); color: #fff; }

.auth-hint a { color: var(--primary); font-weight: 600; }

.auth-form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px; }
.auth-form .btn { margin-top: 22px; }

.auth-hint { margin-top: 20px; font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.5; }

/* ---------- Layout raiz ---------- */

.app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.app-shell.sidebar-collapsed { grid-template-columns: 72px 1fr; }
.app-shell > * { min-width: 0; }

/* ---------- Sidebar ---------- */

.sidebar { background: var(--sidebar-bg); padding: 20px 0; display: flex; flex-direction: column; color: rgba(255,255,255,0.85); }

.masthead { padding: 0 20px 20px; }
.masthead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.brand { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; }
.tagline { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }

.sidebar-collapse-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px;
}
.sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }

.drawer-close-btn {
  display: none; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6); align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; line-height: 1;
}
.drawer-close-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }

.sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190; }
.sidebar-collapsed .masthead-top { justify-content: center; }
.sidebar-collapsed .brand-block, .sidebar-collapsed .tagline,
.sidebar-collapsed .menu-label-text, .sidebar-collapsed .chevron,
.sidebar-collapsed .submenu, .sidebar-collapsed .soon-badge { display: none; }
.sidebar-collapsed .menu-item, .sidebar-collapsed .menu-toggle { justify-content: center; padding: 11px 0; }

.menu { flex: 1; padding: 0 12px; overflow-y: auto; }
.menu-group { margin-bottom: 2px; }

.menu-item, .menu-toggle {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.75);
}
.menu-toggle { justify-content: space-between; }
.menu-toggle .menu-item-label { display: flex; align-items: center; gap: 11px; }
.menu-item:hover, .menu-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.menu-item.active { background: color-mix(in srgb, var(--sidebar-accent) 25%, transparent); color: #fff; }
.menu-icon { width: 18px; height: 18px; opacity: 0.8; flex-shrink: 0; }
.menu-item.active .menu-icon { opacity: 1; }

.menu-item-disabled { cursor: not-allowed; opacity: 0.45; }
.menu-item-disabled:hover { background: none; color: rgba(255,255,255,0.75); }
.soon-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: 999px; flex-shrink: 0;
}

.chevron { font-size: 10px; opacity: 0.6; transition: transform 0.15s ease; }
.menu-toggle.open .chevron { transform: rotate(90deg); }

.submenu { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; padding-left: 30px; }
.submenu.open { max-height: 400px; }
.submenu .menu-item { font-weight: 400; padding: 9px 12px; justify-content: space-between; }

/* ---------- Topbar ---------- */

.topbar {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.topbar-search {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: var(--surface-alt); color: var(--ink-soft); width: 320px;
}
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-search input { border: none; background: none; padding: 0; font-size: 13px; width: 100%; }
.topbar-search input:focus { box-shadow: none; }

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

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { background: var(--surface-alt); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

.kanban-card-abrir {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
}
.kanban-card-abrir:hover { background: var(--surface-alt); color: var(--primary); }
.kanban-card-abrir svg { width: 16px; height: 16px; }

.hamburger-btn {
  display: none; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--ink-soft); align-items: center; justify-content: center; cursor: pointer;
}
.hamburger-btn svg { width: 20px; height: 20px; }

.ai-pill-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, #7C5CFC 30%, var(--border));
  background: color-mix(in srgb, #7C5CFC 10%, var(--surface));
  color: #7C5CFC; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ai-pill-btn:hover { background: color-mix(in srgb, #7C5CFC 18%, var(--surface)); }
.ai-pill-btn svg { width: 14px; height: 14px; }
.ai-pill-btn:disabled { cursor: not-allowed; opacity: 0.5; }

.mode-switch { display: flex; gap: 2px; background: var(--surface-alt); border-radius: 999px; padding: 3px; }
.mode-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; }
.mode-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.palette-picker { position: relative; }
.palette-picker-panel {
  display: none; position: absolute; right: 0; top: 44px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; min-width: 220px; z-index: 20;
}
.palette-picker-panel.open { display: block; }

@media (max-width: 1023px) {
  .palette-picker-panel { max-width: calc(100vw - 24px); }
}

.notification-picker { position: relative; }
.notification-picker-panel {
  display: none; position: absolute; right: 0; top: 44px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; min-width: 280px; max-width: 340px; max-height: 360px; overflow-y: auto; z-index: 20;
}
.notification-picker-panel.open { display: block; }
.notification-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: 13px;
}
.notification-item:hover { background: var(--surface-alt); }
.notification-item.unread { font-weight: 600; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.notification-item-data { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.notification-marcar-todas {
  width: 100%; margin-top: 4px; padding: 8px; border: none; background: none; color: var(--primary);
  font-size: 12px; cursor: pointer; text-align: center;
}
.notification-vazio { padding: 12px; font-size: 13px; color: var(--ink-soft); text-align: center; margin: 0; }

@media (max-width: 1023px) {
  .notification-picker-panel { max-width: calc(100vw - 24px); }
}

.palette-option-form { margin: 0; }
.palette-option {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; color: var(--ink); text-align: left;
}
.palette-option:hover { background: var(--surface-alt); }
.palette-option.selected { background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 600; }
.palette-swatches { display: flex; gap: 3px; }
.swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.palette-name { flex: 1; }
.palette-check { color: var(--primary); }

.online-users-stack { display: flex; }
.online-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  border: 2px solid var(--surface); margin-left: -8px; position: relative;
}
.online-avatar:first-child { margin-left: 0; }
.online-dot { position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.online-avatar-more { background: var(--surface-alt); color: var(--ink-soft); }

.notification-badge {
  position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; border-radius: 999px;
  background: var(--error); color: #fff; font-size: 9px; display: flex; align-items: center;
  justify-content: center; padding: 0 3px;
}

.user-chip { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11px; color: var(--ink-soft); }

/* ---------- Conteúdo ---------- */

.content { padding: 28px 32px; }

.page-header { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.page-subtitle { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---- Abaixo de 1024px (tablet + celular): comportamento compartilhado da
   gaveta aberta (usado pelo toque num item com submenu no rail do tablet —
   Task 3 — e pelo ☰ no celular) ---- */
@media (max-width: 1023px) {
  .sidebar-collapse-btn { display: none; }

  .app-shell.mobile-drawer-open .sidebar-scrim { display: block; }
  .app-shell.mobile-drawer-open .drawer-close-btn { display: flex; }
  .app-shell.mobile-drawer-open .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 200;
  }
  .app-shell.mobile-drawer-open .sidebar .masthead-top { justify-content: space-between; }
  .app-shell.mobile-drawer-open .sidebar .brand-block,
  .app-shell.mobile-drawer-open .sidebar .tagline { display: block; }
  .app-shell.mobile-drawer-open .sidebar .menu-label-text,
  .app-shell.mobile-drawer-open .sidebar .chevron,
  .app-shell.mobile-drawer-open .sidebar .soon-badge { display: inline; }
  .app-shell.mobile-drawer-open .sidebar .submenu { display: block; }
  .app-shell.mobile-drawer-open .sidebar .menu-item { justify-content: flex-start; padding: 11px 12px; }
  .app-shell.mobile-drawer-open .sidebar .menu-toggle { justify-content: space-between; padding: 11px 12px; }
  .app-shell.mobile-drawer-open .sidebar .submenu .menu-item { justify-content: space-between; padding: 9px 12px; }
}

/* ---- Tablet (768px-1023px): rail de ícones de 72px sempre visível por
   padrão — mesmo visual do `.sidebar-collapsed` manual do desktop, mas
   automático e sem depender de localStorage. ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { grid-template-columns: 72px 1fr; }
  .app-shell.mobile-drawer-open > div:not(.sidebar-scrim) { grid-column: 2; }
  .content { padding: 24px; }
  .sidebar .masthead-top { justify-content: center; }
  .sidebar .brand-block, .sidebar .tagline,
  .sidebar .menu-label-text, .sidebar .chevron,
  .sidebar .submenu, .sidebar .soon-badge { display: none; }
  .sidebar .menu-item, .sidebar .menu-toggle { justify-content: center; padding: 11px 0; }
}

/* ---- Celular (abaixo de 768px): sidebar totalmente fora da tela até a
   gaveta ser aberta pelo ☰. ---- */
@media (max-width: 767px) {
  .hamburger-btn { display: flex; }
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar-search { display: none; }
  .user-meta { display: none; }
  .mode-switch { flex-shrink: 0; }
  .online-users-stack { display: none; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .topbar-actions { gap: 6px; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 200;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .app-shell.mobile-drawer-open .sidebar { transform: translateX(0); }
}

/* ---------- Indicadores e cartões ---------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }

.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 12px; color: var(--ink-soft); }
.stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-header { margin-bottom: 14px; }
.card-header h2 { font-size: 16px; margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.param-card { display: block; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.param-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.param-card h2 { font-size: 17px; margin: 0 0 6px; }
.param-card p { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.param-card-count { font-size: 12px; font-weight: 600; color: var(--primary); }

.param-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.param-inline-form { margin: 0; }

.estagio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.estagio-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  border-bottom: 1px solid var(--border); cursor: grab;
}
.estagio-row:last-child { border-bottom: none; }
.estagio-row-arquivado { opacity: 0.5; }
.estagio-cor { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.estagio-nome { flex: 1; font-weight: 600; font-size: 14px; }

.categoria-group { margin-bottom: 16px; cursor: grab; }
.categoria-group:last-child { margin-bottom: 0; }
.categoria-header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.categoria-header h2 { flex: 1; font-size: 16px; margin: 0; }
.servico-codigo { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono); }
.servico-preco { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.servico-negocio { font-size: 12px; color: var(--ink-soft); }
.servico-descricao { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; white-space: pre-line; }
.modal-extra-action { margin-top: 12px; }

.badge-periodicidade-recorrente { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.badge-periodicidade-setup { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); }
.badge-periodicidade-projeto_hora { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); }

@media (max-width: 767px) {
  .estagio-row { flex-wrap: wrap; }
  .estagio-nome { flex: 1 1 100%; order: -1; }
  .categoria-header { flex-wrap: wrap; align-items: flex-start; }
  .categoria-header h2 { flex: 1 1 100%; }
  .categoria-header .param-row-actions { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; }
  .duas-colunas { grid-template-columns: 1fr; }
}

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.linha-clicavel { cursor: pointer; }
.data-table tr.linha-clicavel:hover { background: var(--surface-alt); }

.table-scroll { overflow-x: auto; }

.detalhes-execucao-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; margin: 0 0 8px; }
.detalhes-execucao-item dt { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.detalhes-execucao-item dd { margin: 0; }
.detalhes-execucao-vazio { color: var(--ink-soft); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-status-criado               { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); }
.badge-status-em-preenchimento     { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); }
.badge-status-em-enriquecimento    { background: color-mix(in srgb, var(--secondary) 15%, var(--surface)); color: var(--secondary); }
.badge-status-aguardando-validacao { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); }
.badge-status-concluido            { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }

/* ---------- Kanban (Diagnósticos) ---------- */

.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }

.kanban-column { flex: 0 0 260px; background: var(--surface-alt); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 220px); scroll-snap-align: start; }

@media (max-width: 767px) {
  .kanban-column { flex: 0 0 82vw; }
}

.kanban-column-header {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em;
}
.kanban-column-count { background: var(--surface); border-radius: 999px; padding: 1px 8px; font-size: 11px; }

.kanban-column-body { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
/* overscroll-behavior-y: contain acima trava o "scroll chaining" — rolar o mouse sobre os
   cards de um estágio rola só aquela coluna, nunca escapa pra rolar a página inteira, mesmo
   quando a coluna chega no topo/fim do próprio scroll (padrão de qualquer Kanban de CRM). */

.kanban-card { background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 12px; cursor: grab; box-shadow: var(--shadow); }
.kanban-card-empresa { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.kanban-card-linha-valor { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.kanban-card-valor { font-size: 12px; font-weight: 600; color: var(--ink); }
.kanban-card-gerado-por { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.kanban-card-data { font-size: 11px; color: var(--ink-soft); }
.kanban-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kanban-card-responsavel { font-size: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); padding: 2px 8px; border-radius: 999px; }
.kanban-card-ghost { opacity: 0.4; }

/* ---------- Cartões de validação (Validações dos Agentes) ---------- */

.badge-neutro { background: var(--surface-alt); color: var(--ink-soft); }
.badge-vendedor { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); }
.checkbox-label { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.checkbox-label input { width: auto; }

.badge-confianca-alta  { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.badge-confianca-media { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); }
.badge-confianca-baixa { background: color-mix(in srgb, var(--error) 15%, var(--surface)); color: var(--error); }

.validacao-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 6px; }

.validacao-card-campo { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }

.validacao-card-valores { display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.validacao-valor-atual { color: var(--ink-soft); text-decoration: line-through; }
.validacao-valor-seta { color: var(--ink-soft); }
.validacao-valor-sugerido { color: var(--ink); font-weight: 600; }

.validacao-card-footer { justify-content: space-between; align-items: baseline; }

.validacao-card-fonte {
  font-size: 11px;
  color: var(--info);
  text-decoration: underline;
}
.validacao-card-fonte:hover { color: var(--primary); }

.validacao-card-data { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Pipeline: temperatura do lead e segmento no card ---------- */

.kanban-card-header { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.kanban-card-segmento { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }

.badge-temperatura-quente { background: color-mix(in srgb, var(--error) 15%, var(--surface)); color: var(--error); }
.badge-temperatura-morno  { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); }
.badge-temperatura-frio   { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); }

/* ---------- Pipeline: toolbar ---------- */

.pipeline-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pipeline-toolbar-left, .pipeline-toolbar-right { display: flex; align-items: center; gap: 10px; }

.view-switch-form { display: flex; gap: 2px; background: var(--surface-alt); border-radius: var(--radius-sm); padding: 3px; margin: 0; }
.view-switch-btn { width: 34px; height: 32px; border-radius: 6px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.view-switch-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.pipeline-links-ia-panel {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.pipeline-links-ia-panel-text { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ---------- Pipeline: modal "Novo" ---------- */

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }

/* ---------- Pipeline: visão Lista ---------- */

.pipeline-list-table th, .pipeline-list-table td { white-space: nowrap; }

/* ---------- Pipeline: seletor de colunas e ordenação da Lista ---------- */

.column-picker { position: relative; }
.column-picker-panel {
  display: none; position: absolute; top: 40px; right: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 10px; min-width: 220px; z-index: 50;
}
.column-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; }
.column-picker-panel .btn { margin-top: 8px; }

.sortable-col { cursor: pointer; user-select: none; }
.sort-arrow { font-size: 9px; margin-left: 2px; }

/* ---------- Pipeline: filtros ---------- */

.pipeline-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }

.filter-dropdown { position: relative; }
.filter-panel {
  display: none; position: absolute; top: 40px; left: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 10px; min-width: 200px; z-index: 50;
}
.filter-panel-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; cursor: pointer; }
.filter-panel .btn { margin-top: 8px; }
.filter-panel-scroll { max-height: 145px; overflow-y: auto; }

.temperatura-chips { display: flex; gap: 6px; }
.chip {
  display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft);
}
.chip input { display: none; }
.chip.chip-temperatura-quente.active { background: color-mix(in srgb, var(--error) 15%, var(--surface)); border-color: var(--error); color: var(--error); }
.chip.chip-temperatura-morno.active  { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); border-color: var(--warning); color: var(--warning); }
.chip.chip-temperatura-frio.active   { background: color-mix(in srgb, var(--info) 15%, var(--surface)); border-color: var(--info); color: var(--info); }

.periodo-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 13px; }
.funil-select-form { margin: 0; }

/* ---- Mobile: filter panels as bottom sheets, tighter modal padding ----
   Kept here (not next to .filter-panel/.column-picker-panel/.modal-box's
   own rules above) because a media-query override must appear AFTER its
   selector's unconditional base rule to win the cascade — moving these
   rules earlier in the file will silently break them again. ---- */
@media (max-width: 767px) {
  .filter-panel, .column-picker-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 70vh; overflow-y: auto; min-width: 0; z-index: 210;
  }

  .modal-box { padding: 16px; }
}

.premissas-card { max-width: 480px; }
.form-actions { margin-top: 20px; }
.form-secondary-action { margin-top: 12px; }
.modal-box-wide { max-width: 640px; }
.modal-section-title { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.select-com-adicionar { display: flex; gap: 8px; align-items: center; }
.select-com-adicionar select { flex: 1; }

/* ---------- Formulário de Lead: campos agrupados por linha (peça extra pós-19/08,
   layout compacto tipo Frappe em vez de 1 campo por linha) ---------- */
.lead-form-secao { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
.lead-form-campo-fixo label { margin-top: 0; }
.lead-form-campo-largo { grid-column: 1 / -1; }
.lead-form-container.layout-editando .lead-form-secao { grid-template-columns: 1fr; }

/* ---------- Editor de layout do formulário de Lead (fatia C1) ---------- */
.modal-header-actions { display: flex; align-items: center; gap: 8px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.layout-editando-on { display: none; }
.lead-form-container.layout-editando .layout-editando-on { display: inline-flex; }
.lead-form-container.layout-editando .layout-editando-off { display: none; }

.lead-form-campo.campo-oculto { display: none; }
.campo-drag-handle { display: none; cursor: grab; color: var(--ink-soft); }
.campo-visibilidade-toggle { display: none; }

.lead-form-container.layout-editando .lead-form-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 6px 0;
  cursor: grab;
}
.lead-form-container.layout-editando .lead-form-campo label { margin: 0; flex: 1; }
.lead-form-container.layout-editando .lead-form-campo > input,
.lead-form-container.layout-editando .lead-form-campo > select,
.lead-form-container.layout-editando .lead-form-campo > textarea,
.lead-form-container.layout-editando .lead-form-campo > .select-com-adicionar { display: none; }
.lead-form-container.layout-editando .campo-drag-handle { display: inline-block; }
.lead-form-container.layout-editando .campo-visibilidade-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; margin: 0; white-space: nowrap; }
.lead-form-container.layout-editando .lead-form-campo.campo-oculto { display: flex; opacity: 0.5; }
.lead-form-campo-ghost { opacity: 0.4; }

/* ---------- Campos customizados do formulário de Lead (fatia C2) ---------- */
.lead-form-add-campo { margin: 4px 0 14px; }

/* ---------- Tela de detalhe do Lead, só leitura (fatia E1a) ---------- */
.voltar-link { display: inline-block; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.voltar-link:hover { text-decoration: underline; }
.kanban-card-empresa a:hover,
.pipeline-list-table td a:hover { text-decoration: underline; }

.detalhe-lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.detalhe-lead-campo { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.detalhe-lead-campo:last-child { border-bottom: none; }
.detalhe-lead-label { color: var(--ink-soft); font-size: 13px; }
.detalhe-lead-valor { font-weight: 600; text-align: right; }

.detalhe-lead-tab-nav { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.detalhe-lead-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; cursor: default; color: var(--ink-soft); }
.detalhe-lead-tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.detalhe-lead-tab-btn:disabled { cursor: not-allowed; opacity: 0.6; }

.detalhe-lead-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.detalhe-lead-timeline li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.detalhe-lead-timeline li:last-child { border-bottom: none; padding-bottom: 0; }
.detalhe-lead-timeline span { font-size: 13px; color: var(--ink-soft); }

.texto-vazio { color: var(--ink-soft); font-size: 14px; }

/* ---------- Edição do Lead (fatia E1b) ---------- */
.lead-edit-actions { display: flex; gap: 10px; margin-top: 20px; }

.servico-select-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.servico-select-form select { min-width: 0; width: auto; max-width: 220px; }
.badge-alerta { background: color-mix(in srgb, var(--error) 15%, var(--surface)); color: var(--error); }

/* ---------- Notas do Lead (fatia E2) ---------- */
.detalhe-lead-nota-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.detalhe-lead-nota-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 14px; resize: vertical; }
.detalhe-lead-nota-form .btn { align-self: flex-end; }
.detalhe-lead-nota-texto { margin: 0 0 4px; white-space: pre-wrap; }

/* ---------- Tarefas do Lead (fatia E3) ---------- */
.detalhe-lead-tarefa-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.detalhe-lead-tarefa-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 14px; resize: vertical; }
.detalhe-lead-tarefa-form .btn { align-self: flex-end; }
.detalhe-lead-tarefa-check-form { margin-bottom: 4px; }
.detalhe-lead-tarefa-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.detalhe-lead-tarefa-check input { width: auto; }
.detalhe-lead-tarefa-titulo-concluida { text-decoration: line-through; color: var(--ink-soft); }
.detalhe-lead-tarefa-excluir-form { margin-top: 6px; }

/* ---------- Comentários do Lead (fatia E4) ---------- */
.detalhe-lead-comentario-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.detalhe-lead-comentario-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 14px; resize: vertical; }
.detalhe-lead-comentario-form .btn { align-self: flex-end; }
.detalhe-lead-comentario-responder-btn { align-self: flex-start; margin-top: 4px; }
.detalhe-lead-comentario-resposta-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.detalhe-lead-comentario-resposta-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 13px; resize: vertical; }
.detalhe-lead-comentario-resposta-form .btn { align-self: flex-end; }
.detalhe-lead-comentario-respostas { margin: 10px 0 0 20px; padding-left: 16px; border-left: 2px solid var(--border); }

/* ---------- Anexos do Lead (fatia E5) ---------- */
.detalhe-lead-anexo-form { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.detalhe-lead-timeline li.detalhe-lead-anexo-item { flex-direction: row; align-items: flex-start; gap: 12px; }
.detalhe-lead-anexo-preview { flex-shrink: 0; display: flex; }
.detalhe-lead-anexo-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.detalhe-lead-anexo-icone { width: 40px; height: 40px; color: var(--ink-soft); }
.detalhe-lead-anexo-info { display: flex; flex-direction: column; gap: 2px; }
.detalhe-lead-anexo-excluir-form { margin-top: 4px; }

/* ---------- Calendário (fatia Cal-1a) — variáveis do FullCalendar remapeadas pros tokens do app ---------- */
#calendario-app {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-alt);
  --fc-neutral-text-color: var(--ink-soft);
  --fc-today-bg-color: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --fc-button-text-color: #fff;
  --fc-button-bg-color: var(--primary);
  --fc-button-border-color: var(--primary);
  --fc-button-hover-bg-color: color-mix(in srgb, var(--primary) 85%, black);
  --fc-button-hover-border-color: color-mix(in srgb, var(--primary) 85%, black);
  --fc-button-active-bg-color: color-mix(in srgb, var(--primary) 70%, black);
  --fc-button-active-border-color: color-mix(in srgb, var(--primary) 70%, black);
  --fc-event-bg-color: var(--primary);
  --fc-event-border-color: var(--primary);
  --fc-event-text-color: #fff;
  --fc-list-event-hover-bg-color: var(--surface-alt);
  --fc-highlight-color: color-mix(in srgb, var(--primary) 15%, transparent);
  font-family: var(--font-body);
}
#calendario-app .fc-toolbar-title { font-family: var(--font-display); color: var(--ink); }

@media (max-width: 767px) {
  #calendario-app .fc-toolbar { flex-wrap: wrap; row-gap: 10px; }
  #calendario-app .fc-toolbar-title { font-size: 1.1em; }
}

/* ---------- Calendário (fatia Cal-1b) — popover de item, toast de erro, form do modal de Evento ---------- */
.calendario-popover {
  position: absolute;
  z-index: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-width: 220px;
  max-width: 280px;
  font-size: 14px;
}
.calendario-popover-horario { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.calendario-popover-lead { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.calendario-popover-acoes { display: flex; gap: 8px; margin-top: 12px; }

.calendario-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: color-mix(in srgb, var(--error) 15%, var(--surface));
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  box-shadow: var(--shadow);
}

#form-evento label { display: block; margin-top: 14px; margin-bottom: 4px; font-size: 13px; color: var(--ink-soft); }
#form-evento input, #form-evento textarea, #form-evento select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 14px;
}
.modal-evento-acoes { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; }

/* ---------- Tarefas (fatia Tarefas-A) ---------- */
.tarefas-filtro-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tarefas-filtro-form select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13px;
}
.badge-prioridade-baixa  { background: color-mix(in srgb, var(--info) 15%, var(--surface));    color: var(--info); }
.badge-prioridade-normal { background: var(--surface-alt); color: var(--ink-soft); }
.badge-prioridade-alta   { background: color-mix(in srgb, var(--error) 15%, var(--surface));   color: var(--error); }

/* ---------- Gráficos de Tarefas ---------- */
.grafico-resumo-cards { display: flex; gap: 16px; margin-bottom: 20px; }
.grafico-resumo-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; }
.grafico-resumo-numero { font-size: 32px; font-weight: 700; font-family: var(--font-display); }
.grafico-barras-card { margin-bottom: 20px; }
.grafico-barras-card h2 { margin-top: 0; margin-bottom: 16px; font-size: 16px; }
.grafico-barra-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.grafico-barra-label { width: 140px; flex-shrink: 0; font-size: 13px; color: var(--ink-soft); }
.grafico-barra-trilho { flex: 1; height: 10px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.grafico-barra-preenchimento { height: 100%; border-radius: 999px; }
.grafico-barra-valor { width: 30px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Minhas Tarefas (fatia Tarefas-B) ---------- */
.minhas-tarefas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.minhas-tarefas-bloco-largo { grid-column: span 3; }
.minhas-tarefas-bloco h2 { margin-top: 0; font-size: 15px; }
.minhas-tarefas-bloco h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 14px 0 6px; }
.minhas-tarefas-lista { list-style: none; padding: 0; margin: 0; }
.minhas-tarefas-lista li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.minhas-tarefas-lista li:last-child { border-bottom: none; }
.minhas-tarefas-item-meta { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.minhas-tarefas-agenda-conectar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.minhas-tarefas-tabs { display: flex; gap: 4px; margin-bottom: 12px; background: var(--surface-alt); border-radius: var(--radius-sm); padding: 3px; width: fit-content; }
.minhas-tarefas-tab { padding: 6px 14px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.minhas-tarefas-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; }

@media (max-width: 1023px) {
  .minhas-tarefas-grid { grid-template-columns: 1fr; }
  .minhas-tarefas-bloco-largo { grid-column: span 1; }
}

/* ---- Tela de Lead — layout Frappe (toolbar, abas, lateral) ---- */
.lead-header-compacto { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; flex-wrap: wrap; }
.lead-header-compacto h1 { margin: 0; font-size: 22px; }
.lead-header-funil { color: var(--ink-soft); font-size: 14px; }

.lead-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.lead-toolbar-abas { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-toolbar-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lead-toolbar-temperatura select { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 13px; }

/* Botões de Editar/Salvar/Cancelar Layout na toolbar. O CSS já existente
   esconde .layout-editando-on por padrão em qualquer lugar da página e só
   mostra dentro de .lead-form-container.layout-editando — as regras
   abaixo estendem o mesmo comportamento pro .lead-pagina, que a toolbar
   usa (JS alterna a classe layout-editando nos dois elementos juntos). */
.lead-pagina.layout-editando .layout-editando-on { display: inline-flex; }
.lead-pagina.layout-editando .layout-editando-off { display: none; }

.lead-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 1536px; }
@media (max-width: 1023px) {
  .lead-layout { grid-template-columns: 1fr; }
}

.lead-sidebar { position: sticky; top: 16px; }
.lead-sidebar-campo { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lead-sidebar-campo:last-child { border-bottom: none; }
.lead-sidebar-label { color: var(--ink-soft); font-size: 12px; }
.lead-sidebar-valor { cursor: pointer; font-weight: 600; padding: 2px 4px; border-radius: 4px; }
.lead-sidebar-valor:hover { background: var(--surface-alt); }
.lead-sidebar-input { width: 100%; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--primary); font-size: 14px; }
.lead-sidebar-erro { color: var(--error); font-size: 12px; margin-top: 2px; }
.lead-sidebar-divisor { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

.lead-servicos-total { text-align: right; margin-top: 12px; font-size: 15px; }