/* CRM Ocean Pixel — "Carta náutica"
   O visual vem das cartas náuticas: água rasa azulada de fundo, água funda branca nos painéis,
   tinta azul-marinho, magenta de carta (cor de farol/alerta) como único destaque e o bege de terra
   para venda fechada. Verde / âmbar / vermelho = luzes de navegação no relógio de resposta.
   Tipos: Newsreader itálico (nomes e sondagens nas cartas são em itálico) com contenção,
   Public Sans na interface, IBM Plex Mono para hora, telefone e escala.
   Assinatura: a régua quadriculada da borda da carta vira régua de TEMPO (dia na tela Hoje,
   escala de resposta no Painel). */
:root {
  /* v5 — "Painel físico": tela clara azul-acinzentada, bandejas afundadas, cartões que parecem objeto,
     um único herói laranja, etapas em blocos bege, instrumentos de verdade (mostrador, ponteiro). */
  --shoal: #D9E1E9;
  --water: #FFFFFF;
  --water-2: #F2F5F8;
  --ink: #1D2733;
  --ink-2: #56626F;
  --ink-3: #8B97A4;
  --rule: #D3DBE3;
  --rule-2: #E5EAEF;
  --navy: #EEF2F6;
  --on-ink: #FFFFFF;
  --magenta: #E2683A;
  --magenta-soft: #FCE9DF;
  --land: #E3D6C1;
  --land-2: #EEE6D8;
  --land-ink: #4A4031;
  --sea: #3D7DBF;
  --sea-soft: #DCE8F5;
  --green: #2E9E6B;
  --green-soft: #DDF2E7;
  --amber: #D9952C;
  --amber-soft: #FBEFD8;
  --red: #D84A3A;
  --red-soft: #F9E0DC;
  --wa: #1FAF5A;
  --r: 14px;
  --r-sm: 9px;
  --card: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --sh-card: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(29,39,51,.06), 0 12px 26px -16px rgba(29,39,51,.28);
  --tray-bg: linear-gradient(180deg, #CAD4DE 0%, #C4CFDA 100%);
  --sh-tray: inset 0 2px 7px rgba(29,39,51,.13), inset 0 -1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.75);
  --sh-lg: 0 30px 70px -20px rgba(20,30,42,.35), 0 0 0 1px rgba(29,39,51,.06);
  --serif: 'Newsreader', Georgia, serif;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --side-w: 236px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --shoal: #11171E; --water: #1A222B; --water-2: #1F2832; --ink: #E4EAF0; --ink-2: #9DAAB7; --ink-3: #6B7886;
  --rule: #2A3540; --rule-2: #232D37; --navy: #151C24; --on-ink: #11171E;
  --magenta: #F0874F; --magenta-soft: #3A2418; --land: #3B3428; --land-2: #2B261E; --land-ink: #E8DCC6;
  --sea: #6FA6DD; --sea-soft: #1B2B3D; --green: #4CC08A; --green-soft: #143024; --amber: #EDB04E; --amber-soft: #33270F; --red: #F06E5C; --red-soft: #3A1A16;
  --card: linear-gradient(180deg, #1D2630 0%, #19212A 100%);
  --sh-card: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 12px 26px -16px rgba(0,0,0,.6);
  --tray-bg: linear-gradient(180deg, #0D1218 0%, #0F151B 100%);
  --sh-tray: inset 0 2px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shoal: #11171E; --water: #1A222B; --water-2: #1F2832; --ink: #E4EAF0; --ink-2: #9DAAB7; --ink-3: #6B7886;
    --rule: #2A3540; --rule-2: #232D37; --navy: #151C24; --on-ink: #11171E;
    --magenta: #F0874F; --magenta-soft: #3A2418; --land: #3B3428; --land-2: #2B261E; --land-ink: #E8DCC6;
    --sea: #6FA6DD; --sea-soft: #1B2B3D; --green: #4CC08A; --green-soft: #143024; --amber: #EDB04E; --amber-soft: #33270F; --red: #F06E5C; --red-soft: #3A1A16;
    --card: linear-gradient(180deg, #1D2630 0%, #19212A 100%);
    --sh-card: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 12px 26px -16px rgba(0,0,0,.6);
    --tray-bg: linear-gradient(180deg, #0D1218 0%, #0F151B 100%);
    --sh-tray: inset 0 2px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
    color-scheme: dark;
  }
}

/* Apelidos de tokens antigos ainda citados no JS */
:root { --ember: var(--red); --ok: var(--green); --line: var(--rule); --tray: var(--rule-2); --accent: var(--magenta); --tide: var(--sea); --deep: var(--ink); }

* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--shoal); color: var(--ink); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.mono { font-family: var(--mono); font-feature-settings: 'tnum'; letter-spacing: -.01em; }
.x-title { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.015em; font-optical-sizing: auto; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 14px; margin: 0; font-weight: 600; }
h1.x-title { font-size: 36px; line-height: 1; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Linhas de profundidade (isóbatas) como textura: só na lateral e no login. */
.side::before, .login-art::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='640' viewBox='0 0 480 640' fill='none' stroke='%237FA9BA' stroke-width='1'%3E%3Cpath d='M-20 110c60-30 120 20 190-10s110-70 190-40 120 40 140 20'/%3E%3Cpath d='M-20 150c70-26 130 26 200-6s120-64 196-34 110 44 124 26' opacity='.8'/%3E%3Cpath d='M-20 196c80-22 136 30 206 0s128-58 200-28 98 46 114 30' opacity='.6'/%3E%3Cpath d='M60 330c0-50 60-80 120-70s100 50 90 100-70 70-130 60-80-40-80-90z'/%3E%3Cpath d='M92 334c4-34 46-54 88-46s70 36 62 70-50 50-92 42-62-32-58-66z' opacity='.8'/%3E%3Cpath d='M126 340c4-18 26-28 50-24s40 20 34 40-28 28-52 24-36-20-32-40z' opacity='.6'/%3E%3Cpath d='M-20 520c90 30 150-40 240-20s140 70 230 40 40-20 50-10'/%3E%3Cpath d='M-20 560c90 24 160-36 246-16s136 62 224 36 30-14 50-8' opacity='.7'/%3E%3Cpath d='M-20 604c96 20 166-30 252-12s128 54 218 30 30-10 50-6' opacity='.5'/%3E%3C/svg%3E"); background-size: 480px 640px; }

/* ---------- Login ---------- */
.login { min-height: 100%; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--shoal); }
.login-art { position: relative; overflow: hidden; padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; color: #A9C3CD; background-color: #0F2230; }
.login-art::before { content: ''; position: absolute; inset: -60px; opacity: .24; animation: tide 50s linear infinite alternate; }
@keyframes tide { to { transform: translate(-60px, 30px); } }
.login-art > * { position: relative; }
.login-art .big { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 5.4vw, 78px); line-height: .96; letter-spacing: -.03em; color: #fff; max-width: 9ch; }
.login-art .big em { color: #EE7DB6; }
.login-art p { max-width: 40ch; color: #93B1BD; font-size: 15px; margin: 22px 0 0; }
.login-art svg.waves { display: none; }
.login-side { display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: 100%; max-width: 340px; display: grid; gap: 26px; }
.login-card form { display: grid; gap: 14px; }
.login-card .btn.primary { padding: 11px 14px; }
@media (max-width: 820px) { .login { grid-template-columns: 1fr; } .login-art { padding: 28px 22px 40px; min-height: 300px; } }

/* ---------- Marca ---------- */
.brand { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
.brand b { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; display: block; }
.brand small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6F93A2; font-weight: 600; margin-top: 1px; }

/* ---------- Moldura ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100vh; height: 100dvh; transition: grid-template-columns .22s cubic-bezier(.2,.8,.2,1); }
.shell.rail { --side-w: 68px; }
.side { position: relative; background-color: var(--navy); color: #A9C0CA; display: flex; flex-direction: column; padding: 18px 12px 12px; gap: 14px; min-height: 0; overflow: hidden; }
.side::before { content: ''; position: absolute; inset: 0; opacity: .13; pointer-events: none; }
.side > * { position: relative; }
.side-top { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.side-top .brand { flex: 1; }
.side nav { display: grid; gap: 1px; }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5D7F8E; padding: 14px 12px 6px; white-space: nowrap; }
.side nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r); color: #A9C0CA; text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.side nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side nav a.on { background: rgba(255,255,255,.08); color: #fff; }
.side nav a.on::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; background: #EE7DB6; border-radius: 0 2px 2px 0; }
.side nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side nav .badge { margin-left: auto; font-family: var(--mono); font-size: 10.5px; background: #EE7DB6; color: #0F2230; font-weight: 600; border-radius: 2px; padding: 0 5px; line-height: 17px; }
.side .grow { flex: 1; }
.tenant-pick { width: 100%; appearance: none; background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393B1BD' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 9px 30px 9px 12px; color: #fff; font-weight: 600; cursor: pointer; }
.tenant-pick option { color: #000; }
.tenant-badge { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.me-acts { width: 100%; display: flex; gap: 2px; }
.me .who { flex: 1; min-width: 0; font-size: 11.5px; color: #6F93A2; white-space: nowrap; }
.me .who b { color: #fff; display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { background: none; border: 0; color: inherit; width: 32px; height: 32px; border-radius: var(--r); display: inline-grid; place-items: center; cursor: pointer; flex: none; transition: background .15s; }
.icon-btn:hover { background: rgba(127,150,162,.16); }
.icon-btn svg { width: 17px; height: 17px; }
.shell.rail .brand > div, .shell.rail .nav-label, .shell.rail .side nav a span, .shell.rail .tenant-wrap, .shell.rail .me .who { display: none; }
.shell.rail .side-top { flex-direction: column; }
.shell.rail .side nav a { justify-content: center; padding: 10px; }
.shell.rail .side nav .badge { position: absolute; top: 2px; right: 2px; padding: 0 4px; line-height: 15px; font-size: 9.5px; }
.shell.rail .me { justify-content: center; }
.shell.rail .me-acts { flex-direction: column; align-items: center; }

.main { overflow: auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: flex-end; gap: 10px; padding: 30px 36px 22px; flex-wrap: wrap; }
.top .spacer { flex: 1; }
.top .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.top h1.x-title + .toolbar, .top h1.x-title + .seg { margin-left: 10px; }
.content { padding: 0 36px 36px; flex: 1; min-height: 0; }

/* ---------- Régua do dia (assinatura) ---------- */
.ruler { flex: 1 1 100%; margin-top: 18px; position: relative; padding-top: 14px; }
.ruler .bar { display: flex; height: 7px; border: 1px solid var(--ink); }
.ruler .bar span { flex: 1; }
.ruler .bar span:nth-child(odd) { background: var(--ink); }
.ruler .past { position: absolute; left: 0; top: 14px; height: 7px; background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(127,150,162,.35) 3px 4px); pointer-events: none; }
.ruler .labels { display: flex; margin-top: 5px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.ruler .labels span { flex: 1; }
.ruler .mark { position: absolute; top: 2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--sea); transform: translateX(-4px); cursor: pointer; }
.ruler .mark.late { border-top-color: var(--red); }
.ruler .needle { position: absolute; top: 0; bottom: 14px; width: 2px; margin-left: -1px; background: var(--magenta); }
.ruler .needle b { position: absolute; top: -2px; left: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--magenta); white-space: nowrap; }
.ruler .needle.flip b { left: auto; right: 6px; }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--rule); background: var(--water); padding: 8px 14px; border-radius: var(--r); cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none !important; color: var(--ink); transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--sea)); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--water-2); }
.btn.danger { color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--rule); border-radius: 2px; padding: 0 4px; color: var(--ink-3); background: var(--water-2); }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--rule); background: var(--water); border-radius: var(--r); padding: 9px 11px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sea-soft); }
textarea.input { resize: vertical; }
label.f { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.err { color: var(--red); font-size: 13px; min-height: 18px; }
.search-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 230px; border: 1px solid var(--rule); background: var(--water); border-radius: var(--r); padding: 8px 10px 8px 12px; color: var(--ink-3); cursor: pointer; transition: border-color .15s; }
.search-btn:hover { border-color: var(--ink-3); }
.search-btn svg { width: 16px; height: 16px; }
.search-btn .kbd { margin-left: auto; }
.seg { position: relative; display: inline-flex; padding: 2px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--water); isolation: isolate; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 5px 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); border-radius: var(--r-sm); transition: color .2s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { color: var(--on-ink); }
.seg-ind { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; border-radius: var(--r-sm); background: var(--ink); transition: transform .26s cubic-bezier(.3,.9,.3,1), width .26s cubic-bezier(.3,.9,.3,1); }
.seg:not(.ready) button.on { background: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 2px; background: color-mix(in srgb, var(--c) 13%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--ink)); white-space: nowrap; line-height: 18px; }
.chip.pick { cursor: pointer; opacity: .5; border: 0; }
.chip.pick.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--c); }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; flex: none; letter-spacing: .03em; vertical-align: middle; }
.panel { background: var(--water); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.panel-head h2 { flex: 1; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 21px; letter-spacing: -.01em; line-height: 1.15; }
.panel-head .desc { display: block; font-family: var(--font); font-style: normal; font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 4px; letter-spacing: 0; }

/* ---------- Relógio de resposta: mostrador com 12 marcas, luzes de navegação ---------- */
.clock { --p: 0; --c: var(--green); position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, var(--water) 0 4deg, transparent 4deg 30deg), conic-gradient(var(--c) calc(var(--p) * 1turn), color-mix(in srgb, var(--c) 16%, transparent) 0); display: grid; place-items: center; }
.clock::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--water); }
.clock span { position: relative; z-index: 1; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--c); letter-spacing: -.04em; }
.clock.warm { --c: var(--amber); }
.clock.hot { --c: var(--red); }
.clock.hot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--red); opacity: 0; animation: ping 2.6s ease-out infinite; }
.clock.idle { --c: var(--ink-3); }
.clock.lg { width: 46px; height: 46px; }
.clock.lg span { font-size: 12px; }
@keyframes ping { 0% { transform: scale(.92); opacity: .8; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- Instrumentos (KPIs): uma faixa só, divisórias finas, números em itálico ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--water); border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 16px; overflow: hidden; }
.kpi { position: relative; padding: 16px 22px 18px; border-left: 1px solid var(--rule-2); display: grid; align-content: start; gap: 2px; min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi .l { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.kpi .l svg { display: none; }
.kpi .v { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -.03em; margin-top: 12px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.kpi .s { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.kpi .s b { color: var(--ink); font-weight: 600; }
.kpi .g { margin-top: 10px; height: 3px; background: var(--rule-2); overflow: hidden; }
.kpi .g i { display: block; height: 100%; background: var(--magenta); }
.kpi .spark { position: absolute; right: 14px; bottom: 14px; width: 38%; height: 34px; pointer-events: none; opacity: .9; }

/* ---------- Hoje ---------- */
.today { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr); gap: 16px; align-items: start; }
.today .col-stack { display: grid; gap: 16px; min-width: 0; }
.today .kpis { margin: 0; }
@media (max-width: 1180px) { .today { grid-template-columns: minmax(0, 1fr); } }
.queue { padding: 0; overflow: hidden; }
.queue .panel-head { padding: 20px 22px 0; margin-bottom: 4px; }
.queue-intro { padding: 0 22px 14px; color: var(--ink-3); font-size: 12.5px; border-bottom: 1px solid var(--rule); }
.q-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 11px 22px; border-bottom: 1px solid var(--rule-2); cursor: pointer; transition: background .12s; }
.q-row:last-child { border-bottom: 0; }
.q-row:hover { background: var(--water-2); }
.q-row .who { min-width: 0; }
.q-row .who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-row .who .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.goal-ring { width: 108px; height: 108px; }
.goal-ring .n { font-family: var(--serif); font-style: italic; font-size: 30px; letter-spacing: -.03em; fill: var(--ink); }
.goal-ring .d { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); }
.goal dl { margin: 0; display: grid; gap: 12px; }
.goal dt { font-size: 10px; color: var(--ink-3); font-weight: 600; letter-spacing: .14em; }
.goal dd { margin: 2px 0 0; font-family: var(--mono); font-size: 16px; font-weight: 500; }
.pace { font-size: 12.5px; margin-top: 16px; padding: 10px 12px; border-left: 2px solid var(--magenta); background: var(--water-2); color: var(--ink-2); }
.pace b { color: var(--ink); }
.task-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.task-row:last-child { border-bottom: 0; }
.task-row .t { flex: 1; min-width: 0; }
.task-row .t b { font-weight: 600; }
.task-row.late .when { color: var(--red); font-weight: 600; }
.task-row.done .t { text-decoration: line-through; color: var(--ink-3); }
.check { appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--rule); border-radius: 2px; margin: 1px 0 0; cursor: pointer; display: grid; place-items: center; flex: none; background: var(--water); }
.check:hover { border-color: var(--ink-3); }
.check:checked { background: var(--ink); border-color: var(--ink); }
.check:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid var(--on-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }

