/* =========================================================================
   TEMA CLARO — mesmos papéis do escuro, valores de papel marfim.
   Regras: texto dourado escurece (legível no branco); preenchimento dourado
   (--gf*) não muda; sombras ficam mornas e leves (--sh-k); o celular de
   demonstração continua escuro (ilha, gerada no build).
   ========================================================================= */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f1ea;--s1:#ffffff;--s2:#faf8f3;--s3:#f0ebe1;--s4:#e7e0d2;
  --br:#e5ddcf;--br2:#d6ccb9;
  --gold:#a07a35;--gl:#7f5d1e;--g2:#6c4d14;--ivory:#1d1b16;
  --gd:rgba(160,122,53,.10);--gd2:rgba(160,122,53,.17);
  --tx:#1d1b16;--tm:#58534a;--td:#6b6558;
  --ok:#1a7a43;--ok2:#156d3a;--okbg:rgba(30,138,76,.10);
  --bad:#b3352a;--bad2:#a82b28;--badbg:rgba(184,50,47,.08);
  --info:#1a6474;--infobg:rgba(31,115,132,.09);
  --warn:#7a5300;--warnbg:rgba(180,125,10,.12);
  --frio:#015e93;--morno:#7a5300;--quente:#983908;--premium:#7a2f8f;--atrasado:#b02224;
  --glass:rgba(255,255,255,.74);--glass-strong:rgba(255,255,255,.95);
  --glass-line:rgba(160,122,53,.24);--hair:rgba(60,45,20,.07);
  --e1:0 1px 2px rgba(60,45,20,.10);
  --e2:0 6px 18px -6px rgba(60,45,20,.16);
  --e3:0 16px 36px -16px rgba(60,45,20,.28);
  --e4:0 26px 70px -22px rgba(60,45,20,.36);
  --glow:0 10px 26px -12px rgba(169,130,62,.5);
  --ring:0 0 0 3px rgba(160,122,53,.30);
  --bg-rgb:244 241 234;--s1-rgb:255 255 255;--s2-rgb:250 248 243;--ink-rgb:60 45 20;--sh-rgb:60 45 20;--sh-k:.4;--scrim-rgb:40 34 24;--scrim-k:.55;
  --side-a:#fbfaf6;--side-b:#f3efe6;--card-a:#ffffff;--card-b:#fcfaf6;--card-br:#e3dbcb;
  --colh-a:#ffffff;--colh-b:#f8f5ee;--list:#eee9df;--list-br:#e0d8c8;
  --sheet-a:#ffffff;--sheet-b:#f8f5ef;--modal-a:#ffffff;--modal-b:#faf8f3;
  --pill-a:#ffffff;--pill-b:#f6f2ea;--skel-a:#ece7dd;--skel-b:#f7f4ee;
  --scroll:#d3c9b6;--scroll-h:#bfb299;--mute:#d8cfbf;--screen:#ece7dd;
  --gs-a:#fbf3e0;--gs-b:#f6edd8;--cs-a:#e8f3f5;--cs-b:#e0eef0;--bad-tx:#a8261d;
}
html[data-theme="light"] .phone{
  /* Superfícies (Katzer) */
  --bg:#070807;--s1:#0d0f0e;--s2:#131614;--s3:#191c1a;--s4:#202421;
  --br:#252a27;--br2:#303632;
  /* Ouro champanhe e marfim (Katzer) */
  --gold:#a9823e;--gl:#c6a15b;--g2:#e1c486;--ivory:#f4f0e7;
  --gd:rgba(198,161,91,.10);--gd2:rgba(198,161,91,.18);
  /* Texto (Katzer) */
  --tx:#f4f0e7;--tm:#a19d94;--td:#837f76;
  /* Semânticas (Katzer gb/gbl, rb/rbl, cyan) */
  --ok:#42b873;--ok2:#4dc76b;--okbg:rgba(66,184,115,.13);
  --bad:#d05a5a;--bad2:#e05555;--badbg:rgba(208,90,90,.13);
  --info:#74b9c6;--infobg:rgba(116,185,198,.13);
  --warn:#e0a93b;--warnbg:rgba(224,169,59,.13);
  /* Temperatura do lead (Katzer .card-tag) */
  --frio:#29b6f6;--morno:#ffb300;--quente:#f07030;--premium:#ba68c8;--atrasado:#ef5350;
  /* Vidro escuro — adaptação do "glass" da referência para o luxo Katzer */
  --glass:rgb(var(--s2-rgb) / .62);--glass-strong:rgb(var(--s2-rgb) / .86);
  --glass-line:rgba(198,161,91,.16);--hair:rgb(var(--ink-rgb) / .05);
  /* Raios */
  --r-xs:6px;--r-sm:9px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-3xl:28px;--r-pill:999px;
  /* Elevação */
  --e1:0 1px 2px rgb(var(--sh-rgb) / calc(.45 * var(--sh-k)));
  --e2:0 8px 22px rgb(var(--sh-rgb) / calc(.28 * var(--sh-k)));
  --e3:0 18px 40px -12px rgb(var(--sh-rgb) / calc(.65 * var(--sh-k)));
  --e4:0 25px 80px -15px rgb(var(--sh-rgb) / calc(.82 * var(--sh-k)));
  --glow:0 12px 32px -14px rgba(198,161,91,.55);
  --ring:0 0 0 3px rgba(198,161,91,.24);
  /* Movimento */
  --ease-mac:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-std:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-1:100ms;--d-2:150ms;--d-3:200ms;--d-4:250ms;--d-5:320ms;--d-6:450ms;--d-count:900ms;
  /* Tipografia */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side:272px;
  /* Tema — canais e superfícies nomeadas (escuro = valores originais; o claro redefine em t00_theme) */
  color-scheme:dark;
  --bg-rgb:7 8 7;--s1-rgb:13 15 14;--s2-rgb:19 22 20;--ink-rgb:255 255 255;--sh-rgb:0 0 0;--sh-k:1;--scrim-rgb:3 4 3;--scrim-k:1;
  --side-a:#0c0e0d;--side-b:#090a09;--card-a:#181b19;--card-b:#101210;--card-br:#292e2b;
  --colh-a:#171a18;--colh-b:#101210;--list:#0e100f;--list-br:#272c29;
  --sheet-a:#171a18;--sheet-b:#0f110f;--modal-a:#151816;--modal-b:#0e100f;
  --pill-a:#252a26;--pill-b:#1c1f1d;--skel-a:#141715;--skel-b:#1d211e;
  --scroll:#2a2f2b;--scroll-h:#3a4039;--mute:#353a36;--screen:#0a0b0a;
  --gs-a:#1d1a12;--gs-b:#12130f;--cs-a:#12181a;--cs-b:#0f1314;
  --gf1:#a9823e;--gf2:#c6a15b;--gf3:#e1c486;--on-gold:#15110a;--bad-tx:#f0a0a0;}
html[data-theme="light"] ::selection{background:rgba(198,161,91,.32);color:var(--tx)}
html[data-theme="light"] body{background-image:radial-gradient(1200px 600px at -10% -10%,rgba(198,161,91,.12),transparent 60%),radial-gradient(900px 500px at 110% 20%,rgba(31,115,132,.05),transparent 60%)}
html[data-theme="light"] .sess{background-image:radial-gradient(1100px 520px at 10% -12%,rgba(198,161,91,.12),transparent 60%)}
html[data-theme="light"] .s-login{background:radial-gradient(900px 520px at 50% -10%,rgba(198,161,91,.22),transparent 62%),var(--bg)}
html[data-theme="light"] .s-side{box-shadow:1px 0 0 var(--br),10px 0 30px -18px rgba(60,45,20,.18)}
html[data-theme="light"] .s-stat:first-child b{color:var(--tx)!important}
html[data-theme="light"] .scol .kc .meta .av{color:var(--on-gold)}
html[data-theme="light"] .tag{box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .05)}
html[data-theme="light"] .kc-overlay{box-shadow:0 26px 60px -18px rgba(60,45,20,.45)}
html[data-theme="light"] img{filter:none}

