/* Tema visual "tecnológico" v2 — claro + escuro. Só vale com <html data-visual="v2"> e em telas >= 1024 px. Gerado por src/build.js: NÃO editar aqui, edite src/tema.fonte.css. */
/* Geist e Geist Mono (SIL Open Font License 1.1) - hospedadas no sistema, sem pedir à internet. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GeistMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GeistMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media (min-width: 1024px) {
/* ===== V4 "TECNOLÓGICO" — claro + escuro com as MESMAS regras (variáveis). Evolução da v3 (~70%). Estático: degradês e sombras fixos, sem blur/vidro, sem animação contínua. ===== */
html[data-visual="v2"], html[data-visual="v2"][data-theme="dark"] {
  --pg: #070B16; --main: #090E1C; --txt: #E8EEFA; --txt2: #93A3C2; --txt3: #6F7FA0;
  --line: rgba(255,255,255,.075); --line2: rgba(255,255,255,.13);
  --card: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 55%, rgba(255,255,255,.015));
  --cardk: linear-gradient(180deg, #1E2A4A, #172140); --col: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --side: linear-gradient(180deg, #101A33, #0A1020); --sh: 0 18px 40px -26px rgba(0,0,0,.8); --shb: 0 24px 60px -24px rgba(0,0,0,.85); --hi: inset 0 1px 0 rgba(255,255,255,.06);
  --num: linear-gradient(180deg, #FFFFFF 22%, #9DB8EA); --dots: rgba(255,255,255,.055);
  --a1: rgba(45,212,191,.16); --a2: rgba(99,102,241,.15); --a3: rgba(56,189,248,.08);
  --chip-bg: rgba(148,163,184,.14); --chip-fg: #E2E8F0;
  --r-bg: rgba(251,113,133,.16); --r-fg: #FDA4AF; --a-bg: rgba(251,191,36,.15); --a-fg: #FCD34D; --g-bg: rgba(45,212,191,.15); --g-fg: #5EEAD4; --s-bg: rgba(56,189,248,.15); --s-fg: #7DD3FC;
  --av-bg: linear-gradient(135deg, #2A4170, #1B2C50); --av-fg: #C7D8F8; --av-ring: rgba(94,234,212,.45);
  --ic-fg: #06121c; --focus: #090E1C;
}
html[data-visual="v2"][data-theme="light"] {
  --pg: #E9EEF6; --main: #EEF3F9; --txt: #0F172A; --txt2: #3E4D68; --txt3: #5E6D87;
  --line: rgba(15,23,42,.08); --line2: rgba(15,23,42,.13);
  --card: linear-gradient(165deg, #FFFFFF, #F6F9FD); --cardk: #FFFFFF; --col: rgba(255,255,255,.55);
  --side: linear-gradient(180deg, #FFFFFF, #F4F7FC); --sh: 0 14px 34px -20px rgba(30,41,59,.32); --shb: 0 26px 60px -28px rgba(30,41,59,.38); --hi: inset 0 1px 0 rgba(255,255,255,.9);
  --num: linear-gradient(180deg, #0B1220 18%, #3B5BA9); --dots: rgba(15,23,42,.06);
  --a1: rgba(45,212,191,.16); --a2: rgba(99,102,241,.12); --a3: rgba(56,189,248,.10);
  --chip-bg: #EEF2F7; --chip-fg: #334155;
  --r-bg: #FFE4E8; --r-fg: #BE123C; --a-bg: #FEF3C7; --a-fg: #92400E; --g-bg: #CCFBF1; --g-fg: #0F766E; --s-bg: #E0F2FE; --s-fg: #075985;
  --av-bg: linear-gradient(135deg, #E2EBFA, #D3E0F6); --av-fg: #2B4272; --av-ring: rgba(13,148,136,.45);
  --ic-fg: #FFFFFF; --focus: #EEF3F9;
}
/* letra */
/* v2.1: tamanhos do app preservados (nada de aumento forçado); Geist é mais larga que a Inter, então aperta um pouco o espaçamento */
html[data-visual="v2"] body { font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility; letter-spacing: 0 }
html[data-visual="v2"] .text-\[9px\], html[data-visual="v2"] .text-\[10px\] { font-size: 11px !important }
/* tamanhos INTEIROS: a raiz do app é 13,6px, então text-xs/sm/base/lg saíam com 10,2 / 11,9 / 13,6 / 15,3 px e a letra ficava manchada */
html[data-visual="v2"] body { font-size: 14px }
html[data-visual="v2"] .text-xs { font-size: 11px !important; line-height: 16px !important } html[data-visual="v2"] .text-sm { font-size: 12px !important; line-height: 17px !important } html[data-visual="v2"] .text-base { font-size: 14px !important; line-height: 20px !important }
html[data-visual="v2"] .text-lg { font-size: 15px !important; line-height: 22px !important } html[data-visual="v2"] .text-xl { font-size: 18px !important; line-height: 26px !important }
/* fundo */
html[data-visual="v2"] div[class*="h-[var(--app-h"] { background: var(--pg) !important }
html[data-visual="v2"] main.flex-1.overflow-auto { background: radial-gradient(var(--dots) 1px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(900px 400px at 85% -8%, var(--a1), transparent 62%), radial-gradient(760px 360px at 4% -4%, var(--a2), transparent 60%), radial-gradient(800px 300px at 50% 118%, var(--a3), transparent 60%), var(--main) !important }
/* barra lateral: ilha (recolhe normalmente pelo botão ‹ que já existe) */
html[data-visual="v2"] aside.h-screen { margin: 12px 0 12px 12px !important; height: calc(100% - 24px) !important; border: 1px solid var(--line2) !important; border-radius: 24px !important; background: var(--side) !important; box-shadow: var(--shb), var(--hi) !important; overflow: hidden }
/* superfícies */
html[data-visual="v2"] div[class*="bg-n-solid-2"][class*="rounded"], html[data-visual="v2"] section[class*="bg-n-solid-2"][class*="rounded"] { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 22px !important; box-shadow: var(--hi), var(--sh) !important }
/* Painel de modal, gaveta e aviso (qualquer cartão dentro de algo fixo na tela): SÓLIDO. A regra de cima deixa "card" translúcido, o que fazia o conteúdo de trás aparecer no modal no tema escuro (achado no Revitalle, 11/11). */
html[data-visual="v2"] [class*="fixed"] div[class*="bg-n-solid-2"][class*="rounded"], html[data-visual="v2"] div[class*="fixed"][class*="bg-n-solid-2"][class*="rounded"] { background: var(--cardk) !important; box-shadow: var(--hi), var(--shb) !important }
/* Menus que se abrem sobre a tela (trocar de pipeline, filtros...): SÓLIDOS também */
html[data-visual="v2"] div[class*="absolute"][class*="bg-n-solid-2"][class*="rounded"] { background: var(--cardk) !important; box-shadow: var(--hi), var(--shb) !important }
html[data-visual="v2"] div[class*="min-w-0"][class*="flex-col"][class*="bg-n-solid-2"] { background: var(--col) !important; border: 1px solid var(--line) !important; border-top: 2px solid var(--colc, #2DD4BF) !important; border-radius: 22px !important; box-shadow: none !important }
/* Kanban: cartão */
html[data-visual="v2"] [data-lead-id] { background: var(--cardk) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--hi), 0 1px 0 rgba(0,0,0,.18), var(--sh) !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease }
html[data-visual="v2"] [data-lead-id]:hover { transform: translateY(-3px); border-color: rgba(45,212,191,.5) !important; box-shadow: 0 18px 34px -16px rgba(45,212,191,.45), var(--hi) !important }
html[data-visual="v2"] [data-lead-id] .text-n-slate-12 { color: var(--txt) !important } html[data-visual="v2"] [data-lead-id] .text-n-slate-11, html[data-visual="v2"] [data-lead-id] .text-n-slate-10 { color: var(--txt2) !important }
html[data-visual="v2"] [data-lead-id] p.font-semibold { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: 12px !important; line-height: 1.35 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--chip-bg); color: var(--chip-fg) !important }
html[data-visual="v2"] [data-lead-id] p.font-semibold::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 9px currentColor }
html[data-visual="v2"] [data-lead-id] p.font-semibold[class*="rose"] { background: var(--r-bg); color: var(--r-fg) !important } html[data-visual="v2"] [data-lead-id] p.font-semibold[class*="amber"] { background: var(--a-bg); color: var(--a-fg) !important }
html[data-visual="v2"] [data-lead-id] p.font-semibold[class*="emerald"] { background: var(--g-bg); color: var(--g-fg) !important } html[data-visual="v2"] [data-lead-id] p.font-semibold[class*="sky"] { background: var(--s-bg); color: var(--s-fg) !important }
html[data-visual="v2"] [data-lead-id] p.font-semibold .font-normal { color: inherit !important; opacity: .72 }
html[data-visual="v2"] .x-av { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; font: 700 11px Inter, sans-serif; color: var(--av-fg); background: var(--av-bg); box-shadow: inset 0 0 0 1.5px var(--av-ring); flex: none }
html[data-visual="v2"] .x-av + span { flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 600 }
/* TILES no lugar das abas do Kanban (compactos) */
html[data-visual="v2"] .x-stats { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; flex: 1 1 580px; min-width: 0; max-width: 980px }
html[data-visual="v2"] .x-stat { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 11px 9px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--hi), var(--sh); text-align: left; color: var(--txt); cursor: pointer; overflow: hidden; transition: transform .16s ease, border-color .16s ease }
html[data-visual="v2"] .x-stat:hover { transform: translateY(-2px); border-color: var(--line2) }
html[data-visual="v2"] .x-stat.ativo { border-color: rgba(45,212,191,.6); box-shadow: 0 0 0 1px rgba(45,212,191,.25), 0 18px 40px -22px rgba(45,212,191,.65), var(--hi) }
html[data-visual="v2"] .x-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--ic-fg); box-shadow: 0 8px 16px -9px var(--c1) }
html[data-visual="v2"] .x-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round }
html[data-visual="v2"] .x-stat b { display: block; font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: -.03em; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent }
html[data-visual="v2"] .x-stat span.l { display: block; margin-top: 1px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt2) }
html[data-visual="v2"] .x-stat i.p { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--line) } html[data-visual="v2"] .x-stat i.p::after { content: ""; display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)) }
/* botões, foco, abas em pílula */
html[data-visual="v2"] button[class*="bg-woot-500"]:not([class*="bg-woot-500/"]), html[data-visual="v2"] .x-primario { background: linear-gradient(135deg, #14B8A6, #0EA5E9) !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 10px 26px -10px rgba(20,184,166,.9) !important; color: #031218 !important; font-weight: 700 }
html[data-visual="v2"] button:focus-visible, html[data-visual="v2"] a:focus-visible, html[data-visual="v2"] [role="button"]:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px rgba(45,212,191,.75) !important }
html[data-visual="v2"] nav[role="tablist"] { gap: 6px !important; padding: 5px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--line); border: 1px solid var(--line) }
html[data-visual="v2"] nav[role="tablist"] > button { border: 0 !important; border-radius: 999px !important; background: transparent !important; min-height: 32px !important; padding: 0 12px !important; color: var(--txt2) !important }
html[data-visual="v2"] nav[role="tablist"] > button[aria-selected="true"] { background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(56,189,248,.2)) !important; color: var(--txt) !important; box-shadow: inset 0 0 0 1px rgba(45,212,191,.5) }
/* Gestão */
html[data-visual="v2"] .x-hero { border-radius: 26px !important; border: 1px solid var(--line2) !important; box-shadow: var(--shb), var(--hi) !important }
html[data-visual="v2"][data-theme="light"] .x-hero { background: linear-gradient(135deg, #FFFFFF, #EAF6F6 60%, #EDEBFB) !important }
html[data-visual="v2"] .x-hero h1, html[data-visual="v2"] .x-hero h2 { color: var(--txt) !important } html[data-visual="v2"][data-theme="light"] .x-hero p, html[data-visual="v2"][data-theme="light"] .x-hero span:not(.gh-ico):not(.x-num) { color: var(--txt2) }
html[data-visual="v2"] .gh-kpi { position: relative; overflow: hidden; background: var(--card) !important; border: 1px solid var(--line2) !important; border-radius: 22px !important; box-shadow: var(--hi), var(--sh) !important; transition: transform .16s ease }
html[data-visual="v2"] .gh-kpi:hover { transform: translateY(-3px) }
html[data-visual="v2"] .gh-kpi-alerta { border-color: rgba(251,113,133,.45) !important } html[data-visual="v2"][data-theme="dark"] .gh-kpi-alerta { background: linear-gradient(165deg, rgba(251,113,133,.13), rgba(255,255,255,.02)) !important } html[data-visual="v2"][data-theme="light"] .gh-kpi-alerta { background: linear-gradient(165deg, #FFF1F3, #FFFFFF) !important }
html[data-visual="v2"] .gh-kpi .gh-ico { width: 46px !important; height: 46px !important; border-radius: 15px !important; background: linear-gradient(135deg, var(--c1, #2DD4BF), var(--c2, #38BDF8)) !important; color: var(--ic-fg) !important; box-shadow: 0 12px 24px -10px var(--c1, #2DD4BF) }
html[data-visual="v2"] .gh-kpi, html[data-visual="v2"] .gh-kpi * { --t: 1 } html[data-visual="v2"][data-theme="light"] .gh-kpi p, html[data-visual="v2"][data-theme="light"] .gh-kpi span:not(.gh-ico):not(.x-num) { color: var(--txt2) }
html[data-visual="v2"] .x-num { font-size: 30px !important; line-height: 1.02 !important; font-weight: 800 !important; letter-spacing: -.035em !important; background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent !important }
html[data-visual="v2"] div[class*="rounded-xl"][class*="p-3.5"] { position: relative; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--hi) !important }
html[data-visual="v2"] div[class*="rounded-xl"][class*="p-3.5"] .text-2xl { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.03em !important }
html[data-visual="v2"] .x-tem-anel > p:first-child { padding-right: 52px } html[data-visual="v2"] .x-anel { position: absolute; right: 12px; top: 12px; width: 42px; height: 42px } html[data-visual="v2"] .x-anel circle { fill: none; stroke-width: 5 } html[data-visual="v2"] .x-anel .t { stroke: var(--line2) } html[data-visual="v2"] .x-anel .v { stroke: url(#xr); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50% }
html[data-visual="v2"] .x-urg { background: transparent !important; color: var(--r-fg) !important; padding: 0 !important; font-size: 11px !important; letter-spacing: .08em; font-weight: 800 }
/* ===== acabamento da rodada 4 ===== */
/* botões de período do cabeçalho da Gestão (legíveis nos dois temas) */
html[data-visual="v2"] .x-hero button:not(.gh-kpi) { border-radius: 999px !important; border: 1px solid var(--line2) !important; background: var(--line) !important; color: var(--txt2) !important; box-shadow: none !important }
html[data-visual="v2"] .x-hero button.x-ativo:not(.gh-kpi) { background: linear-gradient(135deg, #14B8A6, #0EA5E9) !important; color: #031218 !important; border-color: transparent !important; font-weight: 700 }
/* alertas da Gestão como cartões de ação */
html[data-visual="v2"] .x-alerta { display: flex !important; align-items: center; gap: 14px; padding: 12px 14px !important; border-radius: 18px !important; background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: var(--hi) !important }
html[data-visual="v2"] .x-alerta > svg { box-sizing: content-box; flex: none; width: 20px; height: 20px; padding: 8px; border-radius: 12px; background: var(--s-bg); color: var(--s-fg) !important }
html[data-visual="v2"] .x-alerta[data-sev="r"] > svg { background: var(--r-bg); color: var(--r-fg) !important } html[data-visual="v2"] .x-alerta[data-sev="a"] > svg { background: var(--a-bg); color: var(--a-fg) !important }
html[data-visual="v2"] .x-alerta[data-sev="r"] { border-color: rgba(251,113,133,.35) !important } html[data-visual="v2"] .x-alerta[data-sev="a"] { border-color: rgba(251,191,36,.35) !important }
html[data-visual="v2"] .x-alerta > button, html[data-visual="v2"] .x-alerta > a { margin-left: auto; border-radius: 999px !important; border: 1px solid var(--line2) !important; background: var(--line) !important; color: var(--txt) !important; padding: 6px 14px !important }
/* menos ruído */
html[data-visual="v2"] .x-sempend { display: none !important }
html[data-visual="v2"] .x-urg { font-size: 0 !important; width: 8px; height: 8px; border-radius: 50%; background: #F43F5E !important; display: inline-block; margin-right: 8px; box-shadow: 0 0 10px rgba(244,63,94,.7); vertical-align: middle }
/* ===== V5 — sobre a v4: (1) tipografia trocável, (2) "espera" como linguagem visual única (chip + barra), (3) Caixa de Entrada refeita, (4) conversa aberta (exemplo), (5) cartões do Kanban mais baixos (telefone só no hover). Claro + escuro. ===== */
html[data-visual="v2"] { --x-font: 'Geist'; --x-mono: 'Geist Mono'}
/* tipografia: troca a fonte de TEXTO (ícones por máscara/Line Awesome ficam intactos) */
html[data-visual="v2"] body, html[data-visual="v2"] body :is(button, input, select, textarea, h1, h2, h3, h4, p, a, label, div, span, li, td, th):not([class*="la-"]):not(.la):not(.las):not(.lab):not([class*="i-lucide"]):not(.x-mono):not(.font-mono) { font-family: var(--x-font), Inter, system-ui, sans-serif !important }
html[data-visual="v2"] .x-mono, html[data-visual="v2"] .x-mono *, html[data-visual="v2"] .x-espera, html[data-visual="v2"] .x-espera * { font-family: var(--x-mono), ui-monospace, monospace !important; font-variant-numeric: tabular-nums }
html[data-visual="v2"] h1, html[data-visual="v2"] h2, html[data-visual="v2"] .x-hero h1 { letter-spacing: -.025em !important; font-weight: 700 !important }

/* ESPERA: a mesma linguagem em Kanban, Caixa e Gestão (verde < 30 min, âmbar < 2 h, vermelho depois) */
html[data-visual="v2"] .x-espera { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; padding: 2px 8px 2px 7px; border-radius: 999px; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.3; white-space: nowrap; background: var(--w-bg, var(--chip-bg)) !important; color: var(--w-fg, var(--txt2)) !important }
html[data-visual="v2"] .x-espera::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor }
html[data-visual="v2"] .x-espera svg { display: none }
html[data-visual="v2"] [data-n="ok"] { --w-bg: var(--g-bg); --w-fg: var(--g-fg); --lv: #22C55E } html[data-visual="v2"] [data-n="atencao"] { --w-bg: var(--a-bg); --w-fg: var(--a-fg); --lv: #F59E0B } html[data-visual="v2"] [data-n="critico"] { --w-bg: var(--r-bg); --w-fg: var(--r-fg); --lv: #F43F5E }
html[data-visual="v2"] [data-lead-id][data-n]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--esp, 0%); background: var(--lv); border-radius: 0 3px 0 0 }
html[data-visual="v2"] [data-lead-id] .x-fone { display: none !important } html[data-visual="v2"] [data-lead-id]:hover .x-fone { display: inline-flex !important }
/* barra de comandos do Kanban: um padrão só (34px, raio 12, mesma borda/fundo) */
html[data-visual="v2"] main .z-btn-ghost, html[data-visual="v2"] main label:has(input[name="busca"]) { height: 34px !important; min-height: 34px !important; border-radius: 12px !important; border: 1px solid var(--line2) !important; background: var(--card) !important; color: var(--txt2) !important; box-shadow: var(--hi) !important; font-size: 13px; font-weight: 500; transition: border-color .15s ease, color .15s ease, background .15s ease }
html[data-visual="v2"] main .z-btn-ghost:hover { border-color: rgba(45,212,191,.55) !important; color: var(--txt) !important }
html[data-visual="v2"] main .z-btn-ghost[aria-label]:not([aria-controls]) { min-width: 34px; padding: 0 9px !important; justify-content: center }
html[data-visual="v2"] main .z-btn-ghost:not([aria-label]):not([class*="z-btn-icon"]) { padding: 0 12px !important }
html[data-visual="v2"] main .z-btn-ghost[class*="z-btn-icon"] { width: 34px !important; min-width: 34px !important; padding: 0 !important; justify-content: center }
html[data-visual="v2"] main label:has(input[name="busca"]) { padding: 0 12px !important; min-width: 130px !important; flex: 1 1 130px !important; max-width: 240px !important }
html[data-visual="v2"] main button.z-btn-solid-blue { height: 34px !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 13px }
html[data-visual="v2"] main button.z-btn-solid-blue span.rounded-full { background: rgba(255,255,255,.92) !important; font-size: 11px; line-height: 18px; padding: 0 7px }
/* tema claro: letra mais firme e contraste maior */
html[data-visual="v2"][data-theme="light"] body { font-weight: 450 }
html[data-visual="v2"][data-theme="light"] .x-stat span.l, html[data-visual="v2"][data-theme="light"] [data-lead-id] .text-n-slate-11 { font-weight: 500 }

/* GESTÃO: "a mais antiga há 6 h 04" vira chip de espera */
html[data-visual="v2"] .gh-kpi .x-espera { margin-top: 4px }

/* CAIXA DE ENTRADA */
html[data-visual="v2"] div[class*="lg:w-[25.5rem]"] { background: transparent !important; border: 0 !important; box-shadow: none !important }
html[data-visual="v2"] div[class*="grid-flow-col"][class*="auto-cols-fr"] { border-radius: 999px !important; background: var(--line) !important; padding: 4px !important; border: 1px solid var(--line) !important }
html[data-visual="v2"] div[class*="grid-flow-col"][class*="auto-cols-fr"] > button { border-radius: 999px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--txt2) !important }
html[data-visual="v2"] div[class*="grid-flow-col"][class*="auto-cols-fr"] > button[class*="text-primary"] { background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(56,189,248,.2)) !important; color: var(--txt) !important; box-shadow: inset 0 0 0 1px rgba(45,212,191,.5) !important }
html[data-visual="v2"] div[role="group"][aria-label="Filtros rápidos"] { border: 0 !important; gap: 4px !important; padding: 6px 12px !important; flex-wrap: wrap; overflow: visible !important }
html[data-visual="v2"] div[role="group"][aria-label="Filtros rápidos"] > button { border-radius: 999px !important; padding: 4px 8px !important; font-size: 12px !important; background: var(--line) !important; border: 1px solid var(--line) !important; color: var(--txt2) !important; box-shadow: none !important }
html[data-visual="v2"] div[role="group"][aria-label="Filtros rápidos"] > button[aria-pressed="true"] { background: var(--g-bg) !important; color: var(--g-fg) !important; border-color: rgba(45,212,191,.45) !important }
html[data-visual="v2"] .x-af { display: flex !important; gap: 18px !important; padding: 2px 14px 0 !important; border: 0 !important; background: none !important }
html[data-visual="v2"] .x-af > button { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--txt2) !important; padding: 6px 2px !important; width: auto !important; flex: none !important }
html[data-visual="v2"] .x-af > button[class*="bg-primary"], html[data-visual="v2"] .x-af > button[class*="text-primary"] { border-bottom-color: var(--x-teal, #2DD4BF) !important; color: var(--txt) !important; font-weight: 700 !important }
html[data-visual="v2"] .x-oculto { display: none !important }
html[data-visual="v2"] .x-row { position: relative; border-radius: 16px !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--lv, var(--line2)) !important; background: var(--cardk) !important; box-shadow: var(--hi) !important; margin-bottom: 8px }
html[data-visual="v2"] .x-row.x-sel { box-shadow: 0 0 0 1px rgba(45,212,191,.55), 0 16px 32px -18px rgba(45,212,191,.7) !important }
html[data-visual="v2"] .x-row .x-urg { display: none !important }
html[data-visual="v2"] .x-av-lg { display: inline-grid !important; place-items: center; width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 50% !important; font: 700 15px var(--x-font) !important; color: var(--av-fg) !important; background: var(--av-bg) !important; box-shadow: inset 0 0 0 1.5px var(--av-ring) !important }
html[data-visual="v2"] .x-cta { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px }
html[data-visual="v2"] .x-cta .x-primario { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; font-size: 14px }
/* CONVERSA ABERTA (exemplo ilustrativo) */

/* ===== peças usadas pelo tema.js (versão de produção) ===== */
html[data-visual="v2"] .x-nomelinha { display: flex; align-items: center }
html[data-visual="v2"] .x-stat:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px rgba(45,212,191,.75) }
/* título na barra fixa */
html[data-visual="v2"] .x-topo-titulo { margin-right: auto; display: flex; align-items: center; gap: 10px; padding-left: 4px; color: var(--txt); font-size: 15px; font-weight: 700 }
html[data-visual="v2"] .x-topo-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(45,212,191,.14); color: #0D9488 } html[data-visual="v2"] .x-topo-ic svg { width: 16px; height: 16px }
html[data-visual="v2"] .x-topo-cta { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; margin-left: 6px; margin-right: auto; border-radius: 12px !important; font-size: 13px; cursor: pointer }
html[data-visual="v2"] .x-topo-titulo { margin-right: 0 }
html[data-visual="v2"] .x-topo-cta i { font-style: normal; background: rgba(255,255,255,.92); color: #0D9488; border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 18px; font-weight: 700 }

/* ===== BARRA LATERAL v3: trilho de ícones; abre só com o mouse em cima (sobrepõe, não empurra) ===== */
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]) { width: 76px !important; min-width: 76px !important; flex: none !important; margin-right: 0 !important; position: relative; z-index: 40; transition: width .2s ease, margin-right .2s ease, box-shadow .2s ease }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):hover { width: 224px !important; margin-right: -148px !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), var(--hi) !important }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]) * { white-space: nowrap }
html[data-visual="v2"] aside.h-screen button[aria-label^="Recolher"] { display: none !important }
/* marca: logo da clínica (2 versões por tema) */
html[data-visual="v2"] .x-marca { display: flex; align-items: center; justify-content: center; padding: 10px 4px 4px }
html[data-visual="v2"] .x-marca img { display: block; height: auto }
html[data-visual="v2"] .x-lg { width: var(--x-lg-w, 118px) } html[data-visual="v2"] .x-mn { width: var(--x-mn-w, 34px) }
html[data-visual="v2"] .x-lg-c, html[data-visual="v2"] .x-mn-c { display: none !important } html[data-visual="v2"][data-theme="light"] .x-lg-c, html[data-visual="v2"][data-theme="light"] .x-mn-c { display: block !important } html[data-visual="v2"][data-theme="light"] .x-lg-e, html[data-visual="v2"][data-theme="light"] .x-mn-e { display: none !important }
html[data-visual="v2"] .x-marca > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, #2DD4BF, #38BDF8 58%, #8B5CF6); color: #04121a; font: 800 17px Inter, sans-serif; font-style: normal }
/* aberta: logo completa + logo Automatiz3 pequena; fechada (trilho): só o monograma */
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):hover .x-mn, html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) .x-lg, html[data-visual="v2"] aside.h-screen[class*="w-20"] .x-lg { display: none !important }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]) img[alt="AUTOMATIZ3"] { width: 76px !important; height: auto; margin: 6px auto 4px; content: url("automatiz3.png?v=2") }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) img[alt="AUTOMATIZ3"] { display: none !important }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]) > div:first-child > div.flex { justify-content: center }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) nav button > span.truncate, html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) nav button > span.flex-1, html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) button.w-full > span.flex-1, html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) button.w-full > svg, html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) nav li button > div:last-child:not(:first-child) { display: none !important }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) nav p { font-size: 0 !important; padding: 0 !important; height: 1px; margin: 8px 12px; background: var(--line) }
html[data-visual="v2"] aside.h-screen:not([class*="w-20"]):not(:hover) nav button { justify-content: center }
/* ícones: placas tecnológicas (mesma linguagem dos tiles) */
html[data-visual="v2"] aside.h-screen nav button > div.relative.flex.items-center.flex-shrink-0 { display: grid !important; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, rgba(45,212,191,.16), rgba(56,189,248,.08)); border: 1px solid rgba(45,212,191,.28); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease }
html[data-visual="v2"] aside.h-screen nav button [class*="i-lucide"] { color: #5EEAD4 }
html[data-visual="v2"][data-theme="light"] aside.h-screen nav button > div.relative.flex.items-center.flex-shrink-0 { background: linear-gradient(135deg, rgba(13,148,136,.12), rgba(14,165,233,.08)); border-color: rgba(13,148,136,.3) }
html[data-visual="v2"][data-theme="light"] aside.h-screen nav button [class*="i-lucide"] { color: #0F766E }
html[data-visual="v2"] aside.h-screen nav button:hover > div.relative.flex.items-center.flex-shrink-0 { border-color: rgba(45,212,191,.6) }
html[data-visual="v2"] aside.h-screen nav button[aria-current="page"] > div.relative.flex.items-center.flex-shrink-0 { background: linear-gradient(135deg, #2DD4BF, #38BDF8); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(45,212,191,.85) }
html[data-visual="v2"] aside.h-screen nav button[aria-current="page"] [class*="i-lucide"], html[data-visual="v2"][data-theme="light"] aside.h-screen nav button[aria-current="page"] [class*="i-lucide"] { color: #04121A !important }
html[data-visual="v2"] aside.h-screen nav button[aria-current="page"] { font-weight: 700 }
html[data-visual="v2"] aside.h-screen nav button { border-radius: 14px !important }
/* seção Aparência (em Configurações) */
html[data-visual="v2"] .x-aparencia { margin: 18px 0 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
html[data-visual="v2"] .x-aparencia b { color: var(--txt); font-size: 14px } html[data-visual="v2"] .x-aparencia span { color: var(--txt2); font-size: 13px; flex: 1 1 260px }
html[data-visual="v2"] .x-aparencia button { height: 34px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--line); color: var(--txt); font-size: 13px; font-weight: 600; cursor: pointer }
html[data-visual="v2"] .x-aparencia button:hover { border-color: rgba(45,212,191,.55) }

/* animações: entrada em cascata (1x por tela), barras que enchem. "backwards" para não travar o hover no estado final */
@keyframes x-sobe { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes x-enche { from { transform: scaleX(0) } to { transform: scaleX(1) } }
html[data-visual="v2"] [data-ent] { animation: x-sobe .5s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--i, 0) * 34ms) }
html[data-visual="v2"] .x-stat i.p::after { transform-origin: left center; animation: x-enche 1s cubic-bezier(.16,1,.3,1) .25s backwards }
@media (prefers-reduced-motion: reduce) { html[data-visual="v2"]:not([data-mov="sempre"]) [data-ent], html[data-visual="v2"]:not([data-mov="sempre"]) .x-stat i.p::after { animation: none !important } }
/* campos de busca com ícone: o padding global do app anulava o pl-* do Tailwind e o ícone cobria o texto */
html[data-visual="v2"] input[class*="pl-7"] { padding-left: 28px !important } html[data-visual="v2"] input[class*="pl-8"] { padding-left: 32px !important } html[data-visual="v2"] input[class*="pl-9"] { padding-left: 36px !important } html[data-visual="v2"] input[class*="pl-10"] { padding-left: 40px !important } html[data-visual="v2"] input[class*="pl-11"] { padding-left: 44px !important }
html[data-visual="v2"] .x-aparencia.x-lateral { margin: 14px 0 0; padding: 12px; flex-direction: column; align-items: stretch; gap: 8px } html[data-visual="v2"] .x-aparencia.x-lateral span { flex: none; font-size: 12px; white-space: normal }

/* seletor de empresa escondido (menu enxuto) */
html[data-visual="v2"] aside.h-screen > div:first-child > div.relative.mt-3 { display: none !important }

/* mini-gráficos nos cards (Funil e Gestão; os cards ficam sobre o fundo escuro do topo nos dois temas) */
html[data-visual="v2"] .x-viz { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-self: stretch; width: 100% }
html[data-visual="v2"] .fc-kpi .x-leg, html[data-visual="v2"] .fc-kpi .x-par span { color: #9FB4D4; opacity: 1 }
html[data-visual="v2"] .x-seg { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(130,145,175,.28) }
html[data-visual="v2"] .x-seg i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: x-enche .9s cubic-bezier(.16,1,.3,1) .2s backwards }
html[data-visual="v2"] .x-med { height: 6px; flex: none; border-radius: 999px; overflow: hidden; background: rgba(130,145,175,.28) } html[data-visual="v2"] .x-par .x-med { flex: 1 }
html[data-visual="v2"] .x-med i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: x-enche .9s cubic-bezier(.16,1,.3,1) .2s backwards }
html[data-visual="v2"] .x-leg { font-size: 11px; color: inherit; opacity: .7 }
html[data-visual="v2"] .x-par { display: flex; align-items: center; gap: 8px } html[data-visual="v2"] .x-par span { width: 38px; font-size: 11px; color: inherit; opacity: .7 }

/* tendência (linha com brilho) nos cards do Funil e da Gestão */
html[data-visual="v2"] .fc-kpi, html[data-visual="v2"] .gh-kpi { position: relative }
html[data-visual="v2"] .x-tend { position: absolute; right: 16px; top: 16px; width: 112px; height: 44px; pointer-events: none }
html[data-visual="v2"] .x-tend svg { width: 100%; height: 100%; overflow: visible }
html[data-visual="v2"] .x-tend .l { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--c)); stroke-dasharray: 1; stroke-dashoffset: 0; animation: x-tra 1.3s cubic-bezier(.16,1,.3,1) .15s backwards }
html[data-visual="v2"] .x-tend .a { stroke: none; animation: x-surge .9s ease .5s backwards }
html[data-visual="v2"] .x-tend .d { fill: var(--c); filter: drop-shadow(0 0 5px var(--c)); animation: x-surge .5s ease 1.1s backwards }
html[data-visual="v2"] .x-tend-leg { position: absolute; right: 16px; top: 62px; font-size: 10px; opacity: .65; text-align: right; white-space: nowrap; pointer-events: none }
html[data-visual="v2"] .fc-kpi .x-tend-leg { color: #9FB4D4; opacity: 1 }
@keyframes x-tra { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes x-surge { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { html[data-visual="v2"]:not([data-mov="sempre"]) .x-tend .l, html[data-visual="v2"]:not([data-mov="sempre"]) .x-tend .a, html[data-visual="v2"]:not([data-mov="sempre"]) .x-tend .d { animation: none !important } }
/* tabela de Usuários: cabe na caixa sem barra de rolagem (espaço lateral menor; e-mail longo quebra linha) */
html[data-visual="v2"] main table:has(button[title="Redefinir senha"]) :is(th, td) { padding-left: 10px !important; padding-right: 10px !important }
html[data-visual="v2"] main table:has(button[title="Redefinir senha"]) tbody td:first-child { max-width: 210px; overflow-wrap: anywhere }
html[data-visual="v2"] main table:has(button[title="Redefinir senha"]) tbody td:nth-child(4) span { white-space: normal !important; max-width: 112px; line-height: 1.25; text-align: left }
html[data-visual="v2"] main table:has(button[title="Redefinir senha"]) tbody td:first-child { max-width: 190px }

/* ===== Carteira: cartões que se destacam do fundo (cada grupo com a sua cor) ===== */
html[data-visual="v2"] .cart-root .cart-caixa { background: var(--card) !important; border: 1px solid var(--line2) !important; border-radius: 20px !important; box-shadow: var(--hi), var(--sh) !important; position: relative; overflow: hidden }
html[data-visual="v2"] .cart-root .cart-hero { background: radial-gradient(560px 240px at 0% 0%, rgba(45,212,191,.18), transparent 70%), radial-gradient(420px 200px at 100% 100%, rgba(56,189,248,.10), transparent 70%), var(--card) !important; border-color: rgba(45,212,191,.42) !important }
html[data-visual="v2"] .cart-root .cart-hero [data-testid="cart-nunca-n"] { background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent !important }
html[data-visual="v2"] .cart-root .cart-acao { background: radial-gradient(260px 120px at 100% 0%, rgba(45,212,191,.14), transparent 70%), var(--card) !important; box-shadow: inset 4px 0 0 #2DD4BF, var(--hi), var(--sh) !important }
html[data-visual="v2"] .cart-root .cart-grupo { background: radial-gradient(220px 110px at 100% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 72%), var(--card) !important; cursor: pointer }
html[data-visual="v2"] .cart-root .cart-grupo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acc) }
html[data-visual="v2"] .cart-root .cart-grupo:hover { border-color: color-mix(in srgb, var(--acc) 70%, transparent) !important; box-shadow: 0 18px 38px -20px var(--acc), var(--hi) !important }
html[data-visual="v2"] .cart-root .cart-grupo p.text-3xl { color: var(--acc) !important; filter: brightness(1.15) }
html[data-visual="v2"][data-theme="light"] .cart-root .cart-grupo p.text-3xl { filter: none }
html[data-visual="v2"] .cart-root .cart-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: linear-gradient(135deg, #2DD4BF, #38BDF8); color: #04121A; box-shadow: 0 8px 16px -9px #2DD4BF }
html[data-visual="v2"] .cart-root h3.text-xs, html[data-visual="v2"] .cart-root h4.text-xs { color: var(--txt2) }
html[data-visual="v2"] .cart-root .cart-caixa h4.text-sm { color: var(--txt) }

}