/* ============================================================ Neway — site.css Fonte de verdade do design system. Ver design-site.MD ============================================================ */ /* ---------- fontes auto-hospedadas (latin, variable) ---------- */ @font-face{ font-family:"Fustat"; src:url("fonts/fustat-latin.woff2") format("woff2"); font-weight:200 800;font-style:normal;font-display:swap; 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:"Inter Tight"; src:url("fonts/inter-tight-latin.woff2") format("woff2"); font-weight:100 900;font-style:normal;font-display:swap; 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; } :root{ --ink:#021C16; /* neway deep green */ --heading:#08281F; --sun:#D5FE00; /* sunglare */ --sun-deep:#7CA000; /* sunglare p/ TÍTULOS grandes (3:1 no branco) */ --sun-link:#5F7C00; /* sunglare p/ texto pequeno/links (>4.5:1 no branco) */ --sun-soft:#F5FFC2; --line:#E6E8EC; --muted:#5B6A66; --muted-2:#66736E; --dot:#E3E6EA; --surface:#F5F7F4; /* cinza de superfície (caixas do menu, pill do trigger) */ --display:"Fustat",sans-serif; --body:"Inter Tight",sans-serif; --shell:1360px; } *{margin:0;padding:0;box-sizing:border-box} /* Nada pode vazar na horizontal. `clip` não cria contexto de rolagem (portanto não quebra position:sticky) e, ao contrário de `hidden`, o Safari do iOS não deixa arrastar a página de lado. `hidden` fica como fallback para navegadores sem suporte a `clip`. */ html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip} body{ font-family:var(--body);background:#fff;color:var(--ink); line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-x:clip; max-width:100%; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--sun);color:var(--ink)} /* ============ frame / grid riscadinho ============ */ .shell{max-width:var(--shell);margin:0 auto;position:relative; border-left:1px solid var(--line);border-right:1px solid var(--line)} .inner{max-width:1160px;margin:0 auto;padding:0 40px} .inner-wide{max-width:1320px;margin:0 auto;padding:0 40px} /* faixa hachurada: sangra até a borda da tela; o frame a atravessa */ .hatch{ position:relative;height:56px; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:repeating-linear-gradient(45deg,transparent 0 9px,#EEF0F3 9px 10px); /* corta só na horizontal: no mobile o frame encosta na borda da tela e os losangos das quinas passariam 4px da viewport. O -100% em cima e embaixo preserva os losangos, que ficam fora da faixa de propósito. */ clip-path:inset(-100% 0); } .hatch-in{ position:absolute;top:0;bottom:0;left:0;right:0; max-width:var(--shell);margin:0 auto; border-left:1px solid var(--line);border-right:1px solid var(--line); } .hatch-in i{ position:absolute;width:7px;height:7px;background:#C9CED4; transform:rotate(45deg);z-index:2; } .hatch-in i:nth-child(1){top:-4px;left:-4px} .hatch-in i:nth-child(2){top:-4px;right:-4px} .hatch-in i:nth-child(3){bottom:-4px;left:-4px} .hatch-in i:nth-child(4){bottom:-4px;right:-4px} .dotted{ background-image:radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size:16px 16px; } /* ============ type ============ */ h1,h2,h3{font-family:var(--display);color:var(--heading);font-weight:600} h1{font-size:clamp(38px,4.4vw,56px);line-height:1.12;letter-spacing:-.05em} h2{font-size:clamp(30px,3.6vw,48px);line-height:1.15;letter-spacing:-.04em} h3{font-size:20px;letter-spacing:-.02em} .accent{color:var(--sun-deep)} /* Sobretítulo dentro do h1: carrega o termo de busca sem competir visualmente com a frase de efeito. */ p.lead{color:var(--muted);font-size:17px} /* brilho passando no texto (glint) */ .shine{ /* a onda escurece em vez de clarear: --sun-deep já está em 3,08:1 no branco, o limite de texto grande. Qualquer tom mais claro derruba o contraste (o #D9F26B antigo dava 1,2:1 e a palavra sumia na passagem). */ --c:var(--sun-deep);--hi:#4E7A00; background-image:linear-gradient(110deg,var(--c) 0% 42%,var(--hi) 50%,var(--c) 58% 100%); background-size:280% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text; color:transparent; animation:textshine 4.6s ease-in-out infinite; } .shine-ink{--c:var(--heading);--hi:#3F7A5E} .shine-sun{--c:var(--sun);--hi:#FFFFFF} @keyframes textshine{ 0%{background-position:120% 0} 55%,100%{background-position:-160% 0} } /* brilho passando nos CTAs */ .btn-shine{position:relative;overflow:hidden;isolation:isolate} .btn-shine::after{ content:"";position:absolute;top:-4px;bottom:-4px;width:36%;left:0; background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%); will-change:transform;z-index:1;pointer-events:none; animation:btnshine 4.6s ease-in-out infinite; } .btn-shine > *{position:relative;z-index:2} @keyframes btnshine{ 0%,18%{transform:translateX(-170%) skewX(-20deg)} 58%,100%{transform:translateX(390%) skewX(-20deg)} } @media (prefers-reduced-motion:reduce){ .shine{animation:none;background:none;color:var(--c)} .btn-shine::after{display:none} } /* palavra circulada à mão */ .circled{position:relative;display:inline-block;white-space:nowrap} .circled svg{ position:absolute;inset:-32% -9% -30% -9%;width:118%;height:162%; pointer-events:none;overflow:visible; } .circled svg path{fill:none;stroke:var(--sun);stroke-width:5;stroke-linecap:round} /* ============ buttons ============ */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--display);font-weight:600;font-size:15.5px; border-radius:9999px;padding:12px 20px;border:1px solid transparent; cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s; white-space:nowrap;color:var(--ink); } .btn .circ{ width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--sun); display:inline-flex;align-items:center;justify-content:center;flex:none; transition:transform .18s; } .btn:hover .circ{transform:translateX(2px)} .btn-sun{background:var(--sun)} .btn-sun:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(2,28,22,.18)} .btn-white{background:#fff;border-color:var(--line)} .btn-white:hover{border-color:var(--ink)} .btn-dark{background:var(--ink);color:#fff} .btn-dark .circ{background:var(--sun);color:var(--ink)} .btn-dark:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(2,28,22,.28)} .link-arrow{ font-family:var(--display);font-weight:600;color:var(--sun-link);font-size:16px; display:inline-flex;align-items:center;gap:8px; } .link-arrow:hover{text-decoration:underline} /* ============ header ============ */ .topbar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:60} .topbar .shell{border-bottom:none} .nav{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 32px} .nav .logo img{height:24px;width:auto} .nav-links{display:flex;gap:34px;font-size:15.5px;font-weight:500;color:#3D4C47} .nav-links a:hover{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:20px} .nav-right .sep{width:1px;height:28px;background:var(--line)} /* ============ hero ============ */ .hero{position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 40px} .badge{ display:inline-flex;align-items:center;gap:10px; background:#fff;border:1px solid var(--line);border-radius:9999px; padding:9px 18px;font-size:14.5px;color:var(--muted);margin-bottom:26px; } .badge b{color:var(--ink);font-weight:600} .badge{padding:7px 18px 7px 8px} .badge .avatars{display:inline-flex} .badge .avatars img{ width:28px;height:28px;border-radius:50%;object-fit:cover; border:2px solid #fff;margin-left:-10px;background:var(--surface); } .badge .avatars img:first-child{margin-left:0} .hero p.lead{margin:22px 0 30px;max-width:440px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px} /* prova social no fim da primeira tela: nota, plataforma e nada mais */ .hero-notas{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .nota{display:inline-flex;align-items:center;gap:9px} .nota img{width:20px;height:20px;object-fit:contain;flex:none} .nota b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);line-height:1} .nota > span{color:var(--muted);font-size:15px;line-height:1} .hero-media{position:relative;min-height:420px} /* Imagem do hero: encosta na linha direita do frame. A sangria é a distância entre a borda do conteúdo (.inner, 1080px úteis) e a borda do frame (.shell, 1360px) — some sozinha quando a tela é menor que o frame. O overflow:hidden do .hero garante o corte exato na linha, mesmo com a barra de rolagem entrando na conta do 100vw. */ .hero-img{ --recuo:80px; /* padding do .inner somado dos dois lados */ --sangra:calc((min(100vw, var(--shell)) - min(1080px, 100vw - var(--recuo))) / 2); display:block;height:auto;max-width:none; width:min(calc(100% + var(--sangra)), 700px); /* 700px é o tamanho real do arquivo */ margin-left:auto; margin-right:calc(-1 * var(--sangra)); } /* placeholder de imagem — substituir depois */ .ph{ border:1.5px dashed #C7CDD3;border-radius:16px;background:#FAFBFC; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; color:var(--muted);text-align:center;padding:24px; } .ph svg{opacity:.45} .ph span{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .hero-media .ph{position:absolute;inset:0} .hero-fade{ height:190px;position:relative; background:linear-gradient(180deg,rgba(213,254,0,0) 0%,rgba(213,254,0,.10) 55%,rgba(213,254,0,.38) 100%); } .hero-bar{height:5px;background:var(--sun)} /* ============ 4-col features ============ */ .cols4{display:grid;grid-template-columns:repeat(4,1fr)} .cols4 .cell{padding:120px 30px 56px;border-left:1px solid var(--line);position:relative} .cols4 .cell:first-child{border-left:none} .cell .tick{ position:absolute;top:120px;left:0;width:4px;height:26px;background:var(--sun); } .cell .cico{margin-bottom:40px;color:var(--heading)} .cell .cell-h{font-family:var(--display);font-weight:600;color:var(--heading); margin-bottom:12px;font-size:21px;line-height:1.25;letter-spacing:-.02em} .cell p{color:var(--muted);font-size:15px;line-height:1.65} /* ============ quanto custa ============ */ .custa{padding:96px 0 120px;position:relative} .custa .row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px} .custa p.lead{margin-top:22px} /* ============ integrações ============ */ .integra{position:relative;padding:130px 0 120px;text-align:center;overflow:hidden} .pill-badge{ display:inline-block;background:#fff;border:1px solid var(--line);border-radius:9999px; padding:8px 18px;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:26px; } .integra h2{max-width:720px;margin:0 auto} .integra p.lead{max-width:520px;margin:22px auto 34px;font-weight:500} .chip{ position:absolute;display:inline-flex;align-items:center;gap:9px; background:#fff;border:1px solid var(--line);border-radius:9999px; padding:10px 18px;font-family:var(--display);font-weight:600;font-size:15.5px; box-shadow:0 6px 18px rgba(2,28,22,.06); animation:float 6s ease-in-out infinite; } .chip img{height:20px;width:20px;object-fit:contain} @keyframes float{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}} @media (prefers-reduced-motion:reduce){.chip{animation:none}} /* ============ 2 cards ============ */ .duo{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .duo .dcard{border-left:1px solid var(--line);display:flex;flex-direction:column} .duo .dcard:first-child{border-left:none} .dcard .media{height:340px;padding:28px 28px 0} .dcard .media .ph{height:100%} .dcard .body{padding:30px 32px 40px} .dcard h3{font-size:22px;margin-bottom:10px} .dcard p{color:var(--muted);font-size:15.5px;max-width:560px} .dcard .body .link-arrow{margin-top:22px} .chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .chip-st{ display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line); border-radius:9999px;padding:8px 16px;font-weight:600;font-size:14px;font-family:var(--display); } .chip-st img{width:20px;height:20px;object-fit:contain;flex:none} .chip-st .dotc{width:9px;height:9px;border-radius:50%} /* ============ suíte ============ */ .suite{padding:110px 0 0} .suite .head{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;padding-bottom:90px} .suite .head p{color:var(--muted);font-size:16.5px;font-weight:500} .trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .trio .tcard{border-left:1px solid var(--line);padding-bottom:44px} .trio .tcard:first-child{border-left:none} .tcard .media{height:240px;padding:24px 24px 0} .tcard .media .ph{height:100%} .tcard .body{padding:26px 28px 0} .tcard h3{font-size:19px;margin-bottom:8px} .tcard p{color:var(--muted);font-size:14.5px;line-height:1.65} /* ============ dark band ============ */ .dark{ background:var(--ink);color:#fff;text-align:center; padding:110px 0 120px;position:relative;overflow:hidden; } .dark::before{ content:"";position:absolute;inset:0;opacity:.14; background-image:radial-gradient(rgba(213,254,0,.55) 1.2px, transparent 1.2px); background-size:20px 20px; -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 100%); mask-image:radial-gradient(70% 60% at 50% 45%,#000 0%,transparent 100%); } .dark .inner{position:relative;z-index:1} .dark h2{color:#fff;max-width:760px;margin:0 auto} .dark h2 .sun{color:var(--sun)} .dark p.lead{color:rgba(255,255,255,.66);max-width:560px;margin:22px auto 34px} .dark .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:56px} /* no mobile os dois botões empilham: mesma largura para não parecer degrau */ @media (max-width:560px){ .dark .ctas{flex-direction:column;align-items:stretch} .dark .ctas .btn{width:100%;justify-content:center} .feat-hero .ctas{flex-direction:column;align-items:stretch} .feat-hero .ctas .btn{width:100%;justify-content:center} .hero-ctas{flex-direction:column;align-items:stretch} .hero-ctas .btn{width:100%;justify-content:center} } .btn-outline{background:transparent;border-color:rgba(255,255,255,.28);color:#fff} .btn-outline:hover{border-color:#fff} /* Sem moldura própria: a vinheta já traz o recorte tracejado e as duas bordas empilhadas viravam um quadro dentro do outro. As larguras dos degraus abaixo descontam os 36px de padding que existiam aqui. */ .dark .panel{max-width:724px;margin:0 auto} .dark .panel .ph{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.45);height:300px} /* ---- vinheta 3: tela Início (MetaGoalBanner + MetricsRow + PipelineFunnel) ---- Mesma composição das outras vinhetas, só que o bastidor é escuro para encostar na faixa preta em vez de abrir um buraco claro no meio dela. Tokens vindos do tema do app: card #fff, border #E0E0E0, muted #F5F5F5, accent #D5FE00, success #21C45D (o verde de TEXTO é #15803D — o claro não passa em contraste sobre branco). */ .dark .panel .vin-meta{ background:#0C1714;border-color:rgba(255,255,255,.20); height:380px; } .dark .panel .vin-meta .vin-panel{ /* largura fixa + escala: assim o layout interno não se deforma quando a faixa encolhe, ele só diminui junto (e sangra pela direita como deve) */ width:704px;height:400px;top:26px;left:26px;right:auto;bottom:auto; transform-origin:top left; padding:14px;gap:10px; /* a faixa é centralizada; a tela do app não pode herdar isso */ text-align:left; } /* -- banner Meta do mês -- */ .mg-banner{ position:relative;flex:none;display:flex;align-items:center;gap:16px; border-radius:12px;padding:14px 16px;color:#fff; background:linear-gradient(135deg,rgba(213,254,0,.16),transparent 62%),#0A0A0A; } .mg-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .mg-kicker{ display:flex;align-items:center;gap:5px; font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:rgba(255,255,255,.72); } .mg-kicker svg{width:11px;height:11px;flex:none} .mg-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .mg-sub{font-size:11px;color:rgba(255,255,255,.82)} .mg-ring{position:relative;flex:none;width:62px;height:62px;display:grid;place-items:center} .mg-ring svg{width:62px;height:62px;transform:rotate(-90deg)} .mg-ring circle{fill:none;stroke-width:8} .mg-track{stroke:rgba(255,255,255,.18)} /* 2πr = 276,5 → 74% preenchido deixa 71,9 de sobra */ .mg-arc{stroke:var(--sun);stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:71.9; transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)} .mg-ring b{position:absolute;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} .mg-note-meta{top:-13px;right:12px} .mg-note-meta::after{left:auto;right:24px} /* -- faixa de métricas -- */ .mg-metrics{ flex:none;display:grid;grid-template-columns:repeat(4,1fr); border:1px solid #E0E0E0;border-radius:10px;background:#fff;overflow:hidden; } .mg-cell{padding:10px 12px;display:flex;flex-direction:column;gap:3px;border-left:1px solid #E0E0E0} .mg-cell:first-child{border-left:0} .mg-cell span{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#616161} .mg-cell b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#111114} .mg-cell--conv{transition:background .3s} /* -- funil (o cartão é cortado por baixo, como se a tela continuasse) -- */ .mg-funnel{ flex:1;min-height:0;border:1px solid #E0E0E0;border-radius:10px;background:#fff; padding:12px 14px;display:flex;flex-direction:column;gap:10px; } /* cabeçalho em uma linha só: empilhado, comia altura que faz falta às barras */ .mg-fhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .mg-fhead b{font-size:13px;font-weight:600;color:#111114;line-height:1.2} .mg-fhead span{font-size:10.5px;color:#616161;line-height:1.2} .mg-fhead i{font-style:normal;font-weight:700;color:#15803D} .mg-bars{display:flex;align-items:flex-end;gap:5px} .mg-col{width:80px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px; border-radius:6px;padding:2px 0;transition:background .3s} .mg-n{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;color:#111114} .mg-bar{display:block;width:56px;border-radius:4px 4px 0 0;background:#3D3F42; transition:height .6s cubic-bezier(.16,1,.3,1)} .mg-col--won .mg-bar{background:#21C45D} .mg-lb{font-size:9.5px;font-weight:500;color:#111114;line-height:1.2} .mg-vl{font-size:9px;font-variant-numeric:tabular-nums;color:#616161} .mg-chip{ flex:none;display:inline-flex;align-items:center;gap:2px;margin-bottom:26px; background:#F5F5F5;border-radius:99px;padding:2px 6px; font-size:8.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#111114; transition:background .3s,color .3s; } .mg-chip svg{width:7px;height:7px} /* -- coreografia no hover do painel (equivale ao :hover dos outros cards) -- */ /* repouso escolhido em área vazia: a etiqueta do cursor não pode cair em cima de rótulo do app (a primeira posição cobria "PIPELINE") */ .dark .panel .vin-meta .cur--yellow{left:432px;top:92px} .dark .panel .vin-meta .cur--lilac{left:664px;top:252px} /* a etiqueta do lilás vira para a esquerda: encostada no anel ela sairia da caixa */ .dark .panel .vin-meta .cur--lilac i{left:auto;right:13px} .dark .panel:hover .vin-meta .cur--yellow{left:352px;top:262px} .dark .panel:hover .vin-meta .cur--lilac{left:624px;top:78px;transition-delay:.15s} .dark .panel:hover .vin-meta .mg-col:nth-of-type(3){background:#F5F5F5} .dark .panel:hover .vin-meta .mg-chip:nth-of-type(2){background:var(--sun)} .dark .panel:hover .vin-meta .mg-cell--conv{background:#F7F9F8} .dark .panel:hover .vin-meta .mg-arc{stroke-dashoffset:71.9} /* Escala em degraus. A caixa é fluida e a escala não é, então cada degrau também fixa a largura da faixa — senão sobra um vão escuro à direita. O anel fica na beirada direita do painel, então "anel inteiro" e "sangrar pela direita" são incompatíveis: a sangria aqui é a de baixo. */ @media (max-width:840px){ .dark .panel{max-width:624px} .dark .panel .vin-meta{height:330px} .dark .panel .vin-meta .vin-panel{transform:scale(.855);left:22px;top:22px} /* os cursores são irmãos do painel, não escalam com ele: reposiciona */ .dark .panel .vin-meta .cur--yellow{left:369px;top:79px} .dark .panel .vin-meta .cur--lilac{left:568px;top:215px} .dark .panel:hover .vin-meta .cur--yellow{left:301px;top:224px} .dark .panel:hover .vin-meta .cur--lilac{left:534px;top:67px} } @media (max-width:740px){ .dark .panel{max-width:484px} .dark .panel .vin-meta{height:254px} .dark .panel .vin-meta .vin-panel{transform:scale(.665);left:18px;top:18px} /* daqui pra baixo é toque: cursor não faz sentido e a etiqueta não cabe */ .dark .panel .vin-meta .cur{display:none} } /* no celular o funil ficaria ilegível: sai de cena e sobra meta + métricas */ @media (max-width:600px){ .dark .panel{max-width:448px} .dark .panel .vin-meta{height:226px} .dark .panel .vin-meta .vin-panel{transform:scale(.62);height:auto;left:14px;top:14px} .dark .panel .vin-meta .cur{display:none} /* o anel cai fora do recorte aqui; a etiqueta passa a carregar o número */ .dark .panel .vin-meta .mg-note-meta{right:auto;left:12px} .dark .panel .vin-meta .mg-note-meta::after{right:auto;left:24px} } /* sem hover (toque): já mostra o estado final da coreografia */ @media (hover:none){ .dark .panel .vin-meta .cur--yellow{left:352px;top:262px} .dark .panel .vin-meta .cur--lilac{left:624px;top:78px} .vin-meta .mg-col:nth-of-type(3){background:#F5F5F5} .vin-meta .mg-chip:nth-of-type(2){background:var(--sun)} } /* ============ depoimentos ============ */ .depo{padding:110px 0;text-align:center} .depo h2{max-width:640px;margin:0 auto} .depo p.lead{max-width:520px;margin:20px auto 54px} /* ---------- letreiro de depoimentos ---------- Duas fileiras em sentidos opostos; o conteúdo de cada uma é duplicado (cópia com aria-hidden) e o laço anda -50% — emenda invisível. Pausa quando o mouse está sobre a fileira. */ .depo-marquee{ overflow:hidden;text-align:left;margin-bottom:44px; display:flex;flex-direction:column;gap:18px; /* desvanece as pontas para o corte não ser seco */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .depo-track{display:flex;width:max-content;animation:depo-rola 48s linear infinite} .depo-track--volta{animation-direction:reverse} .depo-track:hover{animation-play-state:paused} .depo-row{display:flex;gap:18px;padding-right:18px} @keyframes depo-rola{to{transform:translateX(-50%)}} .depo-marquee .qcard{width:360px;flex:none;white-space:normal} @media (max-width:560px){ .depo-marquee .qcard{width:300px} .depo-track{animation-duration:38s} } @media (prefers-reduced-motion:reduce){ .depo-track{animation:none} } .qcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px} .qcard .who{display:flex;align-items:center;gap:12px;margin-bottom:16px} .qcard .av{ width:42px;height:42px;border-radius:50%;color:#fff;flex:none; display:flex;align-items:center;justify-content:center; font-family:var(--display);font-weight:700;font-size:14px; /* quando o .av é uma foto, e não as iniciais */ object-fit:cover;background:var(--surface); } .qcard .who b{font-family:var(--display);font-weight:600;display:block;line-height:1.2} .qcard .who small{color:var(--muted-2);font-size:13px} .qcard blockquote{color:#37453F;font-size:15px;line-height:1.65} /* ============ suporte ============ */ .suporte{padding:100px 0} .suporte .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} .suporte .media .ph{height:380px} /* foto real no lugar do placeholder: mesmo raio do .ph, sem tracejado. display:block obrigatorio, senao o baseline do inline deixa uma folga de alguns px embaixo do card. */ .suporte .media picture{display:block} .shot{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)} .suporte h2{max-width:420px;margin:18px 0 20px} .suporte p{color:var(--muted);font-size:16.5px;max-width:420px;margin-bottom:30px;font-weight:500} /* ============ FAQ ============ */ .faq-sec{padding:100px 0 110px} .faq-sec .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:start} .faq-sec h2{max-width:420px} .faq-sec .grid > div > p{color:var(--muted);margin-top:20px;max-width:400px;font-weight:500} details{ background:#fff;border:1px solid var(--line);border-radius:14px; padding:0 22px;margin-bottom:12px; } summary{ cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:var(--display);font-weight:600;font-size:16px;padding:19px 0; } summary::-webkit-details-marker{display:none} summary .plus{ flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--ink); display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform .25s; } details[open] .plus{transform:rotate(45deg)} details .answer{padding:0 0 20px;color:var(--muted);font-size:15px} /* ============================================================ MEGA-MENU ============================================================ */ .topbar{z-index:70} .nav-links{align-items:center;gap:6px} .nav-links > a{padding:11px 16px;border-radius:9999px;transition:background .16s,color .16s} .nav-links > a:hover{background:var(--surface);color:var(--ink)} .nav-links .navlink{ font-family:var(--body);font-size:15.5px;font-weight:500;color:#3D4C47; background:transparent;border:none;cursor:pointer;line-height:1; display:inline-flex;align-items:center;gap:7px; padding:11px 16px;border-radius:9999px; transition:background .16s,color .16s; } .nav-links .navlink:hover{background:var(--surface);color:var(--ink)} .nav-links .navlink[aria-expanded="true"]{background:var(--surface);color:var(--ink)} .nav-links .navlink .caret{transition:transform .2s} .nav-links .navlink[aria-expanded="true"] .caret{transform:rotate(180deg)} .nav-login{font-size:15px;font-weight:500;color:var(--muted);transition:color .16s} .nav-login:hover{color:var(--ink)} .mm-scrim{ position:fixed;inset:76px 0 0;background:rgba(2,28,22,.06); opacity:0;visibility:hidden;z-index:55; transition:opacity .18s ease,visibility 0s linear .18s; } body.mm-open .mm-scrim{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s} /* cartão flutuante, arredondado nos 4 cantos, largura pelo conteúdo */ .mm{ position:absolute;top:calc(100% + 10px);left:50%;z-index:65; width:max-content;max-width:calc(100vw - 40px); background:#fff;border:1px solid var(--line);border-radius:20px; box-shadow:0 24px 48px -20px rgba(2,28,22,.22),0 2px 6px rgba(2,28,22,.04); padding:16px; opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px); transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s; } .mm[data-open="true"]{ opacity:1;visibility:visible;transform:translateX(-50%); transition:opacity .18s ease-out,transform .18s ease-out,visibility 0s; } .mm-cols{display:grid;gap:4px;align-items:start} /* preenche por coluna: a ordem do HTML passa a ser a ordem de leitura, o que também acerta o tab do teclado e o leitor de tela */ .mm-panel-features .mm-cols{ grid-template-columns:repeat(3,minmax(0,318px)); grid-template-rows:repeat(3,auto);grid-auto-flow:column; } .mm-panel-cases .mm-cols{grid-template-columns:repeat(3,minmax(0,300px));gap:4px 18px} .mm-panel-cases .mm-col-wide{grid-column:span 2} .mm-col-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} /* 5 itens em 2 linhas, preenchendo por coluna (a 3ª coluna fica com um só) */ .mm-panel-res .mm-cols{ grid-template-columns:repeat(3,minmax(0,318px)); grid-template-rows:repeat(2,auto);grid-auto-flow:column; } .mm-group-label{ font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-2);padding:0 16px;margin:8px 0 10px;display:block; } /* item = caixa: transparente em repouso, cinza com borda no hover */ .mm-item{ display:flex;gap:12px;align-items:flex-start;height:100%; padding:16px;border-radius:12px;border:1px solid transparent; transition:background .16s,border-color .16s; } .mm-item:hover,.mm-item:focus-visible{background:var(--surface);border-color:var(--line);outline:none} .mm-item:focus-visible{box-shadow:0 0 0 2px var(--sun)} .mm-ico{ width:36px;height:36px;border-radius:8px;background:var(--surface); display:flex;align-items:center;justify-content:center;flex:none; color:var(--heading);margin-top:1px;transition:background .16s; } .mm-item:hover .mm-ico{background:var(--sun)} .mm-item b{ font-family:var(--display);font-weight:600;font-size:15px;color:var(--heading); display:block;line-height:1.3;letter-spacing:-.01em; } .mm-item small{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px} .mm-item > span:last-child{min-width:0} /* item de recurso ainda nao lancado: nao e link, nao reage ao hover */ .mm-item--soon{cursor:default} .mm-item--soon:hover,.mm-item--soon:focus-visible{background:none;border-color:transparent;box-shadow:none} .mm-item--soon:hover .mm-ico{background:var(--surface)} .mm-item--soon .mm-ico{color:var(--muted)} .mm-item--soon b{color:var(--muted)} .mm-soon{ display:inline-block;font-family:var(--body);font-size:10.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; background:var(--surface);border:1px solid var(--line);color:var(--muted); border-radius:9999px;padding:1px 7px;margin-left:7px;vertical-align:2px; } .mm-cta b{ font-family:var(--display);font-weight:600;font-size:15px;color:var(--heading); display:block;line-height:1.3;letter-spacing:-.01em; } .mm-cta small{display:block;font-size:13px;color:var(--muted);line-height:1.3;margin-top:2px} .mm-foot{ margin:12px -16px -16px;padding:16px 26px; border-top:1px solid var(--line);background:var(--surface); border-radius:0 0 19px 19px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .mm-foot .link-arrow{font-size:15px} .mm-highlight{display:flex;align-items:center;gap:12px} .mm-highlight .thumb{ width:44px;height:32px;border-radius:8px;background:var(--ink);color:var(--sun); display:flex;align-items:center;justify-content:center;flex:none; } .mm-highlight b{font-family:var(--display);font-weight:600;font-size:14.5px;display:block;line-height:1.25} .mm-highlight small{font-size:12.5px;color:var(--muted);display:block;line-height:1.3;margin-top:2px} .mm-posts{display:flex;gap:26px;flex-wrap:wrap} .mm-posts a{max-width:225px} .mm-posts b{font-family:var(--display);font-weight:600;font-size:13.5px;display:block;line-height:1.35;color:var(--heading)} .mm-posts small{font-size:12px;color:var(--muted-2)} .mm-posts a:hover b{color:var(--sun-link)} /* ---------- hambúrguer + drawer ---------- */ .burger{ display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line); background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--ink); } .burger:hover{border-color:var(--ink)} .drawer{ position:fixed;inset:0;z-index:80;background:#fff; display:flex;flex-direction:column; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s; } .drawer[data-open="true"]{ opacity:1;visibility:visible;transform:none; transition:opacity .2s ease,transform .2s ease,visibility 0s; } .drawer-top{ height:76px;padding:0 20px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;flex:none; } .drawer-top img{height:24px;width:auto} .drawer-body{flex:1;overflow-y:auto;padding:8px 20px 24px} .drawer-body details{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;margin:0} .drawer-body summary{font-size:17px;padding:18px 0} .drawer-body .answer{padding:0 0 12px} .drawer-body .mm-item{padding:10px 0;border-color:transparent} .drawer-body .mm-item:hover{background:none;border-color:transparent} .drawer-flat{ display:flex;align-items:center;justify-content:space-between; font-family:var(--display);font-weight:600;font-size:17px;color:var(--heading); padding:18px 0;border-bottom:1px solid var(--line); } .drawer-foot{ flex:none;padding:18px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px; } .drawer-foot .btn{justify-content:center} body.drawer-open{overflow:hidden} /* ============================================================ FOOTER — painel escuro arredondado ============================================================ */ footer{background:#fff} footer .shell{border-color:var(--line)} .foot-shell{padding:0} .foot-panel{ background:var(--ink);color:#fff; padding:56px 46px 28px;position:relative;overflow:hidden; } .foot-panel::before{ content:"";position:absolute;inset:0;opacity:.10;pointer-events:none; background-image:radial-gradient(rgba(213,254,0,.55) 1.2px, transparent 1.2px); background-size:20px 20px; -webkit-mask-image:radial-gradient(75% 70% at 20% 0%,#000 0%,transparent 100%); mask-image:radial-gradient(75% 70% at 20% 0%,#000 0%,transparent 100%); } .foot-panel > *{position:relative;z-index:1} .foot-brand{margin-bottom:44px} .foot-brand img{height:26px;width:auto} .foot-grid{display:grid;grid-template-columns:repeat(4,1fr) 1.35fr;gap:32px;padding-bottom:44px} .foot-col h3{ font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--sun); margin-bottom:18px;letter-spacing:-.01em; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px} .foot-col a{ font-size:14px;color:rgba(255,255,255,.72);transition:color .16s; display:inline-flex;align-items:center;gap:5px; } .foot-col a svg{opacity:0;transform:translate(-2px,2px);transition:opacity .16s,transform .16s} .foot-col a:hover{color:var(--sun)} .foot-col a:hover svg{opacity:1;transform:none} .foot-cta h3{ font-family:var(--display);font-weight:600;font-size:17px;color:#fff; letter-spacing:-.02em;margin-bottom:18px;max-width:220px;line-height:1.3; } /* os botões vivem num div interno: o espaçamento entre eles é daqui, não do gap do .foot-cta (que só separa o título do bloco) */ .foot-cta > div{display:flex;flex-direction:column;gap:10px} .foot-cta .btn{width:100%;max-width:230px;justify-content:center} .foot-bar{ border-top:1px solid rgba(255,255,255,.10); padding-top:22px;display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap; } .foot-bar p{font-size:13px;color:rgba(255,255,255,.45);display:inline-flex;align-items:center;gap:6px} .foot-bar p svg{color:var(--sun);flex:none} .foot-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .foot-legal{display:flex;gap:20px;font-size:13px;color:rgba(255,255,255,.6)} .foot-legal a:hover{color:var(--sun)} .foot-social{display:flex;gap:8px} .foot-social a{ width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7); transition:color .16s,border-color .16s,background .16s; } .foot-social a:hover{color:var(--ink);background:var(--sun);border-color:var(--sun)} /* ============================================================ PÁGINA DE FUNCIONALIDADE (split alternado, etc.) ============================================================ */ /* 34px bastavam quando a trilha de navegação ocupava o topo; sem ela o H1 colava no cabeçalho fixo. 72px é o mesmo respiro do .pg-hero. */ .feat-hero{padding:72px 0 56px} .feat-hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center} .feat-hero h1{margin-bottom:20px} .feat-hero p.lead{max-width:460px;margin-bottom:30px} .feat-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px} .feat-hero .mini{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted)} .feat-hero .mini span{display:inline-flex;align-items:center;gap:7px} .feat-hero .mini svg{color:var(--sun-link);flex:none} /* variante com logos de canal no lugar dos checks */ .feat-hero .mini-logos{gap:26px;font-size:14.5px;font-weight:500;color:var(--heading)} .feat-hero .mini-logos span{gap:9px} .feat-hero .mini-logos img{width:22px;height:22px;flex:none;object-fit:contain} .feat-media{position:relative;min-height:360px} .feat-media .ph{position:absolute;inset:0} .split{padding:78px 0} .split .grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .split.rev .grid > *:first-child{order:2} .split h2{margin-bottom:16px;font-size:clamp(26px,2.8vw,36px)} .split p{color:var(--muted);font-size:16.5px;margin-bottom:22px;max-width:480px} .split ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px} .split li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:#37453F} .split li svg{flex:none;margin-top:3px;color:var(--sun-link)} .split .media .ph{height:380px} .split .eyebrow{ display:inline-flex;align-items:center;gap:8px;background:var(--surface); border:1px solid var(--line);border-radius:9999px;padding:6px 14px;margin-bottom:16px; font-size:13px;font-weight:600;color:var(--muted); } .split .eyebrow svg{color:var(--heading)} /* selo "em construção" — marca o que ainda não está no ar */ .badge-soon{ display:inline-flex;align-items:center;gap:6px; background:var(--sun-soft);border:1px solid #E2F49A;border-radius:9999px; padding:4px 11px;vertical-align:middle; font-family:var(--body);font-size:12.5px;font-weight:600; color:#4E6600;white-space:nowrap; } .badge-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:#8FB500;flex:none} h2 .badge-soon{font-size:13px;margin-left:12px;position:relative;top:-4px} .split .eyebrow .badge-soon{margin-left:2px;padding:2px 9px;font-size:11.5px} @media (max-width:940px){ .feat-hero .grid,.split .grid{grid-template-columns:1fr;gap:36px} .split.rev .grid > *:first-child{order:0} .feat-media{min-height:280px} .split{padding:56px 0} } /* ============================================================ CARROSSEL DE LOGOS (marquee infinito) ============================================================ */ .logos-sec{padding:56px 0 60px;overflow:hidden} .logos-label{ text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--muted-2);margin-bottom:36px; } .marquee{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .marquee-track{ display:flex;align-items:center;width:max-content; animation:marquee 46s linear infinite; } .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee-item{ flex:none;display:flex;align-items:center;justify-content:center; width:190px;height:56px;margin:0 14px; } .marquee-item img{ max-height:34px;max-width:160px;width:auto;height:auto;object-fit:contain; filter:grayscale(1) brightness(.42) opacity(.6); transition:filter .25s; } .marquee-item:hover img{filter:none} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .marquee{-webkit-mask-image:none;mask-image:none} .marquee-track > [aria-hidden="true"]{display:none} } @media (max-width:560px){ .marquee-item{width:140px;margin:0 10px} .marquee-item img{max-height:26px;max-width:120px} } /* ============================================================ PÁGINA DE PREÇOS ============================================================ */ .pg-hero{padding:72px 0 40px;text-align:center} .pg-hero h1{max-width:760px;margin:0 auto 18px} .pg-hero p.lead{max-width:560px;margin:0 auto 32px} /* alternador mensal/anual */ .toggle{ display:inline-flex;align-items:center;gap:4px;background:var(--surface); border:1px solid var(--line);border-radius:9999px;padding:4px; } .toggle button{ font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--muted); background:transparent;border:none;cursor:pointer;padding:9px 20px;border-radius:9999px; display:inline-flex;align-items:center;gap:8px;transition:background .16s,color .16s; } .toggle button[aria-pressed="true"]{background:#fff;color:var(--heading);box-shadow:0 1px 3px rgba(2,28,22,.10)} .toggle .save{ font-size:12px;font-weight:700;background:var(--sun);color:var(--ink); border-radius:9999px;padding:2px 8px; } /* cards de plano */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 0 20px;align-items:start} .plan{ background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px 32px; display:flex;flex-direction:column;height:100%;position:relative; } .plan.featured{border-color:var(--ink);box-shadow:0 18px 40px -22px rgba(2,28,22,.30)} .plan .tag{ position:absolute;top:-11px;left:26px;background:var(--sun);color:var(--ink); font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em; text-transform:uppercase;padding:4px 12px;border-radius:9999px; } .plan h2{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px} .plan .who{font-size:13.5px;color:var(--muted);display:block;margin-bottom:22px} .plan .amount{display:flex;align-items:baseline;gap:4px;font-family:var(--display);color:var(--heading)} .plan .amount .cur{font-size:19px;font-weight:600} .plan .amount .val{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1} .plan .amount .per{font-size:14px;color:var(--muted);font-family:var(--body);font-weight:500} .plan .amount.quote .val{font-size:26px} .plan .bill{font-size:12.5px;color:var(--muted-2);margin-top:8px;min-height:18px} .plan .btn{margin:22px 0 24px;justify-content:center;width:100%} .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:#37453F} .plan li svg{flex:none;margin-top:3px;color:var(--sun-link)} .plan.featured li svg{color:var(--sun-link)} .plans-note{ text-align:center;font-size:14px;color:var(--muted);padding:6px 0 64px; display:flex;gap:22px;justify-content:center;flex-wrap:wrap; } .plans-note span{display:inline-flex;align-items:center;gap:7px} .plans-note svg{color:var(--sun-link);flex:none} /* tabela comparativa */ .cmp-sec{padding:80px 0 90px} .cmp-sec .section-head{text-align:center;margin-bottom:40px} .cmp-sec h2{margin:0 auto 14px} .cmp-sec .section-head p{margin:0 auto} /* o container só rola no mobile; no desktop ele NÃO pode ser scroll container, senão o sticky do cabeçalho passa a se posicionar dentro dele */ .cmp-wrap{position:relative} table.cmp{ border-collapse:separate;border-spacing:0;width:100%;min-width:820px;font-size:14.5px; background:#fff;border:1px solid var(--line);border-radius:18px; } table.cmp th,table.cmp td{padding:13px 18px;text-align:center;border-bottom:1px solid var(--line)} table.cmp th:first-child,table.cmp td:first-child{ text-align:left;width:34%;min-width:250px;color:#37453F; } table.cmp thead th{ position:sticky;top:76px;z-index:2;background:#fff; font-family:var(--display);font-weight:600;font-size:15px;color:var(--heading); padding-top:18px;padding-bottom:18px; } table.cmp thead th:first-child{border-radius:17px 0 0 0} table.cmp thead th:last-child{border-radius:0 17px 0 0} table.cmp tbody tr:last-child td{border-bottom:none} table.cmp tbody tr:last-child td:first-child{border-radius:0 0 0 17px} table.cmp tbody tr:last-child td:last-child{border-radius:0 0 17px 0} table.cmp thead th small{display:block;font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--muted-2);margin-top:2px} table.cmp tr.cat td{ background:var(--surface);font-family:var(--display);font-weight:700;font-size:12px; letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:11px 18px; } table.cmp tbody tr:hover td:not([colspan]){background:#FCFDFB} table.cmp td .yes{color:var(--sun-link)} table.cmp td .no{color:#C5CCC8} table.cmp td.txt{font-size:14px;color:#37453F;white-space:nowrap} table.cmp .soon{ display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; background:var(--surface);border:1px solid var(--line);color:var(--muted); border-radius:9999px;padding:1px 7px;margin-left:7px;vertical-align:1px; } @media (max-width:1080px){ .plans{grid-template-columns:repeat(2,1fr)} } @media (max-width:940px){ .cmp-wrap{overflow-x:auto;border-radius:18px} table.cmp thead th{position:static} } @media (max-width:620px){ .plans{grid-template-columns:1fr} .pg-hero,.feat-hero{padding-top:48px} } /* ============ responsive ============ */ @media (max-width:1180px){ .foot-grid{grid-template-columns:repeat(3,1fr);gap:36px} .foot-cta{grid-column:span 3;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .foot-cta h3{margin-bottom:0} .foot-cta > div{flex-direction:row;flex-wrap:wrap;gap:12px} .foot-cta .btn{width:auto} } /* ============ grade de módulos (hub de funcionalidades) ============ */ /* mesma gramática do frame: separadores tracejados e barra sunglare na quina */ .modgrid{display:grid;grid-template-columns:repeat(3,1fr)} .modgrid .mod{ position:relative;display:flex;flex-direction:column; padding:52px 30px 46px; border-left:1px dashed #DDE1E6; transition:background .18s; } .modgrid .mod:nth-child(3n+1){border-left:none} .modgrid .mod:nth-child(n+4){border-top:1px dashed #DDE1E6} .modgrid .mod:hover{background:#FAFBFA} /* variante de 4 colunas (grades de 8 ou 12 itens) */ .modgrid.cols-4{grid-template-columns:repeat(4,1fr)} .modgrid.cols-4 .mod{padding:44px 26px 40px} .modgrid.cols-4 .mod:nth-child(3n+1){border-left:1px dashed #DDE1E6} .modgrid.cols-4 .mod:nth-child(4n+1){border-left:none} .modgrid.cols-4 .mod:nth-child(n+4){border-top:none} .modgrid.cols-4 .mod:nth-child(n+5){border-top:1px dashed #DDE1E6} .modgrid.cols-4 .mod h3{font-size:18px} /* grade logo abaixo de um título de seção precisa do próprio teto: no hub de funcionalidades quem faz esse papel é a faixa hachurada */ .grid-head + .modgrid{border-top:1px dashed #DDE1E6} /* linha de recursos citados — fecha a grade de links cruzados com a mesma tracejada, para os cards não ficarem sem base */ .recursos-line{border-top:1px dashed #DDE1E6;padding:34px 0 46px} .recursos-line p{color:var(--muted);font-size:15.5px;line-height:1.7} .recursos-line a{color:var(--sun-link);font-weight:600} .recursos-line a:hover{text-decoration:underline} /* cabeçalho de seção acima de uma grade */ .grid-head{padding:62px 0 30px} .grid-head h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:8px} .grid-head p{color:var(--muted);font-size:16px;max-width:620px} .mod .tick{position:absolute;top:52px;left:0;width:4px;height:26px;background:var(--sun)} .mod .mico{color:var(--heading);margin-bottom:34px;transition:transform .18s} .modgrid .mod:hover .mico{transform:translateY(-2px)} .mod h2,.mod h3{font-size:20px;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px} .mod p{color:var(--muted);font-size:14.5px;line-height:1.62;flex:1} .mod .mod-btn{ align-self:flex-start;margin-top:26px; padding:10px 17px;font-size:14.5px; background:#fff;border:1px solid var(--line); } .modgrid .mod:hover .mod-btn{background:var(--sun);border-color:var(--sun)} .mod .mod-btn svg{transition:transform .18s} .modgrid .mod:hover .mod-btn svg{transform:translateX(3px)} @media (max-width:1080px){ .modgrid,.modgrid.cols-4{grid-template-columns:repeat(2,1fr)} .modgrid .mod,.modgrid.cols-4 .mod{border-left:1px dashed #DDE1E6;border-top:1px dashed #DDE1E6} .modgrid .mod:nth-child(2n+1),.modgrid.cols-4 .mod:nth-child(2n+1){border-left:none} .modgrid .mod:nth-child(-n+2),.modgrid.cols-4 .mod:nth-child(-n+2){border-top:none} .grid-head{padding:48px 0 24px} .cols4{grid-template-columns:repeat(2,1fr)} .cols4 .cell{border-top:1px solid var(--line);padding-top:80px} .cell .tick{top:80px} .trio{grid-template-columns:1fr} .trio .tcard{border-left:none;border-top:1px solid var(--line)} } @media (max-width:940px){ .hero-grid{grid-template-columns:1fr;padding-top:48px} .hero-media{min-height:0} .hero-img{margin-top:8px} .duo{grid-template-columns:1fr} .duo .dcard{border-left:none;border-top:1px solid var(--line)} .suite .head,.suporte .grid,.faq-sec .grid{grid-template-columns:1fr;gap:36px} .nav-links{display:none} .nav-right .sep,.nav-login{display:none} .burger{display:flex} .mm,.mm-scrim{display:none} .chip{display:none} .custa .row{flex-direction:column} } @media (max-width:720px){ .foot-panel{padding:44px 26px 24px} .foot-grid{grid-template-columns:repeat(2,1fr);gap:30px;padding-bottom:34px} .foot-cta{grid-column:span 2;flex-direction:column;align-items:flex-start;gap:14px} .foot-cta .btn{width:100%;max-width:none} .foot-bar{flex-direction:column;align-items:flex-start;gap:16px} .foot-right{gap:16px} } @media (max-width:560px){ .modgrid,.modgrid.cols-4{grid-template-columns:1fr} .modgrid .mod,.modgrid.cols-4 .mod{border-left:none;border-top:1px dashed #DDE1E6;padding:40px 22px 36px} /* anula o reset de 2 colunas do breakpoint acima, que também alcança o mobile */ .modgrid .mod:nth-child(-n+2){border-top:1px dashed #DDE1E6} .modgrid .mod:first-child{border-top:none} .mod .tick{top:40px} .inner,.inner-wide{padding:0 22px} .hero-img{--recuo:44px} .cols4{grid-template-columns:1fr} .cols4 .cell{border-left:none;padding:64px 22px 40px} .cell .tick{top:64px} .hero-notas{gap:22px} .nav{padding:0 20px} .nav-right .btn{padding:11px 16px;font-size:14.5px} } /* ============================================================ BLOG — índice, categoria e artigo A camada de prosa é escopada em `.prose` de propósito: o reset global zera margem e o `a{color:inherit;text-decoration:none}` apagaria os links dentro do texto. ============================================================ */ /* ---------- chips de categoria (links reais, não filtro em JS) ---------- */ .cat-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:0 0 8px} .cchip{ display:inline-flex;align-items:center;gap:7px;padding:8px 15px; border:1px solid var(--line);border-radius:9999px;background:#fff; font-family:var(--display);font-weight:600;font-size:14px;color:var(--heading); transition:background .16s,border-color .16s; } .cchip:hover{background:var(--surface)} .cchip[aria-current="page"]{background:var(--sun);border-color:var(--sun)} .cchip .n{font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--muted-2)} .cchip[aria-current="page"] .n{color:#4E6600} /* ---------- meta dentro do card de post ---------- */ .mod .pmeta{ display:flex;align-items:center;flex-wrap:wrap;gap:7px; font-size:12.5px;color:var(--muted-2);margin-bottom:12px; } .mod .pmeta .cat{font-family:var(--display);font-weight:600;color:var(--sun-link)} .mod .pmeta i{width:3px;height:3px;border-radius:50%;background:#C9D0CD;flex:none} .mod .pcover{margin-bottom:22px} .mod .pcover .ph{height:170px;border-radius:12px} /* ---------- post em destaque ---------- */ .post-feat{border-bottom:1px dashed #DDE1E6} .post-feat .grid{ display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center; padding:52px 0 54px; } .post-feat .ph{height:320px} .post-feat h2{font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;margin:12px 0 14px} .post-feat p{color:var(--muted);font-size:16px;line-height:1.65;max-width:520px} .post-feat .pmeta{ display:flex;align-items:center;flex-wrap:wrap;gap:7px; font-size:12.5px;color:var(--muted-2); } .post-feat .pmeta .cat{font-family:var(--display);font-weight:600;color:var(--sun-link)} .post-feat .pmeta i{width:3px;height:3px;border-radius:50%;background:#C9D0CD;flex:none} .post-feat .link-arrow{margin-top:22px;display:inline-flex} .post-feat a.grid:hover h2{color:var(--sun-link)} /* ---------- paginação ---------- */ .pager{display:flex;justify-content:center;align-items:center;gap:10px;padding:44px 0 6px} .pager span,.pager a{ min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:9999px;font-family:var(--display); font-weight:600;font-size:14.5px;color:var(--heading);padding:0 12px; } .pager a:hover{background:var(--surface)} .pager [aria-current="page"]{background:var(--sun);border-color:var(--sun)} /* ---------- topo do artigo ---------- */ .post-hero{padding:10px 0 44px} .post-hero .wrap{max-width:760px;margin:0 auto} .cat-pill{ display:inline-flex;align-items:center;padding:5px 13px;border-radius:9999px; background:var(--sun-soft);border:1px solid #E2F49A; font-family:var(--display);font-weight:600;font-size:12.5px;color:#4E6600; } .post-hero h1{ font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.025em;margin:18px 0 16px; } .post-hero p.lead{font-size:18px;line-height:1.6;margin-bottom:28px} .post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .avi{ width:42px;height:42px;border-radius:50%;flex:none; display:inline-flex;align-items:center;justify-content:center; background:var(--sun);color:var(--ink); font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em; } .post-meta .who b{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--heading);display:block;line-height:1.3} .post-meta .who span{font-size:13px;color:var(--muted-2);display:block;line-height:1.35} .post-meta .when{ display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted-2); margin-left:auto; } .post-meta .when i{width:3px;height:3px;border-radius:50%;background:#C9D0CD;flex:none} .post-cover{max-width:960px;margin:34px auto 0} .post-cover .ph{height:400px} /* ---------- corpo do artigo ---------- */ .post-body{padding:56px 0 66px} .prose{max-width:720px;margin:0 auto;font-size:17.5px;line-height:1.75;color:#243530} .prose > * + *{margin-top:22px} .prose a{color:var(--sun-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose a:hover{text-decoration-thickness:2px} .prose strong{font-weight:600;color:var(--heading)} .prose h2{ font-family:var(--display);font-weight:600;font-size:27px;line-height:1.22; letter-spacing:-.02em;color:var(--heading);margin-top:52px; } .prose h3{ font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3; letter-spacing:-.015em;color:var(--heading);margin-top:36px; } .prose h4{ font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.35; color:var(--heading);margin-top:30px; } .prose h2 + *,.prose h3 + *,.prose h4 + *{margin-top:14px} .prose ul,.prose ol{padding-left:22px} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{margin-top:9px} .prose li::marker{color:var(--sun-deep)} .prose blockquote{ border-left:3px solid var(--sun);padding:2px 0 2px 22px; font-family:var(--display);font-weight:500;font-size:19px;line-height:1.5; color:var(--heading); } .prose figure{margin-top:34px} .prose figure .ph{height:320px} .prose figcaption{ margin-top:12px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted-2); } .prose img{border-radius:14px} .prose hr{border:0;border-top:1px dashed #DDE1E6;margin-top:44px} .prose hr + *{margin-top:44px} .prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px; background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px; } .prose pre{ background:var(--ink);color:#E8F0EC;border-radius:14px;padding:20px 22px; overflow-x:auto;font-size:14px;line-height:1.65; } .prose pre code{background:none;border:0;padding:0;color:inherit;font-size:14px} /* tabela sempre dentro do embrulho rolável — nada de estourar no celular */ .prose .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px} .prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px} .prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)} .prose th{ font-family:var(--display);font-weight:600;font-size:14px;color:var(--heading); background:var(--surface);white-space:nowrap; } .prose tr:last-child td{border-bottom:0} /* ---------- assinatura ao final ---------- */ .post-sign{ max-width:720px;margin:44px auto 0;padding-top:26px;border-top:1px dashed #DDE1E6; display:flex;align-items:center;gap:13px; } .post-sign .who b{font-family:var(--display);font-weight:600;font-size:15px;color:var(--heading);display:block} .post-sign .who span{font-size:13.5px;color:var(--muted-2);display:block;line-height:1.4} @media (max-width:940px){ .post-feat .grid{grid-template-columns:1fr;gap:26px;padding:40px 0 42px} .post-feat .ph{height:240px} .post-cover .ph{height:280px} } @media (max-width:560px){ .post-hero{padding:6px 0 34px} .post-hero p.lead{font-size:16.5px} .post-meta .when{margin-left:0;width:100%} .post-cover .ph{height:200px} .post-body{padding:40px 0 48px} .prose{font-size:16.5px} .prose h2{font-size:23px;margin-top:42px} .prose h3{font-size:19px} .prose figure .ph{height:200px} .cat-chips{justify-content:flex-start} .mod .pcover .ph{height:150px} } /* ============================================================ MATERIAIS — índice e página de captura Nenhum campo de formulário existia no site até aqui; toda a camada de input nasce escopada em `.form-card`. ============================================================ */ /* ---------- card de material no índice ---------- */ .mod .mtype{ display:inline-flex;align-self:flex-start;align-items:center;padding:4px 11px;border-radius:9999px; background:var(--surface);border:1px solid var(--line); font-family:var(--display);font-weight:600;font-size:12px;color:var(--muted); margin-bottom:12px; } .modgrid .mod:hover .mtype{background:#fff} /* ---------- topo da página de captura ---------- */ .mat-hero{padding:8px 0 66px} .mat-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} .mat-hero h1{font-size:clamp(28px,3.6vw,42px);line-height:1.12;letter-spacing:-.025em;margin:16px 0 16px} .mat-hero p.lead{font-size:17.5px;line-height:1.6;margin-bottom:26px} .mat-hero .mat-cover{margin-top:30px} .mat-hero .mat-cover .ph{height:260px} /* fichinha do material: formato, páginas, tempo */ .mat-facts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .mat-facts span{ display:inline-flex;align-items:center;gap:7px;padding:7px 13px; background:var(--surface);border:1px solid var(--line);border-radius:9999px; font-size:13.5px;color:var(--muted); } .mat-facts svg{color:var(--sun-deep);flex:none} .mat-inside{margin-top:6px} .mat-inside h2{font-size:20px;line-height:1.3;letter-spacing:-.015em;margin-bottom:14px} .mat-inside ul{display:grid;gap:11px} .mat-inside li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--muted)} .mat-inside li svg{color:var(--sun-deep);flex:none;margin-top:3px} /* ---------- cartão de formulário ---------- */ .form-card{ background:#fff;border:1px solid var(--line);border-radius:20px; padding:30px 30px 26px;box-shadow:0 10px 30px rgba(2,28,22,.05); } .form-card h2{font-size:21px;line-height:1.25;letter-spacing:-.015em;margin-bottom:6px} .form-card .sub{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:22px} .field{display:block;margin-bottom:15px} .field > span{ display:block;font-family:var(--display);font-weight:600;font-size:13.5px; color:var(--heading);margin-bottom:6px; } .field input{ width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:12px; padding:12px 14px;transition:border-color .16s,box-shadow .16s; } .field input::placeholder{color:#9AA5A1} .field input:focus{ outline:none;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(213,254,0,.35); } .field input:user-invalid{border-color:#C2453B} .consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px} .consent input{ width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--sun-deep);cursor:pointer; } .consent span{font-size:13px;line-height:1.5;color:var(--muted-2)} .consent a{color:var(--sun-link);text-decoration:underline;text-underline-offset:2px} .form-card .btn{width:100%;justify-content:center} .form-card .foot-note{ margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted-2);text-align:center; } .form-msg{ display:none;margin-top:16px;padding:13px 15px;border-radius:12px; font-size:14.5px;line-height:1.5; } .form-msg.err{display:block;background:#FDF2F1;border:1px solid #F3D2CE;color:#8E2F26} .form-ok{display:none;text-align:center;padding:6px 0 2px} .form-ok .tick-round{ width:52px;height:52px;border-radius:50%;background:var(--sun); display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px; } .form-ok h2{margin-bottom:8px} .form-ok p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:20px} .form-card[data-state="ok"] form, .form-card[data-state="ok"] > h2, .form-card[data-state="ok"] > .sub{display:none} .form-card[data-state="ok"] .form-ok{display:block} .btn[aria-busy="true"]{opacity:.65;pointer-events:none} @media (max-width:940px){ .mat-hero .grid{grid-template-columns:1fr;gap:34px} .mat-hero{padding:8px 0 48px} } @media (max-width:560px){ .form-card{padding:24px 20px 22px;border-radius:16px} .mat-hero .mat-cover .ph{height:190px} } /* ============================================================ CENTRAL DE AJUDA — hub, categoria e artigo O artigo reusa `.prose`; o que nasce aqui é o passo a passo, o vídeo responsivo, a lista de artigos e a coluna lateral. ============================================================ */ /* ---------- busca do hub ---------- */ .help-search{max-width:560px;margin:0 auto;position:relative} .help-search svg{ position:absolute;left:18px;top:50%;transform:translateY(-50%); color:var(--muted-2);pointer-events:none; } .help-search input{ width:100%;font-family:var(--body);font-size:16px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:9999px; padding:14px 20px 14px 48px;transition:border-color .16s,box-shadow .16s; } .help-search input::placeholder{color:#9AA5A1} .help-search input:focus{ outline:none;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(213,254,0,.35); } .help-results{max-width:560px;margin:14px auto 0;display:none} .help-results[data-open="true"]{display:block} .help-results .rcount{font-size:13px;color:var(--muted-2);margin-bottom:8px;text-align:center} .help-results ul{display:grid;gap:2px} .help-results a{ display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px; font-size:15px;color:var(--heading);transition:background .14s; } .help-results a:hover{background:var(--surface)} .help-results a small{margin-left:auto;font-size:12.5px;color:var(--muted-2);flex:none} .help-results li[hidden]{display:none} /* ---------- lista de artigos (categoria e coluna lateral) ---------- */ .help-list{display:grid;border-top:1px dashed #DDE1E6} .help-list a{ display:flex;align-items:center;gap:18px;padding:22px 4px; border-bottom:1px dashed #DDE1E6;transition:background .14s; } .help-list a:hover{background:#FAFBFA} .help-list .txt b{ display:block;font-family:var(--display);font-weight:600;font-size:17px; line-height:1.35;color:var(--heading);margin-bottom:4px; } .help-list .txt span{display:block;font-size:14.5px;line-height:1.55;color:var(--muted)} .help-list .go{ margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center; color:var(--heading);transition:background .16s,border-color .16s; } .help-list a:hover .go{background:var(--sun);border-color:var(--sun)} /* ---------- artigo: conteúdo + coluna lateral ---------- */ .help-art{padding:8px 0 70px} .help-art .grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start} .help-art .prose{max-width:none;margin:0} .help-meta{ display:flex;align-items:center;flex-wrap:wrap;gap:8px; font-size:13px;color:var(--muted-2);margin-bottom:30px; } .help-meta i{width:3px;height:3px;border-radius:50%;background:#C9D0CD;flex:none} .help-art h1{font-size:clamp(28px,3.2vw,38px);line-height:1.15;letter-spacing:-.02em;margin:14px 0 12px} .help-art p.lead{font-size:17.5px;line-height:1.6;margin-bottom:18px} .help-side{position:sticky;top:96px;display:grid;gap:26px} .help-side .box{border:1px solid var(--line);border-radius:16px;padding:20px 22px} .help-side .box h2{ font-size:13px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-2);font-weight:600;margin-bottom:12px; } .help-side .toc{display:grid;gap:9px} .help-side .toc a{ font-size:14.5px;line-height:1.45;color:var(--muted); border-left:2px solid var(--line);padding-left:12px;transition:color .14s,border-color .14s; } .help-side .toc a:hover{color:var(--heading);border-color:var(--sun)} .help-side .more{display:grid;gap:11px} .help-side .more a{font-size:14.5px;line-height:1.45;color:var(--heading)} .help-side .more a:hover{color:var(--sun-link)} .help-side .ask{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px} .help-side .ask b{font-family:var(--display);font-weight:600;font-size:15.5px;display:block;margin-bottom:6px} .help-side .ask p{font-size:13.5px;line-height:1.55;color:var(--muted);margin-bottom:14px} /* ---------- passo a passo ---------- */ .steps{counter-reset:passo;display:grid;gap:34px;margin-top:26px} .step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:18px;align-items:start} .step::before{ counter-increment:passo;content:counter(passo); width:38px;height:38px;border-radius:50%;background:var(--sun);color:var(--ink); display:inline-flex;align-items:center;justify-content:center; font-family:var(--display);font-weight:600;font-size:16px; } .step h3{ font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3; letter-spacing:-.015em;color:var(--heading);margin:6px 0 8px; } .step p{font-size:16px;line-height:1.7;color:#243530} .step p + p{margin-top:12px} .step p a{color:var(--sun-link);text-decoration:underline;text-underline-offset:3px} .step .ph{height:280px;margin-top:16px} .step .nota{ margin-top:14px;background:var(--sun-soft);border:1px solid #E2F49A;border-radius:12px; padding:13px 16px;font-size:14.5px;line-height:1.6;color:#3E5200; } .step .nota b{font-family:var(--display);font-weight:600} /* ---------- vídeo responsivo ---------- */ .video{ position:relative;width:100%;padding-top:56.25%;margin-top:26px; background:var(--ink);border-radius:16px;overflow:hidden; } .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:1080px){ .help-art .grid{grid-template-columns:minmax(0,1fr);gap:40px} .help-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .help-side{grid-template-columns:1fr} .step{grid-template-columns:30px minmax(0,1fr);gap:14px} .step::before{width:30px;height:30px;font-size:14px} .step h3{font-size:17.5px;margin-top:2px} .step .ph{height:190px} .help-list a{padding:18px 2px;gap:12px} .help-list .txt b{font-size:16px} } /* Fachada do vídeo: nada de terceiro carrega antes do clique — o iframe só entra depois, o que evita cookie de terceiro e peso na primeira renderização. */ .video[data-video]{cursor:pointer} .video .video-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:66px;height:66px;border-radius:50%;background:var(--sun);color:var(--ink); display:inline-flex;align-items:center;justify-content:center; transition:transform .18s; } .video[data-video]:hover .video-play{transform:translate(-50%,-50%) scale(1.06)} .video .video-label{ position:absolute;left:0;right:0;bottom:22px;text-align:center; font-family:var(--display);font-weight:600;font-size:14.5px;color:#E8F0EC; } .video[data-video]:focus-visible{outline:3px solid var(--sun);outline-offset:3px} /* ============================================================ INTEGRAÇÕES — catálogo com busca ============================================================ */ .int-search{max-width:520px;margin:26px auto 0;position:relative} .int-search svg{ position:absolute;left:18px;top:50%;transform:translateY(-50%); color:var(--muted-2);pointer-events:none; } .int-search input{ width:100%;font-family:var(--body);font-size:16px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:9999px; padding:14px 20px 14px 48px;transition:border-color .16s,box-shadow .16s; } .int-search input::placeholder{color:#9AA5A1} .int-search input:focus{ outline:none;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(213,254,0,.35); } .int-count{margin-top:12px;font-size:13.5px;color:var(--muted-2);text-align:center;min-height:20px} .ilogo{ width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line); display:inline-flex;align-items:center;justify-content:center; margin-bottom:26px;transition:border-color .18s,transform .18s; } .ilogo img{width:26px;height:26px;object-fit:contain} .ilogo svg{color:var(--heading)} .modgrid .mod:hover .ilogo{border-color:#D8DDE3;transform:translateY(-2px)} .mod .icat{ display:inline-flex;align-self:flex-start;align-items:center;padding:4px 11px;border-radius:9999px; background:var(--surface);border:1px solid var(--line); font-family:var(--display);font-weight:600;font-size:12px;color:var(--muted); margin-bottom:12px; } .mod[hidden]{display:none} .int-empty{display:none;padding:56px 0 60px;text-align:center} .int-empty[data-open="true"]{display:block} .int-empty h2{font-size:22px;margin-bottom:10px} .int-empty p{color:var(--muted);font-size:15.5px;max-width:440px;margin:0 auto 20px} /* ============================================================ MANIFESTO — texto grande, sem animação ============================================================ */ .manifesto{padding:72px 0 90px} .manifesto .col{max-width:820px;margin:0 auto} .mstanza{margin-bottom:54px} .mstanza:last-child{margin-bottom:0} .mline{ font-family:var(--display);font-weight:600; font-size:clamp(21px,2.2vw,30px);line-height:1.3;letter-spacing:-.024em; color:var(--heading); } .mline + .mline{margin-top:15px} .mclose{margin-top:70px;padding-top:46px;border-top:1px dashed #DDE1E6;text-align:center} .mclose .mline{font-size:clamp(24px,2.9vw,38px);line-height:1.18} .mclose .sun-line{color:var(--sun-deep)} @media (max-width:640px){ .manifesto{padding:52px 0 66px} .mstanza{margin-bottom:40px} .mclose{margin-top:48px;padding-top:34px} .mline{line-height:1.2;letter-spacing:-.025em} } /* ============================================================ IMPRENSA — boilerplate, kit de marca e paleta ============================================================ */ .copybox{ border:1px solid var(--line);border-radius:16px;background:#fff; padding:24px 26px 20px;margin-top:22px; } .copybox h3{ font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted-2); letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px; } .copybox p{font-size:15.5px;line-height:1.7;color:#243530} .copybox p + p{margin-top:12px} .copybox .btn{margin-top:18px} .copy-ok{display:none;margin-left:10px;font-size:13.5px;color:var(--sun-link);font-weight:600} .copybox[data-copied="true"] .copy-ok{display:inline} .brandgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px} .brandcard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff} .brandcard .art{ height:150px;display:flex;align-items:center;justify-content:center;padding:24px; border-bottom:1px solid var(--line); } .brandcard .art img{max-width:180px;max-height:70px;width:auto;height:auto;object-fit:contain} .brandcard .art.on-dark{background:var(--ink)} .brandcard .art.on-soft{background:var(--surface)} .brandcard .info{padding:16px 18px 18px} .brandcard b{ font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--heading); display:block;margin-bottom:3px; } .brandcard small{font-size:13px;color:var(--muted-2);display:block;margin-bottom:14px} .brandcard .btn{padding:9px 15px;font-size:14px} .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px} .swatch{border:1px solid var(--line);border-radius:14px;overflow:hidden} .swatch .chip-cor{height:88px} .swatch .meta{padding:12px 14px 14px} .swatch b{ font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--heading); display:block;margin-bottom:2px; } .swatch code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px;color:var(--muted-2); } @media (max-width:940px){ .brandgrid{grid-template-columns:1fr 1fr} .swatches{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .brandgrid{grid-template-columns:1fr} .copybox{padding:20px 18px 18px} } /* ============================================================ CARREIRAS — lista de vagas e página da vaga ============================================================ */ /* As etiquetas da vaga são sempre em linha. A regra explícita existe porque dentro da lista de ajuda o `span` é block e transformava cada etiqueta numa barra de largura cheia. */ .vaga-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .vaga-tags span, .help-list .txt .vaga-tags span, .mod .vaga-tags span{ display:inline-flex;width:auto;align-items:center;gap:6px;padding:5px 10px; background:var(--surface);border:1px solid var(--line);border-radius:9999px; font-family:var(--body);font-size:12.5px;line-height:1.2;color:var(--muted); } .vaga-tags svg{color:var(--sun-deep);flex:none} /* card de vaga na grade padrão do site */ .modgrid .mod.vaga h2{margin-bottom:8px} .mod .vaga-tags{margin:14px 0 0;align-self:stretch} .modgrid .mod.vaga:hover .vaga-tags span{background:#fff} .vagas-vazio{ border:1px dashed #DDE1E6;border-radius:18px;padding:44px 30px;text-align:center; background:#FAFBFA; } .vagas-vazio h2{font-size:21px;margin-bottom:10px} .vagas-vazio p{color:var(--muted);font-size:15.5px;max-width:460px;margin:0 auto 20px} .vaga-hero{padding:10px 0 42px} .vaga-hero h1{font-size:clamp(28px,3.4vw,42px);line-height:1.12;letter-spacing:-.025em;margin:14px 0 14px} .vaga-hero p.lead{font-size:17.5px;line-height:1.6} .vaga-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:58px;align-items:start} .vaga-bloco{margin-top:40px} .vaga-bloco h2{font-size:21px;line-height:1.3;letter-spacing:-.015em;margin-bottom:16px} .vaga-bloco ul{display:grid;gap:11px} .vaga-bloco li{display:flex;gap:11px;align-items:flex-start;font-size:16px;line-height:1.6;color:#243530} .vaga-bloco li svg{color:var(--sun-deep);flex:none;margin-top:4px} .vaga-bloco p{font-size:16px;line-height:1.7;color:#243530} .vaga-bloco p + p{margin-top:12px} .vaga-side{position:sticky;top:96px;display:grid;gap:20px} .vaga-resumo{border:1px solid var(--line);border-radius:16px;padding:20px 22px} .vaga-resumo dl{display:grid;gap:12px} .vaga-resumo dt{ font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-2);margin-bottom:2px; } .vaga-resumo dd{font-size:15px;color:var(--heading)} .vaga-resumo h2{ font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted-2);margin-bottom:10px; } @media (max-width:1080px){ .vaga-grid{grid-template-columns:1fr;gap:36px} .vaga-side{position:static} } @media (max-width:560px){ .vaga-hero{padding:6px 0 32px} } /* ============================================================ LEGAL — termos e privacidade ============================================================ */ .legal-hero{padding:8px 0 30px} .legal-hero h1{font-size:clamp(30px,3.6vw,42px);line-height:1.12;letter-spacing:-.025em;margin:14px 0 12px} .legal-hero p.lead{font-size:17px;line-height:1.6;max-width:720px} .legal-meta{ display:flex;align-items:center;flex-wrap:wrap;gap:8px; font-size:13px;color:var(--muted-2);margin-top:16px; } .legal-meta i{width:3px;height:3px;border-radius:50%;background:#C9D0CD;flex:none} .legal-body{padding:6px 0 74px} .legal-body .grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:58px;align-items:start} .legal-body .prose{max-width:none;margin:0} .legal-body .prose h2{font-size:22px;margin-top:44px} .legal-body .prose h2:first-child{margin-top:0} .legal-body .prose h3{font-size:17.5px;margin-top:26px} .legal-body .prose{font-size:16px;line-height:1.72} /* campo que depende de dado jurídico da empresa — impossível não ver */ .fill{ background:var(--sun-soft);border:1px solid #E2F49A;border-radius:6px; padding:1px 7px;font-family:var(--display);font-weight:600;font-size:14.5px;color:#4E6600; white-space:nowrap; } .legal-side{position:sticky;top:96px} .legal-side .box{border:1px solid var(--line);border-radius:16px;padding:20px 22px} .legal-side h2{ font-size:12px;letter-spacing:.07em;text-transform:uppercase; color:var(--muted-2);font-weight:600;margin-bottom:12px; } .legal-side .toc{display:grid;gap:9px;max-height:60vh;overflow:auto} .legal-side .toc a{ font-size:14px;line-height:1.4;color:var(--muted); border-left:2px solid var(--line);padding-left:11px;transition:color .14s,border-color .14s; } .legal-side .toc a:hover{color:var(--heading);border-color:var(--sun)} @media (max-width:1080px){ /* minmax(0,...) e não 1fr: senão o min-width da tabela estica a coluna para além da tela e a tabela é cortada em vez de rolar sozinha */ .legal-body .grid{grid-template-columns:minmax(0,1fr);gap:34px} .legal-side{position:static;order:-1} .legal-side .toc{max-height:none} } /* ============================================================ CONTATO — cards de canal e modal de solicitação ============================================================ */ /* o card de canal é botão ou link, mas usa o mesmo desenho do .mod */ .modgrid button.mod{ width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer; border-left:1px dashed #DDE1E6; } .modgrid button.mod:first-child{border-left:none} .mod .cico-canal{ width:52px;height:52px;border-radius:14px;background:var(--surface); display:inline-flex;align-items:center;justify-content:center;color:var(--heading); margin-bottom:26px;transition:background .18s,transform .18s; } .modgrid .mod:hover .cico-canal{background:var(--sun);transform:translateY(-2px)} /* campos que o site ainda não tinha */ .field select, .field textarea{ width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:12px; padding:12px 14px;transition:border-color .16s,box-shadow .16s; } .field textarea{min-height:104px;resize:vertical;line-height:1.6} .field select:focus,.field textarea:focus{ outline:none;border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(213,254,0,.35); } /* ---------- modal ---------- */ dialog.modal{ /* o reset global zera margin e o dialog perde a centralização nativa */ margin:auto; width:min(520px,calc(100vw - 32px));border:1px solid var(--line);border-radius:22px; padding:0;background:#fff;color:var(--ink); box-shadow:0 26px 70px rgba(2,28,22,.22); } dialog.modal::backdrop{background:rgba(2,28,22,.42);backdrop-filter:blur(2px)} .modal .m-head{ display:flex;align-items:flex-start;gap:16px; padding:28px 28px 0; } .modal .m-head h2{font-size:22px;line-height:1.24;letter-spacing:-.02em;margin-bottom:6px} .modal .m-head p{font-size:14.5px;line-height:1.55;color:var(--muted)} .modal .m-fechar{ margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--heading); display:inline-flex;align-items:center;justify-content:center;transition:background .16s; } .modal .m-fechar:hover{background:var(--surface)} .modal form{padding:22px 28px 26px} .modal .btn{width:100%;justify-content:center} .modal .foot-note{margin-top:13px;font-size:12.5px;line-height:1.5;color:var(--muted-2);text-align:center} .modal .form-msg{margin:0 28px 24px} .modal .m-ok{display:none;padding:34px 28px 30px;text-align:center} .modal[data-state="ok"] form, .modal[data-state="ok"] .m-head p{display:none} .modal[data-state="ok"] .m-ok{display:block} .m-ok .tick-round{ width:56px;height:56px;border-radius:50%;background:var(--sun); display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px; } .m-ok h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;margin-bottom:10px} .m-ok p{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:360px;margin:0 auto} .m-ok .prazo{ display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 15px; background:var(--sun-soft);border:1px solid #E2F49A;border-radius:9999px; font-family:var(--display);font-weight:600;font-size:13.5px;color:#4E6600; } @media (max-width:560px){ .modal .m-head{padding:22px 20px 0} .modal form{padding:18px 20px 22px} .modal .form-msg{margin:0 20px 20px} } /* ============================================================ VINHETAS DA PÁGINA DE CRM Mesma linguagem das outras (recorte tracejado + painel entrando pelo canto e sangrando). A UI reproduz telas reais do app: kanban (crm/kanban/page.tsx: StageColumn/DealCard), registro do negócio (DealRecord + DealFields + RecordTabs), proposta pública (app/proposta/[token]), playbook (PlaybookSection) e dashboards (analise/dashboards). As cores dos estágios são as do seed da API (CreatePipelineUseCase): #3B82F6 #F59E0B #8B5CF6 #EC4899 #22C55E. ============================================================ */ .feat-media .vin{position:absolute;inset:0} .split .media .vin{height:380px} .vin-crm .vin-panel,.vin-aut .vin-panel,.vin-cmp .vin-panel,.vin-ia .vin-panel,.vin-nw .vin-panel,.vin-dm .vin-panel,.vin-ib .vin-panel,.vin-cl .vin-panel,.vin-rl .vin-panel,.vin-hb .vin-panel,.vin-imo .vin-panel,.vin-cor .vin-panel,.vin-ag .vin-panel,.vin-fn .vin-panel,.vin-edu .vin-panel,.vin-vj .vin-panel,.vin-rt .vin-panel,.vin-cn .vin-panel,.vin-vd .vin-panel,.vin-ate .vin-panel,.vin-mk .vin-panel,.vin-fi .vin-panel,.vin-sbr .vin-panel{top:24px;left:32px;right:-40px;bottom:-34px;padding:12px} .vin-crm,.vin-aut,.vin-cmp,.vin-ia,.vin-nw,.vin-dm,.vin-ib,.vin-cl,.vin-rl,.vin-hb,.vin-imo,.vin-cor,.vin-ag,.vin-fn,.vin-edu,.vin-vj,.vin-rt,.vin-cn,.vin-vd,.vin-ate,.vin-mk,.vin-fi,.vin-sbr{font-size:11.5px} /* -- peças compartilhadas do kanban -- */ .kb{display:flex;gap:8px;align-items:stretch;height:100%} .kb-col{width:152px;flex:none;background:#F7F8F7;border-radius:8px;padding:9px; display:flex;flex-direction:column;gap:6px} .kb-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#111114} .kb-dot{width:7px;height:7px;border-radius:50%;flex:none} .kb-n{margin-left:auto;background:#EDEDED;border-radius:99px;padding:1px 5px; font-size:9px;font-weight:600;color:#3F3F3F;font-variant-numeric:tabular-nums} .kb-tot{font-size:9px;color:#616161;font-variant-numeric:tabular-nums;margin-top:-3px} .kb-card{position:relative;background:#fff;border:1px solid #E6E6E6;border-radius:7px; padding:7px 8px 7px 11px;overflow:hidden} .kb-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)} /* espaço para o avatar, que é absoluto no canto: sem isso o título passa por baixo */ .kb-t{font-size:10.5px;font-weight:600;line-height:1.3;color:#111114;padding-right:22px} .kb-v{font-size:12px;font-weight:700;letter-spacing:-.01em;color:#111114; font-variant-numeric:tabular-nums;margin-top:3px} .kb-tag{display:inline-flex;align-items:center;gap:4px;background:#F1F1F1;border-radius:99px; padding:1px 6px;font-size:8.5px;font-weight:500;color:#4A4A4A;margin-top:4px} .kb-tag i{width:5px;height:5px;border-radius:50%;display:block} .kb-meta{display:flex;align-items:center;gap:4px;font-size:9px;color:#616161;margin-top:4px} .kb-meta svg{width:9px;height:9px;flex:none} .kb-av{position:absolute;right:7px;top:7px;width:16px;height:16px;border-radius:50%; display:grid;place-items:center;font-size:7.5px;font-weight:700;color:#fff} /* -- 1. quadro do funil (hero) -- */ .vin-board .vin-panel{padding:12px 0 0 12px} /* -- 2. arrastar e soltar -- */ .vin-drag .vin-panel{padding:12px 0 0 12px} .vin-drag .kb-col{width:176px} /* a coluna de destino acende como no app (bg-brand-accent/5 no isDraggingOver) */ .vin-drag .kb-col--alvo{transition:background .3s} .vin-drag:hover .kb-col--alvo{background:#FBFFE8} /* o vão que o card deixou: o placeholder do dnd */ .vin-drag .kb-vazio{border:1px dashed #CFCFCF;border-radius:7px;height:56px} /* o card em voo: sombra forte e leve inclinação, como o snapshot.isDragging */ .vin-drag .kb-voo{ position:absolute;z-index:4;width:164px;left:52px;top:78px; box-shadow:0 10px 24px rgba(2,28,22,.22);transform:rotate(-2deg); transition:left .9s cubic-bezier(.22,.75,.25,1),top .9s cubic-bezier(.22,.75,.25,1),transform .9s; } .vin-drag:hover .kb-voo{left:244px;top:150px;transform:rotate(1.5deg)} /* -- 3. registro do negócio em duas colunas -- */ .vin-deal .vin-panel{flex-direction:row;padding:0} .dr-aside{width:170px;flex:none;border-right:1px solid #E6E6E6;padding:12px 10px; display:flex;flex-direction:column;gap:9px} .dr-top{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center} /* o roxo do estágio Proposta (#8B5CF6) dá 4,23:1 com branco — abaixo do mínimo; escurecido só no avatar, o ponto do estágio segue na cor real */ .dr-av{width:34px;height:34px;border-radius:8px;background:#6D33E0;color:#fff; display:grid;place-items:center;font-size:12px;font-weight:700} .dr-nome{font-size:11.5px;font-weight:600;line-height:1.25;color:#111114} .dr-badge{background:#E6F0FA;color:#1D4E7A;border-radius:99px;padding:1px 7px; font-size:8.5px;font-weight:600} .dr-grupo{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#616161;margin-bottom:3px} .dr-row{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:10px;color:#111114} .dr-row svg{width:11px;height:11px;flex:none;color:#616161} .dr-lb{width:62px;flex:none;color:#616161} .dr-val{font-weight:600;font-variant-numeric:tabular-nums} .dr-chip{background:#F1F1F1;border-radius:5px;padding:1px 6px;font-size:9.5px;font-weight:600} .dr-main{flex:1;min-width:0;padding:12px;display:flex;flex-direction:column;gap:9px} .dr-tabs{display:flex;gap:12px;border-bottom:1px solid #E6E6E6;padding-bottom:6px} .dr-tab{font-size:10px;color:#616161;white-space:nowrap;padding-bottom:5px;margin-bottom:-7px} .dr-tab--on{color:#111114;font-weight:600;border-bottom:2px solid #111114} .dr-ev{display:flex;gap:7px} .dr-ev i{width:18px;height:18px;border-radius:50%;background:#F1F1F1;flex:none; display:grid;place-items:center;color:#4A4A4A} .dr-ev i svg{width:10px;height:10px} .dr-ev p{font-size:10px;color:#111114;line-height:1.35;margin:0} .dr-ev span{font-size:9px;color:#616161} /* -- 4. proposta pública (o que o cliente abre no link) -- */ .vin-prop .vin-panel{padding:0;background:#FAFAFA;right:-14px} .pr-doc{margin:12px 14px 0 12px;background:#fff;border:1px solid #E6E6E6;border-radius:10px; padding:14px;flex:1;display:flex;flex-direction:column;gap:9px} .pr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .pr-kick{font-size:8.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#616161} .pr-t{font-size:15px;font-weight:700;letter-spacing:-.015em;color:#111114;margin-top:2px} .pr-val{font-size:9.5px;color:#616161;margin-top:3px} .pr-pdf{display:inline-flex;align-items:center;gap:4px;border:1px solid #DDD;border-radius:6px; padding:3px 8px;font-size:9.5px;font-weight:500;color:#111114;flex:none} .pr-pdf svg{width:10px;height:10px} .pr-tab{border:1px solid #EDEDED;border-radius:7px;overflow:hidden} .pr-tab table{width:100%;border-collapse:collapse;font-size:9.5px} .pr-tab th{background:#F7F7F7;color:#616161;font-size:8px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 7px} .pr-tab td{padding:5px 7px;border-top:1px solid #EFEFEF;color:#111114} .pr-tab .num{text-align:right;font-variant-numeric:tabular-nums} .pr-tot{margin-left:auto;width:150px;font-size:9.5px} .pr-tot div{display:flex;justify-content:space-between;color:#616161;padding:1px 0; font-variant-numeric:tabular-nums} .pr-tot .big{border-top:1px solid #E0E0E0;margin-top:3px;padding-top:4px; color:#111114;font-weight:700;font-size:11.5px} .pr-acoes{display:flex;gap:7px;margin-top:4px} .pr-btn{border-radius:7px;padding:6px 12px;font-size:10px;font-weight:600; transition:transform .3s,box-shadow .3s} .pr-btn--ok{background:#111114;color:#fff} .pr-btn--no{border:1px solid #DDD;color:#111114} .vin-prop:hover .pr-btn--ok{transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,28,22,.22)} /* -- 5. playbook -- */ .vin-play .vin-panel{padding:12px 0 0 12px;background:#FAFAFA} .pb-head{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:10px;margin-right:52px} .pb-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px} .pb-ico{width:26px;height:26px;border-radius:7px;background:#F1F1F1;color:#4A4A4A; display:grid;place-items:center;flex:none} .pb-ico svg{width:13px;height:13px} .pb-nome{font-size:11px;font-weight:600;color:#111114} .pb-sub{font-size:9px;color:#616161} .pb-pct{font-size:14px;font-weight:600;color:#111114;font-variant-numeric:tabular-nums;text-align:right} .pb-frac{font-size:8.5px;color:#616161;font-variant-numeric:tabular-nums;text-align:right} .pb-bar{height:5px;border-radius:99px;background:#EDEDED;margin-top:8px;overflow:hidden} .pb-bar i{display:block;height:100%;border-radius:99px;background:#111114; transition:width .7s cubic-bezier(.16,1,.3,1)} .pb-etapa{position:relative;display:flex;gap:9px;padding-top:10px} /* a linha conectora da timeline */ .pb-etapa::before{content:"";position:absolute;left:11px;top:34px;bottom:-10px;width:1px;background:#E0E0E0} .pb-etapa:last-child::before{display:none} .pb-no{position:relative;z-index:1;width:23px;height:23px;border-radius:50%;flex:none; display:grid;place-items:center;font-size:9.5px;font-weight:600; border:1px solid #E0E0E0;background:#fff;color:#616161} .pb-no--ok{background:#21C45D;border-color:#21C45D;color:#fff} .pb-no--ok svg{width:11px;height:11px} .pb-no--atual{border-color:#111114;color:#111114} .pb-box{flex:1;min-width:0;background:#fff;border:1px solid #E6E6E6;border-radius:9px; padding:8px 9px;margin-right:14px} .pb-brow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px} .pb-et{font-size:10.5px;font-weight:500;color:#111114} .pb-atual{border:1px solid #E0E0E0;border-radius:99px;padding:0 6px;font-size:8px;font-weight:500} .pb-cont{font-size:9px;color:#616161;font-variant-numeric:tabular-nums} .pb-mini{height:3px;border-radius:99px;background:#EDEDED;overflow:hidden;margin-bottom:6px} .pb-mini i{display:block;height:100%;border-radius:99px} .pb-item{display:flex;align-items:flex-start;gap:6px;padding:2px 0;font-size:10px;color:#111114} .pb-cx{width:11px;height:11px;border-radius:3px;border:1px solid #C9C9C9;flex:none;margin-top:1px; display:grid;place-items:center;background:#fff} .pb-cx svg{width:8px;height:8px;color:#fff;opacity:0} .pb-item--ok .pb-cx{background:#111114;border-color:#111114} .pb-item--ok .pb-cx svg{opacity:1} .pb-item--ok span{color:#616161;text-decoration:line-through} .pb-obr{border:1px solid #E7B4B4;color:#B91C1C;border-radius:3px;padding:0 3px; font-size:7.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-left:4px} /* -- 6. dashboards prontos -- */ .vin-dash .vin-panel{padding:0;background:#FAFAFA} .dh-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff; border-bottom:1px solid #E6E6E6} .dh-tab{font-size:10px;color:#616161;padding-bottom:3px} .dh-tab--on{color:#111114;font-weight:600;border-bottom:2px solid #111114} .dh-grid{display:grid;grid-template-columns:118px 1fr;gap:9px;padding:11px 0 0 12px;align-items:start} .dh-card{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:10px; display:flex;flex-direction:column;gap:7px} .dh-t{font-size:9.5px;font-weight:600;color:#111114;line-height:1.25} .dh-metric{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#111114; font-variant-numeric:tabular-nums} .dh-delta{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:600;color:#15803D} .dh-delta svg{width:9px;height:9px} .dh-bars{display:flex;align-items:flex-end;gap:9px;height:74px} .dh-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:flex-end;height:100%} .dh-b i{display:block;width:62%;border-radius:3px 3px 0 0;transition:height .6s cubic-bezier(.16,1,.3,1)} .dh-b span{font-size:8px;color:#616161;white-space:nowrap} .dh-card--wide{grid-column:1 / -1;margin-right:12px} .dh-line{width:100%;height:56px;display:block} .dh-meses{display:flex;justify-content:space-between;font-size:8px;color:#616161} /* -- etiquetas e cursores das vinhetas do CRM -- */ .nb-note{top:4px;left:40px} .dg-note{top:4px;right:52px} .dg-note::after{left:auto;right:16px} .dl-note{top:4px;left:40px} .pp-note{top:4px;right:52px} .pp-note::after{left:auto;right:16px} .pb-note{top:4px;left:40px} .dh-note{top:4px;right:52px} .dh-note::after{left:auto;right:16px} /* .vin .cur i (mais abaixo) tem a MESMA especificidade e vence no desempate por ordem: sem o .vin extra aqui, o left:13px de lá continuava valendo junto com o right:13px daqui, a caixa da etiqueta ia a zero e o texto vazava para fora do fundo. */ .vin.vin-crm .cur--lilac i{left:auto;right:13px} .vin-board .cur--yellow{left:20px;top:296px} .vin-board .cur--lilac{left:calc(100% - 54px);top:300px} .vin-board:hover .cur--yellow{left:126px;top:262px} .vin-board:hover .cur--lilac{left:calc(100% - 120px);top:250px;transition-delay:.15s} .vin-drag .cur--yellow{left:112px;top:150px} .vin-drag:hover .cur--yellow{left:304px;top:222px} .vin-deal .cur--lilac{left:calc(100% - 60px);top:300px} .vin-deal:hover .cur--lilac{left:calc(100% - 150px);top:236px} .vin-prop .cur--peach{left:56px;top:200px} .vin-prop:hover .cur--peach{left:120px;top:302px} .vin-play .cur--yellow{left:36px;top:318px} .vin-play:hover .cur--yellow{left:70px;top:330px} .vin-dash .cur--lilac{left:calc(100% - 60px);top:300px} .vin-dash:hover .cur--lilac{left:calc(100% - 160px);top:240px} /* barras e progresso crescem quando o ponteiro entra */ .vin-play .pb-bar i{width:67%} .vin-dash .dh-b i{height:var(--h)} @media (hover:none){ .vin-drag .kb-col--alvo{background:#FBFFE8} .vin-drag .kb-voo{left:238px;top:78px;transform:rotate(1.5deg)} .vin-crm .cur{display:none} } @media (prefers-reduced-motion:reduce){ .vin-crm .cur,.vin-drag .kb-voo,.pb-bar i,.dh-b i{transition:none} } /* ============================================================ VINHETAS DA PÁGINA DE AUTOMAÇÕES Tudo vem de components/Workflows. O que a v1 errava e aqui está certo: · o cabeçalho é o do Editor/index.tsx (voltar, nome, subtítulo, botão Resultados A/B, selo e Switch) — não existe rótulo "salvo" na tela; · AI_CLASSIFY e AB_SPLIT estão em BRANCH_KINDS, então "Classificar com IA" é BranchNode ("Ramificação", N caminhos), não ActionNode; · o canvas tem o botão "Adicionar etapa" (top-4 left-4) e os Controls do xyflow embaixo à esquerda; · as arestas terminam em seta (markerEnd: ArrowClosed); · fundo de pontos com gap 16, como o . ============================================================ */ .vin-aut .vin-panel{padding:0} /* menos sangria aqui: o checklist da direita não pode ser cortado */ .vin-lig .vin-panel{right:-14px} /* -- moldura do editor: header + abas -- */ .wf-head{display:flex;align-items:center;gap:8px;padding:7px 12px; border-bottom:1px solid #E6E6E6;flex:none} .wf-volta{width:19px;height:19px;border-radius:5px;display:grid;place-items:center; color:#616161;flex:none} .wf-volta svg{width:12px;height:12px} .wf-nome{font-size:11.5px;font-weight:600;color:#111114;line-height:1.2} .wf-sub{font-size:8.5px;color:#616161;line-height:1.2} .wf-dir{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none} .wf-ab{display:inline-flex;align-items:center;gap:4px;border:1px solid #DDD;border-radius:6px; padding:3px 8px;font-size:9px;font-weight:500;color:#111114;white-space:nowrap} .wf-ab svg{width:10px;height:10px} .wf-selo{background:#E4F7EC;color:#116330;border-radius:99px;padding:1px 7px; font-size:8.5px;font-weight:600} .wf-sw{width:24px;height:14px;border-radius:99px;background:#111114;position:relative;flex:none} .wf-sw i{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#fff} .wf-abas{display:flex;gap:3px;padding:6px 12px 0;border-bottom:1px solid #E6E6E6;flex:none} .wf-aba{font-size:9.5px;color:#616161;padding:3px 8px 6px;border-radius:5px 5px 0 0} .wf-aba--on{color:#111114;font-weight:600;box-shadow:inset 0 -2px 0 #111114} /* -- canvas -- */ .cv{position:relative;flex:1;min-height:0; background-image:radial-gradient(#D5DAD7 1px,transparent 1px); background-size:16px 16px;background-color:#F7F8F7;overflow:hidden} .cv-add{position:absolute;top:11px;left:11px;z-index:3; display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:4px 9px;font-size:9.5px;font-weight:600} .cv-add svg{width:11px;height:11px} /* barra de zoom do xyflow, canto inferior esquerdo */ .cv-ctrl{position:absolute;left:11px;bottom:11px;z-index:3;width:19px; background:#fff;border:1px solid #E0E0E0;border-radius:4px;overflow:hidden} .cv-ctrl i{display:grid;place-items:center;height:19px;border-top:1px solid #EDEDED;color:#5A5A5A} .cv-ctrl i:first-child{border-top:0} .cv-ctrl svg{width:9px;height:9px} /* -- nós -- */ .nd{position:relative;background:#fff;border:1.5px solid #E0E0E0;border-radius:11px; padding:7px 9px 8px;width:190px} .nd--sel{border-color:#B9D400} .nd--cfg{border-color:#E3C07A} .nd-kick{display:flex;align-items:center;justify-content:space-between;gap:6px; font-size:8px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#616161} .nd-kick i{display:flex;align-items:center;gap:4px;font-style:normal} .nd-kick svg{width:9px;height:9px;color:#7CA000} .nd-t{font-size:11px;font-weight:600;color:#111114;margin-top:3px;line-height:1.25} .nd-d{font-size:9px;color:#616161;margin-top:2px;line-height:1.3} .nd-cfg{text-transform:none;letter-spacing:0;color:#8A5B00;font-weight:600} .nd-p{position:absolute;left:50%;transform:translateX(-50%);width:9px;height:9px; border-radius:50%;background:var(--sun);border:1.5px solid #fff;box-shadow:0 0 0 1px #CFD4D1} .nd-p--t{top:-5px} .nd-p--b{bottom:-5px} .nd-p--ok{background:#21C45D} .nd-p--no{background:#DC2626} .nd-via{position:absolute;bottom:-16px;transform:translateX(-50%);font-size:8.5px; font-weight:600;color:#616161;white-space:nowrap} .nd-via--ok{color:#116330} .nd-via--no{color:#B91C1C} /* -- 1. editor completo (hero) -- */ /* deslocado à direita: o botão "Adicionar etapa" mora no canto superior esquerdo do canvas e cobria o primeiro nó */ .vin-ed .cv-fluxo{left:176px;top:18px} .vin-ed .nd{width:174px} .ed-arestas{position:absolute;left:176px;top:18px;pointer-events:none} /* -- 2. soltar etapa + checklist da barra lateral -- */ .vin-lig .lg-wrap{display:flex;height:100%} .vin-lig .cv{flex:1} /* padding maior à direita: a barra sangra junto com o painel, mas o cartão do checklist tem que parar antes do corte */ .lg-side{width:186px;flex:none;background:#fff;border-left:1px solid #E6E6E6;padding:10px 22px 10px 10px} .lg-side h4{font-size:10px;font-weight:600;color:#111114;margin:0} .lg-side p{font-size:8.5px;color:#616161;margin:1px 0 7px} .lg-pend{display:flex;gap:6px;border:1px solid #EFD9AE;background:#FDF8EF; border-radius:7px;padding:6px 7px} .lg-pend svg{width:11px;height:11px;color:#B4801A;flex:none;margin-top:1px} .lg-pend b{display:block;font-size:9.5px;font-weight:600;color:#111114;line-height:1.2} .lg-pend span{display:block;font-size:8.5px;color:#616161} .lg-novo{position:absolute;left:150px;top:104px;z-index:2; box-shadow:0 10px 22px rgba(2,28,22,.18); transition:left .85s cubic-bezier(.22,.75,.25,1),top .85s cubic-bezier(.22,.75,.25,1)} .vin-lig:hover .lg-novo{left:64px;top:172px} .lg-alvo{position:absolute;left:64px;top:172px;width:174px;height:56px; border:1.5px dashed #C7CDD3;border-radius:11px} /* -- 3. gaveta do gatilho (NodeConfigDrawer + TriggerForm) -- */ .gt-drawer{background:#fff;height:100%;padding:11px 14px;display:flex;flex-direction:column;gap:5px} .gt-tit{font-size:12px;font-weight:600;color:#111114} .gt-tit small{display:block;font-size:9px;font-weight:400;color:#616161;margin-top:1px} .gt-h{font-size:10px;font-weight:600;color:#111114;margin-top:2px} .gt-h em{font-style:normal;color:#B91C1C} .gt-campo{border:1px solid #E0E0E0;border-radius:7px;padding:6px 9px;font-size:10px; color:#616161;display:flex;align-items:center;justify-content:space-between} .gt-campo svg{width:11px;height:11px} .gt-lista{border:1px solid #E0E0E0;border-radius:8px;overflow:hidden; box-shadow:0 8px 24px rgba(2,28,22,.10)} .gt-op{display:flex;align-items:center;gap:7px;padding:2px 9px;font-size:10px;color:#111114; border-top:1px solid #F2F2F2;transition:background .25s} .gt-op:first-child{border-top:0} .gt-op svg{width:11px;height:11px;color:#616161;flex:none} .gt-op--on{background:#F5F7F2;font-weight:600} .gt-desc{font-size:9px;color:#616161;line-height:1.35} /* -- 4. menu de etapas ancorado no botão -- */ .vin-menu .cv{height:100%} .mn-pop{position:absolute;left:11px;top:38px;width:232px;background:#fff; border:1px solid #E0E0E0;border-radius:9px;box-shadow:0 12px 30px rgba(2,28,22,.16); overflow:hidden;display:flex;flex-direction:column} .mn-busca{display:flex;align-items:center;gap:7px;padding:8px 10px; border-bottom:1px solid #E6E6E6;font-size:10px;color:#616161} .mn-busca svg{width:11px;height:11px} .mn-body{padding:5px} .mn-grupo{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#616161;padding:6px 7px 2px} .mn-it{padding:3.5px 7px;border-radius:5px;transition:background .25s} .mn-it--on{background:#F2F4EF} .mn-it b{display:block;font-size:10px;font-weight:600;color:#111114} .mn-it span{display:block;font-size:8.5px;color:#616161;line-height:1.3} /* -- 5. condição -- */ .cd-wrap{width:330px;margin:0 auto;position:relative;padding-top:30px} .cd-topo{display:flex;justify-content:center} .cd-no{width:196px} .cd-svg{display:block} .cd-baixo{display:flex;gap:30px;justify-content:center} /* -- 6. execuções -- */ .rn{background:#fff;flex:1;min-height:0;padding:11px 12px; display:flex;flex-direction:column;gap:8px} .rn-tab{border:1px solid #E6E6E6;border-radius:8px;overflow:hidden} .rn-tab table{width:100%;border-collapse:collapse;font-size:9.5px} .rn-tab th{background:#F7F7F7;color:#616161;font-size:8px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 8px} .rn-tab td{padding:5px 8px;border-top:1px solid #F0F0F0;color:#111114; font-variant-numeric:tabular-nums} .rn-st{border-radius:99px;padding:1px 7px;font-size:8.5px;font-weight:600;white-space:nowrap} .rn-st--ok{background:#E4F7EC;color:#116330} .rn-st--wait{background:#FDF0DC;color:#8A5B00} .rn-st--err{background:#FBE9E9;color:#B91C1C} .rn-passos{border:1px solid #E6E6E6;border-radius:8px;padding:8px 9px; display:flex;flex-direction:column;gap:5px} .rn-cab{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#616161} .rn-p{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#111114} .rn-p em{font-style:normal;font-size:9px;color:#616161;font-variant-numeric:tabular-nums} .rn-bola{width:13px;height:13px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff} .rn-bola svg{width:8px;height:8px} /* -- etiquetas, cursores e coreografia -- */ .vin-aut .vin-panel{display:flex;flex-direction:column} .cv-fluxo{position:absolute;left:44px;top:40px} .ed-note{top:4px;right:52px} .ed-note::after{left:auto;right:16px} .lg-note{top:4px;left:40px} .gt-note{top:4px;right:52px} .gt-note::after{left:auto;right:16px} .mn-note{top:4px;right:52px} .mn-note::after{left:auto;right:16px} .cd-note{top:4px;left:40px} .rn-note{top:4px;left:40px} .vin.vin-aut .cur--lilac i,.vin.vin-aut .cur--peach i{left:auto;right:13px} .vin-ed .cur--yellow{left:calc(100% - 80px);top:120px} .vin-ed:hover .cur--yellow{left:calc(100% - 172px);top:236px} .vin-lig .cur--lilac{left:262px;top:300px} .vin-lig:hover .cur--lilac{left:186px;top:232px} .vin-gat .cur--peach{left:calc(100% - 70px);top:120px} .vin-gat:hover .cur--peach{left:calc(100% - 148px);top:250px} .vin-menu .cur--yellow{left:min(250px,calc(100% - 78px));top:300px} .vin-menu:hover .cur--yellow{left:min(196px,calc(100% - 78px));top:150px} .vin-cond .cur--lilac{left:calc(100% - 76px);top:300px} .vin-cond:hover .cur--lilac{left:calc(100% - 158px);top:236px} .vin-runs .cur--peach{left:calc(100% - 74px);top:140px} .vin-runs:hover .cur--peach{left:calc(100% - 190px);top:186px} .vin-gat .gt-op--on,.vin-menu .mn-it--on{background:transparent} .vin-gat:hover .gt-op--on{background:#F5F7F2} .vin-menu:hover .mn-it--on{background:#F2F4EF} .vin-ed .cv-fluxo .nd:last-of-type{transition:border-color .3s} .vin-ed:hover .cv-fluxo .nd:last-of-type{border-color:#B9D400} @media (hover:none){ .vin-aut .cur{display:none} .vin-gat .gt-op--on{background:#F5F7F2} .vin-menu .mn-it--on{background:#F2F4EF} .vin-lig .lg-novo{left:64px;top:172px} } @media (prefers-reduced-motion:reduce){ .vin-aut .cur,.lg-novo{transition:none} } /* ============================================================ VINHETAS DA PÁGINA DE CAMPANHAS Assistente de 5 passos (engajamento/campanhas/[id]/setup): Stepper (v2/auth/Stepper), StepMessagesEditor com a pré-visualização de WhatsApp, StepContacts, StepConnections, StepConfig e a tela de métricas. Rótulos e opções — Lento/Médio/Rápido, os dias D S T Q Q S S, os seis KPIs — são os do código. ============================================================ */ .vin-cmp .vin-panel{padding:0;display:flex;flex-direction:column} /* o conteúdo para antes do corte; só o fundo do painel sangra */ .cp-head{display:flex;align-items:center;gap:8px;padding:9px 52px 9px 12px; border-bottom:1px solid #E6E6E6;flex:none} .cp-volta{width:19px;height:19px;border-radius:5px;display:grid;place-items:center;color:#616161;flex:none} .cp-volta svg{width:12px;height:12px} /* display:block obrigatório: como span inline, o nome colava no subtítulo */ .cp-nome{display:block;font-size:12px;font-weight:600;color:#111114;line-height:1.2} .cp-sub{display:block;font-size:8.5px;color:#616161;line-height:1.2} .cp-badge{margin-left:auto;background:#F1F1F1;color:#3F3F3F;border-radius:99px; padding:1px 7px;font-size:8.5px;font-weight:600;flex:none} .cp-badge--on{background:#E4F7EC;color:#116330} /* stepper: pendente cinza, atual no acento com anel, concluído preto */ .cp-steps{display:flex;align-items:flex-start;padding:10px 52px 2px 14px;flex:none} .cp-st{display:flex;align-items:flex-start;flex:1} .cp-st:last-child{flex:none} .cp-col{display:flex;flex-direction:column;align-items:center} .cp-bola{width:22px;height:22px;border-radius:50%;display:grid;place-items:center; font-size:9.5px;font-weight:700;background:#F1F1F1;color:#616161;flex:none} .cp-bola--ok{background:#111114;color:#fff} .cp-bola--on{background:var(--sun);color:var(--ink);box-shadow:0 0 0 3px rgba(213,254,0,.30)} .cp-bola svg{width:11px;height:11px} .cp-rot{margin-top:5px;font-size:8.5px;font-weight:500;color:#616161;white-space:nowrap} .cp-rot--on{color:#111114} .cp-liga{height:1px;background:#E0E0E0;flex:1;margin:11px 6px 0} .cp-card{margin:6px 52px 0 14px;border:1px solid #E6E6E6;border-radius:10px;background:#fff; display:flex;flex-direction:column;min-height:0;flex:1} .cp-chead{display:flex;gap:9px;padding:8px 12px;border-bottom:1px solid #F0F0F0;flex:none} .cp-cico{width:26px;height:26px;border-radius:7px;background:#F2F4EF;color:#111114; display:grid;place-items:center;flex:none} .cp-cico svg{width:13px;height:13px} .cp-ct{display:block;font-size:11px;font-weight:600;color:#111114} .cp-cd{display:block;font-size:9px;color:#616161;margin-top:1px} .cp-cbody{padding:9px 12px;display:flex;flex-direction:column;gap:7px;min-height:0} .cp-rodape{display:flex;justify-content:space-between;padding:8px 52px 12px 14px;flex:none} .cp-btn{border-radius:6px;padding:4px 10px;font-size:9.5px;font-weight:600} .cp-btn--o{border:1px solid #DDD;color:#111114} .cp-btn--p{background:#111114;color:#fff} /* -- editor de mensagem + pré-visualização -- */ .ms-cols{display:grid;grid-template-columns:1fr 168px;gap:12px;min-height:0} .ms-lab{display:block;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#616161;margin-bottom:4px} .ms-area{border:1px solid #E0E0E0;border-radius:7px;padding:7px 8px;font-size:10px; color:#111114;line-height:1.45;min-height:56px} .ms-var{background:#F0F3EA;border-radius:4px;padding:0 3px;font-weight:600} .ms-dica{display:block;font-size:8.5px;color:#616161;margin-top:4px} .ms-bt{display:flex;align-items:center;gap:6px;border:1px solid #E0E0E0;border-radius:6px; padding:4px 7px;font-size:9.5px;color:#111114;margin-top:5px} .ms-bt svg{width:10px;height:10px;color:#616161} .ms-bt em{font-style:normal;margin-left:auto;font-size:8.5px;color:#616161} /* papel de parede e balão nas cores do componente */ .ms-prev{border:1px solid #E6E6E6;border-radius:9px;padding:8px;background-color:#E6DFD4; background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0); background-size:14px 14px;display:flex;justify-content:flex-end} .ms-bolha{max-width:88%;background:#DCF8C6;border-radius:8px 3px 8px 8px;overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,.08)} .ms-txt{padding:6px 7px;font-size:9.5px;color:#111114;line-height:1.4} /* o cinza-verde do horário no balão dá 4,17:1 sobre o verde-claro */ .ms-hora{display:block;text-align:right;font-size:7.5px;color:#4A6340;margin-top:2px} /* o azul do WhatsApp (#0a7cff) dá 3,9:1 no branco; escurecido para passar */ .ms-acao{display:flex;align-items:center;justify-content:center;gap:4px;background:#fff; border-top:1px solid #E4E4E4;padding:5px;font-size:9px;font-weight:600;color:#0B63C7} .ms-acao svg{width:9px;height:9px} /* -- listas e contatos -- */ .ct-abas{display:flex;gap:4px;background:#F3F4F3;border-radius:7px;padding:2px;width:max-content} .ct-aba{font-size:9.5px;padding:3px 10px;border-radius:5px;color:#616161} .ct-aba--on{background:#fff;color:#111114;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} .ct-busca{display:flex;align-items:center;gap:6px;border:1px solid #E0E0E0;border-radius:7px; padding:5px 8px;font-size:9.5px;color:#616161} .ct-busca svg{width:11px;height:11px} .ct-sel{display:block;font-size:9px;color:#616161} .ct-lista{border:1px solid #E6E6E6;border-radius:8px;overflow:hidden} .ct-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-top:1px solid #F2F2F2; transition:background .25s} .ct-row:first-child{border-top:0} .ct-row--on{background:#F7F9F4} .ct-cx{width:12px;height:12px;border-radius:3px;border:1px solid #C9C9C9;background:#fff; flex:none;display:grid;place-items:center} .ct-cx svg{width:9px;height:9px;color:#fff;opacity:0} .ct-row--on .ct-cx{background:#111114;border-color:#111114} .ct-row--on .ct-cx svg{opacity:1} .ct-nome{font-size:10px;font-weight:500;color:#111114} .ct-qtd{margin-left:auto;font-size:9px;color:#616161;font-variant-numeric:tabular-nums} /* -- chips (simcards) e ritmo -- */ .sc-bar{display:flex;align-items:center;justify-content:space-between; background:#F5F6F5;border-radius:8px;padding:7px 10px} .sc-bar span{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#616161} .sc-bar svg{width:11px;height:11px} .sc-bar b{font-size:14px;font-weight:600;color:#111114;font-variant-numeric:tabular-nums} .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px} .sc-card{display:flex;align-items:center;gap:6px;border:1px solid #E6E6E6;border-radius:8px; padding:5px 7px;background:#fff;transition:border-color .25s,background .25s} .sc-card--on{border-color:#B9D400;background:#FBFFE8} .sc-nome{display:block;font-size:10px;font-weight:500;color:#111114} .sc-meta{display:block;font-size:8.5px;color:#616161} .sc-vinc{background:#F1F1F1;color:#3F3F3F;border-radius:99px;padding:0 5px;font-size:7.5px;font-weight:600} .sc-ok{margin-left:auto;color:#4B6B00;flex:none} .sc-ok svg{width:11px;height:11px} .sc-tit{display:block;font-size:9.5px;font-weight:600;color:#111114} .sc-tit small{display:block;font-size:8.5px;font-weight:400;color:#616161;margin-top:1px} .sc-vel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .sc-op{border:1px solid #E6E6E6;border-radius:7px;padding:5px 7px;text-align:center;background:#fff} .sc-op--on{border-color:#B9D400;background:#FBFFE8} .sc-op b{display:block;font-size:9.5px;font-weight:600;color:#111114} .sc-op span{display:block;font-size:8px;color:#616161} /* -- janela de horário e dias -- */ .hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hr-lab{font-size:9px;color:#616161;margin-bottom:3px;display:block} .hr-sel{border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:10px; color:#111114;display:flex;align-items:center;justify-content:space-between} .hr-sel svg{width:10px;height:10px;color:#616161} .dia-linha{display:flex;gap:5px} .dia{width:24px;height:24px;border-radius:50%;border:1px solid #E0E0E0;background:#fff; display:grid;place-items:center;font-size:9.5px;font-weight:600;color:#616161; transition:background .25s,border-color .25s,color .25s} .dia--on{background:#111114;border-color:#111114;color:#fff} /* -- métricas -- */ .mt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .mt-card{border:1px solid #E6E6E6;border-radius:8px;padding:7px 9px;background:#fff} .mt-t{display:flex;align-items:center;gap:4px;font-size:7.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:#616161} .mt-t svg{width:9px;height:9px} .mt-v{font-size:15px;font-weight:600;color:#111114;font-variant-numeric:tabular-nums;margin-top:2px} .mt-h{display:block;font-size:8px;color:#616161} .mt-tab{border:1px solid #E6E6E6;border-radius:8px;overflow:hidden} .mt-tab table{width:100%;border-collapse:collapse;font-size:9.5px} .mt-tab th{background:#F7F7F7;color:#616161;font-size:7.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 8px} .mt-tab td{padding:4px 8px;border-top:1px solid #F0F0F0;color:#111114} .mt-st{border-radius:99px;padding:1px 6px;font-size:8px;font-weight:600;white-space:nowrap} .mt-st--ler{background:#EEF7C9;color:#3F5300} .mt-st--ent{background:#E4F7EC;color:#116330} .mt-st--env{background:#E6F0FA;color:#1D4E7A} .mt-st--agu{background:#F1F1F1;color:#3F3F3F} /* -- etiquetas e cursores das vinhetas de campanhas -- */ .sp-note{top:4px;right:52px} .sp-note::after{left:auto;right:16px} .ms-note{top:4px;left:40px} .ct-note{top:4px;right:52px} .ct-note::after{left:auto;right:16px} .sc-note{top:4px;left:40px} .hr-note{top:4px;right:52px} .hr-note::after{left:auto;right:16px} .mt-note{top:4px;left:40px} .vin.vin-cmp .cur--lilac i,.vin.vin-cmp .cur--peach i{left:auto;right:13px} .vin-setup .cur--yellow{left:calc(100% - 78px);top:300px} .vin-setup:hover .cur--yellow{left:calc(100% - 132px);top:236px} .vin-msg .cur--lilac{left:calc(100% - 76px);top:340px} .vin-msg:hover .cur--lilac{left:calc(100% - 128px);top:290px} .vin-ct .cur--peach{left:calc(100% - 76px);top:320px} .vin-ct:hover .cur--peach{left:calc(100% - 168px);top:246px} .vin-chip .cur--yellow{left:calc(100% - 78px);top:120px} .vin-chip:hover .cur--yellow{left:calc(100% - 130px);top:264px} .vin-hora .cur--lilac{left:calc(100% - 76px);top:150px} .vin-hora:hover .cur--lilac{left:calc(100% - 168px);top:274px} .vin-met .cur--peach{left:calc(100% - 76px);top:326px} .vin-met:hover .cur--peach{left:calc(100% - 214px);top:286px} /* realces no hover */ .vin-ct .ct-row:nth-of-type(3){transition:background .3s} .vin-ct:hover .ct-row:nth-of-type(3){background:#F7F9F4} .vin-ct:hover .ct-row:nth-of-type(3) .ct-cx{background:#111114;border-color:#111114} .vin-ct:hover .ct-row:nth-of-type(3) .ct-cx svg{opacity:1} .vin-chip .sc-card:nth-of-type(4){transition:border-color .3s,background .3s} .vin-chip:hover .sc-card:nth-of-type(4){border-color:#B9D400;background:#FBFFE8} .vin-hora .dia:first-child{transition:background .3s,border-color .3s,color .3s} .vin-hora:hover .dia:first-child{background:#111114;border-color:#111114;color:#fff} @media (hover:none){ .vin-cmp .cur{display:none} .vin-ct .ct-row:nth-of-type(3){background:#F7F9F4} .vin-chip .sc-card:nth-of-type(4){border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-cmp .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE AGENTE DE IA Fontes: atendimento/agentes/[id]/editar (page + TabGeneral + TabKnowledge), v2/chat/ThreadView + MessageBubble + ContactDetailsPanel e o editor de workflows (catalog.ts: "Acionar IA" / "Classificar com IA" -> BranchNode). Rotulos sao os do codigo: Suporte/Vendedor, Automatico/Manual, Texto e prompts/Documentos/Video/Website, Pausar IA/Retomar IA. ============================================================ */ .vin-ia .vin-panel{padding:0;display:flex;flex-direction:column} /* -- cabecalho de conversa (ThreadView header) -- */ .ia-head{display:flex;align-items:center;gap:6px;padding:8px 52px 8px 11px; border-bottom:1px solid #E6E6E6;flex:none} .ia-av{width:26px;height:26px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:9px;font-weight:600;flex:none} .ia-id{min-width:0;flex:1} .ia-nome{display:block;font-size:11.5px;font-weight:600;color:#111114;line-height:1.25} .ia-fone{display:flex;align-items:center;gap:3px;font-size:8.5px;color:#616161;line-height:1.25} .ia-fone svg{width:8px;height:8px} .ia-badge{display:flex;align-items:center;gap:3px;border:1px solid #E0E0E0;border-radius:6px; padding:2px 5px;font-size:8.5px;color:#616161;flex:none} .ia-badge svg{width:9px;height:9px} .ia-bt{display:flex;align-items:center;gap:4px;border-radius:6px;padding:3px 7px; font-size:9px;font-weight:600;color:#111114;flex:none;white-space:nowrap} .ia-bt svg{width:11px;height:11px} .ia-bt--o{border:1px solid #DDD;background:#fff} .ia-bt--ia{background:#F5F5F5} .ia-ic{width:20px;height:20px;display:grid;place-items:center;color:#616161;flex:none} .ia-ic svg{width:12px;height:12px} /* selo de sentimento (SENTIMENT_META.positive) */ .ia-sent{border-radius:99px;padding:1px 7px;font-size:8px;font-weight:600; background:#E4F7EC;color:#116330;flex:none} /* -- mensagens -- */ .ia-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding:9px 46px 9px 11px} .ia-dia{align-self:center;background:#F1F1F1;color:#616161;border-radius:99px; padding:1px 8px;font-size:7.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase} .ia-ini{display:flex;align-items:center;gap:4px;align-self:center;font-size:8.5px;color:#616161;margin-bottom:2px} .ia-ini svg{width:9px;height:9px} .ia-ini b{font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .ia-row{display:flex} .ia-row--me{justify-content:flex-end} /* bolha do app (MessageBubble): recebida em muted, enviada no acento a 15% */ .ia-bal{max-width:78%;border-radius:13px;padding:5px 9px;background:#F1F1F1;color:#111114} .ia-bal--me{background:#F2FDD0} .ia-txt{display:block;font-size:10px;line-height:1.4} .ia-pe{display:flex;align-items:center;justify-content:flex-end;gap:3px; font-size:7.5px;color:#4A6340;margin-top:2px;font-variant-numeric:tabular-nums} .ia-row:not(.ia-row--me) .ia-pe{color:#616161;justify-content:flex-start} .ia-ck{display:flex;color:#1D4E7A} .ia-ck svg{width:10px;height:10px} /* -- composer -- */ .ia-comp{display:flex;align-items:center;gap:6px;border-top:1px solid #E6E6E6; padding:8px 52px 10px 11px;flex:none} .ia-inp{flex:1;border:1px solid #E6E6E6;background:#FAFAFA;border-radius:9px; padding:6px 9px;font-size:9.5px;color:#9A9A9A} .ia-env{width:24px;height:24px;border-radius:7px;background:#111114;color:#fff; display:grid;place-items:center;flex:none} .ia-env svg{width:12px;height:12px} /* -- editor do agente (header + tabs + Geral) -- */ .ia-ahead{display:flex;align-items:center;gap:7px;padding:9px 52px 9px 10px;flex:none} .ia-volta{width:19px;height:19px;display:grid;place-items:center;color:#616161;flex:none} .ia-volta svg{width:12px;height:12px} .ia-abot{width:27px;height:27px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;flex:none} .ia-abot svg{width:14px;height:14px} .ia-selo{display:inline-block;margin-top:2px;background:#E4F7EC;color:#116330; border-radius:99px;padding:0 6px;font-size:8px;font-weight:600} .ia-atend{font-size:8.5px;color:#616161;flex:none} .ia-sw{width:24px;height:14px;border-radius:99px;background:var(--sun);position:relative;flex:none} .ia-sw i{position:absolute;top:2px;left:12px;width:10px;height:10px;border-radius:50%;background:#fff} .ia-tabs{display:flex;gap:2px;padding:0 52px 0 12px;border-bottom:1px solid #E6E6E6;flex:none} .ia-tab{display:flex;align-items:center;gap:4px;padding:5px 7px 6px;font-size:9px; font-weight:500;color:#616161;border-bottom:1.5px solid transparent;white-space:nowrap} .ia-tab svg{width:10px;height:10px} .ia-tab--on{color:#111114;font-weight:600;border-bottom-color:#111114} .ia-body{flex:none;padding:9px 52px 0 12px;display:flex;flex-direction:column} .ia-lab{display:block;font-size:9px;font-weight:600;color:#111114;margin-bottom:4px} .ia-lab--sp{margin-top:8px} .ia-ta{display:block;border:1px solid #E6E6E6;border-radius:8px;background:#fff; padding:6px 8px;font-size:9px;line-height:1.45;color:#3F3F3F; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .ia-hint{display:block;font-size:8.5px;color:#616161;margin-top:3px} .ia-rds{display:grid;grid-template-columns:1fr 1fr;gap:6px} .ia-rd{border:1px solid #E6E6E6;border-radius:8px;background:#fff;padding:5px 8px; transition:border-color .3s,background .3s} .ia-rd--on{border-color:#B9D400;background:#FBFFE8} .ia-rd-t{display:block;font-size:9.5px;font-weight:600;color:#111114} .ia-rd-d{display:block;font-size:8px;color:#616161;margin-top:1px} .ia-foot{display:flex;justify-content:flex-end;padding:9px 52px 12px 12px;flex:none} .vin-ia2 .vin-panel::after{content:"";flex:1} .ia-btp{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:4px 9px;font-size:9px;font-weight:600;white-space:nowrap} .ia-btp svg{width:11px;height:11px} /* -- base de conhecimento (TabKnowledge) -- */ .kn-topo{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:11px 52px 0 12px;flex:none} .kn-tg{display:flex;gap:2px;background:#F1F1F1;border-radius:8px;padding:2px} .kn-op{border-radius:6px;padding:3px 7px;font-size:8.5px;color:#616161;white-space:nowrap} .kn-op--on{background:#fff;color:#111114;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} .kn-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding:9px 52px 0 12px} .kn-it{display:flex;align-items:flex-start;gap:8px;border:1px solid #EDEDED;border-radius:9px; background:#fff;padding:6px 9px;transition:background .3s,border-color .3s} .kn-ic{width:22px;height:22px;border-radius:6px;background:#F1F1F1;color:#616161; display:grid;place-items:center;flex:none} .kn-ic svg{width:11px;height:11px} .kn-tx{min-width:0;flex:1} .kn-t{display:block;font-size:10px;font-weight:600;color:#111114} .kn-d{display:block;font-size:8.5px;color:#616161;line-height:1.35;margin-top:1px} .kn-dt{display:block;font-size:7.5px;color:#6B6B6B;margin-top:2px;font-variant-numeric:tabular-nums} .kn-ac{width:18px;height:18px;display:grid;place-items:center;color:#9A9A9A;flex:none} .kn-ac svg{width:11px;height:11px} .kn-ac--x{color:#C25A5A} /* -- IA pausada + painel de detalhes -- */ .pa-cols{display:flex;height:100%;min-height:0;padding-right:52px} .pa-thread{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid #E6E6E6} .pa-lado{width:158px;flex:none;padding:10px 10px 0;display:flex;flex-direction:column;gap:6px} .pa-lado .ia-btp,.pa-lado .ia-bt{justify-content:center;font-size:8.5px;padding:5px 6px} .pa-lin{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px} .pa-k{font-size:8.5px;color:#616161} .pa-v{font-size:8.5px;font-weight:600;color:#111114} .pa-cap{display:flex;align-items:center;gap:4px;font-size:7.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:#616161;margin-top:3px} .pa-cap svg{width:9px;height:9px} .pa-sel{display:flex;align-items:center;justify-content:space-between;gap:4px; border:1px solid #E0E0E0;border-radius:7px;padding:4px 7px;font-size:9px;color:#111114} .pa-sel svg{width:10px;height:10px;color:#616161} .pa-sim{display:none} .ia-msgs--curto{padding-right:11px} /* estado "IA pausada": so aparece no hover, junto com o responsavel definido */ .pa-bt .pa-off,.pa-bt svg + svg{display:none} .pa-cols .ia-head{padding-right:11px} .vin-ia4 .ia-msgs{padding-right:11px} /* -- IA no editor de automacoes -- */ .vin-ia5 .cv{border-radius:0} .fl-wrap{position:absolute;left:50%;top:44px;transform:translateX(-50%);width:272px} .fl-topo,.fl-baixo{display:flex;justify-content:space-between} .fl-e1{display:block;margin:0 auto} .fl-e2{display:block;margin:9px auto 0} .fl-ram{width:272px} .fl-ram .nd-via{bottom:-15px} .fl-mini .nd-t{font-size:9.5px} .fl-mini .nd-kick{font-size:7.5px} /* -- etiquetas, cursores e coreografia -- */ .ia1-note{top:4px;right:52px} .ia1-note::after{left:auto;right:16px} .ia2-note{top:4px;right:52px} .ia2-note::after{left:auto;right:16px} .ia3-note{top:4px;right:52px} .ia3-note::after{left:auto;right:16px} .ia4-note{top:4px;right:52px} .ia4-note::after{left:auto;right:16px} .ia5-note{top:4px;right:52px} .ia5-note::after{left:auto;right:16px} .vin-ia1 .cur--yellow{left:calc(100% - 78px);top:296px} .vin-ia1:hover .cur--yellow{left:calc(100% - 150px);top:224px} .vin-ia2 .cur--lilac{left:calc(100% - 78px);top:190px} .vin-ia2:hover .cur--lilac{left:calc(100% - 110px);top:36px} .vin-ia3 .cur--peach{left:calc(100% - 78px);top:300px} .vin-ia3:hover .cur--peach{left:calc(100% - 115px);top:150px} .vin-ia4 .cur--yellow{left:calc(100% - 80px);top:320px} .vin-ia4:hover .cur--yellow{left:calc(100% - 80px);top:44px} .vin-ia5 .cur--lilac{left:calc(100% - 78px);top:320px} .vin-ia5:hover .cur--lilac{left:calc(100% - 176px);top:250px} /* realces no hover */ .vin-ia2 .ia-rd-sup,.vin-ia2 .ia-testar{transition:border-color .3s,background .3s} .vin-ia2:hover .ia-testar{border-color:#B9D400;background:#FBFFE8} .vin-ia3 .kn-it:nth-of-type(2){transition:background .3s,border-color .3s} .vin-ia3:hover .kn-it:nth-of-type(2){background:#FBFFE8;border-color:#B9D400} .vin-ia4 .pa-assumir,.vin-ia4 .pa-bt,.vin-ia4 .pa-sel{transition:background .3s,color .3s,border-color .3s} .vin-ia4:hover .pa-assumir{background:#3F3F3F;box-shadow:0 0 0 3px rgba(213,254,0,.35)} .vin-ia4:hover .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-ia4:hover .pa-bt .pa-on{display:none} .vin-ia4:hover .pa-bt .pa-off{display:inline} .vin-ia4:hover .pa-bt svg:first-of-type{display:none} .vin-ia4:hover .pa-bt svg + svg{display:block} .vin-ia4:hover .pa-sel .pa-nao{display:none} .vin-ia4:hover .pa-sel .pa-sim{display:inline} .vin-ia5 .fl-ram{transition:border-color .3s} .vin-ia5:hover .fl-ram{border-color:#B9D400} /* A vinheta do hero encolhe de 360 para 280 quando o layout empilha; o ultimo par de mensagens passaria por baixo do corte. */ @media (max-width:940px){ .vin-ia1 .ia-msgs .ia-row:nth-of-type(n+3){display:none} } /* Entre 941 e 1200 o layout ainda e de duas colunas, mas a coluna da imagem afina: os textos quebram em mais linhas e o ultimo item da lista sai inteiro por baixo do corte (abaixo de 941 a vinheta volta a ser larga). */ @media (max-width:1200px) and (min-width:941px){ .vin-ia3 .kn-it:nth-of-type(5){display:none} } /* Em telas estreitas o painel afina e as descricoes dos cartoes quebram em mais linhas do que cabe: cada vinheta cede o que esta na beirada. */ @media (max-width:520px){ .vin-ia3 .kn-it:nth-of-type(5){display:none} } @media (max-width:480px){ .vin-ia4 .ia-msgs .ia-row:nth-of-type(n+3){display:none} } @media (max-width:340px){ .vin-ia4 .ia-msgs .ia-row:nth-of-type(n+2){display:none} } @media (max-width:420px){ .vin-ia1 .ia-ini{display:none} .vin-ia2 .ia-ta{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .vin-ia3 .kn-it:nth-of-type(n+4){display:none} /* o quadro do editor tem largura fixa (272px, como os nos reais) */ .vin-ia5 .fl-wrap{transform:translateX(-50%) scale(.78);transform-origin:top center} } @media (hover:none){ .vin-ia .cur{display:none} .vin-ia3 .kn-it:nth-of-type(2){background:#FBFFE8;border-color:#B9D400} .vin-ia4 .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-ia4 .pa-bt .pa-on,.vin-ia4 .pa-bt svg:first-of-type{display:none} .vin-ia4 .pa-bt .pa-off{display:inline} .vin-ia4 .pa-bt svg + svg{display:block} .vin-ia4 .pa-sel .pa-nao{display:none} .vin-ia4 .pa-sel .pa-sim{display:inline} } @media (prefers-reduced-motion:reduce){ .vin-ia .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA NEWAY AI Fontes: v2/NewayAiPalette.tsx (Sheet lateral, bolhas, pilula de sistema, cartao de confirmacao e a dica "Enter envia · Shift+Enter · ⌘J") e configuracoes/neway-ai/page.tsx. Os resumos do cartao seguem o formato exato do `summarize` de cada tool em newayAi/tools/registry.ts. Cores do app: primary #021C16, muted #F5F5F5, ambar #F59E0B. ============================================================ */ .vin-nw .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* app ao fundo + painel encostado na direita (Sheet side="right") */ .nw-cols{display:flex;height:100%;min-height:0;padding-right:52px} .nw-app{position:relative;flex:1;min-width:0;overflow:hidden;padding:11px 0 0 11px} .nw-app .kb{transform:scale(.8);transform-origin:top left;width:125%;height:125%} /* o Sheet escurece o resto da tela */ .nw-veu{position:absolute;inset:0;background:rgba(2,28,22,.30)} .nw-sheet{width:236px;flex:none;display:flex;flex-direction:column;min-height:0; background:#fff;border-left:1px solid #E0E0E0;box-shadow:-8px 0 24px rgba(2,28,22,.13)} /* cabecalho do painel */ .nw-head{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid #E6E6E6;flex:none} .nw-ic{width:22px;height:22px;border-radius:6px;background:#E6E9E8;color:#021C16; display:grid;place-items:center;flex:none} .nw-ic svg{width:12px;height:12px} .nw-id{min-width:0;flex:1} .nw-t{display:block;font-size:11px;font-weight:600;color:#111114;line-height:1.2} .nw-s{display:block;font-size:8.5px;color:#616161;line-height:1.2} .nw-nova{display:flex;align-items:center;gap:3px;font-size:9px;color:#5F5F5F;flex:none} .nw-nova svg{width:10px;height:10px} .nw-x{width:18px;height:18px;display:grid;place-items:center;color:#5F5F5F;flex:none} .nw-x svg{width:11px;height:11px} /* mensagens */ .nw-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;padding:12px 11px} .nw-row{display:flex;align-items:flex-end;gap:5px} .nw-row--u{justify-content:flex-end} .nw-avt{width:17px;height:17px;border-radius:50%;background:#E6E9E8;color:#021C16; display:grid;place-items:center;flex:none} .nw-avt svg{width:9px;height:9px} .nw-bal{max-width:82%;border-radius:12px;padding:6px 9px;font-size:10px;line-height:1.5} .nw-bal--u{background:#021C16;color:#F4F7F5;border-bottom-right-radius:5px} .nw-bal--a{background:#F1F1F1;color:#111114;border-bottom-left-radius:5px} /* `.split p` (16.5px) e `.split li` (15.5px) alcancam o markdown do chat */ .nw-bal p{font-size:inherit;color:inherit;margin:0;max-width:none} .nw-bal b{font-weight:700} .nw-bal ul{display:block;margin:4px 0 0;padding-left:14px;list-style:disc;gap:0} .nw-bal li{display:list-item;font-size:inherit;color:inherit;gap:0;margin-top:2px} /* pilula de sistema: " — feito." */ .nw-sys{display:flex;justify-content:center} .nw-sys span{background:#F1F1F1;color:#5A5A5A;border-radius:99px;padding:3px 9px;font-size:9px;text-align:center} /* estado vazio */ .nw-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:9px;padding:0 6px} .nw-vic{width:32px;height:32px;border-radius:10px;background:#E6E9E8;color:#021C16; display:grid;place-items:center} .nw-vic svg{width:16px;height:16px} .nw-vt{display:block;font-size:10.5px;font-weight:600;color:#111114} .nw-vd{display:block;font-size:9px;line-height:1.55;color:#616161;max-width:180px} .nw-vd b{font-weight:700;color:#3F3F3F} /* rodape com o campo e a dica de teclado */ .nw-foot{flex:none;border-top:1px solid #E6E6E6;padding:8px 9px 9px} .nw-inp{display:flex;align-items:center;gap:6px;border:1px solid #E0E0E0;border-radius:9px;padding:4px 4px 4px 8px} .nw-ph{flex:1;font-size:9.5px;color:#6E6E6E} .nw-send{width:21px;height:21px;border-radius:6px;background:#021C16;color:#fff; display:grid;place-items:center;flex:none} .nw-send svg{width:11px;height:11px} .nw-dica{display:block;margin-top:5px;padding:0 2px;font-size:8px;color:#6B6B6B} .nw-dica b{font-weight:600;color:#3F3F3F} /* close-up do painel (vinhetas 2 e 4): mesma peca, sem o app atras */ .vin-nw2 .nw-sheet,.vin-nw4 .nw-sheet{width:300px} .nw-msgs--zoom{gap:10px} /* cartao de confirmacao (amber-500/30 + amber-500/10 + amber-700) */ .nw-conf{border:1px solid #FADFB4;background:#FEF6E7;border-radius:10px;padding:9px 10px} .nw-conf-h{display:flex;align-items:center;gap:4px;color:#8A5000;font-size:8.5px; font-weight:700;letter-spacing:.08em;text-transform:uppercase} .nw-conf-h svg{width:10px;height:10px} .nw-conf-s{display:block;font-size:10.5px;line-height:1.5;color:#111114;margin-top:4px} .nw-conf-b{display:flex;gap:6px;margin-top:8px} .nw-bt{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:4px 9px; font-size:9.5px;font-weight:600;transition:box-shadow .3s,background .3s} .nw-bt svg{width:11px;height:11px} .nw-bt--p{background:#021C16;color:#fff} .nw-bt--o{border:1px solid #DDD;background:#fff;color:#111114} /* base de conhecimento (Configuracoes > Neway AI) */ .nb{display:flex;flex-direction:column;min-height:0;padding:12px 52px 0 13px} .nb-head{flex:none} .nb-ht{display:block;font-size:13px;font-weight:600;color:#111114;letter-spacing:-.01em} .nb-hd{display:block;font-size:9px;color:#616161;margin-top:2px} .nb-add{border:1px solid #E6E6E6;border-radius:10px;background:#fff;padding:9px 10px;margin-top:9px;flex:none} .nb-at{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#111114} .nb-at svg{width:11px;height:11px;color:#021C16} .nb-lab{display:block;font-size:8.5px;font-weight:600;color:#111114;margin-top:7px;margin-bottom:3px} .nb-inp{display:block;border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:9.5px;color:#111114} .nb-ta{display:block;border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px; font-size:9.5px;line-height:1.5;color:#111114} .nb-bt{display:inline-flex;align-items:center;gap:4px;background:#021C16;color:#fff; border-radius:6px;padding:4px 9px;font-size:9.5px;font-weight:600;margin-top:8px;float:right} .nb-bt svg{width:11px;height:11px} .nb-lista{display:flex;flex-direction:column;gap:6px;margin-top:9px;clear:both} .nb-it{display:flex;align-items:flex-start;gap:8px;border:1px solid #EDEDED;border-radius:9px; background:#fff;padding:8px 10px;transition:background .3s,border-color .3s} .nb-tx{min-width:0;flex:1} .nb-t{display:block;font-size:10px;font-weight:600;color:#111114} .nb-c{display:block;font-size:9px;line-height:1.45;color:#616161;margin-top:2px} .nb-x{width:16px;height:16px;display:grid;place-items:center;color:#9A9A9A;flex:none} .nb-x svg{width:11px;height:11px} /* etiquetas, cursores e coreografia */ .nw1-note{top:4px;right:52px} .nw1-note::after{left:auto;right:16px} .nw2-note{top:4px;right:52px} .nw2-note::after{left:auto;right:16px} .nw3-note{top:4px;right:52px} .nw3-note::after{left:auto;right:16px} .nw4-note{top:4px;right:52px} .nw4-note::after{left:auto;right:16px} .nw5-note{top:4px;right:52px} .nw5-note::after{left:auto;right:16px} /* cursores em area livre: sobre o app esmaecido, nunca por cima do texto do painel — a coreografia do hover e que carrega a leitura */ .vin-nw1 .cur--yellow{left:56px;top:262px} .vin-nw1:hover .cur--yellow{left:168px;top:208px} .vin-nw2 .cur--lilac{left:56px;top:300px} .vin-nw2:hover .cur--lilac{left:110px;top:232px} .vin-nw3 .cur--peach{left:56px;top:300px} .vin-nw3:hover .cur--peach{left:120px;top:236px} .vin-nw4 .cur--yellow{left:56px;top:300px} .vin-nw4:hover .cur--yellow{left:110px;top:232px} .vin-nw5 .cur--lilac{left:calc(100% - 60px);top:300px} .vin-nw5:hover .cur--lilac{left:calc(100% - 60px);top:232px} /* o negocio criado pela IA so aparece no hover, junto com a contagem */ .nw-novo{opacity:0;transform:translateY(-6px);transition:opacity .45s ease,transform .45s ease} .vin-nw3:hover .nw-novo{opacity:1;transform:none} .nw-n1{display:none} .vin-nw3:hover .nw-n0{display:none} .vin-nw3:hover .nw-n1{display:inline} .vin-nw4 .nw-bt--p{box-shadow:none} .vin-nw4:hover .nw-bt--p{box-shadow:0 0 0 3px rgba(213,254,0,.4)} .vin-nw5 .nb-bt{transition:box-shadow .3s} .vin-nw5:hover .nb-bt{box-shadow:0 0 0 3px rgba(213,254,0,.4)} /* No app o Sheet e `w-full sm:max-w-md`: no celular ele ocupa a tela inteira. Aqui vale o mesmo — com largura fixa ele passava 70px do recorte. */ @media (max-width:480px){ .nw-app{display:none} .nw-cols{padding-right:52px} .vin-nw .nw-sheet,.vin-nw2 .nw-sheet,.vin-nw4 .nw-sheet{width:100%;border-left:0;box-shadow:none} } /* o segundo item da lista so cabe quando a vinheta esta larga */ @media (max-width:1200px) and (min-width:941px){ .vin-nw5 .nb-it:nth-of-type(2){display:none} } @media (max-width:520px){ .vin-nw5 .nb-it:nth-of-type(2){display:none} } @media (hover:none){ .vin-nw .cur{display:none} .nw-novo{opacity:1;transform:none} .vin-nw3 .nw-n0{display:none} .vin-nw3 .nw-n1{display:inline} } @media (prefers-reduced-motion:reduce){ .vin-nw .cur,.nw-novo{transition:none} } /* ============================================================ VINHETAS DA PAGINA MODELO DE DADOS Fontes: lib/data-model-catalog.ts (objetos, campos nativos e FIELD_KIND_LABELS), configuracoes/modelo-dados (nav, ObjectHeader, FieldRow e a tabela de registros do objeto), v2/crm/RecordFieldsCard (campos na ficha + grupo de relacao), v2/data-model/CustomRecordFields (cascata e o aviso "Escolha X primeiro.") e v2/analytics/ChartBuilder (Agrupar por > Campos personalizados). As contagens 17/13/12/8/10 sao as do catalogo. As cores dos selos seguem KIND_TONE, escurecidas o suficiente para passar em 4.5:1 no fundo de 10%. ============================================================ */ .vin-dm .vin-panel{padding:0 0 34px;display:flex;flex-direction:row} /* -- 1. tela do modelo de dados -- */ .dm-lado{width:132px;flex:none;padding:12px 0 0 11px;display:flex;flex-direction:column;gap:1px} .dm-nav{display:flex;align-items:center;gap:6px;border-radius:7px;padding:4px 7px; font-size:9.5px;color:#616161} .dm-nav--on{background:#F1F1F1;color:#111114;font-weight:600} .dm-nav svg{width:11px;height:11px;flex:none} .dm-nn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dm-nq{font-size:8.5px;color:#6B6B6B;flex:none} .dm-sec{padding:9px 7px 2px;font-size:7.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#6B6B6B} .dm-corpo{flex:1;min-width:0;padding:10px 52px 0 13px;display:flex;flex-direction:column} .dm-oh{display:flex;align-items:center;gap:8px;flex:none} .dm-sth{flex:none} .dm-oi{width:26px;height:26px;border-radius:8px;border:1px solid #E6E6E6;color:#616161; display:grid;place-items:center;flex:none} .dm-oi svg{width:13px;height:13px} .dm-ot{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .dm-od{display:block;font-size:8.5px;color:#616161} .dm-st{display:block;font-size:7.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#6B6B6B;margin:8px 0 3px} .dm-sth{display:flex;align-items:center;justify-content:space-between;gap:8px} .dm-st--in{margin-bottom:0} .dm-lista{border:1px solid #EDEDED;border-radius:8px;overflow:hidden;flex:none} .dm-row{display:flex;align-items:center;gap:8px;padding:3px 9px;border-top:1px solid #F0F0F0} .dm-row:first-child{border-top:0} .dm-rx{min-width:0;flex:1} .dm-rl{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#111114} .dm-nat{display:inline-flex;align-items:center;gap:2px;font-size:7.5px;font-weight:500;color:#6B6B6B} .dm-nat svg{width:8px;height:8px} .dm-rk{display:block;font-size:8px;color:#6B6B6B;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dm-tag{border-radius:5px;padding:1px 6px;font-size:8px;font-weight:600;white-space:nowrap;flex:none} .dm-tag--text{background:#F1F1F1;color:#4F4F4F} .dm-tag--number{background:#EBF2FE;color:#1D4ED8} .dm-tag--date{background:#F4F0FE;color:#6D33E0} .dm-tag--boolean{background:#FEF6E7;color:#8A5000} .dm-tag--select{background:#E7F8F2;color:#046B4E} .dm-tag--multiselect{background:#E8F8F6;color:#0A6E63} .dm-tag--relation{background:#FDEDF5;color:#B81E63} .dm-del{width:14px;height:14px;display:grid;place-items:center;color:#9A9A9A;flex:none} .dm-del svg{width:10px;height:10px} .dm-bt{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:3px 8px;font-size:9px;font-weight:600;white-space:nowrap; transition:box-shadow .3s} .dm-bt svg{width:10px;height:10px} /* -- 2. ficha do registro -- */ .vin-dm3 .vin-panel,.vin-dm5 .vin-panel{flex-direction:column} .fc{width:214px;padding:12px 12px 0 13px;border-right:1px solid #EDEDED; display:flex;flex-direction:column;min-height:0} .fc-head{display:flex;align-items:center;gap:8px;flex:none} .fc-av{width:30px;height:30px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:10px;font-weight:600;flex:none} .fc-n{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .fc-e{display:block;font-size:9px;color:#616161} .fc-nat,.fc-cus{display:flex;flex-direction:column;gap:7px;margin-top:9px} .fc-g{display:block} .fc-l{display:block;font-size:8.5px;color:#616161;margin-bottom:3px} .fc-l--top{margin-top:2px} .fc-i{display:block;border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px; font-size:9.5px;color:#111114;min-height:22px} .fc-s{display:flex;align-items:center;justify-content:space-between;gap:6px; border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:9.5px;color:#111114; transition:border-color .3s,background .3s} .fc-s svg{width:10px;height:10px;color:#6B6B6B;flex:none} .fc-sw{width:24px;height:14px;border-radius:99px;background:#E0E0E0;position:relative;display:block} .fc-sw i{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff; transition:left .3s} .fc-sw--on{background:var(--sun)} .fc-sw--on i{left:12px} .fc-tg{display:flex;gap:4px} .fc-t{background:#E8F8F6;color:#0A6E63;border-radius:99px;padding:1px 7px;font-size:8.5px;font-weight:600} .fc-div{border-top:1px solid #EDEDED;margin-top:11px;padding-top:8px;flex:none} .fc-dt{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:#6B6B6B} .fc-dt svg{width:9px;height:9px} /* painel principal do registro, ao lado do aside (RecordTabs + Timeline) */ .fc-main{flex:1;min-width:0;padding:12px 52px 0 13px;display:flex;flex-direction:column} .fc-tabs{display:flex;gap:2px;border-bottom:1px solid #EDEDED;flex:none} .fc-tab{display:flex;align-items:center;gap:4px;padding:4px 7px 6px;font-size:9px; color:#616161;border-bottom:1.5px solid transparent;white-space:nowrap} .fc-tab svg{width:10px;height:10px} .fc-tab--on{color:#111114;font-weight:600;border-bottom-color:#111114} .tl{border:1px solid #EDEDED;border-radius:9px;padding:9px 10px;margin-top:9px;flex:none} .tl-h{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#111114} .tl-h svg{width:11px;height:11px} .tl-d{display:block;font-size:8.5px;color:#616161;margin-top:1px} .tl-i{display:flex;gap:7px;margin-top:9px} .tl-b{width:19px;height:19px;border-radius:50%;border:1px solid #E6E6E6;color:#616161; display:grid;place-items:center;flex:none} .tl-b svg{width:10px;height:10px} .tl-t{display:block;font-size:9.5px;color:#616161;line-height:1.35} .tl-t b{font-weight:600;color:#111114} .tl-m{display:block;font-size:8px;color:#6B6B6B;margin-top:1px} /* -- 3. registros do objeto -- */ .rg{padding:12px 52px 0 13px;display:flex;flex-direction:column;min-height:0} .rg-volta{display:flex;align-items:center;gap:4px;font-size:9px;color:#616161;flex:none} .rg-volta svg{width:10px;height:10px} .rg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex:none} .rg-h1{font-size:14px;font-weight:600;color:#111114;letter-spacing:-.01em} .rg-tab{border:1px solid #EDEDED;border-radius:8px;overflow:hidden;margin-top:10px} .rg-tab table{width:100%;border-collapse:collapse;font-size:9.5px} .rg-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 9px} .rg-tab td{padding:5px 9px;border-top:1px solid #F0F0F0;color:#111114} .rg-ac{width:34px;white-space:nowrap;color:#9A9A9A} .rg-ac svg{width:10px;height:10px;display:inline-block;vertical-align:middle;margin-left:5px} /* -- 4. relacao + cascata -- */ .fc--rel{padding-top:14px} .rel{border:1px solid #E6E6E6;border-radius:9px;padding:8px} .rel-lig{display:flex;align-items:flex-start;gap:6px;border:1px solid #EDEDED; background:#FAFAFA;border-radius:7px;padding:5px 7px;font-size:9px} .rel-i{color:#6B6B6B;flex:none} .rel-i svg{width:10px;height:10px} .rel-p{flex:1;display:flex;flex-wrap:wrap;gap:2px 11px} .rel-p b{font-weight:400;color:#6B6B6B} .rel-x{color:#9A9A9A;flex:none} .rel-x svg{width:9px;height:9px} .rel-form{background:#FAFAFA;border-radius:7px;padding:8px;margin-top:7px; display:flex;flex-direction:column;gap:7px} .rel-acs{display:flex;align-items:center;justify-content:flex-end;gap:7px} .rel-c{font-size:9px;color:#616161} /* cascata: no repouso Modelo esta bloqueado; no hover a marca e escolhida */ .cs-cheio{display:none} /* estado bloqueado sem opacity: o blend derrubava o texto para 1.87:1 */ .cs-modelo{background:#F5F5F5;border-color:#E6E6E6} .cs-modelo .cs-vazio{color:#6B6B6B} .vin-dm4:hover .cs-marca .cs-vazio,.vin-dm4:hover .cs-modelo .cs-vazio{display:none} .vin-dm4:hover .cs-marca .cs-cheio,.vin-dm4:hover .cs-modelo .cs-cheio{display:inline} .vin-dm4:hover .cs-marca{border-color:#B9D400;background:#FBFFE8} .vin-dm4:hover .cs-modelo{background:#fff;border-color:#E0E0E0} .vin-dm4:hover .cs-aviso{opacity:0} .cs-aviso{display:block;font-size:8px;color:#6B6B6B;margin-top:3px;transition:opacity .3s} /* -- 5. construtor de painel -- */ .cb{display:flex;gap:12px;padding:12px 52px 0 13px;min-height:0} .cb-prev{flex:1;min-width:0;border:1px solid #EDEDED;border-radius:9px;padding:9px 10px; display:flex;flex-direction:column} .cb-pt{display:block;font-size:10px;font-weight:600;color:#111114} .gb{display:flex;flex-direction:column;gap:8px;margin-top:10px} .gb-l{display:flex;align-items:center;gap:7px} .gb-r{width:52px;flex:none;font-size:8.5px;color:#4F4F4F;text-align:right} .gb-t{flex:1;height:11px;background:#F3F4F3;border-radius:3px;overflow:hidden} .gb-t i{display:block;height:100%;background:#A7C900;border-radius:3px} .gb-v{width:24px;flex:none;font-size:8.5px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums;text-align:right} .cb-cfg{width:158px;flex:none;display:flex;flex-direction:column} .cb-lab{display:block;font-size:7.5px;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:#6B6B6B;margin:0 0 3px} .cb-cfg .fc-i,.cb-cfg .fc-s{margin-bottom:8px} .cb-tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px} .cb-t{border:1px solid #EDEDED;border-radius:6px;padding:4px 2px;display:flex; flex-direction:column;align-items:center;gap:2px;font-size:7px;color:#6B6B6B} .cb-t svg{width:10px;height:10px} .cb-t--on{border-color:#B9D400;background:#FBFFE8;color:#111114} .cb-sec{display:block;font-size:9px;font-weight:600;color:#111114;margin:2px 0 7px} .cb-menu{display:block;border:1px solid #E0E0E0;border-radius:7px;background:#fff; box-shadow:0 6px 16px rgba(2,28,22,.12);padding:3px;margin-top:-4px} .cb-op{display:block;border-radius:5px;padding:4px 7px;font-size:9.5px;color:#111114; transition:background .3s,color .3s} .cb-gr{display:block;font-size:7.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#6B6B6B;padding:6px 7px 3px} /* -- etiquetas, cursores e coreografia -- */ .dm1-note{top:4px;right:52px} .dm1-note::after{left:auto;right:16px} .dm2-note{top:4px;right:52px} .dm2-note::after{left:auto;right:16px} .dm3-note{top:4px;right:52px} .dm3-note::after{left:auto;right:16px} .dm4-note{top:4px;right:52px} .dm4-note::after{left:auto;right:16px} .dm5-note{top:4px;right:52px} .dm5-note::after{left:auto;right:16px} .vin-dm1 .cur--yellow{left:60px;top:300px} .vin-dm1:hover .cur--yellow{left:60px;top:236px} .vin-dm2 .cur--lilac{left:calc(100% - 78px);top:320px} .vin-dm2:hover .cur--lilac{left:calc(100% - 150px);top:250px} .vin-dm3 .cur--peach{left:calc(100% - 78px);top:330px} .vin-dm3:hover .cur--peach{left:calc(100% - 150px);top:322px} .vin-dm4 .cur--yellow{left:calc(100% - 78px);top:320px} .vin-dm4:hover .cur--yellow{left:calc(100% - 150px);top:250px} /* a etiqueta abre para a esquerda, sobre a area vazia do grafico, para nao cobrir justamente o "Segmento" que a secao esta vendendo */ .vin-dm5 .cur--lilac{left:max(78px,calc(100% - 310px));top:300px} .vin-dm5:hover .cur--lilac{left:calc(100% - 168px);top:332px} .vin-dm1:hover .dm-novo{box-shadow:0 0 0 3px rgba(213,254,0,.4)} .fc-alvo{transition:border-color .3s,background .3s} .vin-dm2:hover .fc-alvo{border-color:#B9D400;background:#FBFFE8} .vin-dm3 .rg-tab tr:nth-child(3) td{transition:background .3s} .vin-dm3:hover .rg-tab tbody tr:nth-child(3) td{background:#FBFFE8} .cb-alvo{transition:border-color .3s,background .3s} .vin-dm5:hover .cb-alvo{background:#FBFFE8;font-weight:600} /* A vinheta do topo encolhe de 360 para 280 quando o layout empilha: a lista de campos cede as ultimas linhas (nas telas de verdade ela rola). */ /* faixa estreita de duas colunas: a coluna da imagem afina e a ultima linha escorrega alguns pixels por baixo do corte */ @media (max-width:1000px) and (min-width:941px){ .vin-dm1 .dm-lista--cus .dm-row:nth-of-type(3){display:none} } @media (max-width:940px){ .vin-dm1 .dm-lista--nat .dm-row:nth-of-type(n+3){display:none} .vin-dm1 .dm-lista--cus .dm-row:nth-of-type(n+2){display:none} } @media (max-width:480px){ .vin-dm1 .dm-lista--nat .dm-row:nth-of-type(n+2){display:none} .vin-dm2 .tl-i:nth-of-type(n+2),.vin-dm4 .tl-i:nth-of-type(n+2){display:none} .vin-dm3 .rg-tab tbody tr:nth-child(n+7){display:none} } @media (max-width:400px){ /* a coluna Blindado nao cabe e empurrava a tabela para fora do recorte */ .vin-dm3 .rg-tab th:nth-child(5),.vin-dm3 .rg-tab td:nth-child(5){display:none} .vin-dm3 .rg-tab tbody tr:nth-child(n+6){display:none} .vin-dm1 .dm-oh,.vin-dm1 .dm-corpo > .dm-st,.vin-dm1 .dm-lista--nat{display:none} .vin-dm2 .tl-i,.vin-dm4 .tl-i{display:none} } @media (hover:none){ .vin-dm .cur{display:none} .cs-marca .cs-vazio,.cs-modelo .cs-vazio{display:none} .cs-marca .cs-cheio,.cs-modelo .cs-cheio{display:inline} .cs-marca{border-color:#B9D400;background:#FBFFE8} .cs-modelo{background:#fff;border-color:#E0E0E0} .cs-aviso{opacity:0} .vin-dm3 .rg-tab tbody tr:nth-child(3) td{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-dm .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE INBOX Fontes: v2/chat/ConversationList (seletor de simcard, busca com ⌘K, abas Todas/Ativas/Arquivos/Nao lidas, selo Inbound/Outbound e a bolinha #00CC80 de nao lida), ThreadView (cabecalho, busca na conversa), MessageBubble, Composer e ContactDetailsPanel (abas Detalhes/Timeline/ Auto, Assumir conversa, Responsavel, Setor, notas e o historico que mistura deals e atividades). ============================================================ */ .vin-ib .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} .ib3,.ib2{display:flex;height:100%;min-height:0;padding-right:52px} .ib3{padding-right:0} .ib3 .ib-lista{width:146px} .ib3 .ib-dp{width:158px} .ib3 .tv-n{font-size:9.5px} .ib3 .cv-aba{font-size:7px} .ib3 .cv-abas{margin-left:6px;margin-right:6px} .ib3 .dp-bt{font-size:8px} .ib-lista{width:150px;flex:none;border-right:1px solid #E6E6E6;display:flex; flex-direction:column;min-height:0} .ib-lista--largo{width:236px} .ib-tv{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} .ib-tv--solo{padding-right:52px} .ib-dp{width:146px;flex:none;border-left:1px solid #E6E6E6;display:flex; flex-direction:column;min-height:0} .ib2--dp .ib-dp{width:168px} /* -- lista de conversas -- */ .cv-top{display:flex;align-items:center;gap:6px;padding:8px 8px 0} .cv-sel{display:flex;align-items:center;gap:4px;min-width:0;flex:1} .cv-inbox{font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:#6B6B6B} .cv-pt{color:#9A9A9A;font-size:8px} .cv-sim{font-size:10px;font-weight:600;color:#111114;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cv-sel svg{width:9px;height:9px;color:#6B6B6B;flex:none} .cv-filtro{width:16px;height:16px;display:grid;place-items:center;color:#6B6B6B;flex:none} .cv-filtro svg{width:10px;height:10px} .cv-busca{display:flex;align-items:center;gap:4px;margin:7px 8px 0;border:1px solid #E0E0E0; border-radius:6px;padding:3px 5px} .cv-busca svg{width:9px;height:9px;color:#6B6B6B;flex:none} .cv-ph{flex:1;min-width:0;font-size:8.5px;color:#6E6E6E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cv-kbd{border:1px solid #E6E6E6;background:#F5F5F5;border-radius:3px;padding:0 3px; font-size:7px;color:#6B6B6B;font-family:ui-monospace,Menlo,monospace;flex:none} .cv-abas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#F5F5F5; border-radius:6px;padding:1px;margin:7px 8px 0} .cv-aba{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cv-aba{border-radius:5px;padding:2px 0;font-size:8px;color:#616161;text-align:center} .cv-aba--on{background:#fff;color:#111114;font-weight:600} .cv-rows{margin-top:7px;min-height:0} .cv-row{display:flex;gap:6px;padding:6px 8px;border-top:1px solid #F0F0F0; transition:background .3s} .cv-row:first-child{border-top:0} .cv-row--on{background:#F1F1F1} .cv-av{width:22px;height:22px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:8px;font-weight:600;flex:none} .cv-x{min-width:0;flex:1} .cv-l1{display:flex;align-items:center;gap:4px} .cv-est{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:600} .cv-est i{width:5px;height:5px;border-radius:50%;display:block} .cv-est--in{color:#116330} .cv-est--in i{background:#22C55E} .cv-est--out{color:#6B6B6B} .cv-est--out i{background:#B0B0B0} .cv-est--ok{color:#046B4E} .cv-est--ok i{background:#10B981} .cv-h{margin-left:auto;font-size:7.5px;color:#6B6B6B;font-variant-numeric:tabular-nums;flex:none} .cv-l2{display:flex;align-items:center;gap:5px;margin-top:1px} .cv-nome{min-width:0;font-size:9.5px;font-weight:500;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cv-nome--n{font-weight:700} .cv-bola{width:7px;height:7px;border-radius:50%;background:#00CC80;flex:none} .cv-l3{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* seletor de canal aberto (Popover) */ .ib-canais{position:relative;display:flex;height:100%;min-height:0;padding-right:52px} .cv-pop{position:absolute;z-index:4;left:14px;top:32px;width:150px;background:#fff; border:1px solid #E0E0E0;border-radius:8px;box-shadow:0 8px 22px rgba(2,28,22,.14);padding:3px} .cv-op{display:flex;align-items:center;gap:6px;border-radius:6px;padding:4px 6px; font-size:9px;color:#111114;transition:background .3s} .cv-op--on{background:#F1F1F1} .cv-oa{width:17px;height:17px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:7px;font-weight:700;flex:none} .cv-ok{margin-left:auto;color:#6B6B6B;flex:none} .cv-ok svg{width:9px;height:9px} .cv-nb{margin-left:auto;background:#111114;color:#fff;border-radius:99px;padding:0 5px; font-size:7.5px;font-weight:700;flex:none} /* -- conversa -- */ .tv-head{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #E6E6E6;flex:none} .tv-av{width:24px;height:24px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:8.5px;font-weight:600;flex:none} .tv-id{min-width:0;flex:1} .tv-n{display:block;font-size:10.5px;font-weight:600;color:#111114;line-height:1.25} .tv-f{display:flex;align-items:center;gap:3px;font-size:8px;color:#6B6B6B;line-height:1.25} .tv-f svg{width:8px;height:8px} .tv-badge{display:flex;align-items:center;gap:3px;border:1px solid #E0E0E0;border-radius:5px; padding:1px 4px;font-size:7.5px;color:#6B6B6B;flex:none} .tv-badge svg{width:8px;height:8px} .tv-busca{display:flex;align-items:center;gap:5px;background:#FAFAFA;border-bottom:1px solid #EDEDED; padding:5px 10px;flex:none} .tv-busca svg{width:9px;height:9px;color:#6B6B6B;flex:none} .tv-bq{flex:1;font-size:9px;color:#111114} .tv-bn{font-size:8px;color:#6B6B6B;flex:none} .tv-bx{color:#6B6B6B;flex:none} .tv-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;padding:9px 10px} .tv-row{display:flex} .tv-row--me{justify-content:flex-end} .tv-bal{max-width:80%;border-radius:11px;padding:5px 8px;background:#F1F1F1;color:#111114} .tv-bal--me{background:#F2FDD0} .tv-txt{display:block;font-size:9.5px;line-height:1.4} .tv-txt mark{background:#FBF0A8;color:inherit;border-radius:2px;padding:0 1px} .tv-pe{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:7px; color:#4A6340;margin-top:2px;font-variant-numeric:tabular-nums} .tv-row:not(.tv-row--me) .tv-pe{color:#6B6B6B;justify-content:flex-start} .tv-ck{display:flex;color:#1D4E7A} .tv-ck svg{width:9px;height:9px} /* audio com controle de velocidade */ .tv-mid{display:flex;align-items:center;gap:5px} .tv-play{width:17px;height:17px;border-radius:50%;background:#111114;color:#fff; display:grid;place-items:center;flex:none} .tv-play svg{width:8px;height:8px} .tv-onda{display:flex;align-items:center;gap:1.5px;height:16px} .tv-onda i{width:1.5px;background:#9BB37F;border-radius:1px;display:block} .tv-dur{font-size:7.5px;color:#4A6340;font-variant-numeric:tabular-nums} .tv-vel{border:1px solid #C6D9A6;border-radius:99px;padding:0 4px;font-size:7px; font-weight:700;color:#3F5300} /* documento */ .tv-doc{display:flex;align-items:center;gap:6px} .tv-di{width:20px;height:20px;border-radius:5px;background:#E8F0DA;color:#3F5300; display:grid;place-items:center;flex:none} .tv-di svg{width:11px;height:11px} .tv-dn{display:block;font-size:9px;font-weight:600;color:#111114} .tv-ds{display:block;font-size:7.5px;color:#4A6340} /* composer */ .tv-comp{display:flex;align-items:center;gap:5px;border-top:1px solid #E6E6E6; padding:7px 10px 8px;flex:none} .tv-ic{width:16px;height:16px;display:grid;place-items:center;color:#6B6B6B;flex:none} .tv-ic svg{width:11px;height:11px} .tv-inp{flex:1;min-width:0;border:1px solid #E6E6E6;background:#FAFAFA;border-radius:8px; padding:4px 7px;font-size:9px;color:#6E6E6E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tv-env{width:20px;height:20px;border-radius:6px;background:#111114;color:#fff; display:grid;place-items:center;flex:none} .tv-env svg{width:10px;height:10px} /* -- painel do contato -- */ .dp-head{display:flex;align-items:center;gap:6px;padding:8px 9px;flex:none} .dp-av{width:22px;height:22px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:8px;font-weight:600;flex:none} .dp-id{min-width:0;flex:1} .dp-n{display:block;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-f{display:block;font-size:8px;color:#6B6B6B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-abas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#F5F5F5; border-radius:6px;padding:1px;margin:0 9px} .dp-aba{border-radius:5px;padding:2px 0;font-size:8px;color:#616161;text-align:center} .dp-aba--on{background:#fff;color:#111114;font-weight:600} .dp-corpo{padding:8px 9px 0;display:flex;flex-direction:column;gap:5px;min-height:0} .dp-bt{display:flex;align-items:center;justify-content:center;gap:4px;border-radius:6px; padding:4px 6px;font-size:8.5px;font-weight:600;text-align:center;transition:box-shadow .3s} .dp-bt svg{width:10px;height:10px;flex:none} .dp-bt--p{background:#111114;color:#fff} .dp-bt--o{border:1px solid #DDD;color:#111114} .dp-cap{display:flex;align-items:center;gap:4px;font-size:7px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:#6B6B6B;margin-top:2px} .dp-cap svg{width:8px;height:8px} .dp-cap--tl{margin-top:0} .dp-sel{display:flex;align-items:center;justify-content:space-between;gap:4px; border:1px solid #E0E0E0;border-radius:6px;padding:3px 6px;font-size:8.5px;color:#111114; transition:border-color .3s,background .3s} .dp-sel svg{width:9px;height:9px;color:#6B6B6B;flex:none} .dp-nota{border:1px solid #EDEDED;background:#FAFAFA;border-radius:6px;padding:5px 6px} .dp-nt{display:block;font-size:8.5px;line-height:1.35;color:#111114} .dp-nq{display:block;font-size:7px;color:#6B6B6B;margin-top:2px} .dp-it{display:flex;align-items:flex-start;gap:5px;border:1px solid #EDEDED;border-radius:6px; background:#fff;padding:5px 6px;transition:background .3s,border-color .3s} .dp-ii{color:#6B6B6B;flex:none} .dp-ii svg{width:10px;height:10px} .dp-ix{min-width:0;flex:1} .dp-it-t{display:block;font-size:8.5px;font-weight:600;color:#111114;line-height:1.3} .dp-it-s{display:block;font-size:7.5px;color:#6B6B6B;margin-top:1px} .dp-it-q{display:block;font-size:7px;color:#6B6B6B} .dp-ie{color:#9A9A9A;flex:none} .dp-ie svg{width:8px;height:8px} /* -- etiquetas, cursores e coreografia -- */ .ib1-note{top:4px;right:52px} .ib1-note::after{left:auto;right:16px} .ib2-note{top:4px;right:52px} .ib2-note::after{left:auto;right:16px} .ib3-note{top:4px;right:52px} .ib3-note::after{left:auto;right:16px} .ib4-note{top:4px;right:52px} .ib4-note::after{left:auto;right:16px} .ib5-note{top:4px;right:52px} .ib5-note::after{left:auto;right:16px} /* area livre de cada vinheta, medida no navegador */ .vin-ib1 .cur--yellow{left:52%;top:282px} .vin-ib1:hover .cur--yellow{left:44%;top:250px} .vin-ib2 .cur--lilac{left:calc(100% - 78px);top:300px} .vin-ib2:hover .cur--lilac{left:calc(100% - 150px);top:250px} .vin-ib3 .cur--peach{left:44%;top:300px} .vin-ib3:hover .cur--peach{left:38%;top:262px} .vin-ib4 .cur--yellow{left:calc(100% - 78px);top:284px} .vin-ib4:hover .cur--yellow{left:calc(100% - 150px);top:250px} .vin-ib5 .cur--lilac{left:calc(100% - 78px);top:300px} .vin-ib5:hover .cur--lilac{left:calc(100% - 150px);top:262px} .vin-ib1 .cv-row:nth-of-type(2),.vin-ib2 .cv-op:nth-of-type(3){transition:background .3s} .vin-ib1:hover .cv-row:nth-of-type(2){background:#F7F9F4} .vin-ib2:hover .cv-op:nth-of-type(3){background:#FBFFE8} .vin-ib3:hover .dp-sel:first-of-type{border-color:#B9D400;background:#FBFFE8} .vin-ib5:hover .dp-it:first-of-type{border-color:#B9D400;background:#FBFFE8} /* faixa estreita de duas colunas e telas pequenas: a conversa cede a ultima mensagem (no app ela rola) e, no celular, o inbox mostra um painel por vez — exatamente o que o ThreadView faz com o botao Voltar em `md:hidden`. */ @media (max-width:1000px) and (min-width:941px){ .vin-ib1 .tv-row:nth-of-type(n+3){display:none} } @media (max-width:480px){ .vin-ib1 .tv-row:nth-of-type(n+2){display:none} .vin-ib2 .ib-tv{display:none} .vin-ib5 .tv-row:nth-of-type(n+3){display:none} } @media (hover:none){ .vin-ib .cur{display:none} .vin-ib2 .cv-op:nth-of-type(3){background:#FBFFE8} .vin-ib5 .dp-it:first-of-type{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-ib .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE CAPTURA DE LEADS Fontes: crm/formularios/[id] (editor, abas Editar/Leads, FIELD_TYPES, MAP_TO_OPTIONS, Estatisticas e a lista "Leads recebidos"), app/forms/[slug] (pagina publica) e analise/atribuicao (KPIs, funil e a tabela por origem). A quinta vinheta e um ESBOCO: o editor de funis interativos ainda nao existe — por isso o selo "Em construcao" dentro do quadro e o traco pontilhado. ============================================================ */ .vin-cl .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- cabecalho do editor de formulario -- */ .fm-head{display:flex;align-items:center;gap:6px;padding:9px 52px 9px 11px;flex:none} .fm-volta{width:18px;height:18px;display:grid;place-items:center;color:#616161;flex:none} .fm-volta svg{width:12px;height:12px} .fm-hx{min-width:0;flex:1} .fm-n{display:block;font-size:12px;font-weight:600;color:#111114;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fm-d{display:block;font-size:8.5px;color:#6B6B6B;line-height:1.25} .fm-bt{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 8px; font-size:9px;font-weight:600;white-space:nowrap;flex:none;transition:box-shadow .3s} .fm-bt svg{width:10px;height:10px} .fm-bt--o{border:1px solid #DDD;background:#fff;color:#111114} .fm-bt--p{background:#111114;color:#fff} .fm-abas{display:flex;gap:2px;padding:0 52px 0 12px;border-bottom:1px solid #E6E6E6;flex:none} .fm-aba{display:flex;align-items:center;gap:4px;padding:4px 8px 6px;font-size:9.5px; color:#616161;border-bottom:1.5px solid transparent} .fm-aba--on{color:#111114;font-weight:600;border-bottom-color:#111114} .fm-nb{background:#F1F1F1;color:#3F3F3F;border-radius:99px;padding:0 5px;font-size:8px;font-weight:700} .fm-corpo{flex:1;min-height:0;padding:10px 52px 0 12px;display:flex;flex-direction:column} .fm-ct{display:block;font-size:10.5px;font-weight:600;color:#111114} .fm-cd{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .fm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 9px} .fm-st{border:1px solid #EDEDED;background:#FAFAFA;border-radius:7px;padding:5px 8px} .fm-sr{display:block;font-size:8px;color:#6B6B6B} .fm-sv{display:block;font-size:12px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* -- linhas de lead -- */ .ld-lista{display:flex;flex-direction:column;gap:4px;margin-top:6px} .ld-row{display:flex;align-items:center;gap:7px;border:1px solid #EDEDED;border-radius:8px; background:#fff;padding:4px 8px;transition:background .3s,border-color .3s} .ld-av{width:22px;height:22px;border-radius:50%;background:#F1F1F1;color:#4F4F4F; display:grid;place-items:center;font-size:9px;font-weight:700;flex:none} .ld-x{min-width:0;flex:1} .ld-n{display:block;font-size:10px;font-weight:600;color:#111114} .ld-m{display:flex;flex-wrap:wrap;gap:1px 9px;font-size:8px;color:#6B6B6B;margin-top:1px} .ld-m span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .ld-m svg{width:8px;height:8px} .ld-bt{display:inline-flex;align-items:center;gap:4px;border:1px solid #DDD;border-radius:6px; padding:3px 7px;font-size:8.5px;font-weight:600;color:#111114;flex:none;white-space:nowrap; transition:border-color .3s,background .3s} .ld-bt svg{width:9px;height:9px} /* -- 2. editor de campos + pagina publica -- */ .cl2{display:flex;gap:12px;padding:12px 52px 0 12px;min-height:0} .cp{flex:1;min-width:0;display:flex;flex-direction:column} .cp-cab{display:grid;grid-template-columns:12px minmax(50px,1fr) 60px 68px 22px 12px;gap:4px; font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B6B6B; padding:0 2px;margin:7px 0 3px} .cp-lin{display:grid;grid-template-columns:12px minmax(50px,1fr) 60px 68px 22px 12px;gap:4px; align-items:center;border:1px solid #EDEDED;border-radius:7px;background:#fff; padding:4px 5px;margin-bottom:4px;transition:border-color .3s,background .3s} .cp-gr{color:#B7B7B7} .cp-gr svg{width:10px;height:10px} .cp-rot{font-size:9.5px;font-weight:600;color:#111114;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .cp-sel{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px; border:1px solid #E6E6E6;border-radius:5px;padding:2px 4px;font-size:8px;color:#111114; overflow:hidden;white-space:nowrap} .cp-sel b{min-width:0;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cp-sel svg{width:8px;height:8px;color:#6B6B6B;flex:none} .cp-ob{width:13px;height:13px;border-radius:3px;border:1px solid #D6D6D6;display:block; margin:0 auto;position:relative} .cp-ob--on{background:#111114;border-color:#111114} .cp-ob--on::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px; border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)} .cp-del{color:#B7B7B7} .cp-del svg{width:10px;height:10px} .cp-add{align-self:flex-start;margin-top:2px} /* pagina publica */ .pb{width:176px;flex:none;background:#F4F5F4;border:1px solid #E6E6E6;border-radius:9px; overflow:hidden;display:flex;flex-direction:column} .pb-barra{display:block;height:3px;background:var(--sun)} .pb-card{margin:10px 10px 0;background:#fff;border:1px solid #E6E6E6;border-radius:8px;padding:9px} .pb-t{display:block;font-size:10px;font-weight:600;color:#111114;line-height:1.3} .pb-d{display:block;font-size:8px;color:#6B6B6B;margin-top:2px;line-height:1.35} .pb-l{display:block;font-size:8px;color:#3F3F3F;margin-top:7px;margin-bottom:2px} .pb-l b{color:#B4342B;font-weight:400} .pb-i{display:flex;align-items:center;justify-content:space-between;height:16px; border:1px solid #E0E0E0;border-radius:5px;background:#fff} .pb-i--sel{padding:0 5px;font-size:8px;color:#6E6E6E} .pb-i--sel svg{width:8px;height:8px;color:#6B6B6B} .pb-bt{display:block;margin-top:9px;background:#111114;color:#fff;border-radius:6px; padding:4px 0;text-align:center;font-size:9px;font-weight:600} .pb-rod{display:block;text-align:center;font-size:7.5px;color:#6B6B6B;margin:8px 0 10px} /* -- 3. lead vira contato -- */ .cl3{display:flex;gap:12px;padding:12px 52px 0 12px;min-height:0} .cl3-e{flex:1;min-width:0} .ct-card{width:172px;flex:none;border:1px solid #EDEDED;border-radius:9px;background:#fff;padding:9px 10px} .ct-head{display:flex;align-items:center;gap:7px;margin-bottom:7px} .ct-av{width:26px;height:26px;border-radius:50%;background:#F1F1F1;color:#4F4F4F; display:grid;place-items:center;font-size:9px;font-weight:700;flex:none} .ct-n{display:block;font-size:10.5px;font-weight:600;color:#111114} .ct-e{display:block;font-size:8px;color:#046B4E} .ct-l{display:block;font-size:7.5px;color:#6B6B6B;margin-top:6px} .ct-v{display:block;font-size:9.5px;color:#111114;margin-top:1px} .ct-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px} .ct-tag{display:inline-flex;align-items:center;gap:3px;background:#F1F1F1;color:#3F3F3F; border-radius:99px;padding:1px 6px;font-size:8px;font-weight:600} .ct-tag svg{width:8px;height:8px} /* -- 4. atribuicao -- */ .at{padding:12px 52px 0 12px;display:flex;flex-direction:column;min-height:0} .at-head{display:flex;align-items:flex-start;gap:6px;flex:none} .at-hx{min-width:0;flex:1} .at-t{display:block;font-size:13px;font-weight:600;color:#111114;letter-spacing:-.01em} .at-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px;line-height:1.35} .at-mes{border:1px solid #E0E0E0;border-radius:6px;padding:3px 7px;font-size:9px; color:#111114;flex:none;font-variant-numeric:tabular-nums} .at-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px;flex:none} .at-kpi{border:1px solid #EDEDED;background:#FAFAFA;border-radius:7px;padding:5px 8px} .at-kpi--ac{background:#FBFFE8;border-color:#DCEE9A} .at-kr{display:block;font-size:7.5px;color:#6B6B6B} .at-kv{display:block;font-size:12px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .at-funil{border:1px solid #EDEDED;border-radius:8px;padding:7px 9px;margin-top:8px;flex:none} .at-ft-t{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-bottom:5px} .at-fl{display:flex;align-items:center;gap:7px;margin-top:4px} .at-fr{width:72px;flex:none;font-size:8px;color:#6B6B6B} .at-ft{flex:1;height:14px;background:#F3F4F3;border-radius:3px;overflow:hidden} .at-ft i{display:flex;align-items:center;justify-content:flex-end;height:100%;min-width:26px; background:#B9D400;border-radius:3px;padding-right:4px;font-size:8px;font-weight:700; /* o componente usa branco sobre o acento a 80%, que da 2.55:1; aqui o numero fica escuro sobre o acento cheio */ color:#2A3B00;font-style:normal;font-variant-numeric:tabular-nums} .at-tab{border:1px solid #EDEDED;border-radius:8px;overflow:hidden;margin-top:8px} .at-tab table{width:100%;border-collapse:collapse;font-size:9px} .at-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;text-align:right;padding:4px 6px} .at-tab th:first-child{text-align:left} .at-tab td{padding:4px 6px;border-top:1px solid #F0F0F0;color:#6B6B6B;text-align:right; font-variant-numeric:tabular-nums} .at-tab td:first-child{text-align:left;color:#111114;font-weight:600} .at-tab td.at-b{font-weight:700;color:#111114} /* Em tela estreita o cabecalho de Atribuicao espremia a coluna do texto ate uma palavra por linha e o titulo passava por baixo do chip do mes: a partir daqui o titulo ocupa a linha inteira e o mes e os botoes descem. Vale para esta vinheta e para a da pagina de captura de leads. */ @media (max-width:520px){ .at-head{flex-wrap:wrap} .at-hx{flex:1 0 100%} } .at-alvo td{transition:background .3s} /* -- 5. esboco do funil interativo (em construcao) -- */ .qz{padding:12px 52px 0 12px;display:flex;flex-direction:column;min-height:0} .qz-top{display:flex;align-items:center;gap:7px;flex:none} .qz-t{font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .qz-selo{background:#FCF3D6;color:#7A5B00;border:1px solid #EFDFA8;border-radius:99px; padding:1px 8px;font-size:8px;font-weight:700} .qz-cols{display:flex;gap:11px;margin-top:9px;min-height:0;flex:1} .qz-pal{width:92px;flex:none;border:1.5px dashed #D4D9D6;border-radius:8px;padding:7px} .qz-pt{display:block;font-size:7.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#6B6B6B;margin-bottom:5px} .qz-bl{display:block;border:1.5px dashed #D4D9D6;border-radius:6px;padding:4px 6px; font-size:8.5px;color:#4F4F4F;margin-bottom:4px;background:#FBFCFB} .qz-tela{flex:1;min-width:0;border:1.5px dashed #D4D9D6;border-radius:8px; background:#FBFCFB;padding:14px 10px;display:flex;flex-direction:column;align-items:center} .qz-no{border:1.5px dashed #C2C8C5;border-radius:8px;background:#fff;padding:5px 8px; text-align:center;font-size:9px;font-weight:600;color:#111114} .qz-no span{display:block;font-size:8px;font-weight:400;color:#6B6B6B;margin-top:1px} .qz-no--1{width:188px} .qz-no--2{width:82px} .qz-no--3{width:150px} .qz-e{display:block;margin:0 auto} .qz-e2{display:block;margin:0 auto} .qz-par{display:flex;gap:24px} /* -- etiquetas, cursores e coreografia -- */ .cl1-note{top:4px;right:52px} .cl1-note::after{left:auto;right:16px} .cl2-note{top:4px;right:52px} .cl2-note::after{left:auto;right:16px} .cl3-note{top:4px;right:52px} .cl3-note::after{left:auto;right:16px} .cl4-note{top:4px;right:52px} .cl4-note::after{left:auto;right:16px} .cl5-note{top:4px;right:52px} .cl5-note::after{left:auto;right:16px} /* a terceira linha sangra alguns pixels: a lista rola na tela real */ .vin-cl1 .ld-row:nth-of-type(3) .ld-m span:last-child{display:none} .vin-cl1 .cur--yellow{left:calc(100% - 78px);top:300px} .vin-cl1:hover .cur--yellow{left:calc(100% - 150px);top:270px} .vin-cl2 .cur--lilac{left:calc(100% - 78px);top:320px} .vin-cl2:hover .cur--lilac{left:calc(100% - 150px);top:270px} .vin-cl3 .cur--peach{left:calc(100% - 78px);top:306px} .vin-cl3:hover .cur--peach{left:calc(100% - 150px);top:270px} .vin-cl4 .cur--yellow{left:calc(100% - 78px);top:320px} .vin-cl4:hover .cur--yellow{left:calc(100% - 150px);top:270px} .vin-cl5 .cur--lilac{left:calc(100% - 78px);top:320px} .vin-cl5:hover .cur--lilac{left:calc(100% - 150px);top:270px} .vin-cl1:hover .ld-row:first-child{border-color:#B9D400;background:#FBFFE8} .vin-cl1:hover .ld-row:first-child .ld-bt{border-color:#B9D400} .vin-cl2:hover .cp-lin--alvo{border-color:#B9D400;background:#FBFFE8} .vin-cl3:hover .ld-row:first-child{border-color:#B9D400;background:#FBFFE8} .vin-cl4:hover .at-alvo td{background:#FBFFE8} /* Faixa estreita de duas colunas (941-1200) e telas empilhadas: as listas e a tabela cedem as ultimas linhas — na tela real elas rolam. */ @media (max-width:1200px) and (min-width:941px){ .vin-cl1 .ld-row:nth-of-type(n+3){display:none} .vin-cl3 .ld-row:nth-of-type(n+4){display:none} .vin-cl4 .at-tab tbody tr:nth-child(n+3){display:none} } @media (max-width:940px){ .vin-cl1 .ld-row:nth-of-type(n+2){display:none} } @media (max-width:520px){ .vin-cl3 .ld-row:nth-of-type(n+4){display:none} } @media (max-width:430px){ .vin-cl1 .fm-corpo > .fm-ct:first-child,.vin-cl1 .fm-stats{display:none} .vin-cl4 .at-tab tbody tr:nth-child(n+3){display:none} } @media (max-width:480px){ /* oito colunas nao cabem: caem as derivadas (ROAS/CAC/Conv. estao nos KPIs) */ .vin-cl4 .at-tab th:nth-child(7),.vin-cl4 .at-tab td:nth-child(7), .vin-cl4 .at-tab th:nth-child(8),.vin-cl4 .at-tab td:nth-child(8){display:none} } @media (max-width:400px){ .vin-cl4 .at-funil{display:none} .vin-cl4 .at-tab th:nth-child(5),.vin-cl4 .at-tab td:nth-child(5), .vin-cl4 .at-tab th:nth-child(6),.vin-cl4 .at-tab td:nth-child(6){display:none} } @media (max-width:380px){ /* com o cabecalho de Atribuicao ocupando menos linhas, ainda cabe a primeira linha da tabela alem dos KPIs */ .vin-cl4 .at-tab tbody tr:nth-child(n+2){display:none} /* o quadro do editor tem largura fixa, entao encolhe junto */ .vin-cl5 .qz-tela{padding:10px 6px} .vin-cl5 .qz-no--1{width:150px} .vin-cl5 .qz-par{gap:14px} .vin-cl5 .qz-no--2{width:68px;font-size:8px} .vin-cl5 .qz-pal{width:76px} } @media (hover:none){ .vin-cl .cur{display:none} .vin-cl2 .cp-lin--alvo{border-color:#B9D400;background:#FBFFE8} .vin-cl4 .at-alvo td{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-cl .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE RELATORIOS Fontes: analise/dashboards e dashboards/[id] (cabecalho, barra de abas, Editar/Salvar layout e o menu Widget: Grafico, Pagina (iFrame), Texto, Tabela (View)), v2/analytics/ChartBuilder (os sete CHART_TYPES, METRIC_LABELS e GRANULARITY_LABELS), AnalyticsWidget (PALETTE #10b981 #3b82f6 #f59e0b #8b5cf6 #ef4444 #06b6d4) e WidgetRenderer. ============================================================ */ .vin-rl .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} .rl-head{display:flex;align-items:flex-start;gap:6px;padding:11px 52px 0 12px;flex:none} .rl-hx{min-width:0;flex:1} .rl-t{display:block;font-size:13px;font-weight:600;color:#111114;letter-spacing:-.01em} .rl-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .rl-ic{width:20px;height:20px;border:1px solid #E0E0E0;border-radius:6px;display:grid; place-items:center;color:#616161;flex:none} .rl-ic svg{width:10px;height:10px} .rl-bt{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 8px; font-size:9px;font-weight:600;white-space:nowrap;flex:none} .rl-bt svg{width:10px;height:10px} .rl-bt--p{background:#111114;color:#fff} .rl-bt--g{color:#5F5F5F} .rl-abas{display:flex;align-items:center;gap:3px;padding:9px 52px 0 12px;flex:none} .rl-aba{border-radius:6px;padding:3px 8px;font-size:9.5px;color:#616161} .rl-aba--on{background:#F1F1F1;color:#111114;font-weight:600} .rl-aba--add{color:#8A8A8A;padding:3px 5px;display:grid;place-items:center} .rl-aba--add svg{width:10px;height:10px} .rl-fim{margin-left:auto;display:flex;align-items:center;gap:5px} /* grade de widgets */ /* a segunda faixa (graficos) estica ate o corte; a primeira (KPIs) mantem a altura */ .rl-grade{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:9px 52px 0 12px; grid-template-rows:auto minmax(0,1fr);flex:1;min-height:0} .rl-grade--tb{grid-template-rows:minmax(0,1fr)} /* o grafico ao lado da tabela nao precisa esticar ate o corte */ .rl-grade--tb .wg--w1{justify-content:flex-start} .rl-grade--tb .bch{flex:none;height:96px} .wg{grid-column:span 2;border:1px solid #EDEDED;border-radius:9px;background:#fff;padding:7px 9px; display:flex;flex-direction:column;min-width:0} .wg--w1{grid-column:span 2} .wg--w2{grid-column:span 2} .wg--w3{grid-column:span 2} .wg-t{display:block;font-size:9px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wg-kv{display:block;font-size:16px;font-weight:600;color:#111114;letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-top:2px} .wg-kd{display:block;font-size:7.5px;color:#116330;margin-top:1px} .wg--kpi{grid-column:span 2} .wg--ed{border-style:dashed;border-color:#C7CDD3;position:relative} .wg-dr{position:absolute;right:5px;top:5px;color:#B0B0B0} .wg-dr svg{width:11px;height:11px} .wg--ed::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px; border-right:2px solid #C7CDD3;border-bottom:2px solid #C7CDD3} /* graficos */ .bch{display:flex;align-items:stretch;gap:6px;height:78px;margin-top:6px;flex:1} .bc{flex:1;min-width:0;display:grid;grid-template-rows:1fr 11px;align-items:end;justify-items:center;height:100%} .bc i{display:block;width:100%;border-radius:2px 2px 0 0;min-height:3px} .bc b{display:block;font-size:7px;font-weight:500;color:#6B6B6B;margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .lch{display:block;width:100%;height:78px;margin-top:6px;flex:1} .dnw{display:flex;align-items:center;gap:8px;margin-top:6px;flex:1} .dch{width:62px;height:62px;flex:none;transform:rotate(-90deg)} .dn-leg{display:flex;flex-direction:column;gap:3px;min-width:0} .dn-l{display:flex;align-items:center;gap:4px;font-size:8px;color:#4F4F4F;white-space:nowrap} .dn-l i{width:6px;height:6px;border-radius:2px;flex:none} /* construtor */ .cbx{display:flex;gap:11px;padding:11px 52px 0 12px;min-height:0;flex:1} .cb-prev2{flex:1;min-width:0;display:flex;flex-direction:column} .cb-prev2 .wg{flex:1} .cb-pv{display:block;font-size:7.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#6B6B6B;margin-bottom:5px} .wg--plano{border-color:#E6E6E6} .wg--plano .bch{height:auto} .cb-cfg2{width:166px;flex:none;display:flex;flex-direction:column} .cb-l{display:block;font-size:7.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:#6B6B6B;margin-bottom:3px} .cb-i{display:block;border:1px solid #E0E0E0;border-radius:6px;padding:4px 7px; font-size:9px;color:#111114;margin-bottom:8px} .cb-tipos2{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:8px} .cbt{border:1px solid #EDEDED;border-radius:6px;padding:4px 1px;display:flex; flex-direction:column;align-items:center;gap:2px;font-size:6.5px;color:#6B6B6B; overflow:hidden;white-space:nowrap} .cbt svg{width:10px;height:10px} .cbt--on{border-color:#B9D400;background:#FBFFE8;color:#111114;font-weight:600} .cb-sec2{display:block;font-size:9.5px;font-weight:600;color:#111114;margin:0 0 6px} .cb-f{display:block;margin-bottom:7px} .cb-s{display:flex;align-items:center;justify-content:space-between;gap:5px; border:1px solid #E0E0E0;border-radius:6px;padding:4px 7px;font-size:9px;color:#111114; transition:border-color .3s,background .3s} .cb-s svg{width:9px;height:9px;color:#6B6B6B;flex:none} /* tabela dentro do painel */ .rl-grade--tb{grid-template-columns:repeat(6,1fr)} .rl-grade--tb .wg--w1{grid-column:span 2} .rl-grade--tb .wg--w3{grid-column:span 4} .tbw{border:1px solid #EDEDED;border-radius:6px;overflow:hidden;margin-top:6px} .tbw table{width:100%;border-collapse:collapse;font-size:8.5px} .tbw th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;text-align:left;padding:4px 6px} .tbw td{padding:3px 6px;border-top:1px solid #F0F0F0;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0} .tbw td:last-child{text-align:right;font-variant-numeric:tabular-nums} /* menu Widget aberto */ .rl-menu{position:absolute;right:60px;top:44px;z-index:4;background:#fff;border:1px solid #E0E0E0; border-radius:8px;box-shadow:0 8px 22px rgba(2,28,22,.14);padding:3px;width:118px} .rl-mi{display:flex;align-items:center;gap:6px;border-radius:6px;padding:4px 7px; font-size:9px;color:#111114;transition:background .3s} .rl-mi svg{width:10px;height:10px;color:#5F5F5F} .rl-mi--on{background:#F1F1F1;font-weight:600} /* telas prontas */ .prt{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px 52px 0 12px;min-height:0; flex:1;align-content:start} .mn{border:1px solid #EDEDED;border-radius:9px;background:#fff;padding:8px 9px;min-width:0} .mn-t{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-bottom:6px} .mn-k{display:grid;grid-template-columns:1fr 1fr;gap:5px} .mn-kc{border:1px solid #F0F0F0;background:#FAFAFA;border-radius:6px;padding:4px 6px;min-width:0} .mn-kr{display:block;font-size:7px;color:#6B6B6B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mn-kv{display:block;font-size:10.5px;font-weight:600;color:#111114;letter-spacing:-.01em; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mn-b{display:flex;flex-direction:column;gap:4px} .mn-l{display:flex;align-items:center;gap:5px} .mn-r{width:52px;flex:none;font-size:7.5px;color:#6B6B6B;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .mn-t2{flex:1;height:8px;background:#F3F4F3;border-radius:2px;overflow:hidden} .mn-t2 i{display:block;height:100%;border-radius:2px} .mn-l b{width:22px;flex:none;text-align:right;font-size:7.5px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums} /* etiquetas, cursores e coreografia */ .rl1-note{top:4px;right:52px} .rl1-note::after{left:auto;right:16px} .rl2-note{top:4px;right:52px} .rl2-note::after{left:auto;right:16px} .rl3-note{top:4px;right:52px} .rl3-note::after{left:auto;right:16px} .rl4-note{top:4px;right:52px} .rl4-note::after{left:auto;right:16px} .rl5-note{top:4px;right:52px} .rl5-note::after{left:auto;right:16px} .vin-rl1 .cur--yellow{left:calc(100% - 78px);top:300px} .vin-rl1:hover .cur--yellow{left:calc(100% - 150px);top:262px} .vin-rl2 .cur--lilac{left:calc(100% - 78px);top:300px} .vin-rl2:hover .cur--lilac{left:calc(100% - 168px);top:250px} /* area livre da previa: a etiqueta cobria justamente "Granularidade" */ .vin-rl3 .cur--peach{left:34%;top:112px} .vin-rl3:hover .cur--peach{left:26%;top:96px} .vin-rl4 .cur--yellow{left:calc(100% - 78px);top:300px} .vin-rl4:hover .cur--yellow{left:calc(100% - 88px);top:262px} .vin-rl5 .cur--lilac{left:calc(100% - 78px);top:300px} .vin-rl5:hover .cur--lilac{left:calc(100% - 150px);top:262px} .vin-rl2 .wg--ed:nth-of-type(4){transition:border-color .3s,background .3s,transform .45s ease} .vin-rl2:hover .wg--ed:nth-of-type(4){border-color:#B9D400;background:#FBFFE8;transform:translateY(-4px)} .vin-rl3:hover .cb-alvo2{border-color:#B9D400;background:#FBFFE8} .vin-rl4:hover .rl-mi--on{background:#FBFFE8} /* A vinheta do topo encolhe para 280 quando o layout empilha: em telas muito estreitas os KPIs ficam e os graficos saem (na tela real o painel rola). */ @media (max-width:380px){ .vin-rl1 .rl-grade{grid-template-rows:auto} .vin-rl1 .wg--w1,.vin-rl1 .wg--w2,.vin-rl1 .wg--w3{display:none} } @media (hover:none){ .vin-rl .cur{display:none} .vin-rl2 .wg--ed:nth-of-type(4){border-color:#B9D400;background:#FBFFE8} .vin-rl3 .cb-alvo2{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-rl .cur,.vin-rl2 .wg--ed{transition:none} } /* ============================================================ VINHETAS DOS HUBS (/funcionalidades/ e /casos-de-uso/) .vin-ov — "visao geral da plataforma": o shell do app. A barra lateral segue v2/nav-config.ts (Inicio, Atividades, Registros, Atendimento, Engajamento, Vendas, Analise). O miolo reaproveita as pecas .mg-* que ja reproduzem a tela de Inicio. O MESMO bloco aparece nos dois hubs. .vin-jor — "jornada do lead": diagrama, nao captura de tela. ============================================================ */ .vin-hb .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} .ov{display:flex;height:100%;min-height:0;padding-right:52px} /* barra lateral */ .sb{width:124px;flex:none;background:#FAFAFA;border-right:1px solid #EDEDED; padding:8px 7px;display:flex;flex-direction:column;gap:1px;min-height:0} .sb-ws{display:flex;align-items:center;gap:5px;padding:3px 4px 7px} .sb-wa{width:17px;height:17px;border-radius:5px;background:#021C16;color:#D5FE00; display:grid;place-items:center;font-size:7px;font-weight:700;flex:none} .sb-wn{flex:1;min-width:0;font-size:9px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sb-ws svg{width:9px;height:9px;color:#6B6B6B;flex:none} .sb-i,.sb-g{display:flex;align-items:center;gap:6px;border-radius:6px;padding:3px 6px; font-size:9px;color:#4F4F4F} .sb-i svg,.sb-g svg{width:11px;height:11px;flex:none;color:#6B6B6B} .sb-i span,.sb-g span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sb-g svg:last-child{width:9px;height:9px} .sb-i--on{background:#F1F1F1;color:#111114;font-weight:600} .sb-g--ab{color:#111114;font-weight:600} .sb-f{display:block;padding:2px 6px 2px 23px;font-size:8.5px;color:#616161;border-radius:5px} .sb-f--on{background:#F1F1F1;color:#111114;font-weight:600} /* topo */ .ov-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} .tp{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #EDEDED;flex:none} .tp-busca{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid #E6E6E6; border-radius:6px;padding:3px 5px;font-size:8.5px;color:#6E6E6E} .tp-busca svg{width:9px;height:9px;flex:none} .tp-busca span{flex:1;min-width:0} .tp-kbd{border:1px solid #E6E6E6;background:#F5F5F5;border-radius:3px;padding:0 3px; font-size:7px;color:#6B6B6B;font-family:ui-monospace,Menlo,monospace;flex:none} .tp-saldo{border:1px solid #E6E6E6;border-radius:99px;padding:2px 7px;font-size:8px; color:#4F4F4F;white-space:nowrap;flex:none} .tp-saldo b{font-weight:700;color:#111114;font-variant-numeric:tabular-nums} .tp-ic{width:18px;height:18px;display:grid;place-items:center;color:#5F5F5F;flex:none} .tp-ic svg{width:11px;height:11px} .tp-ic--ia{color:#021C16} .tp-av{width:19px;height:19px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:7.5px;font-weight:700;flex:none} /* miolo: Inicio compacto */ .ov-banner{margin:9px 10px 0;padding:9px 11px;flex:none} .ov-banner .mg-title{font-size:11.5px;line-height:1.3} .ov-banner .mg-sub{font-size:8.5px} .ov-banner .mg-kicker{font-size:7.5px} .ov-banner .mg-ring{width:44px;height:44px} .ov-banner .mg-ring svg{width:44px;height:44px;transform:none} .ov-banner .mg-ring b{font-size:10px} .ov-metrics{margin:8px 10px 0;flex:none} .ov-metrics .mg-cell{padding:6px 8px} .ov-metrics .mg-cell span{font-size:7px} .ov-metrics .mg-cell b{font-size:11px} .ov-funil{border:1px solid #EDEDED;border-radius:9px;margin:8px 10px 0;padding:8px 10px;flex:none} .ov-ft{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-bottom:5px} .ov-fl{display:flex;align-items:center;gap:6px;margin-top:4px} .ov-fr{width:58px;flex:none;font-size:8px;color:#6B6B6B} .ov-ft2{flex:1;height:9px;background:#F3F4F3;border-radius:2px;overflow:hidden} .ov-ft2 i{display:block;height:100%;border-radius:2px} .ov-fl b{width:20px;flex:none;text-align:right;font-size:8px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums} /* jornada do lead — diagrama */ /* o diagrama nao estica: fica centrado no recorte */ .jr{padding:14px 52px 14px 14px;display:flex;flex-direction:column;min-height:0;flex:1;justify-content:center} .jr-rail{display:flex;align-items:stretch;gap:4px;flex:none} .jr-e{flex:1;min-width:0;border:1px solid #E6E6E6;border-radius:9px;background:#fff; padding:10px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;transition:border-color .3s,background .3s} .jr-i{width:24px;height:24px;border-radius:7px;background:#F2F4EF;color:#111114; display:grid;place-items:center;flex:none} .jr-i svg{width:13px;height:13px} .jr-t{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-top:5px} .jr-s{display:block;font-size:7.5px;line-height:1.35;color:#6B6B6B;margin-top:2px} .jr-a{flex:none;align-self:center} .jr-base{display:flex;align-items:center;gap:9px;border:1px dashed #C7CDD3;border-radius:9px; background:#FBFCFB;padding:10px 12px;margin-top:11px;flex:none} .jr-bx{min-width:0;flex:1} .jr-bi{width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--ink); display:grid;place-items:center;flex:none} .jr-bi svg{width:13px;height:13px} .jr-bt{display:block;font-size:10px;font-weight:600;color:#111114} .jr-bs{display:block;font-size:8.5px;color:#6B6B6B;margin-top:2px} /* etiquetas e cursores */ .ov-note{top:4px;right:52px} .ov-note::after{left:auto;right:16px} .jor-note{top:4px;right:52px} .jor-note::after{left:auto;right:16px} .vin-ov .cur--yellow{left:58px;top:296px} .vin-ov:hover .cur--yellow{left:58px;top:236px} .vin-jor .cur--lilac{left:calc(100% - 78px);top:44px} .vin-jor:hover .cur--lilac{left:calc(100% - 150px);top:74px} .ov-conv{transition:background .3s} .vin-ov:hover .ov-conv{background:#FBFFE8} .vin-jor:hover .jr-e--alvo{border-color:#B9D400;background:#FBFFE8} /* A vinheta do topo cai de 360 para 280 quando o layout empilha e vai afinando: o shell vai cedendo o que esta na beirada, de baixo para cima. */ @media (max-width:1200px) and (min-width:941px){ .vin-ov .ov-fl:nth-last-of-type(1){display:none} } @media (max-width:940px){ .vin-ov .sb-g:last-of-type{display:none} .vin-ov .ov-fl:nth-last-of-type(-n+2){display:none} } @media (max-width:600px){ .vin-ov .ov-fl:nth-last-of-type(-n+3){display:none} } @media (max-width:530px){ .vin-ov .ov-funil{display:none} } @media (max-width:420px){ .vin-ov .ov-metrics{display:none} } @media (max-width:380px){ .vin-ov .tp-saldo{display:none} /* o subtitulo do banner ja nao cabe ao lado do anel */ .vin-ov .mg-sub{display:none} } @media (max-width:340px){ .vin-ov .sb{display:none} } @media (hover:none){ .vin-hb .cur{display:none} .vin-jor .jr-e--alvo{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-hb .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE IMOBILIARIAS (/casos-de-uso/imobiliarias/) Nao ha tela "de imobiliaria" no app: o que muda e o conteudo. Entao estas quatro reaproveitam as pecas ja escritas para as telas reais e trocam so os dados — kanban (.kb-*, crm/kanban/StageColumn+DealCard), editor de workflows (.cv/.nd) com a gaveta DISTRIBUTE_LEAD (NodeConfigDrawer/forms/DistributeLeadForm: "Rotativo (round-robin)", "Por carga de trabalho", "Aleatorio" e as dicas de cada modo), conversa com IA + ContactDetailsPanel (.pa-*) e o registro do negocio (.dr-*) com a aba Propostas (ProposalsTab: rotulos DRAFT/SENT/ACCEPTED e o rodape "Aceita por "). ============================================================ */ .vin-imo .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. funil de imoveis (hero) -- */ .vin-imo1 .vin-panel{padding:12px 0 0 12px} .vin-imo1 .kb-col--alvo{transition:background .3s} .vin-imo1:hover .kb-col--alvo{background:#FBFFE8} /* -- 2. distribuicao entre corretores -- */ /* canvas do editor a esquerda e a gaveta do no a direita, como o Sheet que abre por cima do canvas quando se clica na etapa */ .vin-imo2 .vin-panel{padding:0} .dq{display:flex;height:100%;min-height:0} .dq .cv{flex:1;min-width:0} .dq-side{width:250px;flex:none;background:#fff;border-left:1px solid #E0E0E0; box-shadow:-10px 0 24px rgba(2,28,22,.08);padding:11px 52px 34px 12px; display:flex;flex-direction:column;gap:5px;min-height:0} /* a gaveta e mais estreita que a do editor: os rotulos cedem um ponto */ .dq-side .gt-tit{font-size:11px} .dq-side .gt-tit small{font-size:8.5px} .dq-side .gt-h{font-size:9.5px} .dq-side .gt-campo{font-size:9.5px;padding:5px 8px} .dq-side .gt-desc{font-size:8.5px} .dq-fluxo{position:absolute;left:22px;top:70px} .dq-fluxo .nd{width:158px} .dq-seta{display:block;margin:0 auto} /* os controles do xyflow sobem: embaixo comeca a sangria */ .vin-imo2 .cv-ctrl{bottom:45px} .dq-chips{display:flex;flex-wrap:wrap;gap:4px} .dq-chip{display:inline-flex;align-items:center;gap:3px;background:#F1F1F1;border-radius:99px; padding:1px 7px;font-size:9px;color:#111114;white-space:nowrap} .dq-chip i{width:5px;height:5px;border-radius:50%;background:#7CA000;display:block} .dq-chip--n{background:#EDEDED;color:#4A4A4A;font-weight:600} .vin-imo2 .dq-modo{transition:border-color .3s,background .3s} .vin-imo2:hover .dq-modo{border-color:#B9D400;background:#FBFFE8} /* -- 3. IA qualificando e corretor assumindo -- */ /* mesma coreografia da vinheta de IA pausada: no repouso a conversa esta com a IA; no hover o corretor assume, o botao vira "Retomar IA" e o responsavel deixa de ser "Nao atribuida" */ .vin-imo3 .vin-panel{padding:0} .vin-imo3 .ia-msgs{padding-right:11px} .vin-imo3 .pa-assumir,.vin-imo3 .pa-bt,.vin-imo3 .pa-sel{transition:background .3s,color .3s,border-color .3s,box-shadow .3s} .vin-imo3:hover .pa-assumir{background:#3F3F3F;box-shadow:0 0 0 3px rgba(213,254,0,.35)} .vin-imo3:hover .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-imo3:hover .pa-bt .pa-on{display:none} .vin-imo3:hover .pa-bt .pa-off{display:inline} .vin-imo3:hover .pa-bt svg:first-of-type{display:none} .vin-imo3:hover .pa-bt svg + svg{display:block} .vin-imo3:hover .pa-sel .pa-nao{display:none} .vin-imo3:hover .pa-sel .pa-sim{display:inline} /* -- 4. proposta com aceite dentro do negocio -- */ .vin-imo4 .vin-panel{flex-direction:row;padding:0} .vin-imo4 .dr-main{padding-right:52px;gap:7px} .pp-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .pp-cx{min-width:0} .pp-cx b{display:block;font-size:10.5px;font-weight:600;color:#111114;line-height:1.25} .pp-cx span{display:block;font-size:8.5px;color:#616161;line-height:1.3;margin-top:1px} .pp-novo{display:inline-flex;align-items:center;gap:3px;background:#111114;color:#fff; border-radius:6px;padding:3px 8px;font-size:9px;font-weight:600;white-space:nowrap;flex:none} .pp-novo svg{width:10px;height:10px} .pp{border:1px solid #E6E6E6;border-radius:9px;padding:7px 8px;transition:border-color .3s,background .3s} .pp-l1{display:flex;align-items:center;gap:5px} .pp-t{min-width:0;flex:1;font-size:10px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pp-st{border-radius:99px;padding:1px 7px;font-size:8px;font-weight:600;flex:none;white-space:nowrap} .pp-st--ok{background:#DEF6E7;color:#116330} .pp-st--env{background:#E4EEF8;color:#1D4E7A} .pp-st--no{background:#FBE9E9;color:#B91C1C} .pp-ac{display:flex;align-items:center;gap:3px;color:#6B6B6B;flex:none} .pp-ac svg{width:11px;height:11px;display:block} .pp-l2{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:8.5px;color:#616161; margin-top:2px;font-variant-numeric:tabular-nums} .pp-l2 b{font-weight:600;color:#111114} .pp-l2 em{font-style:normal;color:#146B45;font-weight:600} .pp-sep{color:#B5B5B5} .vin-imo4:hover .pp--ok{border-color:#B9D400;background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .imo1-note{top:4px;right:52px} .imo1-note::after{left:auto;right:16px} .imo2-note{top:4px;left:40px} .imo3-note{top:4px;right:52px} .imo3-note::after{left:auto;right:16px} .imo4-note{top:4px;right:52px} .imo4-note::after{left:auto;right:16px} .vin-imo1 .cur--yellow{left:34px;top:300px} .vin-imo1:hover .cur--yellow{left:180px;top:262px} .vin-imo1 .cur--lilac{left:calc(100% - 62px);top:296px} .vin-imo1:hover .cur--lilac{left:calc(100% - 132px);top:246px;transition-delay:.15s} .vin-imo2 .cur--peach{left:calc(100% - 76px);top:336px} .vin-imo2:hover .cur--peach{left:calc(100% - 200px);top:102px} .vin-imo3 .cur--yellow{left:calc(100% - 78px);top:314px} .vin-imo3:hover .cur--yellow{left:calc(100% - 152px);top:30px} .vin-imo4 .cur--lilac{left:calc(100% - 78px);top:334px} .vin-imo4:hover .cur--lilac{left:calc(100% - 40px);top:208px} /* Faixa estreita de duas colunas e telas pequenas: cada vinheta cede o que esta na beirada, de baixo para cima. */ @media (max-width:1200px) and (min-width:941px){ .vin-imo2 .dq-desc{display:none} .vin-imo4 .dr-ev:last-of-type{display:none} } /* faixa estreita de duas colunas: as bolhas quebram em mais linhas e a ultima passa por baixo do corte */ @media (max-width:1060px) and (min-width:941px){ .vin-imo3 .ia-row:nth-of-type(n+4){display:none} } /* empilhado, o hero cai de 360 para 280: os cursores sobem junto, senao a etiqueta fica cortada pela borda de baixo */ @media (max-width:940px){ .vin-imo3 .ia-row:nth-of-type(n+4){display:none} /* o segundo cartao da primeira coluna e o mais alto (titulo em duas linhas + etiqueta de origem) e e o unico que nao cabe nos 280px */ .vin-imo1 .kb-col:first-of-type .kb-card:last-of-type{display:none} .vin-imo1 .cur--yellow{top:226px} .vin-imo1:hover .cur--yellow{top:190px} /* empilhado o quadro fica curto: sobra um cursor so, senao a etiqueta cai em cima do texto de um cartao */ .vin-imo1 .cur--lilac{display:none} } @media (max-width:640px) and (min-width:421px){ .vin-imo2 .dq-desc{display:none} } @media (max-width:640px) and (min-width:521px){ .vin-imo4 .dr-ev:last-of-type{display:none} } /* o cabecalho da aba sai antes de o botao "Nova proposta" comecar a empurrar o texto; depois sai a coluna do registro, que e o que sobra de menos importante ao lado da proposta aceita */ @media (max-width:700px){ .vin-imo4 .pp-cab{display:none} } @media (max-width:520px){ .vin-imo4 .dr-aside{display:none} } @media (max-width:480px){ .vin-imo3 .ia-row:nth-of-type(n+3){display:none} } /* conversa estreita: o cabecalho do ThreadView tem mais peca do que cabe. Some o selo de sentimento, o telefone e o botao de painel, e o nome passa a truncar em vez de quebrar em duas linhas por cima do selo. */ @media (max-width:560px){ .vin-imo3 .ia-sent,.vin-imo3 .ia-ic,.vin-imo3 .ia-fone{display:none} .vin-imo3 .ia-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (max-width:480px){ /* o botao "Assumir conversa (pausar IA)" nao cabe numa linha so; o "Pausar IA" do cabecalho sai para o nome do contato caber inteiro */ .vin-imo3 .pa-assumir{white-space:normal;line-height:1.3;text-align:center} .vin-imo3 .pa-bt{display:none} .vin-imo3 .pa-lin{display:none} } /* a gaveta cede largura antes de o canvas ficar ilegivel */ @media (max-width:560px){ .dq-side{width:186px} .dq-fluxo{left:14px} .dq-fluxo .nd{width:140px} } /* daqui para baixo nao ha canvas que caiba: fica so a gaveta, que e a parte que conta a regra de distribuicao */ @media (max-width:420px){ .dq .cv{display:none} .dq-side{width:auto;flex:1;border-left:0;box-shadow:none} } @media (max-width:380px){ .vin-imo3 .ia-row:nth-of-type(n+2){display:none} } @media (hover:none){ .vin-imo .cur{display:none} .vin-imo1 .kb-col--alvo{background:#FBFFE8} .vin-imo2 .dq-modo{border-color:#B9D400;background:#FBFFE8} .vin-imo3 .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-imo3 .pa-bt .pa-on,.vin-imo3 .pa-bt svg:first-of-type{display:none} .vin-imo3 .pa-bt .pa-off{display:inline} .vin-imo3 .pa-bt svg + svg{display:block} .vin-imo3 .pa-sel .pa-nao{display:none} .vin-imo3 .pa-sel .pa-sim{display:inline} .vin-imo4 .pp--ok{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-imo .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE CORRETORAS (/casos-de-uso/corretoras/) Como nas de imobiliarias, o que muda e o conteudo: as pecas sao as das telas reais. Fontes: crm/kanban (.kb-*), v2/chat ThreadView + Composer com as respostas rapidas do atalho "/" (IQuickReply: shortcut/title/content) + ContactDetailsPanel (.tv-*, .dp-*), app/proposta/[token] (.pr-*, com o bloco "Para aprovar, digite seu nome" que a pagina publica tem e a vinheta do CRM nao mostrava) e, na ultima, duas telas montadas lado a lado: o editor de Smart List (crm/listas: operadores "menor que" / "e uma de" e a barra de preview) e o CampaignFlow ("Fluxo da campanha", etapas numeradas com "Imediatamente" / "N dias apos a etapa anterior"). ============================================================ */ .vin-cor .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. funil de cotacao (hero) -- */ .vin-cor1 .vin-panel{padding:12px 0 0 12px} .vin-cor1 .kb-col--alvo{transition:background .3s} .vin-cor1:hover .kb-col--alvo{background:#FBFFE8} /* -- 2. pedido de cotacao virando negocio -- */ .cor2{display:flex;height:100%;min-height:0;padding-right:52px} .cor2 .ib-dp{width:176px} /* menu de resposta rapida ancorado no composer */ .qr-wrap{position:relative} .qr-pop{position:absolute;left:10px;right:10px;bottom:calc(100% + 4px);z-index:3; background:#fff;border:1px solid #E0E0E0;border-radius:8px;padding:3px; box-shadow:0 10px 26px rgba(2,28,22,.16)} .qr-it{display:flex;align-items:baseline;gap:6px;border-radius:6px;padding:3px 6px; transition:background .3s} .qr-it--on{background:#F2F4EF} .qr-sc{font-size:8.5px;font-weight:700;color:#4B6B00; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:none} .qr-tx{min-width:0;flex:1} .qr-tt{display:block;font-size:9px;font-weight:600;color:#111114;line-height:1.25} .qr-ct{display:block;font-size:8px;color:#6B6B6B;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* cartao do negocio no painel do contato */ .dp-neg{display:block;font-size:8.5px;font-weight:600;color:#111114;line-height:1.3} .dp-negv{display:flex;align-items:center;gap:4px;font-size:7.5px;color:#6B6B6B;margin-top:1px} .dp-negv b{font-weight:700;color:#111114;font-variant-numeric:tabular-nums} .dp-negv i{width:5px;height:5px;border-radius:50%;background:#3B82F6;display:block;flex:none} /* -- 3. proposta publica com aceite -- */ .vin-cor3 .vin-panel{padding:0;background:#FAFAFA;right:-14px} .vin-cor3 .pr-doc{gap:7px;padding:12px;margin-bottom:34px} .pr-ass{border-top:1px solid #EFEFEF;padding-top:9px;margin-top:auto} .pr-alab{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-bottom:4px} .pr-ainp{border:1px solid #E0E0E0;border-radius:7px;padding:6px 9px;font-size:10px;color:#6E6E6E} .vin-cor3 .pr-acoes{margin-top:7px} .vin-cor3 .pr-btn{transition:transform .3s,box-shadow .3s} .vin-cor3:hover .pr-btn--ok{transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,28,22,.22)} /* -- 4. lista de vencimentos alimentando a campanha -- */ /* composicao: dois recortes de tela reais ligados por uma seta. Nao e uma captura unica, e o unico bloco da pagina montado assim. */ .vin-cor4 .vin-panel{padding:12px 0 34px 14px} .cor4{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:6px} .sl-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:none} .sl-tt{font-size:10.5px;font-weight:600;color:#111114} .sl-add{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:#4F4F4F} .sl-add svg{width:10px;height:10px} .sl-regra{display:grid;grid-template-columns:1.2fr .8fr 1fr 14px;gap:5px;align-items:center} .sl-campo{display:flex;align-items:center;justify-content:space-between;gap:4px; border:1px solid #E0E0E0;border-radius:6px;padding:4px 7px;font-size:9px;color:#111114; min-width:0;transition:border-color .3s,background .3s} .sl-campo b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sl-campo svg{width:9px;height:9px;color:#6B6B6B;flex:none} .sl-x{color:#9A9A9A;display:grid;place-items:center} .sl-x svg{width:11px;height:11px} .sl-prev{display:flex;align-items:center;justify-content:space-between;gap:8px; background:#F4F5F4;border-radius:7px;padding:5px 8px;flex:none} .sl-prev span{font-size:9px;color:#4F4F4F} .sl-prev b{font-weight:700;color:#111114;font-variant-numeric:tabular-nums} .sl-calc{border:1px solid #DDD;background:#fff;border-radius:6px;padding:2px 8px; font-size:8.5px;font-weight:600;color:#111114;flex:none} /* a seta que liga a lista a campanha */ .cor4-liga{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;padding:1px 0} .cor4-liga svg{width:12px;height:12px;color:#8A8A8A} .cor4-liga span{font-size:8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:#6B6B6B} /* fluxo da campanha */ .fx-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .fx-tt{display:block;font-size:10.5px;font-weight:600;color:#111114;line-height:1.25} .fx-sub{display:block;font-size:8px;color:#6B6B6B;line-height:1.3;margin-top:1px} .fx-novo{display:inline-flex;align-items:center;gap:3px;background:#111114;color:#fff; border-radius:6px;padding:3px 8px;font-size:8.5px;font-weight:600;white-space:nowrap;flex:none} .fx-novo svg{width:10px;height:10px} .fx-et{position:relative;display:flex;align-items:center;gap:7px;border:1px solid #E6E6E6; border-radius:8px;background:#fff;padding:5px 8px 5px 20px; transition:border-color .3s,background .3s} .fx-n{position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px; border-radius:50%;border:1.5px solid #B9D400;background:#fff;display:grid;place-items:center; font-size:8.5px;font-weight:700;color:#111114} .fx-ico{width:22px;height:22px;border-radius:50%;background:#E4F8E9;color:#128C4A; display:grid;place-items:center;flex:none} .fx-ico svg{width:12px;height:12px} .fx-x{min-width:0;flex:1} .fx-nome{display:block;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-meta{display:flex;align-items:center;gap:4px;font-size:8px;color:#6B6B6B;margin-top:1px} .fx-meta svg{width:8px;height:8px;flex:none} .fx-sep{color:#C4C4C4} /* -- etiquetas, cursores e coreografia -- */ .cor1-note{top:4px;right:52px} .cor1-note::after{left:auto;right:16px} .cor2-note{top:4px;right:52px} .cor2-note::after{left:auto;right:16px} .cor3-note{top:4px;left:40px} .cor4-note{top:4px;right:52px} .cor4-note::after{left:auto;right:16px} .vin-cor1 .cur--yellow{left:34px;top:300px} .vin-cor1:hover .cur--yellow{left:186px;top:258px} .vin-cor1 .cur--lilac{left:calc(100% - 62px);top:296px} .vin-cor1:hover .cur--lilac{left:calc(100% - 128px);top:244px;transition-delay:.15s} .vin-cor2 .cur--peach{left:calc(100% - 78px);top:312px} .vin-cor2:hover .cur--peach{left:calc(100% - 132px);top:184px} .vin-cor3 .cur--yellow{left:200px;top:242px} .vin-cor3:hover .cur--yellow{left:132px;top:322px} .vin-cor4 .cur--lilac{left:calc(100% - 78px);top:318px} .vin-cor4:hover .cur--lilac{left:calc(100% - 168px);top:118px} .vin-cor2 .dp-it--neg{transition:border-color .3s,background .3s} .vin-cor2:hover .dp-it--neg{border-color:#B9D400;background:#FBFFE8} .vin-cor4 .sl-campo--data{transition:border-color .3s,background .3s} .vin-cor4:hover .sl-campo--data{border-color:#B9D400;background:#FBFFE8} /* Faixa estreita de duas colunas e telas pequenas: cada vinheta cede o que esta na beirada, de baixo para cima. */ @media (max-width:1200px) and (min-width:941px){ .vin-cor2 .tv-row:nth-of-type(n+4){display:none} .vin-cor4 .fx-et:last-of-type{display:none} } @media (max-width:940px){ /* empilhado o quadro cai para 280px: sobra um cursor so e um cartao por coluna, senao a etiqueta e o segundo cartao ficam cortados */ .vin-cor1 .cur--lilac{display:none} .vin-cor1 .cur--yellow{top:226px} .vin-cor1:hover .cur--yellow{top:190px} .vin-cor1 .kb-col:first-of-type .kb-card:last-of-type{display:none} } @media (max-width:640px){ .vin-cor2 .tv-row:nth-of-type(n+4){display:none} .vin-cor4 .fx-et:last-of-type{display:none} } @media (max-width:560px){ /* cabecalho da conversa: some o selo de canal e o telefone */ .vin-cor2 .tv-badge,.vin-cor2 .tv-f{display:none} .vin-cor3 .pr-tab tr td:nth-child(3),.vin-cor3 .pr-tab tr th:nth-child(3){display:none} } /* o documento da proposta cresce quando os textos quebram: aperta o espacamento, some a validade (que a pagina real so mostra quando o campo existe) e, no menor tamanho, sobra so o par de botoes */ @media (max-width:480px){ .vin-cor3 .pr-doc{padding:10px;gap:6px} .vin-cor3 .pr-t{font-size:13px} .vin-cor3 .pr-val{display:none} .vin-cor3 .pr-tab th,.vin-cor3 .pr-tab td{padding:4px 6px} } @media (max-width:400px){ .vin-cor3 .pr-alab,.vin-cor3 .pr-ainp{display:none} .vin-cor3 .pr-ass{border-top:0;padding-top:0} } /* nas telas estreitas os cursores mudam de pouso: o alvo do repouso saiu ou virou texto. O da conversa some junto com o painel de contato, que era o que ele apontava. */ @media (max-width:640px){ .vin-cor4 .cur--lilac{left:calc(100% - 72px);top:334px} } @media (max-width:560px){ .vin-cor3 .cur--yellow{left:180px;top:290px} .vin-cor3:hover .cur--yellow{left:150px;top:344px} } @media (max-width:520px){ .vin-cor2 .cur{display:none} .vin-cor2 .ib-dp{display:none} .vin-cor2 .tv-row:nth-of-type(n+5){display:none} .vin-cor4 .sl-regra{grid-template-columns:1fr 1fr} .vin-cor4 .sl-x{display:none} } @media (max-width:420px){ .vin-cor2 .tv-row:nth-of-type(n+4){display:none} .vin-cor4 .fx-sub{display:none} } @media (hover:none){ .vin-cor .cur{display:none} .vin-cor1 .kb-col--alvo{background:#FBFFE8} .vin-cor2 .dp-it--neg{border-color:#B9D400;background:#FBFFE8} .vin-cor4 .sl-campo--data{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-cor .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE AGENCIAS (/casos-de-uso/agencias/) Fontes: v2/Sidebar/WorkspaceSwitcher (rotulos "Workspace atual" / "Outros workspaces" / "Criar workspace" / "Configuracoes do workspace" e o check no ativo), configuracoes/time (PageHeader "Time" — "Membros do workspace e seus papeis.", cartao "Membros" e os quatro papeis de ProjectMemberRoles: Dono, Administrador, Membro, Visualizador, mais o selo "Pendente" de convite aberto), crm/kanban (.kb-*) e analise/atribuicao (.at-*, com a secao "Por campanha" que a vinheta de captura de leads nao mostrava). As pecas de shell (.sb, .tp) vem das vinhetas dos hubs. ============================================================ */ .vin-ag .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. troca de workspace (hero) -- */ /* o shell e o mesmo das vinhetas dos hubs (.ov/.sb/.tp); o que muda e o dropdown do switcher aberto por cima. No app ele tem w-72 e cobre o miolo. */ .ws-pop{position:absolute;z-index:4;left:12px;top:34px;width:196px;background:#fff; border:1px solid #E0E0E0;border-radius:9px;box-shadow:0 14px 34px rgba(2,28,22,.17);padding:4px} .ws-lab{display:block;padding:5px 7px 2px;font-size:7px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#6B6B6B} .ws-sep{height:1px;background:#EFEFEF;margin:3px 0} .ws-row{display:flex;align-items:center;gap:6px;border-radius:6px;padding:4px 7px; transition:background .3s} .ws-row--on{background:#F5F5F5} .ws-av{width:19px;height:19px;border-radius:5px;background:#EDEDED;color:#3F3F3F; display:grid;place-items:center;font-size:7.5px;font-weight:700;flex:none} .ws-av--ac{background:#EAF7B8;color:#33420A} .ws-x{min-width:0;flex:1} .ws-n{display:block;font-size:9.5px;color:#111114;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-d{display:block;font-size:7.5px;color:#6B6B6B;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-ck{color:#4B6B00;flex:none} .ws-ck svg{width:11px;height:11px;display:block} .ws-it{display:flex;align-items:center;gap:6px;border-radius:6px;padding:4px 7px; font-size:9px;color:#111114} .ws-it svg{width:11px;height:11px;color:#5F5F5F;flex:none} /* o gatilho do switcher, no topo da barra lateral */ .sb-tr{display:flex;align-items:center;gap:5px;border-radius:7px;background:#F1F1F1; padding:4px 5px;margin-bottom:5px} .sb-tr .ws-av{width:17px;height:17px;font-size:7px} .sb-tr svg{width:10px;height:10px;color:#6B6B6B;flex:none} /* -- 2. time e papeis -- */ .vin-ag2 .vin-panel{padding:12px 0 34px 14px} .tme{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .tme-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .tme-t{display:block;font-size:13px;font-weight:600;color:#111114;letter-spacing:-.01em} .tme-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .tme-conv{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:3px 9px;font-size:9px;font-weight:600;white-space:nowrap;flex:none} .tme-conv svg{width:10px;height:10px} .tme-card{border:1px solid #EDEDED;border-radius:9px;padding:9px 10px;display:flex; flex-direction:column;gap:6px;min-height:0} .tme-ct{display:block;font-size:10.5px;font-weight:600;color:#111114} .tme-cd{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .tme-row{display:flex;align-items:center;gap:8px;border:1px solid #EDEDED;border-radius:8px; padding:5px 8px} .tme-av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center; font-size:8.5px;font-weight:700;color:#fff;flex:none} .tme-x{min-width:0;flex:1} .tme-l1{display:flex;align-items:center;gap:5px} .tme-nome{font-size:10px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tme-papel{display:inline-flex;align-items:center;gap:3px;border:1px solid #E0E0E0; border-radius:5px;padding:0 5px;font-size:8px;color:#111114;white-space:nowrap;flex:none; transition:border-color .3s,background .3s} .tme-papel svg{width:8px;height:8px;color:#6B6B6B} .tme-pend{background:#F1F1F1;color:#3F3F3F;border-radius:99px;padding:0 5px; font-size:7.5px;font-weight:600;white-space:nowrap;flex:none} .tme-mail{display:block;font-size:8px;color:#6B6B6B;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tme-mais{color:#9A9A9A;flex:none} .tme-mais svg{width:12px;height:12px;display:block} /* -- 3. o lead do anuncio caindo no funil -- */ .vin-ag3 .vin-panel{padding:12px 0 0 12px} .vin-ag3 .kb-col--alvo{transition:background .3s} .vin-ag3:hover .kb-col--alvo{background:#FBFFE8} /* o vao que o cartao vai ocupar: mesma altura de um cartao real */ .ag-vago{border:1px dashed #CFCFCF;border-radius:7px;height:104px} .ag-voo{position:absolute;left:296px;top:8px;width:134px;z-index:3; box-shadow:0 12px 26px rgba(2,28,22,.20); transition:left .85s cubic-bezier(.22,.75,.25,1),top .85s cubic-bezier(.22,.75,.25,1), transform .85s cubic-bezier(.22,.75,.25,1);transform:rotate(1.5deg)} .vin-ag3:hover .ag-voo{left:9px;top:50px;transform:rotate(0deg)} .vin-ag3 .kb{position:relative} /* -- 4. ROAS e CAC por origem e por campanha -- */ .at-h3{display:block;font-size:9.5px;font-weight:600;color:#111114;margin-top:8px} /* -- etiquetas, cursores e coreografia -- */ .ag1-note{top:4px;right:52px} .ag1-note::after{left:auto;right:16px} .ag2-note{top:4px;right:52px} .ag2-note::after{left:auto;right:16px} .ag3-note{top:4px;right:52px} .ag3-note::after{left:auto;right:16px} .ag4-note{top:4px;left:40px} .vin-ag1 .cur--yellow{left:calc(100% - 78px);top:300px} .vin-ag1:hover .cur--yellow{left:236px;top:132px} .vin-ag2 .cur--lilac{left:calc(100% - 78px);top:314px} .vin-ag2:hover .cur--lilac{left:calc(100% - 122px);top:266px} .vin-ag3 .cur--peach{left:calc(100% - 74px);top:318px} .vin-ag3:hover .cur--peach{left:186px;top:286px} .vin-ag4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-ag4:hover .cur--yellow{left:calc(100% - 168px);top:238px} .vin-ag1 .ws-row--alvo{transition:background .3s} .vin-ag1:hover .ws-row--alvo{background:#FBFFE8} .vin-ag2 .tme-papel--alvo{transition:border-color .3s,background .3s} .vin-ag2:hover .tme-papel--alvo{border-color:#B9D400;background:#FBFFE8} .vin-ag4 .at-alvo td{transition:background .3s} .vin-ag4:hover .at-alvo td{background:#FBFFE8} /* Faixa estreita de duas colunas e telas pequenas: cada vinheta cede o que esta na beirada, de baixo para cima. */ @media (max-width:1200px) and (min-width:941px){ .vin-ag2 .tme-row:nth-of-type(3){display:none} .vin-ag4 .at-tab--org tbody tr:nth-child(n+2){display:none} .vin-ag4 .at-tab:last-of-type tbody tr:last-child{display:none} } /* o shell do hero cede o funil de baixo para cima quando cai para 280px, igual ao das vinhetas dos hubs */ @media (max-width:940px){ .vin-ag1 .ov-fl:nth-last-of-type(-n+2){display:none} } @media (max-width:600px){ .vin-ag1 .ov-fl:nth-last-of-type(-n+3){display:none} } @media (max-width:530px){ .vin-ag1 .ov-funil{display:none} } @media (max-width:400px){ .vin-ag1 .ov-metrics{display:none} } @media (max-width:940px){ /* empilhado o quadro cai para 280px: os cursores sobem junto */ .vin-ag1 .cur--yellow{top:226px} .vin-ag1:hover .cur--yellow{left:236px;top:120px} .vin-ag3 .cur--peach{top:236px} .vin-ag3:hover .cur--peach{left:186px;top:216px} .vin-ag3 .kb-col:first-of-type .kb-card:last-of-type{display:none} } /* a lista de membros cede as linhas do meio: a do Dono e a do Visualizador (o cliente convidado) sao as que contam a historia */ @media (max-width:700px){ .vin-ag2 .tme-row:nth-of-type(3){display:none} } @media (max-width:640px){ .vin-ag4 .at-tab--org{display:none} .vin-ag4 .at-org-t{display:none} } @media (max-width:560px){ .vin-ag1 .ws-pop{width:172px} .vin-ag2 .tme-mail{display:none} .vin-ag4 .at-tab th:nth-child(8),.vin-ag4 .at-tab td:nth-child(8){display:none} } @media (max-width:480px){ /* a barra lateral afina mas nao some: e o gatilho do seletor que explica de onde o dropdown saiu */ .vin-ag1 .sb{width:104px} .vin-ag1 .ws-pop{left:8px;width:176px} /* a barra de cima nao comporta busca, saldo e icones ao mesmo tempo */ .vin-ag1 .tp-saldo,.vin-ag1 .tp-kbd{display:none} .vin-ag2 .tme-row:nth-of-type(2),.vin-ag2 .tme-row:nth-of-type(3){display:none} .vin-ag4 .at-tab th:nth-child(5),.vin-ag4 .at-tab td:nth-child(5){display:none} } @media (max-width:420px){ /* a tabela por campanha cede as linhas do fim conforme os titulos quebram */ .vin-ag4 .at-tab:last-of-type tbody tr:last-child{display:none} } @media (max-width:400px){ .vin-ag4 .at-kpis{grid-template-columns:repeat(2,1fr)} .vin-ag4 .at-tab th:nth-child(4),.vin-ag4 .at-tab td:nth-child(4){display:none} } @media (max-width:380px){ .vin-ag1 .mg-sub{display:none} .vin-ag4 .at-tab:last-of-type tbody tr:nth-child(n+2){display:none} } @media (hover:none){ .vin-ag .cur{display:none} .vin-ag1 .ws-row--alvo{background:#FBFFE8} .vin-ag2 .tme-papel--alvo{border-color:#B9D400;background:#FBFFE8} .vin-ag3 .kb-col--alvo{background:#FBFFE8} .vin-ag3 .ag-voo{left:9px;top:50px;transform:rotate(0deg)} .vin-ag4 .at-alvo td{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-ag .cur,.vin-ag3 .ag-voo{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE FINANCEIRAS (/casos-de-uso/financeiras/) Fontes: crm/kanban (.kb-*, aqui com colunas mais estreitas porque a esteira tem seis etapas), app/forms/[slug] (a pagina publica do formulario, com o asterisco vermelho dos campos obrigatorios e o botao Enviar), crm/DealRecord + PlaybookSection (.pb-*) + RecordAttachmentsCard ("Anexos", nome do arquivo e a linha "tamanho · autor · data") e configuracoes/cadencias (editor com a linha "Dia [n] [tipo] Auto", os cinco STEP_KINDS e a dica "Steps sao acionados pelo offset (em dias) a partir do inicio."). ============================================================ */ .vin-fn .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. esteira de credito (hero) -- */ /* seis etapas nao cabem em colunas de 152px: aqui elas afinam */ .vin-fn1 .vin-panel{padding:12px 0 0 12px} .vin-fn1 .kb-col{width:124px} .vin-fn1 .kb-t{font-size:10px} .vin-fn1 .kb-doc{white-space:nowrap} .vin-fn1 .kb-v{font-size:11px} .vin-fn1 .kb-col--alvo{transition:background .3s} .vin-fn1:hover .kb-col--alvo{background:#FBFFE8} .kb-doc{display:inline-flex;align-items:center;gap:4px;border:1px solid #E7C99A; background:#FDF6EA;border-radius:99px;padding:1px 6px;font-size:8.5px;font-weight:600; color:#7A5300;margin-top:4px} .kb-doc svg{width:9px;height:9px;flex:none} /* -- 2. formulario publico da simulacao -- */ .vin-fn2 .vin-panel{padding:0;background:#FAFAFA} .pf{margin:12px 52px 34px 12px;background:#fff;border:1px solid #E6E6E6;border-radius:10px; padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-height:0} .pf-t{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;color:#111114} .pf-d{display:block;font-size:9.5px;color:#6B6B6B;line-height:1.4;margin-top:2px} .pf-g{display:grid;grid-template-columns:1fr 1fr;gap:7px} .pf-c{min-width:0} .pf-l{display:block;font-size:9px;font-weight:600;color:#111114;margin-bottom:3px} .pf-l em{font-style:normal;color:#C2352F} .pf-i{border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:9.5px;color:#6E6E6E; display:flex;align-items:center;justify-content:space-between;gap:4px; transition:border-color .3s,background .3s} .pf-i svg{width:10px;height:10px;color:#6B6B6B;flex:none} .pf-i--val{color:#111114} .pf-bt{margin-top:2px;background:#111114;color:#fff;border-radius:7px;padding:6px 12px; font-size:10px;font-weight:600;text-align:center;transition:transform .3s,box-shadow .3s} .vin-fn2:hover .pf-bt{transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,28,22,.22)} .vin-fn2:hover .pf-i--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 3. checklist da etapa e documentos anexados -- */ .vin-fn3 .vin-panel{flex-direction:row;padding:0;background:#FAFAFA} .vin-fn3 .dr-aside{background:#fff} .fn3-main{flex:1;min-width:0;padding:11px 52px 34px 11px;display:flex;flex-direction:column; gap:8px;min-height:0} .vin-fn3 .pb-head{margin-right:0;padding:8px 9px} /* no CRM esses dois vinham dentro de blocos proprios; aqui precisam quebrar linha por conta propria */ .vin-fn3 .pb-nome,.vin-fn3 .pb-sub{display:block} .vin-fn3 .pb-bar i{width:64%} .vin-fn3 .pb-item{padding:1px 0} .vin-fn3 .pb-etapa{padding-top:0} .vin-fn3 .pb-etapa::before{display:none} .vin-fn3 .pb-box{margin-right:0} /* cartao de anexos */ .an{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:9px 10px; display:flex;flex-direction:column;gap:5px;flex:none} .an-t{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#111114} .an-t svg{width:11px;height:11px;color:#6B6B6B} .an-it{display:flex;align-items:center;gap:6px;border:1px solid #EDEDED;border-radius:7px; padding:4px 7px;transition:border-color .3s,background .3s} .an-ic{color:#6B6B6B;flex:none} .an-ic svg{width:11px;height:11px;display:block} .an-x{min-width:0;flex:1} .an-n{display:block;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .an-m{display:block;font-size:7.5px;color:#6B6B6B; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vin-fn3:hover .pb-item--alvo .pb-cx{background:#111114;border-color:#111114} .vin-fn3:hover .pb-item--alvo .pb-cx svg{opacity:1} .vin-fn3:hover .pb-item--alvo span{color:#616161;text-decoration:line-through} /* no app o selo so aparece enquanto o item esta pendente */ .vin-fn3:hover .pb-item--alvo .pb-obr{display:none} .vin-fn3 .pb-item--alvo .pb-cx,.vin-fn3 .pb-item--alvo span{transition:background .3s,color .3s,border-color .3s} /* -- 4. cadencia de retorno -- */ .vin-fn4 .vin-panel{padding:12px 0 34px 14px} .cad{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:7px} .cad-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .cad-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .cad-lab{display:block;font-size:9px;font-weight:600;color:#111114} .cad-nome{border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:10px;color:#111114} .cad-dica{display:block;font-size:8.5px;color:#6B6B6B} .cad-p{display:flex;align-items:center;gap:6px;border:1px solid #E0E0E0;border-radius:7px; padding:5px 7px;transition:border-color .3s,background .3s} .cad-k{font-size:8.5px;color:#6B6B6B;flex:none} .cad-n{width:26px;flex:none;border:1px solid #E0E0E0;border-radius:5px;padding:1px 0; text-align:center;font-size:9.5px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums;background:#fff} .cad-tipo{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between; gap:4px;border:1px solid #E0E0E0;border-radius:5px;padding:2px 6px;font-size:9.5px;color:#111114} .cad-tipo svg{width:9px;height:9px;color:#6B6B6B;flex:none} .cad-tipo b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cad-auto{display:flex;align-items:center;gap:4px;flex:none;font-size:8.5px;color:#6B6B6B} .cad-sw{width:20px;height:12px;border-radius:99px;background:#111114;position:relative;flex:none} .cad-sw i{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:#fff} .cad-sw--off{background:#DCDCDC} .cad-sw--off i{right:auto;left:2px} .cad-assunto{border:1px solid #E0E0E0;border-radius:5px;padding:3px 6px;font-size:9px; color:#6E6E6E;margin-top:5px} .cad-x{color:#9A9A9A;flex:none} .cad-x svg{width:11px;height:11px;display:block} .cad-add{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:#4F4F4F} .cad-add svg{width:10px;height:10px} .vin-fn4:hover .cad-p--alvo{border-color:#B9D400;background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .fn1-note{top:4px;right:52px} .fn1-note::after{left:auto;right:16px} .fn2-note{top:4px;left:40px} .fn3-note{top:4px;right:52px} .fn3-note::after{left:auto;right:16px} .fn4-note{top:4px;right:52px} .fn4-note::after{left:auto;right:16px} .vin-fn1 .cur--yellow{left:34px;top:300px} .vin-fn1:hover .cur--yellow{left:262px;top:250px} .vin-fn2 .cur--lilac{left:calc(100% - 76px);top:318px} .vin-fn2:hover .cur--lilac{left:168px;top:326px} .vin-fn3 .cur--peach{left:170px;top:318px} .vin-fn3:hover .cur--peach{left:calc(100% - 176px);top:236px} .vin-fn4 .cur--yellow{left:calc(100% - 76px);top:318px} .vin-fn4:hover .cur--yellow{left:calc(100% - 168px);top:206px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-fn3 .an-it:last-of-type{display:none} .vin-fn4 .cad-step:last-of-type{display:none} } @media (max-width:940px){ /* empilhado o quadro cai para 280px */ .vin-fn1 .cur--yellow{top:226px} .vin-fn1:hover .cur--yellow{left:262px;top:190px} .vin-fn1 .kb-col:first-of-type .kb-card:last-of-type{display:none} } @media (max-width:700px) and (min-width:561px){ .vin-fn3 .an-it:last-of-type{display:none} } @media (max-width:700px){ .vin-fn4 .cad-step:last-of-type{display:none} } @media (max-width:560px){ /* em coluna unica os seis campos nao cabem: ficam os que definem a simulacao */ .vin-fn2 .pf-g{grid-template-columns:1fr} .vin-fn2 .pf-d{display:none} .vin-fn2 .pf-c:nth-of-type(n+5){display:none} .vin-fn3 .dr-aside{display:none} } @media (max-width:480px){ .vin-fn4 .cad-auto{display:none} .vin-fn4 .cad-x{display:none} } @media (max-width:400px){ .vin-fn2 .pf-c:nth-of-type(n+4){display:none} .vin-fn4 .cad-step:nth-last-of-type(-n+2){display:none} } @media (hover:none){ .vin-fn .cur{display:none} .vin-fn1 .kb-col--alvo{background:#FBFFE8} .vin-fn2 .pf-i--alvo{border-color:#B9D400;background:#FBFFE8} .vin-fn3 .pb-item--alvo .pb-cx{background:#111114;border-color:#111114} .vin-fn3 .pb-item--alvo .pb-cx svg{opacity:1} .vin-fn3 .pb-item--alvo span{color:#616161;text-decoration:line-through} .vin-fn3 .pb-item--alvo .pb-obr{display:none} .vin-fn4 .cad-p--alvo{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-fn .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE EDUCACAO (/casos-de-uso/educacao/) Fontes: crm/kanban (.kb-*), v2/chat/ConversationList (a lista e o popover de filtros com Status, Setor e Responsavel — os setores vem de configuracoes/setores), crm/RecordEventsCard ("Agenda — Reunioes e eventos deste registro", botao Agendar e a linha "dd/MM/yyyy HH:mm · local") junto do PlaybookSection, e engajamento/email-marketing (cartao da campanha com "N/N enviados · N aberturas · N cliques", o selo "Teste A/B" e o comparativo por variante com o selo "Melhor"). ============================================================ */ .vin-edu .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. funil de matricula (hero) -- */ .vin-edu1 .vin-panel{padding:12px 0 0 12px} .vin-edu1 .kb-col{width:140px} .vin-edu1 .kb-col--alvo{transition:background .3s} .vin-edu1:hover .kb-col--alvo{background:#FBFFE8} /* -- 2. fila da secretaria por setor -- */ .edu2{position:relative;display:flex;height:100%;min-height:0;padding-right:52px} .edu2 .ib-lista{width:214px} /* chip do setor na linha da conversa */ .cv-set{display:inline-flex;align-items:center;gap:3px;border-radius:99px;padding:0 5px; font-size:7px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex:none} .cv-set i{width:5px;height:5px;border-radius:50%;display:block} /* popover de filtros (PopoverContent w-64, align end) */ .sf-pop{position:absolute;z-index:4;right:60px;top:30px;width:176px;background:#fff; border:1px solid #E0E0E0;border-radius:9px;box-shadow:0 12px 30px rgba(2,28,22,.16); padding:9px;display:flex;flex-direction:column;gap:8px} .sf-g{display:flex;flex-direction:column;gap:4px} .sf-l{font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6B6B6B} .sf-s{display:flex;align-items:center;justify-content:space-between;gap:4px; border:1px solid #E0E0E0;border-radius:6px;padding:4px 7px;font-size:9px;color:#111114; transition:border-color .3s,background .3s} .sf-s svg{width:9px;height:9px;color:#6B6B6B;flex:none} .sf-n{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%; background:#111114;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:700} .cv-filtro{position:relative} .vin-edu2:hover .sf-s--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 3. agenda da visita e checklist da etapa -- */ .vin-edu3 .vin-panel{flex-direction:row;padding:0;background:#FAFAFA} .vin-edu3 .dr-aside{background:#fff} .edu3-main{flex:1;min-width:0;padding:11px 52px 34px 11px;display:flex;flex-direction:column; gap:8px;min-height:0} .vin-edu3 .dr-tabs{border-bottom:1px solid #E6E6E6;padding-bottom:6px;gap:10px} .ev{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:9px 10px; display:flex;flex-direction:column;gap:5px;flex:none} .ev-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .ev-t{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#111114} .ev-t svg{width:11px;height:11px;color:#6B6B6B} .ev-d{display:block;font-size:8px;color:#6B6B6B;margin-top:1px} .ev-bt{display:inline-flex;align-items:center;gap:3px;border:1px solid #DDD;border-radius:6px; padding:2px 8px;font-size:8.5px;font-weight:600;color:#111114;white-space:nowrap;flex:none} .ev-bt svg{width:9px;height:9px} .ev-it{border:1px solid #EDEDED;border-radius:7px;padding:4px 7px; transition:border-color .3s,background .3s} /* o app usa opacity-60 no evento passado; aqui o cinza sobre cinza cai para 2,9:1, entao o apagado vem de cores explicitas que passam */ .ev-it--old{border-color:#F2F2F2} .ev-it--old .ev-n{color:#6B6B6B;font-weight:500} .ev-it--old .ev-m{color:#6E6E6E} .ev-n{display:block;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ev-m{display:flex;align-items:center;gap:4px;font-size:7.5px;color:#6B6B6B;margin-top:1px} .ev-m svg{width:8px;height:8px;flex:none} .vin-edu3 .pb-box{margin-right:0} .vin-edu3 .pb-etapa{padding-top:0} .vin-edu3 .pb-etapa::before{display:none} .vin-edu3 .pb-item{padding:1px 0} .vin-edu3:hover .ev-it--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 4. e-mail de rematricula com teste A/B -- */ .vin-edu4 .vin-panel{padding:12px 0 34px 14px} .em{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .em-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .em-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .em-card{border:1px solid #EDEDED;border-radius:9px;padding:9px 10px;background:#fff; display:flex;flex-direction:column;gap:6px} .em-l1{display:flex;align-items:center;gap:6px} .em-n{font-size:10.5px;font-weight:600;color:#111114;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .em-st{background:#DEF6E7;color:#116330;border-radius:99px;padding:1px 7px; font-size:8px;font-weight:600;white-space:nowrap;flex:none} .em-st--dr{background:#F1F1F1;color:#3F3F3F} .em-as{display:block;font-size:9px;color:#6B6B6B; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .em-kpis{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:8.5px;color:#6B6B6B; font-variant-numeric:tabular-nums} .em-kpis span{display:inline-flex;align-items:center;gap:4px} .em-kpis svg{width:9px;height:9px;flex:none} .em-ab{border:1px solid #E0E0E0;border-radius:99px;padding:0 6px;font-size:7.5px; font-weight:600;color:#4F4F4F} .em-var{display:grid;grid-template-columns:1fr 1fr;gap:6px} .em-v{border:1px solid #EDEDED;background:#FAFAFA;border-radius:8px;padding:6px 8px; transition:border-color .3s,background .3s} .em-v--best{border-color:#B7E3C7;background:#F2FBF5} .em-vh{display:flex;align-items:center;justify-content:space-between;gap:6px} .em-vn{font-size:9.5px;font-weight:700;color:#111114} .em-best{background:#111114;color:#fff;border-radius:99px;padding:0 6px; font-size:7px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .em-vm{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:8px;color:#5A5A5A;margin-top:3px; font-variant-numeric:tabular-nums} .vin-edu4:hover .em-v--best{border-color:#B9D400;background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .edu1-note{top:4px;right:52px} .edu1-note::after{left:auto;right:16px} .edu2-note{top:4px;left:40px} .edu3-note{top:4px;right:52px} .edu3-note::after{left:auto;right:16px} .edu4-note{top:4px;right:52px} .edu4-note::after{left:auto;right:16px} .vin-edu1 .cur--yellow{left:34px;top:300px} .vin-edu1:hover .cur--yellow{left:214px;top:252px} .vin-edu2 .cur--lilac{left:calc(100% - 120px);top:300px} .vin-edu2:hover .cur--lilac{left:calc(100% - 190px);top:140px} .vin-edu3 .cur--peach{left:170px;top:318px} .vin-edu3:hover .cur--peach{left:calc(100% - 168px);top:150px} .vin-edu4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-edu4:hover .cur--yellow{left:calc(100% - 178px);top:250px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-edu2 .cv-row:nth-last-of-type(-n+2){display:none} .vin-edu3 .pb-item:nth-last-of-type(-n+2){display:none} } @media (max-width:940px){ .vin-edu1 .cur--yellow{top:226px} .vin-edu1:hover .cur--yellow{left:214px;top:190px} .vin-edu1 .kb-col:first-of-type .kb-card:last-of-type{display:none} } @media (max-width:700px){ .vin-edu3 .pb-item:nth-last-of-type(-n+2){display:none} /* com as variantes em coluna unica a terceira campanha nao cabe */ .vin-edu4 .em-card:last-of-type{display:none} } @media (max-width:640px){ /* sem a conversa ao lado, a lista ocupa o painel inteiro */ .vin-edu2 .ib-tv{display:none} .vin-edu2 .ib-lista{width:auto;flex:1;border-right:0} .vin-edu2 .cur--lilac{top:334px} .vin-edu4 .em-var{grid-template-columns:1fr} } @media (max-width:560px){ .vin-edu3 .dr-aside{display:none} .vin-edu4 .em-d{display:none} } @media (max-width:480px){ .vin-edu4 .em-kpis span:nth-of-type(n+3){display:none} } @media (max-width:400px){ .vin-edu2 .cv-abas{display:none} .vin-edu3 .pb-item:nth-last-of-type(-n+3){display:none} } @media (hover:none){ .vin-edu .cur{display:none} .vin-edu1 .kb-col--alvo{background:#FBFFE8} .vin-edu2 .sf-s--alvo{border-color:#B9D400;background:#FBFFE8} .vin-edu3 .ev-it--alvo{border-color:#B9D400;background:#FBFFE8} .vin-edu4 .em-v--best{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-edu .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE VAREJO (/casos-de-uso/varejo/) Fontes: v2/chat (ConversationList + ThreadView, com o selo de canal do cabecalho), crm/produtos ("Produtos e servicos — Catalogo reutilizavel nas propostas", colunas Nome/Tipo/Categoria/SKU/Preco/ Unidade/Status), Workflows/Editor (canvas + a barra lateral com "URL do webhook — Use no gatilho HTTP do workflow pra disparar de sistemas externos", e os rotulos do catalogo: "Criar contato ou negocio", "Aguardar resposta do contato", "Dividir A/B" como BranchNode com "N caminho(s)") e o assistente de campanhas (StepMessages com a pre-visualizacao de WhatsApp). ============================================================ */ .vin-vj .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. fila com os tres canais (hero) -- */ .vj1{display:flex;height:100%;min-height:0;padding-right:52px} .vj1 .ib-lista{width:176px} /* selo do canal na linha da conversa */ .cv-can{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:600; color:#4F4F4F;flex:none} .cv-can svg{width:9px;height:9px;flex:none} .cv-can--wa{color:#0F6B3E} .cv-can--ig{color:#A0246B} .cv-can--ms{color:#1D4E7A} .vin-vj1 .cv-row:nth-of-type(2){transition:background .3s} .vin-vj1:hover .cv-row:nth-of-type(2){background:#F7F9F4} /* -- 2. catalogo de produtos -- */ .vin-vj2 .vin-panel{padding:12px 0 34px 14px} .pd{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .pd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .pd-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .pd-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .pd-novo{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:3px 9px;font-size:9px;font-weight:600;white-space:nowrap;flex:none} .pd-novo svg{width:10px;height:10px} .pd-busca{display:flex;align-items:center;gap:5px;border:1px solid #E0E0E0;border-radius:7px; padding:4px 8px;font-size:9px;color:#6E6E6E;flex:none} .pd-busca svg{width:10px;height:10px;flex:none} .pd-tab{border:1px solid #EDEDED;border-radius:8px;overflow:hidden;flex:none} .pd-tab table{width:100%;border-collapse:collapse;font-size:9.5px;table-layout:fixed} .pd-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 7px} .pd-tab td{padding:5px 7px;border-top:1px solid #F0F0F0;color:#4F4F4F; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pd-tab td.num,.pd-tab th.num{text-align:right;font-variant-numeric:tabular-nums} /* com table-layout fixo as colunas dividem igual e o nome do produto some em reticencias: a primeira coluna fica com a maior parte */ .pd-tab th:nth-child(1){width:40%} .pd-tab th:nth-child(5){width:74px} .pd-nome{display:flex;align-items:center;gap:6px;min-width:0} .pd-img{width:22px;height:22px;border-radius:5px;flex:none;display:grid;place-items:center; color:#7A7A7A;background:#F1F1F1} .pd-img svg{width:11px;height:11px} .pd-nx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:600;color:#111114} .pd-tipo{border:1px solid #E0E0E0;border-radius:99px;padding:0 6px;font-size:8px;color:#4F4F4F} .pd-sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8.5px} .pd-st{display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:600;color:#116330} .pd-st i{width:5px;height:5px;border-radius:50%;background:#22C55E;display:block} .pd-linha--alvo td{transition:background .3s} .vin-vj2:hover .pd-linha--alvo td{background:#FBFFE8} /* -- 3. automacao de carrinho abandonado -- */ .vin-vj3 .vin-panel{padding:0} .vj3{display:flex;height:100%;min-height:0} .vj3 .cv{flex:1;min-width:0} /* deslocado a direita: os controles de zoom moram no canto de baixo a esquerda do canvas e cobriam a coluna de nos */ .vj3-fluxo{position:absolute;left:44px;top:26px} .vj3-fluxo .nd{width:170px} .vin-vj3 .cv-ctrl{bottom:45px} .wh{width:192px;flex:none;background:#fff;border-left:1px solid #E6E6E6; padding:11px 52px 34px 12px;display:flex;flex-direction:column;gap:5px;min-height:0} .wh-t{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#111114} .wh-t svg{width:11px;height:11px;color:#6B6B6B} .wh-d{display:block;font-size:8px;color:#6B6B6B;line-height:1.35} .wh-url{display:flex;align-items:flex-start;gap:5px;background:#F4F5F4;border-radius:7px; padding:6px 7px;transition:background .3s} .wh-url code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:7.5px;line-height:1.4;color:#3F3F3F;word-break:break-all} .wh-cp{color:#6B6B6B;flex:none} .wh-cp svg{width:10px;height:10px;display:block} .wh-cap{display:block;font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#6B6B6B;margin-top:4px} .wh-p{display:flex;align-items:center;gap:5px;font-size:8.5px;color:#4F4F4F} .wh-p i{width:5px;height:5px;border-radius:50%;background:#22C55E;display:block;flex:none} .vin-vj3:hover .wh-url{background:#FBFFE8} /* -- 4. campanha de recompra -- */ .vin-vj4 .vin-panel{padding:0} .vj4{display:flex;flex-direction:column;min-height:0;flex:1} /* -- etiquetas, cursores e coreografia -- */ .vj1-note{top:4px;right:52px} .vj1-note::after{left:auto;right:16px} .vj2-note{top:4px;right:52px} .vj2-note::after{left:auto;right:16px} .vj3-note{top:4px;left:40px} .vj4-note{top:4px;right:52px} .vj4-note::after{left:auto;right:16px} .vin-vj1 .cur--yellow{left:250px;top:272px} .vin-vj1:hover .cur--yellow{left:206px;top:186px} .vin-vj2 .cur--lilac{left:calc(100% - 78px);top:314px} .vin-vj2:hover .cur--lilac{left:calc(100% - 152px);top:212px} .vin-vj3 .cur--peach{left:calc(100% - 74px);top:318px} .vin-vj3:hover .cur--peach{left:calc(100% - 90px);top:130px} .vin-vj4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-vj4:hover .cur--yellow{left:calc(100% - 168px);top:250px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-vj1 .tv-row:nth-last-of-type(-n+1){display:none} .vin-vj2 .pd-tab tbody tr:last-child{display:none} } @media (max-width:940px){ /* empilhado o quadro cai para 280px: cabem tres conversas */ .vin-vj1 .cv-row:last-of-type{display:none} .vin-vj1 .cur--yellow{top:212px} .vin-vj1:hover .cur--yellow{left:206px;top:160px} } @media (max-width:760px){ .vin-vj2 .pd-tab th:nth-child(2),.vin-vj2 .pd-tab td:nth-child(2){display:none} } @media (max-width:700px) and (min-width:561px){ .vin-vj2 .pd-tab tbody tr:last-child{display:none} } @media (max-width:560px){ .vin-vj2 .pd-tab th:nth-child(1){width:56%} } @media (max-width:640px){ .vin-vj1 .ib-lista{display:none} .vin-vj3 .wh{width:auto;flex:1;border-left:0} .vin-vj3 .vj3 .cv{display:none} } @media (max-width:560px){ .vin-vj2 .pd-tab th:nth-child(4),.vin-vj2 .pd-tab td:nth-child(4){display:none} .vin-vj2 .pd-busca{display:none} .vin-vj4 .at-tab th:nth-child(6),.vin-vj4 .at-tab td:nth-child(6){display:none} } @media (max-width:420px){ /* os seis indicadores viram dois por linha e a tabela cede a ultima origem */ .vin-vj4 .mt-card:nth-of-type(n+4){display:none} .vin-vj4 .at-tab tbody tr:last-child{display:none} } @media (max-width:480px){ .vin-vj1 .tv-row:nth-last-of-type(-n+2){display:none} .vin-vj2 .pd-tab th:nth-child(6),.vin-vj2 .pd-tab td:nth-child(6){display:none} } @media (max-width:400px){ .vin-vj2 .pd-d{display:none} .vin-vj2 .pd-tab th:nth-child(3),.vin-vj2 .pd-tab td:nth-child(3){display:none} } @media (hover:none){ .vin-vj .cur{display:none} .vin-vj1 .cv-row:nth-of-type(2){background:#F7F9F4} .vin-vj2 .pd-linha--alvo td{background:#FBFFE8} .vin-vj3 .wh-url{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-vj .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE RESTAURANTES (/casos-de-uso/restaurantes/) Fontes: v2/chat (ConversationList com o setor e o responsavel na linha; ThreadView + ContactDetailsPanel com Assumir conversa, Responsavel, Setor e a nota interna), o playground "Testar IA" de atendimento/agentes/[id]/editar (Sheet com o titulo "Testar IA — ", a descricao "Converse como se fosse um cliente... Nao consome seu saldo de IA." e a bolha do simulador no acento) e, na ultima, dois recortes lado a lado: o cartao Agenda de crm/RecordEventsCard e o cartao de campanha de engajamento/campanhas. ============================================================ */ .vin-rt .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. fila por setor da casa (hero) -- */ .rt1{display:flex;height:100%;min-height:0;padding-right:52px} .rt1 .ib-lista{width:auto;flex:1;border-right:0} /* avatar de quem assumiu, no fim da linha */ .cv-resp{width:17px;height:17px;border-radius:50%;display:grid;place-items:center; font-size:7px;font-weight:700;color:#fff;flex:none;margin-left:auto} .cv-livre{margin-left:auto;border:1px dashed #C9C9C9;border-radius:99px;padding:0 6px; font-size:7.5px;font-weight:600;color:#6B6B6B;flex:none;white-space:nowrap} .vin-rt1 .cv-row:nth-of-type(3){transition:background .3s} .vin-rt1:hover .cv-row:nth-of-type(3){background:#F7F9F4} /* -- 2. quem assumiu, setor e nota interna -- */ .rt2{display:flex;height:100%;min-height:0;padding-right:52px} .rt2 .ib-dp{width:186px} /* -- 3. chat de simulacao do agente -- */ .vin-rt3 .vin-panel{padding:0 0 34px;background:#FAFAFA} .si{margin:0 0 0 auto;width:270px;height:100%;background:#fff;border-left:1px solid #E0E0E0; box-shadow:-12px 0 30px rgba(2,28,22,.10);display:flex;flex-direction:column;min-height:0} .si-head{padding:10px 52px 9px 12px;border-bottom:1px solid #EFEFEF;flex:none} .si-t{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#111114} .si-t svg{width:12px;height:12px;color:#7CA000} .si-d{display:block;font-size:8px;color:#6B6B6B;line-height:1.4;margin-top:3px} .si-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px; padding:10px 52px 10px 12px} .si-row{display:flex} .si-row--me{justify-content:flex-end} .si-bal{max-width:88%;border-radius:12px;padding:5px 9px;background:#F1F1F1;color:#111114; font-size:9.5px;line-height:1.45} /* bolha do simulador: bg-brand-accent com texto no ink, como no Sheet */ .si-bal--me{background:var(--sun);color:var(--ink);border-bottom-right-radius:3px} .si-comp{display:flex;align-items:center;gap:6px;border-top:1px solid #EFEFEF; padding:8px 52px 10px 12px;flex:none} .si-inp{flex:1;min-width:0;border:1px solid #E6E6E6;background:#FAFAFA;border-radius:8px; padding:5px 8px;font-size:9px;color:#6E6E6E;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .si-env{width:22px;height:22px;border-radius:7px;background:#111114;color:#fff; display:grid;place-items:center;flex:none} .si-env svg{width:11px;height:11px} /* o cardapio, atras do painel, dando contexto */ .si-fundo{position:absolute;left:14px;top:16px;width:196px; background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:9px 10px; display:flex;flex-direction:column;gap:5px} .si-fc{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;color:#111114} .si-fc svg{width:11px;height:11px;color:#6B6B6B} .si-fi{display:flex;align-items:center;gap:6px;border:1px solid #EDEDED;border-radius:7px; padding:4px 7px;transition:border-color .3s,background .3s} .si-fx{min-width:0;flex:1} .si-fn{display:block;font-size:9px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .si-fm{display:block;font-size:7.5px;color:#6B6B6B} .si-fic{color:#6B6B6B;flex:none} .si-fic svg{width:11px;height:11px;display:block} .vin-rt3:hover .si-fi--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 4. reserva na agenda e campanha do delivery -- */ .vin-rt4 .vin-panel{padding:12px 0 34px 14px} .rt4{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .rt4-liga{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;padding:1px 0} .rt4-liga svg{width:12px;height:12px;color:#8A8A8A} .rt4-liga span{font-size:8px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:#6B6B6B} .vin-rt4 .ev{border-color:#E6E6E6} .vin-rt4:hover .ev-it--alvo{border-color:#B9D400;background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .rt1-note{top:4px;right:52px} .rt1-note::after{left:auto;right:16px} .rt2-note{top:4px;right:52px} .rt2-note::after{left:auto;right:16px} .rt3-note{top:4px;left:40px} .rt4-note{top:4px;right:52px} .rt4-note::after{left:auto;right:16px} .vin-rt1 .cur--yellow{left:calc(100% - 78px);top:300px} .vin-rt1:hover .cur--yellow{left:calc(100% - 130px);top:212px} .vin-rt2 .cur--lilac{left:150px;top:318px} .vin-rt2:hover .cur--lilac{left:calc(100% - 168px);top:112px} .vin-rt3 .cur--peach{left:calc(100% - 76px);top:284px} .vin-rt3:hover .cur--peach{left:190px;top:150px} .vin-rt4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-rt4:hover .cur--yellow{left:calc(100% - 168px);top:150px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-rt2 .tv-row:nth-last-of-type(-n+1){display:none} .vin-rt4 .em-card{display:none} .vin-rt4 .rt4-liga{display:none} } @media (max-width:940px){ .vin-rt1 .cv-row:last-of-type{display:none} .vin-rt1 .cur--yellow{top:226px} .vin-rt1:hover .cur--yellow{left:calc(100% - 130px);top:180px} } @media (max-width:760px){ .vin-rt3 .si-fundo{display:none} } @media (max-width:640px){ .vin-rt2 .ib-dp{display:none} .vin-rt3 .si{width:auto;flex:1;border-left:0;box-shadow:none} .vin-rt3 .cur{display:none} } @media (max-width:560px){ .vin-rt1 .cv-l3{display:none} .vin-rt4 .em-kpis span:nth-of-type(n+3){display:none} } @media (max-width:480px){ .vin-rt2 .tv-row:nth-last-of-type(-n+2){display:none} } @media (max-width:400px){ .vin-rt1 .cv-abas{display:none} .vin-rt4 .ev-it:last-of-type{display:none} } @media (hover:none){ .vin-rt .cur{display:none} .vin-rt1 .cv-row:nth-of-type(3){background:#F7F9F4} .vin-rt3 .si-fi--alvo{border-color:#B9D400;background:#FBFFE8} .vin-rt4 .ev-it--alvo{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-rt .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE CLINICAS (/casos-de-uso/clinicas/) Fontes: crm/kanban (.kb-*) com as etapas do funil da primeira consulta, configuracoes/setores (cartao "Setores cadastrados" e a caixa "Novo setor" com nome e a paleta de oito cores do arquivo), v2/chat/ScheduledMessagesSheet ("Mensagens agendadas — Agendamentos pendentes desta conversa...", data no formato "dd MMM, HH:mm" e os selos Agendada/Enviada) e o assistente de campanhas (StepMessages com a pre-visualizacao de WhatsApp). Nota: o app nao tem uma tela de agenda do dia inteiro — os compromissos vivem dentro de cada registro —, por isso o hero mostra o funil com a data da consulta no cartao. ============================================================ */ .vin-cn .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. funil da primeira consulta (hero) -- */ .vin-cn1 .vin-panel{padding:12px 0 0 12px} .vin-cn1 .kb-col{width:146px} .vin-cn1 .kb-col--alvo{transition:background .3s} .vin-cn1:hover .kb-col--alvo{background:#FBFFE8} .kb-conf{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:1px 6px; font-size:8.5px;font-weight:600;margin-top:4px;white-space:nowrap} .kb-conf svg{width:9px;height:9px;flex:none} .kb-conf--ok{background:#DEF6E7;color:#116330} .kb-conf--wait{background:#FDF3E3;color:#7A5300} /* -- 2. setores da recepcao -- */ .vin-cn2 .vin-panel{padding:12px 0 34px 14px} .st{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px; position:relative} .st-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .st-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .st-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .st-novo{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:3px 9px;font-size:9px;font-weight:600;white-space:nowrap;flex:none} .st-novo svg{width:10px;height:10px} .st-card{border:1px solid #EDEDED;border-radius:9px;padding:9px 10px;display:flex; flex-direction:column;gap:5px} .st-ct{display:block;font-size:10.5px;font-weight:600;color:#111114} .st-cd{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .st-row{display:flex;align-items:center;gap:8px;border:1px solid #EDEDED;border-radius:8px; padding:5px 9px} .st-dot{width:9px;height:9px;border-radius:50%;flex:none} .st-nome{flex:1;min-width:0;font-size:10px;font-weight:500;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-ic{color:#9A9A9A;flex:none} .st-ic svg{width:11px;height:11px;display:block} /* caixa "Novo setor" por cima */ /* a caixa entra pela direita e por baixo: assim os nomes dos setores continuam visiveis ao lado, em vez de sumirem sob o modal */ .st-dlg{position:absolute;z-index:4;right:66px;width:246px;bottom:2px;background:#fff; border:1px solid #E0E0E0;border-radius:10px;box-shadow:0 16px 38px rgba(2,28,22,.18); padding:11px 12px;display:flex;flex-direction:column;gap:7px} .st-dt{display:block;font-size:11px;font-weight:600;color:#111114} .st-dd{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .st-lab{display:block;font-size:9px;font-weight:600;color:#111114;margin-bottom:3px} .st-inp{border:1px solid #E0E0E0;border-radius:7px;padding:5px 8px;font-size:9.5px;color:#111114} .st-cores{display:flex;flex-wrap:wrap;gap:5px} .st-cor{width:17px;height:17px;border-radius:50%;border:1px solid #E0E0E0;display:grid; place-items:center;color:#fff;transition:transform .3s} .st-cor svg{width:9px;height:9px;opacity:0} .st-cor--on svg{opacity:1} .st-acoes{display:flex;justify-content:flex-end;gap:6px;margin-top:1px} .st-bt{border-radius:6px;padding:3px 10px;font-size:9px;font-weight:600} .st-bt--o{border:1px solid #DDD;color:#111114} .st-bt--p{background:#111114;color:#fff} .vin-cn2:hover .st-cor--alvo{transform:scale(1.18)} /* -- 3. mensagens agendadas -- */ .vin-cn3 .vin-panel{padding:0;background:#FAFAFA} .sm{margin:0 0 0 auto;width:276px;height:100%;background:#fff;border-left:1px solid #E0E0E0; box-shadow:-12px 0 30px rgba(2,28,22,.10);display:flex;flex-direction:column;min-height:0; padding-bottom:34px} .sm-head{padding:11px 52px 10px 12px;flex:none} .sm-t{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#111114} .sm-t svg{width:13px;height:13px;color:#4F4F4F} .sm-d{display:block;font-size:8.5px;color:#6B6B6B;line-height:1.4;margin-top:3px} .sm-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:0 52px 0 12px} .sm-it{border:1px solid #EDEDED;border-radius:9px;padding:8px 9px; transition:border-color .3s,background .3s} .sm-l1{display:flex;align-items:center;gap:5px} .sm-l1 svg{width:10px;height:10px;color:#6B6B6B;flex:none} .sm-q{font-size:9px;font-weight:600;color:#111114;font-variant-numeric:tabular-nums} .sm-st{border-radius:99px;padding:0 6px;font-size:7.5px;font-weight:600;white-space:nowrap} .sm-st--ag{background:#F2FBCF;color:#3F5300} .sm-st--ok{background:#DEF6E7;color:#116330} .sm-ac{margin-left:auto;display:flex;align-items:center;gap:4px;color:#9A9A9A;flex:none} .sm-ac svg{width:10px;height:10px;display:block} .sm-tx{display:block;font-size:9.5px;line-height:1.45;color:#111114;margin-top:5px} /* a conversa atras da gaveta */ .sm-fundo{position:absolute;left:14px;top:16px;width:186px;display:flex;flex-direction:column;gap:5px} .vin-cn3:hover .sm-it--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 4. campanha de retorno -- */ .vin-cn4 .vin-panel{padding:0;display:flex;flex-direction:column} /* -- etiquetas, cursores e coreografia -- */ .cn1-note{top:4px;right:52px} .cn1-note::after{left:auto;right:16px} .cn2-note{top:4px;right:52px} .cn2-note::after{left:auto;right:16px} .cn3-note{top:4px;left:40px} .cn4-note{top:4px;left:40px} .vin-cn1 .cur--yellow{left:34px;top:300px} .vin-cn1:hover .cur--yellow{left:220px;top:250px} .vin-cn2 .cur--lilac{left:120px;top:300px} .vin-cn2:hover .cur--lilac{left:calc(100% - 214px);top:262px} .vin-cn3 .cur--peach{left:calc(100% - 76px);top:330px} .vin-cn3:hover .cur--peach{left:calc(100% - 172px);top:150px} .vin-cn4 .cur--yellow{left:calc(100% - 76px);top:318px} .vin-cn4:hover .cur--yellow{left:calc(100% - 168px);top:214px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-cn3 .sm-it:last-of-type{display:none} .vin-cn4 .ms-bt:last-of-type{display:none} } /* o passo de mensagens cresce quando a coluna afina: saem primeiro os botoes da mensagem e depois a dica das variaveis */ @media (max-width:700px){ .vin-cn4 .ms-bt:last-of-type{display:none} } @media (max-width:480px){ .vin-cn4 .ms-bt{display:none} .vin-cn4 .ms-dica{display:none} } @media (max-width:940px){ .vin-cn1 .cur--yellow{top:226px} .vin-cn1:hover .cur--yellow{left:220px;top:190px} .vin-cn1 .kb-col:first-of-type .kb-card:last-of-type{display:none} } @media (max-width:760px){ .vin-cn3 .sm-fundo{display:none} } @media (max-width:700px){ .vin-cn2 .st-row:nth-of-type(4){display:none} .vin-cn3 .sm-it:last-of-type{display:none} } @media (max-width:640px){ .vin-cn3 .sm{width:auto;flex:1;border-left:0;box-shadow:none} .vin-cn3 .cur{display:none} } @media (max-width:560px){ .vin-cn2 .st-cd{display:none} } @media (max-width:480px){ .vin-cn2 .st-row:nth-of-type(3){display:none} } @media (hover:none){ .vin-cn .cur{display:none} .vin-cn1 .kb-col--alvo{background:#FBFFE8} .vin-cn3 .sm-it--alvo{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-cn .cur,.st-cor{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE VENDAS (/casos-de-uso/vendas/) Fontes: crm/kanban (.kb-*), engajamento/workflows/templates (ToggleGroup de categorias e os cartoes dos tres modelos de distribuicao, com nome, descricao e "N etapas" vindos de workflow-templates.ts), o registro do negocio com PlaybookSection + RecordTasksCard ("Tarefas — Atividades vinculadas a este registro", prioridades Baixa/Media/Alta) + CadencesSection (selo "Ativa" e "Passo N de N") e analise/time ("Performance do time — Ranking de vendedores por negocios ganhos no mes x meta", os tres cartoes de resumo e a tabela com as medalhas dos tres primeiros). ============================================================ */ .vin-vd .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. funil de vendas (hero) -- */ .vin-vd1 .vin-panel{padding:12px 0 0 12px} .vin-vd1 .kb-col--alvo{transition:background .3s} .vin-vd1:hover .kb-col--alvo{background:#FBFFE8} /* -- 2. modelos de distribuicao -- */ .vin-vd2 .vin-panel{padding:12px 0 34px 14px} .tw{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .tw-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .tw-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .tw-abas{display:flex;gap:3px;background:#F3F4F3;border-radius:8px;padding:2px; width:max-content;max-width:100%;overflow:hidden;flex:none} .tw-aba{font-size:9px;padding:3px 9px;border-radius:6px;color:#616161;white-space:nowrap} .tw-aba--on{background:#fff;color:#111114;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} .tw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;min-height:0} .tw-card{border:1px solid #EDEDED;border-radius:9px;background:#fff;padding:9px; display:flex;flex-direction:column;min-width:0;transition:border-color .3s,background .3s} .tw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px} .tw-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none} .tw-ico svg{width:13px;height:13px} .tw-cat{border-radius:99px;padding:1px 6px;font-size:7.5px;font-weight:600; background:#E4EEF8;color:#1D4E7A;white-space:nowrap;flex:none} .tw-n{display:block;font-size:10px;font-weight:600;color:#111114;line-height:1.25;margin-top:7px} .tw-x{display:block;font-size:8.5px;color:#6B6B6B;line-height:1.4;margin-top:3px;flex:1} .tw-pe{display:flex;align-items:center;justify-content:space-between;gap:6px; border-top:1px solid #F0F0F0;margin-top:7px;padding-top:6px} .tw-et{font-size:8px;color:#6B6B6B} .tw-usar{background:#111114;color:#fff;border-radius:6px;padding:2px 8px; font-size:8.5px;font-weight:600;white-space:nowrap} .vin-vd2:hover .tw-card--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 3. playbook, tarefas e cadencia no negocio -- */ .vin-vd3 .vin-panel{flex-direction:row;padding:0;background:#FAFAFA} .vin-vd3 .dr-aside{background:#fff} .vd3-main{flex:1;min-width:0;padding:11px 52px 34px 11px;display:flex;flex-direction:column; gap:7px;min-height:0} .vin-vd3 .pb-head{margin-right:0;padding:8px 9px} .vin-vd3 .pb-nome,.vin-vd3 .pb-sub{display:block} .vin-vd3 .pb-bar i{width:58%} /* tarefas */ .tk{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:9px 10px; display:flex;flex-direction:column;gap:5px;flex:none} .tk-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .tk-t{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#111114} .tk-t svg{width:11px;height:11px;color:#6B6B6B} .tk-d{display:block;font-size:8px;color:#6B6B6B;margin-top:1px} .tk-bt{display:inline-flex;align-items:center;gap:3px;border:1px solid #DDD;border-radius:6px; padding:2px 8px;font-size:8.5px;font-weight:600;color:#111114;white-space:nowrap;flex:none} .tk-bt svg{width:9px;height:9px} .tk-it{display:flex;align-items:center;gap:7px;border:1px solid #EDEDED;border-radius:7px; padding:4px 7px;transition:border-color .3s,background .3s} .tk-cx{width:13px;height:13px;border-radius:50%;border:1px solid #C9C9C9;flex:none; display:grid;place-items:center;background:#fff} .tk-cx svg{width:8px;height:8px;color:#fff;opacity:0} .tk-it--ok .tk-cx{background:#111114;border-color:#111114} .tk-it--ok .tk-cx svg{opacity:1} .tk-x{min-width:0;flex:1} .tk-n{display:block;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-it--ok .tk-n{color:#6B6B6B;text-decoration:line-through} .tk-m{display:flex;align-items:center;gap:4px;font-size:7.5px;color:#6B6B6B;margin-top:1px} .tk-p{display:inline-flex;align-items:center;gap:3px;font-weight:600} .tk-p i{width:5px;height:5px;border-radius:50%;display:block} .tk-p--alta{color:#B3261E} .tk-p--alta i{background:#EF4444} .tk-p--media{color:#8A5B00} .tk-p--media i{background:#F59E0B} .tk-p--baixa{color:#6B6B6B} .tk-p--baixa i{background:#A3A3A3} /* cadencia */ .cq-cap{display:block;font-size:7px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#6B6B6B} .cq{background:#fff;border:1px solid #E6E6E6;border-radius:9px;padding:7px 9px;flex:none} .cq-l1{display:flex;align-items:center;gap:5px} .cq-l1 > svg{width:11px;height:11px;color:#6B6B6B;flex:none} .cq-n{min-width:0;flex:1;font-size:9.5px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cq-st{display:inline-flex;align-items:center;gap:3px;background:#DEF6E7;color:#116330; border-radius:99px;padding:1px 7px;font-size:7.5px;font-weight:600;flex:none} .cq-st svg{width:8px;height:8px} .cq-ac{display:flex;align-items:center;gap:4px;color:#9A9A9A;flex:none} .cq-ac svg{width:10px;height:10px;display:block} .cq-m{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;font-size:8px;color:#6B6B6B; margin-top:3px} .cq-m span{display:inline-flex;align-items:center;gap:4px} .cq-m svg{width:8px;height:8px;flex:none} .vin-vd3:hover .tk-it--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 4. ranking do time contra a meta -- */ .vin-vd4 .vin-panel{padding:12px 0 34px 14px} .lb{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .lb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .lb-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .lb-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .lb-mes{border:1px solid #E0E0E0;border-radius:7px;padding:3px 8px;font-size:9px;color:#111114; white-space:nowrap;flex:none;font-variant-numeric:tabular-nums} .lb-res{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:none} .lb-card{border:1px solid #EDEDED;border-radius:9px;padding:7px 9px} .lb-cl{display:flex;align-items:center;gap:4px;font-size:7.5px;color:#6B6B6B} .lb-cl svg{width:9px;height:9px} .lb-cv{display:block;font-size:14px;font-weight:600;color:#111114;letter-spacing:-.01em; font-variant-numeric:tabular-nums;margin-top:2px} .lb-tab{border:1px solid #EDEDED;border-radius:9px;overflow:hidden;flex:none} .lb-tab table{width:100%;border-collapse:collapse;font-size:9.5px;table-layout:fixed} .lb-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:left;padding:5px 7px} .lb-tab td{padding:5px 7px;border-top:1px solid #F0F0F0;color:#4F4F4F; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-tab th.num,.lb-tab td.num{text-align:right} .lb-tab th:first-child,.lb-tab td:first-child{width:26px;text-align:center} /* sem isto as seis colunas dividem igual e o nome do vendedor trunca */ .lb-tab th:nth-child(2){width:31%} .lb-tab th:nth-child(3){width:50px} .lb-tab th:nth-child(4){width:84px} .lb-tab th:last-child{width:23%} .lb-vd{display:flex;align-items:center;gap:6px;min-width:0} .lb-av{width:19px;height:19px;border-radius:50%;background:#F1F1F1;color:#3F3F3F; display:grid;place-items:center;font-size:8px;font-weight:600;flex:none} .lb-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:600;color:#111114} .lb-val{font-weight:600;color:#111114} .lb-meta{display:inline-flex;align-items:center;gap:4px} .lb-meta svg{width:9px;height:9px;color:#9A9A9A} .lb-pg{display:flex;align-items:center;gap:5px} .lb-bar{flex:1;min-width:0;height:6px;border-radius:99px;background:#EFEFEF;overflow:hidden} .lb-bar i{display:block;height:100%;border-radius:99px;background:#111114} .lb-pc{font-size:8.5px;font-weight:600;color:#111114;flex:none} .lb-linha--alvo td{transition:background .3s} .vin-vd4:hover .lb-linha--alvo td{background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .vd1-note{top:4px;right:52px} .vd1-note::after{left:auto;right:16px} .vd2-note{top:4px;left:40px} .vd3-note{top:4px;right:52px} .vd3-note::after{left:auto;right:16px} .vd4-note{top:4px;right:52px} .vd4-note::after{left:auto;right:16px} .vin-vd1 .cur--yellow{left:34px;top:300px} .vin-vd1:hover .cur--yellow{left:206px;top:252px} .vin-vd2 .cur--lilac{left:calc(100% - 78px);top:318px} .vin-vd2:hover .cur--lilac{left:186px;top:236px} .vin-vd3 .cur--peach{left:170px;top:318px} .vin-vd3:hover .cur--peach{left:calc(100% - 172px);top:214px} .vin-vd4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-vd4:hover .cur--yellow{left:calc(100% - 168px);top:236px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-vd2 .tw-card:last-of-type{display:none} .vin-vd2 .tw-grid{grid-template-columns:repeat(2,1fr)} .vin-vd3 .tk-it:last-of-type{display:none} .vin-vd4 .lb-tab tbody tr:last-child{display:none} } @media (max-width:940px){ .vin-vd1 .cur--yellow{top:226px} .vin-vd1:hover .cur--yellow{left:206px;top:190px} .vin-vd1 .kb-col:first-of-type .kb-card:last-of-type{display:none} } @media (max-width:820px){ .vin-vd2 .tw-grid{grid-template-columns:repeat(2,1fr)} .vin-vd2 .tw-card:last-of-type{display:none} } @media (max-width:640px){ .vin-vd2 .tw-grid{grid-template-columns:1fr} .vin-vd2 .tw-card:nth-of-type(n+3){display:none} .vin-vd3 .dr-aside{display:none} .vin-vd4 .lb-tab th:nth-child(3),.vin-vd4 .lb-tab td:nth-child(3){display:none} } @media (max-width:520px){ .vin-vd4 .lb-tab th:nth-child(5),.vin-vd4 .lb-tab td:nth-child(5){display:none} .vin-vd4 .lb-res{grid-template-columns:repeat(2,1fr)} } @media (max-width:420px){ .vin-vd2 .tw-d{display:none} .vin-vd3 .tk-it:last-of-type{display:none} .vin-vd4 .lb-tab tbody tr:nth-last-child(-n+2){display:none} } @media (hover:none){ .vin-vd .cur{display:none} .vin-vd1 .kb-col--alvo{background:#FBFFE8} .vin-vd2 .tw-card--alvo{border-color:#B9D400;background:#FBFFE8} .vin-vd3 .tk-it--alvo{border-color:#B9D400;background:#FBFFE8} .vin-vd4 .lb-linha--alvo td{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-vd .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE ATENDIMENTO (/casos-de-uso/atendimento/) Fontes: v2/chat (ConversationList + ThreadView + ContactDetailsPanel, aqui com as tres colunas ao mesmo tempo e com as abas Detalhes / Timeline / Auto), v2/Header/CommandPalette (o ⌘K, com o placeholder "Buscar contatos, negocios, empresas ou comandar..." e os grupos Resultados, Favoritos, Navegacao e Acoes rapidas) e as duas abas do painel que nunca tinham aparecido: "Workflows em curso" / "Cadencias" (Auto) e a Timeline que junta negocios e atividades do contato. ============================================================ */ .vin-ate .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. caixa de entrada inteira (hero) -- */ /* tres colunas so cabem se o painel sangrar junto (padding-right:0) e as duas laterais afinarem; o cabecalho da conversa perde o telefone e o selo de canal, que aqui nao teriam largura */ .ate1{display:flex;height:100%;min-height:0;padding-right:0} .ate1 .ib-lista{width:138px} .ate1 .ib-dp{width:152px} .ate1 .tv-n{font-size:9.5px} .ate1 .tv-f,.ate1 .tv-badge{display:none} .ate1 .tv-bal{max-width:92%} .ate1 .dp-aba{font-size:7px} .ate1 .cv-l3{font-size:8px} /* com o contador de nao lidas na linha, o selo de sem dono roubava o nome do contato: aqui fica so o contador e o avatar do responsavel */ .ate1 .cv-livre{display:none} .vin-ate1 .cv-row:nth-of-type(2){transition:background .3s} .vin-ate1:hover .cv-row:nth-of-type(2){background:#F7F9F4} /* -- 2. busca global (⌘K) -- */ .vin-ate2 .vin-panel{padding:0} .ate2{position:relative;display:flex;height:100%;min-height:0;padding-right:52px} .ate2 .ib-lista{width:auto;flex:1;border-right:0} /* o dialog do cmdk, centrado sobre a tela */ .pl{position:absolute;z-index:4;left:26px;right:78px;top:26px;background:#fff; border:1px solid #E0E0E0;border-radius:11px;box-shadow:0 22px 48px rgba(2,28,22,.22); display:flex;flex-direction:column;overflow:hidden} .pl-busca{display:flex;align-items:center;gap:7px;padding:9px 11px; border-bottom:1px solid #EFEFEF} .pl-busca svg{width:12px;height:12px;color:#6B6B6B;flex:none} .pl-q{flex:1;min-width:0;font-size:10.5px;color:#111114} /* o cmdk mostra o placeholder OU o que foi digitado, nunca os dois; aqui a busca esta preenchida, entao sobra o cursor */ .pl-car{display:inline-block;width:1px;height:11px;background:#111114; vertical-align:-1px;margin-left:1px} .pl-esc{border:1px solid #E6E6E6;background:#F5F5F5;border-radius:4px;padding:0 5px; font-size:7.5px;color:#6B6B6B;font-family:ui-monospace,Menlo,monospace;flex:none} .pl-body{padding:5px;display:flex;flex-direction:column;gap:1px} .pl-g{display:block;padding:6px 8px 3px;font-size:7px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#6B6B6B} .pl-it{display:flex;align-items:center;gap:7px;border-radius:7px;padding:4px 8px; transition:background .3s} .pl-it--on{background:#F2F4EF} .pl-it > svg{width:12px;height:12px;color:#5F5F5F;flex:none} .pl-l{flex:1;min-width:0;font-size:10px;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl-s{font-size:8.5px;color:#6B6B6B;flex:none; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px} .vin-ate2:hover .pl-it--alvo{background:#F2F4EF} /* -- 3. aba Auto do painel -- */ .ate3{display:flex;height:100%;min-height:0;padding-right:52px} .ate3 .ib-dp{width:180px} .au-cap{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;color:#111114; margin-top:3px} .au-cap svg{width:10px;height:10px;color:#6B6B6B;flex:none} .au-it{border:1px solid #EDEDED;border-radius:7px;background:#fff;padding:5px 7px; transition:border-color .3s,background .3s} .au-n{display:block;font-size:9px;font-weight:600;color:#111114; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .au-m{display:block;font-size:7.5px;color:#6B6B6B;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .au-vazio{display:block;font-size:8px;color:#6B6B6B} .vin-ate3 .ia-msgs{padding-right:11px} .vin-ate3 .pa-bt,.vin-ate3 .pa-assumir{transition:background .3s,color .3s,box-shadow .3s} .vin-ate3:hover .pa-assumir{background:#3F3F3F;box-shadow:0 0 0 3px rgba(213,254,0,.35)} .vin-ate3:hover .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-ate3:hover .pa-bt .pa-on{display:none} .vin-ate3:hover .pa-bt .pa-off{display:inline} .vin-ate3:hover .pa-bt svg:first-of-type{display:none} .vin-ate3:hover .pa-bt svg + svg{display:block} /* -- 4. aba Timeline do painel -- */ .ate4{display:flex;height:100%;min-height:0;padding-right:52px} .ate4 .ib-dp{width:198px} .tll-cap{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:600;color:#111114} .tll-cap svg{width:10px;height:10px;color:#6B6B6B;flex:none} .tll-it{display:flex;align-items:flex-start;gap:6px;border:1px solid #EDEDED;border-radius:7px; background:#fff;padding:5px 7px;transition:border-color .3s,background .3s} .tll-ic{color:#6B6B6B;flex:none;margin-top:1px} .tll-ic svg{width:11px;height:11px;display:block} .tll-ic--ok{color:#128C4A} .tll-x{min-width:0;flex:1} .tll-tt{display:block;font-size:8.5px;font-weight:600;color:#111114;line-height:1.3} .tll-sb{display:block;font-size:7.5px;color:#6B6B6B;margin-top:1px} .tll-qd{display:block;font-size:7.5px;color:#6B6B6B} .tll-ex{color:#9A9A9A;flex:none} .tll-ex svg{width:9px;height:9px;display:block} .vin-ate4:hover .tll-it--alvo{border-color:#B9D400;background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .ate1-note{top:4px;right:52px} .ate1-note::after{left:auto;right:16px} .ate2-note{top:4px;left:40px} .ate3-note{top:4px;right:52px} .ate3-note::after{left:auto;right:16px} .ate4-note{top:4px;right:52px} .ate4-note::after{left:auto;right:16px} .vin-ate1 .cur--yellow{left:calc(100% - 78px);top:302px} .vin-ate1:hover .cur--yellow{left:96px;top:196px} .vin-ate2 .cur--lilac{left:calc(100% - 78px);top:318px} .vin-ate2:hover .cur--lilac{left:calc(100% - 214px);top:150px} .vin-ate3 .cur--peach{left:calc(100% - 78px);top:318px} .vin-ate3:hover .cur--peach{left:calc(100% - 154px);top:30px} .vin-ate4 .cur--yellow{left:150px;top:250px} .vin-ate4:hover .cur--yellow{left:calc(100% - 200px);top:150px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-ate1 .tv-row:nth-last-of-type(-n+1){display:none} .vin-ate4 .tll-it:last-of-type{display:none} } @media (max-width:940px){ .vin-ate1 .cv-row:last-of-type{display:none} .vin-ate1 .cur--yellow{top:226px} .vin-ate1:hover .cur--yellow{left:96px;top:170px} } @media (max-width:820px){ .vin-ate1 .ib-dp{display:none} } @media (max-width:700px){ .vin-ate4 .tll-it:last-of-type{display:none} } @media (max-width:640px){ .vin-ate1 .ib-lista{display:none} .vin-ate3 .ib-tv{display:none} .vin-ate3 .ib-dp{width:auto;flex:1} .vin-ate4 .ib-tv{display:none} .vin-ate4 .ib-dp{width:auto;flex:1} .vin-ate2 .pl{left:14px;right:60px} } @media (max-width:520px){ .vin-ate2 .pl-s{display:none} } @media (max-width:420px){ .vin-ate2 .pl-it:nth-last-of-type(-n+2){display:none} } @media (hover:none){ .vin-ate .cur{display:none} .vin-ate1 .cv-row:nth-of-type(2){background:#F7F9F4} .vin-ate2 .pl-it--alvo{background:#F2F4EF} .vin-ate3 .pa-bt{background:#FCF3D6;color:#7A5B00} .vin-ate3 .pa-bt .pa-on,.vin-ate3 .pa-bt svg:first-of-type{display:none} .vin-ate3 .pa-bt .pa-off{display:inline} .vin-ate3 .pa-bt svg + svg{display:block} .vin-ate4 .tll-it--alvo{border-color:#B9D400;background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-ate .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE MARKETING (/casos-de-uso/marketing/) Fontes: analise/atribuicao — a secao "Modelos de atribuicao", com o seletor dos cinco modelos e a dica que muda junto (MODEL_LABELS e MODEL_HINTS), as barras por origem e o rodape "Receita creditada"; configuracoes/lead-scoring (regra com Switch, selo "+N pts" e a linha "campo operador valor"); Workflows/Editor com AB_SPLIT como BranchNode ("N caminho(s)") e o GOAL "Marcar objetivo (conversao)"; e a tabela por origem e por campanha da propria Atribuicao. ============================================================ */ .vin-mk .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. modelos de atribuicao (hero) -- */ .vin-mk1 .vin-panel{padding:12px 0 0 12px} .mk1{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .am{border:1px solid #EDEDED;border-radius:9px;padding:9px 10px;display:flex; flex-direction:column;gap:6px} .am-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .am-t{display:block;font-size:10.5px;font-weight:600;color:#111114} .am-h{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .am-sel{display:flex;align-items:center;justify-content:space-between;gap:5px; border:1px solid #E0E0E0;border-radius:7px;padding:4px 8px;font-size:9px;color:#111114; width:126px;flex:none;transition:border-color .3s,background .3s} .am-sel svg{width:9px;height:9px;color:#6B6B6B;flex:none} .am-l{display:flex;align-items:center;gap:8px} .am-o{width:88px;flex:none;font-size:8.5px;color:#6B6B6B; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .am-b{flex:1;min-width:0;height:15px;border-radius:4px;background:#F3F4F3;overflow:hidden} .am-b i{display:block;height:100%;border-radius:4px;background:#C9EE4E} .am-v{width:72px;flex:none;text-align:right;font-size:8.5px;color:#111114; font-variant-numeric:tabular-nums} .am-tot{display:flex;align-items:center;justify-content:space-between; border-top:1px solid #EFEFEF;padding-top:6px;font-size:9px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums} .vin-mk1:hover .am-sel{border-color:#B9D400;background:#FBFFE8} /* -- 2. pontuacao de lead -- */ .vin-mk2 .vin-panel{padding:12px 0 34px 14px} .ls{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .ls-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .ls-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .ls-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .ls-acoes{display:flex;align-items:center;gap:6px;flex:none} .ls-bt{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 9px; font-size:9px;font-weight:600;white-space:nowrap} .ls-bt svg{width:10px;height:10px} .ls-bt--o{border:1px solid #DDD;color:#111114} .ls-bt--p{background:#111114;color:#fff} .ls-row{display:flex;align-items:center;gap:9px;border:1px solid #EDEDED;border-radius:8px; padding:6px 9px;transition:border-color .3s,background .3s} .ls-sw{width:22px;height:13px;border-radius:99px;background:#111114;position:relative;flex:none} .ls-sw i{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#fff} .ls-sw--off{background:#DCDCDC} .ls-sw--off i{right:auto;left:2px} .ls-x{min-width:0;flex:1} .ls-l1{display:flex;align-items:center;gap:6px} .ls-n{font-size:10px;font-weight:600;color:#111114;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ls-pts{border-radius:99px;padding:0 6px;font-size:8px;font-weight:700;white-space:nowrap; flex:none;background:#EDEDED;color:#3F3F3F} .ls-pts--neg{background:#FBE9E9;color:#B3261E} .ls-c{display:block;font-size:8px;color:#6B6B6B;margin-top:1px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ls-ed{font-size:8.5px;color:#4F4F4F;flex:none} .vin-mk2:hover .ls-row--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 3. fluxo com A/B e objetivo -- */ .vin-mk3 .vin-panel{padding:0} .mk3{display:flex;height:100%;min-height:0} .mk3 .cv{flex:1;min-width:0} .mk3-fluxo{position:absolute;left:50%;top:26px;transform:translateX(-50%);width:294px} .mk3-fluxo .nd{width:168px} .mk3-topo{display:flex;justify-content:center} .mk3-svg{display:block} .mk3-baixo{display:flex;justify-content:space-between} .mk3-baixo .nd{width:136px} .mk3-baixo .nd-t{font-size:10px} .vin-mk3 .cv-ctrl{bottom:45px} .vin-mk3 .nd--goal{border-color:#B9D400} .vin-mk3:hover .nd--goal{background:#FBFFE8} /* -- 4. relatorio por origem e por campanha -- */ .vin-mk4 .vin-panel{padding:12px 0 34px 12px} .mk4{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px} /* -- etiquetas, cursores e coreografia -- */ .mk1-note{top:4px;right:52px} .mk1-note::after{left:auto;right:16px} .mk2-note{top:4px;right:52px} .mk2-note::after{left:auto;right:16px} .mk3-note{top:4px;left:40px} .mk4-note{top:4px;left:40px} .vin-mk1 .cur--yellow{left:calc(100% - 78px);top:302px} .vin-mk1:hover .cur--yellow{left:calc(100% - 130px);top:96px} .vin-mk2 .cur--lilac{left:calc(100% - 78px);top:318px} .vin-mk2:hover .cur--lilac{left:calc(100% - 168px);top:196px} .vin-mk3 .cur--peach{left:calc(100% - 76px);top:318px} .vin-mk3:hover .cur--peach{left:calc(100% - 156px);top:280px} .vin-mk4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-mk4:hover .cur--yellow{left:calc(100% - 168px);top:196px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-mk1 .am-l:nth-of-type(5){display:none} .vin-mk2 .ls-row:last-of-type{display:none} .vin-mk4 .at-tab:last-of-type tbody tr:last-child{display:none} } @media (max-width:820px){ .vin-mk3 .mk3-fluxo{width:262px} .vin-mk3 .mk3-baixo .nd{width:122px} } @media (max-width:700px){ .vin-mk2 .ls-row:last-of-type{display:none} .vin-mk4 .at-tab--org tbody tr:last-child{display:none} } /* .am-l divide o mesmo pai com .am-cab e .am-tot, entao a contagem por tipo vai do inicio: as barras sao os filhos 2 a 5 */ @media (max-width:940px){ /* empilhado o quadro cai para 280px: sai o funil e o cursor sobe */ .vin-mk1 .at-funil{display:none} .vin-mk1 .cur--yellow{top:226px} .vin-mk1:hover .cur--yellow{left:calc(100% - 130px);top:80px} } @media (max-width:560px){ .vin-mk1 .am-l:nth-of-type(5){display:none} } @media (max-width:400px){ /* os quatro indicadores em 4 colunas quebram os valores em duas linhas; o bloco de modelos ja carrega a receita creditada */ .vin-mk1 .at-kpis{display:none} } @media (max-width:640px){ .vin-mk1 .am-l:nth-of-type(5){display:none} .vin-mk4 .at-tab--org,.vin-mk4 .at-org-t{display:none} } @media (max-width:560px){ .vin-mk2 .ls-c{display:none} .vin-mk3 .mk3-fluxo{width:224px} .vin-mk3 .mk3-baixo .nd{width:104px} .vin-mk4 .at-tab th:nth-child(7),.vin-mk4 .at-tab td:nth-child(7){display:none} } @media (max-width:480px){ .vin-mk1 .am-o{width:66px} .vin-mk1 .am-v{width:60px} .vin-mk2 .ls-acoes .ls-bt--o{display:none} .vin-mk4 .at-tab th:nth-child(5),.vin-mk4 .at-tab td:nth-child(5){display:none} } @media (max-width:400px){ .vin-mk3 .mk3-baixo{display:none} .vin-mk4 .at-kpis{grid-template-columns:repeat(2,1fr)} .vin-mk4 .at-tab:last-of-type tbody tr:nth-child(n+2){display:none} } @media (hover:none){ .vin-mk .cur{display:none} .vin-mk1 .am-sel{border-color:#B9D400;background:#FBFFE8} .vin-mk2 .ls-row--alvo{border-color:#B9D400;background:#FBFFE8} .vin-mk3 .nd--goal{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-mk .cur{transition:none} } /* ============================================================ VINHETAS DA PAGINA DE FINANCEIRO (/casos-de-uso/financeiro/) Fontes: analise/comissoes ("Comissao por vendedor no mes, com base nas regras e nos negocios ganhos.", os cartoes Comissao total / Taxa padrao, a tabela Vendedor/Ganhos/Valor ganho/Taxa/Comissao e a caixa de regras com o aviso "A regra Padrao (todos) vale para todos os vendedores...") e analise/financeiro ("Extrato, transacoes e disparos do workspace.", abas Extrato/Transacoes/Disparos, o par de datas De/Ate e as colunas Data/Tipo/Origem/Saldo apos/Saldo antes, com os use types SENT, IA e PLAN_RENEWAL). O bloco de receita por periodo reaproveita as pecas de widget das vinhetas de relatorios. ============================================================ */ .vin-fi .vin-panel{padding:0 0 34px;display:flex;flex-direction:column} /* -- 1. comissao por vendedor (hero) -- */ .vin-fi1 .vin-panel{padding:12px 0 0 12px} .cm{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .cm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex:none} .cm-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .cm-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .cm-dir{display:flex;align-items:center;gap:6px;flex:none} .cm-mes{border:1px solid #E0E0E0;border-radius:7px;padding:3px 8px;font-size:9px;color:#111114; white-space:nowrap;font-variant-numeric:tabular-nums} .cm-reg{display:inline-flex;align-items:center;gap:4px;border:1px solid #DDD;border-radius:6px; padding:3px 9px;font-size:9px;font-weight:600;color:#111114;white-space:nowrap} .cm-reg svg{width:10px;height:10px} .cm-res{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:none} .cm-card{border:1px solid #EDEDED;border-radius:9px;padding:7px 9px} .cm-cl{display:flex;align-items:center;gap:4px;font-size:7.5px;color:#6B6B6B} .cm-cl svg{width:9px;height:9px} .cm-cv{display:block;font-size:14px;font-weight:600;color:#111114;letter-spacing:-.01em; font-variant-numeric:tabular-nums;margin-top:2px} .cm-tab{border:1px solid #EDEDED;border-radius:9px;overflow:hidden;flex:none} .cm-tab table{width:100%;border-collapse:collapse;font-size:9.5px;table-layout:fixed} .cm-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:right;padding:5px 7px} .cm-tab th:first-child{text-align:left;width:34%} .cm-tab td{padding:5px 7px;border-top:1px solid #F0F0F0;color:#4F4F4F;text-align:right; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cm-tab td:first-child{text-align:left;color:#111114;font-weight:600} .cm-tab td.cm-b{font-weight:700;color:#111114} .cm-linha--alvo td{transition:background .3s} .vin-fi1:hover .cm-linha--alvo td{background:#FBFFE8} /* -- 2. receita do mes com detalhe por vendedor -- */ .vin-fi2 .vin-panel{padding:12px 0 34px 12px} .fi2{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .vin-fi2 .wg{grid-column:auto} .rv-tab{border:1px solid #EDEDED;border-radius:9px;overflow:hidden;flex:none} .rv-tab table{width:100%;border-collapse:collapse;font-size:9.5px;table-layout:fixed} .rv-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:right;padding:5px 7px} .rv-tab th:first-child{text-align:left;width:38%} .rv-tab td{padding:5px 7px;border-top:1px solid #F0F0F0;color:#4F4F4F;text-align:right; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rv-tab td:first-child{text-align:left;color:#111114;font-weight:600} .rv-tab td.rv-b{font-weight:700;color:#111114} /* -- 3. regras de comissao -- */ .vin-fi3 .vin-panel{padding:12px 0 34px 14px} .rgc{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:7px} .rgc-t{display:block;font-size:12px;font-weight:600;color:#111114} .rgc-aviso{display:block;font-size:8.5px;color:#6B6B6B;line-height:1.45} .rgc-aviso b{font-weight:700;color:#111114} .rgc-row{display:flex;align-items:center;gap:6px;border:1px solid #EDEDED;border-radius:8px; padding:6px 8px;transition:border-color .3s,background .3s} .rgc-nome{flex:1.2;min-width:0;border:1px solid #E0E0E0;border-radius:6px;padding:3px 7px; font-size:9.5px;color:#111114;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rgc-vd{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px; border:1px solid #E0E0E0;border-radius:6px;padding:3px 7px;font-size:9.5px;color:#111114} .rgc-vd svg{width:9px;height:9px;color:#6B6B6B;flex:none} .rgc-vd b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rgc-tx{display:flex;align-items:center;gap:3px;flex:none} .rgc-tx span{border:1px solid #E0E0E0;border-radius:6px;padding:3px 6px;font-size:9.5px; color:#111114;font-variant-numeric:tabular-nums;width:34px;text-align:right} .rgc-tx em{font-style:normal;font-size:9px;color:#6B6B6B} .rgc-sw{width:22px;height:13px;border-radius:99px;background:#111114;position:relative;flex:none} .rgc-sw i{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#fff} .rgc-x{color:#9A9A9A;flex:none} .rgc-x svg{width:11px;height:11px;display:block} .rgc-add{display:inline-flex;align-items:center;gap:4px;background:#111114;color:#fff; border-radius:6px;padding:3px 9px;font-size:9px;font-weight:600;white-space:nowrap; align-self:flex-end} .rgc-add svg{width:10px;height:10px} .vin-fi3:hover .rgc-row--alvo{border-color:#B9D400;background:#FBFFE8} /* -- 4. extrato do espaco de trabalho -- */ .vin-fi4 .vin-panel{padding:12px 0 34px 12px} .ex{display:flex;flex-direction:column;min-height:0;flex:1;padding-right:52px;gap:8px} .ex-head{display:block;flex:none} .ex-t{display:block;font-size:12.5px;font-weight:600;color:#111114;letter-spacing:-.01em} .ex-d{display:block;font-size:8.5px;color:#6B6B6B;margin-top:1px} .ex-datas{display:flex;align-items:flex-end;gap:8px;flex:none} .ex-dg{display:flex;flex-direction:column;gap:3px} .ex-dl{font-size:8px;color:#6B6B6B} .ex-di{border:1px solid #E0E0E0;border-radius:7px;padding:3px 8px;font-size:9px;color:#111114; font-variant-numeric:tabular-nums;white-space:nowrap} .ex-saldo{margin-left:auto;border:1px solid #E0E0E0;border-radius:99px;padding:3px 9px; font-size:9px;color:#4F4F4F;white-space:nowrap} .ex-saldo b{font-weight:700;color:#111114;font-variant-numeric:tabular-nums} .ex-abas{display:flex;gap:3px;background:#F3F4F3;border-radius:8px;padding:2px; width:max-content;max-width:100%;flex:none} .ex-aba{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:3px 9px; border-radius:6px;color:#616161;white-space:nowrap} .ex-aba svg{width:10px;height:10px} .ex-aba--on{background:#fff;color:#111114;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} .ex-tab{border:1px solid #EDEDED;border-radius:9px;overflow:hidden;flex:none} .ex-tab table{width:100%;border-collapse:collapse;font-size:9.5px;table-layout:fixed} .ex-tab th{background:#F7F7F7;color:#6B6B6B;font-size:7px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;text-align:right;padding:5px 7px} .ex-tab th:first-child,.ex-tab th:nth-child(2),.ex-tab th:nth-child(3){text-align:left} .ex-tab th:first-child{width:27%} .ex-tab td{padding:5px 7px;border-top:1px solid #F0F0F0;color:#4F4F4F;text-align:right; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ex-tab td:first-child,.ex-tab td:nth-child(2),.ex-tab td:nth-child(3){text-align:left} .ex-tab td.ex-b{font-weight:700;color:#111114} .ex-tp{display:inline-flex;align-items:center;gap:4px} .ex-tp svg{width:10px;height:10px;flex:none} .ex-tp--in{color:#116330} .ex-tp--out{color:#B3261E} .ex-org{border-radius:99px;padding:0 6px;font-size:7.5px;font-weight:700;background:#EDEDED; color:#3F3F3F;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .ex-linha--alvo td{transition:background .3s} .vin-fi4:hover .ex-linha--alvo td{background:#FBFFE8} /* -- etiquetas, cursores e coreografia -- */ .fi1-note{top:4px;right:52px} .fi1-note::after{left:auto;right:16px} .fi2-note{top:4px;right:52px} .fi2-note::after{left:auto;right:16px} .fi3-note{top:4px;left:40px} .fi4-note{top:4px;right:52px} .fi4-note::after{left:auto;right:16px} .vin-fi1 .cur--yellow{left:calc(100% - 78px);top:302px} .vin-fi1:hover .cur--yellow{left:calc(100% - 168px);top:230px} .vin-fi2 .cur--lilac{left:calc(100% - 78px);top:318px} .vin-fi2:hover .cur--lilac{left:calc(100% - 168px);top:250px} .vin-fi3 .cur--peach{left:calc(100% - 76px);top:318px} .vin-fi3:hover .cur--peach{left:calc(100% - 176px);top:196px} .vin-fi4 .cur--yellow{left:calc(100% - 78px);top:318px} .vin-fi4:hover .cur--yellow{left:calc(100% - 168px);top:224px} /* Faixa estreita de duas colunas e telas pequenas. */ @media (max-width:1200px) and (min-width:941px){ .vin-fi1 .cm-tab tbody tr:last-child{display:none} .vin-fi3 .rgc-row:last-of-type{display:none} .vin-fi4 .ex-tab tbody tr:last-child{display:none} } @media (max-width:940px){ .vin-fi1 .cur--yellow{top:226px} .vin-fi1:hover .cur--yellow{left:calc(100% - 168px);top:180px} .vin-fi1 .cm-tab tbody tr:last-child{display:none} } @media (max-width:700px){ .vin-fi3 .rgc-row:last-of-type{display:none} .vin-fi4 .ex-tab tbody tr:last-child{display:none} } @media (max-width:640px){ .vin-fi4 .ex-tab th:nth-child(5),.vin-fi4 .ex-tab td:nth-child(5){display:none} .vin-fi2 .rv-tab tbody tr:last-child{display:none} } @media (max-width:560px){ .vin-fi1 .cm-tab th:nth-child(2),.vin-fi1 .cm-tab td:nth-child(2){display:none} .vin-fi3 .rgc-nome{display:none} .vin-fi4 .ex-datas{display:none} } @media (max-width:480px){ .vin-fi1 .cm-tab th:nth-child(4),.vin-fi1 .cm-tab td:nth-child(4){display:none} .vin-fi4 .ex-tab th:nth-child(4),.vin-fi4 .ex-tab td:nth-child(4){display:none} .vin-fi2 .rv-tab th:nth-child(3),.vin-fi2 .rv-tab td:nth-child(3){display:none} } @media (max-width:420px){ /* o quadro empilhado tem 280px: sobram os dois primeiros vendedores */ .vin-fi1 .cm-tab tbody tr:nth-child(n+3){display:none} } @media (max-width:400px){ .vin-fi3 .rgc-tx em{display:none} } @media (hover:none){ .vin-fi .cur{display:none} .vin-fi1 .cm-linha--alvo td{background:#FBFFE8} .vin-fi3 .rgc-row--alvo{border-color:#B9D400;background:#FBFFE8} .vin-fi4 .ex-linha--alvo td{background:#FBFFE8} } @media (prefers-reduced-motion:reduce){ .vin-fi .cur{transition:none} } /* ==== /sobre/ — plataforma e governança (telas reais, nunca desenhadas) ==== */ .vin-sbr .vin-panel{padding:0} .vin-sbr code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px; background:#F1F2F1;border-radius:3px;padding:1px 4px;color:#5B6A66} /* cabeçalho de tela de configurações, repetido em 3 vinhetas */ .sbr-hd{display:flex;align-items:flex-start;gap:10px;padding:13px 14px 11px; border-bottom:1px solid #EDEEED} .sbr-hx{flex:1;min-width:0} .sbr-h1{display:block;font-size:13px;font-weight:600;color:#111114;letter-spacing:-.01em} .sbr-h2{display:block;font-size:10.5px;color:#6B7671;line-height:1.45;margin-top:2px} .sbr-sel,.sbr-bt{display:inline-flex;align-items:center;gap:5px;flex:none; border:1px solid #E2E4E2;border-radius:7px;padding:5px 9px;font-size:10.5px; font-weight:500;color:#3F4B46;background:#fff;white-space:nowrap} .sbr-bt{background:#111114;border-color:#111114;color:#fff;font-weight:600} .sbr-hd svg{width:12px;height:12px;flex:none} /* ---- 1. a plataforma inteira: casca do app ---- */ .sbr-shell{display:flex;height:100%;min-height:0} .sbr-lat{width:118px;flex:none;background:#FAFBFA;border-right:1px solid #EDEEED; padding:10px 8px;display:flex;flex-direction:column;gap:1px;overflow:hidden} .sbr-ws{display:block;font-size:10.5px;font-weight:700;color:#111114; padding:2px 6px 8px;letter-spacing:-.01em} .sbr-mi{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:6px; font-size:10.5px;color:#59635E;white-space:nowrap} .sbr-mi svg{width:12px;height:12px;flex:none;opacity:.8} .sbr-mi--on{background:#EDF0EE;color:#111114;font-weight:600} .sbr-mi--on svg{opacity:1;color:#5F7C00} .sbr-area{flex:1;min-width:0;display:flex;flex-direction:column} .sbr-top{padding:9px 12px;border-bottom:1px solid #EDEEED} .sbr-busca{display:flex;align-items:center;gap:6px;border:1px solid #E7E9E7; border-radius:7px;padding:5px 9px;font-size:10.5px;color:#66706B;max-width:210px} .sbr-busca svg{width:11px;height:11px;flex:none} .sbr-corpo{padding:11px 12px;display:flex;flex-direction:column;min-width:0} .sbr-ola{font-size:13px;font-weight:600;color:#111114} .sbr-sub{font-size:10px;color:#66706B;margin-top:1px} .sbr-meta{background:#111114;border-radius:9px;padding:10px 12px;margin-top:9px;color:#fff} .sbr-meta-t{display:block;font-size:8.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#A9B4AF} .sbr-meta b{display:block;font-size:12.5px;font-weight:600;margin-top:4px;line-height:1.25} .sbr-meta-d{display:block;font-size:9.5px;color:#A9B4AF;margin-top:3px} .sbr-kpis{display:flex;gap:7px;margin-top:9px} .sbr-kpi{flex:1;min-width:0;border:1px solid #EDEEED;border-radius:8px;padding:7px 9px} .sbr-kpi b{display:block;font-size:11.5px;font-weight:600;color:#111114; font-variant-numeric:tabular-nums;white-space:nowrap} .sbr-kpi i{display:block;font-style:normal;font-size:8.5px;color:#66706B; text-transform:uppercase;letter-spacing:.06em;margin-top:2px} .sbr-funil{border:1px solid #EDEEED;border-radius:8px;padding:9px 10px;margin-top:8px} .sbr-ft{display:block;font-size:10px;font-weight:600;color:#111114;margin-bottom:8px} .sbr-fbs{display:flex;align-items:flex-end;gap:12px;height:52px} .sbr-fb{flex:1;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;height:100%;gap:3px} .sbr-fb i{width:100%;max-width:26px;background:#3B3F3D;border-radius:3px 3px 0 0;display:block} .sbr-fb b{font-size:9px;font-weight:600;color:#111114} .sbr-fb u{font-size:8px;color:#66706B;text-decoration:none;white-space:nowrap} .sbr-fb:last-child i{background:#12B981} /* ---- 2. trilha de auditoria ---- */ .sbr-logs{padding:9px 12px;display:flex;flex-direction:column;gap:6px;min-width:0} .sbr-log{display:flex;align-items:flex-start;gap:10px;border:1px solid #EDEEED; border-radius:8px;padding:8px 10px} .sbr-lx{flex:1;min-width:0} .sbr-lt{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#111114} .sbr-api{display:inline-flex;align-items:center;gap:3px;border:1px solid #E2E4E2; border-radius:99px;padding:0 5px;font-size:8px;font-weight:700;letter-spacing:.05em; color:#5B6A66;text-transform:uppercase} .sbr-api svg{width:8px;height:8px} .sbr-lp{display:block;font-size:9.5px;color:#66706B;margin-top:3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sbr-lp b{color:#3F4B46;font-weight:600} .sbr-ld{flex:none;text-align:right;font-size:9px;color:#66706B; font-variant-numeric:tabular-nums;white-space:nowrap} .sbr-ld i{display:block;font-style:normal;font-size:8px;margin-top:2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* ---- 3. tokens de API com escopo ---- */ .sbr-toks{padding:9px 12px;display:flex;flex-direction:column;gap:7px;min-width:0} .sbr-tok{border:1px solid #EDEEED;border-radius:8px;padding:9px 10px} .sbr-tok--off{background:#FAFBFA} .sbr-tok--off .sbr-tk1 b{color:#66706B} .sbr-tk1{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .sbr-tk1 b{font-size:11px;font-weight:600;color:#111114} .sbr-est{border-radius:99px;padding:1px 7px;font-size:8.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase} .sbr-est--on{background:#111114;color:#fff} .sbr-est--off{background:#FBE9E7;color:#A3221B} .sbr-ws2{display:inline-flex;align-items:center;border:1px solid #E2E4E2;border-radius:99px; padding:1px 7px;font-size:8.5px;color:#6B7671} .sbr-escs{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px} .sbr-esc{background:#F1F3F1;border-radius:5px;padding:2px 6px;font-size:9px;color:#3F4B46} .sbr-tkr{display:block;font-size:9px;color:#66706B;margin-top:7px; font-variant-numeric:tabular-nums} /* ---- 4. chat de simulação da IA ---- */ .sbr-sheet{display:flex;flex-direction:column;height:100%;min-height:0} .sbr-sh{padding:12px 14px 11px;border-bottom:1px solid #EDEEED} .sbr-sh1{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#111114} .sbr-sh1 svg{width:13px;height:13px;color:#5F7C00;flex:none} .sbr-sh2{display:block;font-size:10px;color:#6B7671;line-height:1.45;margin-top:3px} .sbr-conv{flex:1;min-height:0;padding:11px 14px;display:flex;flex-direction:column; gap:7px;align-items:flex-start;overflow:hidden} .sbr-msg{max-width:84%;border-radius:12px;padding:7px 10px;font-size:10.5px;line-height:1.5} .sbr-msg--eu{align-self:flex-end;background:#D5FE00;color:#1B2A0A;border-bottom-right-radius:4px} .sbr-msg--ia{background:#F1F3F1;color:#25302B;border-bottom-left-radius:4px} .sbr-pens{display:inline-flex;align-items:center;gap:6px;color:#66706B} .sbr-pens svg{width:11px;height:11px} .sbr-comp{border-top:1px solid #EDEEED;padding:9px 14px 11px} .sbr-ref{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:#66706B; margin-bottom:7px} .sbr-ref svg{width:10px;height:10px} .sbr-comp .sbr-campo{display:inline-block;width:calc(100% - 40px);vertical-align:middle; border:1px solid #E2E4E2;border-radius:8px;padding:7px 10px;font-size:10px;color:#66706B; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sbr-env{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle; width:30px;height:30px;margin-left:6px;border-radius:8px;background:#111114;color:#fff} .sbr-env svg{width:13px;height:13px} /* ---- 5. catálogo de integrações e o que fica de fora ---- */ .sbr-ints{padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:7px} .sbr-int{border:1px solid #EDEEED;border-radius:8px;padding:9px 10px;min-width:0} .sbr-ii{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px; border-radius:6px;background:#F4F6F4;color:#3F4B46} .sbr-ii svg{width:13px;height:13px} .sbr-in{display:block;font-size:10.5px;font-weight:600;color:#111114;margin-top:7px} .sbr-ic2{display:block;font-size:9px;color:#66706B;margin-top:1px} .sbr-ie{display:inline-block;margin-top:7px;border-radius:99px;padding:1px 7px; font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .sbr-ie--on{background:#E7F6EE;color:#0F6B45} .sbr-ie--off{background:#111114;color:#fff} .sbr-ie--soon{background:#F1F3F1;color:#66706B} .sbr-resto{margin:2px 12px 12px;border:1px dashed #D3D8D5;border-radius:8px; padding:9px 10px;background:#FAFBFA} .sbr-rt{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#111114} .sbr-rt svg{width:12px;height:12px;flex:none;color:#5F7C00} .sbr-rl2{display:block;font-size:9.5px;color:#6B7671;margin-top:4px;line-height:1.5} .sbr-rl2 b{color:#3F4B46;font-weight:600} /* etiquetas na faixa de cima, fora do painel, como nas outras páginas */ .sbr1-note{top:4px;left:40px} .sbr2-note{top:4px;right:52px} .sbr2-note::after{left:auto;right:16px} .sbr3-note{top:4px;left:40px} .sbr4-note{top:4px;right:52px} .sbr4-note::after{left:auto;right:16px} .sbr5-note{top:4px;left:40px} @media (max-width:940px){ /* o hero empilha e o painel encurta: o funil não cabe mais */ .sbr-lat{width:96px} .sbr-funil{display:none} .sbr-ints{grid-template-columns:1fr} .sbr-int:nth-child(n+3){display:none} } @media (max-width:560px){ .sbr-kpi:nth-child(3){display:none} .sbr-log:nth-child(n+4){display:none} .sbr-tok:nth-child(3){display:none} .sbr-mi:nth-child(n+7){display:none} } @media (max-width:380px){ /* a 320px sobra pouca altura: só a meta e um número cabem */ .sbr-kpis{display:none} .sbr-mi:nth-child(n+5){display:none} } /* ==== vinhetas de produto (duo cards) ==== */ /* Composição "canto de tela" clara (aprovada): recorte tracejado de cantos retos com bastidor cinza, painel branco entrando pelo canto superior- esquerdo, sangrando pela direita e por baixo. UI interna reproduz o app real: Workflows/Editor (index.tsx, Canvas, *Node.tsx) e v2/chat (ConversationList.tsx) — cores/tipos/espessuras extraídos do tema shadcn do frontend (globals.css: primary #021C16, border #E0E0E0, muted #F5F5F5, muted-fg #757575, accent #F0F0F0, success #22C55E, fonte Roboto). */ .duo .dcard .media{overflow:hidden;padding:16px} .vin{ position:relative;height:100%;min-width:0;overflow:hidden; background:#EFF2F0;border:1.5px dashed #C7CDD3;border-radius:0; } /* a "tela": painel branco flutuando, um canto arredondado visível, cortado pela direita e por baixo pelo overflow do .vin */ .vin-panel{ position:absolute;z-index:2;top:26px;left:36px;right:-44px;bottom:-30px; min-width:0;background:#fff;border-radius:14px 0 0 0; box-shadow:0 2px 5px rgba(2,28,22,.12),0 22px 48px rgba(2,28,22,.16); display:flex;flex-direction:column;overflow:hidden; /* o app usa Roboto; aqui a pilha de sistema mais próxima, sem importar */ font-family:Roboto,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; color:#111114; } /* etiqueta de anotação com setinha (linguagem do site, mantém Fustat) */ .vin-note{ position:absolute;z-index:3; font-family:var(--display);font-size:11px;font-weight:800; letter-spacing:.09em;text-transform:uppercase;line-height:1.2; padding:5px 9px;border-radius:6px;white-space:nowrap; } .vin-note::after{ content:"";position:absolute;left:14px;bottom:-11px; width:0;height:0;border:6px solid transparent; } .vin-note--sun{background:var(--sun);color:var(--ink)} .vin-note--sun::after{border-top-color:var(--sun)} .vin-note--soft{background:#E9F2EE;color:var(--ink)} .vin-note--soft::after{border-top-color:#E9F2EE} /* cursores com nome (repouso → deslizam no :hover do card) */ /* escopado em .vin: .cur solto colidia com o cifrão dos cards de preço */ .vin .cur{ position:absolute;z-index:5;width:18px;pointer-events:none; transition:transform .85s cubic-bezier(.22,.75,.25,1),left .85s cubic-bezier(.22,.75,.25,1),top .85s cubic-bezier(.22,.75,.25,1); } .vin .cur svg{ display:block;width:18px;height:18px; stroke:#fff;stroke-width:1.5;stroke-linejoin:round; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); } .vin .cur i{ position:absolute;left:13px;top:17px;font-style:normal; font-family:var(--display);font-size:11px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--ink); padding:3px 8px;border-radius:6px;white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.25); } .vin .cur--yellow svg path{fill:#F4E9A4} .vin .cur--yellow i{background:#F4E9A4} .vin .cur--lilac svg path{fill:#DFCEF3} .vin .cur--lilac i{background:#DFCEF3} .vin .cur--peach svg path{fill:#F7D3B5} .vin .cur--peach i{background:#F7D3B5} /* etiqueta virada para a esquerda. Mesma especificidade da base de propósito: vem depois, então vence no desempate. As tentativas anteriores ficavam ANTES da base e o `left:13px` dela voltava a valer junto com o `right`, colapsando a caixa (16px de largura para 56px de texto). */ .vin .cur--esq i{left:auto;right:13px} /* ---- vinheta 1: editor de workflows (Editor/index.tsx) ---- */ /* header real: voltar + nome/subtítulo à esquerda; badge Ativo + switch */ .wf-head{ flex:none;display:flex;align-items:center;gap:8px; padding:8px 58px 8px 12px;border-bottom:1px solid #EFEFEF;min-width:0; } .wf-back{ flex:none;display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:8px;color:#616161; } .wf-back svg{width:14px;height:14px} .wf-meta{flex:1;min-width:0} .wf-title{ display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em; color:#111114;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wf-sub{ display:block;font-size:11px;color:#616161;line-height:1.2;margin-top:1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .wf-right{flex:none;display:flex;align-items:center;gap:10px} /* Badge shadcn variant=secondary com bg-success/15 */ .wf-badge{ font-size:10px;font-weight:500;color:#111114; background:#DEF6E7;border-radius:999px;padding:3px 9px;line-height:1.2; } /* Switch shadcn ligado: trilho bg-primary, polegar branco à direita */ .wf-switch{ position:relative;flex:none;width:36px;height:20px;border-radius:999px; background:var(--ink);box-shadow:0 1px 2px rgba(2,28,22,.08) inset; } .wf-switch::after{ content:"";position:absolute;top:2px;right:2px;width:16px;height:16px; border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25); } /* tabs shadcn: trilho bg-muted arredondado, ativa branca com sombra */ .wf-tabs{ flex:none;display:flex;padding:5px 58px 5px 12px; border-bottom:1px solid #EFEFEF;min-width:0; } .wtl{ display:flex;gap:2px;background:#F5F5F5;border-radius:10px;padding:2px; white-space:nowrap; } .wtl i{ font-style:normal;font-size:12.5px;font-weight:500;color:#616161; padding:3px 10px;border-radius:8px;line-height:1.4; } .wtl .on{background:#fff;color:#111114;box-shadow:0 1px 2px rgba(0,0,0,.08)} /* canvas real: bg-surface-muted #F5F5F5 + Dots gap 16 size 1 */ .wf-canvas{ position:relative;flex:1;min-height:0;padding:8px 58px 0 16px; background-color:#F5F5F5; background-image:radial-gradient(#D9D9DE 1px,transparent 1px); background-size:16px 16px; } /* botão primário flutuante "Adicionar etapa" (Canvas/index.tsx) */ .wf-add{ position:absolute;top:8px;left:10px;z-index:3; display:flex;align-items:center;gap:6px; height:28px;padding:0 10px;border-radius:8px; background:var(--ink);color:#FAFAFA; font-size:12px;font-weight:500;white-space:nowrap; box-shadow:0 1px 2px rgba(2,28,22,.15); } .wf-add svg{flex:none;width:13px;height:13px} /* fluxo centrado; o último nó corta embaixo (continuação) */ .flow{ display:flex;flex-direction:column;align-items:center; width:min(100%,300px);margin:0 auto; } /* nó real: rounded-xl, border-2 border-border, bg-card, shadow-xs */ .fnode{ position:relative;width:100%;min-width:0; background:#fff;border:2px solid #E0E0E0;border-radius:12px; box-shadow:0 1px 2px rgba(2,28,22,.05); transition:border-color .35s ease .45s; } .fhead{ display:flex;align-items:center;gap:6px; padding:8px 12px 2px; font-size:10px;font-weight:500; letter-spacing:.05em;text-transform:uppercase;color:#616161; } .fhead svg{flex:none;width:12px;height:12px;color:var(--sun)} /* display:block obrigatório: como é , o inline deixava o texto de indentação do HTML criar linhas fantasmas dentro do nó */ .fbody{display:block;padding:0 12px 8px;min-width:0} .ftitle{ display:block;font-size:14px;font-weight:600; color:#111114;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fdesc{ display:block;font-size:12px;color:#757575;line-height:1.3;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* handles de conexão reais: 12px, bg-brand-accent, borda branca 2px */ .fnode::before,.fnode::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); width:12px;height:12px;border-radius:50%; background:var(--sun);border:2px solid #fff;z-index:2; } .fnode::before{top:-8px} .fnode::after{bottom:-8px} .fnode--trigger::before{display:none} .fnode--cond::after{display:none} /* condição: saídas sim/não a 30% e 70%, verde/vermelho (ConditionNode) */ .fh{ position:absolute;bottom:-8px;width:12px;height:12px;border-radius:50%; border:2px solid #fff;z-index:2; } .fh--yes{left:calc(30% - 6px);background:#22C55E} .fh--no{left:calc(70% - 6px);background:#EF4444} .flab{ position:absolute;bottom:-20px;font-size:10px;font-weight:500;line-height:1; } .flab--yes{left:22%;color:#166534} .flab--no{left:62%;color:#B91C1C} /* arestas reais: cinza xyflow com seta fechada na ponta */ .fline{position:relative;width:2px;height:14px;background:#B1B1B7} .fline::after{ content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); border:4px solid transparent;border-top:5px solid #B1B1B7;border-bottom:none; } /* a aresta que sai do handle "sim" desce alinhada aos 30% do nó */ .fline--yes{ align-self:flex-start;margin-left:calc(30% - 1px); height:14px;margin-top:14px; } .fnode--cond .vin-note{top:-16px;left:-6px} /* reação da UI: seleção real = border-brand-accent */ .dcard:hover .vin-flow .fnode--cond{border-color:var(--sun)} /* coreografia (aprovada): repouso no bastidor, pouso nos nós */ .vin-flow .cur--yellow{left:max(10px,calc(50% - 160px));top:240px} .vin-flow .cur--lilac{left:calc(50% + 120px);top:5px} .vin-flow .cur--lilac i{left:auto;right:13px} .dcard:hover .vin-flow .cur--yellow{transform:translate(110px,-25px)} .dcard:hover .vin-flow .cur--lilac{transform:translate(-60px,263px);transition-delay:.18s} /* ---- vinheta 2: inbox (ConversationList.tsx) ---- */ /* header real: "INBOX · {simcard} ⌄" + botão de filtros */ .ibx-head{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:8px;padding:10px 58px 0 12px;min-width:0; } .ibx-sel{display:flex;align-items:center;gap:6px;min-width:0} .ibx-sel em{ font-style:normal;flex:none;font-size:11px;font-weight:400; letter-spacing:.04em;text-transform:uppercase;color:#616161; } .ibx-sel s{text-decoration:none;flex:none;font-size:11px;color:#616161} .ibx-sel b{ min-width:0;font-size:13.5px;font-weight:600;color:#111114; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ibx-sel svg{flex:none;width:13px;height:13px;color:#616161} .ibx-filter{ flex:none;display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:8px;color:#616161; } .ibx-filter svg{width:14px;height:14px} /* busca real: input h-8 com lupa e atalho ⌘K */ .ibx-search{ flex:none;display:flex;align-items:center;gap:7px; height:28px;margin:8px 58px 0 12px;padding:0 8px; border:1px solid #E0E0E0;border-radius:8px;background:#fff;min-width:0; } .ibx-search svg{flex:none;width:13px;height:13px;color:#757575} .ibx-search span{ flex:1;min-width:0;font-size:12px;color:#757575; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ibx-search kbd{ flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px;color:#616161;background:#F5F5F5; border:1px solid #ECECEC;border-radius:4px;padding:1px 4px;line-height:1.4; } /* tabs reais: trilho bg-muted/40 em grade de 4, ativa branca com sombra */ .ibx-tabs{ flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px; margin:8px 58px 10px 12px;padding:2px; background:#FAFAFA;border:1px solid #F0F0F0;border-radius:10px; white-space:nowrap;min-width:0; } .ibx-tabs i{ font-style:normal;font-size:11px;font-weight:500;color:#616161; padding:3px 2px;border-radius:8px;line-height:1.4;text-align:center; overflow:hidden;text-overflow:ellipsis; } .ibx-tabs .on{background:#fff;color:#111114;box-shadow:0 1px 2px rgba(0,0,0,.08)} .ibx-list{flex:1;min-height:0;min-width:0;border-top:1px solid #EFEFEF} /* linha real: p-3, sem separadores entre itens, hover bg-accent */ .ibx-row{ position:relative;display:flex;gap:12px;align-items:flex-start; padding:8px 58px 8px 12px;min-width:0; transition:background .3s ease .45s; } /* avatar real: size-10, fallback bg-muted com iniciais; o pontinho de canal (licença narrativa) mostra de que rede a conversa vem */ .ibx-av{ position:relative;flex:none;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#F5F5F5; font-weight:500;font-size:12px;color:#616161; } .ibx-ch{ position:absolute;right:-1px;bottom:-1px;width:11px;height:11px; border-radius:50%;border:2px solid #fff; } .ibx-ch--wa{background:#25D366} .ibx-ch--ig{background:#E1306C} .ibx-ch--ms{background:#0084FF} .ibx-main{flex:1;min-width:0} /* linha 1: badge de direção (● Inbound) + hora tabular à direita */ .ibx-dir{ display:flex;align-items:center;gap:8px;min-width:0; font-size:10px;font-weight:500;line-height:1.2; } .ibx-dir em{ font-style:normal;display:flex;align-items:center;gap:4px; white-space:nowrap;overflow:hidden; } .ibx-dir em::before{content:"";flex:none;width:6px;height:6px;border-radius:50%} .ibx-dir--in em{color:#166534} .ibx-dir--in em::before{background:#22C55E} .ibx-dir--out em{color:#616161} .ibx-dir--out em::before{background:#9E9E9E} .ibx-dir--done em{color:#065F46} .ibx-dir--done em::before{background:#10B981} .ibx-dir time{ flex:none;margin-left:auto;font-size:10px;color:#616161; font-variant-numeric:tabular-nums; } /* linha 2: nome text-sm + bolinha verde #00CC80 de não lida (real) */ .ibx-name{display:flex;align-items:center;gap:8px;min-width:0;margin-top:2px} .ibx-name b{ min-width:0;font-weight:500;font-size:13.5px;color:#111114; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3; } .ibx-row--unread .ibx-name b{font-weight:600} .ibx-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#00CC80} /* linha 3: prévia + Badge outline com reloginho (tempo em aberto) */ .ibx-bot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;min-width:0} .ibx-prev{ flex:1;min-width:0;font-size:12px;color:#616161;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ibx-open{ flex:none;display:flex;align-items:center;gap:4px; font-size:10px;color:#616161;font-variant-numeric:tabular-nums; border:1px solid #E0E0E0;border-radius:999px;padding:1px 6px;line-height:1.4; } .ibx-open svg{flex:none;width:10px;height:10px} .ibx-row .vin-note{top:-13px;right:64px} .ibx-row .vin-note::after{left:auto;right:16px} /* reação da UI: linha sob o cursor ganha o bg-accent real */ .dcard:hover .vin-inbox .ibx-row:nth-child(1), .dcard:hover .vin-inbox .ibx-row:nth-child(3){background:#F0F0F0} /* coreografia (aprovada): repouso no bastidor à esquerda do painel */ .vin-inbox .cur--peach{left:10px;top:120px} .vin-inbox .cur--yellow{left:8px;top:266px} /* pouso ancorado pela direita: em card largo ou estreito, cai sempre na faixa vazia entre o fim da prévia e os badges */ .dcard:hover .vin-inbox .cur--peach{left:calc(100% - 150px);top:248px} .dcard:hover .vin-inbox .cur--yellow{left:calc(100% - 165px);top:143px;transition-delay:.2s} /* ---- vinhetas compactas (trio da suíte): variante .vin--sm ---- */ /* Cada uma é um FRAGMENTO real com contêiner, composto contra a área visível (esquerda) e correndo para os cortes (direita/baixo). Fontes: Canvas/ActionNode + crm/kanban (dist), v2/analytics/ AnalyticsWidget + DashboardGrid (rep), configuracoes/time (team). */ .trio .tcard .media{overflow:hidden;padding:14px} .vin--sm .vin-panel{ top:18px;left:26px;right:-22px;bottom:-20px; border-radius:12px 0 0 0; box-shadow:0 1px 3px rgba(2,28,22,.10),0 12px 26px rgba(2,28,22,.13); display:block;padding:0; } /* -- vin-dist: nó do workflow → aresta → DealCard do kanban -- */ .dz-canvas{ height:100%;padding:14px 34px 0 14px; display:flex;flex-direction:column;align-items:flex-start; background-color:#F5F5F5; background-image:radial-gradient(#D9D9DE 1px,transparent 1px); background-size:16px 16px; } .dz-node{ position:relative;width:min(100%,256px);min-width:0; background:#fff;border:2px solid #E0E0E0;border-radius:12px; box-shadow:0 1px 2px rgba(2,28,22,.05);padding-bottom:9px; } .dz-node::before,.dz-node::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); width:12px;height:12px;border-radius:50%; background:var(--sun);border:2px solid #fff;z-index:2; } .dz-node::before{top:-8px} .dz-node::after{bottom:-8px} .dz-kick{ display:block;padding:9px 12px 0; font-size:10px;font-weight:500;letter-spacing:.05em; text-transform:uppercase;color:#757575; } .dz-title{ display:block;padding:2px 12px 0;font-size:13.5px;font-weight:600; color:#111114;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* a aresta nasce no handle inferior e morre no card de negócio */ .dz-stem{width:min(100%,256px);display:flex;justify-content:center} .dz-stem i{position:relative;display:block;width:2px;height:26px;background:#B1B1B7} .dz-stem i::after{ content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); border:4px solid transparent;border-top:5px solid #B1B1B7;border-bottom:none; } /* DealCard real: barra de acento 4px na cor do estágio, hover com lift */ .dz-deal{ position:relative;align-self:stretch;margin-right:-34px;min-width:0; background:#fff;border:1px solid rgba(224,224,224,.55);border-radius:10px; padding:9px 44px 11px 14px; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease; } .dz-deal::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:#3B82F6;border-radius:10px 0 0 10px; } .tcard:hover .vin-dist .dz-deal{ border-color:#E0E0E0;box-shadow:0 4px 10px rgba(2,28,22,.10); transform:translateY(-2px); } .dz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0} .dz-top b{ min-width:0;font-size:13px;font-weight:600;color:#111114;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dz-avs{flex:none;display:flex} .dz-avs u{ text-decoration:none;display:flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%;background:#F5F5F5; border:1px solid #fff;font-size:10px;font-weight:600;color:#57635E; margin-left:-6px; } .dz-avs u:first-child{margin-left:0} .dz-value{ display:block;margin-top:5px;font-size:15px;font-weight:700; letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#111114; } .dz-meta{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:10.5px;color:#757575;min-width:0} .dz-meta svg{flex:none;width:11px;height:11px} .dz-meta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dz-clock{ position:absolute;right:44px;bottom:10px; display:flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;background:#22C55E;color:#fff; } .dz-clock svg{width:11px;height:11px} .dz-deal .vin-note{top:-14px;right:44px} .dz-deal .vin-note::after{left:auto;right:14px} /* -- vin-rep: grid de widgets do Dashboards v2 (KPI real + cortados) -- */ .vin-rep .vin-panel{padding:22px 0 0 14px;background:#F5F5F5} .rw-row{display:flex;gap:12px;align-items:stretch} .rw{ position:relative;flex:none;min-width:0; background:#fff;border:1px solid rgba(224,224,224,.5);border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); } .rw--kpi{width:min(100%,252px)} .rw--bars{width:200px} .rw--wide{margin-top:12px;width:min(100%,252px)} .rw-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px 0;min-width:0; } .rw-head em{ font-style:normal;min-width:0;font-size:12.5px;font-weight:500;color:#4B5563; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .rw-acts{flex:none;display:flex;gap:7px;color:#757575} .rw-acts svg{width:13px;height:13px} .rw-val{display:flex;align-items:baseline;gap:7px;padding:6px 12px 0;min-width:0} .rw-val b{ font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1; font-variant-numeric:tabular-nums;color:#111114;white-space:nowrap; } .rw-val u{text-decoration:none;flex:none;font-size:11px;font-weight:500;color:#047857} .rw-vs{display:block;padding:2px 12px 0;font-size:10.5px;color:#616161} .rw-bar{ display:block;height:6px;margin:9px 12px 0;border-radius:999px; background:#F0F0F0;overflow:hidden; } .rw-bar i{ display:block;height:100%;width:72%;border-radius:999px; background:var(--sun);box-shadow:inset 0 0 0 1px rgba(2,28,22,.18); transition:width .5s ease .05s; } /* legenda em duas camadas: rótulo e barra andam JUNTOS no hover */ .rw-cap{display:block;position:relative;padding:6px 12px 12px;min-width:0} .rw-cap span{ display:block;font-size:10.5px;color:#616161;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:opacity .3s ease .15s; } .rw-cap .alt{position:absolute;top:6px;left:12px;right:12px;opacity:0} .tcard:hover .vin-rep .rw-bar i{width:81%} .tcard:hover .vin-rep .rw-cap .base{opacity:0} .tcard:hover .vin-rep .rw-cap .alt{opacity:1} /* widget de barras (recharts) cortado pela direita */ .rw-mini{display:flex;align-items:flex-end;gap:7px;height:62px;padding:8px 12px 12px} .rw-mini i{flex:1;min-width:10px;background:#10B981;border-radius:4px 4px 0 0} .rw-mini i:nth-child(1){height:42%} .rw-mini i:nth-child(2){height:70%} .rw-mini i:nth-child(3){height:54%} .rw-mini i:nth-child(4){height:88%} .rw--kpi .vin-note{top:-14px;right:10px} .rw--kpi .vin-note::after{left:auto;right:14px} /* -- vin-team: Card "Membros" de Configurações > Time -- */ .vin-team .vin-panel{padding:12px 0 0 14px} .tm-card{ position:relative;margin-right:-34px;min-width:0; background:#fff;border:1px solid rgba(224,224,224,.5);border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05);padding-bottom:6px; } .tm-head{padding:11px 50px 9px 14px;min-width:0} .tm-head b{display:block;font-size:15px;font-weight:600;color:#111114;line-height:1.2} .tm-head span{ display:block;margin-top:2px;font-size:11px;color:#757575;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* linha-cartão real: rounded-lg, borda sutil, avatar + papel + email */ .tm-row{ position:relative;display:flex;align-items:center;gap:10px;min-width:0; border:1px solid #ECECEC;border-radius:10px;background:#fff; padding:8px 10px;margin:0 50px 6px 12px; transition:background .3s ease; } .tm-av{ flex:none;width:30px;height:30px;border-radius:50%;background:#F5F5F5; display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:600;color:#57635E; } .tm-mid{flex:1;min-width:0} .tm-l1{display:flex;align-items:center;gap:7px;min-width:0} .tm-l1 b{ min-width:0;font-size:13px;font-weight:500;color:#111114; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* papel como mini-select (linha 1) ou Badge secondary (demais) */ .tm-sel{ flex:none;display:flex;align-items:center;gap:3px;height:20px;padding:0 7px; border:1px solid #E0E0E0;border-radius:7px;background:#fff; font-size:10px;font-weight:500;color:#57635E; box-shadow:0 1px 1px rgba(0,0,0,.03);transition:border-color .3s ease; } .tm-sel svg{flex:none;width:11px;height:11px;opacity:.5} .tm-badge{ flex:none;display:flex;align-items:center;height:18px;padding:0 8px; border-radius:7px;background:#F5F5F5; font-size:10px;font-weight:600;color:#57635E; } .tm-mail{ display:block;margin-top:1px;font-size:11px;color:#757575; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tm-kebab{flex:none;display:flex;color:#757575} .tm-kebab svg{width:14px;height:14px} .tm-row .vin-note{top:-13px;right:44px} .tm-row .vin-note::after{left:auto;right:14px} .tcard:hover .vin-team .tm-row:nth-of-type(1){background:#FAFAFA} .tcard:hover .vin-team .tm-row:nth-of-type(1) .tm-sel{border-color:var(--sun)} /* touch: sem hover, mostra o estado final da cena */ @media (hover:none){ .vin-flow .cur--yellow{transform:translate(110px,-25px)} .vin-flow .cur--lilac{transform:translate(-60px,263px)} .vin-inbox .cur--peach{left:calc(100% - 150px);top:248px} .vin-inbox .cur--yellow{left:calc(100% - 165px);top:143px} .vin-flow .fnode--cond{border-color:var(--sun)} .vin-inbox .ibx-row:nth-child(1), .vin-inbox .ibx-row:nth-child(3){background:#F0F0F0} .vin-dist .dz-deal{border-color:#E0E0E0;box-shadow:0 4px 10px rgba(2,28,22,.10)} .vin-rep .rw-bar i{width:81%} .vin-rep .rw-cap .base{opacity:0} .vin-rep .rw-cap .alt{opacity:1} .vin-team .tm-row:nth-of-type(1){background:#FAFAFA} .vin-team .tm-row:nth-of-type(1) .tm-sel{border-color:var(--sun)} } /* card estreito: o pouso em px fixos cairia sobre texto e badges, então os cursores do inbox ficam parados no bastidor; o botão flutuante do canvas some (no app ele também colapsa no mobile) */ @media (max-width:560px){ .vin-inbox .cur--peach, .dcard:hover .vin-inbox .cur--peach{transform:none!important;left:10px!important;top:120px!important} .vin-inbox .cur--yellow, .dcard:hover .vin-inbox .cur--yellow{transform:none!important;left:8px!important;top:266px!important} .wf-add{display:none} } /* reduzir movimento: tudo estático no repouso */ @media (prefers-reduced-motion:reduce){ .vin .cur{transition:none!important;transform:none!important} .fnode,.ibx-row,.dz-deal,.rw-bar i,.rw-cap span,.tm-row,.tm-sel{transition:none!important} } /* ==== aviso de cookies (injetado pelo painel) ==== Segue o vocabulário do site: cartão branco com borda --line, botões .btn de verdade (.btn-sun e .btn-white) e o chip de ícone em --sun-soft. */ .cbanner{ position:fixed;left:16px;right:16px;bottom:16px;z-index:120; max-width:660px;margin:0 auto; background:#fff;border:1px solid var(--line);border-radius:18px; box-shadow:0 2px 6px rgba(8,40,31,.05), 0 18px 44px -18px rgba(8,40,31,.28); padding:16px 18px;display:flex;gap:14px;align-items:flex-start; animation:cbanner-entra .34s cubic-bezier(.16,1,.3,1) both; } .cbanner-ico{ width:38px;height:38px;border-radius:11px;flex:none; display:grid;place-items:center; background:var(--sun-soft);color:var(--heading);margin-top:1px; } .cbanner-txt{flex:1 1 auto;min-width:0} .cbanner-txt b{ display:block;font-family:var(--display);font-weight:600;font-size:14.5px; color:var(--heading);letter-spacing:-.01em;line-height:1.3; } .cbanner-txt p{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted)} .cbanner-txt p a{color:var(--sun-link);text-decoration:underline;text-underline-offset:2px} .cbanner-txt p a:hover{color:var(--heading)} .cbanner-btn{display:flex;gap:8px;flex:none;align-self:center} .cbanner .btn{font-size:14px;padding:9px 17px} @keyframes cbanner-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.cbanner{animation:none}} @media (max-width:720px){ .cbanner{ left:10px;right:10px;bottom:10px;padding:15px 16px; flex-wrap:wrap;gap:12px; } .cbanner-ico{width:34px;height:34px;border-radius:10px} .cbanner-txt{flex:1 1 200px} .cbanner-btn{width:100%;gap:10px} .cbanner .btn{flex:1;justify-content:center} } /* ==== capas enviadas pelo painel: mesmas medidas do quadro tracejado ==== */ .post-cover img,.post-feat .media img,.mod .pcover img,.mat-hero .mat-cover img{ display:block;width:100%;object-fit:cover;border-radius:16px;background:#FAFBFC; } .post-cover img{height:400px} .post-feat .media img{height:320px} .mod .pcover img{height:170px;border-radius:12px} .mat-hero .mat-cover img{height:260px} @media (max-width:940px){ .post-cover img{height:280px} .post-feat .media img{height:240px} } @media (max-width:560px){ .post-cover img{height:200px} .mod .pcover img{height:150px} .mat-hero .mat-cover img{height:190px} }