/* Equipe agora (gestor) */
.crew-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 52px 80px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.crew-row:last-child { border-bottom: 0; }
.crew-row .nm { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 600; }
.crew-row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-row .n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); text-align: right; }
.crew-row .n.bad { color: var(--red); font-weight: 600; }
.crew-row .clock { justify-self: end; }
.crew-row.head { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom-color: var(--rule); padding: 0 0 7px; }
.crew-row.head span { text-align: right; white-space: nowrap; }
.crew-row.head span:first-child { text-align: left; }

/* Agenda */
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.cal-head b { flex: 1; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; text-transform: lowercase; }
.cal-head .icon-btn { color: var(--ink-2); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.cal .wd { font-size: 10px; letter-spacing: .1em; color: var(--ink-3); padding: 6px 0; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); font-weight: 600; }
.cal button { position: relative; border: 0; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background: none; width: 100%; height: 36px; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink); transition: background .12s; }
.cal button:hover { background: var(--water-2); }
.cal button.out { color: var(--ink-3); opacity: .5; }
.cal button.is-today { color: var(--magenta); font-weight: 600; }
.cal button.sel { background: var(--ink); color: var(--on-ink); }
.cal button i { position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; background: var(--sea); }
.cal button i.late { background: var(--red); }
.agenda { margin-top: 14px; display: grid; gap: 6px; }
.agenda .day { display: flex; align-items: baseline; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.agenda .day span { flex: 1; text-transform: capitalize; }
.ev { --c: var(--sea); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-left: 2px solid var(--c); background: var(--water-2); cursor: pointer; font-size: 13px; transition: background .12s; }
.ev:hover { background: color-mix(in srgb, var(--c) 10%, var(--water-2)); }
.ev .dot { display: none; }
.ev b { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .tm { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.ev.late { --c: var(--red); }
.ev.late .tm { color: var(--red); }
.ev.done { --c: var(--rule); }
.ev.done b { text-decoration: line-through; color: var(--ink-3); }

/* ---------- Funil: raias de água; etapas de venda fechada ficam "em terra" ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar select.input { padding-top: 7px; padding-bottom: 7px; width: auto; }
.col-body, .board, .main, .drawer, .cmd .res { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); height: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--water-2); }
.col { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--rule); transition: background .15s; }
.col:first-child { border-left: 0; }
.col[data-kind="won"], .col[data-kind="shipping"], .col[data-kind="delivered"] { background: var(--land-2); }
.col-head { padding: 12px 14px 10px; border-top: 3px solid var(--sc); background: var(--water); border-bottom: 1px solid var(--rule); }
.col[data-kind="won"] .col-head, .col[data-kind="shipping"] .col-head, .col[data-kind="delivered"] .col-head { background: color-mix(in srgb, var(--land-2) 50%, var(--water)); }
.col-head .row { display: flex; align-items: baseline; gap: 8px; }
.col-head b { font-weight: 650; font-size: 13.5px; flex: 1; }
.col-head .count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.col-head .sum { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); margin-top: 3px; letter-spacing: -.01em; }
.col-body { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 140px; }
.col.drop { background: var(--magenta-soft); }
.col .empty { border: 1px dashed var(--rule); }
.col-add { margin: 0 10px 10px; border: 1px dashed var(--rule); background: none; color: var(--ink-3); padding: 7px 10px; border-radius: var(--r); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; transition: color .15s, border-color .15s, background .15s; }
.col-add:hover { color: var(--ink); border-color: var(--ink-3); background: var(--water); }
.col-add svg { width: 15px; height: 15px; }
.card { background: var(--water); border: 1px solid var(--rule); border-radius: var(--r); padding: 11px 12px; cursor: grab; display: grid; gap: 9px; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--ink-3); box-shadow: 0 6px 16px -10px rgba(15,34,48,.35); }
.card.dragging { opacity: .35; }
.card .head { display: flex; gap: 10px; align-items: center; }
.card .head .t { flex: 1; min-width: 0; }
.card .name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .prod { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .foot { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: 8px; }
.card .foot .val { font-family: var(--mono); font-weight: 500; color: var(--ink); margin-right: auto; }
.card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card .task { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; }
.card .task.late { color: var(--red); }
.card .task svg { width: 13px; height: 13px; }
.wa-mini { width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; color: var(--wa); background: color-mix(in srgb, var(--wa) 11%, transparent); flex: none; transition: background .15s; }
.wa-mini:hover { background: color-mix(in srgb, var(--wa) 20%, transparent); }
.wa-mini svg { width: 15px; height: 15px; }
.empty { text-align: center; color: var(--ink-3); padding: 22px 10px; font-size: 13px; }

/* ---------- Ficha do lead ---------- */
.overlay { position: fixed; inset: 0; background: rgba(8,24,34,.42); z-index: 40; display: flex; justify-content: flex-end; animation: fade .18s ease; }
.drawer { width: min(640px, 100%); height: 100%; background: var(--shoal); overflow-y: auto; box-shadow: var(--sh-lg); display: flex; flex-direction: column; animation: slide .24s cubic-bezier(.2,.8,.2,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(36px); opacity: .5; } }
.d-head { background: var(--water); padding: 24px 26px 0; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 2; }
.d-head .row { display: flex; gap: 14px; align-items: flex-start; }
.d-head .t { flex: 1; min-width: 0; }
.d-head h1 { font-size: 32px; overflow-wrap: anywhere; line-height: 1.02; }
.d-head .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 20px 0 0; }
.track button { border: 0; background: none; padding: 0 0 12px; cursor: pointer; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); display: grid; gap: 7px; }
.track button i { height: 6px; background: var(--rule-2); display: block; transition: background .25s; }
.track button.past i { background: color-mix(in srgb, var(--sc) 45%, var(--rule-2)); }
.track button.on i { background: var(--sc); }
.track button.on { color: var(--ink); }
.track button:disabled { cursor: default; }
.tabs { display: flex; gap: 2px; margin: 0 -4px; }
.tabs button { position: relative; border: 0; background: none; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-3); }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--magenta); }
.tabs .n { font-family: var(--mono); font-size: 11px; margin-left: 5px; color: var(--ink-3); }
.d-body { padding: 18px 26px 30px; display: grid; gap: 14px; }
.close-x { background: none; border: 0; width: 32px; height: 32px; border-radius: var(--r); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.close-x:hover { background: var(--water-2); color: var(--ink); }
.tpl { display: grid; gap: 8px; }
.tpl button { text-align: left; background: var(--water); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; cursor: pointer; display: grid; gap: 3px; transition: border-color .15s; }
.tpl button:hover { border-color: var(--wa); }
.tpl button b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.tpl button b svg { width: 14px; height: 14px; color: var(--wa); }
.tpl button span { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 13px; position: relative; padding-bottom: 16px; }
.tl::before { content: ''; position: absolute; left: 11.5px; top: 26px; bottom: 2px; border-left: 1px dotted var(--rule); }
.tl:last-child::before { display: none; }
.tl i { width: 24px; height: 24px; border: 1px solid var(--rule); background: var(--water); display: grid; place-items: center; color: var(--ink-3); }
.tl i svg { width: 12px; height: 12px; }
.tl > div { padding-top: 3px; }
.tl.stage i { color: var(--sea); border-color: var(--sea); }
.tl.contact i { color: var(--wa); border-color: var(--wa); }
.tl.lost i { color: var(--red); border-color: var(--red); }
.tl.note i { color: var(--amber); border-color: var(--amber); }
.tl .when { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-family: var(--mono); }
.tl .txt { white-space: pre-wrap; word-break: break-word; }
.tl.note .txt { background: var(--amber-soft); padding: 8px 11px; margin-top: 2px; }
.lost-banner { background: var(--red-soft); color: var(--red); padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-weight: 600; border-left: 2px solid var(--red); }

/* ---------- Painel ---------- */
.panels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
@media (max-width: 1100px) { .span-8, .span-6, .span-4 { grid-column: span 12; } }
.bar-row { display: grid; grid-template-columns: minmax(80px, 140px) 1fr minmax(48px, auto); align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; }
.bar-row .bar { height: 6px; background: var(--rule-2); overflow: hidden; }
.bar-row .bar i { display: block; height: 100%; }
.bar-row .n { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.bar-row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funnel { display: grid; gap: 6px; }
.fn-step { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; font-size: 13px; }
.fn-step .bar { height: 30px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-family: var(--mono); font-weight: 500; font-size: 12.5px; min-width: 44px; }
.fn-drop { margin-left: 108px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.chart .grid line { stroke: var(--rule-2); stroke-dasharray: 1 3; }
.chart .area-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--magenta); opacity: 0; }
.chart .knob { fill: var(--water); stroke: var(--magenta); stroke-width: 2; opacity: 0; }
.chart.hover .cross, .chart.hover .knob { opacity: 1; }
.chart-tip { position: absolute; top: 0; left: 0; pointer-events: none; background: var(--ink); color: var(--on-ink); padding: 6px 9px; font-size: 11.5px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity .12s; }
.chart-tip b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; display: block; }
.chart.hover .chart-tip { opacity: 1; }
.rank { width: 100%; border-collapse: collapse; }
.rank td { padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.rank tr:last-child td { border-bottom: 0; }
.rank .pos { font-family: var(--mono); color: var(--ink-3); width: 28px; }
.rank tr:first-child .pos { color: var(--magenta); font-weight: 600; }
.rank .num { text-align: right; font-family: var(--mono); padding-left: 10px; font-size: 12.5px; }

/* ---------- Sondagem de resposta (gestor): cada vendedor numa raia, escala de tempo como régua de carta ---------- */
.sonar-lead { font-size: 15px; color: var(--ink-2); margin: -2px 0 22px; max-width: 72ch; }
.sonar-lead b { color: var(--ink); font-weight: 600; }
.sonar { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 88px 88px 128px; column-gap: 18px; }
.sonar .h { white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: right; align-self: end; padding-bottom: 10px; }
.sonar .h:first-child { text-align: left; }
.sonar .scale { position: relative; padding-bottom: 10px; align-self: end; }
.sonar .scale .bar { position: relative; height: 7px; border: 1px solid var(--ink); }
.sonar .scale .bar span { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.sonar .scale .lab { position: relative; height: 14px; margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.sonar .scale .lab span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sonar .scale .lab span:first-child { transform: none; }
.sonar .scale .lab span:last-child { transform: translateX(-100%); }
.sonar .nm, .sonar .plot, .sonar .st { border-top: 1px solid var(--rule-2); min-height: 62px; }
.sonar .nm { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.sonar .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sonar .plot { position: relative; }
.sonar .plot .zone { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--green) 8%, transparent); border-right: 1px dashed color-mix(in srgb, var(--green) 55%, transparent); }
.sonar .plot .pt { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sea); opacity: .55; }
.sonar .plot .pt.open { background: transparent; border: 1.5px solid var(--red); opacity: .9; }
.sonar .plot .med { position: absolute; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--magenta); }
.sonar .plot .med b { position: absolute; top: -6px; left: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--magenta); white-space: nowrap; background: var(--water); padding: 0 3px; }
.sonar .st { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; }
.sonar .st .big { font-family: var(--serif); font-style: italic; font-size: 25px; line-height: 1; letter-spacing: -.02em; }
.sonar .st .sm { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.sonar .st .bad { color: var(--red); }
.sonar-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
.sonar-key span { display: inline-flex; align-items: center; gap: 6px; }
.sonar-key i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sea); opacity: .6; }
.sonar-key i.open { background: transparent; border: 1.5px solid var(--red); opacity: 1; }
.sonar-key i.med { width: 2px; height: 12px; border-radius: 0; background: var(--magenta); opacity: 1; }
.sonar-key i.z10 { width: 14px; height: 10px; border-radius: 0; background: color-mix(in srgb, var(--green) 16%, transparent); opacity: 1; }

