/* A folha da Launivo nova. * * AS CORES SAO AS JA APROVADAS, tiradas de `plataforma-atual/public/assets/sag-design-system.css`. * Nao ha paleta nova aqui: a reforma visual de 09/08/2026 foi rejeitada pelo Henrique e * revertida, e a licao que ficou e que identidade aprovada nao se redesenha sem pedido. * * A MOLDURA E UMA SO, PARA TODAS AS TELAS. Ajuste escrito para uma tela vaza para as outras: * no Sherlock, dois seletores "so daquela tela" produziram dois recheios de folha e tres de * banner, e o dono percebeu na hora que "cada aba tem uma margem". */ :root { --canvas: #f4f6fb; --surface: #fff; --soft: #f8f9fd; --menu: #15172b; --menu-hover: #252944; --no-menu: #dfe2ed; --no-menu-fraco: #aeb4c8; --ink: #1c2030; --muted: #626a7d; --line: #dfe3ed; --line-forte: #cfd5e1; --roxo: #7058e8; --roxo-hover: #5f49d8; --roxo-soft: #f0eeff; --agua: #4dd7be; --ok: #12705d; --ok-soft: #e7f6f2; --aviso: #8a540d; --aviso-soft: #fff5e5; --ruim: #b44752; --ruim-soft: #fcecef; /* AS CORES DE CANAL da caixa unica (item 199): cada rede com a cara dela. */ --canal-whatsapp: #1a7f4b; --canal-whatsapp-soft: #e7f6ec; --canal-direct: #b0307c; --canal-direct-soft: #fbeaf3; --canal-messenger: #2b6cb0; --canal-messenger-soft: #e8f0fd; /* O FUNDO DO AVISO FLUTUANTE. Regua propria, e nao `--ok`/`--ruim`: aquelas sao cores de TEXTO e, no tema escuro, clareiam tanto que o branco por cima some. Esta e' fundo, e nos dois temas ela segura texto branco. */ --aviso-certo: #12705d; --aviso-erro: #b44752; /* A ESCALA DE FOLGA. Espacamento sai daqui, e nao de numero solto no meio do arquivo. */ --raio: 12px; --raio-botao: 9px; } * { box-sizing: border-box; } /* O `hidden` DO NAVEGADOR PERDE PARA QUALQUER CLASSE que declare `display`. * * A regra do navegador e `[hidden] { display: none }`, e `.entrada { display: grid }` tem * especificidade maior — entao o elemento escondido continua aparecendo. Em 16/08 isso * empilhou a tela de entrada em cima da aplicacao, e so apareceu porque eu abri no navegador * em vez de confiar no codigo. * * O `!important` aqui e o unico do arquivo, e e proposital: esconder e esconder. */ [hidden] { display: none !important; } /* A CALHA DA BARRA DE ROLAGEM FICA RESERVADA SEMPRE. * * Sem isto, uma tela alta ganha barra e a outra nao -- e o conteudo PULA 15px na horizontal ao * trocar de aba. Medido em 18/08: Equipe e Homologacao com 968px, Integracoes e Chaves de IA * com 953px, na mesma janela. Nao e' erro de layout de nenhuma das duas; e' a barra aparecendo. * * O preco e' uma faixa de 15px sempre reservada. Vale: o pulo lateral entre abas irmas e' o tipo * de coisa que se ve sem saber nomear, e faz a tela parecer mal feita. */ html { scrollbar-gutter: stable; } /* A ROLAGEM DE TODO O LAUNIVO NO PADRÃO DO MENU (Henrique, 16/10: "os scrolls de todas as * ferramentas poderiam seguir o padrão do menu"): fina, sem setinhas, trilho transparente, e * a barra só aparece com o mouse sobre a área que rola. No Chrome/Edge novos vale o * `scrollbar-color`; as regras `::-webkit-` cobrem os mais antigos (e o verde ao passar). */ :root { --rolagem-barra: rgba(23, 32, 30, .22); --rolagem-verde: rgba(21, 134, 109, .6); } * { scrollbar-width: thin; scrollbar-color: transparent transparent; } *:hover { scrollbar-color: var(--rolagem-barra) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } *:hover::-webkit-scrollbar-thumb { background: var(--rolagem-barra); } ::-webkit-scrollbar-thumb:hover { background: var(--rolagem-verde); } body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.6 Manrope, Inter, "Segoe UI", system-ui, sans-serif; } /* ------------------------------------------------------------------------------- entrar */ .entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--f5); } .cartao-de-entrada { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); padding: var(--f6) var(--f5) var(--f5); box-shadow: 0 8px 30px rgba(21, 23, 43, .07); } .marca-grande { display: flex; align-items: center; gap: var(--f3); margin-bottom: var(--f5); } /* A MARCA DA ENTRADA. 64px porque e a primeira tela que alguem ve e nao disputa espaco com * nada -- no menu ela tem 48 porque ali divide a largura com o nome e o botao de recolher. */ .marca-grande .selo-grande { width: 64px; height: 64px; flex: none; display: block; border-radius: 18px; box-shadow: 0 12px 32px rgba(21, 23, 43, .18); } /* A REGRA DO `` FICA, e nao e' lixo: e' o que segura o desenho se o SVG nao carregar. */ .marca-grande i { width: 44px; height: 44px; border-radius: 12px; background: var(--roxo); color: #fff; display: grid; place-items: center; font: 800 19px/1 Manrope, system-ui, sans-serif; font-style: normal; flex: none; } .marca-grande b { display: block; font-size: 17px; } .marca-grande small { color: var(--muted); font-size: 11px; letter-spacing: .3px; } .cartao-de-entrada h1 { font-size: 17px; margin: 0 0 var(--f1); } .cartao-de-entrada p.ajuda { color: var(--muted); font-size: 13px; margin: 0 0 var(--f5); } /* --------------------------------------------------------------------------- formulário */ label.campo { display: block; margin-bottom: var(--f4); font-size: 12.5px; font-weight: 600; } /* CAMPO BRANCO DENTRO DE BLOCO BRANCO some. O fundo levemente cinza le como sulco, e ao * focar o campo acende em branco com anel roxo. */ /* OS TIPOS ESTAO LISTADOS UM A UM de proposito, e a lista cresce aqui e so aqui. Um `input` * generico pegaria caixa e radio junto, e eles herdariam este recheio: viram bolas enormes. * * `input:not([type])` ENTROU EM 18/08/2026, e por um defeito medido: um `input` sem atributo * `type` e' campo de texto para o navegador, mas NAO casa com `input[type="text"]` -- o seletor * le o atributo, que nao existe. Na tela de perfil isso deu Nome com 169,6px ao lado de E-mail * com 265,4px, na MESMA coluna de 265,4px. Um desalinhamento de 95,8px, invisivel no codigo. */ input:not([type]), input[type="email"], input[type="password"], input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="time"], input[type="date"], input[type="datetime-local"], input[type="number"], textarea { display: block; width: 100%; margin-top: var(--f2); height: 40px; padding: 0 var(--f3); border: 1px solid var(--line-forte); border-radius: var(--raio-botao); background: var(--soft); box-shadow: inset 0 1px 2px rgba(19, 31, 51, .04); font: 400 var(--texto-m) Manrope, system-ui, sans-serif; color: var(--ink); } /* TEXTO LONGO E O UNICO QUE NAO TEM ALTURA FIXA: 40px cortaria a mensagem em uma linha. */ textarea { height: auto; min-height: 96px; padding: 9px var(--f3); line-height: 1.5; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-soft); } /* ============================================================================================ * O CATALOGO — o unico lugar que decide TAMANHO e ESPACO * ============================================================================================ * * Regra dele, 18/08/2026: **nenhuma tela declara medida propria.** Quando uma peca precisar de * um tamanho que nao existe aqui, ela nao ganha um `style=`: ganha um NOME, e entra na lista * abaixo como mais um tipo declarado. * * O que motivou: no mesmo dia havia 63 medidas escritas dentro do JavaScript e SEIS alturas de * botao, com o padrao declarando tres. O Sherlock chegou a ter TREZE formatos pelo mesmo * caminho — cada tela resolvendo o proprio caso. * * COMO SE MEXE NISTO: muda-se o valor aqui, e a mudanca vale para o app inteiro. Se uma tela * parece precisar de folga diferente, o problema e' o conteudo dela — nao a moldura. */ :root { /* ---- espaco. A escala inteira, e nada entre um degrau e outro. */ --f1: 4px; --f2: 8px; --f3: 12px; --f4: 16px; --f5: 24px; --f6: 32px; /* ---- o recheio das pecas. UM valor para cartao, e um para cartao denso. */ /* 20px em cima e embaixo. Vinte e dois era folga a mais do que o desenho pedia, e os quatro pixels entraram na conta de fazer o perfil caber sem tirar nada dele. */ --recheio-cartao: 20px 24px; --recheio-cartao-largo: 24px 26px; /* ---- as alturas de controle. Toda peca clicavel sai de uma destas tres. */ --alto-g: 48px; --alto-m: 38px; --alto-p: 32px; /* Altura dos controles numa BARRA (ao lado de botão), e não num formulário. Formulário continua 40px com margem; na barra a peça precisa casar com o botão. */ --alto-barra: var(--alto-p); /* As duas alturas de EXCECAO. Estao aqui, e nao dentro das regras que as usam, porque uma medida repetida em tres lugares e' tres lugares para esquecer de mudar. */ --alto-aba: 36px; /* peca que escolhe entre irmas: aba, secao, item de menu */ --alto-pastilha: 30px; /* quadrado que mostra uma cor, e tecla de dia da semana */ --alto-mini: 26px; /* botao que e' so um icone, dentro de outra peca */ --alto-chave: 24px; /* a chave de liga/desliga: o que se ve e' o pino */ /* O BOTAO DE COPIAR mora DENTRO de uma celula de tabela, ao lado de um `` de 64 * caracteres. Os 32px do menor botao do catalogo empurrariam a linha inteira e * desalinhariam a coluna do cabecalho -- e alinhamento de coluna e a primeira coisa * que ele pega num print. A excecao tem nome, que e' a regra desta folha. */ --alto-copiar: 22px; /* ---- TEXTO. A escala inteira, e nada entre um degrau e outro. Ele apontou em 18/08 que as letras do menu estavam pequenas demais, e o problema nao era o menu: nao havia escala. Cada peca escolhia o proprio tamanho, e apareceram 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5... */ /* O PADRAO DE PAINEL DE SaaS: 14 no corpo, 13 no rotulo, 12 na nota. E o que Linear, Stripe e Notion usam, e o que ele escolheu em 18/08 depois de ver o degrau acima e o abaixo. Acima disso a tela fica confortavel e cabe menos; abaixo, entra no territorio do macOS (13/11), que e denso demais para quem le com dificuldade. */ --texto-gg: 30px; /* o titulo grande de uma tela */ --texto-g: 15px; /* titulo de cartao, marca do menu */ --texto-m: 14px; /* o corpo e o campo */ /* O ITEM DE MENU TEM DEGRAU PROPRIO. Ele estava em 14, junto com o corpo, e ele achou grande demais depois de ver na tela: "podia diminuir talvez um ponto". Treze e o mesmo do rotulo de campo, e um degrau abaixo do corpo -- navegacao nao compete com o conteudo. */ --texto-menu: 13px; --texto-p: 13px; /* rotulo de campo, aba, botao */ --texto-pp: 12px; /* nota, legenda, o segundo verso */ --texto-selo: 11px; /* o sobretitulo em maiusculas */ /* A EXCECAO, com nome: a assinatura da marca no alto do menu. Menor que tudo de propósito -- ela nao e para ser lida toda vez, e sim reconhecida. Aparece uma vez por tela. */ --texto-assinatura: 10px; /* A SEGUNDA EXCECAO, com nome: o contador do codigo dos dois fatores — 16/09/2026. Ele e MAIOR que o titulo de cartao porque nao e' texto para ler: e' um numero que a pessoa precisa captar pelo canto do olho, com a atencao no celular e os dedos no teclado. Nenhum degrau da escala serve — o maior (30px) e' titulo de tela, e o proximo (15px) sumiria ao lado do campo. Aparece uma vez, e so' dentro daquela gaveta. */ --texto-contador: 22px; /* ---- larguras de campo. A UNIDADE E `ch`, e nao pixel: `ch` e a largura do caractere na fonte que esta valendo, entao "cabem dez caracteres" continua verdade se a fonte mudar. Em pixel, a mesma promessa quebraria em silencio. */ /* 22ch, e nao 18: com 18 cabiam OITO caracteres largos, medido no navegador. `ch` e a largura do zero, e letras maiusculas sao mais largas que ele -- entao 18ch nao entrega 18 caracteres. O numero aqui foi ajustado ate caber DEZ dos mais largos. */ --largo-senha: 22ch; /* os dez caracteres exigidos, com folga para o cursor */ --largo-curto: 200px; /* campo de numero: meses, quantidade */ } /* Espaco entre pecas empilhadas. TRES degraus, e o nome diz o tamanho — nao o lugar, porque * nome de lugar envelhece no dia em que a peca muda de tela. */ .acima-p { margin-top: var(--f3); } .acima { margin-top: var(--f4); } .acima-g { margin-top: var(--f5); } /* A peca que ocupa o espaco que sobrar numa linha. Aparecia como `style="flex:1;min-width:0"` * repetido em quatro telas — `min-width:0` e' o que impede texto longo de esticar a linha. */ .cresce { flex: 1; min-width: 0; } /* ------------------------------------------------------------------------------- botões */ /* TRES TAMANHOS, E O NORMAL E O SEM CLASSE. Nao declare `height` nem `font-size` de botao * fora daqui — nem em CSS de tela, nem em `style=`. As excecoes tem nome, logo abaixo. */ .btn { /* LINK COM CARA DE BOTÃO SEM O RISQUINHO (Henrique, 16/10, no "Exportar" dos Contatos): * o `` herdava o sublinhado de link do navegador. */ text-decoration: none; height: var(--alto-m); padding: 0 15px; border: 1px solid var(--line-forte); border-radius: var(--raio-botao); background: var(--surface); color: var(--ink); font: 600 var(--texto-p) Manrope, system-ui, sans-serif; display: inline-flex; align-items: center; gap: var(--f2); cursor: pointer; /* ITEM 179 — a reacao de Mac: o botao LEVANTA no hover e ASSENTA no clique. A transicao * mora na base para valer nos tres tamanhos e nos quatro pesos de uma vez. */ transition: transform .13s ease, box-shadow .13s ease, background .13s ease; } .btn:hover:not(:disabled) { background: var(--soft); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(21, 23, 43, .10); } .btn:active:not(:disabled) { transform: translateY(0) scale(.99); box-shadow: none; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn.g { height: var(--alto-g); font-size: 14px; padding: 0 20px; } .btn.p { height: var(--alto-p); font-size: 12.5px; padding: 0 12px; } .btn.principal { background: var(--roxo); border-color: var(--roxo); color: #fff; } .btn.principal:hover:not(:disabled) { background: var(--roxo-hover); } .btn.largo { width: 100%; justify-content: center; } /* SVG SEM TAMANHO E DESENHADO EM 300x150 pelo navegador, e deforma o botao. Cinto e * suspensorio: o atributo no HTML e a regra aqui. */ .btn svg { width: 16px; height: 16px; flex: none; } .btn.p svg { width: 15px; height: 15px; } /* ---------------------------------------------------------------- as excecoes, COM NOME * * Estas tres nao cabem nos tres tamanhos, e o motivo esta escrito em cada uma. Elas existiam * antes — espalhadas, sem nome, cada uma declarando a propria altura. Agora sao tipo, e nao * desvio: quem precisar de uma delas usa a classe, e quem precisar de uma quarta acrescenta * AQUI, com o porque. */ /* `.btn.aba` — a peca que escolhe entre irmas: secao de Configuracoes, item do menu do perfil. * 36px porque ficam em fileira, e 38px numa fileira de cinco pesa demais na vertical. */ .btn.aba { height: var(--alto-aba); font-size: 13px; border-radius: var(--gg-raio-item, 12px); } /* `.btn.pastilha` — quadrado que mostra uma COR, e nao um rotulo. 30px porque o que se ve e' a * cor: com 32px o quadrado compete com os campos ao lado. */ .btn.pastilha { height: var(--alto-pastilha); width: var(--alto-pastilha); padding: 0; border-radius: 10px; } /* `.btn.dia` — a tecla de um dia da semana, na faixa do expediente. Redonda e pequena porque * sao sete lado a lado e o rotulo tem tres letras. */ .btn.dia { height: var(--alto-pastilha); font-size: 12.5px; border-radius: 999px; padding: 0 var(--f3); } /* ---------------------------------------------------------------- outras pecas COM NOME * * Estas seis estavam escritas em `style=` dentro das telas. Nao eram enfeite: eram componentes * sem nome. Ganharam nome e vieram para ca, pelo mesmo motivo dos botoes. */ /* `.gg-escolha` — o cartao que se CLICA para escolher entre opcoes (claro/escuro, o vidro). * E um botao que parece cartao: o que se escolhe e' a aparencia, e um `select` nao mostra * aparencia nenhuma. */ .gg-escolha { text-align: left; padding: var(--f4) 18px; cursor: pointer; width: 100%; } .gg-escolha b { font-size: var(--texto-m); display: block; } .gg-escolha[aria-pressed="true"] { border-color: var(--roxo); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--roxo); } /* `.acoes-direita` — o par de botoes empurrado para o fim da linha, na barra de salvar. */ .acoes-direita { margin-left: auto; display: flex; gap: var(--f2); } /* `.campo-curto` — campo de NUMERO nao estica. Um `input` de meses com 900px de largura * anuncia que cabe um texto ali, e nao cabe. */ .campo-curto { max-width: var(--largo-curto); } /* `.campo-senha` — o campo de senha tambem nao estica, pelo mesmo motivo e com mais forca: * a senha tem DEZ caracteres de minimo, e um campo de 900px promete um texto longo que ninguem * vai digitar. Pedido dele em 18/08, olhando a tela: "deveria ter a quantidade ali pra dez * caracteres, entao a gente deixa alinhado a esquerda, com espaco pra dez caracteres". */ .campo-senha { max-width: var(--largo-senha); } /* FOTO E COR LADO A LADO, dentro da faixa de identidade. Elas respondem a MESMA pergunta -- * "como voce aparece" -- e estavam em dois lugares separados por quatro campos. Junta-las * devolveu os 69px que a segunda barra custa, sem espremer nada. */ /* AS TRES MANEIRAS DE APARECER, em linha propria abaixo da faixa. * * Elas ja estiveram DENTRO da faixa, e o resultado foi o nome da pessoa com SETE pixels de * largura: o bloco tomou 618px de 745. Uma faixa nao carrega "quem voce e" e "como voce * aparece" lado a lado na largura de dois tercos de tela. * * Continuam juntas -- que era o ponto -- so que numa linha que e' delas. */ .perfil-aparencia { display: flex; flex-direction: row; align-items: flex-start; gap: var(--f5); flex-wrap: wrap; margin-top: var(--f2); } .perfil-aparencia > * { min-width: 0; } .perfil-cor-junto { display: flex; flex-direction: column; gap: 6px; } /* AS TRES MANEIRAS DE APARECER empilham dentro da terceira coluna da faixa: enviar arquivo, escolher a cor, e colar um endereco. O link fica por ultimo porque e o menos usado. */ .perfil-aparencia .perfil-link { margin: 0; } .perfil-aparencia .perfil-link[open] { margin-top: 6px; } /* A CONDICAO VAI NO PROPRIO ROTULO, em vez de virar uma nota embaixo: uma linha a menos, e a * frase fica junto do que ela condiciona. */ .perfil-cor-junto .gg-campo { margin: 0; } .perfil-cor-junto .gg-campo em { font-style: normal; color: var(--muted); font-size: var(--texto-pp); } /* `.gg-nota.colada` — a nota que explica o rotulo logo acima dela, e por isso sobe. */ .gg-nota.colada { margin: -4px 0 var(--f2); } /* ROTULO COM A NOTA NA MESMA LINHA. Duas linhas custavam 19px de altura para dizer o que cabe * numa -- e no notebook dele, com zoom de 125%, eram 19px que faziam a tela rolar. */ .gg-campo.com-nota { display: flex; align-items: baseline; gap: var(--f2); flex-wrap: wrap; } .gg-campo.com-nota span { color: var(--muted); font-size: var(--texto-pp); } /* `.gg-recado` em ambar. Ja havia `.bom`; faltava este. */ .gg-recado.aviso { background: var(--aviso-soft); color: var(--aviso); } /* `.recheio-largo` — o cartao que carrega a tela inteira respira um pouco mais. */ .gg-peca.recheio-largo { padding: var(--recheio-cartao-largo); }