/* Camadas da Sessão nunca aparecem no Preview (ex.: barra de ligação aguardando o resultado) */
html:not([data-mode="sess"]) .s-callbar,html:not([data-mode="sess"]) #sLead,html:not([data-mode="sess"]) #sDlg,html:not([data-mode="sess"]) #sPop,
html:not([data-mode="sess"]) #sUserPop,html:not([data-mode="sess"]) #sFPop,html:not([data-mode="sess"]) #sFScrim,html:not([data-mode="sess"]) #sHub{display:none!important}
/* Interruptor: bolinha clara no tema claro (convenção de sistema) */
html[data-theme="light"] .sw::after{background:#fff;box-shadow:0 1px 3px rgba(60,45,20,.35)}
html[data-theme="light"] .sw[aria-checked="true"]::after{background:#fff}
html[data-theme="light"] .s-prod .ph b{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* Título de seção aninhado (Observadores) com o mesmo padrão dos demais */
.s-card-sec .row .t{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gl)}

/* =========================================================================
   ÍCONES — base, identidade e micro-animação própria de cada item
   ========================================================================= */
html{--ki-a:var(--gl)}
.ki{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ki .a{fill:var(--ki-a);stroke:none;transform-box:fill-box;transform-origin:center}
.ki .s{opacity:.5}
.btn.primary .ki,.s-toolbtn .bd .ki,.tl-i .ic .ki,.fchip.on .ki{--ki-a:currentColor}
/* Menu */
.s-it .g{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:0;transition:background var(--d-3),color var(--d-3),transform var(--d-4) var(--ease-spring)}
.s-it .g .ki{width:18px;height:18px}
.s-it.on .g{color:var(--ivory)}
html[data-theme="light"] .s-it.on .g{color:var(--tx)}
.s-tabbar button .g{font-size:0}.s-tabbar button .g .ki{width:21px;height:21px}
.s-it .l{min-width:0;white-space:normal;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#sCollapse .g{font-size:.95rem;font-weight:700;color:var(--tm)}
html[data-skin="vivid"] .s-it{gap:9px}
html[data-skin="vivid"] #sCollapse .g{background:transparent}
/* Cabeçalho de tela: o mesmo ícone do menu, em ladrilho */
.s-phi{width:36px;height:36px;border-radius:11px;display:inline-grid;place-items:center;background:var(--gd);border:1px solid var(--glass-line);color:var(--g2);flex-shrink:0}
.s-phi .ki{width:20px;height:20px}
.s-ph h2{gap:12px}
/* Busca ⌘K, menu da conta, ferramentas */
.sp-it .ic .ki{width:17px;height:17px}
.pop button.it .ki{width:16px;height:16px;color:var(--tm)}
.pop button.it:hover .ki{color:var(--g2)}
.s-toolbtn .ic .ki{width:15px;height:15px}
.s-hist .ki{width:15px;height:15px}
.s-cmd .tt{display:flex;align-items:center;gap:9px}
.s-cmd-i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--gd2);color:var(--g2)}
.s-cmd-i .ki{width:16px;height:16px}
.s-cmd .acts button .ki{width:15px;height:15px;color:var(--gl)}
.s-top .ki{width:17px;height:17px}
.s-search .ki{width:16px;height:16px;color:var(--tm)}
/* Card */
.kc .qa .ki{width:15px;height:15px}
.kc .exp .ki{width:15px;height:15px}
.kc .exp{transform:none}
.kc.fold .exp{transform:rotate(-90deg)}
.lc .fo .ki,.lc .dt .ki,.lc .rol .ki,.kc .meta>.ki{width:1.05em;height:1.05em;margin-right:4px;vertical-align:-.2em}
.lc .dt b .ki{margin-right:2px}
.lc .rol{display:flex;align-items:center}
.kc .ob .ki{width:11px;height:11px;margin-right:3px;vertical-align:-.15em}
.tag .ki{width:1.1em;height:1.1em;margin-right:4px;vertical-align:-.2em;stroke-width:1.8}
.fchip .ki{width:13px;height:13px;margin-right:-1px}
.chip .ki{width:12px;height:12px}
/* Ficha do lead */
.tl-i .ic{color:#fff}
.tl-i .ic .ki{width:15px;height:15px;stroke-width:1.8}
.isec-t .ki{width:14px;height:14px;color:var(--gl)}
.sh-atalhos button{display:flex;align-items:center;justify-content:center;gap:6px}
.sh-atalhos button .ki{width:15px;height:15px;color:var(--gl)}
.m360-f .btn .ki,.s-comment .btn .ki{width:15px;height:15px}
.ibtn .ki{width:17px;height:17px}

/* Assinatura: cada item mexe o próprio detalhe (hover no menu, ou ao virar a tela ativa) */
@keyframes ki-drag{0%,100%{translate:0 0;rotate:0deg}45%{translate:2.4px -1.6px;rotate:9deg}}
@keyframes ki-pulse{0%,100%{scale:1}40%{scale:1.4}}
@keyframes ki-bars{0%,100%{scale:1 1}35%{scale:1 .45}70%{scale:1 1.15}}
@keyframes ki-stamp{0%{scale:1;rotate:0deg}40%{scale:.7;rotate:-30deg}75%{scale:1.15;rotate:6deg}100%{scale:1;rotate:0deg}}
@keyframes ki-door{0%,100%{scale:1 1}45%{scale:.25 1}}
@keyframes ki-rise{0%,100%{translate:0 0}40%{translate:0 -2.2px}}
@keyframes ki-blink{0%,100%{opacity:1}25%,65%{opacity:.15}45%{opacity:1}}
@keyframes ki-slide{0%{translate:-2.6px 0;opacity:.2}100%{translate:0 0;opacity:1}}
@keyframes ki-trail{0%{translate:-2.4px 2.4px;opacity:0}100%{translate:0 0;opacity:1}}
@keyframes ki-pop{0%{scale:.5}60%{scale:1.2}100%{scale:1}}
@keyframes ki-grow{0%{scale:1 .35}70%{scale:1 1.08}100%{scale:1 1}}
@keyframes ki-land{0%{translate:0 -5px;opacity:0}70%{translate:0 .6px;opacity:1}100%{translate:0 0}}
@keyframes ki-step{0%{translate:-6px 0}100%{translate:0 0}}
@keyframes ki-bounce{0%,100%{translate:0 0}35%{translate:0 -2.6px}65%{translate:0 .8px}}
@keyframes ki-flick{0%,100%{opacity:1}20%{opacity:.2}40%{opacity:1}60%{opacity:.4}}
@keyframes ki-knob{0%{translate:-3.6px 0}100%{translate:0 0}}
@keyframes ki-needle{0%{rotate:-62deg}70%{rotate:8deg}100%{rotate:0deg}}
.ki-qualidade path:nth-of-type(3){transform-box:view-box;transform-origin:10px 14.6px}
.s-it:hover .ki-kanban .a,.s-it.on .ki-kanban .a,.s-phi .ki-kanban .a{animation:ki-drag .6s var(--ease-spring)}
.s-it:hover .ki-agenda .a,.s-it.on .ki-agenda .a,.s-phi .ki-agenda .a{animation:ki-pulse .55s var(--ease-spring)}
.s-it:hover .ki-ligacoes .a,.s-it.on .ki-ligacoes .a,.s-phi .ki-ligacoes .a{transform-origin:bottom;animation:ki-bars .6s var(--ease-out)}
.s-it:hover .ki-ligacoes .a+.a,.s-it.on .ki-ligacoes .a+.a{animation-delay:.08s}
.s-it:hover .ki-propostas .a,.s-it.on .ki-propostas .a,.s-phi .ki-propostas .a{animation:ki-stamp .6s var(--ease-out)}
.s-it:hover .ki-oportunidades .a,.s-it.on .ki-oportunidades .a,.s-phi .ki-oportunidades .a{transform-origin:left;animation:ki-door .7s var(--ease-mac)}
.s-it:hover .ki-dwv .a,.s-it.on .ki-dwv .a,.s-phi .ki-dwv .a{animation:ki-rise .5s var(--ease-spring)}
.s-it:hover .ki-helena .a,.s-it.on .ki-helena .a,.s-phi .ki-helena .a,.s-cmd-i .ki-helena .a{animation:ki-blink .9s var(--ease-std)}
.s-it:hover .ki-cerebro .a,.s-it.on .ki-cerebro .a,.s-phi .ki-cerebro .a{animation:ki-pulse .6s var(--ease-spring)}
.s-it:hover .ki-listas .a,.s-it.on .ki-listas .a,.s-phi .ki-listas .a{animation:ki-slide .45s var(--ease-out) both}
.s-it:hover .ki-listas .a+.a,.s-it.on .ki-listas .a+.a{animation-delay:.1s}
.s-it:hover .ki-campanhas .a,.s-it.on .ki-campanhas .a,.s-phi .ki-campanhas .a{animation:ki-trail .5s var(--ease-out) both}
.s-it:hover .ki-campanhas .a+.a,.s-it.on .ki-campanhas .a+.a{animation-delay:.1s}
.s-it:hover .ki-clickmax .a,.s-it.on .ki-clickmax .a,.s-phi .ki-clickmax .a{animation:ki-pop .5s var(--ease-spring)}
.s-it:hover .ki-relatorios .a,.s-it.on .ki-relatorios .a,.s-phi .ki-relatorios .a{transform-origin:bottom;animation:ki-grow .55s var(--ease-out)}
.s-it:hover .ki-ranking .a,.s-it.on .ki-ranking .a,.s-phi .ki-ranking .a{animation:ki-bounce .6s var(--ease-spring)}
.s-it:hover .ki-qualidade path:nth-of-type(3),.s-it.on .ki-qualidade path:nth-of-type(3),.s-phi .ki-qualidade path:nth-of-type(3){animation:ki-needle .7s var(--ease-out)}
.s-it:hover .ki-distribuicao .a,.s-it.on .ki-distribuicao .a,.s-phi .ki-distribuicao .a{animation:ki-pulse .55s var(--ease-spring)}
.s-it:hover .ki-importar .a,.s-it.on .ki-importar .a,.s-phi .ki-importar .a{animation:ki-land .55s var(--ease-out)}
.s-it:hover .ki-cadencias .a,.s-it.on .ki-cadencias .a,.s-phi .ki-cadencias .a{animation:ki-step .55s var(--ease-mac)}
.s-it:hover .ki-excecoes .a,.s-it.on .ki-excecoes .a,.s-phi .ki-excecoes .a{animation:ki-bounce .6s var(--ease-spring)}
.s-it:hover .ki-colaboradores .a,.s-it.on .ki-colaboradores .a,.s-phi .ki-colaboradores .a{animation:ki-rise .5s var(--ease-spring)}
.s-it:hover .ki-central .a,.s-it.on .ki-central .a,.s-phi .ki-central .a{animation:ki-flick .6s linear}
.s-it:hover .ki-config .a,.s-it.on .ki-config .a,.s-phi .ki-config .a{animation:ki-knob .5s var(--ease-mac)}
.s-it:hover .g{transform:translateY(-1px)}
/* Botão de tema */
.theme-btn{color:var(--gl)}
.theme-btn svg{display:block;transition:transform var(--d-6) var(--ease-spring)}
.theme-btn:hover svg{transform:rotate(-18deg)}
.s-login-theme{position:absolute;top:16px;right:16px;z-index:3}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* =========================================================================
   FILTROS — ferramentas do quadro e mini modal
   ========================================================================= */
.s-kb-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.s-toolbtn{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--br2);background:var(--s2);color:var(--tm);font:inherit;font-size:.7rem;font-weight:700;
  cursor:pointer;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;
  transition:color var(--d-3),border-color var(--d-3),background var(--d-3),transform var(--d-3) var(--ease-spring)}
.s-toolbtn:hover{color:var(--tx);border-color:rgba(198,161,91,.5);transform:translateY(-1px)}
.s-toolbtn:active{transform:scale(.96)}
.s-toolbtn .ic{color:var(--gl);display:inline-flex;font-size:.86rem}
.s-toolbtn.on,.s-toolbtn[aria-expanded="true"]{border-color:var(--gf2);color:var(--tx);background:var(--gd)}
.s-toolbtn .bd{min-width:18px;height:18px;border-radius:999px;background:var(--gf2);color:var(--on-gold);font-size:.6rem;font-weight:800;display:grid;place-items:center;padding:0 5px}
.s-fact{display:none;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.s-fact.on{display:flex;animation:paneIn var(--d-4) var(--ease-out)}
.s-fact .lb{font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--td);margin-right:4px}
.s-fx{height:26px;padding:0 5px 0 10px;border-radius:999px;border:1px solid var(--glass-line);background:var(--gd);color:var(--tx);font:inherit;font-size:.68rem;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color var(--d-2),background var(--d-2),transform var(--d-3) var(--ease-spring)}
.s-fx i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:.52rem;color:var(--tm);background:rgb(var(--ink-rgb) / .07);transition:all var(--d-2)}
.s-fx:hover{border-color:rgba(198,161,91,.5)}
.s-fx:hover i{background:var(--badbg);color:var(--bad2)}
.s-fx:active{transform:scale(.96)}
.s-fx.clr{background:transparent;border-color:transparent;color:var(--gl);padding:0 8px;text-decoration:underline;text-underline-offset:3px}
.s-fscrim{position:fixed;inset:0;z-index:770;background:rgb(var(--scrim-rgb) / calc(.3 * var(--scrim-k)));opacity:0;pointer-events:none;transition:opacity var(--d-3)}
.s-fscrim.open{opacity:1;pointer-events:auto}
.s-fpop{position:fixed;z-index:771;display:flex;flex-direction:column;border-radius:18px;background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--e4);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);transform-origin:top right;overflow:hidden;
  opacity:0;transform:scale(.94) translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity var(--d-3) var(--ease-out),transform var(--d-5) var(--ease-mac),visibility 0s linear var(--d-5)}
