/* Tema customizado sobre o Bootstrap 5.3 (CDN) — paleta da marca (navy + verdes, ver o-flipador-tokens.css, carregado antes deste arquivo) + Inter + superfícies elevadas. Suporta claro (padrão) e escuro via [data-bs-theme] no . Papéis das cores (brand guidelines v1.1): - Ação primária, links, item ativo: navy (branco no escuro) — tokens --action-*. - Verde da marca (--accent): só acento, progresso e iconografia. Branco sobre ele NÃO passa AA (3,0:1) — nunca usar como fundo de botão com texto. */ :root { --accent: var(--brand-green); --accent-text: var(--text-positive); --action-primary-hover-bg: #164254; --action-primary-rgb: 12, 47, 64; --action-link-hover: var(--text-secondary); --focus-ring: var(--border-focus); --focus-ring-rgb: 14, 129, 117; /* Remapeia o "primary" do Bootstrap (badges, border-primary, checkbox marcado, paginação, link de aba etc.) pra marca em vez do azul padrão dele. */ --bs-primary: #0C2F40; --bs-primary-rgb: 12, 47, 64; --bs-primary-text-emphasis: #0C2F40; --bs-primary-bg-subtle: #EAF1F3; --bs-primary-border-subtle: #C8D6DC; --bs-link-color: #0C2F40; --bs-link-color-rgb: 12, 47, 64; --bs-link-hover-color: #385361; --bs-link-hover-color-rgb: 56, 83, 97; --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-border-radius: 0.65rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 0.9rem; /* Tokens de superfície — claro por padrão */ --surface: #ffffff; --surface-nav: rgba(255, 255, 255, 0.85); } [data-bs-theme="light"] { --bs-tertiary-bg: #f4f5f7; --bs-border-color: #e4e6eb; --surface: #ffffff; --surface-nav: rgba(255, 255, 255, 0.85); } [data-bs-theme="dark"] { /* Superfícies: azul institucional do kit (o-flipador-tokens.css) — página mais escura, cards um degrau acima, realces (hover/skeleton) mais um. */ --bs-body-bg: var(--surface-page); --bs-body-bg-rgb: 8, 37, 48; --bs-tertiary-bg: var(--surface-card); --bs-tertiary-bg-rgb: 12, 47, 64; --bs-secondary-bg: var(--surface-subtle); --bs-secondary-bg-rgb: 22, 66, 84; --bs-border-color: var(--border-default); --bs-body-color: var(--text-primary); --bs-secondary-color: var(--text-secondary); --surface: var(--surface-card); --surface-nav: rgba(8, 37, 48, 0.85); /* Ação primária invertida (branco com texto navy — tokens --action-* já trocam no escuro). O "primary" do Bootstrap vira o teal do kit em vez do navy: sobre superfície escura o navy some, e o branco quebraria badges/checkbox (texto branco fixo em cima). */ --accent-text: var(--brand-green-end); --action-primary-hover-bg: #EAF1F3; --action-primary-rgb: 255, 255, 255; --action-link-hover: var(--text-secondary); --focus-ring: #11AF9D; --focus-ring-rgb: 17, 175, 157; --bs-primary: #0E8175; --bs-primary-rgb: 14, 129, 117; --bs-primary-text-emphasis: #C5D7DE; --bs-primary-bg-subtle: #164254; --bs-primary-border-subtle: #3A5D6A; --bs-link-color: #FFFFFF; --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color: #C5D7DE; --bs-link-hover-color-rgb: 197, 215, 222; } body { font-feature-settings: "cv11", "ss01"; letter-spacing: -0.01em; } /*
tem min-width: min-content por padrão no navegador, o que quebra o grid flex do Bootstrap (.row/.col-*) quando usado dentro dele (crispy Fieldset). */ fieldset { min-width: 0; } fieldset legend { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bs-border-color); } h1, h2, h3, h4, h5, .navbar-brand { letter-spacing: -0.02em; font-weight: 600; } /* Links: navy (branco no escuro) — o sublinhado padrão do Bootstrap fica, já que o guia pede outro sinal além da cor. */ a { color: var(--action-link); } a:hover { color: var(--action-link-hover); } /* Sidebar */ .app-shell { display: flex; min-height: 100vh; align-items: flex-start; } .app-sidebar { width: 240px; flex: 0 0 240px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.25rem 1rem; background-color: var(--surface-nav); backdrop-filter: blur(8px); border-right: 1px solid var(--bs-border-color); } .app-main { flex: 1 1 auto; min-width: 0; } .app-content { flex: 1 1 auto; min-width: 0; } .sidebar-brand { display: block; text-decoration: none; padding: 0 0.25rem; } /* Logo: as duas versões ficam no HTML; o tema (data-bs-theme) decide qual aparece. Light sobre fundo claro, Dark sobre fundo escuro (brand guidelines v1.1, p. 13). */ .brand-logo-dark { display: none; } [data-bs-theme="dark"] .brand-logo-light { display: none; } [data-bs-theme="dark"] .brand-logo-dark { display: inline-block; } .sidebar-nav { margin-top: 1.5rem; gap: 0.15rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 0.6rem; color: var(--bs-secondary-color); font-weight: 500; padding: 0.55rem 0.75rem; border-radius: var(--bs-border-radius-sm); } .sidebar-nav .nav-link:hover { color: var(--bs-body-color); background-color: var(--bs-tertiary-bg); } .sidebar-nav .nav-link.active { color: var(--action-link); background-color: rgba(var(--action-primary-rgb), 0.08); } /* Barra superior — sempre visível (não só no mobile); no mobile também carrega o botão que abre a sidebar como offcanvas. */ .app-topbar { width: 100%; padding: 0.75rem 1rem; background-color: var(--surface-nav); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; } .offcanvas { background-color: var(--surface-nav); } .offcanvas .sidebar-nav { margin-top: 0.5rem; } /* Avatar do usuário (iniciais) e o botão que o envolve na barra superior */ .avatar-btn { border: none; background: transparent; padding: 0; } .avatar-btn::after { display: none; } .avatar-circle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--action-primary-bg); color: var(--action-primary-text); font-weight: 600; font-size: 0.8rem; object-fit: cover; } /* Skeleton de carregamento pra fotos (imóvel/avatar) — a URL da imagem redireciona pro Spaces antes de carregar de fato, então sem isso a foto fica "sumida" por um instante depois do resto da página já ter renderizado. Precisa de DOIS elementos (não dá pra fazer só no ): opacity afeta o elemento inteiro, fundo e conteúdo juntos — se o shimmer e o fade-in fossem a mesma coisa, zerar a opacidade da imagem escondia o shimmer também. Aplicar a classe no elemento que ENVOLVE a , com o tamanho já definido (width/height ou aspect-ratio) pra reservar o espaço; a dentro dele fica com opacity 0 até carregar (evita pintar de cima pra baixo) e assume 100% de largura/altura do wrapper. */ .img-skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%); background-size: 200% 100%; animation: img-skeleton-shimmer 1.4s ease-in-out infinite; } .img-skeleton.is-loaded { animation: none; background: none; } .img-skeleton > img { opacity: 0; transition: opacity 0.25s ease-out; } .img-skeleton.is-loaded > img { opacity: 1; } @keyframes img-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Asterisco de campo obrigatório (gerado pelo crispy-forms) — sem isso herda a cor normal do texto, ficando pouco visível como indicador. */ .asteriskField { color: var(--bs-danger); } /* Cards */ .card { background-color: var(--surface); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } [data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .card.stat-card { transition: transform 0.15s ease, border-color 0.15s ease; } .card.stat-card:hover { transform: translateY(-2px); border-color: var(--accent); } .card .card-body { padding: 1.25rem; } /* Botões — retinta os componentes já compilados via suas próprias variáveis CSS */ .btn { font-weight: 500; border-radius: var(--bs-border-radius); } .btn-primary { --bs-btn-color: var(--action-primary-text); --bs-btn-bg: var(--action-primary-bg); --bs-btn-border-color: var(--action-primary-bg); --bs-btn-hover-color: var(--action-primary-text); --bs-btn-hover-bg: var(--action-primary-hover-bg); --bs-btn-hover-border-color: var(--action-primary-hover-bg); --bs-btn-active-color: var(--action-primary-text); --bs-btn-active-bg: var(--action-primary-hover-bg); --bs-btn-active-border-color: var(--action-primary-hover-bg); --bs-btn-disabled-color: var(--action-primary-text); --bs-btn-disabled-bg: var(--action-primary-bg); --bs-btn-disabled-border-color: var(--action-primary-bg); --bs-btn-focus-shadow-rgb: var(--focus-ring-rgb); } .btn-outline-primary { --bs-btn-color: var(--action-link); --bs-btn-border-color: var(--action-primary-bg); --bs-btn-hover-color: var(--action-primary-text); --bs-btn-hover-bg: var(--action-primary-bg); --bs-btn-hover-border-color: var(--action-primary-bg); --bs-btn-active-color: var(--action-primary-text); --bs-btn-active-bg: var(--action-primary-bg); --bs-btn-active-border-color: var(--action-primary-bg); --bs-btn-disabled-color: var(--action-link); --bs-btn-disabled-border-color: var(--action-primary-bg); --bs-btn-focus-shadow-rgb: var(--focus-ring-rgb); } .btn-outline-light { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); } /* Formulários */ .form-control:focus, .form-select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 0.2rem rgba(var(--focus-ring-rgb), 0.25); } .form-check-input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 0.2rem rgba(var(--focus-ring-rgb), 0.25); } .form-control, .form-select { border-radius: var(--bs-border-radius-sm); } /* Campos travados (ex.: preenchidos automaticamente pelo CEP) — precisa ficar óbvio que não dá pra editar direto, sem depender só do estilo padrão sutil do Bootstrap para :read-only. */ .form-control:read-only { background-color: var(--bs-tertiary-bg); cursor: not-allowed; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2Zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; } .form-control:read-only:focus { box-shadow: none; border-color: var(--bs-border-color); } /* Tabelas — sem table-dark, herdam o tema ambiente com um pouco mais de respiro */ .table { --bs-table-bg: transparent; } .table > :not(caption) > * > * { padding: 0.65rem 0.75rem; } .table thead th { color: var(--bs-secondary-color); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; border-bottom-width: 1px; } /* Badges de status */ .badge { font-weight: 500; letter-spacing: 0.01em; padding: 0.4em 0.7em; border-radius: 999px; } /* Alerts */ .alert { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); } /* Seções com divisor sutil no lugar de
*/ .section-divider { border-top: 1px solid var(--bs-border-color); margin: 2rem 0; } .text-muted-2 { color: var(--bs-secondary-color) !important; } /* Stepper horizontal do wizard de cadastro de imóvel (inspirado no componente Stepper do MUI, implementado em CSS puro — sem dependência). */ .wizard-stepper { display: flex; align-items: flex-start; } .wizard-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; text-align: center; } .wizard-step-indicator { display: flex; align-items: center; width: 100%; } .wizard-step-circle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bs-border-color); color: var(--bs-secondary-color); font-weight: 600; font-size: 0.875rem; background: var(--bs-body-bg); } .wizard-step-connector { flex: 1; height: 2px; background: var(--bs-border-color); } .wizard-step-connector.is-invisible { background: transparent; } .wizard-step-connector.is-active { background: var(--accent); } .wizard-step.is-current .wizard-step-circle { border-color: var(--action-primary-bg); color: var(--action-primary-text); background: var(--action-primary-bg); } .wizard-step.is-completed .wizard-step-circle { border-color: var(--accent); color: var(--accent-text); background: var(--bs-body-bg); } .wizard-step-label { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--bs-secondary-color); } .wizard-step.is-current .wizard-step-label { color: var(--bs-body-color); font-weight: 600; } .wizard-step-optional { display: block; font-size: 0.75rem; color: var(--bs-secondary-color); } /* Tabelas de especificação lado a lado: largura de rótulo fixa para os valores alinharem entre as tabelas, independente do texto do rótulo. */ .spec-table th { width: 45%; } /* Feedback de "observação salva" no checklist (ver properties/_checklist_step.html) — some sozinho depois de alguns segundos, sem precisar de JS pra isso. */ @keyframes checklist-note-saved-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } .checklist-note-feedback { animation: checklist-note-saved-fade 2.5s ease forwards; } /* display:flex só quando NÃO escondido — de propósito, sem usar a classe utilitária "d-flex" do Bootstrap aqui: ela usa !important, que ganha da regra nativa do atributo [hidden] (display:none, sem !important) e deixava o elemento visível mesmo com hidden setado via JS/template. */ .checklist-note-display:not([hidden]), .checklist-note-form:not([hidden]) { display: flex; } /* Seta do painel colapsável de cada fase do checklist (ver property_detail.html) — o Bootstrap alterna a classe "collapsed" no próprio botão sozinho, só precisamos girar o ícone em cima dela. */ .checklist-phase-chevron { transition: transform 0.2s ease; } .checklist-phase-toggle.collapsed .checklist-phase-chevron { transform: rotate(-90deg); } /* Abas (nav-tabs): sem o azul padrão do Bootstrap, o item inativo usa o texto secundário da marca e o ativo (emphasis) se destaca por cor + borda. */ .nav-tabs .nav-link { --bs-nav-link-color: var(--text-secondary); --bs-nav-link-hover-color: var(--text-primary); } /* Barra de progresso: verde da marca (progresso é um dos papéis do verde). */ .progress { --bs-progress-bar-bg: var(--accent); } /* O Bootstrap compila o azul padrão (#0d6efd) direto nestes componentes, sem passar por --bs-primary — então o remapeamento lá em cima não alcança. Cada um precisa ser apontado pra marca na mão. */ .form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); } .dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); --bs-dropdown-link-active-color: #fff; } .pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-active-color: #fff; --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--focus-ring-rgb), 0.25); } .list-group { /* Transparente: o item herda o fundo do card em volta. O padrão do Bootstrap (--bs-body-bg) só passava despercebido no claro, onde página e card são ambos brancos; no escuro virava uma faixa mais escura dentro do card. */ --bs-list-group-bg: transparent; --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); } .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); } /* Cores fixas de status (ver STATUS_COLORS em property_extras.py). Adquirido mantém o azul padrão (distinto do teal/navy da marca e do verde de "pronto para venda"); vendido usa o estilo da ação primária — navy no claro, branco no escuro — pra fechar a sequência com o tom mais forte da marca. */ .text-bg-status-acquired { background-color: #0d6efd; color: #fff; } .text-bg-status-sold { background-color: var(--action-primary-bg); color: var(--action-primary-text); } /* Altura dos controles: 44px (brand guidelines v1.1, p. 10). Só o tamanho padrão — -sm (ações compactas em tabelas, dropdowns) e -lg ficam como estão. Feito por padding vertical (9px + linha de 24px + borda de 1px, dos dois lados = 44px) e não por min-height, pra não esticar botões com p-0 (ex.: .btn-link usado como texto clicável). */ .btn:not(.btn-sm):not(.btn-lg) { --bs-btn-padding-y: 0.5625rem; } .form-control:not(.form-control-sm):not(.form-control-lg), .form-select:not(.form-select-sm):not(.form-select-lg), .input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-text { padding-top: 0.5625rem; padding-bottom: 0.5625rem; } /* O botão "Escolher arquivo" do input file compensa o padding do campo com margem negativa — precisa acompanhar o novo padding pra continuar preenchendo a altura. */ .form-control:not(.form-control-sm):not(.form-control-lg)::file-selector-button { padding-top: 0.5625rem; padding-bottom: 0.5625rem; margin-top: -0.5625rem; margin-bottom: -0.5625rem; }