/* =============================================================
SEMOG · Admin Tahoe — shell + dashboard primitives
Extends tokens.css.
USE: import after tokens.css. Provides the layout shell (sidebar
+ main card), toolbar, KPIs, cards, pills, tables and detail
primitives that constitute the Tahoe admin pattern.
⚠️ SCOPED: every selector below lives under `.tahoe-shell`.
Wrap the page region you want to be Tahoe-styled in:
Architecture (v0.8.0 — brand sidebar / inset main):
- `.tahoe-shell` is the grid layout AND the wallpaper. The wallpaper
IS the Blue World gradient — emoldura tudo edge-to-edge. Place
directly inside ``; body is the scroller (Ctrl+F, mouse
wheel, keyboard nav all work naturally).
- `.sidebar` is sticky-pinned at left, TRANSPARENT — os nav items
vivem direto sobre o wallpaper escuro. No glass, no backdrop blur.
Textos em branco/sky pra ler contra o azul.
- `.main` is a rounded WHITE card (`#FBFCFD`) com margem em volta
(0 na esquerda — colado na sidebar). Sombra firme (`0 16px 36px
rgba(0,0,0,0.22)`) pra eleva contra o wallpaper escuro. Os 8px
de wallpaper que aparecem em volta são o próprio Blue World —
padrão macOS Tahoe SidebarInset.
- `.toolbar` lives at the top of `.main` and scrolls with the
content. It is NOT sticky — filtros e ações ficam na página,
não na topbar global.
- Cards (`.card`, `.kpi`, `.mini-kpi`) flutuam no .main com hairline
1px + drop shadow leve (`0 4px 10px rgba(10,19,48,0.04)`) — não
são flat, têm elevação real pra se distinguirem do canvas branco.
Replaced in v0.8.0: glass-on-sky wallpaper, glass sidebar, glass
main. Tudo virou opaco e a sidebar deixou de ser card próprio —
o wallpaper E a sidebar compartilham a mesma cor Blue World.
--side-w reduzida 248px → 220px na mesma versão, e → 66px na v0.39.0,
quando o rail deixou de ser modo e virou o único layout acima de 768px.
Outside `.tahoe-shell`, host app's existing styles are untouched.
Do NOT add new rules at the top level (no `body{}`, no `*{}`).
============================================================= */
:root{
--card-radius:14px;
--pill-radius:999px;
--side-w:66px;
--tb-h:56px;
--ui-font: 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif;
--num-font: 'Saira', system-ui, sans-serif;
/* Paleta da esteira de recuperação — um estado, uma cor. Em CANAIS e não hex
porque as superfícies dos nós precisam de alpha, e rgba() aceita var() nos
canais sem exigir color-mix (que este kit não usa em lugar nenhum; adotá-lo
seria assumir um piso de browser novo pro pacote inteiro).
A mesma cor serve a três lugares: a superfície do nó, o rótulo dele, e a
barra empilhada da coluna "Distribuição" em shell-cobranca-condominios.html,
que espelha a esteira DE PROPÓSITO — divergir quebraria a correspondência
entre painel e lista. Antes da v0.42.0 aquela barra trazia o hex escrito à
mão em cada um dos 23 , e só a disciplina de quem editava impedia a
divergência.
Três batem EXATAMENTE com token Tier 3 e estão anotadas: se o token mudar,
mude aqui junto. As outras duas não têm equivalente semântico — não dá pra
aliasar um token que é hex quando o consumo precisa de canais. */
--esteira-em-regua-rgb: 79,111,181; /* --blue-400 #4F6FB5 — sem par no Tier 3 */
--esteira-aguardando-rgb: 200,136,26; /* = --warning #C8881A */
--esteira-acordo-rgb: 47,140,94; /* = --success #2F8C5E */
--esteira-quebrado-rgb: 179,58,58; /* = --danger #B33A3A */
--esteira-juridico-rgb: 46,46,54; /* --gray-700 #2E2E36 — sem par no Tier 3 */
/* Alias sólido — a mesma cor, pronta pra usar onde não há alpha. Os canais
acima continuam sendo a fonte; isto é só a forma consumível.
Existe porque `-rgb` NÃO é uma cor: `color:var(--esteira-quebrado-rgb)` não
dá erro de sintaxe, é declaração inválida e descartada em silêncio — o
elemento herda a cor de cima e ninguém descobre. Além disso, canais não
servem a API de JS, a atributo SVG `fill`, nem a lib de gráfico. */
--esteira-em-regua: rgb(var(--esteira-em-regua-rgb));
--esteira-aguardando: rgb(var(--esteira-aguardando-rgb));
--esteira-acordo: rgb(var(--esteira-acordo-rgb));
--esteira-quebrado: rgb(var(--esteira-quebrado-rgb));
--esteira-juridico: rgb(var(--esteira-juridico-rgb));
/* Rótulo: variante sólida escurecida, não derivável da base por alpha. */
--esteira-em-regua-fg: #2F4FA0;
--esteira-aguardando-fg: #8A5D10;
--esteira-acordo-fg: #1F6B46;
--esteira-quebrado-fg: #8C2828;
--esteira-juridico-fg: #2E2E36;
}
/* ─────────── The Tahoe shell (layout + wallpaper) ─────────── */
.tahoe-shell{
box-sizing:border-box;
font-family:var(--ui-font);
color:#1A1A20;
min-height:100vh;
display:grid;
grid-template-columns:var(--side-w) 1fr;
/* Wallpaper — Blue World gradient. A "cor da sidebar" emoldura o
.main inset edge-to-edge (top/bottom/right). A sidebar em si é
transparente — os nav items vivem direto sobre esse wallpaper,
padrão macOS Tahoe SidebarInset. */
background:
radial-gradient(45% 55% at 0% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 65%),
radial-gradient(55% 60% at 100% 100%, rgba(173,213,235,0.10) 0%, rgba(173,213,235,0) 60%),
linear-gradient(180deg, #213A87 0%, #1B2D70 55%, #16265D 100%);
background-attachment:fixed;
}
.tahoe-shell *{box-sizing:border-box;}
.tahoe-shell svg{width:1em;height:1em;flex-shrink:0;}
.tahoe-shell .spark{width:100%;height:48px;}
/* ─────────── Sidebar ───────────
Sticky-pinned na esquerda; height: 100vh ocupa a viewport e
permite scroll interno SE o conteúdo do nav exceder (raro).
O body é quem rola pra todo o resto. `align-self: start`
impede que o grid estique a sidebar pra altura da row. */
.tahoe-shell .sidebar{
position:sticky;
top:0;
align-self:start;
height:100vh;
overflow-y:auto;
background:transparent;
padding:14px 12px;
display:flex;
flex-direction:column;
gap:2px;
}
.tahoe-shell .org{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:14px;
background:rgba(255,255,255,0.08);
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.14);
margin-bottom:12px;
}
.tahoe-shell .org-mark{
width:30px;height:30px;border-radius:9px;flex-shrink:0;
background:linear-gradient(180deg,#3D5BB8 0%, #2F4FA0 60%, #1B2D70 100%);
display:flex;align-items:center;justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.40);
}
/* Override the generic `.tahoe-shell svg { width:1em; height:1em }` rule
so the III monogram inside .org-mark stays at a fixed, brand-correct
width regardless of inherited font-size. */
.tahoe-shell .org-mark svg{width:16px;height:auto;}
.tahoe-shell .org-name{font-size:13px;font-weight:600;line-height:1.1;color:#fff;}
.tahoe-shell .org-sub{font-size:11px;color:rgba(255,255,255,0.60);margin-top:1px;}
.tahoe-shell .nav-section{font-size:11px;font-weight:500;color:rgba(255,255,255,0.45);padding:14px 10px 6px;}
.tahoe-shell .nav-item{
display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;
font-size:13px;font-weight:500;color:rgba(255,255,255,0.86);text-decoration:none;
transition:background 120ms ease, color 120ms ease;
}
.tahoe-shell .nav-item svg{width:17px;height:17px;color:rgba(173,213,235,0.80);}
.tahoe-shell .nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.tahoe-shell .nav-item.active{
background:rgba(255,255,255,0.14);color:#fff;
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
.tahoe-shell .nav-item.active svg{color:#ADD5EB;}
.tahoe-shell .nav-item .count{
margin-left:auto;font-size:11px;color:rgba(255,255,255,0.80);font-weight:500;
background:rgba(255,255,255,0.12);padding:1px 7px;border-radius:999px;
}
.tahoe-shell .nav-item.active .count{background:rgba(255,255,255,0.22);color:#fff;}
.tahoe-shell .nav-item .alert{background:rgba(255,180,180,0.22);color:#FFC7C7;}
.tahoe-shell .user{
margin-top:auto;padding:8px;border-radius:14px;
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,0.06);
box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.14);
}
.tahoe-shell .avatar{
width:28px;height:28px;border-radius:999px;flex-shrink:0;
background:linear-gradient(135deg,#ADD5EB 0%, #4F6FB5 100%);
color:#fff;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:600;
}
.tahoe-shell .user-name{font-size:12px;font-weight:600;line-height:1.1;color:#fff;}
.tahoe-shell .user-role{font-size:10px;color:rgba(255,255,255,0.55);margin-top:1px;}
/* ─────────── Main pane ───────────
Card branco semi-transparente arredondado (estilo shadcn
dashboard-01 SidebarInset). Margem 8px nos três lados que
não tocam a sidebar — o lado esquerdo cola na sidebar pra
eles parecerem encaixados. Cresce com o conteúdo; body é
quem rola. `overflow: hidden` mantém os cantos limpos. */
.tahoe-shell .main{
min-width:0;
display:flex;
flex-direction:column;
margin:8px 8px 8px 0;
background:#FBFCFD;
border-radius:var(--card-radius);
box-shadow:
0 0 0 0.5px rgba(0,0,0,0.20),
0 1px 2px rgba(0,0,0,0.10),
0 16px 36px rgba(0,0,0,0.22);
/* `clip` recorta igual ao `hidden` (mantém os cantos limpos) mas NÃO cria um
contexto de rolagem — e é isso que faz `position:sticky` funcionar aqui dentro.
Com `hidden`, a .sticky-bar grudava em relação ao .main, que não rola, e por isso
saía da tela junto com a página (quebrada desde a v0.28.0, corrigido na v0.30.0).
`hidden` fica antes como fallback: navegador sem suporte a `clip` mantém o
recorte e só perde o sticky. */
overflow:hidden;
overflow:clip;
}
/* Toolbar — parte da página (NÃO sticky). Vive no topo do .main,
border-bottom separa do .content. Filtros e ações de página
ficam DENTRO do .content, não aqui. A toolbar é só breadcrumb +
busca global + ações cross-route (ex: + Novo). */
.tahoe-shell .toolbar{
height:var(--tb-h);
flex-shrink:0;
display:flex;align-items:center;gap:8px;
padding:8px 24px;
background:transparent;
border-bottom:1px solid rgba(10,19,48,0.08);
}
.tahoe-shell .tb-title{font-size:14px;font-weight:600;margin-right:14px;}
.tahoe-shell .tb-breadcrumb{font-size:12px;color:#8C8C99;font-weight:500;}
.tahoe-shell .tb-breadcrumb b{color:#1A1A20;font-weight:600;}
.tahoe-shell .tb-spacer{flex:1;}
.tahoe-shell .tb-group{
display:flex;align-items:center;background:rgba(10,19,48,0.05);
border-radius:var(--pill-radius);padding:3px;gap:1px;
}
.tahoe-shell .tb-btn{
height:30px;min-width:34px;padding:0 10px;border:none;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
border-radius:999px;color:#1A1A20;font-size:12px;font-weight:500;font-family:inherit;
transition:background 120ms ease;
}
.tahoe-shell .tb-btn svg{width:14px;height:14px;}
.tahoe-shell .tb-btn:hover{background:rgba(255,255,255,0.7);}
.tahoe-shell .tb-btn.on{background:#fff;box-shadow:0 1px 2px rgba(10,19,48,0.08);}
.tahoe-shell .tb-btn.solo{background:rgba(10,19,48,0.05);}
.tahoe-shell .tb-btn.solo:hover{background:rgba(10,19,48,0.10);}
.tahoe-shell .tb-btn:active{transform:translateY(1px);}
.tahoe-shell .tb-search{
height:30px;border-radius:999px;background:rgba(10,19,48,0.05);
display:flex;align-items:center;gap:6px;padding:0 12px;color:#8C8C99;font-size:12px;min-width:220px;
}
.tahoe-shell .tb-search svg{width:13px;height:13px;}
.tahoe-shell .tb-search input{border:none;background:transparent;outline:none;flex:1;font-family:inherit;font-size:12px;color:#1A1A20;}
.tahoe-shell .tb-primary{
height:30px;padding:0 14px;border:none;cursor:pointer;
/* v0.11.0: flat — cor sólida, sem gradiente nem sombra de elevação.
A tatilidade vem do :active (afunda), não da profundidade. */
background:#1B2D70;
color:#fff;font-size:12px;font-weight:600;border-radius:999px;
display:inline-flex;align-items:center;gap:6px;font-family:inherit;
transition:background 120ms ease, box-shadow 120ms ease, transform 70ms ease;
}
.tahoe-shell .tb-primary:hover{background:#24378F;}
.tahoe-shell .tb-primary:active{background:#152459;box-shadow:inset 0 2px 4px rgba(0,0,0,0.22);transform:translateY(1px);}
.tahoe-shell .tb-primary svg{width:13px;height:13px;}
.tahoe-shell .greet-cta svg{width:13px;height:13px;}
/* Content — sem overflow:auto. O body é o scroller único.
Padding-bottom generoso pra o último card respirar antes do
final do card .main. */
.tahoe-shell .content{padding:24px 28px 32px;}
/* ─────────── Greeting / page header ─────────── */
.tahoe-shell .greet{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px;gap:24px;flex-wrap:wrap;}
.tahoe-shell .greet h1{
font-family:var(--num-font);font-weight:400;letter-spacing:-0.02em;
font-size:32px;line-height:1.05;margin:0;color:#0A1330;
}
.tahoe-shell .greet h1 .accent{color:#4F6FB5;}
.tahoe-shell .greet h1 .alert{color:#8A5D10;}
.tahoe-shell .greet p{font-size:13px;color:#4B4B55;margin:8px 0 0;}
.tahoe-shell .greet-cta{display:flex;gap:8px;align-items:center;}
.tahoe-shell .ghost-btn{
height:34px;padding:0 14px;border:none;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;
background:#fff;
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.12);
color:#1B2D70;font-size:12px;font-weight:600;border-radius:999px;font-family:inherit;
text-decoration:none;
transition:background 120ms ease, box-shadow 120ms ease, transform 70ms ease;
}
/* v0.11.0: hover CINZA (estilo shadcn) + press que afunda */
.tahoe-shell .ghost-btn:hover{background:#EEF0F4;}
.tahoe-shell .ghost-btn:active{background:#E3E6EC;box-shadow:inset 0 1px 2px rgba(10,19,48,0.10);transform:translateY(1px);}
.tahoe-shell .page-h{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.tahoe-shell .page-h h2{font-family:var(--num-font);font-size:24px;font-weight:400;margin:0;letter-spacing:-0.01em;color:#0A1330;}
.tahoe-shell .page-sub{font-size:13px;color:#4B4B55;margin:0 0 18px;max-width:680px;}
/* ─────────── KPIs ─────────── */
.tahoe-shell .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px;}
.tahoe-shell .kpi{
border-radius:18px;padding:18px;position:relative;overflow:hidden;
background:#fff;
box-shadow:
0 0 0 1px rgba(10,19,48,0.07),
0 1px 2px rgba(10,19,48,0.04),
0 4px 10px rgba(10,19,48,0.04);
}
.tahoe-shell .kpi::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0.85;}
.tahoe-shell .kpi.k1::before{background:radial-gradient(120% 100% at 100% 0%, rgba(173,213,235,0.55) 0%, rgba(173,213,235,0) 60%);}
.tahoe-shell .kpi.k2::before{background:radial-gradient(120% 100% at 100% 0%, rgba(47,140,94,0.18) 0%, rgba(47,140,94,0) 60%);}
.tahoe-shell .kpi.k3::before{background:radial-gradient(120% 100% at 100% 0%, rgba(126,186,220,0.50) 0%, rgba(126,186,220,0) 60%);}
.tahoe-shell .kpi.k4::before{background:radial-gradient(120% 100% at 100% 0%, rgba(200,136,26,0.22) 0%, rgba(200,136,26,0) 60%);}
.tahoe-shell .kpi > *{position:relative;}
.tahoe-shell .kpi .lbl{font-size:11px;color:#6C6C78;font-weight:500;display:flex;justify-content:space-between;align-items:center;}
.tahoe-shell .kpi .lbl svg{width:14px;height:14px;color:#8C8C99;}
.tahoe-shell .kpi .val{font-family:var(--num-font);font-size:30px;font-weight:400;color:#0A1330;margin-top:6px;letter-spacing:-0.01em;line-height:1;}
.tahoe-shell .kpi .sub{font-size:11px;color:#6C6C78;margin-top:6px;}
.tahoe-shell .kpi .delta{font-size:11px;color:#2F8C5E;margin-top:6px;font-weight:500;display:flex;align-items:center;gap:4px;}
.tahoe-shell .kpi .delta.neg{color:#8C2828;}
.tahoe-shell .kpi .delta.warn{color:#8A5D10;}
.tahoe-shell .kpi .delta svg{width:12px;height:12px;}
/* Mini KPIs (smaller, for detail pages) */
.tahoe-shell .mini-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px;}
/* Variante de 5 colunas — mesma classe base, um modificador, pra continuar
respeitando o colapso responsivo abaixo (inline style não respeitaria). */
.tahoe-shell .mini-kpis.mini-kpis-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.tahoe-shell .mini-kpi{
padding:14px;border-radius:14px;background:#fff;
box-shadow:
0 0 0 1px rgba(10,19,48,0.07),
0 1px 2px rgba(10,19,48,0.04),
0 4px 10px rgba(10,19,48,0.04);
}
.tahoe-shell .mini-kpi .lbl{font-size:11px;color:#6C6C78;}
.tahoe-shell .mini-kpi .val{font-family:var(--num-font);font-size:22px;font-weight:400;color:#0A1330;margin-top:4px;letter-spacing:-0.01em;line-height:1;}
.tahoe-shell .mini-kpi .delta{font-size:11px;color:#1F6B46;margin-top:4px;font-weight:500;}
.tahoe-shell .mini-kpi .delta.neg{color:#8C2828;}
.tahoe-shell .mini-kpi .delta.warn{color:#8A5D10;}
/* ─────────── Layout grids ─────────── */
.tahoe-shell .row2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:14px;}
.tahoe-shell .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.tahoe-shell .card{
border-radius:18px;padding:18px;background:#fff;
box-shadow:
0 0 0 1px rgba(10,19,48,0.07),
0 1px 2px rgba(10,19,48,0.04),
0 4px 10px rgba(10,19,48,0.04);
}
.tahoe-shell .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.tahoe-shell .card-h h3{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px;}
.tahoe-shell .card-h .pill{font-size:11px;}
/* Links de texto do header (ex.: "Tudo →"). Exclui âncoras que são
botões (.tb-primary/.ghost-btn) pra não sobrescrever a cor deles. */
.tahoe-shell .card-h a:not(.tb-primary):not(.ghost-btn){font-size:12px;color:#4F6FB5;font-weight:500;cursor:pointer;}
/* ─────────── Pill badges ───────────
Moved to components/pills.css (unscoped) in 0.3.0. The new pills are
global atomic utilities composed from feedback tokens (--success-soft
etc). Apps already wrapping content in .tahoe-shell continue to work
because the unscoped classes still apply inside the wrapper.
Import via: @import "@semog-tech/tahoe/pills"; */
/* ─────────── Carteira list ─────────── */
.tahoe-shell .carteira-row{
display:grid;grid-template-columns: 1.5fr 1fr 1fr 0.9fr 0.6fr 80px;align-items:center;gap:12px;
padding:12px 4px;border-top:0.5px solid var(--hairline-row);font-size:13px;
}
.tahoe-shell .carteira-row.header{
border-top:none;font-size:11px;color:#6C6C78;font-weight:500;
padding:6px 4px;
}
.tahoe-shell .condo{display:flex;align-items:center;gap:10px;min-width:0;}
.tahoe-shell .condo-mark{
width:34px;height:34px;border-radius:10px;flex-shrink:0;
background:linear-gradient(135deg, rgba(173,213,235,0.6), rgba(126,186,220,0.4));
color:#1B2D70;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;
}
.tahoe-shell .condo-name{font-weight:500;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tahoe-shell .condo-sub{font-size:11px;color:#6C6C78;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tahoe-shell .num{font-family:var(--num-font);font-size:14px;font-weight:500;color:#0A1330;}
.tahoe-shell .inadi{display:flex;align-items:center;gap:6px;}
.tahoe-shell .inadi-bar{flex:1;height:5px;background:rgba(10,19,48,0.08);border-radius:999px;overflow:hidden;max-width:60px;}
.tahoe-shell .inadi-bar > i{display:block;height:100%;border-radius:999px;}
.tahoe-shell .row-action{
background:transparent;border:none;cursor:pointer;
color:#4F6FB5;font-size:12px;font-weight:500;padding:0;font-family:inherit;
}
.tahoe-shell .row-action:hover{text-decoration:underline;}
.tahoe-shell .row-action svg{width:12px;height:12px;}
/* ─────────── Pipeline funnel ─────────── */
.tahoe-shell .funnel{display:flex;flex-direction:column;gap:8px;}
.tahoe-shell .funnel-step{display:flex;align-items:center;gap:12px;}
.tahoe-shell .funnel-bar{
flex:1;height:32px;border-radius:10px;display:flex;align-items:center;
padding:0 12px;color:#fff;font-size:12px;font-weight:600;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
}
.tahoe-shell .funnel-meta{font-size:12px;color:#4B4B55;width:80px;text-align:right;font-family:var(--num-font);}
.tahoe-shell .funnel-step .step-num{
width:22px;height:22px;border-radius:999px;background:rgba(10,19,48,0.06);
color:#6C6C78;font-size:11px;font-weight:600;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
/* ─────────── Activity feed ─────────── */
.tahoe-shell .feed-row{
display:flex;align-items:start;gap:10px;
padding:8px 0;border-top:0.5px solid var(--hairline-row);
}
.tahoe-shell .feed-row:first-of-type{border-top:none;}
.tahoe-shell .feed-icon{
width:28px;height:28px;border-radius:9px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.tahoe-shell .feed-icon svg{width:14px;height:14px;}
.tahoe-shell .feed-text{font-size:12px;line-height:1.4;}
.tahoe-shell .feed-text b{font-weight:600;}
.tahoe-shell .feed-text small{color:#6C6C78;font-size:11px;display:block;margin-top:1px;}
/* ─────────── Document row & integration primitives ───────────
Linha de documento com card-shape: ícone + nome + status + ações.
Diferente da .feed-row (texto plano) pelo treatment de card individual
com border-radius e hairline. Usado em fluxos de upload/import (prestação,
onboarding, condo) onde cada documento é uma unidade discreta com
próprio estado (pendente / uploaded / warn).
.ext-link → ícone pequeno de seta externa ao lado de um valor que aponta
pro relatório correspondente em sistema externo (ERP, Drive, etc).
.erp-session → chip de status da extensão Chrome que captura token
Superlógica. Variante .inactive quando sessão expira.
─────────────────────────────────────────────────────────────── */
.tahoe-shell .doc-row{
display:flex;align-items:center;gap:14px;
padding:12px 14px;border-radius:14px;
background:#fff;
box-shadow:0 0 0 1px rgba(10,19,48,0.07);
margin-top:8px;
}
.tahoe-shell .doc-row:first-child{margin-top:0;}
.tahoe-shell .doc-row .doc-icon{
width:32px;height:32px;border-radius:9px;flex-shrink:0;
background:rgba(10,19,48,0.04);color:#6C6C78;
display:inline-flex;align-items:center;justify-content:center;
}
.tahoe-shell .doc-row .doc-icon svg{width:16px;height:16px;}
.tahoe-shell .doc-row .doc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.tahoe-shell .doc-row .doc-name{
font-size:13px;font-weight:600;color:#0A1330;
display:inline-flex;align-items:center;gap:4px;
}
.tahoe-shell .doc-row .doc-meta{font-size:11px;color:#6C6C78;}
.tahoe-shell .doc-row .doc-actions{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.tahoe-shell .doc-row.uploaded .doc-icon{background:rgba(47,140,94,0.14);color:#1F6B46;}
.tahoe-shell .doc-row.uploaded .doc-meta{color:#1F6B46;}
.tahoe-shell .doc-row.warn{background:rgba(200,136,26,0.08);box-shadow:inset 0 0 0 0.5px rgba(200,136,26,0.30);}
.tahoe-shell .doc-row.warn .doc-icon{background:rgba(200,136,26,0.18);color:#8A5D10;}
.tahoe-shell .doc-row.warn .doc-name{color:#8A5D10;}
.tahoe-shell .doc-row.add-row{background:rgba(10,19,48,0.02);box-shadow:inset 0 0 0 1px dashed rgba(10,19,48,0.12);}
.tahoe-shell .doc-row.add-row .doc-icon{background:transparent;}
.tahoe-shell .doc-row.add-row input{
flex:1;border:none;background:transparent;font-size:13px;outline:none;
font-family:inherit;color:#1A1A20;padding:0;
}
.tahoe-shell .doc-row.add-row input::placeholder{color:#8C8C99;}
.tahoe-shell .ext-link{
display:inline-flex;align-items:center;justify-content:center;
color:#8C8C99;margin-left:2px;
border-bottom:1px solid transparent;
}
.tahoe-shell .ext-link:hover{color:#4F6FB5;}
.tahoe-shell .ext-link svg{width:12px;height:12px;}
.tahoe-shell .erp-session{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px 3px 8px;border-radius:999px;
font-size:10.5px;font-weight:500;
background:rgba(47,140,94,0.10);color:#1F6B46;
box-shadow:inset 0 0 0 0.5px rgba(47,140,94,0.22);
}
.tahoe-shell .erp-session .dot{
width:6px;height:6px;border-radius:999px;background:#2F8C5E;
box-shadow:0 0 0 2px rgba(47,140,94,0.18);
}
.tahoe-shell .erp-session.inactive{
background:rgba(10,19,48,0.05);color:#6C6C78;
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.10);
}
.tahoe-shell .erp-session.inactive .dot{background:#BCBCC7;box-shadow:none;}
.tahoe-shell .erp-session a{color:#4F6FB5;text-decoration:none;}
/* ─────────── Date block / upcoming ─────────── */
.tahoe-shell .date-block{
width:50px;height:58px;border-radius:12px;flex-shrink:0;
background:linear-gradient(180deg, #EEF1FA 0%, #D6DEF1 100%);
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.08);
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tahoe-shell .date-block .d{font-family:var(--num-font);font-size:20px;font-weight:400;color:#1B2D70;line-height:1;}
.tahoe-shell .date-block .m{font-size:9px;color:#6C6C78;text-transform:uppercase;margin-top:2px;letter-spacing:0.04em;}
.tahoe-shell .upcoming-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:0.5px solid var(--hairline-row);}
.tahoe-shell .upcoming-row:first-of-type{border-top:none;}
/* ─────────── Tables ─────────── */
.tahoe-shell .filters{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.tahoe-shell .seg{display:inline-flex;background:rgba(10,19,48,0.05);border-radius:999px;padding:3px;gap:1px;}
.tahoe-shell .seg button{
height:28px;padding:0 14px;border:none;background:transparent;cursor:pointer;
border-radius:999px;font-size:12px;font-weight:500;font-family:inherit;color:#1A1A20;
transition:background 120ms ease, box-shadow 120ms ease, transform 70ms ease;
}
/* v0.11.0: abas inativas reagem ao hover; press no clique */
.tahoe-shell .seg button:not(.on):hover{background:rgba(10,19,48,0.06);}
.tahoe-shell .seg button:active{transform:translateY(1px);}
.tahoe-shell .seg button.on{background:#fff;box-shadow:0 1px 2px rgba(10,19,48,0.08);}
/* ═══════════ v0.11.0 · Search escopado + filtros (lista) ═══════════
Search da PÁGINA (filtra a lista atual) — distinto do .tb-search
global da topbar. Filtros secundários como chip-dropdown. O JS de
comportamento é opcional: kits/admin/interactions.js. */
/* Search escopado */
.tahoe-shell .list-search{
height:34px;border-radius:999px;background:rgba(10,19,48,0.05);
display:flex;align-items:center;gap:7px;padding:0 13px;color:#8C8C99;
min-width:230px;transition:box-shadow 120ms ease, background 120ms ease, width 200ms cubic-bezier(.22,.61,.36,1);
}
.tahoe-shell .list-search:focus-within{
background:#fff;box-shadow:inset 0 0 0 1px rgba(79,111,181,0.55), 0 2px 6px rgba(10,19,48,0.06);
}
.tahoe-shell .list-search svg{width:14px;height:14px;}
.tahoe-shell .list-search input{
border:none;background:transparent;outline:none;flex:1;
font-family:inherit;font-size:12.5px;color:#1A1A20;
}
/* Variante retrátil: vira só a lupa; expande no .open (via interactions.js).
Recolhido zera gap/flex pra a lupa ficar centralizada de verdade. */
.tahoe-shell .list-search.collapsible{
min-width:34px;width:34px;padding:0;gap:0;justify-content:center;cursor:pointer;overflow:hidden;
}
.tahoe-shell .list-search.collapsible input{flex:0 0 0;width:0;opacity:0;transition:opacity 140ms ease;}
.tahoe-shell .list-search.collapsible.open{
width:240px;min-width:240px;padding:0 13px;gap:7px;justify-content:flex-start;cursor:text;
}
.tahoe-shell .list-search.collapsible.open input{flex:1;opacity:1;}
/* Chip-dropdown de filtro */
.tahoe-shell .filter{position:relative;display:inline-flex;}
.tahoe-shell .filter-chip{
height:34px;padding:0 11px 0 13px;border:none;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;
background:#fff;box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.12);
color:#1B2D70;font-size:12px;font-weight:600;border-radius:999px;font-family:inherit;
transition:background 120ms ease, box-shadow 120ms ease, transform 70ms ease;
}
.tahoe-shell .filter-chip:hover{background:#EEF0F4;}
.tahoe-shell .filter-chip:active{box-shadow:inset 0 1px 2px rgba(10,19,48,0.10);transform:translateY(1px);}
.tahoe-shell .filter-chip .caret{width:13px;height:13px;opacity:.55;transition:transform 140ms ease;}
.tahoe-shell .filter.open .filter-chip{background:#fff;box-shadow:inset 0 0 0 1px rgba(79,111,181,0.45);}
.tahoe-shell .filter.open .filter-chip .caret{transform:rotate(180deg);}
.tahoe-shell .filter-chip.active{background:rgba(79,111,181,0.12);box-shadow:inset 0 0 0 1px rgba(79,111,181,0.30);}
.tahoe-shell .filter-chip .badge{
min-width:17px;height:17px;padding:0 5px;border-radius:999px;
background:#1B2D70;color:#fff;font-size:10.5px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;font-family:var(--num-font);
}
/* Popover do filtro */
.tahoe-shell .filter-pop{
position:absolute;top:calc(100% + 6px);left:0;z-index:40;
min-width:212px;background:#fff;border-radius:12px;padding:6px;
box-shadow:0 12px 30px rgba(10,19,48,0.16), 0 0 0 0.5px rgba(10,19,48,0.10);
opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;
transition:opacity 120ms ease, transform 120ms ease;transform-origin:top left;
}
.tahoe-shell .filter.open .filter-pop{opacity:1;transform:none;pointer-events:auto;}
/* v0.13.1: alinha o popover pela direita do chip — evita vazar pra fora da
tela em filtros colados na borda direita. interactions.js aplica `.align-right`
automaticamente quando detecta overflow; também pode ser forçado no markup. */
.tahoe-shell .filter.align-right .filter-pop{left:auto;right:0;transform-origin:top right;}
.tahoe-shell .filter-pop .pop-h{
font-size:10.5px;font-weight:600;color:#8C8C99;text-transform:uppercase;
letter-spacing:.04em;padding:6px 8px 4px;
}
.tahoe-shell .opt{
display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;
cursor:pointer;font-size:12.5px;color:#1A1A20;user-select:none;
}
.tahoe-shell .opt:hover{background:rgba(10,19,48,0.045);}
.tahoe-shell .opt input{position:absolute;opacity:0;pointer-events:none;}
.tahoe-shell .opt .box{
width:16px;height:16px;border-radius:5px;flex-shrink:0;
box-shadow:inset 0 0 0 1.5px rgba(10,19,48,0.22);
display:inline-flex;align-items:center;justify-content:center;transition:all 100ms ease;
}
.tahoe-shell .opt input[type=radio] + .box{border-radius:999px;}
.tahoe-shell .opt .box svg{width:11px;height:11px;color:#fff;opacity:0;}
.tahoe-shell .opt input:checked + .box{background:#1B2D70;box-shadow:inset 0 0 0 1.5px #1B2D70;}
.tahoe-shell .opt input:checked + .box svg{opacity:1;}
.tahoe-shell .opt .opt-label{flex:1;}
.tahoe-shell .opt .opt-count{font-size:11px;color:#A0A0AC;font-family:var(--num-font);}
.tahoe-shell .filter-pop .pop-f{
display:flex;justify-content:space-between;align-items:center;
padding:6px 8px 2px;margin-top:4px;border-top:0.5px solid rgba(10,19,48,0.08);
}
.tahoe-shell .pop-f a{font-size:11.5px;color:#4F6FB5;font-weight:600;cursor:pointer;}
/* Linha de filtros ativos (removíveis) — escondida até ter filtro */
.tahoe-shell .active-filters{display:none;align-items:center;gap:7px;flex-wrap:wrap;margin:-4px 0 16px;}
.tahoe-shell .active-filters.show{display:flex;}
.tahoe-shell .active-filters .lbl{font-size:11.5px;color:#8C8C99;font-weight:500;margin-right:2px;}
.tahoe-shell .achip{
height:26px;padding:0 6px 0 11px;border:none;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;
background:rgba(79,111,181,0.10);color:#1B2D70;
font-size:11.5px;font-weight:600;border-radius:999px;font-family:inherit;
}
.tahoe-shell .achip .x{
width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
background:rgba(27,45,112,0.14);font-size:11px;line-height:1;
}
.tahoe-shell .achip:hover .x{background:rgba(27,45,112,0.26);}
.tahoe-shell .clear-all{font-size:11.5px;color:#8C8C99;font-weight:600;cursor:pointer;margin-left:2px;}
.tahoe-shell .clear-all:hover{color:#B33A3A;}
.tahoe-shell table.tbl{width:100%;border-collapse:collapse;}
.tahoe-shell .tbl th{
text-align:left;font-size:11px;font-weight:500;color:#6C6C78;
padding:8px 12px;border-bottom:0.5px solid var(--hairline-section);
}
/* v0.11.0: cabeçalho ordenável — clique alterna asc/desc (interactions.js) */
.tahoe-shell .tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color 120ms ease;}
.tahoe-shell .tbl th.sortable:hover{color:#1B2D70;}
.tahoe-shell .tbl th.sortable .sort-ic{
width:12px;height:12px;display:inline-block;vertical-align:-2px;margin-left:3px;
opacity:0;transition:opacity 120ms ease, transform 140ms ease;
}
.tahoe-shell .tbl th.sortable:hover .sort-ic{opacity:.4;}
.tahoe-shell .tbl th.sortable.asc,
.tahoe-shell .tbl th.sortable.desc{color:#1B2D70;font-weight:600;}
.tahoe-shell .tbl th.sortable.asc .sort-ic,
.tahoe-shell .tbl th.sortable.desc .sort-ic{opacity:1;color:#4F6FB5;}
.tahoe-shell .tbl th.sortable.desc .sort-ic{transform:rotate(180deg);}
.tahoe-shell .tbl td{
font-size:13px;color:#1A1A20;padding:11px 12px;
border-bottom:0.5px solid var(--hairline-row);
}
.tahoe-shell .tbl tr:hover td{background:rgba(173,213,235,0.10);}
.tahoe-shell .tbl td .num{font-family:var(--num-font);font-size:14px;font-weight:500;}
.tahoe-shell .tbl td.right{text-align:right;}
/* ─────────── Pipeline deal cards ─────────── */
.tahoe-shell .deal-card{
border-radius:14px;padding:14px;background:#fff;
box-shadow:
0 0 0 1px rgba(10,19,48,0.07),
0 1px 2px rgba(10,19,48,0.04),
0 4px 10px rgba(10,19,48,0.04);
display:flex;flex-direction:column;gap:8px;
}
.tahoe-shell .deal-card .h{display:flex;align-items:center;justify-content:space-between;}
.tahoe-shell .deal-card .h .v{font-family:var(--num-font);font-size:18px;color:#1B2D70;}
.tahoe-shell .deal-card .name{font-size:13px;font-weight:600;}
.tahoe-shell .deal-card .meta{font-size:11px;color:#6C6C78;}
.tahoe-shell .col-h{font-size:11px;font-weight:500;color:#6C6C78;display:flex;justify-content:space-between;align-items:center;padding:0 4px 6px;}
.tahoe-shell .col-h .count{background:rgba(10,19,48,0.06);padding:1px 8px;border-radius:999px;color:#1A1A20;font-weight:600;}
/* ─────────── Quote callout ─────────── */
.tahoe-shell .quote{
margin-top:24px;padding:18px 22px;border-radius:18px;
background:linear-gradient(135deg, rgba(173,213,235,0.25), rgba(255,255,255,0) 80%);
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.06);
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.tahoe-shell .quote p{font-family:var(--num-font);font-size:18px;color:#1B2D70;margin:0;font-weight:400;letter-spacing:-0.01em;}
.tahoe-shell .quote small{font-size:11px;color:#6C6C78;}
/* ─────────── Detail pages ─────────── */
.tahoe-shell .detail-header{
display:flex;align-items:center;gap:18px;
padding:8px 0 18px;margin-bottom:18px;
border-bottom:0.5px solid var(--hairline-section);
}
.tahoe-shell .detail-mark{
width:54px;height:54px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg, rgba(173,213,235,0.7), rgba(126,186,220,0.5));
color:#1B2D70;display:flex;align-items:center;justify-content:center;
font-weight:600;font-size:18px;font-family:var(--num-font);
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.06);
}
.tahoe-shell .detail-mark.person{border-radius:999px;}
.tahoe-shell .detail-title{font-family:var(--num-font);font-size:26px;font-weight:400;letter-spacing:-0.01em;color:#0A1330;margin:0;line-height:1.1;}
.tahoe-shell .detail-meta{font-size:12px;color:#6C6C78;margin-top:4px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tahoe-shell .detail-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
/* Author / cross-reference links que vivem dentro de conteúdo textual
(.timeline, .feed-row, .upcoming-row, .tbl, .tb-breadcrumb, .kv, .quote).
Default = herdar cor do texto + sem sublinhado. Hover ganha sublinhado
sutil pra confirmar clicabilidade. Sem isso, browser pinta de azul-roxo
e sublinhado, destoando do resto do shell. */
.tahoe-shell .timeline a,
.tahoe-shell .feed-row a,
.tahoe-shell .upcoming-row a,
.tahoe-shell .tbl a,
.tahoe-shell .tb-breadcrumb a,
.tahoe-shell .kv a,
.tahoe-shell .quote a,
.tahoe-shell .detail-meta a{
color:inherit;text-decoration:none;font-weight:inherit;
border-bottom:1px solid transparent;
transition:border-color 120ms ease;
}
.tahoe-shell .timeline a:hover,
.tahoe-shell .feed-row a:hover,
.tahoe-shell .upcoming-row a:hover,
.tahoe-shell .tbl a:hover,
.tahoe-shell .tb-breadcrumb a:hover,
.tahoe-shell .kv a:hover,
.tahoe-shell .quote a:hover,
.tahoe-shell .detail-meta a:hover{
border-bottom-color:rgba(79,111,181,0.45);
}
/* Owner inline avatar — link ao lado do .detail-title (autor responsável
pela entidade). NÃO é pill; o header já carrega 3-4. Aparece em
shell-condo / shell-cliente / shell-proposta / shell-onboarding-detalhe. */
.tahoe-shell .owner-link{
display:inline-flex;align-items:center;gap:6px;
margin-left:10px;padding:2px 8px 2px 2px;border-radius:999px;
font-size:12px;font-weight:500;color:#4F6FB5;text-decoration:none;
background:rgba(173,213,235,0.14);
box-shadow:inset 0 0 0 0.5px rgba(79,111,181,0.18);
transition:background 120ms ease;
}
.tahoe-shell .owner-link:hover{background:rgba(173,213,235,0.26);}
.tahoe-shell .owner-avatar{
width:20px;height:20px;border-radius:999px;
background:linear-gradient(135deg,rgba(173,213,235,0.7),rgba(126,186,220,0.5));
color:#1B2D70;display:inline-flex;align-items:center;justify-content:center;
font-family:var(--num-font);font-size:10px;font-weight:500;
box-shadow:inset 0 0 0 0.5px rgba(27,45,112,0.10);
}
.tahoe-shell .back-link{
background:rgba(10,19,48,0.05);color:#1B2D70;
height:28px;padding:0 12px;border:none;cursor:pointer;
border-radius:999px;font-size:12px;font-weight:500;font-family:inherit;
display:inline-flex;align-items:center;gap:6px;margin-right:auto;
/* respiro do que vem abaixo (steps do wizard, detail-header, doc-frame…): sem isso
o back-link encostava no elemento seguinte, que não tem margem-topo própria. */
margin-bottom:14px;
}
.tahoe-shell .back-link:hover{background:rgba(10,19,48,0.10);}
.tahoe-shell .back-link svg{width:12px;height:12px;}
/* ─────────── Tabs (segmented, inline) ─────────── */
.tahoe-shell .tabs{display:flex;gap:1px;background:rgba(10,19,48,0.05);border-radius:999px;padding:3px;margin-bottom:18px;width:fit-content;}
.tahoe-shell .tabs button{
height:30px;padding:0 14px;border:none;background:transparent;cursor:pointer;
border-radius:999px;font-size:12px;font-weight:500;font-family:inherit;color:#4B4B55;
}
.tahoe-shell .tabs button.on{background:#fff;color:#0A1330;box-shadow:0 1px 2px rgba(10,19,48,0.08);}
.tahoe-shell .tabs button .count{
margin-left:6px;background:rgba(10,19,48,0.08);color:#4B4B55;
font-family:var(--num-font);font-size:11px;font-weight:600;
padding:0 6px;border-radius:999px;line-height:1.6;
}
.tahoe-shell .tabs button.on .count{background:rgba(27,45,112,0.12);color:#1B2D70;}
/* Painel de aba (usado no detalhe do lead): só o ativo aparece. */
.tahoe-shell .tab-panel[hidden]{display:none;}
/* ─────────── Timeline ─────────── */
.tahoe-shell .timeline{position:relative;padding-left:18px;}
.tahoe-shell .timeline::before{
content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
background:rgba(10,19,48,0.10);
}
.tahoe-shell .timeline-item{position:relative;padding:6px 0 16px;}
.tahoe-shell .timeline-item:last-child{padding-bottom:0;}
.tahoe-shell .timeline-dot{
position:absolute;left:-18px;top:8px;width:13px;height:13px;border-radius:999px;
background:#fff;box-shadow:0 0 0 1.5px #4F6FB5, inset 0 0 0 3px #fff;
}
.tahoe-shell .timeline-item.ok .timeline-dot{box-shadow:0 0 0 1.5px #2F8C5E, inset 0 0 0 3px #fff;}
.tahoe-shell .timeline-item.warn .timeline-dot{box-shadow:0 0 0 1.5px #C8881A, inset 0 0 0 3px #fff;}
.tahoe-shell .timeline-time{font-size:11px;color:#6C6C78;}
.tahoe-shell .timeline-title{font-size:13px;font-weight:500;margin-top:2px;}
.tahoe-shell .timeline-sub{font-size:12px;color:#4B4B55;margin-top:2px;}
/* ─────────── Bar chart ─────────── */
.tahoe-shell .bars{display:flex;align-items:end;gap:6px;height:140px;padding:8px 0;}
.tahoe-shell .bar{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7EBADC,#1B2D70);min-height:6px;position:relative;}
.tahoe-shell .bar.fade{background:linear-gradient(180deg,rgba(126,186,220,0.4),rgba(27,45,112,0.4));}
.tahoe-shell .bar-labels{display:flex;gap:6px;font-size:10px;color:#6C6C78;}
.tahoe-shell .bar-labels > span{flex:1;text-align:center;}
/* ─────────── Donut / stacked bars helpers ─────────── */
.tahoe-shell .stack{height:8px;border-radius:999px;overflow:hidden;display:flex;background:rgba(10,19,48,0.06);margin:8px 0;}
.tahoe-shell .stack i{display:block;height:100%;}
.tahoe-shell .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#4B4B55;}
.tahoe-shell .legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle;}
/* ─────────── Detail two-column ─────────── */
.tahoe-shell .det2{display:grid;grid-template-columns:2fr 1fr;gap:14px;}
.tahoe-shell .det3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
/* ─────────── Inline key/value list ─────────── */
.tahoe-shell .kv{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;font-size:13px;}
.tahoe-shell .kv dt{color:#6C6C78;font-weight:400;font-size:12px;align-self:center;}
.tahoe-shell .kv dd{margin:0;font-weight:500;color:#1A1A20;}
/* ─────────── Pricing card ─────────── */
.tahoe-shell .price-card{
border-radius:18px;padding:22px;
background:linear-gradient(140deg, rgba(173,213,235,0.30) 0%, rgba(255,255,255,0.5) 60%);
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.tahoe-shell .price-card .mrr{font-family:var(--num-font);font-size:42px;font-weight:400;color:#0A1330;letter-spacing:-0.02em;line-height:1;}
.tahoe-shell .price-card .mrr small{font-size:14px;color:#6C6C78;margin-left:6px;}
.tahoe-shell .price-card .breakdown{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:12px;}
.tahoe-shell .price-card .breakdown .k{color:#4B4B55;}
.tahoe-shell .price-card .breakdown .v{font-family:var(--num-font);color:#1A1A20;font-weight:500;text-align:right;}
.tahoe-shell .price-card .breakdown .sep{grid-column:1/-1;border-top:0.5px solid rgba(10,19,48,0.10);margin:6px 0;}
/* ─────────── Form field ─────────── */
.tahoe-shell .field{display:flex;flex-direction:column;gap:6px;}
.tahoe-shell .field > label{font-size:12px;font-weight:500;color:#4B4B55;}
.tahoe-shell .field input, .tahoe-shell .field select{
height:34px;padding:0 12px;border-radius:10px;
border:0.5px solid rgba(10,19,48,0.12);
background:#fff;font-family:inherit;font-size:13px;color:#1A1A20;outline:none;
transition:border-color 140ms ease, box-shadow 140ms ease;
}
.tahoe-shell .field input:focus, .tahoe-shell .field select:focus{border-color:#4F6FB5;box-shadow:0 0 0 3px rgba(173,213,235,0.5);}
.tahoe-shell .field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
/* ─────────── Tier / pricing selectors ─────────── */
.tahoe-shell .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tahoe-shell .tier{
border-radius:14px;padding:14px;cursor:pointer;
background:#fff;box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.10);
transition:all 160ms ease;
}
.tahoe-shell .tier:hover{box-shadow:inset 0 0 0 0.5px rgba(79,111,181,0.40);}
.tahoe-shell .tier.on{
background:linear-gradient(180deg, rgba(126,186,220,0.20), rgba(255,255,255,0.7));
box-shadow:inset 0 0 0 1.5px #1B2D70, 0 4px 12px rgba(27,45,112,0.10);
}
.tahoe-shell .tier .h{font-size:13px;font-weight:600;color:#0A1330;display:flex;align-items:center;justify-content:space-between;}
.tahoe-shell .tier .h .tick{color:#2F8C5E;display:inline-flex;opacity:0;transition:opacity 140ms ease;}
.tahoe-shell .tier.on .h .tick{opacity:1;}
.tahoe-shell .tier .pv{font-family:var(--num-font);font-size:20px;color:#1B2D70;margin-top:6px;}
.tahoe-shell .tier .s{font-size:11px;color:#6C6C78;margin-top:2px;}
/* ─────────── Checklist row ─────────── */
.tahoe-shell .check-row{
display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;
background:#fff;box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.06);margin-bottom:6px;
}
.tahoe-shell .check-row:hover{background:rgba(173,213,235,0.10);}
.tahoe-shell .check-row.on{background:linear-gradient(135deg, rgba(173,213,235,0.20), rgba(255,255,255,0.5)); box-shadow:inset 0 0 0 1px rgba(27,45,112,0.18);}
.tahoe-shell .check-box{
width:18px;height:18px;border-radius:6px;flex-shrink:0;
background:#fff;box-shadow:inset 0 0 0 1px rgba(10,19,48,0.20);
display:flex;align-items:center;justify-content:center;color:#fff;
}
.tahoe-shell .check-box svg{width:11px;height:11px;}
.tahoe-shell .check-row.on .check-box{background:#1B2D70;box-shadow:inset 0 0 0 1px #1B2D70;}
.tahoe-shell .check-title{font-size:13px;font-weight:500;line-height:1.2;}
.tahoe-shell .check-sub{font-size:11px;color:#6C6C78;margin-top:2px;}
.tahoe-shell .check-val{
font-family:var(--num-font);font-size:14px;color:#1B2D70;
display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;
}
.tahoe-shell .check-val .eff{font-size:13px;color:#2F8C5E;}
.tahoe-shell .check-val .base.is-struck{color:#8C8C99;text-decoration:line-through;font-size:11.5px;}
/* ─── Desconto por serviço (R$ ou %) — wizard de proposta ───
Aparece só quando o serviço está marcado (.check-row.on). Toggle
segmentado R$/% + input; recalcula o MRR ao vivo (JS no shell). */
.tahoe-shell .svc-disc{display:none;align-items:center;gap:8px;margin-top:8px;}
.tahoe-shell .check-row.on .svc-disc{display:flex;}
.tahoe-shell .svc-disc .lbl{font-size:11px;color:#6C6C78;font-weight:500;}
.tahoe-shell .disc-seg{
display:inline-flex;border-radius:8px;overflow:hidden;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,19,48,0.12);
}
.tahoe-shell .disc-seg button{
border:none;background:transparent;cursor:pointer;
font-family:var(--num-font);font-size:11px;font-weight:600;color:#6C6C78;
padding:3px 10px;line-height:1.5;
}
.tahoe-shell .disc-seg button + button{box-shadow:inset 1px 0 0 rgba(10,19,48,0.10);}
.tahoe-shell .disc-seg button.on{background:linear-gradient(135deg,#2F4FA0,#1B2D70);color:#fff;}
.tahoe-shell .disc-input{
width:66px;height:26px;padding:0 8px;border:none;border-radius:8px;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,19,48,0.12);
font-family:var(--num-font);font-size:12.5px;color:#1A1A20;text-align:right;outline:none;
}
.tahoe-shell .disc-input:focus{box-shadow:inset 0 0 0 1px #4F6FB5, 0 0 0 3px rgba(173,213,235,0.45);}
/* ─────────── Wizard steps ─────────── */
.tahoe-shell .steps{display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.tahoe-shell .step{
flex:1;display:flex;align-items:center;gap:8px;
padding:8px 12px;border-radius:999px;
background:rgba(10,19,48,0.05);font-size:12px;color:#6C6C78;
}
.tahoe-shell .step.done{background:rgba(47,140,94,0.14);color:#1F6B46;}
.tahoe-shell .step.current{background:linear-gradient(180deg,#2F4FA0,#1B2D70);color:#fff;box-shadow:0 1px 2px rgba(10,19,48,0.10);}
.tahoe-shell .step .num{width:18px;height:18px;border-radius:999px;background:rgba(10,19,48,0.10);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:inherit;flex-shrink:0;}
.tahoe-shell .step.current .num{background:rgba(255,255,255,0.25);}
.tahoe-shell .step.done .num{background:rgba(47,140,94,0.25);}
/* ─────────── Onboarding checklist ─────────── */
.tahoe-shell .onb-progress{
height:8px;border-radius:999px;background:rgba(10,19,48,0.06);
overflow:hidden;flex:1;max-width:240px;
}
.tahoe-shell .onb-progress > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7EBADC,#1B2D70);transition:width 200ms ease;}
.tahoe-shell .onb-section{margin-bottom:18px;}
.tahoe-shell .onb-section-h{
display:flex;align-items:center;gap:10px;margin-bottom:8px;
font-size:13px;font-weight:600;color:#0A1330;
}
.tahoe-shell .onb-section-h .pill{font-size:11px;}
.tahoe-shell .onb-item{
display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
background:#fff;box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.06);margin-bottom:6px;
cursor:pointer;transition:background 120ms ease;
}
.tahoe-shell .onb-item:hover{background:rgba(173,213,235,0.10);}
.tahoe-shell .onb-item.done{background:rgba(47,140,94,0.07);}
.tahoe-shell .onb-item.late{background:rgba(179,58,58,0.06);}
.tahoe-shell .onb-tick{
width:22px;height:22px;border-radius:999px;flex-shrink:0;
background:#fff;box-shadow:inset 0 0 0 1.5px rgba(10,19,48,0.20);
display:flex;align-items:center;justify-content:center;color:#fff;
}
.tahoe-shell .onb-tick svg{width:12px;height:12px;}
.tahoe-shell .onb-item.done .onb-tick{background:#2F8C5E;box-shadow:inset 0 0 0 1.5px #2F8C5E;}
.tahoe-shell .onb-item.late .onb-tick{box-shadow:inset 0 0 0 1.5px #B33A3A;color:#B33A3A;}
.tahoe-shell .onb-item.late .onb-tick svg{display:none;}
.tahoe-shell .onb-item.late .onb-tick::after{content:"!";font-family:var(--num-font);font-size:14px;font-weight:500;color:#B33A3A;}
.tahoe-shell .onb-item .t{font-size:13px;font-weight:500;line-height:1.2;}
.tahoe-shell .onb-item.done .t{color:#4B4B55;}
.tahoe-shell .onb-item .s{font-size:11px;color:#6C6C78;margin-top:2px;}
/* ── Itens de checklist enriquecidos ──────────────────────────────
Variações do .onb-item por natureza da etapa:
- .onb-rich → item que carrega um controle/detalhe abaixo do título
(alinha o tick ao topo em vez de centralizar).
- .onb-cred → credencial guardada (usuário + senha mascarada + ações).
- .onb-choice → escolha inline segmentada (ex.: rateio Fração ideal | Igualitário).
- .onb-input → valor digitável inline (ex.: fundo de reserva %).
- .onb-act → ações/status à direita do item (botão + pill).
Botões/pills reaproveitam .ghost-btn / .tb-primary / .pill do shell. */
.tahoe-shell .onb-item.onb-rich{align-items:flex-start;}
.tahoe-shell .onb-item.onb-rich > .onb-tick{margin-top:1px;}
.tahoe-shell .onb-cred{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:9px;
padding:9px 12px;border-radius:10px;background:rgba(173,213,235,0.12);
box-shadow:inset 0 0 0 0.5px rgba(10,19,48,0.06);
}
.tahoe-shell .onb-cred .k{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:#8C8C99;margin-right:6px;}
.tahoe-shell .onb-cred .v{font-size:12.5px;color:#1A1A20;font-weight:500;font-family:var(--num-font);}
.tahoe-shell .onb-cred .cred-act{
width:24px;height:24px;border-radius:7px;border:none;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;color:#6C6C78;
}
.tahoe-shell .onb-cred .cred-act:hover{background:rgba(10,19,48,0.07);color:#1B2D70;}
.tahoe-shell .onb-cred .cred-act svg{width:14px;height:14px;}
.tahoe-shell .onb-cred .cred-meta{font-size:11px;color:#8C8C99;margin-left:auto;}
.tahoe-shell .onb-choice{display:inline-flex;gap:2px;margin-top:9px;padding:3px;border-radius:10px;background:rgba(10,19,48,0.05);}
.tahoe-shell .onb-choice button{
border:none;background:transparent;cursor:pointer;border-radius:8px;padding:5px 13px;
font-size:12px;color:#4B4B55;font-family:inherit;transition:background 120ms ease,color 120ms ease;
}
.tahoe-shell .onb-choice button:hover{color:#1A1A20;}
.tahoe-shell .onb-choice button.on{background:#fff;color:#0A1330;font-weight:600;box-shadow:0 1px 2px rgba(10,19,48,0.10);}
.tahoe-shell .onb-input{display:inline-flex;align-items:center;gap:7px;margin-top:9px;}
.tahoe-shell .onb-input input{
width:64px;border:1px solid rgba(10,19,48,0.14);border-radius:8px;padding:5px 9px;
font-size:12.5px;font-family:var(--num-font);color:#1A1A20;background:#fff;
}
.tahoe-shell .onb-input input:focus{outline:none;border-color:#4F6FB5;box-shadow:0 0 0 3px rgba(173,213,235,0.5);}
.tahoe-shell .onb-input .suffix{font-size:12.5px;color:#6C6C78;}
.tahoe-shell .onb-item .onb-act{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* Chips selecionáveis (ex.: despesas fixas, tipos de conta) — multi-seleção.
.chip-add é a affordance tracejada de "adicionar / outras". */
.tahoe-shell .onb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.tahoe-shell .onb-chips .chip{
display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
font-size:12px;cursor:pointer;border:1px solid rgba(10,19,48,0.14);background:#fff;color:#6C6C78;
transition:background 120ms ease,color 120ms ease,box-shadow 120ms ease,border-color 120ms ease;
}
.tahoe-shell .onb-chips .chip:hover{border-color:#4F6FB5;color:#1A1A20;}
.tahoe-shell .onb-chips .chip.on{background:rgba(27,45,112,0.08);border-color:transparent;color:#1B2D70;font-weight:500;box-shadow:inset 0 0 0 1px rgba(27,45,112,0.28);}
.tahoe-shell .onb-chips .chip.on::before{content:'✓';font-size:9px;font-weight:700;}
.tahoe-shell .onb-chips .chip-add{border-style:dashed;color:#4F6FB5;font-weight:500;}
.tahoe-shell .onb-chips .chip-add:hover{background:rgba(79,111,181,0.06);}
/* ─────────── Stage indicator ─────────── */
.tahoe-shell .stage-track{display:flex;align-items:center;gap:6px;}
.tahoe-shell .stage-track > div{
flex:1 1 auto;min-width:max-content;white-space:nowrap;
height:26px;display:flex;align-items:center;justify-content:center;padding:0 12px;
font-size:11px;font-weight:500;color:#6C6C78;
background:rgba(10,19,48,0.05);border-radius:8px;
}
.tahoe-shell .stage-track > div.done{background:rgba(47,140,94,0.18);color:#1F6B46;}
.tahoe-shell .stage-track > div.current{background:linear-gradient(180deg,#2F4FA0,#1B2D70);color:#fff;box-shadow:0 1px 2px rgba(10,19,48,0.12);}
/* ─────────── Esteira de recuperação (.esteira) ───────────
ESTOQUE atual por estado da cobrança — quantos casos estão AGORA em cada
etapa. Não confundir com .funnel (conversão do mês) nem com .stage-track
(progresso de UMA entidade). Cada nó é um link que abre a lista já filtrada.
Cores espelham as pills dos 6 estados (ver cobranca-core.js). Referência:
shell-cobranca-recuperacao.html. */
.tahoe-shell .esteira{
display:flex;align-items:stretch;gap:8px;margin:0 0 10px;
}
.tahoe-shell .esteira-node{
flex:1 1 0;min-width:0;
display:flex;flex-direction:column;gap:3px;
padding:12px 14px;border-radius:12px;text-decoration:none;
background:rgba(10,19,48,0.04);
box-shadow:inset 0 0 0 1px rgba(10,19,48,0.06);
transition:box-shadow .15s ease, transform .15s ease;
}
.tahoe-shell .esteira-node:hover{
transform:translateY(-1px);
box-shadow:inset 0 0 0 1px rgba(10,19,48,0.14), 0 2px 8px rgba(10,19,48,0.08);
}
.tahoe-shell .esteira-node .en-lbl{
font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
color:#6C6C78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tahoe-shell .esteira-node .en-num{font-family:var(--num-font);font-size:22px;font-weight:600;line-height:1.1;color:#1A1A20;}
.tahoe-shell .esteira-node .en-val{font-family:var(--num-font);font-size:12px;color:#6C6C78;}
/* Um modificador por estado — só a cor muda; forma e peso são idênticos,
pra leitura comparativa entre os nós. */
.tahoe-shell .esteira-node.em-regua{background:rgba(var(--esteira-em-regua-rgb),0.09);box-shadow:inset 0 0 0 1px rgba(var(--esteira-em-regua-rgb),0.18);}
.tahoe-shell .esteira-node.em-regua .en-lbl{color:var(--esteira-em-regua-fg);}
.tahoe-shell .esteira-node.aguardando{background:rgba(var(--esteira-aguardando-rgb),0.11);box-shadow:inset 0 0 0 1px rgba(var(--esteira-aguardando-rgb),0.20);}
.tahoe-shell .esteira-node.aguardando .en-lbl{color:var(--esteira-aguardando-fg);}
.tahoe-shell .esteira-node.acordo{background:rgba(var(--esteira-acordo-rgb),0.11);box-shadow:inset 0 0 0 1px rgba(var(--esteira-acordo-rgb),0.20);}
.tahoe-shell .esteira-node.acordo .en-lbl{color:var(--esteira-acordo-fg);}
.tahoe-shell .esteira-node.quebrado{background:rgba(var(--esteira-quebrado-rgb),0.10);box-shadow:inset 0 0 0 1px rgba(var(--esteira-quebrado-rgb),0.20);}
.tahoe-shell .esteira-node.quebrado .en-lbl{color:var(--esteira-quebrado-fg);}
.tahoe-shell .esteira-node.juridico{background:rgba(var(--esteira-juridico-rgb),0.08);box-shadow:inset 0 0 0 1px rgba(var(--esteira-juridico-rgb),0.18);}
.tahoe-shell .esteira-node.juridico .en-lbl{color:var(--esteira-juridico-fg);}
.tahoe-shell .esteira-arrow{
align-self:center;flex:0 0 auto;color:#A8A8B4;font-size:14px;line-height:1;user-select:none;
}
/* Conversão do mês, comprimida numa linha — substitui o .funnel no painel. */
.tahoe-shell .esteira-taxas{
display:flex;flex-wrap:wrap;gap:18px;
padding:0 2px 2px;font-size:12px;color:#6C6C78;
}
.tahoe-shell .esteira-taxas b{font-family:var(--num-font);color:#1A1A20;font-weight:600;}
/* Abaixo de 900px vira grid 2 colunas e as setas somem — a ordem de leitura
já carrega a sequência, a seta só ocuparia espaço. */
@media (max-width:900px){
.tahoe-shell .esteira{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.tahoe-shell .esteira-arrow{display:none;}
}
/* Selo de isenção da taxa administrativa. Auditoria, não alerta — fica
discreto pra não competir com a pill de estado ao lado. Autor, data e
motivo vão no title (o app preenche). */
.tahoe-shell .caso-isento{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:999px;
font-size:11px;font-weight:500;color:#4B4B55;
background:rgba(10,19,48,0.05);
box-shadow:inset 0 0 0 1px rgba(10,19,48,0.08);
cursor:help;white-space:nowrap;
}
.tahoe-shell .caso-isento svg{width:11px;height:11px;flex:0 0 11px;color:#6C6C78;}
/* Modificador de tom (v0.42.0). A anatomia é a mesma — tamanho, raio,
cursor:help, gap do ícone — porque o papel é o mesmo: informação pra quem
audita, não alerta. Muda só o tom, e o tom carrega a distinção que importa:
o neutro de origem diz FATO CONSUMADO (a isenção já foi concedida), o âmbar
diz ETAPA PENDENTE (um acordo nasce sem parcelas, que são negociadas caso a
caso com anuência do síndico — nulo ali é fila de trabalho, não dado
faltando). Reusa o par --warning-soft/--warning-border do .pill-warn em vez
de inventar um âmbar paralelo; o color fica literal porque --warning (#C8881A)
é claro demais pra texto de 11px sobre esse fundo. */
.tahoe-shell .caso-isento.warn{
color:#8A5D10;
background:var(--warning-soft);
box-shadow:inset 0 0 0 1px var(--warning-border);
}
.tahoe-shell .caso-isento.warn svg{color:#B07714;}
/* Contador até o encaminhamento ao jurídico. A faixa "iminente" usa o
grafite do jurídico — sinaliza o DESTINO, não alarme (vermelho já é
acordo quebrado). Classes vêm de faixaDiasPara() no cobranca-core. */
.tahoe-shell .dias-para{
display:inline-flex;align-items:baseline;gap:4px;
font-size:12px;font-weight:500;color:#6C6C78;white-space:nowrap;
}
.tahoe-shell .dias-para b{font-family:var(--num-font);font-size:13px;font-weight:600;color:#4B4B55;}
.tahoe-shell .dias-para.alerta{color:#8A5D10;}
.tahoe-shell .dias-para.alerta b{color:#8A5D10;}
.tahoe-shell .dias-para.iminente{color:#2E2E36;}
.tahoe-shell .dias-para.iminente b{color:#2E2E36;}
/* ─────────── Confirmação do disparo forçado (.blast-confirm) ───────────
Um botão que dispara dezenas de WhatsApps precisa de preview antes de
enviar. Composto sobre .card / .stack / .cfg-field / .comms-preview —
estas classes são só o container e o rodapé. Referência:
shell-cobranca-condominios.html. */
.tahoe-shell .blast-confirm{
max-width:560px;
}
.tahoe-shell .blast-confirm .bc-head{
font-size:13px;line-height:1.5;color:#4B4B55;margin:0 0 4px;
}
.tahoe-shell .blast-confirm .bc-head b{font-family:var(--num-font);color:#1A1A20;font-weight:600;}
.tahoe-shell .blast-confirm .bc-split{
display:flex;flex-wrap:wrap;gap:14px;
margin:10px 0 4px;font-size:12px;color:#6C6C78;
}
.tahoe-shell .blast-confirm .bc-split i{font-family:var(--num-font);font-style:normal;font-weight:600;color:#1A1A20;}
/* A guarda das 48h. Fundo âmbar suave: é a proteção que impede a equipe de
metralhar o morador — desligar precisa parecer uma decisão, não um clique
qualquer. Vem marcada por padrão no HTML. */
.tahoe-shell .blast-confirm .bc-guard{
display:flex;align-items:center;gap:10px;
margin:14px 0;padding:10px 12px;border-radius:10px;
background:linear-gradient(135deg,rgba(250,241,221,0.65) 0%,rgba(255,255,255,0.6) 70%),#fff;
box-shadow:inset 0 0 0 1px rgba(235,217,168,0.7);
font-size:12.5px;color:#5C4416;
}
.tahoe-shell .blast-confirm .bc-guard .bc-delta{
margin-left:auto;font-weight:600;color:#8A5D10;white-space:nowrap;
}
.tahoe-shell .blast-confirm .bc-foot{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
margin-top:16px;padding-top:14px;
border-top:1px solid rgba(10,19,48,0.08);
}
/* ─────────── Régua — fluxo do acordo (promovido na v0.42.0) ───────────
Estas sete regras viviam num