(108) + o titulo "Para onde voce vai?" com a margem dele (52) + a margem de baixo do

(32). Com 190 sobrava 2px e a pagina ganhava uma barra de rolagem por nada. */ min-height: calc(100vh - var(--altura-fora-da-grade, 200px)); min-height: calc(100dvh - var(--altura-fora-da-grade, 200px)); grid-auto-rows: 1fr; } .botao-area { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 12px 16px; background: var(--cor-primaria); color: #fff; border-radius: var(--raio-botao); font-weight: 600; font-size: 15px; text-decoration: none; /* Com DUAS colunas no celular (ver o @media de 700px) o botao tem ~165px, e ha rotulo longo - "Cadastro de Beneficiarios", "Busca Ativa - coordenacao". Sem isto a palavra inteira estoura a celula e empurra a pagina para o lado. */ overflow-wrap: anywhere; } .botao-area:hover { background: var(--cor-primaria-escura); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .dashboard-card { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; } .dashboard-card h4 { margin-top: 0; } .dashboard-card .dashboard-numero { display: block; font-size: 1.6rem; font-weight: 700; } /* Cartao que E um link (o "Para retornar" da acao de campo): sem isto o numero grande sai sublinhado e em azul de link, destoando do cartao vizinho na MESMA grade. Mesma solucao ja usada em .quadro-cartao-link. */ a.dashboard-card { text-decoration: none; color: inherit; } .prioridade { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 700; margin-bottom: 0.25rem; } .prioridade-alta { background: #fdecea; color: #b00020; } .prioridade-media { background: #fff4e5; color: #b45f06; } .prioridade-baixa { background: #e6f4ea; color: #146c2e; } /* CRM (Pendencias) - kanban com arrastar-e-soltar. Fica ANTES do @media (max-width: 700px) de proposito: com a mesma especificidade, a regra declarada depois no arquivo e que vence a cascata, media query ou nao - entao as sobrescritas de celular so funcionam se vierem depois destas regras base, dentro do proprio bloco @media la embaixo. */ /* Sem overflow NENHUM aqui, nos dois eixos, de proposito. Quem rola e o envoltorio .quadro-rolagem (fim do arquivo). Sao duas razoes, as duas medidas: 1. Contêiner flex com max-height para de esticar as colunas ate o conteudo mais alto: elas passam a ter a altura da CAIXA (medido: 606px de coluna para 6893px de conteudo rolavel). Os cartoes ficam sobre o fundo da pagina e o vazio abaixo deles vira zona morta pro arrastar-e-soltar - o drop cai em .quadro-colunas, que nao e alvo. 2. `overflow-x: auto` faz o eixo vertical computar "auto" junto, o que torna este elemento um contexto de ROLAGEM. `position: sticky` se ancora no contexto de rolagem mais proximo: com overflow-x aqui, o titulo gruda NESTE elemento (que nao rola verticalmente) em vez de grudar no envoltorio, e sobe embora. Medido com o envoltorio ja rolado 400px: topo do titulo -263,09 contra 120,91 do envoltorio. Por isso o overflow-x saiu daqui e foi para o envoltorio junto com o overflow-y - um unico contexto de rolagem, nos dois eixos. Ver docs/superpowers/specs/2026-08-03-cabecalho-fixo-crm-design.md. */ .quadro-colunas { display: flex; gap: 12px; margin-top: 1rem; padding-bottom: 8px; } /* Sem padding no TOPO de proposito: o espaco do topo vem do proprio titulo (ver `.quadro-coluna h4` no fim do arquivo), para que ele CUBRA essa faixa ao grudar. Com o padding aqui sobraria uma janelinha de 10px acima do titulo grudado, por onde os cartoes apareceriam. */ .quadro-coluna { flex: 1 1 0; min-width: 130px; background: #f5f5f5; border-radius: 6px; padding: 0 10px 10px; } .quadro-coluna.zona-drop-ativa { background: #e0eee5; outline: 2px dashed var(--cor-primaria); } /* O espacamento deste titulo esta no FIM do arquivo, junto com o sticky: virou padding porque MARGEM NAO GRUDA. */ .quadro-coluna h4 { font-size: 0.9rem; } .quadro-cartao { position: relative; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px; margin-bottom: 8px; font-size: 0.85rem; cursor: grab; } .quadro-cartao.arrastando { opacity: 0.5; } .quadro-cartao:hover { border-color: var(--cor-primaria); } .quadro-cartao-link { display: block; text-decoration: none; color: inherit; } .quadro-cartao-info { display: block; color: #666; font-size: 0.78rem; margin-top: 4px; } /* O controle de mover so aparece no celular (ver @media 700px abaixo): no computador mover e feito arrastando o cartao. */ .quadro-cartao-mover { display: none; } .quadro-cartao-whatsapp { margin-top: 6px; } .quadro-cartao-whatsapp button { font-size: 0.8rem; padding: 2px 8px; border: 1px solid #cde3d5; background: #e6f4ea; border-radius: 4px; cursor: pointer; } .quadro-cartao-whatsapp button:hover { background: #cde3d5; } /* Telas de campo no celular: a tabela vira cartoes empilhados */ @media (max-width: 700px) { /* DOIS botoes por linha na tela de entrada (pedido do dono, 31/08/2026). A regra base usa auto-fit com minimo de 220px, e nos ~343px uteis de um aparelho de 375px so cabe UMA coluna - com 12 areas a tela virava uma coluna comprida de rolar. Fixando duas, cada botao fica com ~165px. ⚠️ Esta sobrescrita depende de estar DEPOIS da regra base no arquivo: @media NAO aumenta especificidade, entao quem decide e a ordem. */ .grade-areas { grid-template-columns: repeat(2, 1fr); } .tabela-cartoes thead { display: none; } .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; } .tabela-cartoes tr { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 12px; padding: 8px; } .tabela-cartoes td { border: none; padding: 4px 8px; } .tabela-cartoes td::before { content: attr(data-rotulo) ": "; font-weight: bold; } /* Alvo de toque: os links de acao dentro dos cartoes ficam com ~44px de altura clicavel (o mesmo minimo ja usado no formulario de visita). O margin-right separa alvos vizinhos: sem ele, "Abrir" e "Ficha do imovel" ficavam a 4px um do outro, e o dedo acertava o link errado. */ .tabela-cartoes td a { display: inline-block; padding: 10px 4px; margin-right: 12px; } .form-visita select, .form-visita input, .form-visita button { width: 100%; margin-top: 6px; min-height: 44px; } /* Rede de seguranca: qualquer tabela NAO adaptada rola dentro de si em vez de empurrar a pagina inteira (o menu deslizava junto). O :not(.tabela-cartoes) e obrigatorio - sem ele esta regra briga com o layout de cartoes das telas de campo. */ main table:not(.tabela-cartoes) { display: block; overflow-x: auto; } /* CRM no celular: as 6 colunas empilham em vez de ficarem lado a lado. Sem isto o quadro tem 960px de largura numa tela de 390px, e cada cartao fica com 130px - estreito demais pro nome do beneficiario. */ /* So o display: a regra base nao declara mais overflow-x nenhum, entao nao ha o que desfazer aqui. */ .quadro-colunas { display: block; } .quadro-coluna { min-width: 0; margin-bottom: 12px; } /* Mover por seletor: arrastar-e-soltar HTML5 nao funciona no toque. */ .quadro-cartao-mover { display: flex; gap: 6px; margin: 8px 0 0; } .quadro-cartao-mover select { flex: 1; min-height: 44px; } .quadro-cartao-mover button { min-height: 44px; } /* No celular a tabela vira cartoes e o thead inteiro some, entao nao ha coluna para clicar nem cabecalho onde encaixar caixa de filtro. O seletor PRECISA do tr: `.linha-filtros` sozinho (0,1,0) perde para `.tabela-cartoes tr { display: block }` (0,1,1) la em cima, e a regra fica inerte - medido no navegador, dava display:block. Com o tr a especificidade empata e vence por vir depois. */ tr.linha-filtros { display: none; } } /* Botoes - REGULARIZE: primario solido (button/submit), secundario contornado (links de acao em .linha-acoes/.grupo-acoes, ja usados em todo o sistema) */ button, input[type="submit"] { background: var(--cor-primaria); color: #fff; border: none; padding: 10px 18px; border-radius: var(--raio-botao); font-weight: 600; font-size: 14px; cursor: pointer; } button:hover, input[type="submit"]:hover { background: var(--cor-primaria-escura); } .linha-acoes a, .grupo-acoes a { display: inline-block; background: transparent; color: var(--cor-primaria); border: 1.5px solid var(--cor-primaria); padding: 8px 14px; border-radius: var(--raio-botao); font-weight: 600; font-size: 13px; text-decoration: none; } .linha-acoes a:hover, .grupo-acoes a:hover { background: var(--cor-primaria-clara); } /* REGULARIZE - barra lateral fixa no desktop, cabecalho horizontal no celular */ .cabecalho-app { background: var(--cor-primaria); color: #fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 20px; min-height: 56px; row-gap: 8px; } body.logado .cabecalho-app { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 0; position: fixed; top: 0; left: 0; bottom: 0; width: 220px; overflow-y: auto; overflow-x: hidden; z-index: 30; } /* A marca e um LINK para a tela de entrada (pedido do dono, 26/08/2026): tocar no REGULARIZE volta para "Para onde voce vai?". Ate entao era uma

e o toque nao fazia nada. `color: inherit` e `text-decoration: none` mantem a aparencia exatamente como era - o cabecalho nao ganha um link azul sublinhado. */ .marca { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.15); color: inherit; text-decoration: none; } .marca strong { font-size: 17px; letter-spacing: .5px; font-weight: 800; } .botao-hamburguer { display: none; background: none; border: none; color: #fff; font-size: 22px; padding: 4px 8px; cursor: pointer; } .nav-principal { display: flex; flex-direction: column; align-items: stretch; flex: 1; } .nav-itens { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; } /* Os dois itens sem submenu (Cadastro, Relatorios) vestem a MESMA tipografia dos itens com submenu (.item-menu-botao): os onze sao itens de menu de mesmo nivel, e ate a v1.80.0 estes dois saiam em caixa baixa e 13,5px no meio de nove em caixa alta e 11px. Se mudar um, mude o outro. */ .item-menu-link { display: block; color: #fff; text-decoration: none; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 16px; opacity: .9; } .item-menu-link:hover { opacity: 1; } .item-menu-link.ativo { opacity: 1; background: rgba(255,255,255,.15); border-left: 3px solid #fff; padding-left: 13px; } .item-menu-dropdown { position: relative; } .item-menu-dropdown .seta { display: inline; transition: transform .15s; } .item-menu-dropdown.aberto .seta { transform: rotate(180deg); } .item-menu-botao { display: block; width: 100%; text-align: left; background: none; border: none; color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 16px 4px; opacity: .85; cursor: pointer; } .item-menu-botao:hover { opacity: 1; } .item-menu-dropdown .submenu { display: none; position: static; background: transparent; box-shadow: none; border-radius: 0; min-width: 0; } .item-menu-dropdown.aberto .submenu { display: block; } .item-menu-dropdown .submenu a { display: block; padding: 7px 16px 7px 24px; color: #fff; text-decoration: none; font-size: 13.5px; border-bottom: none; opacity: .9; } .item-menu-dropdown .submenu a:hover { opacity: 1; } .item-menu-dropdown .submenu a.ativo { opacity: 1; background: rgba(255,255,255,.15); border-left: 3px solid #fff; padding-left: 21px; } .nav-usuario { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; padding: 14px 16px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.15); position: sticky; bottom: 0; background: var(--cor-primaria); } .nav-usuario a { color: #fff; } .nav-fechar-mobile { display: none; } @media (min-width: 960.02px) { body.logado main { margin-left: 220px; } main.main-largo { max-width: none; } } @media (max-width: 960px) { /* O seletor PRECISA do `body.logado`: e ele que faz esta regra vencer. Quem transforma o cabecalho em barra lateral fixa e `body.logado .cabecalho-app` (0,2,1); `.cabecalho-app` sozinho e (0,1,0) e PERDE, e @media NAO aumenta especificidade. Ate 03/08/2026 a regra abaixo era `.cabecalho-app` e ficava inerte: abaixo de 961px a barra continuava `position: fixed`, 220px de largura, por cima do conteudo - e `body.logado main { margin-left: 220px }` so vale acima de 960px, entao o

comecava em x=0 e os primeiros 220px dele ficavam escondidos atras do menu. Valia em TODA pagina logada, nao so no CRM. Com `body.logado` a especificidade EMPATA (0,2,1) e esta regra vence por vir depois no arquivo. Nao precisa de mais que isso, e nao usa !important. O visitante deslogado nao perde nada: a regra base ja lhe da row/center/wrap/padding, e position/width/overflow static/auto/ visible sao os valores iniciais. */ body.logado .cabecalho-app { position: static; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 20px; min-height: 56px; row-gap: 8px; width: auto; overflow: visible; } .marca { padding: 0; border-bottom: none; } .botao-hamburguer { display: block; } .nav-principal { display: none; position: fixed; inset: 0; background: var(--cor-primaria); flex-direction: column; align-items: stretch; padding: 16px; overflow-y: auto; z-index: 100; } .nav-principal.aberto { display: flex; } .nav-fechar-mobile { display: flex; justify-content: flex-end; } .nav-fechar-mobile button { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; } .nav-itens { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 0; } .item-menu-link, .item-menu-botao { color: #fff; text-align: left; width: 100%; font-size: 16px; padding: 12px 8px; text-transform: uppercase; letter-spacing: .5px; opacity: 1; cursor: pointer; font-weight: 600; } .item-menu-link.ativo { background: rgba(255,255,255,.15); border-left: 3px solid #fff; padding-left: 5px; } .item-menu-dropdown .seta { display: inline; } .item-menu-dropdown .submenu { display: none; position: static; box-shadow: none; background: transparent; border-radius: 0; min-width: 0; padding: 0; } .item-menu-dropdown.aberto .submenu { display: block; } .item-menu-dropdown .submenu a { color: #fff; padding: 10px 8px 10px 24px; border-bottom: none; border-left: 2px solid rgba(255,255,255,.4); font-size: 14px; opacity: .9; } .item-menu-dropdown .submenu a:hover { background: rgba(255,255,255,.1); opacity: 1; } .item-menu-dropdown .submenu a.ativo { opacity: 1; border-left-color: #fff; background: rgba(255,255,255,.1); } .nav-usuario { flex-direction: column; align-items: flex-start; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); } } /* Ordenacao: a seta e a UNICA indicacao de qual coluna esta ordenando. Ate a v1.73.0 o data-direcao era gravado e ninguem o lia - a pessoa clicava, as linhas se moviam, e nada dizia por qual coluna. */ th[data-ordenavel] { cursor: pointer; user-select: none; } th[data-direcao="asc"]::after { content: " \25B2"; font-size: 10px; } th[data-direcao="desc"]::after { content: " \25BC"; font-size: 10px; } /* O titulo passou a receber foco de teclado (tabindex no tabela.js), entao precisa MOSTRAR onde o foco esta - sem isto quem navega por Tab ordena as colunas as cegas. :focus-visible so acende no teclado, nao no clique de mouse; navegador que nao conhece o seletor ignora a regra e mantem o contorno padrao dele, que ja serve. */ th[data-ordenavel]:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; } .linha-filtros th { padding: 2px 4px; } .linha-filtros input { width: 100%; box-sizing: border-box; font-size: 12px; padding: 3px 4px; } .linha-filtro-tabela { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .linha-filtro-tabela input { flex: 1 1 260px; max-width: 400px; } /* Os botoes de exportar viraram formularios (POST com os IDs das linhas visiveis). Sem isto cada

quebraria a linha de acoes, que e uma sequencia de links. */ .form-exportar { display: inline; } /* Cabecalho fixo ao rolar (itens 12 e 13 do backlog). Fica no FIM do arquivo de proposito: entre regras de mesma especificidade vence a declarada por ULTIMO, e @media NAO aumenta especificidade. Se estas regras viessem antes das de celular, elas ficariam inertes sem quebrar nenhum teste. O fundo opaco e obrigatorio: sem ele as linhas do corpo passam POR BAIXO do cabecalho grudado e o texto se sobrepoe - fica ilegivel exatamente quando esta em uso. O z-index existe pelo mesmo motivo. No celular (<=700px) as duas tabelas viram cartoes e o thead inteiro some, entao estas regras nao tem efeito visivel la. */ /* O mecanismo principal e grudar o thead INTEIRO: as duas linhas (titulos e caixas de filtro) sobem juntas e se empilham sozinhas, sem depender de nenhuma constante de altura. Medido: com esta regra a linha de filtros para exatamente no fim da de titulos (0 e 59), e continua parando certo se a altura do cabecalho mudar. */ thead { position: sticky; top: 0; z-index: 2; background: #fff; } /* As regras por celula sao a rede de seguranca para navegador que suporta sticky em celula mas nao em secao de tabela. Onde as duas valem, quem posiciona e o thead - medido: a linha de filtros para em 59 mesmo com outro valor de top aqui. */ thead th { position: sticky; top: 0; z-index: 2; background: #fff; } /* 59px NAO e chute: e a altura medida da linha de titulos nas duas tabelas, estavel de 720px a 1280px de largura (uma coluna sempre quebra em duas linhas). So entra em uso no navegador sem sticky de thead. Especificidade (0,1,1) vence a de `thead th` (0,0,2), que poe top: 0. */ .linha-filtros th { position: sticky; top: 59px; z-index: 2; background: #fff; } /* Cabecalho fixo das colunas do CRM (item 13 do backlog). Este item ficou de fora da v1.74.0 de proposito. O quadro tem 6 colunas de 130px (gap de 12px entre elas) - 840px no total - e a barra lateral consome 220px acima de 960px de janela: ele so cabe sem rolagem lateral acima de ~1092px. Abaixo disso o quadro precisa de overflow-x, e o navegador ancora o sticky no conteiner que rola. Esse conteiner nao rolava verticalmente, entao o titulo nao grudava em NADA - a regra teria ficado inerte. A saida: o quadro rola POR DENTRO. Com altura maxima e overflow ele passa a rolar de verdade, e o titulo gruda nele. ROLA O ENVOLTORIO, NAO O CONTÊINER FLEX. Dar max-height ao proprio .quadro-colunas fazia as colunas pararem de esticar (606px de coluna para 6893px de conteudo) - os cartoes ficavam sobre o fundo da pagina e o vazio abaixo deles virava zona morta pro arrastar-e-soltar. Com o envoltorio, .quadro-colunas volta a altura natural do conteudo e as colunas voltam a esticar (medido: 6888px cada, as duas iguais). Os DOIS eixos ficam aqui. `overflow-x` no .quadro-colunas o transformaria num contexto de rolagem, e o titulo grudaria NELE, que nao rola na vertical (medido: topo do titulo -263,09 com o envoltorio rolado 400px). Um unico contexto de rolagem, no envoltorio. ALTURA MAXIMA, nao fixa (decisao do usuario): com poucos cartoes o quadro encolhe e a pagina rola normal, em vez de deixar area vazia. */ @media (min-width: 700.02px) { /* min-width, e nao a regra base: no celular as colunas empilham e a pagina ja rola - rolagem aninhada no toque e ruim de usar. O meio ponto segue o padrao de @media (min-width: 960.02px) deste arquivo: em largura INTEIRA as duas faixas se encostam sem sobrepor - 700px cai so no bloco de celular, 701px so neste. Ele NAO fecha buraco nenhum: em 700,01px nenhuma das duas vale, e o quadro fica sem overflow-x nem max-height (as colunas estouram a pagina na horizontal); em 960,01px o mesmo vao devolve a barra lateral por cima do conteudo. Sao larguras fracionarias, que janela real nao assume; o padrao e anterior a esta feature e fica como esta. Declarar aqui em vez de na regra base com um "desfazer" no bloco de celular e deliberado: nao depende de ordem no arquivo, que e o mecanismo que ja quebrou coisa neste projeto duas vezes. */ /* 255px NAO e chute: e o topo do quadro MEDIDO no navegador em 1280px COM UMA MENSAGEM DE AVISO NA TELA mais 16px de folga pro respiro do fim da pagina - o mesmo criterio de sempre. As mensagens .flash saem acima do quadro e o empurram pra baixo; medir sem elas produziria um quadro alto demais, que passa do fim da janela e esconde a ultima linha de cartoes assim que aparece um aviso. REMEDIDO na revisao final da v1.100.0: os 194px antigos eram de ANTES da barra da meta diaria existir. Ela entra ENTRE o

CRM

e este quadro (admin/pendencias_quadro.html) e passou a empurrar o topo dele pra baixo tambem - sem remedir, a barra estourava o orcamento em 230-290px com uma equipe de 7 pessoas, e ate 44px so com um aviso na tela para quem nao e admin. So fecha a conta com o quadro por pessoa FECHADO por padrao (

, ver .meta-por-pessoa abaixo): aberto, a barra do admin cresce com o tamanho da equipe e nenhuma constante fixa a acompanharia. Confirmado: sobram 16,77px de folga na tela. O DOMINIO desta constante e "acima de 960px", onde o cabecalho e barra LATERAL e nao ocupa altura nenhuma. De 700.02 a 960px ele vira barra horizontal e empurra o quadro pra baixo - a faixa tem valor proprio logo abaixo. */ .quadro-rolagem { max-height: calc(100vh - 255px); overflow-x: auto; overflow-y: auto; } } /* Um valor por FAIXA, porque o desconto nao e o mesmo nas duas. De 700.02 a 960px o cabecalho deixa de ser barra lateral e vira barra horizontal de 76px no topo (`@media (max-width: 960px)` acima), que empurra o quadro inteiro pra baixo. Com os 255px medidos em 1280px o quadro passava do fim da janela do mesmo jeito que os 194px antigos passavam - so que agora tambem por causa da barra da meta, nao so do cabecalho. 331px pelo mesmo criterio dos 255: topo do quadro MEDIDO em 900px COM AVISO NA TELA mais os 16px de folga. E, como esperado, e exatamente 255 + 76 - a altura da barra horizontal do cabecalho (o mesmo 76 de sempre; a barra da meta ja esta contada nos 255 e nao muda entre faixas). REMEDIDO junto com os 194 -> 255 acima, mesmo motivo: a barra da meta diaria nao existia quando 270 foi medido. Este bloco precisa vir DEPOIS do @media acima: mesma especificidade, vence quem e declarado por ultimo, e @media nao aumenta especificidade. */ @media (min-width: 700.02px) and (max-width: 960px) { .quadro-rolagem { max-height: calc(100vh - 331px); } } /* O sticky do titulo e GLOBAL de proposito: no celular, sem conteiner de rolagem no caminho, ele gruda com a rolagem da propria pagina - o mesmo comportamento, de graca. Fundo na cor da COLUNA (#f5f5f5), nao branco: uma faixa branca dentro de uma coluna cinza pareceria outro elemento. Sem fundo, os cartoes passam por baixo e o texto se sobrepoe. O espaco virou PADDING porque MARGEM NAO GRUDA: so a caixa do elemento fica presa, entao o cartao apareceria na fresta entre o titulo grudado e o conteudo. Pelo mesmo motivo a coluna perdeu o padding do topo (o titulo o cobre agora). z-index acima de .quadro-cartao, que e position: relative e por isso entra no contexto de empilhamento. */ .quadro-coluna h4 { position: sticky; top: 0; z-index: 1; background: #f5f5f5; margin: 0; padding: 10px 0 8px; } /* A lista de imoveis do agente de campo (v1.92.0). Ela e usada EM PE, na calcada, com uma mao - por isso o alvo de toque e a regra principal aqui: a linha inteira e clicavel e tem altura minima de 48px, o minimo confortavel para o polegar. Sem isto o herda o tamanho do texto e uma linha curta ("A fazer", sem beneficiario) vira um alvo de 21px, metade de um dedo - medido no navegador em viewport de 375px antes de existir esta regra. */ .lista-imoveis { list-style: none; padding: 0; margin: 12px 0; } .lista-imoveis li { border: 1px solid #d5dde5; border-radius: 10px; margin-bottom: 8px; background: #fff; } .lista-imoveis li > a { display: flex; flex-direction: column; gap: 2px; min-height: 48px; justify-content: center; padding: 10px 14px; text-decoration: none; color: inherit; } .lista-imoveis li > a strong { font-size: 1.05em; } .lista-imoveis .estado-imovel { font-size: .9em; font-weight: 600; } /* A cor reforca o estado, nunca o substitui: o texto ("Proximo", "Feito", "Voltar") continua escrito na linha, para quem nao distingue as cores e para o sol batendo na tela. */ .lista-imoveis li[data-estado="proximo"] { border-color: #1d6fa5; border-left-width: 5px; } .lista-imoveis li[data-estado="proximo"] .estado-imovel { color: #1d6fa5; } .lista-imoveis li[data-estado="feito"] .estado-imovel { color: #2e7d32; } .lista-imoveis li[data-estado="voltar"] { border-left: 5px solid #b26a00; } .lista-imoveis li[data-estado="voltar"] .estado-imovel { color: #b26a00; } /* Recepcao de reuniao (v1.95.0): tela usada EM PE, na porta, com fila - mesmo motivo do alvo de 48px de .lista-imoveis acima, so que aqui vale para os controles do FORMULARIO (select/input/button/textarea), nao para uma lista de links. SEMPRE, nao so no @media de celular: computador, tablet e celular usam a MESMA tela (a spec e explicita sobre isso), e sem esta regra as caixas nascem com a altura padrao do navegador (~20-30px), alvo fino demais pro polegar com a fila esperando atras. Empilhado (nunca lado a lado) para nao precisar de rolagem horizontal em telas estreitas. font-size 16px evita o zoom automatico do iOS ao focar um campo menor que isso. */ .form-recepcao label { display: block; margin-bottom: 12px; font-weight: 600; } .form-recepcao select, .form-recepcao input, .form-recepcao textarea { display: block; width: 100%; min-height: 48px; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; font-size: 16px; font-weight: normal; } .form-recepcao button { min-height: 48px; padding: 10px 18px; font-size: 16px; } /* Achado B4 da revisao final: a regra acima casa TAMBEM com (reuniao_nova.html: "Mostrar o beneficiario ja cadastrado ao achar o lote") - sem este reset o quadradinho nativo herdava display:block/width:100%/min-height:48px e virava uma barra verde do tamanho da tela. [type="checkbox"] ja tem especificidade maior que `.form-recepcao input` sozinho (0,2,1 contra 0,1,1), entao a ordem aqui e so organizacao, nao necessidade. */ .form-recepcao input[type="checkbox"] { display: inline-block; width: auto; min-height: 0; } /* Primeira regra de impressao do projeto (v1.93.0): abaixo vai o primeiro bloco "@media" do tipo "print" da folha. A ficha do imovel se imprime e vira PDF pelo proprio navegador ("Salvar como PDF"), em vez de ter um gerador de PDF no servidor: o papel E a pagina, entao os dois nao tem como divergir - e o projeto ja teve PDF truncando e sobrepondo texto sem nenhum teste perceber. Conferido em base.html antes de escrever este bloco: a pagina nao tem rodape nem