/* ==========================================================================
   Q One — Design System v2
   Referência visual: docs/DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  --primary: #6D3DF5;
  --primary-600: #5B2EE8;
  --primary-soft: #F1EDFE;
  --secondary: #2F80FF;
  --accent: #F97316;
  --dark: #0B1220;
  --ink: #1E293B;
  --muted: #64748B;
  --border: #E6EAF2;
  --surface: #FFFFFF;
  --soft: #F5F7FC;
  --ok: #15803D;
  --ok-bg: #ECFDF3;
  --warn: #B45309;
  --warn-bg: #FFF7ED;
  --err: #DC2626;
  --err-bg: #FEF2F2;
  --info: #2563EB;
  --info-bg: #EFF6FF;
  --sidebar: #0B1220;
  --sidebar-2: #101B31;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 14px 34px rgba(15, 23, 42, .08);
  --shadow-lg: 0 28px 70px rgba(15, 23, 42, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--soft);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: clamp(1.55rem, 2.6vw, 1.95rem); letter-spacing: -.04em; line-height: 1.15; margin: 0 0 8px; color: var(--dark); font-weight: 800; }
h2 { font-size: 1.15rem; letter-spacing: -.025em; margin: 0 0 6px; color: var(--dark); font-weight: 750; }
h3 { font-size: .98rem; margin: 0 0 8px; color: var(--dark); font-weight: 700; }
p { margin: 0 0 12px; }
small { font-weight: 400; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 22%, white); }

.icon { flex: 0 0 auto; }

.muted { color: var(--muted); font-size: .87rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; color: var(--primary); font-size: .68rem; font-weight: 800; }
.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .01em; }
.right { text-align: right; }
.full { grid-column: 1 / -1; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Layout base
   -------------------------------------------------------------------------- */
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.center { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.brand img { width: 116px; height: auto; }
.panel-main { padding: 32px 0 80px; }
.page-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 6px 0 4px; }
.page-head .btn-row { margin: 0; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 42px; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 17px; font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer; background: var(--primary); color: #fff; white-space: nowrap;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 22%, transparent); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn.secondary:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); color: var(--primary); }
.btn.ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn.ghost:hover { background: var(--soft); color: var(--ink); box-shadow: none; }
.btn.danger { background: var(--surface); border-color: #FECACA; color: var(--err); }
.btn.danger:hover { background: var(--err-bg); box-shadow: none; }
.btn.small { min-height: 34px; padding: 6px 11px; font-size: .76rem; border-radius: 8px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.btn-row form { margin: 0; }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */
label { display: flex; flex-direction: column; gap: 7px; font-size: .81rem; font-weight: 650; margin-bottom: 14px; color: #334155; }
input:where(:not([type=checkbox]):not([type=hidden]):not([type=radio])), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #D9E0EC; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: #9AA7BC; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
textarea { resize: vertical; }
label small { font-weight: 400; color: var(--muted); font-size: .74rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; font-size: .84rem; color: var(--ink); cursor: pointer; }
.check input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; accent-color: var(--primary); cursor: pointer; }
.check span { flex: 1; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.error, .field-error { color: var(--err); font-size: .78rem; margin: 2px 0 0; }

/* --------------------------------------------------------------------------
   Alertas, badges e estados
   -------------------------------------------------------------------------- */
.alert { border-radius: 12px; padding: 13px 16px; font-size: .86rem; margin-bottom: 18px; border: 1px solid transparent; }
.alert.ok { background: var(--ok-bg); color: var(--ok); border-color: #BBF7D0; }
.alert.err { background: var(--err-bg); color: var(--err); border-color: #FECACA; }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: #FED7AA; }
.alert code { background: rgba(255,255,255,.7); padding: 2px 7px; border-radius: 6px; font-size: .82em; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .67rem; font-weight: 800; }
.option-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--pill) 13%, white); color: var(--pill); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.option-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pill); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.empty-state { padding: 36px 20px; text-align: center; border: 1px dashed #D7DEEC; border-radius: 14px; background: #FAFBFE; color: var(--muted); font-size: .87rem; }
.empty-state .icon { color: #B6C0D4; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Cards e tabelas
   -------------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; width: 100%; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.card > h2:first-child { margin-bottom: 14px; }
.card.narrow { max-width: 460px; }
.card.wide { max-width: 780px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.card-head h2 { margin: 0; }
.card-head .muted { margin: 2px 0 0; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 12px 10px 0; border-bottom: 1px solid var(--border); font-weight: 800; }
.table td { padding: 12px 12px 12px 0; border-bottom: 1px solid #EEF1F7; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FBFCFE; }
.table .actions { white-space: nowrap; }

/* --------------------------------------------------------------------------
   App shell — sidebar escura + topbar
   -------------------------------------------------------------------------- */
.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; background: var(--soft); }
.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 16px 16px;
  background: radial-gradient(120% 60% at 0% 0%, rgba(109,61,245,.22) 0%, transparent 55%), linear-gradient(180deg, var(--sidebar-2) 0%, var(--sidebar) 100%);
  color: #CBD5E1; overflow: hidden;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 6px; }
.sidebar-brand img { width: 104px; height: auto; }
.sidebar-close { display: none; margin-left: auto; background: none; border: 0; color: #94A3B8; cursor: pointer; padding: 4px; }
.sidebar-org {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 10px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04);
}
.sidebar-org .avatar { width: 34px; height: 34px; font-size: .72rem; }
.sidebar-org strong { display: block; color: #F8FAFC; font-size: .8rem; line-height: 1.25; }
.sidebar-org small { display: block; color: #94A3B8; font-size: .68rem; }
.side-nav { flex: 1; overflow-y: auto; padding: 6px 0 10px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-thumb { background: #334155; border-radius: 9px; }
.nav-label { display: block; padding: 14px 12px 7px; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.side-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0;
  border-radius: 10px; color: #A9B6CA; font-size: .83rem; font-weight: 600; line-height: 1.2;
  transition: background .15s, color .15s, transform .12s;
}
.side-link:hover { background: rgba(255,255,255,.06); color: #F8FAFC; text-decoration: none; }
.side-link.active { background: linear-gradient(135deg, var(--primary) 0%, #7C5CFF 100%); color: #fff; box-shadow: 0 10px 22px rgba(109,61,245,.32); }
.side-link .icon { color: currentColor; opacity: .9; }
.side-link .nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .66rem; display: grid; place-items: center; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: #CBD5E1; }
.side-user:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.side-user > div { min-width: 0; }
.side-user strong { display: block; color: #F8FAFC; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user small { display: block; color: #94A3B8; font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-logout { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 6px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #94A3B8; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.side-logout:hover { background: rgba(255,255,255,.05); color: #FCA5A5; }

.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 28px;
  background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; place-items: center; }
.searchbar { position: relative; flex: 1; max-width: 520px; }
.searchbar .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; }
.searchbar input { width: 100%; height: 42px; padding: 0 14px 0 42px; border: 1px solid var(--border); border-radius: 11px; background: #F8FAFC; font-size: .84rem; }
.searchbar input:focus { background: #fff; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); text-decoration: none; }
.icon-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: #fff; font-size: .62rem; display: grid; place-items: center; }
.topbar-divider { width: 1px; height: 30px; background: var(--border); margin: 0 4px; }
.user-dropdown { position: relative; }
.user-dropdown summary { display: flex; align-items: center; gap: 9px; list-style: none; padding: 5px 7px 5px 5px; border-radius: 11px; cursor: pointer; }
.user-dropdown summary::-webkit-details-marker { display: none; }
.user-dropdown summary:hover { background: var(--soft); }
.user-dropdown .user-meta { text-align: left; line-height: 1.2; }
.user-dropdown .user-meta strong { display: block; font-size: .79rem; color: var(--ink); }
.user-dropdown .user-meta small { display: block; font-size: .68rem; color: var(--muted); }
.user-dropdown .chevron { color: #94A3B8; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 7px;
  background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-md); z-index: 60;
}
.dropdown-menu .dropdown-head { padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.dropdown-menu .dropdown-head strong { display: block; font-size: .8rem; }
.dropdown-menu .dropdown-head small { display: block; color: var(--muted); font-size: .7rem; word-break: break-all; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 550; text-align: left; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--soft); text-decoration: none; color: var(--primary); }
.dropdown-menu .danger { color: var(--err); }
.dropdown-menu .danger:hover { background: var(--err-bg); color: var(--err); }
.avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #8B5CF6); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.avatar.square { border-radius: 10px; }
.avatar.sm { width: 30px; height: 30px; flex-basis: 30px; font-size: .64rem; }

.app-content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 26px 28px 56px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.page-header h1 { margin: 2px 0 4px; }
.page-header p { margin: 0; }
.page-header .page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.period-chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-size: .8rem; font-weight: 600; }
.period-chip input { width: auto; padding: 0; border: 0; background: transparent; font-size: .78rem; box-shadow: none; }
.period-chip input:focus { box-shadow: none; }

.sidebar-overlay { display: none; }

/* --------------------------------------------------------------------------
   Dashboard — KPIs, funil, donut, tarefas e atividades
   -------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kpi-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; }
.kpi-icon.blue { background: #EFF6FF; color: #2563EB; }
.kpi-icon.purple { background: #F3EEFF; color: #7C3AED; }
.kpi-icon.green { background: #ECFDF3; color: #16A34A; }
.kpi-icon.orange { background: #FFF7ED; color: #F97316; }
.kpi-label { font-size: .8rem; font-weight: 650; color: var(--muted); }
.kpi-value { font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.1; font-weight: 800; letter-spacing: -.04em; color: var(--dark); margin: 2px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-foot { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--muted); }
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-weight: 800; }
.kpi-delta.down { color: var(--err); }
.kpi-delta.flat { color: var(--muted); }
.kpi-detail { margin-top: 10px; font-size: .72rem; color: var(--muted); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 18px; }
.dashboard-grid + .dashboard-grid { margin-top: 18px; }
.panel-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.panel-title .icon { color: var(--primary); }
.panel-title h2 { font-size: .97rem; margin: 0; letter-spacing: -.02em; }
.panel-link { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.panel-head select { width: auto; min-width: 140px; height: 34px; padding: 0 28px 0 10px; font-size: .74rem; }

.funnel { display: flex; flex-direction: column; gap: 7px; padding: 4px 0 2px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-track { flex: 1; display: flex; justify-content: center; }
.funnel-bar {
  height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  min-width: 88px; text-align: center; line-height: 1.15;
}
.funnel-bar strong { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.funnel-bar small { font-size: .66rem; opacity: .92; font-weight: 600; }
.funnel-step-1 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.funnel-step-2 { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.funnel-step-3 { background: linear-gradient(135deg, #EC4899, #DB2777); }
.funnel-step-4 { background: linear-gradient(135deg, #10B981, #059669); }
.funnel-pct { width: 42px; text-align: right; font-size: .72rem; font-weight: 700; color: var(--muted); }
.funnel-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--muted); }
.funnel-foot strong { color: var(--ink); }

.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut {
  position: relative; width: 164px; height: 164px; flex: 0 0 164px; border-radius: 50%;
  background: #EEF2F8;
}
.donut::after { content: ""; position: absolute; inset: 33px; background: #fff; border-radius: 50%; }
.donut-center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.donut-center strong { font-size: 1.45rem; font-weight: 800; letter-spacing: -.04em; color: var(--dark); }
.donut-center small { font-size: .66rem; color: var(--muted); }
.legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: .77rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-value { color: var(--muted); font-weight: 700; }

.task-list { list-style: none; margin: 0; padding: 0; }
.task-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid #EEF1F7; }
.task-item:last-child { border-bottom: 0; padding-bottom: 0; }
.task-form { margin: 0; flex: 0 0 auto; }
.task-check { width: 21px; height: 21px; margin-top: 1px; display: grid; place-items: center; border: 2px solid #CBD5E1; border-radius: 7px; background: #fff; color: transparent; cursor: pointer; transition: all .15s; }
.task-check:hover { border-color: var(--primary); color: var(--primary); }
.task-body { min-width: 0; flex: 1; }
.task-body strong { display: block; font-size: .82rem; font-weight: 650; color: var(--ink); line-height: 1.35; }
.task-body small { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; }
.task-time { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--muted); }
.task-item.overdue .task-time { color: var(--err); }
.task-item.overdue .task-body strong { color: var(--err); }

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid #EEF1F7; }
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; }
.activity-icon.blue { background: #EFF6FF; color: #2563EB; }
.activity-icon.purple { background: #F3EEFF; color: #7C3AED; }
.activity-icon.green { background: #ECFDF3; color: #16A34A; }
.activity-icon.orange { background: #FFF7ED; color: #F97316; }
.activity-icon.pink { background: #FDF2F8; color: #DB2777; }
.activity-icon.gray { background: #F1F5F9; color: #64748B; }
.activity-body { flex: 1; min-width: 0; }
.activity-body strong { display: block; font-size: .8rem; font-weight: 650; color: var(--ink); line-height: 1.35; }
.activity-body small { display: block; font-size: .7rem; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { flex: 0 0 auto; font-size: .68rem; color: #94A3B8; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-action { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink); font-size: .76rem; font-weight: 650; }
.quick-action:hover { text-decoration: none; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: var(--primary-soft); }

/* --------------------------------------------------------------------------
   Organizações / cartões de seleção
   -------------------------------------------------------------------------- */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.org-card { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.org-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.org-card-head { display: flex; align-items: center; gap: 12px; }
.org-card-head .avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; font-size: .8rem; }
.org-card-head strong { display: block; font-size: .95rem; color: var(--dark); }
.org-card-head small { display: block; color: var(--muted); font-size: .73rem; }
.org-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.org-card .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Leads, campos do CRM e configuração
   -------------------------------------------------------------------------- */
.lead-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.lead-summary > div { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shadow-sm); }
.lead-summary span { display: block; font-size: .72rem; font-weight: 650; color: var(--muted); }
.lead-summary strong { display: block; font-size: 1.2rem; color: var(--dark); letter-spacing: -.03em; }
.lead-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: -.02em; }
.lead-name { font-weight: 700; color: var(--ink); }
.lead-name:hover { color: var(--primary); }
.table-wrap { overflow-x: auto; }
.table-wrap .table td, .table-wrap .table th { white-space: nowrap; }
.table-wrap .table th:last-child, .table-wrap .table td:last-child { position: sticky; right: 0; background: #fff; box-shadow: -10px 0 14px -12px rgba(15, 23, 42, .28); }
.table-wrap .table tbody tr:hover td:last-child { background: #FBFCFE; }
.table-wrap .lead-id { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-wrap .lead-name { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.lead-id-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.lead-id-banner strong { font-size: .82rem; color: var(--dark); }
.lead-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.detail-list { margin: 0; display: flex; flex-direction: column; gap: 0; }
.detail-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #EEF1F7; }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { font-size: .75rem; color: var(--muted); font-weight: 600; }
.detail-list dd { margin: 0; font-size: .82rem; color: var(--ink); text-align: right; word-break: break-word; }
.detail-notes { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.detail-notes p { margin: 4px 0 0; font-size: .82rem; color: var(--ink); white-space: pre-wrap; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid #EEF1F7; }
.timeline-item:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-body strong { display: block; font-size: .81rem; color: var(--ink); }
.timeline-body small { display: block; font-size: .7rem; color: var(--muted); }
.timeline-item time { font-size: .7rem; color: #94A3B8; white-space: nowrap; }
.field-admin-list { display: flex; flex-direction: column; gap: 12px; }
.field-admin { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #FAFBFE; }
.field-admin.is-inactive { background: #FFFDF8; border-color: #FDE68A; }
.field-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.field-admin-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.field-admin-title strong { font-size: .88rem; color: var(--dark); }
.field-admin-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: .69rem; color: var(--muted); }
.field-admin-meta > span:not(.lead-id) { padding-right: 9px; border-right: 1px solid var(--border); }
.field-admin-meta > span:last-child { border-right: 0; }
.field-edit { margin-top: 10px; }
.field-edit summary { cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--primary); width: max-content; padding: 4px 0; }
.field-edit[open] summary { margin-bottom: 10px; }
.field-edit form { border-top: 1px solid var(--border); padding-top: 12px; }
.guideline-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guideline-list li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #FAFBFE; }
.guideline-list strong { display: block; font-size: .8rem; color: var(--ink); }
.guideline-list small { display: block; font-size: .71rem; color: var(--muted); line-height: 1.5; }
.guideline-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 800; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.module-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: #FAFBFE; }
.module-item.is-off { opacity: .62; }
.module-item > div { flex: 1; min-width: 0; }
.module-item strong { display: block; font-size: .78rem; color: var(--ink); }
.module-item small { display: block; font-size: .67rem; color: var(--muted); }
.module-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ok); }
.module-item.is-off .module-dot { background: #CBD5E1; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.start-step { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 15px; background: #FAFBFE; color: var(--ink); }
.start-step:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: var(--primary-soft); }
.start-step strong { display: block; font-size: .84rem; margin: 7px 0 3px; }
.start-step small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.start-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800; }

/* --------------------------------------------------------------------------
   Visões de leads: tabela, kanban, calendário e cronograma
   -------------------------------------------------------------------------- */
.view-controls { padding: 16px 18px; }
.view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.view-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #F1F5F9; }
.view-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: .77rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.view-tab:hover { color: var(--primary); text-decoration: none; }
.view-tab.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.month-nav { display: flex; align-items: center; gap: 7px; }
.month-nav strong { font-size: .8rem; color: var(--ink); }
.month-nav .icon-btn { width: 32px; height: 32px; border-radius: 8px; font-size: 1.05rem; }
.preference-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 10px; border: 1px solid #BBF7D0; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: .75rem; font-weight: 650; }
.preference-banner > span { display: inline-flex; align-items: center; gap: 6px; }
.preference-banner form { margin: 0; }
.preference-save { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.view-filter-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lead-search { flex: 1; min-width: 240px; max-width: 520px; }
.lead-search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94A3B8; }
.lead-search input { height: 40px; padding-left: 40px; }
.inline-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 145px; font-size: .67rem; font-weight: 700; color: var(--muted); }
.inline-field select { height: 36px; padding: 0 10px; font-size: .77rem; }
.filters-panel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.filters-panel summary { display: flex; align-items: center; gap: 6px; width: max-content; cursor: pointer; list-style: none; font-size: .77rem; font-weight: 700; color: var(--muted); }
.filters-panel summary::-webkit-details-marker { display: none; }
.filters-panel[open] summary { margin-bottom: 12px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.filter-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .68rem; font-weight: 700; color: var(--muted); }
.filter-field input, .filter-field select { height: 35px; padding: 0 9px; font-size: .76rem; }
.filter-range { display: flex; align-items: center; gap: 6px; }
.filter-range input { flex: 1; min-width: 0; }
.filter-range span { font-size: .64rem; font-weight: 500; }
.filter-actions { display: flex; gap: 8px; margin-top: 12px; }

.lead-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.board-column { flex: 1 0 205px; min-width: 205px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #F8FAFC; }
.board-column-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 0 2px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.board-column-body { display: flex; flex-direction: column; gap: 9px; min-height: 80px; }
.board-card { padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); cursor: grab; }
.board-card .lead-id { display: block; margin: 1px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-date { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 7px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: #F8FAFC; font-size: .65rem; color: var(--muted); }
.board-move { margin: 0; }
.board-move select { height: 31px; padding: 0 8px; font-size: .71rem; background: #fff; }
.board-empty { margin: 0; padding: 14px 0; text-align: center; font-size: .71rem; color: #94A3B8; }
.board-hint { display: flex; align-items: center; gap: 5px; margin: 6px 2px 0; font-size: .69rem; }
.board-card.is-dragging { opacity: .45; }
.board-column.is-drop-target { outline: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: -4px; background: var(--primary-soft); }

.calendar-card { padding: 18px; }
.calendar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.calendar-head h2 { margin: 0; font-size: 1.05rem; }
.calendar-head p { margin: 2px 0 0; }
.calendar-scroll { overflow-x: auto; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); min-width: 600px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.calendar-weekday { padding: 8px 9px; border-bottom: 1px solid var(--border); background: #F8FAFC; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.calendar-day { min-height: 104px; padding: 6px; border-right: 1px solid #EEF1F7; border-bottom: 1px solid #EEF1F7; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-outside { background: #FAFBFE; opacity: .55; }
.calendar-day.is-today { background: #F5F3FF; }
.calendar-day-number { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .67rem; font-weight: 700; color: var(--muted); }
.calendar-day.is-today .calendar-day-number { background: var(--primary); color: #fff; }
.calendar-events { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.calendar-event { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .63rem; font-weight: 600; color: var(--ink); }
.calendar-event:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.calendar-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--primary); }
.calendar-more { padding-left: 4px; font-size: .59rem; color: var(--muted); }

.timeline-card { padding: 18px; }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: .67rem; color: var(--muted); }
.timeline-legend span { display: inline-flex; align-items: center; gap: 5px; }
.timeline-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.timeline-scroll { overflow-x: auto; padding-bottom: 4px; }
.timeline { display: flex; flex-direction: column; gap: 3px; min-width: 620px; }
.timeline-header, .timeline-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: center; }
.timeline-header { margin-bottom: 4px; }
.timeline-label { position: sticky; left: 0; z-index: 2; min-width: 0; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; background: #fff; font-size: .71rem; font-weight: 650; color: var(--ink); }
.timeline-label small { display: block; font-size: .63rem; font-weight: 500; color: var(--muted); }
.timeline-track { position: relative; height: 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background-color: #F8FAFC; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), rgba(148, 163, 184, .09) calc(100% / 12 - 1px), rgba(148, 163, 184, .09) calc(100% / 12)); background-size: calc(100% / 12) 100%; }
.timeline-months { display: flex; height: 26px; font-size: .61rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.timeline-months span { display: flex; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid var(--border); white-space: nowrap; }
.timeline-months span:last-child { border-right: 0; }
.timeline-row .timeline-track { height: 30px; }
.timeline-bar { position: absolute; top: 4px; display: flex; align-items: center; min-width: 3px; height: 22px; padding: 0 7px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; font-weight: 700; color: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .16); transition: transform .15s ease, box-shadow .15s ease; }
.timeline-bar:hover { text-decoration: none; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, .24); }
.timeline-today { position: absolute; top: 0; bottom: 0; z-index: 2; width: 1px; background: var(--accent); opacity: .8; }
.timeline-row:hover .timeline-track { border-color: color-mix(in srgb, var(--primary) 20%, var(--border)); }

/* --------------------------------------------------------------------------
   Componentes legados (kanban, chat, permissões, formulários)
   -------------------------------------------------------------------------- */
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.inline-form input, .inline-form select { width: auto; min-width: 170px; padding: 9px 11px; font-size: .82rem; }
.inline-form .btn { padding: 9px 15px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.row-actions.inline { justify-content: flex-end; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pagination-link { font-size: .82rem; font-weight: 650; padding: 9px 14px; border: 1px solid var(--border); border-radius: 9px; }
.pagination-link:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pagination-link.is-disabled { color: #C4C1CE; }
.pagination-status { font-size: .78rem; color: var(--muted); }
.role-block { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 0 0 14px; background: #FAFBFE; }
.role-block.new-role { background: var(--surface); border-style: dashed; }
.role-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.role-head input { max-width: 320px; margin-bottom: 0; }
.perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-bottom: 12px; }
.perm-grid .check { font-size: .82rem; }
.role-block .role-delete { margin-top: -4px; }
.feature-list { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: .84rem; color: var(--muted); }
.feature-list strong { color: var(--ink); }
.onboarding-list { list-style: none; padding: 0; margin: 0; }
.onboarding-list li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.onboarding-list li:last-child { border-bottom: 0; }
.onboarding-list li.done { color: var(--muted); }
.onboarding-list li span { display: inline-block; width: 22px; }
.verify-banner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: var(--warn-bg); color: var(--warn); padding: 10px 20px; font-size: .82rem; border-bottom: 1px solid #FED7AA; }
.verify-banner form { margin: 0; }
.sidebar .bell, .app-topbar .bell { position: relative; }
.unread-row { font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 12px; align-items: end; border-bottom: 1px solid var(--border); padding: 10px 0; }
.field-row-checks { display: flex; gap: 14px; }
.kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col { min-width: 250px; flex: 1 0 250px; background: #F8FAFC; border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.kanban-col h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.deal-card strong { display: block; font-size: .9rem; }
.deal-value { color: var(--primary); font-weight: 800; font-size: .84rem; }
.deal-meta { color: var(--muted); font-size: .72rem; margin-top: 4px; }
.move-form { display: flex; gap: 6px; margin-top: 8px; }
.move-form select { padding: 6px 8px; font-size: .74rem; }
.task-done { text-decoration: line-through; color: var(--muted); }
.chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 440px; overflow-y: auto; margin-bottom: 18px; padding: 4px; }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.chat-msg.in { align-self: flex-start; }
.chat-msg.out { align-self: flex-end; align-items: flex-end; }
.chat-bubble { background: #F0EDF9; border-radius: 14px; padding: 10px 14px; white-space: pre-wrap; font-size: .9rem; }
.chat-msg.out .chat-bubble { background: var(--primary); color: #fff; }
.secret-box { word-break: break-all; background: #F8FAFC; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.save-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Login / Cadastro — tela dividida
   -------------------------------------------------------------------------- */
.auth-body { background: #fff; }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(460px, .94fr); min-height: 100vh; }
.auth-aside {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 40px clamp(30px, 5vw, 76px) 34px;
  color: #E2E8F0;
  background:
    radial-gradient(75% 55% at 85% 15%, rgba(59,130,246,.22) 0%, transparent 62%),
    radial-gradient(65% 60% at 5% 65%, rgba(109,61,245,.30) 0%, transparent 60%),
    linear-gradient(145deg, #111B38 0%, #0B1220 58%, #0A1020 100%);
}
.auth-aside::after {
  content: ""; position: absolute; right: -160px; bottom: -190px; width: 520px; height: 520px;
  border: 1px solid rgba(167,139,250,.16); border-radius: 50%; pointer-events: none;
}
.auth-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.auth-glow-1 { width: 430px; height: 430px; left: -210px; top: 24%; border: 1px solid rgba(96,165,250,.16); }
.auth-glow-2 { width: 230px; height: 230px; right: -90px; top: 6%; border: 1px solid rgba(167,139,250,.18); }
.auth-logo { position: relative; z-index: 1; width: 132px; height: auto; }
.auth-aside-body { position: relative; z-index: 1; max-width: 560px; margin: auto 0; padding: 26px 0 14px; }
.auth-kicker { margin: 0 0 16px; color: #A5B4FC; font-size: .7rem; font-weight: 800; letter-spacing: .18em; line-height: 1.8; text-transform: uppercase; }
.auth-aside h1 { color: #fff; font-size: clamp(2.15rem, 3.5vw, 3.35rem); line-height: 1.08; letter-spacing: -.05em; margin: 0 0 16px; font-weight: 800; }
.auth-aside h1 span { background: linear-gradient(100deg, #A78BFA 0%, #60A5FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-lead { color: #AEBBD0; font-size: .94rem; line-height: 1.6; max-width: 470px; margin-bottom: 22px; }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.auth-benefits li { display: flex; gap: 13px; align-items: flex-start; }
.auth-benefit-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(109,61,245,.30); border: 1px solid rgba(167,139,250,.26); color: #C4B5FD; }
.auth-benefits strong { display: block; color: #fff; font-size: .88rem; margin-bottom: 2px; }
.auth-benefits small { display: block; color: #94A3B8; font-size: .77rem; line-height: 1.5; }

.auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 34px 30px 24px; background: #F8FAFF; }
.auth-card { width: min(470px, 100%); margin: auto 0; padding: 30px; background: #fff; border: 1px solid #E9EDF5; border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, .08); }
.auth-brand { display: block; width: max-content; margin: 0 auto 30px; }
.auth-brand img { width: 124px; height: auto; display: block; }
.auth-title { text-align: center; font-size: 1.65rem; letter-spacing: -.04em; margin: 0 0 6px; }
.auth-sub { text-align: center; color: var(--muted); font-size: .86rem; margin: 0 0 26px; }
.auth-mobile-brand { display: none; }
.auth-form label { font-size: .8rem; }
.auth-input { position: relative; display: block; }
.auth-input .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94A3B8; pointer-events: none; }
.auth-input input { height: 47px; padding-left: 42px; padding-right: 42px; border-radius: 11px; font-size: .87rem; }
.auth-input .auth-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: #94A3B8; cursor: pointer; }
.auth-input .auth-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.auth-code input { letter-spacing: .38em; text-align: center; font-size: 1.05rem; font-weight: 700; padding-left: 42px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 4px 0 20px; }
.auth-link { font-size: .79rem; font-weight: 650; }
.auth-submit { width: 100%; height: 47px; border-radius: 11px; font-size: .9rem; background: linear-gradient(135deg, var(--primary) 0%, #7C5CFF 100%); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 26%, transparent); }
.auth-submit:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 32%, transparent); }
.auth-divider { position: relative; text-align: center; margin: 22px 0; color: #94A3B8; font-size: .72rem; font-weight: 650; }
.auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.auth-divider span { position: relative; background: #fff; padding: 0 12px; }
.auth-alt { width: 100%; height: 46px; border-radius: 11px; font-size: .84rem; }
.auth-bottom { text-align: center; font-size: .8rem; color: var(--muted); margin: 22px 0 0; }
.legal-summary { padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--soft); color: var(--muted); font-size: .79rem; line-height: 1.6; }
.legal-summary p { margin: 0 0 8px; }
.legal-summary p:last-child { margin-bottom: 0; }
.auth-terms { margin: 4px 0 18px; font-size: .78rem; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.auth-foot { margin: 26px 0 0; text-align: center; font-size: .68rem; color: #94A3B8; }

/* --------------------------------------------------------------------------
   Landing pública
   -------------------------------------------------------------------------- */
.landing { background: #fff; }
.landing-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; }
.landing-nav .landing-links { display: flex; align-items: center; gap: 24px; font-size: .83rem; font-weight: 600; color: #CBD5E1; }
.landing-nav .landing-links a { color: #CBD5E1; }
.landing-nav .landing-links a:hover { color: #fff; text-decoration: none; }
.landing-hero {
  position: relative; overflow: hidden; color: #E2E8F0;
  background:
    radial-gradient(70% 55% at 78% 10%, rgba(59,130,246,.24) 0%, transparent 60%),
    radial-gradient(60% 55% at 8% 75%, rgba(109,61,245,.28) 0%, transparent 62%),
    linear-gradient(145deg, #111B38 0%, #0B1220 62%, #0A1020 100%);
}
.landing-hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -220px; top: -240px; border-radius: 50%; border: 1px solid rgba(167,139,250,.16); }
.landing-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 48px; align-items: center; padding: 68px 0 86px; }
.landing-hero h1 { color: #fff; font-size: clamp(2.35rem, 4.3vw, 3.8rem); line-height: 1.05; letter-spacing: -.055em; margin: 14px 0 18px; }
.landing-hero h1 span { background: linear-gradient(100deg, #A78BFA 0%, #60A5FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-hero p { color: #AEBBD0; font-size: 1rem; line-height: 1.7; max-width: 540px; }
.landing-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(109,61,245,.18); border: 1px solid rgba(167,139,250,.24); color: #C4B5FD; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.landing-hero .btn.secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.landing-hero .btn.secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.landing-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 36px; }
.landing-stats strong { display: block; color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.landing-stats small { color: #94A3B8; font-size: .72rem; }

.landing-preview { position: relative; }
.landing-mock { position: relative; background: #fff; border-radius: 18px; padding: 16px; color: var(--ink); box-shadow: 0 40px 80px rgba(2,6,23,.5); border: 1px solid rgba(255,255,255,.35); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
.landing-mock-head { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.landing-mock-head i { width: 8px; height: 8px; border-radius: 50%; background: #E2E8F0; }
.landing-mock-head i:first-child { background: #FCA5A5; }
.landing-mock-head i:nth-child(2) { background: #FCD34D; }
.landing-mock-head i:nth-child(3) { background: #86EFAC; }
.landing-mock-head span { margin-left: auto; font-size: .62rem; color: #94A3B8; }
.landing-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.landing-mock-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 9px; }
.landing-mock-kpi small { display: block; color: var(--muted); font-size: .58rem; font-weight: 700; }
.landing-mock-kpi strong { display: block; font-size: .94rem; color: var(--dark); letter-spacing: -.02em; }
.landing-mock-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding: 10px 12px; border-radius: 10px; background: #F8FAFC; }
.landing-mock-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #8B5CF6, #6D3DF5); opacity: .85; }
.landing-mock-bars i:nth-child(2n) { background: linear-gradient(180deg, #60A5FA, #3B82F6); }

.landing-section { padding: 76px 0; }
.landing-section.alt { background: #F8FAFC; }
.landing-section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.landing-section-head h2 { font-size: clamp(1.65rem, 2.6vw, 2.2rem); letter-spacing: -.04em; }
.landing-section-head p { color: var(--muted); font-size: .95rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 14px; }
.feature-card h3 { margin: 0 0 5px; font-size: .94rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.landing-cta { text-align: center; padding: 66px 0; background: linear-gradient(135deg, #111B38, #0B1220); color: #fff; }
.landing-cta h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -.04em; }
.landing-cta p { color: #AEBBD0; margin-bottom: 22px; }
.landing-footer { padding: 26px 0; background: #080E1A; color: #64748B; font-size: .74rem; }
.landing-footer .container { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.landing-footer a { color: #94A3B8; }

/* --------------------------------------------------------------------------
   Painel Root — variações
   -------------------------------------------------------------------------- */
.root-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(249,115,22,.14); color: #FDBA74; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.root-badge.on-light { background: #FFF7ED; color: #C2410C; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .kpi-grid { gap: 12px; }
  .kpi-value { font-size: 1.7rem; }
  .app-content { padding: 22px; }
  .app-topbar { padding: 0 22px; }
}

@media (max-width: 1080px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guideline-list, .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-hero-inner { gap: 30px; }
  .timeline-header, .timeline-row { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 286px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(2,6,23,.35); }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(2,6,23,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
  .nav-toggle { display: grid; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-topbar { position: sticky; }
  .searchbar { max-width: none; }
  .landing-hero-inner { grid-template-columns: 1fr; padding: 46px 0 60px; }
  .landing-preview { max-width: 520px; }
  .landing-mock { transform: none; }
}

@media (max-width: 820px) {
  .grid-2, .perm-grid, .feature-list { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .card { padding: 18px; }
  .page-head { align-items: flex-start; }
  .feature-grid { grid-template-columns: 1fr; }
  .donut-wrap { flex-direction: column; align-items: stretch; }
  .donut { margin: 0 auto; }
  .landing-nav .landing-links { display: none; }
  .lead-detail-grid, .guideline-list, .start-grid { grid-template-columns: 1fr; }
  .calendar-grid { min-width: 700px; }
  .timeline { min-width: 680px; }
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { padding: 36px 24px 24px; min-height: 100vh; }
  .auth-mobile-brand { display: block; margin-bottom: 22px; }
  .auth-card { margin: 0 auto; }
  .auth-brand { display: none; }
}

@media (max-width: 620px) {
  .app-topbar { min-height: 64px; padding: 0 14px; gap: 10px; }
  .app-content { padding: 16px 14px 42px; }
  .searchbar { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-divider { display: none; }
  .user-dropdown .user-meta, .user-dropdown .chevron { display: none; }
  .user-dropdown summary { padding: 3px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { padding: 16px; }
  .lead-summary { grid-template-columns: 1fr; }
  .field-admin-head { flex-wrap: wrap; }
  .view-tabs { width: 100%; overflow-x: auto; }
  .view-tab { flex: 1; justify-content: center; }
  .lead-search { min-width: 100%; max-width: none; }
  .inline-field { flex: 1; min-width: 120px; }
  .filter-grid { grid-template-columns: 1fr; }
  .timeline-header, .timeline-row { grid-template-columns: 120px minmax(0, 1fr); }
  .calendar-grid { min-width: 560px; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-title { font-size: 1.4rem; }
  .auth-main { padding: 24px 16px 18px; }
  .auth-card { padding: 22px; border-radius: 16px; }
  .landing-hero h1 { font-size: 2.1rem; }
  .landing-stats { gap: 18px; }
  .landing-mock-kpis { grid-template-columns: 1fr 1fr; }
  .period-chip { height: auto; padding: 7px 10px; flex-wrap: wrap; }
  .page-header { gap: 12px; }
  h1 { font-size: 1.45rem; }
  .funnel-bar { height: 46px; }
  .activity-time { display: none; }
}

@media (max-width: 420px) {
  .auth-main { padding: 20px 14px; }
  .auth-brand img { width: 148px; }
  .auth-submit { height: 44px; }
  .landing-mock { padding: 12px; }
}

@media print {
  .sidebar, .app-topbar, .sidebar-overlay, .no-print { display: none !important; }
  .app-shell { display: block; }
  .app-content { padding: 0; }
  body { background: #fff; }
}