/* PORTI10 — SISTEMA INTERNO. Design system unico. [SPEC 09] Os tokens sao os da especificacao selada (CORRETOR_VINCULADO_CLAUDE_READY e GERENTE_CLAUDE_READY), byte a byte. Nao foram reinventados. */ *{box-sizing:border-box} :root{ /* ── [I6 · 21/09/2026] A ESCALA TIPOGRAFICA, NA RAIZ ──────────────── ACTO ... PROPRIETARIO, 21/09/2026: «A TIPOGRAFIA ESTA PEQUENA DEMAIS NAS DUAS EXPERIENCIAS. (...) corrija a escala pela raiz, evitando remendos individuais. ## Nao quero simplesmente aplicar zoom ou transform: scale(). ##» ## O QUE ESTAVA MEDIDO, ANTES DE TOCAR: ## 21 regras a 9px, 8 a 8px, 7 a 10px, 5 a 8.5px e 3 a 7px. A folha inteira vivia entre 7 e 11px -- uma escala de interface densa, nao de leitura confortavel. ## NOVE DEGRAUS, E A HIERARQUIA E QUE MANDA. ## Cada tamanho antigo tem ## um ## degrau novo; nenhum dois antigos colapsam no mesmo, para que titulo > texto > navegacao > secundario > metadado continue a ler-se. As regras deixam de trazer numero: trazem o degrau. */ --fs-meta:12px; /* era 7 / 7.5 · chips, grupos, rotulos de barra */ --fs-aux:13px; /* era 8 / 8.5 · descricoes, estados, auxiliares */ --fs-nav:14px; /* era 9 / 9.5 · navegacao, tabelas, botoes, toast */ --fs-ui:15px; /* era 10 · menu lateral, busca, subtitulos */ --fs-base:16px; /* era 11 · MENSAGENS, inputs, texto principal*/ --fs-lead:17px; /* era 12 · destaque de vazio/erro */ --fs-lg:19px; /* era 13 · titulos de painel, nome no canal */ --fs-xl:21px; /* era 14 · titulo de folha */ --fs-h3:24px; /* era 16 / 18 · titulo de modal, numero de KPI */ --fs-h2:27px; /* era 19 / 20 · h1 em ecra pequeno, icones */ --fs-h1:30px; /* era 23 · marca */ --fs-display:33px; /* era 25 / 26 · h1 de tela e da porta */ /* ── [B16 · 23/09/2026] A PALETA DO PROTOTIPO APROVADO ────────────── ACTO ... PROPRIETARIO, 23/09/2026: «sidebar azul-marinho escuro (...) area principal clara; cards brancos; bordas suaves; cantos arredondados; sombras discretas; tipografia limpa; destaques em azul; badges coloridos; visual SaaS premium.» ## Os tokens nao foram reinventados: foram AFINADOS. ## O azul-marinho ganha profundidade (era quase preto), o fundo perde o tom frio, a linha suaviza e ## as sombras passam a existir ## -- antes nao havia nenhuma, e sem sombra um cartao branco sobre fundo claro nao se destaca. */ --nav:#0d2137; --nav2:#17314c; --nav3:#1d3d5c; --nav-ink:#9fb4c9; --nav-forte:#ffffff; --bg:#f5f7fa; --p:#fff; --ink:#132033; --muted:#6b7e93; --line:#e4eaf1; --blue:#1f6feb; --blue-esc:#1558c4; --blue-claro:#eaf2ff; --cyan:#2bb7f0; --ok:#1a7f5a; --warn:#96660b; --bad:#b8434f; --ok-bg:#e8f7f0; --warn-bg:#fdf3dd; --bad-bg:#fdecee; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --sombra:0 1px 2px rgba(19,32,51,.04),0 2px 8px rgba(19,32,51,.05); --sombra-md:0 2px 4px rgba(19,32,51,.05),0 8px 24px rgba(19,32,51,.07); /* canal PORTI — paleta do CANAL_PORTI_CONVERSA_APROVADO */ --c-fundo:#07131e; --c-topo:#0a1926; --c-bolha:#102637; --c-minha:#174f60; --c-linha:#183044; --c-texto:#edf5fa; --c-fraco:#7f9bad; --c-accao:#e8fbff; } html,body{height:100%} body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:var(--bg);color:var(--ink);overflow:hidden} a{color:var(--blue)} button{font-family:inherit} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} /* ── CASCA ───────────────────────────────────────────────────────────── */ /* ── [B14 · 23/09/2026] O QUE IMPEDIA A ROLAGEM ───────────────────── ACTO ... PROPRIETARIO, 23/09/2026: «Corrigir imediatamente: rolagem vertical de todas as telas internas (...) impedir containers com overflow escondendo conteudo.» ## MEDIDO EM CHROMIUM, ANTES DE MEXER. ## Com 60 clientes na carteira: `.workspace` media ## 2969 px de altura num ecra de 900 ##, e `body{overflow:hidden}` impedia o documento de rolar. Tudo abaixo da primeira dobra ficava ## inacessivel ##. ## A CAUSA NAO ERA O `overflow`. ## `.workspace` ja tinha `overflow:auto`. O que faltava era ## o limite ##: `main` e' um item de grelha `1fr`, e `1fr` significa `minmax(auto, 1fr)` -- o minimo `auto` deixa-o esticar ate ao tamanho do conteudo, e entao nada tem o que rolar. `min-height:0` devolve-lhe o tecto, e ai o `overflow:auto` de dentro passa a valer. ## `100dvh` para o movel: ## `100vh` inclui a barra do browser que desaparece ao rolar, e no telemovel corta o rodape. `dvh` acompanha. */ .app{display:grid;grid-template-columns:268px 1fr;height:100vh;height:100dvh; min-height:0;overflow:hidden} aside{background:var(--nav);color:#fff;display:flex;flex-direction:column; min-height:0;overflow:hidden} .brand{padding:21px;font-size:var(--fs-h1);font-weight:900;border-bottom:1px solid #173043; display:flex;align-items:center;gap:8px} .brand b{color:var(--cyan)} .brand .voltar{margin-left:auto;font-size:var(--fs-base);color:#8fa6b9;background:none;border:0;cursor:pointer} .context{margin:13px;padding:11px;border-radius:12px;background:#0d2536;border:1px solid #1c3a4e; font-size:var(--fs-nav);color:#91a8ba;line-height:1.45} .context b{display:block;color:#fff;font-size:var(--fs-base);margin:3px 0} .context select{width:100%;margin-top:6px;background:#102d40;color:#fff;border:1px solid #2a4a60; border-radius:7px;padding:5px;font-size:var(--fs-nav)} .nav{padding:0 9px 12px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0; -webkit-overflow-scrolling:touch} .nav button{width:100%;border:0;background:none;color:#8fa6b9;text-align:left;padding:10px 13px; border-radius:9px;font-size:var(--fs-ui);margin:1px 0;cursor:pointer;display:flex; align-items:center;gap:6px} .nav button.active,.nav button:hover{background:var(--nav2);color:#fff} .nav button .pend{margin-left:auto;font-size:var(--fs-meta);font-weight:900;color:#a66e0d;background:#fff4dc; border-radius:6px;padding:2px 4px} .nav button[disabled]{opacity:.45;cursor:not-allowed} .nav .grupo{font-size:var(--fs-meta);letter-spacing:.14em;color:#5d7487;padding:12px 11px 4px} .foot{margin-top:auto;border-top:1px solid #173043;padding:13px;color:#8da5b8;font-size:var(--fs-nav)} main{display:grid;grid-template-rows:74px 1fr;min-width:0;min-height:0;overflow:hidden} header{position:relative;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center; padding:0 20px;gap:9px} .search{flex:1;background:#f3f6f9;border:1px solid #dce4eb;border-radius:11px;padding:10px 13px; color:#66798d;font-size:var(--fs-ui);cursor:text} .hbtn,.btn{border:1px solid #d8e1e9;background:#fff;border-radius:9px;padding:8px 10px;font-size:var(--fs-nav); font-weight:800;cursor:pointer;color:var(--ink)} .btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)} .btn[disabled]{opacity:.5;cursor:not-allowed} .workspace{overflow-y:auto;overflow-x:hidden;min-height:0; padding:21px 23px 135px;-webkit-overflow-scrolling:touch} .top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px} .top h1{font-size:var(--fs-display);margin:0} .sub{font-size:var(--fs-ui);color:var(--muted);margin-top:4px;line-height:1.5} /* ── COMPONENTES [SPEC 09 / COMPONENT_LIBRARY] ───────────────────────── */ .banner{background:#eaf5ff;border:1px solid #cde3f5;border-radius:12px;padding:11px 13px; margin:14px 0;font-size:var(--fs-nav);color:#365f7c;line-height:1.5} .banner.dep{background:#fff4dc;border-color:#e8d5a8;color:#7a5a12} .banner.bad{background:#ffecef;border-color:#f3ced5;color:#8f3444} .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:14px 0} .kpi,.panel{background:#fff;border:1px solid var(--line);border-radius:14px} .kpi{padding:12px} .kpi b{display:block;font-size:var(--fs-h3)} .kpi span{font-size:var(--fs-aux);color:var(--muted)} .kpi small{display:block;font-size:var(--fs-aux);color:var(--ok);margin-top:4px} .kpi small.warn{color:var(--warn)} .kpi small.bad{color:var(--bad)} .panel{padding:15px} .panel h2{font-size:var(--fs-lg);margin:0 0 4px} .desc{font-size:var(--fs-aux);color:var(--muted);line-height:1.45;margin-bottom:10px} .grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:12px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} .row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-bottom:1px solid #edf1f5} .row:last-child{border:0} .row b{font-size:var(--fs-nav)} .row p{font-size:var(--fs-aux);color:var(--muted);margin:4px 0;line-height:1.45} .chip{align-self:center;background:#eaf4ff;color:#1d64a5;padding:5px 7px;border-radius:8px; font-size:var(--fs-meta);font-weight:900;white-space:nowrap} .chip.ok{background:#e9f8f1;color:var(--ok)} .chip.warn{background:#fff4dc;color:#94670e} .chip.bad{background:#ffecef;color:#a94151} .chip.mudo{background:#eef2f6;color:#6b7e93} .tablewrap{overflow:auto;border:1px solid #e2e9ef;border-radius:11px;margin-top:12px} .table{width:100%;border-collapse:collapse;font-size:var(--fs-nav);background:#fff;min-width:860px} .table th{text-align:left;color:#718399;padding:8px;background:#fbfcfe;border-bottom:1px solid #e0e7ed} .table td{padding:9px 8px;border-bottom:1px solid #edf1f5;vertical-align:top} .table tr:last-child td{border-bottom:0} .filters{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0} .filter{border:1px solid #dbe4ec;background:#fff;border-radius:8px;padding:7px 9px;font-size:var(--fs-aux); color:#607489;cursor:pointer} .filter.on{background:var(--blue);border-color:var(--blue);color:#fff} .progress{height:7px;background:#edf2f6;border-radius:10px;overflow:hidden;margin:7px 0} .progress i{display:block;height:100%;background:var(--blue);border-radius:10px} .funnel{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:15px} .bar{flex:1;background:#dceaff;border-radius:7px 7px 2px 2px;position:relative;min-height:3px} .bar strong{position:absolute;top:-21px;left:0;right:0;text-align:center;font-size:var(--fs-aux)} .bar span{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:var(--fs-meta);color:#365f7c} .timeline{border-left:2px solid #dce5ef;margin:8px 0 0 5px;padding-left:12px} .timeline .ev{padding:6px 0;font-size:var(--fs-aux)} .timeline .ev b{font-size:var(--fs-nav);display:block} /* ── ESTADOS [SPEC 12 — obrigatorios em toda a tela] ─────────────────── */ .stategrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .state{border:1px dashed #cad6e0;background:#fbfdff;border-radius:10px;padding:10px;font-size:var(--fs-aux)} .state b{display:block;font-size:var(--fs-nav);margin-bottom:4px} .vazio,.erro,.negado,.plano,.credencial,.dep{border:1px dashed #cad6e0;background:#fbfdff; border-radius:12px;padding:20px;text-align:center;font-size:var(--fs-ui);color:var(--muted);margin-top:12px} .erro{border-color:#f0c9d1;background:#fffafb;color:#8f3444} .negado{border-color:#e6d3a8;background:#fffdf6;color:#7a5a12} .plano{border-color:#cfd9e4;background:#fafcff;color:#4b6076} .vazio b,.erro b,.negado b,.plano b,.dep b{display:block;font-size:var(--fs-lead);color:var(--ink);margin-bottom:5px} .skel{background:linear-gradient(90deg,#eef2f6 25%,#f7f9fb 50%,#eef2f6 75%);background-size:400% 100%; animation:sk 1.4s infinite;border-radius:9px;height:60px;margin:8px 0} @keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}} .recibo{border:1px solid var(--line);border-radius:11px;padding:11px;margin-top:10px;font-size:var(--fs-aux); background:#fff} .recibo.sucesso{border-color:#bfe6d4;background:#f4fdf8} .recibo.parcial{border-color:#e8d5a8;background:#fffdf4} .recibo.falha{border-color:#f0c9d1;background:#fffafb} /* ── PORTI copiloto persistente ──────────────────────────────────────── */ /* [I8 · 21/09/2026] ## `:not(.msg)` NAO E ENFEITE: E A CORRECCAO. ## * * ACTO ... PROPRIETARIO, 21/09/2026: «a resposta do PORTI CONTINUA * aparecendo no canto inferior direito; "A pensar..." tambem.» * * ## A COLISAO, medida no navegador com getComputedStyle: ## `pinta()` * marca a bolha do PORTI com `class="msg porti"` -- `porti` ali e o PAPEL * de quem fala. Mas `.porti` tambem e o nome do WIDGET copiloto, fixo no * canto. A bolha casava com as duas regras e herdava * `position:fixed; right:17px; bottom:16px; width:372px; z-index:40`. * * Estava ## dentro de `#chat` ##, com a arvore certa -- e desenhada no * canto. Por isso nenhuma prova de DOM a apanhou: a arvore nunca esteve * errada; ## o que estava errado era a posicao calculada ##. * * O widget nao tem `msg`, logo continua exactamente como estava. */ .porti:not(.msg){position:fixed;right:17px;bottom:16px;width:372px;background:#0a1c2a;color:#fff; border:1px solid #25455c;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px #102b3c44; z-index:40;max-height:70vh;display:flex;flex-direction:column} .phead{padding:10px 12px;border-bottom:1px solid #213b4d;font-size:var(--fs-ui);font-weight:900; display:flex;align-items:center;gap:6px;cursor:pointer} /* ## [B8-A] O PORTI persistente do SISTEMA tambem tem rosto. ## [SPEC 09] «shell: (...) persistent PORTI copilot». Era um ponto de 7px; passa a ser a mesma cara do canal, em pequeno -- ## a identidade e uma so nas duas superficies ##. */ .phead .dot{width:19px;height:19px;border-radius:50%;flex:0 0 auto; background:var(--cyan) url(porti-avatar.png) center/cover no-repeat} .phead .min{margin-left:auto;background:none;border:0;color:#8fa6b9;font-size:var(--fs-lg);cursor:pointer} .pbody{padding:10px 12px;overflow:auto} .pbody p{font-size:var(--fs-nav);color:#a7bdcc;line-height:1.5;margin:0 0 8px} .pbody .eu{color:#dff0f7;text-align:right} .pin{display:flex;gap:6px;padding:0 12px 12px} .pin input{flex:1;min-width:0;background:#102d40;border:1px solid #2a4a60;border-radius:8px; color:#fff;padding:8px;font-size:var(--fs-aux)} .pin button{border:0;border-radius:8px;background:var(--c-accao);font-weight:900;padding:0 11px;cursor:pointer} .porti:not(.msg).min .pbody,.porti:not(.msg).min .pin{display:none} /* ── ACTION RAIL ─────────────────────────────────────────────────────── */ .rail{position:fixed;right:17px;bottom:16px;z-index:39;display:flex;flex-direction:column;gap:7px} /* ── CANAL PORTI (conversa) [SPEC 01] ────────────────────────────────── */ .canal{position:fixed;inset:0;background:var(--c-fundo);color:var(--c-texto);display:flex; flex-direction:column;z-index:50} .canal .ctop{height:70px;border-bottom:1px solid var(--c-linha);display:flex;align-items:center; padding:8px 12px;gap:10px;background:var(--c-topo);flex:0 0 auto} /* ## [B8-A · 22/09/2026] O ROSTO DO PORTI, o aprovado. ## ACTO ... PROPRIETARIO, 22/09/2026: «copiar/usar o asset aprovado existente; implementar nos pontos definidos pela especificacao; preservar identidade aprovada.» PRECEDENCIA (22/09): ha dois ficheiros do PORTI no servidor -- `assets/agents/porti.jpg` 480x548, pacote do SITE de 13/09 `PORTI10_PORTI_AVATAR.png` 400x400, especificacao de TELAS de 19/09 Vale o de 19/09 para APP e SISTEMA: e' o mais recente, e e' o que o proprio `PORTI10_CANAL_PORTI_CONVERSA_APROVADO.html` traz embutido em base64 -- ## provado byte a byte, sha256 c0b1e48fa68a18c9…, 82.658 bytes nos dois ##. O do SITE fica no SITE: superficies distintas, assets distintos. A forma vem do aprovado: `.face` redondo com a imagem em fundo `cover`. ## A letra "P" era o marcador de que faltava a imagem ##, e sai. */ .canal .face{width:44px;height:44px;border-radius:50%;border:2px solid #2a4b61; background:#17384d url(porti-avatar.png) center/cover no-repeat; font-size:0;flex:0 0 auto} .canal .nome{font-size:var(--fs-lg);font-weight:900} .canal .online{font-size:var(--fs-nav);color:#7fa0b5;margin-top:2px} .canal .ctop .sair{margin-left:auto;background:none;border:0;color:#a8bdcb;font-size:var(--fs-base);cursor:pointer} .canal .chat{flex:1;overflow:auto;padding:14px 11px 20px; background:radial-gradient(circle at 15% 15%,#0c2030 0,#07131e 45%)} .canal .dia{text-align:center;font-size:var(--fs-nav);color:#7792a6;margin:5px 0 14px} .msg{max-width:82%;padding:9px 11px;border-radius:13px;margin:6px 0;font-size:var(--fs-base);line-height:1.5; box-shadow:0 2px 8px #0002;white-space:pre-wrap;word-wrap:break-word} .msg.porti{background:var(--c-bolha);border:1px solid #1d3a4e;border-top-left-radius:4px} .msg.me{background:var(--c-minha);margin-left:auto;border-top-right-radius:4px} .msg .time{display:block;text-align:right;font-size:var(--fs-aux);color:var(--c-fraco);margin-top:4px} .suggestions{display:flex;gap:6px;overflow:auto;margin:8px 0 12px;padding-bottom:3px} .suggestions button{white-space:nowrap;border:1px solid #31556c;background:#0d2232;color:#cfe4ef; border-radius:16px;padding:7px 9px;font-size:var(--fs-nav);cursor:pointer} .card{max-width:88%;background:#0e2232;border:1px solid #28465a;border-radius:14px;padding:10px;margin:7px 0} .card b{font-size:var(--fs-base)} .card p{font-size:var(--fs-nav);color:#9cb2c1;line-height:1.5;margin:4px 0 8px} .card button{border:0;border-radius:9px;background:var(--c-accao);color:#08222d;padding:7px 9px; font-size:var(--fs-nav);font-weight:900;cursor:pointer;margin-right:5px} .composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;padding:8px} .composer .box{flex:1;background:var(--c-bolha);border:1px solid #29485d;border-radius:22px;min-height:52px; display:flex;align-items:center;padding:6px 7px;gap:6px} .composer .box input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:var(--fs-base)} .composer .emoji,.composer .attach{border:0;background:none;color:#9eb5c5;font-size:var(--fs-h2);cursor:pointer} .composer .mic{width:48px;height:48px;border-radius:50%;border:0;background:#1d7283;color:#fff; font-size:var(--fs-h3);cursor:pointer;flex:0 0 auto} .sheet{position:fixed;inset:0;background:#06101bcc;display:none;align-items:flex-end;z-index:60} .sheet.on{display:flex} .sheetin{width:100%;background:var(--c-bolha);border-radius:24px 24px 0 0;padding:18px 15px 26px} .sheetin h3{margin:0 0 13px;font-size:var(--fs-xl)} .actions{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} .act{text-align:center;font-size:var(--fs-nav);color:#b8ccd9;cursor:pointer} .act i{display:grid;place-items:center;margin:auto auto 8px;width:52px;height:52px;border-radius:50%; background:#17384d;font-style:normal;font-size:var(--fs-h3)} /* ── PORTA (login / primeiro acesso) [SPEC 08] ───────────────────────── */ .porta{position:fixed;inset:0;display:grid;place-items:center;background:var(--c-fundo);z-index:55;padding:20px} .porta .caixa{width:100%;max-width:400px;background:#0d2536;border:1px solid #1c3a4e;border-radius:18px; padding:26px;color:#edf5fa} .porta h1{font-size:var(--fs-display);margin:0 0 4px;font-weight:900} .porta h1 b{color:var(--cyan)} .porta .lead{font-size:var(--fs-ui);color:#91a8ba;margin:0 0 18px;line-height:1.5} .porta label{display:block;font-size:var(--fs-nav);color:#91a8ba;margin:11px 0 4px;font-weight:700} .porta input{width:100%;background:#102d40;border:1px solid #2a4a60;border-radius:9px;color:#fff; padding:11px;font-size:var(--fs-base)} .porta .btn{width:100%;margin-top:16px;padding:12px;font-size:var(--fs-base);background:var(--blue);color:#fff; border-color:var(--blue)} .porta .aviso{margin-top:12px;font-size:var(--fs-nav);line-height:1.5;border-radius:9px;padding:9px} .porta .aviso.bad{background:#2a1520;border:1px solid #5d2634;color:#f0b4c0} .porta .aviso.ok{background:#122c22;border:1px solid #1f5540;color:#9fe0c2} .porta .aviso.info{background:#102637;border:1px solid #29485d;color:#a7bdcc} .porta .ligacoes{margin-top:14px;display:flex;justify-content:space-between;font-size:var(--fs-nav)} .porta .ligacoes button{background:none;border:0;color:#7fa0b5;cursor:pointer;font-size:var(--fs-nav);padding:0} .porta .contextos{margin-top:10px} .porta .contextos button{width:100%;text-align:left;background:#102637;border:1px solid #29485d; border-radius:10px;color:#edf5fa;padding:10px;font-size:var(--fs-ui);margin-top:6px;cursor:pointer} .porta .contextos button small{display:block;color:#7fa0b5;font-size:var(--fs-aux);margin-top:3px} /* ── TOAST ───────────────────────────────────────────────────────────── */ .toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:70;display:flex; flex-direction:column;gap:7px;align-items:center;pointer-events:none} .toast{background:#0a1c2a;color:#edf5fa;border:1px solid #25455c;border-radius:11px;padding:10px 14px; font-size:var(--fs-nav);box-shadow:0 10px 30px #0004;max-width:min(92vw,520px)} .toast.ok{border-color:#1f5540} .toast.bad{border-color:#5d2634} .toast.warn{border-color:#6b5420} /* ── MODAL / DRAWER ──────────────────────────────────────────────────── */ .modal{position:fixed;inset:0;background:#0b1a26aa;display:grid;place-items:center;z-index:65;padding:18px} .modal .cx{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:86vh;overflow:auto; padding:20px;border:1px solid var(--line)} .modal h2{margin:0 0 6px;font-size:var(--fs-h3)} .modal .pe{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} /* ── RESPONSIVO [SPEC 09/13] ─────────────────────────────────────────── */ @media(max-width:1050px){ .app{grid-template-columns:215px 1fr} .kpis{grid-template-columns:repeat(3,1fr)} .grid2,.grid3{grid-template-columns:1fr} .stategrid{grid-template-columns:1fr 1fr} /* [B11 · 22/09] ## ESPECIFICIDADE: esta regra nunca venceu. ## A base e `.porti:not(.msg)` (0,2,0) e esta era `.porti` (0,1,0) -- o `width:332px` ## nunca chegou a aplicar-se ##, medido em Chromium. Igualar o selector nao muda a intencao: faz a intencao acontecer. */ .porti:not(.msg){width:332px} } /* [I6] ## Portatil e ecra pequeno: os degraus GRANDES encolhem, o texto de leitura NAO. ## Baixar o corpo abaixo de 16px num telemovel faz o navegador dar zoom sozinho ao tocar num campo -- e isso seria devolver o problema pela porta das traseiras. Encolhem os titulos, que sao os que ocupam linha. */ @media(max-width:1050px){ :root{ --fs-display:29px; --fs-h1:27px; --fs-h2:24px; --fs-h3:22px; --fs-xl:19px; } } @media(max-width:760px){ :root{ --fs-display:26px; --fs-h1:24px; --fs-h2:22px; --fs-h3:20px; --fs-xl:18px; --fs-lg:17px; --fs-ui:14px; } } @media(max-width:760px){ .app{grid-template-columns:1fr} aside{position:fixed;inset:0 auto 0 0;width:272px;z-index:45;transform:translateX(-100%); transition:transform .18s ease} body.gaveta aside{transform:none} body.gaveta::after{content:"";position:fixed;inset:0;background:#0b1a2688;z-index:44} .menu{display:inline-block} .kpis{grid-template-columns:repeat(2,1fr)} .workspace{padding:15px 13px max(150px, calc(var(--porti-alto, 0px) + 26px))} .top h1{font-size:var(--fs-h2)} .porti:not(.msg){left:10px;right:10px;width:auto;bottom:10px} .table{min-width:560px} .stategrid{grid-template-columns:1fr} } .menu{display:none;border:1px solid #d8e1e9;background:#fff;border-radius:9px;padding:8px 10px; font-size:var(--fs-base);cursor:pointer} /* [I4Y 21/09] A coluna de accoes das tabelas e o campo de texto do modal. Nada de novo no desenho: os botoes sao os `.btn` de sempre. */ td.acts{white-space:nowrap} td.acts .btn{padding:5px 8px;font-size:var(--fs-nav);margin:0 2px 2px 0} td.acts .chip{vertical-align:middle} .modal .lbl{display:block;font-size:var(--fs-nav);color:#5b7389;margin:12px 0 4px;font-weight:700} .modal .inp{width:100%;border:1px solid #d8e1e9;border-radius:9px;padding:10px;font-size:var(--fs-base); font-family:inherit;color:inherit;background:#fff;box-sizing:border-box} /* ── [B8-D · 22/09/2026] PropertyCard ────────────────────────────────── SPEC 01: «imagem, preco, tipologia, metragem/quartos quando disponivel, origem/escopo autorizado e acoes». ## Responsivo por grid auto-fill ##: nao ha ponto de corte por dispositivo, ha largura minima de cartao. */ .grelha-imoveis{display:grid;gap:14px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(248px,1fr))} .cimovel{background:#0f2a3c;border:1px solid #17384d;border-radius:12px; overflow:hidden;display:flex;flex-direction:column} .cim-foto{aspect-ratio:4/3;background:#0d2434;overflow:hidden} .cim-foto img{width:100%;height:100%;object-fit:cover;display:block} /* ## Sem imagem nao se poe a de outro imovel. ## A moldura diz que falta. */ .cim-foto.vazia{display:grid;place-items:center} .cim-foto.vazia::after{content:"sem imagem";color:#5a7f96; font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase} .cim-corpo{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1} .cim-titulo{font-size:var(--fs-base);font-weight:800;margin:0;line-height:1.3} .cim-onde{font-size:var(--fs-meta);color:#8fa6b9} .cim-preco{font-size:var(--fs-lg);font-weight:900;color:var(--cyan)} .cim-preco.sem{font-size:var(--fs-meta);font-weight:600;color:#7f95a6} .cim-nota{font-size:var(--fs-meta);font-weight:600;color:#8fa6b9} .cim-ficha{font-size:var(--fs-meta);color:#a8bdcb} .cim-escopo{font-size:var(--fs-meta);color:#7f95a6;margin-top:auto; padding-top:6px;border-top:1px solid #143247} .cim-accoes{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px} @media (max-width:760px){ .grelha-imoveis{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} } /* ── [B8 · 22/09/2026] Chip de agente ────────────────────────────────── A cara aprovada ao lado do nome, onde a interface ja nomeia o agente. ## Nao entra na conversa ##: handoffs internos sao invisiveis por defeito. */ .agente{display:inline-flex;align-items:center;gap:6px;vertical-align:middle} .agente-face{width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:#17384d center/cover no-repeat;border:1px solid #2a4b61} .agente.grande .agente-face{width:34px;height:34px} .agente-nome{font-weight:800;letter-spacing:.02em} /* ── [B8 · 22/09/2026] O botao de ENVIAR ─────────────────────────────── Mesma altura do microfone, alvo de toque confortavel, e ## desligado quando nao ha o que enviar ## -- a guarda e' visivel antes de ser tentada. `flex:0 0 auto` porque o composer e' flex: sem isto o botao encolhia para o tamanho do glifo, que foi o que a primeira medicao mostrou (27x21px). */ .composer .enviar{width:48px;height:48px;border-radius:50%;border:0; background:var(--cyan);color:#04212b;font-size:var(--fs-h2); cursor:pointer;flex:0 0 auto;display:grid;place-items:center;padding:0; line-height:1;transition:opacity .15s,background .15s} .composer .enviar:disabled{opacity:.38;cursor:not-allowed;background:#1d4d5c; color:#8fb6c3} .composer .enviar:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (max-width:760px){ .composer .enviar{width:44px;height:44px} } /* ── [B8 · 22/09/2026] Canais de equipa/unidade ────────────────────────── */ .canal-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:#0f2a3c;border:1px solid #17384d;border-radius:10px;padding:10px 12px; margin-bottom:7px;color:var(--ink);cursor:pointer} .canal-item:hover{border-color:#2a4b61} .canal-nome{font-weight:800} .canal-tipo{font-size:var(--fs-meta);color:#7f95a6;text-transform:lowercase} .canal-cont{margin-left:auto;font-size:var(--fs-meta);color:#8fa6b9} .canal-aberto{margin-top:12px} .canal-titulo{font-size:var(--fs-base);margin:0 0 8px} .canal-msg{background:#0d2434;border-left:3px solid #1d7283;border-radius:8px; padding:8px 10px;margin-bottom:6px;font-size:var(--fs-nav)} .canal-msg.aviso{border-left-color:#e0a13a;background:#2a220f} .canal-sobre{margin-top:5px;font-size:var(--fs-meta);color:#8fa6b9} .canal-composer{display:flex;gap:7px;margin-top:10px} .canal-composer input{flex:1;min-width:0;background:#0d2434;border:1px solid #29485d; border-radius:10px;padding:9px 11px;color:#fff;font-size:var(--fs-nav)} @media (max-width:760px){ .canal-item{flex-wrap:wrap} .canal-cont{margin-left:0} } /* ── [B9-A · 22/09/2026] NOTIFICACOES ────────────────────────────────── ACTO ... PROPRIETARIO, 22/09/2026: «Completar (...) notificacoes.» O botao existe no visual aprovado (`
` do CORRETOR_VINCULADO); o contador e a folha sao a parte que faltava. ## Tokens da casa, sem cor nova ##: `--bad` no contador, `--nav`/`--line` na folha. */ .hbtn .badge{display:inline-block;margin-left:6px;min-width:17px;padding:1px 5px; border-radius:9px;background:var(--bad);color:#fff;font-size:var(--fs-meta); font-weight:900;line-height:1.5;text-align:center} .notif{position:absolute;top:60px;right:14px;width:320px;max-width:calc(100vw - 28px); background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 50px #102b3c33;z-index:40;overflow:hidden} .notif .nhead{padding:11px 13px;border-bottom:1px solid var(--line); font-size:var(--fs-nav);font-weight:900;color:var(--ink)} .notif .nbody{max-height:min(60vh,380px);overflow:auto} .notif .nitem{padding:10px 13px;border-bottom:1px solid #edf1f5;cursor:pointer} .notif .nitem:last-child{border-bottom:0} .notif .nitem:hover{background:#f7fafd} .notif .nitem b{display:block;font-size:var(--fs-nav);color:var(--ink)} .notif .nitem p{margin:3px 0 0;font-size:var(--fs-aux);color:var(--muted);line-height:1.4} @media(max-width:700px){.notif{right:8px;left:8px;width:auto}} /* ── [B9-B · 22/09/2026] BARRA DE ACCOES ──────────────────────────────── Os botoes de seguir o lead, criar compromisso e decidir a quarentena. ## Sem cor nova ##: `.btn` e `.btn.primary` ja sao os da casa. */ .accoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .accoes .btn{white-space:nowrap} .formlinha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px;margin:10px 0} .formlinha label{display:block;font-size:var(--fs-aux);color:var(--muted);margin-bottom:3px} .formlinha input,.formlinha select,.formlinha textarea{width:100%;padding:8px 9px; border:1px solid var(--line);border-radius:9px;font-size:var(--fs-nav); color:var(--ink);background:#fff;font-family:inherit} .formlinha input[type=file]{padding:6px;font-size:var(--fs-aux)} /* ── [B11 · 22/09/2026] FILTRO ACTIVO + CARTAO DE CANAL ───────────────── O `.filters` do aprovado nao tinha estado activo porque era estatico. Aqui ele recorta de verdade, e ## um filtro que age tem de dizer qual esta a agir ##. */ .filter{cursor:pointer;font-family:inherit} .filter.active{background:var(--blue);color:#fff;border-color:var(--blue)} .filter:hover{border-color:#b9c9d8} button.panel{display:block;width:100%;text-align:left;cursor:pointer; font-family:inherit;color:var(--ink)} button.panel:hover{border-color:#b9c9d8} .canal-tipo{display:inline-block;font-size:var(--fs-meta);color:var(--muted); background:#eef3f8;border-radius:7px;padding:3px 7px;margin-top:4px} .canal-cont{display:block;font-size:var(--fs-aux);color:var(--muted);margin-top:6px} /* ── [B11 · 22/09/2026] MENSAGEM FIXADA ───────────────────────────────── Uma marca, e nao um segundo mecanismo -- a mesma forma do aviso. */ .canal-msg.fixada{border-left:3px solid var(--blue);background:#f5f9ff} .canal-msg.aviso{border-left:3px solid var(--warn);background:#fffaf0} .canal-msg{padding:8px 10px;border-radius:9px;margin:6px 0;background:#fbfcfe; font-size:var(--fs-nav);line-height:1.5} .canal-sobre{margin-top:5px;font-size:var(--fs-aux);color:var(--muted)} .canal-titulo{font-size:var(--fs-lg);margin:12px 0 4px} .canal-composer{display:flex;gap:6px;margin-top:10px} .canal-composer input{flex:1;padding:8px 9px;border:1px solid var(--line); border-radius:9px;font-size:var(--fs-nav);font-family:inherit} /* ── [B11 · 22/09/2026] O QUE ESTAVA A EMPURRAR PARA FORA DA VIEWPORT ─── Medido em Chromium a 1180, 834 e 390 px: `.panel` e `.tablewrap` saiam ate ~1440 px de largura dentro de um ecra de 834. ## A CAUSA NAO ERA A TABELA. ## `.tablewrap` ja tem `overflow:auto` e sabe rolar sozinha. O que falhava e que ## um filho de grelha nasce com `min-width:auto` ##: a coluna recusava encolher abaixo do conteudo mais largo (`.table{min-width:720px}`) e ## esticava o painel inteiro ##. `min-width:0` devolve a decisao a grelha, e a tabela volta a rolar dentro do seu proprio contentor -- que e o que o desenho aprovado ja previa. */ .grid2>*,.grid3>*,.kpis>*{min-width:0} .panel,.workspace,main{min-width:0} .tablewrap{max-width:100%} .accoes{min-width:0} /* ── O COPILOTO EM ECRA PEQUENO ───────────────────────────────────────── O aprovado desce `.porti` para 300 px a 1050 px e nao diz mais nada: ## abaixo disso o desenho e omisso ##. A 390 px ele media 372 px -- quase o ecra todo, fixo por cima do trabalho. Aqui ele ancora em baixo, ocupa a largura util com margem, e ## continua a poder minimizar-se ##: a funcao nao muda, so' deixa de tapar a tela. */ @media(max-width:700px){ .porti:not(.msg){left:10px;right:10px;bottom:10px;width:auto;max-height:52vh; display:flex;flex-direction:column} .porti .pbody{overflow:auto} .notif{top:56px} .formlinha{grid-template-columns:1fr} .accoes{flex-direction:column;align-items:stretch} .accoes .btn{width:100%} } /* ── [B12 · 22/09/2026] GRUPOS DOBRAVEIS NA BARRA ─────────────────────── O `.grupo` do aprovado era um rotulo; passa a ser tambem um botao, sem deixar de parecer um rotulo. ## Nenhuma cor nova. ## */ .nav button.grupo{width:100%;display:flex;align-items:center;gap:6px; background:none;border:0;color:#6f8698;text-align:left;cursor:pointer; padding:12px 11px 5px;font-size:var(--fs-meta);font-weight:900; letter-spacing:.09em;text-transform:uppercase;font-family:inherit} .nav button.grupo:hover{background:none;color:#9fb6c8} .nav button.grupo .seta{margin-left:auto;font-size:var(--fs-nav); font-weight:700;opacity:.65} .nav button.grupo.on .seta{opacity:.9} /* ══ [B13 · 22/09/2026] O PORTI DEIXA DE SER UM CHAT COLADO AO ERP ══════ * * ACTO ... PROPRIETARIO, 22/09/2026: «PORTI nao pode parecer apenas um * chat flutuante colado em cima de um ERP. Ele e a interface * operacional central (...) Melhore integracao visual.» * * ## O que muda, e o que NAO muda. ## A posicao, o tamanho e a paleta sao * os do prototipo aprovado -- nao se redesenha por gosto. O que se * acrescenta e' o que o faz parecer ## parte da casa ##: a cara do PORTI no * cabecalho da caixa, o mesmo raio dos paineis, e uma sombra que o assenta * em vez de o pousar. */ .porti:not(.msg){box-shadow:0 22px 60px #0a1c2a3d, 0 2px 0 #ffffff14 inset} .phead{display:flex;align-items:center;gap:8px} .phead::before{content:"";width:22px;height:22px;border-radius:50%;flex:0 0 auto; background:url('/static/app/porti-avatar.png') center/cover no-repeat,#123} .phead .dot{display:none} .pbody p.eu{color:#dff1fb;text-align:right} /* ── A BUSCA DO CABECALHO E A PORTA DO PORTI, e passa a parece-lo ──── */ .search{display:flex;align-items:center;gap:8px;cursor:pointer;transition:border-color .12s} .search:hover{border-color:#b9cbdb;background:#eef4fa} .search::before{content:"";width:20px;height:20px;border-radius:50%;flex:0 0 auto; background:url('/static/app/porti-avatar.png') center/cover no-repeat,#123} /* ── DENSIDADE: o painel respira, como no aprovado ────────────────── */ .panel{padding:15px} .panel h2{font-size:var(--fs-lg);margin:0 0 4px;letter-spacing:-.01em} .row{padding:10px 0} .vazio{padding:26px 18px;text-align:center;border:1px dashed #cfdbe6; border-radius:12px;background:#fbfdff;color:var(--muted); font-size:var(--fs-aux);line-height:1.5} .vazio b{display:block;font-size:var(--fs-lead);color:var(--ink);margin-bottom:6px} .kpi{padding:13px 14px} .kpi b{letter-spacing:-.02em} /* ── O CARTAO OPERACIONAL: o que o corretor clica o dia todo ──────── */ .grid3 .panel .accoes{margin-top:10px} .grid3 .panel .chip{display:inline-block;margin-top:8px} /* ── [B14 · 23/09/2026] ROLAGEM EM ECRA PEQUENO ───────────────────────── Na gaveta, a barra lateral e' `position:fixed` e tem de rolar por dentro; e o canal do PORTI, que ocupa o ecra todo, tambem. */ @media(max-width:700px){ .app{grid-template-columns:1fr} aside{position:fixed;inset:0 auto 0 0;width:268px;max-width:86vw;z-index:45; overflow:hidden} .nav{overflow-y:auto} .workspace{padding:16px 14px max(120px, calc(var(--porti-alto, 0px) + 26px))} } .canal{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0} .canal .chat{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch} .modal .cx{max-height:86vh;overflow-y:auto} .notif .nbody{-webkit-overflow-scrolling:touch} /* ════════════════════════════════════════════════════════════════════════ [B16 · 23/09/2026] EXECUCAO VISUAL DEFINITIVA DO CORRETOR ACTO ... PROPRIETARIO, 23/09/2026: «Adequar TODAS as telas do CORRETOR ao layout visual definitivo do PORTI10. (...) NAO manter o layout tecnico atual apenas adicionando caixas.» ## ESTE BLOCO AFINA, NAO SUBSTITUI. ## As regras de cima continuam a valer e sao a base; aqui esta o que o prototipo aprovado pede e a folha nao tinha -- sombras, respiro, hierarquia, e ## os componentes novos ## (kanban, calendario, divisao mestre-detalhe, cartao de imovel, abas, avatar). Escrito em bloco proprio para que reverter o visual seja apagar um bloco, e nao desfazer uma folha. ════════════════════════════════════════════════════════════════════════ */ /* ── SIDEBAR ─────────────────────────────────────────────────────────── */ aside{background:linear-gradient(180deg,var(--nav) 0%,#0a1a2c 100%); border-right:1px solid rgba(255,255,255,.06)} .brand{padding:22px 20px 18px;font-size:var(--fs-h2);font-weight:800; letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.07)} .brand b{color:var(--cyan);font-weight:800} .context{margin:14px 12px;padding:12px 13px;border-radius:var(--r); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); font-size:var(--fs-meta);letter-spacing:.1em;color:#7e97ad} .context b{font-size:var(--fs-nav);letter-spacing:normal;font-weight:700} .nav{padding:0 10px 14px} .nav .grupo,.nav button.grupo{font-size:11px;letter-spacing:.16em; color:#62809a;padding:14px 12px 5px;font-weight:700} .nav button{border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-nav); font-weight:500;margin-bottom:1px;transition:background .12s,color .12s} .nav button:hover{background:rgba(255,255,255,.06);color:#dbe7f1} /* ## O item activo tem de se ver de relance. ## Fundo azul e uma barra a esquerda: cor sozinha nao chega a quem distingue mal o azul do cinzento. */ .nav button.active{background:var(--blue);color:#fff;font-weight:600; box-shadow:0 2px 8px rgba(31,111,235,.3)} .nav button.active::before{content:"";position:absolute;left:-10px;top:6px; bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan)} .nav button{position:relative} .foot{border-top:1px solid rgba(255,255,255,.07);padding:14px 16px; display:flex;align-items:center;gap:10px;font-size:var(--fs-aux)} .foot .av{width:34px;height:34px;border-radius:50%;flex:0 0 auto; background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800; font-size:var(--fs-nav)} .foot .quem{min-width:0;line-height:1.35} .foot .quem b{display:block;color:#fff;font-size:var(--fs-nav);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .foot .quem span{color:#7e97ad;font-size:11px;letter-spacing:.1em} /* ── TOPO ────────────────────────────────────────────────────────────── */ header{padding:0 20px;gap:12px;box-shadow:0 1px 2px rgba(19,32,51,.04)} .search{background:#f5f7fa;border:1px solid var(--line);border-radius:10px; padding:10px 14px;color:#7c8da0;font-size:var(--fs-nav); max-width:520px;transition:border-color .12s,background .12s} .search:hover{background:#fff;border-color:#c7d5e4} .hbtn{border-radius:9px;padding:8px 12px;font-weight:500;color:#41566e; transition:background .12s,border-color .12s} .hbtn:hover{background:#f5f7fa;border-color:#c7d5e4} /* O avatar do PORTI, no topo, sempre visivel. */ .pface{width:34px;height:34px;border-radius:50%;flex:0 0 auto;border:0; cursor:pointer;background:linear-gradient(135deg,#1d3d5c,#2bb7f0);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800; font-size:var(--fs-aux);letter-spacing:.02em; box-shadow:0 2px 8px rgba(43,183,240,.25)} .hbtn .badge{background:var(--bad);color:#fff;border-radius:9px;padding:1px 6px; margin-left:6px;font-size:11px;font-weight:800} /* ── CONTEUDO ────────────────────────────────────────────────────────── */ .workspace{padding:24px 26px max(140px, calc(var(--porti-alto, 0px) + 26px))} .top h1{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em} .sub{font-size:var(--fs-nav);margin-top:5px} .panel,.kpi{border-radius:var(--r-lg);box-shadow:var(--sombra); border-color:var(--line)} .panel{padding:18px} .panel h2{font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em} .kpi{padding:16px 18px;position:relative} .kpi b{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em; line-height:1.2} .kpi span{font-size:var(--fs-aux);color:var(--muted);font-weight:500} .kpis{gap:14px;margin:18px 0} /* ## Quatro KPI e a forma do prototipo ##; cinco continuam a caber. */ .kpis.q4{grid-template-columns:repeat(4,1fr)} .grid2,.grid3{gap:14px;margin-top:14px} .banner{border-radius:var(--r);padding:13px 15px;background:var(--blue-claro); border-color:#cfe0fb;font-size:var(--fs-aux);line-height:1.5} .chip{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700; letter-spacing:.02em} .chip.ok{background:var(--ok-bg)} .chip.warn{background:var(--warn-bg)} .chip.bad{background:var(--bad-bg)} .btn,.hbtn{border-radius:9px} .btn.primary{box-shadow:0 2px 8px rgba(31,111,235,.25)} .btn.primary:hover{background:var(--blue-esc)} .tablewrap{border-radius:var(--r);box-shadow:var(--sombra);border-color:var(--line)} .table th{font-size:11px;letter-spacing:.09em;text-transform:uppercase; padding:11px 12px;font-weight:700} .table td{padding:12px} .table tbody tr:hover{background:#fafcff} .filter{border-radius:999px;padding:7px 13px;font-weight:500} .row{padding:11px 0} .vazio,.erro,.negado,.plano,.dep{border-radius:var(--r);padding:26px 20px; text-align:center;line-height:1.55} .vazio b{font-size:var(--fs-base)} /* ── COMPONENTES QUE O ACTO PEDE E A FOLHA NAO TINHA ─────────────────── */ /* 1 · KANBAN (Funil) */ /* ── [B45 · 25/09/2026] ## DOIS CARTOES FICAVAM FORA DO ECRA. ## * * ACTO ... PROPRIETARIO, 25/09/2026: «APENAS O PRIMEIRO CARD está * clicável/abrindo o Cliente 360 (...) Todos os cards reais de * clientes exibidos no Kanban devem ser clicáveis.» * * ## MEDIDO EM 25/09, com `elementFromPoint` em tres ecras: ## * 1280x800 .... o kanban pede 1444px, o painel da'-lhe 907 -> 6 de 8 * 1366x768 .... 1444 contra 993 -> 6 de 8 * 1536x864 .... 1444 contra 1163 -> 7 de 8 * * ## O `onclick` de cada cartao estava CERTO ## -- indice proprio, id real. * O que falhava era alcanca-lo: `minmax(230px,1fr)` x 6 colunas + 5 folgas * da' 1440px, e o que passa da caixa de rolagem ## nao recebe o clique ##. * Quem olha ve' a coluna cortada e conclui que o cartao nao responde. * * 150px x 6 + 60 = 960: cabe nos ecras medidos. ## A rolagem horizontal * fica ## -- e' ela que salva os ecras estreitos e as carteiras com mais * etapas -- mas deixa de ser obrigatoria para chegar a um cliente. */ .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr); gap:12px;overflow-x:auto;padding:4px 2px 10px;margin-top:14px; -webkit-overflow-scrolling:touch} .kcol{background:#eef2f7;border:1px solid var(--line);border-radius:var(--r); padding:12px;min-height:180px;display:flex;flex-direction:column} .kcol>h3{margin:0 0 10px;font-size:var(--fs-aux);font-weight:700; display:flex;align-items:center;gap:7px;color:#3d5570} .kcol>h3 i{font-style:normal;background:#fff;border:1px solid var(--line); border-radius:999px;padding:1px 8px;font-size:11px;color:var(--muted)} .kcard{background:#fff;border:1px solid var(--line);border-radius:10px; padding:11px;margin-bottom:8px;box-shadow:var(--sombra);cursor:pointer} .kcard:hover{box-shadow:var(--sombra-md)} .kcard b{display:block;font-size:var(--fs-nav);font-weight:600} .kcard p{margin:5px 0 0;font-size:var(--fs-aux);color:var(--muted);line-height:1.45} /* 2 · MESTRE-DETALHE (Cliente 360) */ .split{display:grid;grid-template-columns:320px 1fr;gap:14px;margin-top:14px; align-items:start} .lista{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sombra);overflow:hidden;max-height:74vh; display:flex;flex-direction:column;min-height:0} /* ── [B42 · 25/09/2026] ## O CONTEUDO TEM DE ACABAR ACIMA DO COPILOTO. ## `--porti-alto` traz a altura MEDIDA do widget (ver `tela_corretor.js`); sem ela, reserva-se a do widget minimizado. ## `.split` existe uma unica vez em toda a aplicacao ## -- nesta tela -- por isso as Telas 1 e 2 nao sao tocadas por esta regra. */ .lista .cab{padding:14px;border-bottom:1px solid var(--line)} .lista .itens{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch} .lista .it{padding:12px 14px;border-bottom:1px solid #f0f4f8;cursor:pointer; display:flex;gap:10px;align-items:flex-start} .lista .it:hover{background:#fafcff} .lista .it.on{background:var(--blue-claro);box-shadow:inset 3px 0 0 var(--blue)} .lista .it b{display:block;font-size:var(--fs-nav);font-weight:600} .lista .it span{font-size:var(--fs-aux);color:var(--muted)} .av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;background:#e8eef6; color:#3d5570;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:var(--fs-aux)} /* 3 · ABAS */ .abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:2px 0 14px; overflow-x:auto;-webkit-overflow-scrolling:touch} .abas button{border:0;background:none;padding:10px 14px;font-size:var(--fs-nav); color:var(--muted);cursor:pointer;border-bottom:2px solid transparent; white-space:nowrap;font-weight:500} .abas button.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600} /* 4 · CARTAO DE IMOVEL */ .imgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;margin-top:14px} .imcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column} .imcard:hover{box-shadow:var(--sombra-md)} .imcard .foto{height:158px;background:#e8eef6 center/cover no-repeat; position:relative;display:flex;align-items:center;justify-content:center; color:#93a7bd;font-size:var(--fs-aux)} .imcard .foto .chip{position:absolute;top:10px;left:10px} .imcard .corpo{padding:13px;flex:1;display:flex;flex-direction:column} .imcard .corpo b{font-size:var(--fs-nav);font-weight:600;line-height:1.35} .imcard .corpo .onde{font-size:var(--fs-aux);color:var(--muted);margin:3px 0 8px} .imcard .preco{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em} .imcard .feat{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0; font-size:var(--fs-aux);color:var(--muted)} .imcard .accoes{margin-top:auto;padding-top:11px} /* 5 · CALENDARIO */ .calend{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px} .calend .dh{text-align:center;font-size:11px;color:var(--muted);padding:5px 0; font-weight:700;letter-spacing:.06em} .calend .d{aspect-ratio:1;border:1px solid var(--line);border-radius:9px; background:#fff;display:flex;flex-direction:column;align-items:center; justify-content:center;font-size:var(--fs-aux);cursor:pointer;gap:3px} .calend .d:hover{border-color:#c7d5e4} .calend .d.fora{background:#fafbfd;color:#b7c4d2;border-color:#f0f4f8} .calend .d.hoje{border-color:var(--blue);color:var(--blue);font-weight:700} .calend .d.on{background:var(--blue);border-color:var(--blue);color:#fff} .calend .d i{width:5px;height:5px;border-radius:50%;background:var(--blue); font-style:normal} .calend .d.on i{background:#fff} /* 6 · LINHA DE AGENDA / TAREFA */ .evt{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f0f4f8; align-items:flex-start} .evt:last-child{border:0} .evt .hora{flex:0 0 58px;font-size:var(--fs-aux);font-weight:700;color:#3d5570} .evt .ic{width:32px;height:32px;border-radius:9px;flex:0 0 auto;background:#eef3f9; display:flex;align-items:center;justify-content:center;font-size:var(--fs-nav)} .evt .qq{flex:1;min-width:0} .evt .qq b{display:block;font-size:var(--fs-nav);font-weight:600} .evt .qq span{font-size:var(--fs-aux);color:var(--muted)} /* 7 · ESTADO VAZIO COM FIGURA */ .vazio .fig{width:52px;height:52px;border-radius:50%;background:#eef3f9; margin:0 auto 12px;display:flex;align-items:center;justify-content:center; font-size:var(--fs-h3);color:#93a7bd} /* 8 · PENDENCIA DE INTEGRACAO — o padrao unico do acto */ .pend-int{display:flex;gap:12px;align-items:flex-start;padding:14px; background:var(--warn-bg);border:1px solid #efdcb0;border-radius:var(--r); margin-top:12px} .pend-int .txt{flex:1;min-width:0;font-size:var(--fs-aux);color:#6f5312; line-height:1.5} .pend-int .txt b{display:block;font-size:var(--fs-nav);color:#5c440d; margin-bottom:3px} /* 9 · MINI-FUNIL do Meu Dia */ .mfunil{display:flex;flex-direction:column;gap:9px;margin-top:6px} .mfunil .et{display:grid;grid-template-columns:96px 1fr 42px;align-items:center; gap:10px;font-size:var(--fs-aux)} .mfunil .tr{height:9px;background:#eef2f6;border-radius:999px;overflow:hidden} .mfunil .tr i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--cyan))} .mfunil .n{text-align:right;font-weight:700} /* ── RESPONSIVO ──────────────────────────────────────────────────────── */ @media(max-width:1180px){ .kpis,.kpis.q4{grid-template-columns:repeat(2,1fr)} .grid2,.grid3{grid-template-columns:1fr} .split{grid-template-columns:1fr} .lista{max-height:none} } @media(max-width:700px){ .workspace{padding:18px 15px max(130px, calc(var(--porti-alto, 0px) + 26px))} .top h1{font-size:var(--fs-xl)} .kpis,.kpis.q4{grid-template-columns:1fr 1fr;gap:10px} .imgrid{grid-template-columns:1fr} .kanban{grid-auto-columns:82%} header{padding:0 12px;gap:8px} .search{font-size:var(--fs-aux);padding:9px 11px} /* ## O topo nao pode empurrar o titulo para fora. ## Em ecra estreito sobram a gaveta, a busca, o PORTI e as notificacoes. */ .hbtn.some{display:none} .calend .d{font-size:11px} } /* ## O PORTI flutuante NAO PODE COBRIR CONTEUDO. ## ACTO ... PROPRIETARIO, 23/09/2026: «nao cobrir botoes essenciais; nao cobrir tabelas; nao impedir scroll; pode minimizar.» A `.workspace` ja reserva 140px em baixo; em ecra pequeno o copiloto encolhe e encosta, para nunca tapar uma linha de tabela. */ .porti:not(.msg){border-radius:var(--r-lg);box-shadow:var(--sombra-md); max-height:min(68vh,520px)} @media(max-width:700px){ .porti:not(.msg){right:10px;left:10px;width:auto;max-height:52vh} .rail{right:10px} } /* ── [B16] O CARTAO DE IMOVEL ESTAVA ESCURO NUMA AREA CLARA ─────────── Medido: `.cimovel` nascia com `#0f2a3c` -- a paleta do canal, nao a da area principal. ## Sobre fundo claro, um cartao azul-escuro le-se como um erro ##, e o prototipo aprovado pede «cards brancos». A estrutura fica: muda a pele. */ .cimovel{background:#fff;border-color:var(--line);border-radius:var(--r-lg); box-shadow:var(--sombra)} .cimovel:hover{box-shadow:var(--sombra-md)} .cim-foto{background:#eef3f8} .cim-foto.vazia::after{color:#93a7bd} .cim-corpo{padding:14px} .cim-titulo{font-size:var(--fs-nav);font-weight:600;color:var(--ink)} .cim-onde{font-size:var(--fs-aux);color:var(--muted)} .cim-preco{font-size:var(--fs-lg);font-weight:700;color:var(--ink); letter-spacing:-.02em} .cim-preco.sem{color:var(--muted);font-weight:500;font-size:var(--fs-aux)} .cim-nota{color:var(--muted);font-weight:500} .cim-ficha{font-size:var(--fs-aux);color:var(--muted)} .cim-escopo{font-size:11px;color:#8a9cb0;border-top:1px solid #f0f4f8; padding-top:9px;letter-spacing:.04em;text-transform:uppercase} .grelha-imoveis{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))} /* Formularios: a mesma pele dos cartoes. */ .formlinha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;margin:10px 0} .formlinha label{display:block;font-size:11px;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:700} .formlinha input,.formlinha select,.lista .cab input{width:100%;padding:9px 11px; border:1px solid var(--line);border-radius:9px;font-size:var(--fs-nav); font-family:inherit;background:#fff;color:var(--ink)} .formlinha input:focus,.formlinha select:focus,.lista .cab input:focus{ outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,235,.12)} .accoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} /* ── [B19 · 23/09/2026] A TIRA DE SEPARADORES CONTIA-SE, MAS CONTAVA ──── Medido em Chromium a 500 px com os doze separadores do Time de Vendas: `.workspace` reportava `scrollWidth 509` contra `clientWidth 485` -- 24 px que ## ninguem via ## (o documento nao rolava e nada ficava inacessivel), mas que existiam na conta. A tira e' `display:flex; overflow-x:auto`, e um contentor flex sem `min-width:0` ## pode empurrar o pai ##. ## Nao e' o mesmo defeito do B14 ##, e e' a mesma familia: falta de limite onde o conteudo e' maior do que a caixa. */ .abas{min-width:0;max-width:100%;flex-wrap:nowrap} .abas button{flex:0 0 auto} .panel>.abas,.workspace>.abas{width:100%} /* ── [B19] O CABECALHO COM ACCAO NAO QUEBRAVA LINHA ─────────────────── Medido a 500 px: `.top` media 455 px de caixa e ## 494 de conteudo ##. E' `flex` com `space-between`, e o titulo mais o botao «+ Convidar para a equipa» nao cabem lado a lado num telemovel -- o botao saia para fora. ## Era o unico transbordo real da pagina ##: as tabelas ja rolavam dentro da sua caixa e os separadores tambem. */ /* ## E o ponto de corte e 1180, nao 700. ## Medido a 834: o mesmo `.top` media 552 de caixa e 572 de conteudo -- o tablet tinha o defeito na mesma, so que 20 px em vez de 39. ## Corrigir so o telemovel era corrigir onde eu tinha olhado ##, e nao onde o defeito estava. */ @media(max-width:1180px){ .top{flex-wrap:wrap;gap:10px} .top>div:first-child{flex:1 1 100%;min-width:0} .top .accoes{margin-top:0} } @media(max-width:700px){ .top .btn{flex:1 1 auto} } /* ════════════════════════════════════════════════════════════════════════ [B21 · 23/09/2026] ACABAMENTO PREMIUM — ÍCONES, KPIs E CARTÕES ACTO ... PROPRIETARIO, 23/09/2026: «A implementação atual está funcional, porém ainda parece uma interface técnica de validação. Queremos aparência de SaaS premium final.» ════════════════════════════════════════════════════════════════════════ */ /* ── ÍCONES ──────────────────────────────────────────────────────────── */ .ic-svg{flex:0 0 auto;vertical-align:-.18em} .nav button .ic-svg{opacity:.75;margin-right:2px} .nav button.active .ic-svg,.nav button:hover .ic-svg{opacity:1} .panel h2 .ic-svg{color:var(--blue);opacity:.9} .abas button .ic-svg{margin-right:5px;opacity:.7} .abas button.on .ic-svg{opacity:1} /* ── KPI RICO ────────────────────────────────────────────────────────── */ .kpi-rico{display:flex;gap:13px;align-items:flex-start;position:relative; overflow:hidden} .kpi-rico::after{content:"";position:absolute;inset:auto 0 0 0;height:3px; background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0; transition:opacity .15s} .kpi-rico:hover::after{opacity:1} .kpi-ic{width:40px;height:40px;border-radius:11px;flex:0 0 auto; display:flex;align-items:center;justify-content:center; background:var(--blue-claro);color:var(--blue)} .kpi-ic.ok{background:var(--ok-bg);color:var(--ok)} .kpi-ic.warn{background:var(--warn-bg);color:var(--warn)} .kpi-ic.bad{background:var(--bad-bg);color:var(--bad)} .kpi-txt{min-width:0} .kpi-rico b{font-size:var(--fs-h3);line-height:1.15} .kpi-rico small{display:flex;align-items:center;gap:3px;margin-top:5px; font-size:11px;font-weight:600} /* ── CARTÃO DE IMÓVEL: a foto passa a mandar ─────────────────────────── */ .cim-foto{aspect-ratio:16/10} .cimovel{transition:transform .14s,box-shadow .14s} .cimovel:hover{transform:translateY(-2px)} .cim-foto.vazia{background:repeating-linear-gradient(45deg,#eef3f8,#eef3f8 10px, #e6edf5 10px,#e6edf5 20px)} .cim-foto.vazia::after{content:"sem foto";color:#8a9cb0;font-weight:600} .cim-selo{position:absolute;top:10px;left:10px;z-index:2} .cim-foto{position:relative} /* ── LINHA DE TAREFA / APROVAÇÃO com ícone ───────────────────────────── */ .evt .ic{background:var(--blue-claro);color:var(--blue)} .evt .ic.warn{background:var(--warn-bg);color:var(--warn)} .evt .ic.bad{background:var(--bad-bg);color:var(--bad)} .evt .ic.ok{background:var(--ok-bg);color:var(--ok)} .evt:hover{background:#fafcff} .evt{border-radius:9px;padding:12px 10px;margin:0 -10px} /* ── BARRA DE CONVERSÃO (funil) ──────────────────────────────────────── */ .conv{display:flex;gap:3px;margin-top:10px;height:78px;align-items:flex-end} .conv .et{flex:1;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;gap:5px} .conv .bar2{width:100%;border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--blue),#4d93ff);min-height:4px} .conv .et span{font-size:10px;color:var(--muted);text-align:center; line-height:1.2} .conv .et b{font-size:var(--fs-aux)} /* ── SAUDAÇÃO DO TOPO ────────────────────────────────────────────────── */ .saud{display:flex;justify-content:space-between;align-items:flex-end; gap:14px;flex-wrap:wrap} .saud .data{font-size:var(--fs-aux);color:var(--muted);text-transform:capitalize} /* ── CABEÇALHO: busca maior, botões menos soltos ─────────────────────── */ header .search{max-width:none;flex:1} header .hgrupo{display:flex;align-items:center;gap:8px; padding-left:12px;margin-left:4px;border-left:1px solid var(--line)} /* ── ESTADO VAZIO com ícone vetorial ─────────────────────────────────── */ .vazio .fig{color:#93a7bd;background:#f2f6fa} .vazio .fig .ic-svg{width:24px;height:24px} /* ── SKELETON mais discreto ──────────────────────────────────────────── */ .skel{border-radius:8px} @media(max-width:700px){ .kpi-ic{width:34px;height:34px;border-radius:9px} .kpi-rico{gap:10px} .kpi-rico b{font-size:var(--fs-xl)} .conv{height:62px} } .nav button{display:flex;align-items:center;gap:10px} .nav button .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .nav button .pend{flex:0 0 auto} /* ══ B22 · A LIGAÇÃO GERENTE ↔ EQUIPE ↔ CORRETOR ═══════════════════════ * * ACTO ... PROPRIETARIO, 23/09/2026: «Cards com hierarquia. Avatares. * Badges. Gráficos onde agregam informação. (...) Nada de * páginas parecendo relatório administrativo cru.» * * ## Nada aqui inventa cor. ## Todos os valores saem dos tokens já * declarados no topo deste ficheiro -- uma paleta nova ao lado da que * existe seria duas paletas. */ /* Oito KPI numa faixa: quatro por linha em ecrã largo, dois em tablet, um em telemóvel. ## Nunca cinco apertados. ## */ .kpis8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0} /* ── O CARTÃO DE UMA PESSOA DA EQUIPE ───────────────────────────────── */ .grelha-pessoas{display:grid;gap:14px;margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .pcard{background:var(--p);border:1px solid var(--line); border-radius:var(--r-lg);padding:15px;box-shadow:var(--sombra); display:flex;flex-direction:column;gap:11px; transition:transform .14s,box-shadow .14s,border-color .14s} .pcard.clicavel{cursor:pointer} /* [TELA 20] o card inteiro abre a conversa */ .pcard.clicavel:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .pcard:hover{transform:translateY(-2px);box-shadow:var(--sombra-md); border-color:#c7d9ef} /* ## Quem está inactivo não desaparece: fica sóbrio. ## Esconder seria perder a informação de que existe e não está a operar. */ .pcard-off{opacity:.72;background:#fbfcfd} .pcard-top{display:flex;gap:10px;align-items:center} .pcard-id{min-width:0;flex:1} .pcard-id b{display:block;font-size:var(--fs-base);font-weight:650; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pcard-id .desc{margin:1px 0 0;font-size:11px;text-transform:capitalize} .pcard-num{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 6px; padding:11px 0;border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .pcard-num div{text-align:center;min-width:0} .pcard-num b{display:block;font-size:var(--fs-xl);font-weight:700; letter-spacing:-.02em;line-height:1.1} .pcard-num span{font-size:10px;color:var(--muted);letter-spacing:.03em} .pcard-meta{display:flex;flex-direction:column;gap:5px} .pcard-meta-r{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--fs-aux);color:var(--muted)} .pcard-meta-r b{color:var(--ink);font-weight:700} .pcard-al{display:flex;gap:5px;flex-wrap:wrap} .pcard-ac{margin:0;flex-wrap:wrap;gap:6px} .pcard-ac .btn{font-size:11px;padding:6px 9px} /* ── BARRA DE PROGRESSO ── uma, e serve meta e actividade ───────────── */ .barra{height:7px;border-radius:999px;background:#eaf0f7;overflow:hidden} .barra i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .3s ease} .barra i.ok{background:linear-gradient(90deg,var(--ok),#5fd0a4)} .barra i.bad{background:linear-gradient(90deg,var(--bad),#f08ea0)} /* ── DRILL-DOWN: a ficha gerencial de uma pessoa ────────────────────── */ .drill{margin-top:16px;border-left:3px solid var(--blue)} .drill-topo{margin-bottom:12px} .drill-cab{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .drill-cab .av{width:52px;height:52px;font-size:var(--fs-base)} .drill-id{min-width:0;flex:1} .drill-id h2{margin:0 0 5px;font-size:var(--fs-h2);letter-spacing:-.02em} .drill-sub{display:flex;gap:7px;align-items:center;flex-wrap:wrap} /* ## O aviso de que isto NÃO é impersonação fica à vista, sempre. ## */ .drill-cx{margin-top:9px;background:var(--blue-claro);border-radius:var(--r); padding:9px 12px;line-height:1.5;display:flex;gap:6px;align-items:flex-start} .drill-kpis{grid-template-columns:repeat(4,1fr)} .drill-pol{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line); line-height:1.5;display:flex;gap:6px;align-items:flex-start} /* ── CONTAGENS DE ACTIVIDADE ── barras deitadas, uma por tipo ───────── */ .conv-l{display:grid;grid-template-columns:130px 1fr 34px;gap:10px; align-items:center;padding:6px 0} .conv-l span{font-size:var(--fs-aux);color:var(--muted); text-transform:capitalize} .conv-l b{text-align:right;font-size:var(--fs-aux)} @media(max-width:1180px){ .kpis8,.drill-kpis{grid-template-columns:repeat(2,1fr)} } @media(max-width:700px){ .kpis8,.drill-kpis{grid-template-columns:1fr} .pcard-num b{font-size:var(--fs-base)} .conv-l{grid-template-columns:100px 1fr 30px} .drill-cab .av{width:44px;height:44px} } /* ── B22 · A CONVERSA INTERNA ───────────────────────────────────────── * Duas colunas: os fios à esquerda, o fio aberto à direita. ## Em * telemóvel passa a uma coluna ##, com os fios em cima -- e não a uma * lista que esconde a conversa. */ .conversa{display:grid;grid-template-columns:270px 1fr;gap:0; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; height:min(62vh,540px);background:var(--p)} .conv-fios{border-right:1px solid var(--line);overflow-y:auto; background:#fbfcfe} .fio{display:flex;gap:10px;align-items:center;width:100%;text-align:left; padding:11px 12px;border:0;border-bottom:1px solid var(--line); background:transparent;cursor:pointer;position:relative} .fio:hover{background:#f2f7fd} .fio.on{background:var(--blue-claro)} .fio.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--blue)} .fio-t{min-width:0;flex:1} .fio-t b{display:block;font-size:var(--fs-aux);font-weight:650; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fio-t span{display:block;font-size:11px;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fio-n{font-style:normal;background:var(--bad);color:#fff;border-radius:999px; min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:800; display:flex;align-items:center;justify-content:center} .av-mural{background:var(--blue-claro);color:var(--blue); display:flex;align-items:center;justify-content:center} .conv-fio{display:flex;flex-direction:column;min-width:0; min-height:0} /* [TELA 20] item da grelha: sem isto não rola */ .conv-cab{padding:11px 15px;border-bottom:1px solid var(--line); display:flex;gap:10px;align-items:center;flex-wrap:wrap} .conv-cab b{font-size:var(--fs-base)} .conv-cab .desc{margin:0;flex:1;min-width:120px} .conv-busca{padding:6px 11px;font-size:var(--fs-aux);max-width:220px} .conv-corpo{flex:1;overflow-y:auto;padding:14px 15px;display:flex; flex-direction:column;gap:10px;background:#f7f9fc; min-height:0;overscroll-behavior:contain} /* [TELA 20] rola por si, sem arrastar a página */ .msg{display:flex;gap:9px;align-items:flex-end;max-width:76%} .msg.minha{align-self:flex-end;flex-direction:row-reverse} .msg-b{background:var(--p);border:1px solid var(--line);border-radius:14px; padding:9px 13px;min-width:0;box-shadow:var(--sombra)} .msg.minha .msg-b{background:var(--blue);border-color:var(--blue);color:#fff} .msg-b b{display:block;font-size:11px;color:var(--blue);margin-bottom:2px} .msg-b p{margin:0;font-size:var(--fs-aux);line-height:1.5; overflow-wrap:anywhere} .msg-m{display:block;margin-top:4px;font-size:10px;color:var(--muted)} .msg.minha .msg-m{color:#cfe2ff} .msg.fixada .msg-b{border-color:var(--warn);background:var(--warn-bg)} .conv-escrever{display:flex;gap:9px;padding:11px 15px; border-top:1px solid var(--line);align-items:flex-end} .conv-escrever textarea{flex:1;resize:vertical;min-height:40px; border:1px solid var(--line);border-radius:10px;padding:9px 12px; font:inherit;font-size:var(--fs-aux);color:var(--ink)} .conv-escrever textarea:focus{outline:0;border-color:var(--blue)} @media(max-width:860px){ .conversa{grid-template-columns:1fr;height:auto} .conv-fios{max-height:170px;border-right:0; border-bottom:1px solid var(--line);display:flex;overflow-x:auto} .fio{min-width:190px;border-bottom:0;border-right:1px solid var(--line)} .conv-corpo{max-height:46vh} .msg{max-width:88%} } /* fixadas, menções, partilha e referência dentro da conversa */ .conv-fix{padding:9px 15px;background:var(--warn-bg);color:#7a5408; font-size:var(--fs-aux);border-bottom:1px solid var(--line); display:flex;gap:6px;align-items:flex-start;line-height:1.45} .conv-men{background:var(--blue-claro);color:#1558c4} .conv-bt{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .conv-fx{display:flex;gap:5px;align-items:center;font-size:11px; color:var(--muted);white-space:nowrap} .conv-part{padding:11px 15px;border-top:1px solid var(--line); background:#fbfcfe} .conv-part .formlinha{margin:0} .msg-ref{display:inline-flex;gap:5px;align-items:center;margin-top:6px; padding:4px 9px;border-radius:999px;background:var(--blue-claro); color:var(--blue);font-size:11px;font-weight:600} .msg.minha .msg-ref{background:rgba(255,255,255,.18);color:#eaf2ff} /* Cinco KPI: o Meu Dia do corretor tem cinco, e cinco não é quatro mais um. */ .kpis8.q5{grid-template-columns:repeat(5,1fr)} /* O painel que o acto manda destacar: a Próxima Melhor Ação. */ .panel.destaque{margin-top:14px;border-color:#cfe0fb; background:linear-gradient(180deg,#f7fbff,var(--p) 70px)} .panel.destaque > h2{color:var(--blue)} @media(max-width:1180px){ .kpis8.q5{grid-template-columns:repeat(3,1fr)} } @media(max-width:700px){ .kpis8.q5{grid-template-columns:1fr} } /* Cliente 360: a linha da lista ganha o que a pessoa procura e dois selos. */ .it-quer{display:flex;gap:4px;align-items:center;font-size:11px; color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .it-selos{display:flex;flex-direction:column;gap:4px;align-items:flex-end; flex:0 0 auto} .it-selos .chip{font-size:10px;padding:3px 8px} /* ── B22 · A LINHA DE EVENTO EM ECRÃ ESTREITO ───────────────────────── * Medido a 500px na Agenda do Corretor: ## 126px de transbordo ##. `.evt` * é uma linha que não quebra -- hora, ícone, texto, chip e botões -- e em * telemóvel os dois últimos empurram tudo para fora. ## O texto já * encolhia (`min-width:0`); o que faltava era deixar a linha quebrar. ## */ @media(max-width:700px){ .evt{flex-wrap:wrap} .evt .qq{flex:1 1 100%;order:3;width:100%} .evt .hora{flex:0 0 auto;order:1} .evt .ic{order:2} .evt .chip{order:4} .evt .acoes,.evt .accoes{order:5;margin:6px 0 0;width:100%;flex-wrap:wrap} /* ## Um botão nunca é mais largo do que o que o contém. ## */ .evt .btn{max-width:100%} .tablewrap{overflow-x:auto} } /* ── B22 · O ÚLTIMO TRANSBORDO: `.split` E A PALAVRA COMPRIDA ───────── * Medido a 500px: `.split` é `320px 1fr` e não encolhe abaixo dos 320 -- * ## 27px a mais do que o ecrã dá ##. Em telemóvel a lista e a ficha * passam a empilhar, que é como um mestre-detalhe se lê num telefone. * E um nome sem espaços (um e-mail, um código) rompia a caixa por 4px: * ## a palavra quebra, a caixa não. ## */ @media(max-width:760px){ .split{grid-template-columns:1fr} .split .lista{max-height:none} } .evt .qq b,.evt .qq span,.it b,.it span{overflow-wrap:anywhere} /* ── B22 · `.evt` QUEBRA QUANDO PRECISA, EM QUALQUER LARGURA ────────── * Medido a 834px na Agenda: `.evt .qq` colapsava a ## largura zero ## e o * conteúdo (nome, imóvel, dois botões) saía por fora -- 44px de transbordo * dentro de um mestre-detalhe já empilhado. Uma regra presa a um ponto de * corte não resolve isto: ## o espaço que sobra depende do painel, não do * ecrã ##. Então a linha quebra quando precisa, e não quando o telemóvel * chega. */ .evt{flex-wrap:wrap} .evt .qq{flex:1 1 180px;min-width:0} .evt .acoes,.evt .accoes{flex-wrap:wrap;max-width:100%;margin-top:6px} .evt .btn{max-width:100%} /* ── B22 · O ESTILO INLINE GANHAVA À MEDIA QUERY ────────────────────── * Medido a 500px: `.split` tinha `grid-template-columns` ## escrito no * atributo `style` ## em quatro telas, e um estilo inline vence qualquer * regra de folha -- por mais específica que ela seja. O mestre-detalhe * continuava em duas colunas num ecrã de 500px, e a segunda ficava com * 126px: ## texto e botões saíam por fora ##. * * A largura passa a ser uma CLASSE, e uma classe a folha sabe desfazer. */ .split-larga{grid-template-columns:330px 1fr} @media(max-width:1180px){ .split-larga{grid-template-columns:1fr} } /* [B23] As acções da tela sobem para o cabeçalho da casca, ao lado do selo. */ .top .top-acoes{margin:0;flex-wrap:wrap;justify-content:flex-end} .top{gap:12px;align-items:flex-start} @media(max-width:700px){ .top .top-acoes{width:100%;justify-content:flex-start} } /* ══ B23 · GRÁFICOS ═══════════════════════════════════════════════════ * Cinco formas, a paleta da casa e nenhuma cor nova. ## Sem aspecto de * template genérico: ## fundo transparente, eixo implícito, rótulo em * baixo, número em cima -- é assim que se lê um painel de operação. */ .graf{margin-top:12px} .graf-barras{display:flex;align-items:flex-end;gap:6px;min-height:150px; padding-top:6px} .graf-barras.compacto{min-height:96px} .gb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:flex-end;gap:5px;border-radius:8px;padding:4px 2px} .gb b{font-size:var(--fs-aux);font-weight:700;line-height:1} .gb i{width:100%;max-width:46px;border-radius:6px 6px 3px 3px;display:block; transition:opacity .14s} .gb span{font-size:10px;color:var(--muted);text-align:center;line-height:1.15; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .gb.clicavel{cursor:pointer} .gb.clicavel:hover{background:#f2f7fd} .gb.clicavel:hover i{opacity:.82} .graf-linha svg{width:100%;height:auto;display:block} .graf-pe{display:flex;justify-content:space-between;align-items:center; font-size:11px;color:var(--muted);margin-top:4px} .graf-pe b{font-weight:700;font-size:var(--fs-aux)} .graf-pe b.ok{color:var(--ok)} .graf-pe b.bad{color:var(--bad)} .graf-funil{display:flex;flex-direction:column;gap:9px;margin-top:12px} .gf{padding:7px 9px;border-radius:9px;margin:0 -9px} .gf.clicavel{cursor:pointer} .gf.clicavel:hover{background:#f7fafd} .gf-r{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--fs-aux);color:var(--muted);margin-bottom:4px} .gf-r b{color:var(--ink);font-size:var(--fs-base);font-weight:700} .gf-t{height:12px;border-radius:999px;background:#eef3f8;overflow:hidden} .gf-t i{display:block;height:100%;border-radius:999px;transition:width .3s} .gf-c{font-size:10px;color:var(--muted);margin-top:3px;display:flex; align-items:center;gap:3px} .graf-rosca{display:flex;gap:16px;align-items:center;flex-wrap:wrap; margin-top:12px} .graf-rosca svg{width:132px;height:132px;flex:0 0 auto} .graf-rosca .rt{font-size:19px;font-weight:700;fill:var(--ink)} .graf-rosca .rl{font-size:8px;fill:var(--muted)} .graf-leg{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px} .graf-leg div{display:flex;align-items:center;gap:7px;font-size:var(--fs-aux); color:var(--muted)} .graf-leg i{width:9px;height:9px;border-radius:3px;flex:0 0 auto} .graf-leg b{margin-left:auto;color:var(--ink)} .graf-meta{display:flex;flex-direction:column;gap:13px;margin-top:12px} .gm-r{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--fs-aux);color:var(--muted);margin-bottom:5px} .gm-r b{color:var(--ink);font-weight:700} .gm-p{font-size:11px;color:var(--muted);margin-top:4px} /* ## Um cartão que parece acionável tem de o ser -- e de o parecer. ## */ .kpi.clicavel{cursor:pointer;transition:transform .14s,box-shadow .14s, border-color .14s} .kpi.clicavel:hover{transform:translateY(-2px);box-shadow:var(--sombra-md); border-color:#c7d9ef} .kpi.clicavel:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .kpi.clicavel::after{opacity:.55} @media(max-width:700px){ .graf-barras{min-height:120px;gap:4px} .gb span{font-size:9px} .graf-rosca{justify-content:center} } /* [B23] O cartão do kanban abre o cliente: se abre, tem de o parecer. */ .kcard.clicavel{cursor:pointer;transition:border-color .14s,box-shadow .14s} .kcard.clicavel:hover{border-color:var(--blue);box-shadow:var(--sombra)} /* ══ [B25 · 23/09/2026] A LINHA DE PAINEL E AS GRELHAS DE DOIS E TRES ══ * * ACTO ... PROPRIETARIO, 23/09/2026: «Estruturar com cards claros e * acionaveis (...) manter todos com o mesmo alinhamento.» * * `.it` so existia dentro de `.lista`; a superficie da imobiliaria usa-o * solto, dentro do painel, para «icone · texto · accao». E `.kpis` e' uma * grelha de CINCO: dois cartoes numa grelha de cinco ficavam encostados a * esquerda com tres buracos. ## Nenhuma regra existente foi alterada. ## */ /* ── [B25e · 23/09/2026] ## O SELECTOR PEDIA FILHO DIRECTO, E AS LINHAS * VIVEM DENTRO DE UM `div` DE CARREGAMENTO. ## ───────────────────── * * ACTO ... PROPRIETARIO, 23/09/2026: «no print os textos dos nos * aparecem colados, por exemplo "Imobiliária de Validação * [DEMO]Organização".» * * ## A CAUSA. ## `.panel > .it` e' filho DIRECTO. Toda a linha desenhada * por `leia()` nasce dentro de `
`, que e' o alvo do * carregamento -- logo `.it` e' NETO do painel, a regra nao pegava, o `` * ficava em linha e o nome colava-se ao tipo. ## As linhas estaticas (as * que nao carregam nada) pegavam, e por isso o defeito era intermitente ##: * apareceu na Organizacao e nao nas regras da Distribuicao. * * O descendente resolve-o sem tocar em mais nada. */ /* ── [B25e · segunda medicao] ## `.it` NAO ERA MINHA. ## ──────────────── * * A primeira correccao alargou `.panel > .it` para `.panel .it` -- e `.it` * ## ja existia, e e do GERENTE ##: as listas dele (`.lista .it`) vivem * dentro de paineis, e passaram a herdar `display:flex` e uma borda por * linha. Medido: `gerente/excecoes` caiu de 4130 para 900 caracteres e * `gerente/clientes` ## parou o navegador ## a refluir centenas de linhas. * * ## A licao, escrita onde doeu: ## reutilizar um nome de classe curto e * generico e reutilizar o desenho de outra pessoa. A superficie da * Imobiliaria passa a ter a sua -- `.itx` -- e `.it` volta a ser do * gerente, byte a byte. */ .panel .itx{display:flex;gap:10px;align-items:center;padding:11px 2px; border-bottom:1px solid #f0f4f8} .panel .itx:last-child{border-bottom:0} .panel .itx b{display:block;font-size:var(--fs-nav);font-weight:600} .panel .itx .desc{display:block;font-size:var(--fs-aux);color:var(--muted); margin-top:2px} .panel .itx .btn{flex:0 0 auto} /* [B25e] ## Cartao que navega tem de PARECER que navega. ## `.kpi.clicavel` ja tinha cursor; faltava o foco por teclado ser visivel -- sem ele, quem navega por Tab nao sabe onde esta. */ .kpi.clicavel:focus-visible,.kcard.clicavel:focus-visible{ outline:2px solid var(--blue);outline-offset:2px;border-radius:10px} .kpi.clicavel:hover{border-color:var(--blue);box-shadow:var(--sombra)} .kpis.q2{grid-template-columns:repeat(2,1fr)} .kpis.q3{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){ .kpis.q2,.kpis.q3{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .kpis.q2,.kpis.q3{grid-template-columns:1fr} .panel .itx{flex-wrap:wrap} } /* [B25e] O rosto do PORTI no cabecalho do copiloto: mesma altura da linha, e o rotulo do contexto ao lado, sem empurrar o botao de minimizar. */ .phead .agente{gap:6px;min-width:0} .phead .agente-face{width:22px;height:22px;flex:0 0 22px} .phead .agente-nome{font-weight:700;letter-spacing:.02em} .phead .pctx{color:inherit;opacity:.72;font-weight:500;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .phead .pctx::before{content:"— ";opacity:.7} /* ── [B25e · 23/09/2026] ## O COPILOTO ENCOLHIDO NAO OCUPA UMA FAIXA. ## ── * * ACTO ... PROPRIETARIO, 23/09/2026: «nao tampar botao essencial; nao * tampar conteudo importante». * * Medido depois de o pôr a nascer encolhido: 0 sobreposicoes a 1440px na * Imobiliaria, e ainda ## 1 ## a 1024/834/500 -- porque abaixo de 700px a * regra antiga estica-o de margem a margem (`left:10px;right:10px`), e uma * barra de margem a margem cobre sempre a linha que estiver por baixo. * Encolhido ele passa a ser ## um botao de canto ##, e a area de trabalho * reserva altura suficiente para a ultima linha poder subir acima dele. */ .porti:not(.msg).min{width:auto;max-width:min(60vw,320px);left:auto; max-height:none} @media(max-width:700px){ .porti:not(.msg).min{right:10px;left:auto;width:auto;max-width:72vw} .workspace{padding-bottom:max(190px, calc(var(--porti-alto, 0px) + 26px))} } .workspace{scroll-padding-bottom:190px} /* [B25k] O rosto do agente e' uma FOTO: enquadra-se, nao se deforma. `background-size:cover` ja estava; fica explicito o centro, para que o recorte de um retrato circular apanhe a cara e nao o queixo. */ .agente-face{background-size:cover;background-position:center 30%; background-repeat:no-repeat;background-color:#e8eef5} /* ── [B26 · 24/09/2026] A GRELHA DE CARACTERISTICAS DO IMOVEL ─────────── * Reaproveitada do cadastro de `portioli.com.br/empresa`, que as tinha como * caixas numa grelha. Aqui usam a pele do PORTI10: pilula que acende. */ .caracs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .carac{display:inline-flex;align-items:center;gap:7px;padding:7px 12px; border:1px solid var(--line);border-radius:999px;font-size:var(--fs-nav); cursor:pointer;background:#fff;transition:border-color .12s,background .12s} .carac:hover{border-color:var(--blue)} .carac:has(input:checked){border-color:var(--blue);background:var(--blue-claro); font-weight:600} .carac input{accent-color:var(--blue);margin:0} .formlinha textarea{width:100%;padding:10px 12px;border:1px solid var(--line); border-radius:10px;font:inherit;font-size:var(--fs-nav);resize:vertical} .formlinha textarea:focus{outline:2px solid var(--blue);outline-offset:-1px} /* ── [B26 · 24/09/2026] GALERIA DE MODELOS E PRE-VISUALIZACAO ─────────── * ACTO ... PROPRIETARIO, 24/09/2026: «Nao quero apenas nomes em uma lista. * Preciso enxergar cards/miniaturas dos modelos.» * A miniatura e a pre-visualizacao sao DESENHADAS com os tokens desta casa * (--p, --line, --ink, --muted, --blue, --r): ## 0 imagem externa, 0 * dependencia nova, e a mesma paleta clara ja aprovada. ## Bloco ADITIVO: * nenhum selector existente e' redefinido. */ .modelos{display:grid;gap:12px;margin-top:10px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .modelo{display:flex;flex-direction:column;gap:6px;text-align:left; padding:10px;border:1px solid var(--line);border-radius:var(--r); background:var(--p);cursor:pointer;font:inherit;color:var(--ink); transition:border-color .15s,transform .15s,box-shadow .15s} .modelo:hover{border-color:var(--blue);transform:translateY(-2px); box-shadow:var(--sombra-md)} .modelo:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .modelo b{font-size:var(--fs-nav)} .modelo span{font-size:var(--fs-aux);color:var(--muted);line-height:1.4} .modelo i{font-size:var(--fs-meta);color:var(--muted);font-style:normal; text-transform:uppercase;letter-spacing:.4px} .mini{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; background:var(--bg);aspect-ratio:16/10;display:flex;flex-direction:column} .mini-topo{display:flex;gap:3px;align-items:center;padding:4px 6px; background:var(--p);border-bottom:1px solid var(--line)} .mini-topo i{width:5px;height:5px;border-radius:50%; background:var(--m);opacity:.55;display:block} .mini-capa{flex:0 0 46%;background:var(--m);padding:6px; display:flex;flex-direction:column;justify-content:center;gap:3px} .mini-capa b{display:block;height:5px;width:62%;border-radius:2px; background:rgba(255,255,255,.95)} .mini-capa span{display:block;height:3px;width:40%;border-radius:2px; background:rgba(255,255,255,.65)} .mini-capa em{display:block;height:7px;width:28%;border-radius:3px; background:rgba(255,255,255,.95);margin-top:2px} .mini-sec{flex:1;display:flex;gap:4px;padding:4px 6px;align-items:center; background:var(--p)} .mini-sec.par{background:var(--bg)} .mini-sec u{flex:1;height:58%;border-radius:3px;background:var(--line); text-decoration:none;display:block} .prev{border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--p);margin:0 auto;box-shadow:var(--sombra); transition:max-width .2s} .prev.desktop{max-width:100%} .prev.mobile{max-width:320px;border-radius:var(--r-xl); box-shadow:var(--sombra-md),0 0 0 6px var(--bg)} .pv{font-size:var(--fs-aux);color:var(--ink)} .pv-nav{display:flex;justify-content:space-between;align-items:center; gap:8px;padding:8px 12px;border-bottom:1px solid var(--line); font-size:var(--fs-meta)} .pv-nav b{color:var(--m)} .pv-nav span{color:var(--muted)} .pv-capa{padding:26px 16px;background:var(--m);background-size:cover; background-position:center;text-align:center} .pv-capa h3{margin:0 0 6px;font-size:var(--fs-lg);color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35)} .pv-capa p{margin:0 0 12px;font-size:var(--fs-aux);color:rgba(255,255,255,.92); text-shadow:0 1px 5px rgba(0,0,0,.35)} .pv-capa button{border:0;border-radius:var(--r-sm);padding:7px 16px; font-size:var(--fs-aux);background:#fff;color:var(--ink);font-weight:600; cursor:default} .pv-texto{padding:12px 16px;color:var(--ink);line-height:1.55; font-size:var(--fs-aux)} .pv-sec{padding:12px 16px;border-top:1px solid var(--line)} .pv-sec h4{margin:0 0 8px;font-size:var(--fs-aux);color:var(--m); text-transform:capitalize} .pv-blocos{display:flex;gap:8px} .pv-blocos i{flex:1;height:44px;border-radius:var(--r-sm); background:var(--bg);border:1px solid var(--line);display:block} .pv-form{padding:14px 16px;border-top:1px solid var(--line); background:var(--bg)} .pv-form h4{margin:0 0 8px;font-size:var(--fs-aux);color:var(--m)} .pv-form i{display:block;height:26px;border-radius:var(--r-sm); margin-bottom:6px;background:var(--p);border:1px solid var(--line)} .pv-form button{border:0;border-radius:var(--r-sm);padding:8px 16px; font-size:var(--fs-aux);background:var(--m);color:#fff;font-weight:600; cursor:default;width:100%} .pv-form small{display:block;margin-top:8px;color:var(--muted); font-size:var(--fs-meta);line-height:1.4} .prev.mobile .pv-blocos{flex-direction:column} .prev.mobile .pv-capa{padding:20px 12px} /* ── [B27 · 24/09/2026] O EDITOR DE PAGINA ───────────────────────────── * ACTO ... PROPRIETARIO, 24/09/2026: «No editor deve existir visualizacao * da pagina real. (...) Nao alterar o design do sistema administrativo * para resolver isso.» * ## Dois mundos, e continuam dois: ## a esquerda e o administrativo * desta casa; a direita e um `iframe` -- documento proprio, CSS proprio, * ## 0 contaminacao nos dois sentidos ##. Bloco ADITIVO. */ .editor{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:18px;align-items:start;margin-top:10px} @media(max-width:1100px){.editor{grid-template-columns:1fr}} .ed-campos{display:flex;flex-direction:column;gap:14px;max-height:78vh; overflow:auto;padding-right:6px} .ed-grupo{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px; background:var(--p)} .ed-grupo h3{margin:0 0 8px;font-size:var(--fs-ui);color:var(--ink)} .ed-prev{position:sticky;top:12px} .ed-prev .prev{background:var(--p);padding:0} .ed-prev .prev iframe{width:100%;height:78vh;border:0;display:block; background:#F6F2EA} .ed-prev .prev.mobile{max-width:390px} .ed-prev .prev.mobile iframe{height:74vh} .seccoes{display:flex;flex-direction:column;gap:4px;margin-top:6px} .seccao{display:flex;align-items:center;gap:10px;padding:7px 10px; border:1px solid var(--line);border-radius:var(--r-sm);background:var(--p)} .seccao.off{opacity:.55} .seccao label{flex:1;display:flex;align-items:center;gap:8px;cursor:pointer; font-size:var(--fs-aux);margin:0} .seccao input[type=checkbox]{width:auto;margin:0} .setas{display:flex;gap:4px} .setas button{border:1px solid var(--line);background:var(--bg); border-radius:var(--r-sm);width:26px;height:26px;line-height:1;cursor:pointer; color:var(--ink);font-size:13px;padding:0} .setas button[disabled]{opacity:.35;cursor:default} .ed-campos input[type=color]{padding:2px;height:38px} /* [B74 · 26/09/2026] Gestão da equipe (Gerente → Equipe → Corretores): no celular cada pessoa vira um cartão — situação e ações ficam à vista, sem rolagem lateral. Escopo só na classe `.gestaoeq`. */ @media (max-width:760px){ .gestaoeq thead{display:none} .gestaoeq,.gestaoeq tbody,.gestaoeq tr,.gestaoeq td{display:block;width:100%} .gestaoeq tr{border-bottom:1px solid #e2e9ef;padding:10px 12px} .gestaoeq td{border:0;padding:3px 0;overflow-wrap:anywhere} } /* [B75 · 26/09/2026] Tela 13: o card de indicador que está filtrando a lista. */ .kpi.clicavel.sel{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue); background:#f5f9ff} /* [B85 · 26/09/2026] Tela 16 (FERREIRA / Treinamentos): capa da trilha e lista de módulos. Escopo só nestas classes. */ .trilha14{padding-top:0;overflow:hidden} .trilha14 .acapa{height:112px;margin:0 -18px 12px;background-size:cover; background-position:center;border-bottom:1px solid var(--line)} .trilha14 .acapa-vazia{background:linear-gradient(135deg,#0f2a44,#1f6feb)} .trilha14 .amod{align-items:center;gap:8px} .trilha14 .amod-t{flex:1;color:inherit;text-decoration:none} .trilha14 .amod-t:hover{color:var(--blue);text-decoration:underline} .aconteudo p{line-height:1.6;margin:0 0 10px} /* [B86 · 27/09/2026] Academia (Tela 16): cartão e página do curso. */ .curso16{padding-top:0;overflow:hidden} .curso16 .acapa{height:112px;margin:0 -18px 10px;background-size:cover; background-position:center;border-bottom:1px solid var(--line)} .cursopag{padding-top:12px} .cursopag .acapa.grande{height:190px;margin:0 0 12px;border-radius:12px;border:0} .curso16 .amod{align-items:center;gap:8px} .curso16 .amod-t,.panel .amod-t{flex:1;color:inherit;text-decoration:none} .panel .amod-t:hover{color:var(--blue);text-decoration:underline} .cursopag .objetivos{margin:4px 0 10px 18px;padding:0} .quiz16{border-top:1px solid var(--line);margin-top:12px;padding-top:10px} /* [B88] leitura do conteúdo dos módulos da Academia */ .aconteudo h3{font-size:var(--fs-lead,16px);margin:16px 0 6px} .aconteudo ul{margin:0 0 10px 20px;padding:0} .aconteudo li{line-height:1.55;margin:2px 0} /* [TELA 24 · 01/10/2026] Histórico: resumo íntegro, resposta completa a um clique, Markdown desenhado, evento sem resultado dito como tal. */ .hist-resumo{margin-top:3px;line-height:1.5;overflow-wrap:anywhere} .hist-mais{margin-top:4px} .hist-mais summary{cursor:pointer;color:var(--blue);font-size:var(--fs-aux);font-weight:600} .hist-completa{margin-top:6px;padding:9px 12px;background:#f7f9fc;border:1px solid var(--line); border-radius:10px;line-height:1.55;overflow-wrap:anywhere} .hist-completa p{margin:0 0 6px} .hist-completa p:last-child{margin-bottom:0} .hist-completa code{background:#eef3fa;border-radius:5px;padding:1px 5px;font-size:.92em} .hist-lista{margin:4px 0 6px 18px;padding:0} .hist-falta{color:var(--warn);font-style:italic} /* [C4 · 02/10/2026] Empreendimentos & Unidades: a linha do empreendimento abre o detalhe */ .table tr.clicavel{cursor:pointer} .table tr.clicavel:hover td{background:#f2f7fd} .table tr.clicavel:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}