/* Layout das telas EF de Fiança. Corrige combos espremidos/ilegíveis (havia um `select { font-size:11px; min-width:120px }` global em style.css) e dá respiro aos campos. IMPORTANTE: os deste arquivo em cada .aspx usam "?v=N" pra evitar cache do navegador. Ao editar este CSS, subir o "v=" em TODAS as paginas que o referenciam (grep por "fianca-ef.css?v=" em SistemaImobiliarias/Solicitacoes/Fianca) — sem isso o navegador pode continuar servindo a versao antiga do cache mesmo depois do deploy. */ .ef-form { max-width: 1180px; } .ef-sec { border: 1px solid #d3dde7; border-radius: 12px; padding: 16px 20px; margin: 14px 0; background: #fff; } .ef-sec h3 { margin: 0 0 14px; font-size: 15px; color: #1d4ed8; font-weight: 700; } /* Grid mais largo: colunas de no mínimo 300px (antes 220), combos legíveis. */ .ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 22px; } /* position:relative torna o campo o "container" do calendario (.data-br) — ver scripts-fianca-ef.js e a regra .datepicker.datepicker-dropdown abaixo. Vale tambem pro .ef-adv-campo (campos de data da busca avancada), que usa o mesmo mecanismo. */ .ef-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; } .ef-campo.ef-col-2 { grid-column: span 2; } .ef-campo label { font-size: 12px; color: #5b6b7c; font-weight: 600; } /* Calendario (bootstrap-datepicker) dos campos .data-br. O plugin sozinho calcula o "top" do popup relativo ao ; nas paginas EF essa conta fica ~20-25px desalinhada (conflito com o restante do layout da pagina) e o calendario abria sobreposto ao proprio campo. Como o JS agora usa container: $d.parent() (o .ef-campo/.ef-adv-campo, o wrapper imediato do campo), o popup passa a ser filho do proprio wrapper no DOM — daqui pra baixo e' so CSS puro (top/left com !important derrubam o inline style que o plugin insiste em aplicar a cada abertura), sem depender da conta interna do plugin. Border/sombra tambem reforcados: sozinho o plugin so tem uma borda quase invisivel (rgba(0,0,0,.176)) e nenhuma sombra. */ .ef-campo .datepicker.datepicker-dropdown, .ef-adv-campo .datepicker.datepicker-dropdown { top: 100% !important; left: 0 !important; right: auto !important; margin-top: 4px; border: 1px solid #cdd8e3; border-radius: 10px; box-shadow: 0 8px 24px rgba(22, 33, 46, .18); z-index: 20; } .ef-campo .datepicker-dropdown:before, .ef-campo .datepicker-dropdown:after, .ef-adv-campo .datepicker-dropdown:before, .ef-adv-campo .datepicker-dropdown:after { display: none; } /* seta do balao nao faz sentido ancorado direto embaixo do campo */ /* Inputs e combos: alto o suficiente e com fonte legível — sobrepõe o `select` global de 11px. */ .ef-form .ef-campo input[type=text], .ef-form .ef-campo input[type=date], .ef-form .ef-campo input[type=email], .ef-form .ef-campo select, .ef-form .ef-campo textarea { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; padding: 7px 10px; border: 1px solid #cdd8e3; border-radius: 8px; font-size: 14px; font-family: inherit; color: #16212e; background: #fff; } .ef-form .ef-campo textarea { height: auto; } .ef-form .ef-campo select { -webkit-appearance: menulist; appearance: menulist; } .ef-form .ef-campo input:focus, .ef-form .ef-campo select:focus { outline: 2px solid #93b4fd; outline-offset: 0; border-color: #1d4ed8; } .ef-form .ef-campo input[readonly] { background: #f2f5f9; color: #5b6b7c; } /* Botão de busca de CEP ao lado do campo. */ .ef-cep-linha { display: flex; gap: 8px; align-items: stretch; } .ef-cep-linha input { flex: 1 1 auto; } .ef-cep-linha .btn { white-space: nowrap; } /* Cada checkbox e' um — o proprio controle ja renderiza seu + Texto como irmaos; o markup das paginas EF embrulha os dois num extra (so pra agrupar/servir de item do flex abaixo). Sem display:flex nesse wrapper o texto ficava colado no quadradinho (sem espaco) e um pouco desalinhado verticalmente — por isso o wrapper vira flex e o checkbox ganha tamanho/alinhamento explicitos, garantindo o mesmo espaçamento e fonte em todos os grupos de checkbox das telas EF. */ .ef-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 6px; } .ef-checks > label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; } .ef-checks input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #1d4ed8; cursor: pointer; flex-shrink: 0; } .ef-checks label { font-size: 13px; color: #16212e; } .ef-acoes { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } /* Mesmos botoes de .ef-acoes, mas dentro de uma faixa de alerta (ex.: mensagem de sucesso pos-inclusao com "ir para lista/editar/adicionar pretendente") — margem menor que o padrao 16px, que ficava largo demais colado ao texto da mensagem. */ .ef-acoes-msg { margin-top: 10px; } /* Pendencia mostrada junto da mensagem de inclusao concluida (ex.: comercial que ainda nao tem pretendente fora do representante legal, que vai travar o envio). */ .ef-aviso-msg { margin-top: 8px; font-size: 13px; font-weight: 600; } .ef-msg { margin: 10px 0; } /* Aceite dos termos de uso (so nas telas de inclusao). O checkbox do ASP.NET vem dentro de um , por isso o alinhamento explicito — mesmo motivo do .ef-checks acima. */ .ef-termos > label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #16212e; margin: 0; cursor: pointer; } .ef-termos input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #1d4ed8; cursor: pointer; flex-shrink: 0; } .ef-termos a { color: #2563eb; } .ef-erros { margin: 0; padding-left: 18px; } .ef-erros li { font-size: 13px; } /* ========================================================================== Proposta de fiança — resumo e escolha da oferta ========================================================================== */ /* A seguradora escolhida em destaque, e nao como mais um par rotulo/valor no meio do resumo: e' a decisao que define tudo o que se preenche abaixo. */ .prop-escolha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; margin-bottom: 12px; background: #eef6ff; border: 1px solid #cfe2fb; border-radius: 10px; } .prop-escolha .rot { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5b7ba6; } .prop-escolha .prop-seg { font-size: 16px; font-weight: 700; color: #16212e; } .prop-escolha .prop-sub { flex: 1 1 100%; font-size: 12px; color: #5b6b7c; } .prop-escolha .prop-pendente { color: #b45309; font-weight: 600; } /* Contexto da solicitacao que originou a proposta: titular, imovel e contrato. Sem isto a tela dizia so "Solicitacao 1234" — quem preenche varias propostas seguidas nao tinha como saber de qual imovel era esta sem abrir a solicitacao noutra aba. */ .prop-contexto { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; padding: 10px 14px; margin-bottom: 12px; background: #fbfcfd; border: 1px solid #e4eaf0; border-radius: 10px; } .prop-contexto dt { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8497a8; padding-top: 2px; } .prop-contexto dd { margin: 0; font-size: 13px; color: #16212e; } /* Grade de ofertas: substituiu um