/* ============================================================ COMPONENTES COMPARTILHADOS · CRM do Jordão ============================================================ O que se repete entre telas: a moldura do app (sidebar + topbar) e alguns elementos de UI recorrentes. Cada bloco cita o arquivo de origem no produto. PADRÃO TÉCNICO (herdado dos componentes de marketing do produto, src/components/marketing/screens/*.tsx): · a tela vive num container com aspect-ratio 1600/900 · o container declara container-type: inline-size · TODAS as medidas em cqw (1cqw = 1% da largura do container) Resultado: a tela escala em qualquer largura sem quebrar, sem media query e sem transform: scale. CONVERSÃO px → cqw usada aqui: numa tela de referência de 1600px, 1cqw = 16px. Então 208px = 13cqw, 36px = 2.25cqw, 14px = 0.875cqw. ============================================================ */ /* ───────────────────────────────────────────────────────────── MODO EMBED ------------------------------------------------------------ Quando a tela é carregada dentro da LP (via iframe com `?embed=1`), some tudo que é da página de demonstração: o cabeçalho, a barra de estados e as notas de rodapé. Fica só a tela, preenchendo o iframe. Cada tela liga isso com uma linha no : if (location.search.indexOf('embed') > -1) document.documentElement.classList.add('embed'); ───────────────────────────────────────────────────────────── */ html.embed, html.embed body { background: transparent; margin: 0; } html.embed .demo-topo, html.embed .demo-nota, /* a barra de estados também some · em algumas telas ela fica FORA do .demo-topo, então precisa da regra própria (usa !important porque pode ter display inline) */ html.embed .demo-controles { display: none !important; } html.embed .demo-palco { padding: 0 !important; max-width: none !important; } html.embed .tela-wrap { padding-bottom: 0 !important; height: 100vh; } html.embed .tela { border-radius: 0; } /* ───────────────────────────────────────────────────────────── MOLDURA DA TELA ───────────────────────────────────────────────────────────── */ /* Wrapper com proporção travada. O padding-bottom existe além do aspect-ratio porque o conteúdo interno é posicionado de forma absoluta e a caixa colapsa em alguns renderizadores. */ .tela-wrap { position: relative; width: 100%; padding-bottom: 56.25%; /* 900 / 1600 */ } .tela { position: absolute; inset: 0; aspect-ratio: 1600 / 900; container-type: inline-size; overflow: hidden; border-radius: 0.75cqw; background: var(--rm-black); color: var(--rm-white); font-family: var(--font-sans); } .tela *, .tela *::before, .tela *::after { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────── SIDEBAR Origem: src/components/sidebar.tsx + src/components/nav-items.ts ------------------------------------------------------------ Classes Tailwind traduzidas: aside → bg-rainmaker-black text-white w-52 (expandida) / w-[56px] transition-[width] duration-150 ease-out nav → gap-3 px-2 py-3 h3 → text-[10px] font-semibold uppercase tracking-wider text-white/40 item → h-9 gap-3 rounded-md px-2 transition-colors ativo → bg-rainmaker-yellow text-rainmaker-black normal → text-white/75 · hover:bg-white/10 hover:text-white rodapé → border-t border-white/10 p-2 DIVERGÊNCIA REGISTRADA: a sidebar real NÃO tem logo no topo (a logo fica no topbar). Os componentes de marketing colocam a logo dentro da sidebar. A biblioteca segue o produto. ───────────────────────────────────────────────────────────── */ /* ORDEM DA MOLDURA (confirmada em src/app/(app)/layout.tsx:232-249): o Topbar ocupa a LARGURA INTEIRA no topo; abaixo dele vem uma linha flex com a Sidebar à esquerda e o
ocupando o resto. Os componentes de marketing invertem isso (sidebar de altura total, topbar recuado à direita). A biblioteca segue o produto. */ .app-sidebar { position: absolute; left: 0; top: 5.75cqw; bottom: 0; width: 13cqw; /* w-52 = 208px */ background: var(--rm-black); color: var(--rm-white); display: flex; flex-direction: column; z-index: 2; } .app-sidebar nav { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0.75cqw; /* gap-3 = 12px */ padding: 0.75cqw 0.5cqw; /* py-3 px-2 */ overflow: hidden; } .app-sidebar .nav-grupo { display: flex; flex-direction: column; gap: 0.125cqw; /* gap-0.5 = 2px */ } .app-sidebar .nav-grupo h3 { margin: 0 0 0.25cqw; padding: 0 0.5cqw; font-size: 0.625cqw; /* text-[10px] */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; /* tracking-wider */ color: rgba(255, 255, 255, 0.4); } .app-sidebar .nav-item { display: flex; align-items: center; gap: 0.75cqw; /* gap-3 */ height: 2.25cqw; /* h-9 = 36px */ padding: 0 0.5cqw; /* px-2 */ border-radius: 0.375cqw; /* rounded-md */ color: rgba(255, 255, 255, 0.75); font-size: 0.875cqw; /* text-sm */ font-weight: 500; transition: background-color 0.15s, color 0.15s; } .app-sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.1); color: var(--rm-white); } .app-sidebar .nav-item.ativo { background: var(--rm-yellow); color: var(--rm-black); } .app-sidebar .nav-item .ic { width: 1.125cqw; /* h-[18px] w-[18px] */ height: 1.125cqw; flex-shrink: 0; display: grid; place-items: center; } .app-sidebar .nav-item .ic svg { width: 100%; height: 100%; } /* Badge de não lidas do WhatsApp · componente InboxUnreadBadge */ .app-sidebar .nav-item .badge { margin-left: auto; background: var(--rm-yellow); color: var(--rm-black); font-size: 0.5625cqw; font-weight: 700; border-radius: 999px; padding: 0.05cqw 0.35cqw; min-width: 1cqw; text-align: center; } .app-sidebar .nav-item.ativo .badge { background: var(--rm-black); color: var(--rm-yellow); } .app-sidebar .sidebar-foot { border-top: 0.0625cqw solid rgba(255, 255, 255, 0.1); padding: 0.5cqw; } .app-sidebar .sidebar-foot button { display: flex; align-items: center; gap: 0.5cqw; width: 100%; padding: 0.5cqw; border: 0; background: transparent; border-radius: 0.375cqw; color: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: 0.75cqw; /* text-xs */ font-weight: 500; transition: background-color 0.15s, color 0.15s; } .app-sidebar .sidebar-foot button:hover { background: rgba(255, 255, 255, 0.1); color: var(--rm-white); } /* ───────────────────────────────────────────────────────────── TOPBAR Origem: src/components/topbar.tsx ------------------------------------------------------------ header → border-b border-rainmaker-black-line bg-rainmaker-black linha → h-[92px] gap-3 px-3 logo → BrandLogo horizontal size 85 (tema escuro, lettering branco) busca → GlobalSearch · placeholder literal: "Buscar negócio, lead ou organização..." ações → botão de tema (lua/sol), QuickAddMenu ("Adicionar"), avatar de iniciais 28px ───────────────────────────────────────────────────────────── */ .app-topbar { position: absolute; left: 0; right: 0; top: 0; /* largura inteira · layout.tsx:242 */ height: 5.75cqw; /* h-[92px] = 92px */ background: var(--rm-black); border-bottom: 0.0625cqw solid var(--rm-black-line); display: flex; align-items: center; gap: 0.75cqw; padding: 0 0.75cqw; z-index: 2; } /* A logo real mora no topbar, encostada na esquerda, e é um link pro /kanban (topbar.tsx:55). A arte já traz o cartoon do Jordão e o lettering juntos · não duplicar texto ao lado. */ .app-topbar .logo { /* BrandLogo variant="horizontal" size={85} · em `horizontal`, size é a ALTURA da arte (brand-logo.tsx:33). 85px numa barra de 92px, deixando ~3px de respiro. Arte intrínseca 1200x675. theme="dark" → usa crm-jordao-logo.webp (lettering BRANCO), porque o topbar é preto FIXO e não segue o tema do app. */ height: 5.31cqw; width: auto; flex-shrink: 0; /* senão o flex esmaga a logo */ display: block; } .app-topbar .busca { flex: 1; max-width: 26cqw; display: flex; align-items: center; gap: 0.5cqw; background: var(--rm-black-soft); border: 0.0625cqw solid var(--rm-black-line); border-radius: 0.5cqw; padding: 0.55cqw 0.75cqw; color: rgba(255, 255, 255, 0.45); font-size: 0.8125cqw; } .app-topbar .acoes { margin-left: auto; display: flex; align-items: center; gap: 0.5cqw; } .app-topbar .btn-icone { width: 2.25cqw; /* h-9 w-9 */ height: 2.25cqw; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); display: grid; place-items: center; transition: background-color 0.15s, color 0.15s; } .app-topbar .btn-icone:hover { background: rgba(255, 255, 255, 0.1); color: var(--rm-white); } .app-topbar .btn-adicionar { display: inline-flex; align-items: center; gap: 0.3cqw; background: var(--rm-yellow); color: var(--rm-black); border: 0; border-radius: 0.5cqw; padding: 0.5cqw 0.85cqw; font-family: inherit; font-size: 0.8125cqw; font-weight: 700; } .app-topbar .avatar { width: 1.75cqw; /* InitialsAvatar size 28 */ height: 1.75cqw; border-radius: 999px; background: var(--rm-black-line); color: var(--rm-white); display: grid; place-items: center; font-size: 0.6875cqw; font-weight: 700; } /* ───────────────────────────────────────────────────────────── ÁREA DE CONTEÚDO Tudo que não é sidebar nem topbar. ───────────────────────────────────────────────────────────── */ .app-main { position: absolute; left: 13cqw; /* depois da sidebar */ top: 5.75cqw; /* abaixo do topbar */ right: 0; bottom: 0; background: var(--background); color: var(--foreground); overflow: hidden; } /* ───────────────────────────────────────────────────────────── ELEMENTOS RECORRENTES Observados em mais de uma tela. Origem citada em cada um. ───────────────────────────────────────────────────────────── */ /* Chip/pílula de sugestão · mentor.css → .mt-chip */ .ui-chip { display: inline-flex; align-items: center; gap: 0.375cqw; background: var(--m-bg-card); border: 0.0625cqw solid var(--m-rule); color: var(--m-ink); padding: 0.44cqw 0.75cqw; border-radius: 999px; font-family: inherit; font-size: 0.78cqw; font-weight: 500; transition: background 0.12s, border-color 0.12s, transform 0.08s, color 0.12s; } .ui-chip:hover { background: var(--m-yellow-soft); border-color: var(--m-yellow); transform: translateY(-0.06cqw); } .ui-chip.primario { background: var(--m-ink); color: var(--m-bg); border-color: var(--m-ink); } .ui-chip.primario:hover { background: #000; color: var(--m-yellow); } /* Botão de card · mentor.css → .mt-art-btn */ .ui-btn { display: inline-flex; align-items: center; gap: 0.375cqw; padding: 0.44cqw 0.75cqw; font-family: inherit; font-size: 0.75cqw; font-weight: 600; border-radius: 0.5cqw; border: 0.0625cqw solid var(--m-rule); background: var(--m-bg); color: var(--m-ink); transition: background 0.12s, border-color 0.12s, color 0.12s; } .ui-btn:hover { background: var(--m-bg-soft); border-color: var(--m-ink); } .ui-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ui-btn.primario { background: var(--m-yellow); color: var(--m-ink); border-color: var(--m-yellow); box-shadow: 0 0.19cqw 0.62cqw var(--m-glow); font-weight: 700; } .ui-btn.primario:hover { background: var(--m-yellow-deep); border-color: var(--m-yellow-deep); } .ui-btn.sutil { background: transparent; border-color: transparent; color: var(--m-ink-mute); font-weight: 500; } .ui-btn.sutil:hover { background: var(--m-bg); color: var(--m-ink); } /* Tag de status de card · mentor.css → .mt-art-tag */ .ui-tag { font-size: 0.5625cqw; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--m-ink); background: var(--m-yellow); padding: 0.19cqw 0.5cqw; border-radius: 0.31cqw; } .ui-tag.ok { background: var(--m-success); color: #FFF; } .ui-tag.erro { background: var(--m-danger); color: #FFF; } /* Barra de rolagem discreta · mentor.css → .scrollbar-thin */ .scrollbar-thin::-webkit-scrollbar { width: 0.375cqw; height: 0.375cqw; } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--m-rule); border-radius: 999px; } .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }