/** * responsive.css - Acordo Aqui * ----------------------------------------------------------------------------- * Camada ADITIVA de responsividade e suporte a PWA. Carregado por ultimo no * , complementa (sem reescrever) app.css / estilos.css / processual.css. * * Objetivos: * - Menu de navegacao mobile (hamburguer) no cabecalho. * - Alvos de toque adequados (min. 44-48px) em telas pequenas. * - Stepper (bs-stepper) utilizavel no mobile. * - Tabelas de resultados legiveis no celular. * - Evitar zoom automatico do iOS em inputs. * - Ajustes para modo "standalone" (app instalado) com safe-area. * - Estilos do botao de instalacao e aviso offline. * * Breakpoints (alinhados ao Bootstrap 4): 992px / 768px / 576px. */ /* ========================================================================== 1. BASE / GERAL ========================================================================== */ /* Evita rolagem horizontal indesejada em telas pequenas. */ html, body { max-width: 100%; overflow-x: hidden; } /* Midia sempre fluida dentro do seu container. */ img, svg, video, iframe { max-width: 100%; height: auto; } /* Quebra palavras muito longas (ex.: e-mails, numeros de processo). */ p, h1, h2, h3, h4, h5, h6, span, a, li, td { overflow-wrap: break-word; word-wrap: break-word; } /* ========================================================================== 2. MENU DE NAVEGACAO PRINCIPAL (mobile-first, com hamburguer) ========================================================================== */ .app-nav { background: #ffffff; box-shadow: 0 2px 8px rgba(0, 66, 38, 0.08); border-bottom: 1px solid rgba(0, 66, 38, 0.08); padding: 0; position: relative; z-index: 1030; } .app-nav .container { display: flex; align-items: center; flex-wrap: wrap; } .app-nav .navbar-toggler { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; border: 1px solid rgba(0, 66, 38, 0.25); border-radius: 8px; background: transparent; color: #004226; font-weight: 600; font-size: 0.95rem; cursor: pointer; min-height: 44px; } .app-nav .navbar-toggler:focus { outline: 2px solid #A0BE5C; outline-offset: 2px; } .app-nav .navbar-toggler-icon { display: inline-block; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23004226' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .app-nav .navbar-nav { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; width: 100%; } .app-nav .nav-item { width: 100%; } .app-nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 14px 8px; color: #004226; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 66, 38, 0.06); min-height: 48px; transition: background-color 0.2s ease, color 0.2s ease; } .app-nav .nav-link i { width: 20px; text-align: center; color: #A0BE5C; } .app-nav .nav-link:hover, .app-nav .nav-link:focus { background: rgba(160, 190, 92, 0.12); color: #004226; } .app-nav .nav-link.active { color: #004226; background: rgba(160, 190, 92, 0.18); } /* A partir de 992px (desktop): menu horizontal, sem hamburguer. */ @media (min-width: 992px) { .app-nav .navbar-toggler { display: none; } /* Garante que o menu fique visivel no desktop mesmo com a classe "collapse". */ .app-nav .navbar-collapse { display: flex !important; } .app-nav .navbar-nav { flex-direction: row; justify-content: flex-end; width: auto; margin-left: auto; } .app-nav .nav-item { width: auto; } .app-nav .nav-link { border-bottom: 3px solid transparent; padding: 16px 14px; } .app-nav .nav-link:hover, .app-nav .nav-link.active { background: transparent; border-bottom-color: #A0BE5C; } } /* ========================================================================== 2.1 BARRA DE NAVEGACAO INFERIOR (estilo app) - somente mobile ========================================================================== */ /* Escondida por padrao (desktop usa o menu horizontal do topo). */ .bottom-nav { display: none; } @media (max-width: 991.98px) { /* No mobile, a barra inferior substitui o menu hamburguer do topo. */ .app-nav { display: none; } .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070; background: #ffffff; border-top: 1px solid rgba(0, 66, 38, 0.1); box-shadow: 0 -2px 12px rgba(0, 66, 38, 0.12); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px 6px; min-height: 56px; color: #6c757d; text-decoration: none; font-size: 0.66rem; font-weight: 600; line-height: 1; transition: color 0.2s ease; } .bottom-nav-item i { font-size: 1.2rem; } .bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottom-nav-item:hover, .bottom-nav-item:focus { color: #004226; } /* Item ativo em destaque com a cor da marca. */ .bottom-nav-item.active { color: #004226; } .bottom-nav-item.active i { color: #189D5C; transform: translateY(-1px); } /* Reserva espaco no final da pagina para nao ficar atras da barra. */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* Footer completo oculto no mobile: ocupa muito espaco e a barra inferior + paginas de contato externas ja cobrem navegacao e links uteis. */ .modern-footer { display: none !important; } /* VLibras: oculta o botao flutuante no mobile (libera espaco na tela). */ [vw-access-button], div[vw] [vw-access-button] { display: none !important; } /* reCAPTCHA v3: oculta o selo flutuante no mobile (continua funcionando). Exigencia Google: exibir aviso .recaptcha-mobile-disclaimer no fluxo. */ .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; right: -9999px !important; bottom: -9999px !important; } } /* ========================================================================== 3. CABECALHO / RODAPE (refinos mobile) ========================================================================== */ @media (max-width: 400px) { .info-badge { display: none; /* Economiza espaco no header em telas muito estreitas. */ } .header-info { flex-direction: column; gap: 6px; } } /* ========================================================================== 4. CONTAINERS / TIPOGRAFIA EM TELAS PEQUENAS ========================================================================== */ @media (max-width: 576px) { .container, .container-fluid { padding-left: 14px; padding-right: 14px; } h1 { font-size: 1.6rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } .welcome-section p, .lead { font-size: 1rem !important; } } /* ========================================================================== 4.1 BOTOES DE SERVICO DA HOME (CTA) - visual "app" ========================================================================== */ /* Layout base (aplica-se a desktop e mobile). O gap resolve o espacamento do icone de forma independente do Bootstrap (as classes de margem do BS5 nao existem no BS4 usado no projeto). */ .home-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; min-height: 46px; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Variante verde (Processual / Consultar) */ .home-cta-green { background: linear-gradient(135deg, #004226 0%, #189D5C 100%); border: none; color: #fff; } .home-cta-green:hover, .home-cta-green:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 66, 38, 0.3); } /* Variante azul (Pré-Processual) */ .home-cta-blue { background: linear-gradient(135deg, #0d6efd 0%, #4d94ff 100%); border: none; color: #fff; } .home-cta-blue:hover, .home-cta-blue:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3); } /* No mobile os CTAs ocupam a largura toda do card, com boa area de toque. */ @media (max-width: 767.98px) { .home-cta { display: flex; width: 100%; min-height: 50px; font-size: 1rem; } /* Espacamento vertical entre os cards de servico empilhados (compensa a ausencia do gutter "g-4" do BS5 no BS4). */ #servicos .row > [class*="col-"] { margin-bottom: 1rem; } } /* ========================================================================== 4.2 ACESSO RAPIDO (cards estilo app) ========================================================================== */ .quick-access-section h3 { display: flex; align-items: center; gap: 0.5rem; color: #004226; } .quick-access-section h3 i { color: #A0BE5C; } .quick-access-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 1.5rem 1.25rem 1.25rem; background: #fff; border: 1px solid rgba(0, 66, 38, 0.08); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 66, 38, 0.08); text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .quick-access-card:hover, .quick-access-card:focus { text-decoration: none; color: inherit; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 66, 38, 0.14); border-color: rgba(0, 66, 38, 0.18); } .quick-access-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #004226 0%, #189D5C 100%); color: #fff; font-size: 1.6rem; margin-bottom: 1rem; flex-shrink: 0; } .quick-access-icon-alt { background: linear-gradient(135deg, #0d6efd 0%, #4d94ff 100%); } .quick-access-icon-neutral { background: linear-gradient(135deg, #495057 0%, #6c757d 100%); } .quick-access-content h5 { font-weight: 700; color: #212529; margin-bottom: 0.5rem; font-size: 1.05rem; } .quick-access-content p { color: #6c757d; font-size: 0.9rem; line-height: 1.45; margin-bottom: 1rem; } .quick-access-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: auto; padding: 0.6rem 1.25rem; min-height: 44px; width: 100%; max-width: 220px; border-radius: 30px; background: rgba(0, 66, 38, 0.08); color: #004226; font-weight: 600; font-size: 0.9rem; transition: background 0.2s ease, color 0.2s ease; } .quick-access-card:hover .quick-access-action { background: linear-gradient(135deg, #004226 0%, #189D5C 100%); color: #fff; } @media (max-width: 767.98px) { .quick-access-grid > [class*="col-"] { margin-bottom: 0.75rem; } .quick-access-card { flex-direction: row; align-items: flex-start; text-align: left; padding: 1rem; gap: 0.85rem; } .quick-access-icon { width: 52px; height: 52px; font-size: 1.25rem; margin-bottom: 0; } .quick-access-content { flex: 1; min-width: 0; } .quick-access-content h5 { font-size: 1rem; margin-bottom: 0.25rem; } .quick-access-content p { font-size: 0.82rem; margin-bottom: 0.5rem; } .quick-access-action { width: auto; max-width: none; padding: 0.45rem 0.85rem; min-height: 36px; font-size: 0.8rem; margin-top: 0; align-self: flex-start; } } /* ========================================================================== 5. ALVOS DE TOQUE (min. 44-48px) E FORMULARIOS ========================================================================== */ @media (max-width: 768px) { /* Botoes com area de toque confortavel. */ .btn, .btn-lg, button[type="submit"], .step-trigger { min-height: 44px; } /* Evita o zoom automatico do iOS (fonte >= 16px nos campos). */ input.form-control, select.form-control, textarea.form-control, .form-select, .input-group-lg .form-control { font-size: 16px; } /* Links/botoes em linha ganham respiro vertical. */ .footer-link-item a, .footer-contact-item { min-height: 40px; } } /* ========================================================================== 6. STEPPER (bs-stepper) NO MOBILE ========================================================================== */ @media (max-width: 768px) { /* Permite rolagem horizontal do cabecalho do stepper sem quebrar o layout. */ .bs-stepper-header { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding: 0.75rem 0.5rem; scrollbar-width: thin; } .bs-stepper-header .step { flex: 0 0 auto; } .bs-stepper .line { min-width: 12px; flex: 0 0 12px; margin: 0 2px; } .bs-stepper-circle { width: 34px; height: 34px; font-size: 0.9rem; } .step-trigger { padding: 6px 8px; flex-direction: column; } } /* Em telas muito estreitas, mostra apenas os numeros das etapas. */ @media (max-width: 480px) { .bs-stepper-label { display: none; } } /* ========================================================================== 6.1 TIPO DE ATENDIMENTO (pre-processual) - corrige corte no mobile ========================================================================== */ /* Garante que os cards respeitem a largura do container (flex/grid). */ .service-options { width: 100%; max-width: 100%; } .service-option { min-width: 0; width: 100%; } .service-label { width: 100%; max-width: 100%; box-sizing: border-box; } /* Permite que o texto encolha dentro do flex (evita overflow horizontal). */ .service-content { min-width: 0; flex: 1 1 auto; } .service-content h5 { word-break: normal; overflow-wrap: normal; hyphens: none; } .service-content p { overflow-wrap: break-word; word-wrap: break-word; } @media (max-width: 991.98px) { .service-options { grid-template-columns: 1fr !important; } } @media (max-width: 767.98px) { /* Uma coluna e gap menor. */ .service-options { grid-template-columns: 1fr !important; gap: 0.75rem; margin: 1rem 0; } .service-label { padding: 1rem; gap: 0.75rem; align-items: flex-start; } .service-icon { width: 48px; height: 48px; font-size: 1.15rem; flex-shrink: 0; } .service-content h5 { font-size: 0.95rem; line-height: 1.3; } .service-content p { font-size: 0.82rem; line-height: 1.4; } } @media (max-width: 400px) { /* Telas muito estreitas: icone acima do texto. */ .service-label { flex-direction: column; align-items: center; text-align: center; } .service-content { width: 100%; } } /* ========================================================================== 6.2 PARTICIPANTES - cabecalho e botao "Adicionar Participante" ========================================================================== */ @media (max-width: 767.98px) { /* Empilha titulo e botao (evita corte lateral no mobile). */ .section-header { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 1rem; } .section-header h4 { font-size: 1rem; line-height: 1.35; text-align: left; } .section-header .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; white-space: nowrap; } /* Cards de participante ja adicionados */ .participant-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .participant-details { flex-direction: column; gap: 0.25rem; } .participant-item .btn { width: 100%; min-height: 44px; } } /* ========================================================================== 7. TABELAS DE RESULTADOS (pesquisa) - empilhamento no mobile ========================================================================== */ @media (max-width: 576px) { /* Converte a tabela de resultados em "cards" empilhados, usando os titulos das colunas definidos via atributo data-label no HTML. (A visualizacao em cards ja e a principal; isto melhora o fallback da tabela quando exibida.) */ #tabela thead { display: none; } #tabela, #tabela tbody, #tabela tr, #tabela td { display: block; width: 100%; } #tabela tr { margin-bottom: 12px; border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; } #tabela td { display: flex; justify-content: space-between; gap: 12px; text-align: right; padding: 10px 12px; border: none; border-bottom: 1px solid #f1f1f1; } #tabela td::before { content: attr(data-label); font-weight: 600; color: #004226; text-align: left; } #tabela td:last-child { border-bottom: none; } } /* ========================================================================== 8. MODAIS EM TELAS PEQUENAS ========================================================================== */ @media (max-width: 576px) { .modal-dialog { margin: 0.5rem; } .modal-lg { max-width: calc(100% - 1rem); } .modal-body { padding: 1rem; } } /* ========================================================================== 9. MODO STANDALONE (APP INSTALADO) + SAFE AREA (iPhone com notch) ========================================================================== */ @media (display-mode: standalone) { /* Respeita areas seguras do dispositivo. */ .modern-header { padding-top: calc(15px + env(safe-area-inset-top)); } body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .modern-footer { padding-bottom: env(safe-area-inset-bottom); } } /* Aviso reCAPTCHA visivel apenas no mobile (obrigatorio quando o selo e ocultado). */ .recaptcha-mobile-disclaimer { display: none; } @media (max-width: 991.98px) { .recaptcha-mobile-disclaimer { display: block; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 1065; margin: 0; padding: 4px 10px; text-align: center; font-size: 0.62rem; line-height: 1.35; color: #6c757d; background: rgba(245, 245, 245, 0.95); border-top: 1px solid rgba(0, 0, 0, 0.06); } .recaptcha-mobile-disclaimer a { color: #004226; text-decoration: underline; } } /* No modo app instalado, sobe o aviso acima da safe-area. */ @media (max-width: 991.98px) and (display-mode: standalone) { .recaptcha-mobile-disclaimer { bottom: calc(56px + env(safe-area-inset-bottom)); } } /* ========================================================================== 10. BOTAO DE INSTALACAO DO PWA ========================================================================== */ .pwa-install-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1080; display: none; /* Exibido via JS quando "beforeinstallprompt" dispara. */ align-items: center; gap: 8px; padding: 12px 18px; background: linear-gradient(135deg, #004226 0%, #189D5C 100%); color: #fff; border: none; border-radius: 30px; font-weight: 600; font-size: 0.95rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 66, 38, 0.35); min-height: 48px; animation: pwaFadeIn 0.4s ease-out; } .pwa-install-btn.is-visible { display: inline-flex; } .pwa-install-btn i { font-size: 1.1rem; } @keyframes pwaFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Nao exibir o botao de instalacao quando ja rodando como app instalado. */ @media (display-mode: standalone) { .pwa-install-btn { display: none !important; } } /* No mobile, elevar o botao acima da barra de navegacao inferior. */ @media (max-width: 991.98px) { .pwa-install-btn { bottom: calc(88px + env(safe-area-inset-bottom)); } } /* ========================================================================== 11. AVISO DE STATUS OFFLINE ========================================================================== */ .pwa-offline-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(100px); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1090; background: #343a40; color: #fff; padding: 12px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 8px; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; max-width: calc(100% - 32px); } .pwa-offline-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .pwa-offline-toast i { color: #ffc107; } /* No mobile, elevar o aviso acima da barra de navegacao inferior. */ @media (max-width: 991.98px) { .pwa-offline-toast { bottom: calc(88px + env(safe-area-inset-bottom)); } }