/* --- Conta: banner de perfil + grid de identidade -------------------- */ /* Ícone e título são irmãos diretos e ficam centrados juntos: folgas iguais em cima e embaixo, e o ícone casa com o texto sem compensação. Os chips saíram de baixo do título para a direita justamente por isso — embaixo, empurravam o texto para cima do ícone. */ /* O banner reserva os 16px que separam todo bloco do seguinte. Era responsabilidade de cada tela — a Configurações resolvia com um `margin-top` na `.cfg-plano` —, e quem não soubesse disso encostava o primeiro bloco no banner: foi o que aconteceu na Plataforma (medido 0,0px contra os 16px do resto da tela). Margens de irmãos colapsam, então onde já existiam 16px o valor continua 16, e não 32. */ .cta-banner { background: var(--navy); border-radius: 12px; padding: 22px 26px; display: flex; align-items: center; gap: 20px; margin-bottom: var(--s4); } /* O e-mail de entrar, no Meu perfil — item 313. Caixa de leitura, e nao campo: o endereco so muda pelo caminho com senha e confirmacao. */ .mp-email { border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); font-size: 13px; } /* O CONSUMO NA LINHA DO ASSINANTE — item 311, Mesa do Dono. Duas medidas empilhadas (mapas e fotos), cada uma contra a cota. O farol acende em 80% e em 100% — e vermelho aqui NAO quer dizer bloqueado: a decisao da casa e avisa, nao bloqueia. Quem le e o dono, para ligar ANTES de o assinante ligar. */ .plt-consumo { display: flex; flex-direction: column; gap: 2px; } .plt-uso { font-size: 11.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .plt-uso i { font-style: normal; font-weight: 500; color: var(--ink-3); } .plt-uso.perto { color: #8a5a00; } .plt-uso.estourou { color: #b3261e; } /* ONDE ESTOU CONECTADO — item 312, na tela Meu perfil. A sessao ATUAL ganha fundo e um selo, e e a unica sem acao: e a ancora de leitura da lista, a pessoa se acha nela e decide sobre as outras a partir dali. */ .mp-sessoes { display: flex; flex-direction: column; gap: 8px; } .mp-sessao { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; } /* ESCAPADA OBRIGATORIA — item 358. A regra acima dá display:flex à .mp-sessao, e display VENCE o atributo hidden: sem esta linha as sessões escondidas pelo teto de cinco continuariam à vista, e o teto não teria efeito nenhum. É o mesmo defeito que a .sh-usuario custou no item 285. Escapada SÓ a esta classe: um [hidden] global com !important passaria por cima do display de qualquer coisa que outra tela esconda com critério próprio. */ .mp-sessao[hidden] { display: none; } .mp-sessao b { font-size: 13px; display: flex; align-items: center; gap: 8px; } .mp-sessao .vazio { font-size: 11.5px; } .mp-sessao.atual { background: rgba(0,170,85,.07); border-color: rgba(0,170,85,.30); } .mp-aqui { font: 700 10px/1.6 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: #0a8c48; background: rgba(0,170,85,.13); border-radius: 5px; padding: 0 6px; } /* A APROVAÇÃO DO REVISOR na tela Entregar — item 307. Quatro estados e quatro cores, porque eles significam coisas diferentes: ninguém revisou; aprovou; pediu ajustes; leu e não se comprometeu. Nenhuma delas é vermelha — vermelho é a cor do que deu errado, e "sem aprovação" não é erro: é uma etapa que ainda não aconteceu, e que NÃO impede entregar (a decisão dele: avisa, não bloqueia). */ .aprov { display: flex; flex-direction: column; gap: 3px; margin: var(--s4) 0 0; padding: 11px 14px; border-radius: 10px; border-left: 4px solid; } .aprov b { font-size: 13px; } .aprov span { font-size: 12px; color: var(--ink-2); line-height: 1.5; } .aprov.sem { background: #f3f5f9; border-color: #a9b2c0; } .aprov.sem b { color: var(--ink-2); } .aprov.ok { background: rgba(0,170,85,.09); border-color: #0a8c48; } .aprov.ok b { color: #0a8c48; } .aprov.ajustes { background: var(--warn-bg); border-color: #b8860b; } .aprov.ajustes b { color: #8a5a00; } /* A FRASE QUE GARANTE QUE NADA MUDA — item 355. No dialogo de trocar o e-mail de entrar, ela e a mais importante da caixa: diz que o acesso de hoje continua valendo ate o link novo ser aberto. Saia como paragrafo comum, sem se distinguir do resto. Fundo claro e borda a esquerda, no azul do revisor — este SIM e o `#2f6fd6`, porque aqui o fundo e claro. Sem borda arredondada: a casa ja aprendeu que canto redondo com borda de um lado so fica torto. */ .vz-dica { background: rgba(47,111,214,.07); border-left: 3px solid #2f6fd6; border-radius: 0; padding: 9px 12px; margin: var(--s3) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); } .aprov.mudo { background: rgba(47,111,214,.07); border-color: #2f6fd6; } .aprov.mudo b { color: #2f6fd6; } .cta-banner > .cta-chips { flex: none; max-width: 42%; justify-content: flex-end; margin: 0 0 0 auto; } .cta-av-wrap { position: relative; flex: none; } .cta-av { width: 76px; height: 76px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 30px; overflow: hidden; } .cta-av img { width: 100%; height: 100%; object-fit: cover; } .cta-cam { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--navy); background: var(--navy-2); color: var(--tinta-esc-1); cursor: pointer; padding: 0; height: 28px !important; display: flex; align-items: center; justify-content: center; } .cta-cam:hover { background: var(--orange); color: #fff; } .cta-quem { flex: 1; min-width: 0; } .cta-nome { color: #fff; font-family: var(--brand); font-weight: 700; font-size: 20px; } .cta-sub { color: var(--tinta-esc-2); font-size: 13px; margin-top: 2px; } .cta-chips { display: flex; gap: 6px; flex-wrap: wrap; } .cta-chip { background: var(--navy-2); color: var(--tinta-esc-1); font-size: 11px; padding: 3px 11px; border-radius: 20px; } /* ⚠️ AQUI MORAVAM `.cta-pct` e `.cta-barra` — o medidor "Perfil completo 85%" do banner da Conta, tirado no item 361 a pedido dele: *"acho que pode sair. Não precisamos dessa informação ali em cima"*. Ele cobrava sem servir: quem abre a tela já veio preencher, e os campos vazios se veem sozinhos. Medidor de completude serve quando a lista NÃO cabe na tela — e as duas colunas cabem inteiras. */ /* stretch (e não start) para as duas colunas terminarem na mesma linha */ .cta-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 2fr); gap: var(--s4); margin-top: var(--s4); align-items: stretch; } .cta-col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } /* Assinantes: os filtros por situação e a busca (02/10/2026) */ .plt-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s3); } .plt-filtros .cta-chip { cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); } .plt-filtros .cta-chip.sel { background: var(--navy); color: #fff; border-color: var(--navy); } .plt-busca { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); } .plt-busca input { flex: 1; min-width: 240px; } .plt-busca select { width: auto; } .plt-tel a { color: var(--good); font-weight: 600; text-decoration: none; } /* As duas abas da Conta (02/10/2026): no perfil, os campos ficam com a coluna LARGA e o logo, a assinatura e a prévia com a estreita — o contrário de antes. Na segurança, os quadros em grade, e as listas (sessões, acessos do suporte) na largura toda. */ .cta-grid.cta-grid-perfil { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } .cta-drops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .cta-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--s4); margin-top: var(--s4); align-items: start; } .cta-seg > section.bloco, .cta-largo > section.bloco { margin-bottom: 0; } .cta-largo { grid-column: 1 / -1; } /* O FUSO HORÁRIO (23/10/2026, print aprovado por ele). O quadro mora na aba Segurança e acesso, salva na hora como a senha e o segundo fator, e mostra os dois exemplos que saem do servidor: o que se vê aqui é o que sai no papel. O aviso do primeiro acesso fica no topo de Projetos, com a borda laranja do print. */ .fuso-seletor { width: 100%; height: 38px; } .fuso-detectado { margin-top: var(--s2); padding: 7px 10px; border-radius: 9px; font-size: 12.5px; background: var(--good-bg); color: var(--good); border: 1px solid var(--good-claro); } .fuso-exemplos { margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px dashed var(--border); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.5px; } .fuso-exemplos dt { color: var(--ink-3); } .fuso-exemplos dd { margin: 0; } .fuso-rodape { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0 0; font-size: 12px; } .fuso-salvo { color: var(--good); white-space: nowrap; } .fuso-aviso { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s4); background: var(--surface); border: 1px solid var(--warn-bd); border-left: 4px solid var(--orange); border-radius: 12px; padding: 12px 14px; } .fuso-aviso svg { width: 22px; height: 22px; flex: none; color: var(--orange); } .fuso-aviso small { display: block; color: var(--ink-3); margin-top: 2px; } .fuso-aviso .fuso-aviso-acoes { margin-left: auto; display: flex; gap: var(--s2); flex: none; } @media (max-width: 800px) { .fuso-aviso { flex-wrap: wrap; } .fuso-aviso .fuso-aviso-acoes { margin-left: 0; } } /* o gap da coluna já separa os blocos; a margem padrão somaria e dobraria o espaço vertical em relação ao horizontal */ .cta-col > section.bloco { margin-bottom: 0; } @media (max-width: 1100px) { .cta-grid { grid-template-columns: 1fr; } } /* Zonas de envio na PROPORÇÃO da imagem que recebem: logo 3:1, assinatura 4:1. O tamanho sugerido vai no texto; a caixa já mostra o formato esperado. */ .cta-drop { border: 1.5px dashed var(--border); border-radius: 9px; padding: 10px 14px; text-align: center; color: var(--ink-3); cursor: pointer; margin-top: var(--s3); display: flex; flex-direction: column; align-items: center; justify-content: center; } .cta-drop:hover { border-color: var(--orange); color: var(--ink-2); } .cta-drop b { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 2px; } .cta-img { margin-top: var(--s3); border: 1px solid var(--border); border-radius: 9px; padding: 10px; text-align: center; background: var(--surface-3); } .cta-img img { max-width: 100%; object-fit: contain; } .cta-img-acoes { display: flex; gap: 6px; justify-content: center; margin-top: 8px; } .cta-img-acoes button { font-size: 12px; padding: 4px 12px; height: auto; } /* coluna esquerda: a Prévia estica para as colunas fecharem juntas, sem vão */ .cta-col:first-child > section.bloco { display: flex; flex-direction: column; } .cta-col:first-child > section.bloco:has(.cta-previa) { flex: 1; } .cta-col:first-child .cta-previa { flex: 1; display: flex; flex-direction: column; justify-content: center; } .cta-previa { background: #f4f6f9; border-radius: 9px; padding: 14px 16px; } .cta-prev-assin { max-height: 44px; max-width: 70%; display: block; margin-bottom: -6px; } .cta-prev-risco { border-top: 1.2px solid var(--ink-2); width: 82%; margin-top: 26px; } .cta-previa:has(.cta-prev-assin) .cta-prev-risco { margin-top: 4px; } .cta-prev-nome { font-weight: 700; font-size: 13px; color: var(--ink); margin-top: 5px; } .cta-prev-linha { font-size: 11.5px; color: var(--ink-3); } /* As cores e a capa do documento (22/10/2026). O quadro mora embaixo do Contato, e a Identificação ocupa as duas linhas da coluna ao lado: é o único vão da aba no notebook dele (1536 x 738), medido antes de escolher o lugar. */ .cta-grid-perfil .cta-ident { grid-row: span 2; } #ctaCores h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cta-cor-padrao { font-size: 11.5px; height: 24px; padding: 0 10px; font-weight: 600; } .cta-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cta-grid .cta-cor { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .cta-grid .cta-cor input[type=color] { width: 34px; height: 30px; padding: 2px; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; background: #fff; } .cta-capa button { height: 30px; padding: 0 11px; } .cta-cor-aviso { color: var(--warn); font-weight: 600; } /* A miniatura da capa, ao lado da assinatura. Ela não sabe cor nenhuma: as variáveis chegam do servidor, as mesmas que o relatório recebe. A foto é um desenho neutro — a tela Conta não tem projeto aberto. */ .cta-previa-par { flex: 1; display: flex; gap: 12px; align-items: stretch; min-height: 0; } .cta-previa-par .cta-previa { flex: 1; min-width: 0; } .cta-mini-capa { flex: none; width: 92px; aspect-ratio: 210 / 297; align-self: center; position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--border); background: var(--capa-fundo); display: flex; flex-direction: column; padding: 8px 7px 7px; } .cta-mini-capa .mc-foto { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(180deg, rgba(var(--capa-veu-rgb), .85), rgba(var(--capa-veu-rgb), .2) 50%, var(--capa-fundo)), linear-gradient(160deg, #9aa3af, #4b5563); } .cta-mini-capa.clara .mc-foto { left: 7px; right: 7px; top: 15%; height: 43%; border-radius: 2px; background: linear-gradient(160deg, #6b7585, #1f2733); } .cta-mini-capa .mc-topo { position: relative; height: 10px; line-height: 10px; } .cta-mini-capa .mc-topo img { height: 10px; max-width: 64px; object-fit: contain; filter: var(--capa-logo-filtro); } .cta-mini-capa .mc-topo b { font-size: 6px; letter-spacing: .08em; color: var(--capa-titulo); } .cta-mini-capa .mc-corpo { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 3px; } .cta-mini-capa .mc-corpo i { display: block; height: 3px; border-radius: 1px; } .cta-mini-capa .mc-eyebrow { width: 62%; background: var(--capa-eyebrow); } .cta-mini-capa .mc-corpo .mc-titulo { width: 78%; height: 7px; background: var(--capa-titulo); } .cta-mini-capa .mc-ativo { width: 48%; background: var(--capa-ativo); } .cta-mini-capa .mc-corpo .mc-regua { width: 26%; height: 2px; margin: 2px 0; background: var(--orange); } .cta-mini-capa .mc-corpo .mc-linha { height: 1px; background: var(--capa-linha); } .cta-mini-capa .mc-corpo .mc-tarja { height: 8px; background: var(--capa-tarja-fundo); border: 1px solid var(--capa-tarja-borda); border-left: 3px solid var(--capa-tarja-faixa); } .cta-salvarbar { position: sticky; bottom: 12px; margin-top: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 6px 18px rgba(19, 31, 51, .10); transition: background var(--t), border-color var(--t); } /* Com edição pendente a barra muda de cor; ao salvar volta ao normal. As regras citavam o ID da Conta, então nas outras duas telas o JS pintava tudo em código — cinco cores repetidas em três lugares. Agora a classe .sujo basta, e vale para Conta, Configurações e Visão geral. */ .cta-salvarbar > span { display: flex; align-items: center; gap: 8px; transition: color var(--t); } .cta-salvarbar .ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--good); transition: background var(--t); } .cta-salvarbar.sujo { background: var(--warn-bg); border-color: #e6c68a; } .cta-salvarbar.sujo > span { color: var(--warn); font-weight: 700; } .cta-salvarbar.sujo .ponto { background: var(--warn); } /* === MOLDURA PADRÃO DE TODAS AS TELAS =================================== Uma folga só, igual em Projetos, Visão geral, Importar, Processar, Documento, Laudos, Configurações e Conta: folha ............ 24px em cima/embaixo, 32px nas laterais banner ........... 18px 22px de recheio banner -> bloco .. 16px bloco -> bloco ... 16px recheio do bloco . 18px 22px Antes desta regra havia DOIS paddings de folha e TRÊS de banner. A causa: `.folha.ampla:has(.cta-grid)` dava folga menor só às telas com grade, e o `.cta-banner` daqui sobrescrevia a regra base para todo mundo — um ajuste escrito para a Conta que vazou para o app inteiro. Ao mexer em espaçamento, mexa AQUI, não numa tela só. */ .folha, .folha.ampla { padding: var(--s5) var(--s6); } .cta-banner { padding: 18px 22px; gap: 18px; } .cta-av { width: 54px; height: 54px; font-size: 22px; } .cta-cam { width: 24px; height: 24px !important; font-size: 11px; } .cta-nome { font-size: 18px; } .cta-sub { font-size: 12.5px; } .cta-chips { margin-top: 7px; } .cta-grid { gap: var(--s4); margin-top: var(--s4); } .cta-col { gap: var(--s4); } .cta-grid > .cta-col > section.bloco { padding: 18px 22px; border-radius: 12px; } .cta-grid section.bloco > h2 { margin-bottom: var(--s4); } .cta-grid .campos { gap: var(--s4) var(--s5); } /* Colunas fixas nestes dois blocos: com auto-fit os campos se reorganizavam sozinhos conforme a largura e quebravam o agrupamento pretendido. */ .cta-grid .campos-ident { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cta-grid .campos-ident > :nth-child(6) { grid-column: span 2; } /* cidade */ .cta-grid .campos-contato { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Na aba de perfil (02/10/2026) a Identificação e o Contato ficam LADO A LADO na parte larga: empilhados, o Contato terminava a 696 px num viewport de 738 — atrás da barra Salvar. Cada quadro passa a ter duas colunas de campos, e o nome e a cidade ocupam a linha toda. */ .cta-grid-perfil > .cta-col:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .cta-grid-perfil .campos-ident { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-grid-perfil .campos-ident > :nth-child(6) { grid-column: 1 / -1; } /* cidade */ /* e-mail e WhatsApp na linha toda: a meia largura cortava os dois (medido no print) */ .cta-grid-perfil .campos-contato > :nth-child(-n+2) { grid-column: 1 / -1; } @media (max-width: 1100px) { .cta-grid-perfil > .cta-col:first-child { grid-template-columns: 1fr; } } .cta-grid label { margin-bottom: 5px; } .cta-grid input { height: 38px; } /* os blocos de formulário crescem para acompanhar a coluna vizinha, em vez de deixar um vão morto embaixo do último campo */ .cta-col:last-child { justify-content: stretch; } .cta-col:last-child > section.bloco { display: flex; flex-direction: column; } .cta-col:last-child > section.bloco .campos { flex: 1; align-content: space-evenly; } .cta-previa { padding: 10px 14px; } .cta-prev-risco { margin-top: 16px; } .cta-prev-nome { font-size: 13px; } .cta-drop { padding: 10px; margin-top: 10px; } .cta-drop b { font-size: 12.5px; } .cta-drop span { font-size: 11px; line-height: 1.35; display: block; } /* A medida sugerida sai da frase e ganha linha própria, abaixo: colada no texto ela competia com a explicação e ninguém lia nenhuma das duas. */ .cta-medida { display: block; font-style: normal; margin-top: 5px; font-size: 10.5px; color: var(--tinta-esc-2); font-variant-numeric: tabular-nums; } .cta-salvarbar { padding: 8px 16px; margin-top: var(--s4); } /* --- Configurações: chips de status, plano/consumo, toggles, diagnóstico -- */ /* redondo como o avatar da Conta — os dois banners têm a mesma âncora visual */ .cfg-tile { width: 54px; height: 54px; border-radius: 50%; background: var(--navy-2); color: var(--orange); display: flex; align-items: center; justify-content: center; flex: none; } .cfg-chips { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; } /* mesmo padding do chip da Conta: garante banners de altura idêntica */ .cfg-chip { font-size: 11px; padding: 3px 11px; border-radius: 20px; white-space: nowrap; } .cfg-chip.ok { background: #0d2b1e; color: var(--good-claro); } .cfg-chip.off { background: #3a1f14; color: #ff9b6a; } .cfg-chip.neutro { background: var(--navy-2); color: var(--tinta-esc-2); } /* espaçamento padrão entre os blocos da tela: 16px em todas as direções. Mesmo padding e raio dos demais blocos — o bloco do plano herdava os valores genéricos de section.bloco (24px / 14px) e destoava. */ section.bloco.cfg-plano { margin-top: var(--s4); margin-bottom: 0; padding: 18px 22px; border-radius: 12px; } /* UMA regra só. Havia TRÊS empilhadas aqui, escritas em momentos diferentes: uma mandava `flex: none`, outra esticava só as duas primeiras colunas (quando a Equipe era a terceira e ficava sozinha), e a última esticava todas — vencendo por vir depois e desfazendo a decisão que o comentário acima dela anunciava. Ler aquele bloco não dizia o que a tela fazia. A decisão antiga ("barra irregular embaixo é mais honesta que buraco dentro do cartão") foi escrita quando esticar significava um buraco ENORME: a Equipe sozinha numa coluna deixava 771px para o último bloco absorver. Com os blocos redistribuídos por assunto em 05/08/2026 as colunas caem em 522 · 607 · 603, e o esticão custa 84px no Armazenamento — que passa de 122 para 206px e lê como cartão folgado, não como caixa vazia. Medi as duas saídas: sem esticar, a coluna 1 termina 85px acima das outras. Trocamos um desalinho visível na base por uma folga discreta dentro de um cartão. */ /* ------------------------------------------ item 120: Configurações em abas Mesma regra do `.ent-painel` da Entregar, e de propósito: as duas telas fazem a mesma coisa e quem conhece uma reconhece a outra. `display:none` e não `visibility`, porque um painel oculto não pode ocupar altura — senão a tela continuaria do tamanho dos nove blocos, que é justamente o que este item veio resolver. O painel NÃO tem moldura: quem tem é a `section.bloco` dentro dele. Duas molduras concêntricas em volta do mesmo conteúdo foi o erro que o comentário do `.ent-painel` já registra. */ /* AS REGRAS DO `.cfg-painel` SAIRAM em 09/08/2026, com as abas de Configuracoes: a tela virou uma so e nao ha mais painel para esconder, para descontar margem de aba nem para afastar da barra de salvar, que tambem deixou de existir ali (os nove campos que ela gravava eram do servidor e foram para a Plataforma). Uma delas continua valendo e MUDOU DE SELETOR, logo abaixo: bloco de largura cheia depois de uma grade precisa dos 16 px na mao, porque a margem de `section.bloco` e zerada de proposito dentro das colunas — la quem separa e o `gap` do flex — e este bloco esta FORA de coluna. Medido no servidor: sem a regra, a folga dava 0,0 px. */ .cta-grid.cfg-grid + section.bloco { margin-top: var(--s4); } .cta-grid.cfg-grid { margin-top: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .cfg-grid .cta-col > section.bloco:last-child { flex: 1; } @media (max-width: 1200px) { .cta-grid.cfg-grid { grid-template-columns: 1fr; } } .pl-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: 10px; } .pl-quem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* mesmo tipo dos títulos de bloco (section.bloco > h2) */ .rotulo-mini { font-family: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2); } .pl-badge { background: var(--orange); color: #fff; font-weight: 700; font-size: 12.5px; padding: 4px 14px; border-radius: 20px; } .pl-acoes { display: flex; align-items: center; gap: 10px; } .pl-metros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } @media (max-width: 1000px) { .pl-metros { grid-template-columns: 1fr; } } .met-cab { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; } .met-cab b { color: var(--ink); } .met-tri { height: 7px; background: var(--hair); border-radius: 999px; overflow: hidden; } .met-tri i { display: block; height: 7px; border-radius: 999px; transition: width .25s; } .met small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 5px; } .cfg-aviso { margin-top: var(--s4); background: var(--warn-bg); color: var(--warn); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; } /* Botão de ação embutido no título do bloco. Altura fixa: com `height:auto` ele herdava a altura da linha do h2 e variava de bloco para bloco. */ section.bloco > h2 { align-items: center; } /* Botão dentro do título da seção: era 28px com fonte 11,5px — menor que tudo no app e destoava. Agora 32px/12,5px, com ícone, alinhado aos demais botões secundários. */ section.bloco > h2 .mini { margin-left: auto; flex: none; align-self: center; font-size: 12.5px; padding: 0 12px; height: 32px !important; line-height: 1; letter-spacing: 0; text-transform: none; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; } section.bloco > h2 .mini svg { width: 14px; height: 14px; flex: none; } /* duas classes para vencer a regra genérica de .campos, definida depois */ .campos.cfg-motorcol { grid-template-columns: 1fr 1fr; } /* SMTP em duas colunas iguais. A porta encolhe pelo INPUT, não pela coluna: estreitar a segunda coluna encolhia a Senha junto, que cai nela na linha de baixo — medi 96px num campo de senha, o mesmo de um número de porta. */ .campos.cfg-smtp { grid-template-columns: 1fr 1fr; } .campos.cfg-smtp .cfg-porta input { max-width: 110px; } /* Explicação curta sob o título do bloco, antes dos campos. Serve a quem abre Configurações sem saber o que aquele bloco faz — o aluno. */ .cfg-nota { margin: -2px 0 var(--s4); font-size: 12px; color: var(--ink-3); line-height: 1.5; } .cfg-teste { font-size: 12.5px; padding: 7px 11px; border-radius: 9px; margin-top: var(--s3); } .cfg-teste.ok { background: var(--good-bg); color: var(--good); } .cfg-teste.err { background: var(--bad-bg); color: var(--bad); } .cfg-arm { display: flex; justify-content: space-between; gap: var(--s4); align-items: flex-end; } .cfg-arm > div:first-child { min-width: 0; flex: 1; } .cfg-arm code { display: block; font-size: 12px; color: var(--ink); margin-top: 3px; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfg-arm-dir { text-align: right; } .cfg-arm-dir b { display: block; font-size: 16px; margin-top: 3px; } .cfg-linha { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; color: var(--ink); } .cfg-diag > div { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--hair); } .cfg-diag > div:last-child { border-bottom: 0; } .cfg-diag b.ok { color: var(--good); } .cfg-diag b.err { color: var(--bad); } /* interruptor (toggle) */ .tgl { width: 38px; height: 21px; border-radius: 12px; border: 0; background: #c7cfda; position: relative; cursor: pointer; padding: 0; flex: none; transition: background var(--t); height: 21px !important; } .tgl i { position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left var(--t); box-shadow: 0 1px 2px rgba(19,31,51,.25); } .tgl.on { background: var(--orange); } .tgl.on i { left: 19px; }