/* ---------- Tabelas ---------- */
.table-wrap { background: var(--water); border: 1px solid var(--rule); border-radius: var(--r); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
table.data th { font-size: 10px; color: var(--ink-3); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: var(--water-2); border-bottom-color: var(--rule); }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--water-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
.status::before { content: ''; width: 7px; height: 7px; background: var(--c, var(--ink-3)); }
.mono-sq { width: 30px; height: 30px; border-radius: var(--r); display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 11.5px; flex: none; letter-spacing: .03em; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.who-cell small { display: block; color: var(--ink-3); font-size: 11.5px; }

/* ---------- Ajustes ---------- */
.settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1080px; }
.settings-nav { display: grid; position: sticky; top: 0; border-left: 1px solid var(--rule); }
.settings-nav button { text-align: left; border: 0; background: none; padding: 7px 14px; cursor: pointer; font-weight: 500; color: var(--ink-2); margin-left: -1px; border-left: 2px solid transparent; }
.settings-nav button:hover { color: var(--ink); }
.settings-nav button.on { color: var(--ink); font-weight: 650; border-left-color: var(--magenta); }
.row-line { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.row-line:last-child { border-bottom: 0; }
.row-line .grow { flex: 1; min-width: 140px; }
.hint { background: var(--water-2); border-left: 2px solid var(--sea); padding: 10px 13px; font-size: 13px; color: var(--ink-2); }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; }
.color-in { width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: var(--r); padding: 2px; background: var(--water); cursor: pointer; }
@media (max-width: 820px) { .settings { grid-template-columns: 1fr; } .settings-nav { display: flex; overflow-x: auto; position: static; border-left: 0; border-bottom: 1px solid var(--rule); } .settings-nav button { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; } .settings-nav button.on { border-bottom-color: var(--magenta); } }

/* ---------- Modal e busca ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(8,24,34,.42); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fade .15s ease; }
.modal { background: var(--water); border-radius: 6px; width: min(480px, 100%); padding: 26px; box-shadow: var(--sh-lg); display: grid; gap: 14px; max-height: 92vh; overflow-y: auto; }
.modal h2.x-title { font-size: 26px !important; font-weight: 500; }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; }
.cmd-bg { align-items: start; padding-top: 12vh; }
.cmd { width: min(580px, 100%); background: var(--water); border-radius: 6px; box-shadow: var(--sh-lg); overflow: hidden; }
.cmd-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.cmd-in svg { width: 18px; height: 18px; flex: none; }
.cmd input { width: 100%; border: 0; padding: 16px 0; font-size: 15.5px; outline: none; background: transparent; }
.cmd .res { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd .it { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r); cursor: pointer; }
.cmd .it svg { color: var(--ink-3); }
.cmd .it.on, .cmd .it:hover { background: var(--water-2); box-shadow: inset 2px 0 0 var(--magenta); }
.cmd .it .grow { flex: 1; min-width: 0; }
.cmd .grp { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px 4px; }
.cmd-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--rule); background: var(--water-2); font-size: 11.5px; color: var(--ink-3); }
.cmd-foot span { display: inline-flex; align-items: center; gap: 5px; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(16px); background: #0F2230; color: #fff; padding: 11px 16px; border-left: 3px solid #EE7DB6; opacity: 0; transition: .22s cubic-bezier(.2,.8,.2,1); pointer-events: none; z-index: 70; max-width: calc(100% - 32px); font-weight: 500; box-shadow: var(--sh-lg); }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--red); border-left-color: #fff; }

/* ---------- Celular ---------- */
.mob-nav { display: none; }
@media (max-width: 820px) {
  .shell, .shell.rail { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .side { flex-direction: row; align-items: center; padding: 10px 16px; gap: 10px; }
  .side nav, .side .me, .side .grow, .side .nav-label, #brail { display: none; }
  .side-top { padding: 0; }
  .side .brand small { display: none; }
  .side .tenant-wrap { flex: 1; min-width: 0; }
  .mob-nav { display: flex; background: var(--water); border-top: 1px solid var(--rule); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mob-nav a { color: var(--ink-3); text-decoration: none; display: grid; justify-items: center; gap: 2px; font-size: 10.5px; padding: 4px 6px; position: relative; }
  .mob-nav a.on { color: var(--magenta); }
  .mob-nav a svg { width: 21px; height: 21px; }
  .mob-nav .badge { position: absolute; top: 0; right: 4px; font-family: var(--mono); font-size: 9.5px; background: var(--magenta); color: #fff; border-radius: 2px; padding: 0 4px; }
  .top { padding: 20px 16px 14px; }
  h1.x-title { font-size: 30px; }
  .content { padding: 0 16px 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-left: 0; border-top: 1px solid var(--rule-2); padding: 12px 14px 14px; }
  .kpi:nth-child(even) { border-left: 1px solid var(--rule-2); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi .v { font-size: 30px; margin-top: 8px; }
  .kpi .spark { display: none; }
  .today .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today .kpi { border-top: 0; border-left: 1px solid var(--rule-2); padding: 10px 10px 12px; }
  .today .kpi:first-child { border-left: 0; }
  .today .kpi .l { font-size: 9px; letter-spacing: .08em; }
  .today .kpi .v { font-size: 24px; }
  .ruler .labels span:nth-child(even) { visibility: hidden; }
  .board { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
  .top > div:first-child { flex: 1 1 100%; }
  .search-btn { min-width: 0; flex: 1; }
  .q-row { padding: 11px 14px; gap: 12px; }
  .q-row .btn .lbl { display: none; }
  .q-row .btn { padding: 9px; }
  .search-btn .kbd { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 90px 1fr 60px; }
  .fn-step { grid-template-columns: 80px 1fr; }
  .fn-drop { margin-left: 92px; }
  .d-head, .d-body { padding-left: 16px; padding-right: 16px; }
  .track button { font-size: 0; }
  .sonar { grid-template-columns: minmax(0, 1fr) 84px; }
  .sonar .scale, .sonar .plot, .sonar .h.x, .sonar .st.x { display: none; }
}

/* =====================================================================================
   v5 — "Painel físico" (referência: painel de casa inteligente que o usuário mandou)
   Materiais: bandeja afundada (--tray-bg/--sh-tray) segurando cartões que parecem objeto
   (--card/--sh-card). Letras: Inter na interface, Newsreader itálico nos títulos de cartão,
   JetBrains Mono espaçada nas etiquetas. Um único herói em degradê laranja por tela.
   ===================================================================================== */
.eyebrow, .cap { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* Moldura: trilho claro de ícones, como na referência */
.side { background: var(--navy); color: var(--ink-2); border-right: 1px solid var(--rule); padding: 16px 10px 14px; }
.side::before { display: none; }
.brand { color: var(--ink); }
.brand small { color: var(--ink-3); font-family: var(--mono); font-weight: 500; letter-spacing: .14em; }
.nav-label { color: var(--ink-3); font-family: var(--mono); font-weight: 500; }
.side nav { gap: 4px; }
.side nav a { color: var(--ink-2); border-radius: 14px; padding: 10px 12px; }
.side nav a:hover { background: rgba(29,39,51,.05); color: var(--ink); }
.side nav a.on { background: #DCEBE2; color: #1E6B48; }
.side nav a.on::before { display: none; }
.side nav a svg { width: 21px; height: 21px; opacity: 1; }
.side nav .badge { background: var(--red); color: #fff; border-radius: 10px; font-family: var(--mono); }
:root[data-theme="dark"] .side nav a.on { background: #183326; color: #7FD8AB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side nav a.on { background: #183326; color: #7FD8AB; } }
.tenant-pick, .tenant-badge { background-color: var(--water); border: 1px solid var(--rule); color: var(--ink); border-radius: 12px; box-shadow: var(--sh-card); }
.tenant-pick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B97A4' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); }
.me { border-top-color: var(--rule); }
.me .who b { color: var(--ink); }
.me .who { color: var(--ink-3); }
.icon-btn:hover { background: rgba(29,39,51,.06); }
.shell.rail { --side-w: 84px; }
.shell.rail .side nav a { padding: 13px 10px; }
.shell.rail .tenant-wrap { display: block; position: relative; width: 48px; height: 48px; margin: 4px auto 0; }
.shell.rail .tenant-wrap .tenant-pick, .shell.rail .tenant-wrap .tenant-badge { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tenant-sq { display: none; }
.shell.rail .tenant-sq { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -8px rgba(29,39,51,.5); pointer-events: none; }

/* Barra de título branca de ponta a ponta */
.top { background: var(--water); border-bottom: 1px solid var(--rule); padding: 20px 32px; margin-bottom: 26px; align-items: center; }
.top h1.x-title { font-family: var(--font); font-style: normal; font-weight: 450; font-size: 27px; letter-spacing: -.02em; }
.top .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.content { padding: 0 32px 32px; }

/* Materiais gerais */
.panel, .kpis, .table-wrap { background: var(--card); border: 1px solid rgba(29,39,51,.06); border-radius: var(--r); box-shadow: var(--sh-card); }
.panel-head h2 { font-size: 23px; font-weight: 400; }
.btn { border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(29,39,51,.08); }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(29,39,51,.6); }
.input, select.input, textarea.input, .search-btn { border-radius: 11px; }
.seg { border-radius: 12px; background: var(--water-2); box-shadow: inset 0 1px 3px rgba(29,39,51,.08); border-color: var(--rule); }
.seg-ind { border-radius: 9px; }
.chip { border-radius: 7px; font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.tray { background: var(--tray-bg); box-shadow: var(--sh-tray); border-radius: 26px; padding: 16px; }

/* Relógio do lead: mostrador pequeno com esfera */
.clock::after { background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #EEF2F6 70%, #E2E8EE 100%); box-shadow: inset 0 -2px 3px rgba(29,39,51,.08); }
:root[data-theme="dark"] .clock::after { background: radial-gradient(circle at 35% 28%, #2A3541, #1A222B); }

/* ---------- Hoje v5 ---------- */
.hj { display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); gap: 22px; align-items: start; }
.hj-left { display: grid; gap: 16px; }
.hj-right { display: grid; gap: 22px; min-width: 0; }
@media (max-width: 1180px) { .hj { grid-template-columns: minmax(0, 1fr); } }

/* Herói laranja */
.hero { border-radius: 18px; overflow: hidden; background: var(--water); box-shadow: var(--sh-card); }
.hero-top { position: relative; padding: 20px 22px 20px; color: #fff; background: linear-gradient(118deg, #F3A35C 0%, #EE8550 45%, #E2674A 100%); }
.hero-top::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.22), transparent 55%); pointer-events: none; }
.hero-top .cap { color: rgba(255,255,255,.78); }
.hero-top svg.ico { position: absolute; right: 20px; top: 16px; width: 26px; height: 26px; color: #fff; opacity: .9; }
.hero-num { font-size: 58px; font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 14px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(150,50,20,.18); white-space: nowrap; }
.hero-side { position: absolute; right: 22px; bottom: 22px; text-align: right; }
.hero-side i { display: block; font-family: var(--serif); font-size: 21px; color: #fff; }
.hero-side .cap { color: rgba(255,255,255,.82); font-size: 10px; margin-top: 4px; display: block; }
.hero-days { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule-2); }
.hero-days > div { padding: 12px 6px 13px; text-align: center; border-left: 1px solid var(--rule-2); }
.hero-days > div:first-child { border-left: 0; }
.hero-days .cap { font-size: 9.5px; }
.hero-days svg { display: block; margin: 8px auto 6px; width: 30px; height: 16px; }
.hero-days b { font-family: var(--mono); font-size: 15px; font-weight: 700; display: block; }
.hero-days small { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.hero-note { margin: 0; padding: 16px 22px 18px; text-align: center; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.hero-note b { color: var(--ink); }

/* Cartão de tarefa com setinhas */
.note-card { border-top: 3px solid var(--sea); padding: 18px 22px 16px; }
.note-card .nav { display: flex; align-items: center; gap: 10px; }
.note-card .nav .cap.on { color: var(--sea); font-weight: 700; }
.note-card .nav .sp { flex: 1; }
.note-card .nav button { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px 4px; font-size: 13px; }
.note-card .nav button:hover { color: var(--ink); }
.note-card .nav a.cap { border: 1px solid var(--rule); border-radius: 20px; padding: 2px 10px; text-decoration: none; }
.note-card h3 { margin: 16px 0 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; letter-spacing: -.01em; line-height: 1.1; text-align: center; cursor: pointer; }
.note-card p { margin: 0; text-align: center; color: var(--ink-2); }
.note-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.note-card .dots { display: flex; gap: 5px; align-items: center; }
.note-card .dots i { width: 6px; height: 6px; border-radius: 4px; background: var(--rule); transition: width .2s, background .2s; }
.note-card .dots i.on { width: 26px; background: var(--sea); }
.note-card.late { border-top-color: var(--red); }
.note-card.late .nav .cap.on { color: var(--red); }
.note-card.late .dots i.on { background: var(--red); }

/* Grade de números (STATS) */
.stats { padding: 0; overflow: hidden; }
.stats .hd { display: flex; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--rule-2); }
.stats .hd .flag { color: var(--red); font-weight: 700; }
.stats .hd .flag::before { content: '●'; margin-right: 6px; }
.stats .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats .cell { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 4px; padding: 14px 12px; border-left: 1px solid var(--rule-2); border-top: 1px solid var(--rule-2); min-width: 0; }
.stats .cell:nth-child(3n+1) { border-left: 0; }
.stats .cell:nth-child(-n+3) { border-top: 0; }
.stats .cell svg { width: 20px; height: 20px; color: var(--ink-2); }
.stats .cell div { text-align: center; min-width: 0; }
.stats .cell b { display: block; font-family: var(--mono); font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.stats .cell b small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.stats .cell .cap { font-size: 9px; letter-spacing: .08em; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats .cell.flag { background: var(--red-soft); }
.stats .cell.flag svg, .stats .cell.flag b, .stats .cell.flag .cap { color: var(--red); }
.stats .cell[data-go] { cursor: pointer; }
.stats .cell[data-go]:hover { background: var(--water-2); }
.stats .cell.flag[data-go]:hover { background: var(--red-soft); filter: saturate(1.3); }

/* Barra de atalhos (cenas) */
.scenes { display: flex; padding: 10px; border-radius: 22px; overflow-x: auto; }
.scene { flex: 1; min-width: 132px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: none; padding: 12px 14px; cursor: pointer; color: var(--ink); border-left: 1px solid rgba(29,39,51,.1); text-align: left; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.scene:first-child { border-left: 0; }
.scene svg { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
.scene small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink-3); font-weight: 500; margin-top: 2px; text-transform: uppercase; }
.scene:hover { background: rgba(255,255,255,.35); border-radius: 14px; }
.scene.alarm { background: linear-gradient(180deg, #FBE7B8, #F6DA9C); border-radius: 14px; border-left: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -10px rgba(140,90,10,.6); }
.scene.alarm svg, .scene.alarm small { color: #A0661A; }
.scene.alarm.ok { background: linear-gradient(180deg, #D9F0E2, #C8E8D5); }
.scene.alarm.ok svg, .scene.alarm.ok small { color: #23764F; }
:root[data-theme="dark"] .scene.alarm { background: linear-gradient(180deg, #4A3A16, #3D3012); color: #F5D58E; }
:root[data-theme="dark"] .scene.alarm.ok { background: linear-gradient(180deg, #17392A, #123024); color: #9FE0BE; }

/* Etapas do funil em blocos bege (os "cômodos") */
.rooms { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr); gap: 14px; overflow-x: auto; padding: 2px 2px 8px; }
.room { position: relative; text-align: center; border-radius: 16px; padding: 18px 14px 34px; cursor: pointer; border: 0; color: var(--land-ink);
  background: linear-gradient(180deg, #F2EBDF 0%, #E6DCCB 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #D7C6AC, 0 10px 18px -12px rgba(90,60,20,.45); transition: transform .15s; }
.room:hover { transform: translateY(-1px); }
.room b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.75vw, 27px); letter-spacing: -.01em; line-height: 1.1; color: #2E281F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .cap { display: block; margin-top: 12px; color: #9C8C72; font-size: 9.5px; letter-spacing: .12em; white-space: nowrap; }
.room .cap u { text-decoration: none; color: #2E281F; border-bottom: 2px solid #2E281F; padding-bottom: 1px; }
.room .pill { position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #8F7F64; background: rgba(120,95,55,.12); border-radius: 10px; padding: 1px 8px; }
.room .pill.hot { color: #fff; background: var(--red); }
.room.dim { background: linear-gradient(180deg, #CFC6B6 0%, #B9AE9B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 #A2967F, 0 10px 18px -12px rgba(60,40,10,.5); }
.room.dim .cap { color: #6E634F; }
:root[data-theme="dark"] .room { background: linear-gradient(180deg, #3A342B, #2F2A22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 #1E1A14; }
:root[data-theme="dark"] .room b, :root[data-theme="dark"] .room .cap u { color: #F0E6D3; border-color: #F0E6D3; }

/* Mostradores de resposta (os "termostatos") */
.dials { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dial-card { background: var(--card); border-radius: 18px; box-shadow: var(--sh-card); border: 1px solid rgba(29,39,51,.06); padding: 16px 18px 14px; }
.dial-card .hd { display: flex; align-items: center; gap: 8px; }
.dial-card .hd b { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial-card .st { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }
.dial-card .st.fast { color: var(--sea); }
.dial-card .st.warm { color: var(--amber); }
.dial-card .st.hot { color: var(--red); }
.dial-card .st.off { color: var(--ink-3); }
.onpill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; border-radius: 20px; padding: 5px 11px; background: #1F2A36; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 10px -6px rgba(0,0,0,.6); white-space: nowrap; }
.onpill.off { background: var(--water); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); }
.onpill.hot { background: var(--red); }
.dial { display: block; width: 100%; max-width: 236px; margin: 6px auto 0; overflow: visible; }
.dial .tk { stroke: var(--ink-3); stroke-width: 1.1; opacity: .6; }
.dial .tk.mj { stroke: var(--ink-2); stroke-width: 2; opacity: 1; }
.dial .lb { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.dial .val { font-family: var(--font); font-weight: 300; font-size: 40px; fill: rgba(255,255,255,.94); letter-spacing: -.03em; }
.dial .unit { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; fill: rgba(255,255,255,.82); }
.dial .val.off, .dial .unit.off { fill: var(--ink-3); }
.dial-card .ft { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; margin-top: 4px; }
.dial-card .ft b { color: var(--ink); font-weight: 600; }

/* Leads esperando (os cartões de baixo) */
.zones-hd { display: flex; align-items: baseline; gap: 12px; margin: 4px 2px 12px; }
.zones-hd h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 27px; flex: 1; }
.zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.zone { background: var(--card); border-radius: 16px; box-shadow: var(--sh-card); border: 1px solid rgba(29,39,51,.06); padding: 14px 14px 12px; display: grid; gap: 4px; cursor: pointer; transition: transform .15s; min-width: 0; }
.zone:hover { transform: translateY(-2px); }
.zone .hd { display: flex; align-items: center; gap: 8px; }
.zone .hd b { flex: 1; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone .hd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-3)); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #999) 18%, transparent); }
.zone .cap { font-size: 10px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone .cap.st { color: var(--c); font-weight: 600; }
.zone .face { display: grid; place-items: center; padding: 14px 0 12px; }
.zone .face .clock { width: 74px; height: 74px; }
.zone .face .clock::after { inset: 7px; }
.zone .face .clock span { font-size: 16px; font-weight: 600; }
.zone .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zone .acts button { height: 38px; border-radius: 11px; border: 1px solid var(--rule); background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(29,39,51,.08); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.zone .acts button svg { width: 18px; height: 18px; }
.zone .acts .w svg { color: var(--wa); }
.zone .acts button:hover { border-color: var(--ink-3); }
.zone.more { place-items: center; text-align: center; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 24px; }

@media (max-width: 820px) {
  .top { padding: 16px; margin-bottom: 16px; }
  .hero-num { font-size: 46px; }
  .hero-side { position: static; text-align: left; margin-top: 10px; }
  .scenes { padding: 6px; }
  .scene { min-width: 116px; }
  .rooms { grid-auto-columns: 62%; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .cell b { font-size: 14.5px; }
}

/* ---------- v5 nas outras telas ---------- */
/* Números grandes: sans pesado como o "62°" da referência (o itálico fica só nos títulos de cartão) */
.kpi .v { font-family: var(--font); font-style: normal; font-weight: 650; font-size: 34px; letter-spacing: -.04em; }
.kpi .l { font-family: var(--mono); font-weight: 500; letter-spacing: .16em; }
.kpis { border-radius: 18px; }
.kpi { border-left-color: var(--rule-2); }

/* Painel: faixa dos 10 min e números da sondagem */
.sonar .plot .z10 { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--green) 9%, transparent); border-right: 1px dashed color-mix(in srgb, var(--green) 55%, transparent); }
.sonar .st .big { font-family: var(--mono); font-style: normal; font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
.sonar .plot .med { background: var(--magenta); }
.sonar .plot .med b { color: var(--magenta); background: transparent; }
.sonar .scale .bar { border-radius: 4px; overflow: hidden; border-color: var(--ink-2); }
.sonar .scale .bar span { background: var(--ink-2); }
.chart-tip { border-radius: 10px; }
.chart-tip b { font-family: var(--font); font-style: normal; font-weight: 650; font-size: 15px; }
.fn-step .bar { border-radius: 8px; }
.bar-row .bar, .bar-row .bar i { border-radius: 4px; }
.kpi .g, .kpi .g i { border-radius: 3px; }

/* Funil: a bandeja afundada com raias; cartões que parecem objeto */
.board { background: var(--tray-bg); box-shadow: var(--sh-tray); border: 0; border-radius: 26px; padding: 10px; gap: 10px; }
.col { border-left: 0; border-radius: 18px; background: rgba(255,255,255,.28); }
.col[data-kind="won"], .col[data-kind="shipping"], .col[data-kind="delivered"] { background: rgba(238,230,216,.75); }
.col-head, .col[data-kind="won"] .col-head, .col[data-kind="shipping"] .col-head, .col[data-kind="delivered"] .col-head { background: transparent; border: 0; padding: 12px 12px 8px; }
.col-head .row b { font-weight: 600; font-size: 14px; }
.col-head .row b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent); }
.col-head .count { background: rgba(29,39,51,.08); border-radius: 8px; padding: 0 7px; color: var(--ink-2); font-size: 11px; line-height: 19px; }
.col-head .sum { font-family: var(--mono); font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: -.02em; margin-top: 4px; }
.col-body { padding: 4px 8px 8px; }
.card { background: var(--card); border: 1px solid rgba(29,39,51,.06); border-radius: 14px; box-shadow: var(--sh-card); }
.card:hover { border-color: rgba(29,39,51,.14); box-shadow: inset 0 1px 0 #fff, 0 16px 30px -18px rgba(29,39,51,.45); transform: translateY(-1px); }
.card .foot { border-top: 1px solid var(--rule-2); }
.col-add { margin: 0 8px 8px; border-radius: 12px; border-color: rgba(29,39,51,.18); }
.col-add:hover { background: rgba(255,255,255,.6); }
.col.drop { background: rgba(226,104,58,.14); }
.col .empty { border-radius: 12px; border-color: rgba(29,39,51,.18); }
:root[data-theme="dark"] .col { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .col[data-kind="won"], :root[data-theme="dark"] .col[data-kind="shipping"], :root[data-theme="dark"] .col[data-kind="delivered"] { background: rgba(232,220,198,.06); }

/* Ficha do lead */
.overlay { background: rgba(20,30,42,.38); backdrop-filter: blur(3px); padding: 12px; }
.drawer { border-radius: 24px; background: var(--shoal); }
.d-head { border-radius: 24px 24px 0 0; }
.d-head h1.x-title { font-size: 34px; font-weight: 400; }
.track button i { border-radius: 3px; }
.tabs button.on::after { border-radius: 2px; background: var(--magenta); }
.tl i { border-radius: 50%; }
.tpl button { border-radius: 14px; box-shadow: var(--sh-card); background: var(--card); }
.lost-banner, .hint, .pace, .tl.note .txt { border-radius: 12px; }

/* Tabelas e listas */
table.data th { font-family: var(--mono); font-weight: 500; background: transparent; }
.status::before { border-radius: 50%; }
.settings-nav { border-left: 0; gap: 2px; }
.settings-nav button { border-left: 0; border-radius: 11px; margin: 0; padding: 8px 12px; }
.settings-nav button.on { background: var(--card); box-shadow: var(--sh-card); }
.modal { border-radius: 22px; }
.modal h2.x-title { font-weight: 400; }
.cmd { border-radius: 20px; }
.cmd .it { border-radius: 11px; }
#toast { border-radius: 14px; background: #1F2A36; border-left: 0; }
.mono-sq { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.task-row .when { font-family: var(--mono); }
.check { border-radius: 5px; }

/* Login */
.login-art { background: linear-gradient(140deg, #F3A35C 0%, #EE8550 40%, #E2674A 100%); color: rgba(255,255,255,.85); border-radius: 0 28px 28px 0; }
.login-art::before { display: none; }
.login-art .big { font-family: var(--serif); color: #fff; }
.login-art .big em { color: #FFE2C7; }
.login-art p { color: rgba(255,255,255,.88); }
.login-art .brand { color: #fff; }
.login-art .brand small { color: rgba(255,255,255,.75); }

/* Hoje: saindo pra entrega */
.ships { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ship { background: var(--card); border-radius: 16px; box-shadow: var(--sh-card); border: 1px solid rgba(29,39,51,.06); padding: 14px 16px; display: grid; gap: 3px; cursor: pointer; }
.ship b { font-size: 15px; font-weight: 500; }
.ship .eta { font-family: var(--mono); font-size: 12px; font-weight: 700; margin-top: 8px; }
.ship .eta.late { color: var(--red); }

@media (max-width: 820px) {
  .overlay { padding: 0; }
  .drawer { border-radius: 0; }
  .login-art { border-radius: 0 0 28px 28px; }
}

/* Escuro automático (sistema) com as mesmas trocas do escuro escolhido no botão */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .room { background: linear-gradient(180deg, #3A342B, #2F2A22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 #1E1A14; }
  :root:not([data-theme="light"]) .room b, :root:not([data-theme="light"]) .room .cap u { color: #F0E6D3; border-color: #F0E6D3; }
  :root:not([data-theme="light"]) .room .cap { color: #A99A80; }
  :root:not([data-theme="light"]) .room.dim { background: linear-gradient(180deg, #554B3B, #463E31); }
  :root:not([data-theme="light"]) .scene.alarm { background: linear-gradient(180deg, #4A3A16, #3D3012); color: #F5D58E; }
  :root:not([data-theme="light"]) .scene.alarm.ok { background: linear-gradient(180deg, #17392A, #123024); color: #9FE0BE; }
  :root:not([data-theme="light"]) .clock::after { background: radial-gradient(circle at 35% 28%, #2A3541, #1A222B); }
  :root:not([data-theme="light"]) .col { background: rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .col[data-kind="won"], :root:not([data-theme="light"]) .col[data-kind="shipping"], :root:not([data-theme="light"]) .col[data-kind="delivered"] { background: rgba(232,220,198,.06); }
}
:root[data-theme="dark"] .room .cap { color: #A99A80; }
:root[data-theme="dark"] .room.dim { background: linear-gradient(180deg, #554B3B, #463E31); }

@media (max-width: 820px) {
  .shell.rail .tenant-wrap { width: auto; height: auto; margin: 0; flex: 1; min-width: 0; }
  .shell.rail .tenant-sq { display: none; }
  .shell.rail .tenant-wrap .tenant-pick, .shell.rail .tenant-wrap .tenant-badge { position: static; opacity: 1; }
  .shell.rail .brand > div { display: block; }
  .hero-top svg.ico { display: none; }
  .tray { padding: 8px; border-radius: 20px; }
  .hj-left { gap: 10px; }
  .note-card .nav a.cap { display: none; }
  .top .search-btn { flex: 1; }
}

/* Painel: escolher datas */
.range { display: inline-flex; gap: 8px; align-items: center; padding: 3px 6px 3px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--water-2); box-shadow: inset 0 1px 3px rgba(29,39,51,.06); }
.range.on { border-color: var(--ink); background: var(--water); }
.range label { display: inline-flex; align-items: center; gap: 6px; }
.range .cap { font-size: 9.5px; }
.range input { border: 0; background: transparent; font-family: var(--mono); font-size: 12.5px; color: var(--ink); padding: 4px 2px; cursor: pointer; }
.range input:focus { outline: none; }
.range input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.day-sum { display: grid; place-items: center; gap: 6px; padding: 54px 10px 60px; }
.day-sum b { font-size: 46px; font-weight: 700; letter-spacing: -.045em; }
.day-sum span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 820px) { .top .seg { max-width: 100%; overflow-x: auto; } .range { flex-wrap: wrap; } }

/* Painel: de onde vêm os leads, por anúncio */
.adt { display: grid; }
.adt-h, .adt-r { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 104px 84px; gap: 10px; align-items: center; }
.adt-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.adt-h span:not(:first-child), .adt-r > span { text-align: right; }
.adt-r { padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.adt-r:last-child { border-bottom: 0; }
.adt-r > span { font-family: var(--mono); font-size: 13px; }
.adt-r .o { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 6px; }
.adt-r .o b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adt-r .o i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--sea); opacity: .55; }
.chip.plat { flex: none; font-size: 10px; letter-spacing: .06em; }
[data-adf][hidden] { display: none; }
@media (max-width: 820px) { .adt-h, .adt-r { grid-template-columns: minmax(0, 1fr) 46px 46px 70px; } .adt-h span:last-child, .adt-r > span:last-child { display: none; } }

/* Metas da equipe: controles deslizantes (a "mesa de som" da referência) */
.faders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fader-card { --c: var(--sea); background: var(--card); border-radius: 16px; box-shadow: var(--sh-card); border: 1px solid rgba(29,39,51,.06); padding: 14px 14px 12px; display: grid; gap: 4px; }
.fader-card.ok { --c: var(--green); } .fader-card.warn { --c: var(--amber); } .fader-card.bad { --c: var(--red); } .fader-card.off { --c: var(--ink-3); }
.fader-card .hd { display: flex; align-items: center; gap: 8px; }
.fader-card .hd b { flex: 1; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fader-card .hd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.fader-card .cap { font-size: 10px; letter-spacing: .14em; }
.fader-card .cap.st { color: var(--c); font-weight: 600; }
.fader-card .cap.lst { text-align: center; }
.fader { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; height: 150px; margin: 10px 0 6px; }
.fader .scale { grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.fader .track { grid-column: 2; position: relative; justify-self: center; width: 8px; border-radius: 6px; background: var(--rule-2); box-shadow: inset 0 1px 2px rgba(29,39,51,.15); }
.fader .fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: var(--c); opacity: .85; }
.fader .pj { position: absolute; left: -12px; right: -12px; height: 0; border-top: 2px dashed var(--ink-2); opacity: .55; }
.fader .knob { position: absolute; left: 50%; width: 34px; height: 16px; margin: 0 0 -8px -17px; border-radius: 5px; background: linear-gradient(180deg, #FFFFFF, #E4EAF0); border: 1px solid rgba(29,39,51,.18); box-shadow: 0 3px 6px -2px rgba(29,39,51,.35); }
.fader .knob::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--c); border-radius: 1px; }
.fader-card .ft { font-family: var(--mono); text-align: center; }
.fader-card .ft b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.fader-card .ft span { color: var(--ink-3); font-size: 13px; }
:root[data-theme="dark"] .fader .knob { background: linear-gradient(180deg, #3A4652, #26303A); border-color: rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fader .knob { background: linear-gradient(180deg, #3A4652, #26303A); border-color: rgba(255,255,255,.12); } }

/* Ajustes → Metas: tabela por pessoa */
.goal-team { display: grid; }
.gt-h, .gt-r { display: grid; grid-template-columns: minmax(0, 1fr) 140px 170px; gap: 12px; align-items: center; }
.gt-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.gt-r { padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.gt-r:last-child { border-bottom: 0; }
.gt-sum { margin-top: 12px; }
@media (max-width: 820px) { .gt-h, .gt-r { grid-template-columns: minmax(0, 1fr) 80px 110px; } .faders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Botão de exclusão definitiva */
.btn.primary.danger-fill { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary.danger-fill:hover { filter: brightness(.92); }

/* Sair: botão com nome no trilho; no celular, ícone no topo */
.out-btn { width: auto; min-width: 32px; height: auto; padding: 6px 6px; display: inline-grid; justify-items: center; gap: 2px; color: var(--red); }
.out-btn span { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.shell:not(.rail) .out-btn { display: inline-flex; gap: 6px; padding: 6px 10px; }
.shell:not(.rail) .out-btn span { font-size: 10px; }
.mob-out { display: none; }
@media (max-width: 820px) { .mob-out { display: inline-grid; color: var(--red); } }

/* Tela de despedida */
.bye { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--shoal); }
.bye-card { width: min(520px, 100%); text-align: center; background: var(--card); border-radius: 26px; box-shadow: var(--sh-card); padding: 40px 30px 34px; display: grid; gap: 16px; justify-items: center; }
.bye-card::before { content: ''; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(118deg, #F3A35C 0%, #EE8550 45%, #E2674A 100%); box-shadow: 0 10px 22px -10px rgba(226,103,74,.7); }
.bye-card h1 { margin: 4px 0 0; font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.bye-card .quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.25; color: var(--ink); max-width: 22ch; }
.bye-card .quote::before { content: '“'; } .bye-card .quote::after { content: '”'; }
.bye-card .btn { margin-top: 8px; }