.s-fpop:focus{outline:none}
.s-fpop.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity var(--d-3) var(--ease-out),transform var(--d-5) var(--ease-mac),visibility 0s}
.s-fpop.fp-sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:84vh!important;border-radius:22px 22px 0 0;transform:translateY(100%);transform-origin:bottom center;
  padding-bottom:env(safe-area-inset-bottom)}
.s-fpop.fp-sheet.open{transform:none}
.fp-h{display:flex;align-items:center;gap:10px;padding:14px 12px 12px 18px;border-bottom:1px solid var(--br)}
.fp-h b{display:block;font-size:.92rem}
.fp-h small{font-size:.66rem;color:var(--tm)}
.fp-x{margin-left:auto;width:32px;height:32px;border-radius:10px}
.fp-b{overflow-y:auto;padding:4px 18px 10px;overscroll-behavior:contain;flex:1;min-height:0}
.fp-s{padding:12px 0;border-bottom:1px solid var(--br)}
.fp-s:last-child{border-bottom:0}
.fp-s h5{margin:0 0 9px;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gl);display:flex;align-items:center;gap:8px}
.fp-mini{margin-left:auto;border:0;background:none;color:var(--tm);font:inherit;font-size:.66rem;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fp-mini:hover{color:var(--tx)}
.fp-g{margin-bottom:9px}
.fp-g small{display:block;font-size:.58rem;color:var(--td);font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.fp-chips{display:flex;flex-wrap:wrap;gap:5px}
.fp-hint{font-size:.66rem;color:var(--td);margin:2px 0 0;line-height:1.45}
.fp-f{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--br);background:rgb(var(--ink-rgb) / .02)}
.fp-f .btn[disabled]{opacity:.4;pointer-events:none}
.fchip .av.xs{width:17px;height:17px;font-size:.5rem;border-width:1px;margin-left:-4px}
.fchip:focus-visible{box-shadow:var(--ring)!important}
.fchip.t-frio.on{background:var(--frio);border-color:var(--frio);color:#fff}
.fchip.t-morno.on{background:#e0a21f;border-color:#e0a21f;color:#241800}
.fchip.t-quente.on{background:var(--quente);border-color:var(--quente);color:#fff}
.fchip.t-premium.on{background:var(--premium);border-color:var(--premium);color:#fff}
.fchip.t-frio.on i,.fchip.t-quente.on i,.fchip.t-premium.on i{color:rgba(255,255,255,.8)}
.scol .gf{margin-top:6px;font-size:.62rem;color:var(--gl);font-weight:600}
@media (max-width:860px){.s-kb-tools{margin-left:0;width:100%}.s-kb-tools .s-toolbtn{flex:1;justify-content:center}}

/* =========================================================================
   PELE COLORIDA (data-skin="vivid") — cards preenchidos pela cor do produto,
   colunas pela sessão, indicadores com matiz própria. Vale nos dois temas.
   ========================================================================= */
html[data-skin="vivid"]{--c-pros:#4aa8c6;--c-neg:#e0a94a;--c-res:#4cc47c;--c-lost:#e25c5c;--c-ramp:#f07a3a;--c-vio:#a386e0;--c-blue:#6f9ef0;--c-pink:#e07fb0;
  --vv1:34%;--vv2:13%;--vvb:46%;--vv-ink:#fff}
html[data-skin="vivid"][data-theme="light"]{--c-pros:#1d86a8;--c-neg:#b27a17;--c-res:#1f9254;--c-lost:#c43b3b;--c-ramp:#c9561a;--c-vio:#7556c2;--c-blue:#3b6fd0;--c-pink:#b84d86;
  --vv1:22%;--vv2:7%;--vvb:40%}
/* Cards */
html[data-skin="vivid"] .kc{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--acc) 40%,transparent),transparent 55%),
  linear-gradient(150deg,color-mix(in srgb,var(--acc) var(--vv1),var(--card-a)) 0%,color-mix(in srgb,var(--acc) var(--vv2),var(--card-b)) 74%);
  border-color:color-mix(in srgb,var(--acc) var(--vvb),var(--card-br));box-shadow:0 10px 26px -14px color-mix(in srgb,var(--acc) 70%,transparent)}
html[data-skin="vivid"] .kc::before{width:4px;top:0;bottom:0;border-radius:0}
html[data-skin="vivid"] .kc:hover{border-color:color-mix(in srgb,var(--acc) 75%,transparent);box-shadow:0 18px 38px -14px color-mix(in srgb,var(--acc) 80%,transparent)}
html[data-skin="vivid"] .kc .nm{color:var(--tx);font-weight:700}
html[data-skin="vivid"] .kc .val{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--acc) 26%,transparent);
  color:var(--tx);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}
html[data-skin="vivid"] .kc .fv{color:var(--tx)}
html[data-skin="vivid"] .scol .kc .meta .av,html[data-skin="vivid"] .kc .meta .av{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#fff));color:#101010}
html[data-skin="vivid"] .scol .kc[data-prod]::after{color:color-mix(in srgb,var(--acc) 26%,transparent)}
html[data-skin="vivid"] .scol .kc .acts{border-top-color:color-mix(in srgb,var(--acc) 38%,transparent)}
html[data-skin="vivid"] .scol .kc .qa{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:color-mix(in srgb,var(--acc) 32%,transparent);color:var(--tx)}
html[data-skin="vivid"] .scol .kc .qa.qcall{background:color-mix(in srgb,var(--ok) 20%,transparent);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok2)}
html[data-skin="vivid"] .scol .kc .qa:hover{background:color-mix(in srgb,var(--acc) 26%,transparent)}
html[data-skin="vivid"] .kc .stg{background:color-mix(in srgb,var(--acc) 30%,transparent);color:var(--tx)}
/* Etiquetas cheias */
html[data-skin="vivid"] .tag.frio{background:var(--frio);color:#fff}
html[data-skin="vivid"] .tag.morno{background:#e0a21f;color:#241800}
html[data-skin="vivid"] .tag.quente{background:var(--quente);color:#fff}
html[data-skin="vivid"] .tag.premium{background:var(--premium);color:#fff}
html[data-skin="vivid"] .tag.atrasado{background:var(--atrasado);color:#fff}
html[data-skin="vivid"] .lc .tag.rem{background:color-mix(in srgb,var(--frio) 22%,transparent);color:var(--tx);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--frio) 45%,transparent)}
/* Colunas pela sessão */
html[data-skin="vivid"] .scol{--sc:var(--gf2)}
html[data-skin="vivid"] .scol[data-sess="prospeccao"]{--sc:var(--c-pros)}
html[data-skin="vivid"] .scol[data-sess="negociacao"]{--sc:var(--c-neg)}
html[data-skin="vivid"] .scol[data-sess="resultado"],html[data-skin="vivid"] .scol.won{--sc:var(--c-res)}
html[data-skin="vivid"] .scol.lost{--sc:var(--c-lost)}
html[data-skin="vivid"] .scol.rampage{--sc:var(--c-ramp)}
html[data-skin="vivid"] .scol .kb-col-h{background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 28%,var(--colh-a)),color-mix(in srgb,var(--sc) 9%,var(--colh-b)));
  border-color:color-mix(in srgb,var(--sc) 45%,var(--br2));box-shadow:inset 0 3px 0 var(--sc)}
html[data-skin="vivid"] .scol .kb-col-h .nm{color:var(--tx);font-weight:800}
html[data-skin="vivid"] .scol .kb-col-h .step{color:color-mix(in srgb,var(--sc) 75%,var(--tx))}
html[data-skin="vivid"] .scol .kb-col-h .ct{background:var(--sc);color:#111}
html[data-skin="vivid"][data-theme="light"] .scol .kb-col-h .ct{color:#fff}
html[data-skin="vivid"] .scol .kb-col-h .vol{color:var(--tx)}
html[data-skin="vivid"] .scol .kb-list{background:color-mix(in srgb,var(--sc) 6%,var(--list));border-color:color-mix(in srgb,var(--sc) 26%,var(--list-br))}
html[data-skin="vivid"] .scol .kb-add{border-color:color-mix(in srgb,var(--sc) 34%,var(--card-br));background:color-mix(in srgb,var(--sc) 6%,var(--list))}
html[data-skin="vivid"] .scol .kb-add:hover{color:var(--tx);background:color-mix(in srgb,var(--sc) 16%,var(--list))}
/* Sessões e filtros coloridos */
html[data-skin="vivid"] #kSessSeg button::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--dot,var(--gf2))}
html[data-skin="vivid"] [data-sess="prospeccao"]{--dot:var(--c-pros)}
html[data-skin="vivid"] [data-sess="negociacao"]{--dot:var(--c-neg)}
html[data-skin="vivid"] [data-sess="resultado"]{--dot:var(--c-res)}
html[data-skin="vivid"] .fp-g small{color:var(--dot);display:flex;align-items:center;gap:6px}
html[data-skin="vivid"] .fp-g small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot)}
html[data-skin="vivid"] .fp-g .fchip.on{background:var(--dot);border-color:var(--dot);color:#111}
html[data-skin="vivid"][data-theme="light"] .fp-g .fchip.on{color:#fff}
html[data-skin="vivid"] .fp-g .fchip.on i{color:inherit;opacity:.75}
/* Indicadores com matiz própria */
html[data-skin="vivid"] .s-stat{--st:var(--gf2)}
html[data-skin="vivid"] .s-stat:nth-child(2),html[data-skin="vivid"] .s-stat:nth-child(7){--st:var(--c-res)}
html[data-skin="vivid"] .s-stat:nth-child(3){--st:var(--c-pros)}
html[data-skin="vivid"] .s-stat:nth-child(4){--st:var(--c-neg)}
html[data-skin="vivid"] .s-stat:nth-child(5){--st:var(--c-blue)}
html[data-skin="vivid"] .s-stat:nth-child(6){--st:var(--c-vio)}
html[data-skin="vivid"] .s-stat:nth-child(8){--st:var(--c-lost)}
html[data-skin="vivid"] .s-stat:nth-child(9){--st:var(--gf2)}
html[data-skin="vivid"] .s-stat:not(:first-child){background:linear-gradient(180deg,color-mix(in srgb,var(--st) 16%,transparent),transparent 85%);box-shadow:inset 0 3px 0 var(--st)}
html[data-skin="vivid"] .s-stat:not(:first-child) small{color:color-mix(in srgb,var(--st) 80%,var(--tx))}
html[data-skin="vivid"] .s-stat:first-child{background:linear-gradient(135deg,color-mix(in srgb,var(--gf2) 42%,transparent),color-mix(in srgb,var(--gf2) 12%,transparent));box-shadow:inset 0 3px 0 var(--gf2)}
/* Helena, menu e cabeçalho */
html[data-skin="vivid"] .s-cmd{background:linear-gradient(110deg,color-mix(in srgb,var(--c-vio) 26%,transparent),color-mix(in srgb,var(--gf2) 16%,transparent) 55%,transparent);
  border-color:color-mix(in srgb,var(--c-vio) 40%,transparent)}
html[data-skin="vivid"] .s-cmd .tt{color:var(--tx)}
html[data-skin="vivid"] [data-ki="kanban"],html[data-skin="vivid"] [data-ki="propostas"],html[data-skin="vivid"] [data-ki="ranking"]{--ic:var(--gf2)}
html[data-skin="vivid"] [data-ki="agenda"],html[data-skin="vivid"] [data-ki="importar"],html[data-skin="vivid"] [data-ki="central"],html[data-skin="vivid"] [data-ki="hub"]{--ic:var(--c-pros)}
html[data-skin="vivid"] [data-ki="ligacoes"],html[data-skin="vivid"] [data-ki="qualidade"]{--ic:var(--c-res)}
html[data-skin="vivid"] [data-ki="oportunidades"],html[data-skin="vivid"] [data-ki="dwv"],html[data-skin="vivid"] [data-ki="clickmax"],html[data-skin="vivid"] [data-ki="colaboradores"]{--ic:var(--c-blue)}
html[data-skin="vivid"] [data-ki="helena"],html[data-skin="vivid"] [data-ki="cadencias"]{--ic:var(--c-vio)}
html[data-skin="vivid"] [data-ki="cerebro"]{--ic:var(--c-pink)}
html[data-skin="vivid"] [data-ki="listas"],html[data-skin="vivid"] [data-ki="relatorios"]{--ic:var(--c-neg)}
html[data-skin="vivid"] [data-ki="campanhas"],html[data-skin="vivid"] [data-ki="distribuicao"]{--ic:var(--c-ramp)}
html[data-skin="vivid"] [data-ki="excecoes"]{--ic:var(--c-lost)}
html[data-skin="vivid"] [data-ki="config"]{--ic:var(--tm)}
html[data-skin="vivid"] [data-ki]{--ki-a:var(--ic)}
html[data-skin="vivid"] .s-it .g{width:23px;height:23px;border-radius:7px;color:var(--ic,var(--tm));background:color-mix(in srgb,var(--ic,var(--tm)) 15%,transparent)}
html[data-skin="vivid"] .s-it:hover .g{background:color-mix(in srgb,var(--ic,var(--tm)) 24%,transparent)}
html[data-skin="vivid"] .s-it.on .g{color:var(--ic);background:color-mix(in srgb,var(--ic) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 55%,transparent)}
html[data-skin="vivid"] .s-it .g .ki{width:15px;height:15px}
html[data-skin="vivid"] .s-phi{color:var(--ic);background:color-mix(in srgb,var(--ic) 18%,transparent);border-color:color-mix(in srgb,var(--ic) 40%,transparent)}
html[data-skin="vivid"] .sp-it .ic[data-ki]{color:var(--ic);background:color-mix(in srgb,var(--ic) 16%,var(--s3));border-color:color-mix(in srgb,var(--ic) 35%,var(--br2))}
html[data-skin="vivid"] .s-tabbar button .g{color:var(--ic,inherit)}
html[data-skin="vivid"] .s-tabbar button:not(.on) .g{opacity:.8}
html[data-skin="vivid"] .s-cmd-i{color:var(--ic);background:color-mix(in srgb,var(--ic) 22%,transparent)}
html[data-skin="vivid"] .s-cmd .acts button .ki{color:var(--c-vio)}
html[data-skin="vivid"] .tag .ki{--ki-a:currentColor}
html[data-skin="vivid"] .sh-atalhos button .ki{color:var(--c-vio)}
html[data-skin="vivid"] #sHubBtn .ki{color:var(--c-pros)}
html[data-skin="vivid"] .s-lead .m360-h{background:linear-gradient(135deg,color-mix(in srgb,var(--acc,var(--gf2)) 26%,var(--s2)),var(--s2) 72%)}
html[data-skin="vivid"] .s-lead #sLeadSeg .pill{background:var(--acc,var(--gl));box-shadow:0 0 12px color-mix(in srgb,var(--acc,var(--gl)) 70%,transparent)}
html[data-skin="vivid"] .s-panel{border-color:color-mix(in srgb,var(--gf2) 22%,var(--br))}
html[data-skin="vivid"] .bar i,html[data-skin="vivid"] .bar>span{filter:saturate(1.25)}