/* ========================================================= */ /* --- ESTILOS DO PAINEL ADMINISTRATIVO (ADMIN_DASHBOARD) --- */ /* ========================================================= */ /* NOVO: Estilos para o Top Banner */ div.top-banner { background-color: #f0f0f0; /* Um fundo claro para o banner */ padding: 10px 20px; text-align: center; position: fixed; width: 100%; top: 10; /* GARANTE QUE O BANNER ESTEJA NO TOPO */ left: 0; z-index: 1001; /* Z-index maior para ficar ACIMA do admin-header */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-sizing: border-box; } div.banner-logo { max-height: 80px; /* Altura máxima da logo no banner */ width: auto; display: block; /* Para centralizar a imagem */ margin: 0 auto; /* Centraliza a imagem no banner */ } /* Adicione esta classe ao da página admin para padding */ body.admin-page { /* Padding-top inicial será ajustado pelo JavaScript */ padding-top: 10; /* Começa com 0 para o JS calcular */ background-color: #f4f4f4; } header.admin-header { background-color: #333; color: white; margin: 0px 0 0 0; padding: 10px 20px; display: flex; flex-direction: row; /* Desktop: itens em linha */ justify-content: space-between; align-items: center; position: fixed; width: 100%; /* REMOVIDO: top: auto; A posição 'top' será definida EXCLUSIVAMENTE pelo JavaScript */ left: 0; z-index: 1001; /* Z-index menor que o banner */ box-sizing: border-box; } /* Restante do seu CSS para .admin-header e media queries, apenas verifique se o top: auto foi removido */ /* ========================================================= */ /* --- ESTILOS GLOBAIS --- */ /* ========================================================= */ body { font-family: Arial, sans-serif; background: #f8f8f8; margin: 0; padding: 0; /* O padding-top do body global será ajustado para o admin-dashboard */ color: #333; } /* ========================================================= */ /* --- CABEÇALHO E NAVEGAÇÃO DO FRONTEND PÚBLICO --- */ /* ========================================================= */ header { background-color: #fff; color: #333; padding: 15px 0; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .menu, .bairro-select, .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 15px; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 20px; } /* ========================================================= */ /* --- BOTÕES E ELEMENTOS DE FORMULÁRIO GERAIS --- */ /* ========================================================= */ .btn-primary { /* Classe base para botões primários */ background-color: #ff6600; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover { background-color: #cc5200; } /* Exemplo de uso da classe base para botões específicos */ .menu button, .custom-search button { /* Se você não usa pré-processador, copie as propriedades de .btn-primary aqui */ } .bairro-select select { background-color: white; color: #333; border: 2px solid #ff6600; border-radius: 6px; padding: 10px; min-width: 250px; cursor: pointer; transition: border-color 0.3s ease; } .bairro-select select:hover { border-color: #cc5200; } .tab { padding: 10px 20px; cursor: pointer; background: #e0e0e0; border-radius: 8px; font-weight: bold; transition: background 0.3s ease, color 0.3s ease; } .tab.active { background: #ff6600; color: white; } /* ========================================================= */ /* --- BUSCA E FILTROS DO FRONTEND PÚBLICO --- */ /* ========================================================= */ .container { display: flex; flex-wrap: wrap; justify-content: center; } .search-bar { text-align: center; margin: 30px auto; max-width: 540px; flex: 1; } .custom-search { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .custom-search input { padding: 10px; width: 70%; border: 2px solid #ccc; border-radius: 6px; transition: border-color 0.3s ease; } .custom-search input:focus { outline: none; border-color: #ff6600; } .filtros-laterais { flex: 0 0 250px; background: #ffffff; padding: 20px; border-left: 1px solid #ddd; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* ========================================================= */ /* --- LISTAGEM GERAL DE IMÓVEIS (RESULTADOS) --- */ /* ========================================================= */ .result-item { background: white; padding: 15px; margin-bottom: 15px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s ease; } .result-item:hover { transform: translateY(-3px); } .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 20px; } .image-grid img { width: 100%; border-radius: 8px; transition: transform 0.2s ease; height: 180px; object-fit: cover; } .image-grid img:hover { transform: scale(1.05); } .pagination { margin-top: 20px; display: flex; justify-content: center; gap: 8px; } .pagination button { background-color: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .pagination button.active { background-color: #ff6600; color: #fff; border-color: #ff6600; } .pagination button:hover:not(.active) { background-color: #f0f0f0; } /* ========================================================= */ /* --- PÁGINA DE DETALHES DO IMÓVEL (FRONTEND) --- */ /* ========================================================= */ #propertyDetailsContainer { display: none; /* Controlado por JS para mostrar/esconder */ flex-direction: column; align-items: center; padding: 20px; } #propertyContent { width: 100%; max-width: 800px; background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .property-header h1.title { font-size: 2rem; color: #2563eb; margin-bottom: 0.5rem; } .property-header .price { font-size: 1.5rem; color: #f97316; font-weight: bold; } .property-header .address { font-size: 1rem; color: #555; margin-top: 0.5rem; } .description { white-space: pre-line; line-height: 1.7; color: #333; font-size: 1rem; } .features h3, .property-gallery h3 { font-size: 1.4rem; margin-bottom: 0.8rem; color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.4rem; } .features ul { list-style: none; padding-left: 0; } .features ul li { position: relative; padding-left: 1.2rem; margin-bottom: 0.6rem; color: #444; font-size: 1rem; } .features ul li::before { content: "\f00c"; /* FontAwesome check */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: #2563eb; position: absolute; left: 0; top: 0.1rem; font-size: 0.85rem; } .property-gallery .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .property-gallery .gallery-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .property-gallery .gallery-grid img:hover { transform: scale(1.02); } .property-footer { font-size: 0.9rem; color: #666; border-top: 1px solid #e2e8f0; padding-top: 1rem; } .property-footer a { color: #2563eb; text-decoration: none; word-break: break-word; } .property-footer a:hover { text-decoration: underline; } .error-message { background: #fee2e2; color: #b91c1c; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; text-align: center; font-weight: bold; border: 1px solid #ef4444; } /* Botões de Navegação nos Detalhes do Imóvel */ .back-button { margin-top: 30px; padding: 12px 24px; /* Se não usa pré-processador, copie as propriedades de .btn-primary aqui */ font-size: 16px; } .back-button i { margin-right: 6px; } .back-to-search-button { display: block; margin: 20px auto; /* Se não usa pré-processador, copie as propriedades de .btn-primary aqui */ padding: 10px 20px; font-size: 16px; } .back-to-search-button i { margin-right: 8px; } /* ========================================================= */ /* --- LIGHTBOX MODAL --- */ /* ========================================================= */ .modal { display: none; position: fixed; z-index: 999; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; max-width: 90%; max-height: 80%; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .modal-content, .modal-caption { animation-name: zoom; animation-duration: 0.4s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .close { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* ========================================================= */ /* --- ESTILOS DO PAINEL ADMINISTRATIVO (ADMIN_DASHBOARD) --- */ /* ========================================================= */ /* NOVO: Estilos para o Top Banner */ .top-banner { background-color: #f0f0f0; /* Um fundo claro para o banner */ padding: 10px 20px; text-align: center; position: fixed; width: 100%; top: 0; left: 0; z-index: 1001; /* Z-index maior para ficar ACIMA do admin-header */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-sizing: border-box; } .banner-logo { max-height: 50px; /* Altura máxima da logo no banner */ width: auto; display: block; /* Para centralizar a imagem */ margin: 0 auto; /* Centraliza a imagem no banner */ } /* Adicione esta classe ao da página admin para padding */ body.admin-page { /* Padding-top inicial será ajustado pelo JavaScript */ padding-top: 0; /* Começa com 0 para o JS calcular */ background-color: #f4f4f4; } .admin-header { background-color: #333; color: white; padding: 10px 20px; display: flex; flex-direction: row; /* Desktop: itens em linha */ justify-content: space-between; align-items: center; position: fixed; width: 100%; /* O topo do header agora será dinâmico, abaixo do banner */ top: auto; /* Removido para ser definido pelo JS no .admin-page */ left: 0; z-index: 1000; /* Z-index menor que o banner */ box-sizing: border-box; /* Removidas bordas de debug */ } /* Definindo o top do admin-header com base no top-banner */ /* Este estilo será sobrescrito ou complementado pelo JS, dependendo do design */ /* Para um bom controle, vamos fazer isso via JS */ /* Linha superior do cabeçalho admin (título e toggle) */ .header-top-row { display: flex; justify-content: space-between; align-items: center; width: 100%; /* Ocupa toda a largura dentro do header */ /* Removidas bordas de debug */ } .admin-header h1 { margin: 0; font-size: 1.5em; flex-shrink: 0; } /* Navegação do Admin */ .admin-nav { display: flex; /* DESKTOP: Menu visível e em linha */ gap: 15px; align-items: center; flex-wrap: nowrap; width: auto; /* Removidas bordas de debug */ } .admin-nav a { color: white; text-decoration: none; font-size: 1.0em; padding: 5px 10px; border-radius: 4px; transition: background-color 0.3s ease, color 0.3s ease; white-space: nowrap; } .admin-nav a:hover { color: white; background-color: #555; } /* Oculta o botão de menu (hambúrguer) por padrão no desktop */ .menu-toggle { display: none; /* DESKTOP: Botão hambúrguer escondido */ font-size: 1.8em; cursor: pointer; background: none; border: none; color: white; } .container-dashboard { padding: 20px; max-width: 1200px; margin: 20px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; } .dashboard-card { background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dashboard-card h3 { color: #555; margin-bottom: 10px; font-size: 1.1em; } .dashboard-card p { font-size: 2.2em; font-weight: bold; color: #007bff; margin: 0; } .dashboard-card i { font-size: 1.8em; margin-bottom: 10px; color: #007bff; } /* ========================================================= */ /* --- RESPONSIVIDADE (MEDIA QUERIES) --- */ /* ========================================================= */ @media (max-width: 1024px) { /* Regras para telas até 1024px de largura */ .property-header h1.title { font-size: 1.8rem; } .property-header .price { font-size: 1.4rem; } } @media (max-width: 992px) { /* Regras para telas até 992px de largura */ .gallery { /* Galeria principal do frontend */ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* Regras para telas até 768px de largura */ /* Para o Frontend Público */ .container { flex-direction: column; } .filtros-laterais { border-left: none; border-bottom: 1px solid #ddd; margin-bottom: 20px; flex: 1 1 100%; } #propertyContent { padding: 1rem; gap: 1rem; } .property-header h1.title { font-size: 1.6rem; } .property-header .price { font-size: 1.3rem; } .features ul li { font-size: 0.95rem; } .property-gallery .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; } .property-gallery .gallery-grid img { height: 140px; } .property-info .address, .property-info .source { font-size: 0.9rem; } /* Para o Painel Administrativo (admin_dashboard) */ /* body.admin-page padding-top será dinâmico pelo JS */ .admin-header { flex-direction: column; /* MOBILE: Empilha título e menu verticalmente */ align-items: flex-start; /* Alinha o conteúdo à esquerda */ padding-bottom: 0; /* Remove padding inferior extra para o menu toggle */ height: auto; /* Permite que o header se expanda */ } .header-top-row { width: 100%; /* Garante que a linha superior ocupe 100% da largura */ justify-content: space-between; /* Título à esquerda, toggle à direita */ margin-bottom: 10px; /* Espaço entre a linha superior e o menu */ } .admin-header h1 { font-size: 1.3em; /* Título um pouco menor no mobile */ padding: 0; /* Remove padding extra */ } .admin-nav { display: none; /* MOBILE: Menu escondido por padrão, exibido via JS com .active */ flex-direction: column; width: 100%; /* Ocupa a largura total abaixo do título */ background-color: #444; /* Fundo para o menu aberto */ padding: 10px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 999; align-items: flex-start; /* Alinha os itens do menu à esquerda */ gap: 0; /* Remove gap para usar padding individual */ } /* Quando a classe 'active' é adicionada pelo JavaScript */ .admin-nav.active { display: flex; /* MOBILE: Mostra o menu quando ativo */ } .admin-nav a { width: 100%; text-align: left; /* Alinha texto do link à esquerda */ padding: 12px 20px; /* Mais padding para mobile */ margin: 0; border-bottom: 1px solid #555; box-sizing: border-box; /* Garante que padding e border não aumentem a largura */ } .admin-nav a:last-child { border-bottom: none; } .menu-toggle { display: block; /* MOBILE: Mostra o botão hambúrguer */ } .container-dashboard { margin: 10px; padding: 15px; } .dashboard-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { /* Regras para telas até 600px de largura */ .gallery { grid-template-columns: 1fr; } .custom-search { flex-direction: column; align-items: center; } .custom-search input { width: 90%; } .custom-search button { width: 90%; } } @media (max-width: 480px) { /* Regras para telas até 480px de largura */ .property-header h1.title { font-size: 1.4rem; } .property-header .price { font-size: 1.2rem; } .property-gallery .gallery-grid img { height: 120px; } .menu button, .btn-primary { padding: 8px 15px; font-size: 14px; } .tab { padding: 8px 15px; font-size: 14px; } }