/* ============================================================================
style-extras.css — Overrides visuais do IMOBSYSTEM admin (2026-05-28)
Cada tela admin carrega este arquivo com um próprio no (~220 telas).
Usa !important onde precisa vencer o style.min.css e os style= inline.
CACHE (2026-09-23): o .htaccess guarda CSS por 1 ANO no navegador. Os
levam ?v= (filemtime, em PHP) — então basta
subir/sincronizar ESTE arquivo que todo mundo baixa a versão nova; não precisa
mexer nas telas. Exceção: 5 telas montam o dentro de echo e usam
?v=20260923 fixo (confirma_exclusao, blog_categorias_excluir,
encurtar_link_excluir_script, inter_webhook_registrar,
website_blog_excluir_post_script) — só telas de confirmação/aviso.
Sincroniza para os tenants pelo 'incluir_extra' do deploy_arquivos.php.
============================================================================ */
/* --- Submit buttons antigos (input type=submit sem classe btn) --- */
/* Aplica visual de Bootstrap btn-primary nos inputs submit/reset que não
tenham classe btn explícita. Cobre 100+ forms espalhados pelo sistema. */
input[type="submit"]:not(.btn):not(.form-control),
input[type="reset"]:not(.btn):not(.form-control),
input[type="button"]:not(.btn):not(.form-control):not([onclick*="show_pass"]) {
display: inline-block;
padding: 0.5rem 1.2rem;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.5;
color: #fff;
background-color: #1976d2;
border: 1px solid #1976d2;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease-in-out, transform 0.05s;
margin: 4px 2px;
}
input[type="submit"]:not(.btn):not(.form-control):hover,
input[type="reset"]:not(.btn):not(.form-control):hover {
background-color: #1565c0;
border-color: #1565c0;
}
input[type="submit"]:not(.btn):not(.form-control):active,
input[type="reset"]:not(.btn):not(.form-control):active {
transform: translateY(1px);
}
input[type="reset"]:not(.btn):not(.form-control) {
background-color: #6c757d;
border-color: #6c757d;
}
input[type="reset"]:not(.btn):not(.form-control):hover {
background-color: #5a6268;
border-color: #5a6268;
}
/* --- Tabelas cruas (sem class) --- */
/* Aplica padding, borda e hover suaves em
sem nenhuma classe. */
table:not([class]),
table.product-overview {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin-bottom: 1rem;
}
table:not([class]) > * > tr:hover,
table.product-overview tr:hover {
background-color: #f8f9fa;
}
table:not([class]) th,
table.product-overview th {
padding: 0.65rem 0.75rem;
font-weight: 600;
color: #495057;
background-color: #f1f3f5;
border-bottom: 2px solid #dee2e6;
font-size: 0.9rem;
}
table:not([class]) td,
table.product-overview td {
padding: 0.55rem 0.75rem;
vertical-align: middle;
border-bottom: 1px solid #e9ecef;
}
/* --- Inputs sem form-control ---
Exclui select2-search__field (input interno do Select2 multi) e chosen-search
(Chosen.js) — esses são gerenciados pelos plugins e não devem ser estilizados. */
input[type="text"]:not(.form-control):not(.btn):not(.select2-search__field),
input[type="email"]:not(.form-control):not(.btn),
input[type="number"]:not(.form-control):not(.btn),
input[type="tel"]:not(.form-control):not(.btn),
input[type="url"]:not(.form-control):not(.btn),
input[type="search"]:not(.form-control):not(.btn):not(.select2-search__field),
input[type="date"]:not(.form-control):not(.btn),
input[type="time"]:not(.form-control):not(.btn),
input[type="password"]:not(.form-control):not(.btn),
select:not(.form-control):not(.select2-hidden-accessible),
textarea:not(.form-control) {
padding: 0.4rem 0.65rem;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: #fff;
color: #495057;
font-size: 0.9rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
max-width: 100%;
}
input[type="text"]:not(.form-control):not(.select2-search__field):focus,
input[type="email"]:not(.form-control):focus,
input[type="number"]:not(.form-control):focus,
input[type="tel"]:not(.form-control):focus,
input[type="date"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
textarea:not(.form-control):focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.15rem rgba(25, 118, 210, 0.15);
outline: 0;
}
/* Reset: garantir que select2-search__field não herde estilos genéricos.
Sem isso, o input interno do select2-multiple aparece como caixa alta vazia. */
.select2-search__field {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
min-height: 24px !important;
box-shadow: none !important;
}
/* Selectos multiplos com altura natural (não esticar) */
.select2-selection--multiple {
min-height: 38px;
padding: 2px 4px !important;
}
.select2-selection__rendered {
padding: 0 !important;
}
/* --- Botões de ação na lista de imóveis/leads --- */
/* Ícones de editar/excluir mais legíveis */
td a[title="Editar"], td a[title="Excluir"], td a[title="Detalhes"] {
display: inline-block;
padding: 4px 6px;
border-radius: 4px;
margin: 0 2px;
transition: background-color 0.15s;
text-decoration: none;
}
td a[title="Editar"]:hover { background-color: #fff3cd; }
td a[title="Excluir"]:hover { background-color: #f8d7da; }
td a[title="Detalhes"]:hover { background-color: #d1ecf1; }
/* --- Cards modernos --- */
.card { border: 1px solid #e9ecef; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: box-shadow 0.2s; }
/* --- Alerts dismissíveis com transição mais suave --- */
.alert-dismissible .close { opacity: 0.6; }
.alert-dismissible .close:hover { opacity: 1; }
/* --- Breadcrumb mais elegante --- */
.breadcrumb {
background-color: transparent;
padding: 0;
font-size: 0.85rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; }
/* --- Page titles mais limpos --- */
.text-themecolor { color: #1976d2 !important; font-weight: 500; }
/* --- Tooltips mais legíveis (Bootstrap padrão é meio pequeno) --- */
.tooltip-inner { font-size: 0.85rem; padding: 6px 10px; }
/* --- Scroll suave para anchors --- */
html { scroll-behavior: smooth; }
/* --- Loading mais elegante (substitui o preloader cinza) --- */
.preloader { background-color: #fff; }
/* --- Badges com peso e cor melhores --- */
.badge { font-weight: 500; padding: 0.35em 0.6em; font-size: 80%; }
.badge-pill { padding-left: 0.7em; padding-right: 0.7em; }
/* ═══════════════════════════════════════════════════════════════════════════
MODO ESCURO DO PAINEL (2026-07-31)
---------------------------------------------------------------------------
Ativado pelo ícone do rolo de tinta → "Escurecer o painel inteiro", que põe a
classe `tema-escuro` no e guarda a escolha no navegador.
Por que existe: os temas "com menu escuro" do template escurecem APENAS o menu
lateral — o conteúdo continuava branco, que é o que cansa a vista à noite.
Aqui escurecemos fundo, cartões, tabelas, campos e menus suspensos.
Só age quando a classe está presente: sem ela, nada muda. As cores saem de
variáveis — para calibrar o tom, altere apenas o bloco :root abaixo.
═══════════════════════════════════════════════════════════════════════════ */
body.tema-escuro {
--esc-fundo: #151a23; /* fundo da página */
--esc-cartao: #1e2530; /* cartões, tabelas, modais */
--esc-campo: #232b38; /* campos de formulário */
--esc-borda: #2f3947; /* bordas e divisórias */
--esc-texto: #e4e8ef; /* texto principal */
--esc-texto2: #a7b0bd; /* texto secundário/apoio */
background-color: var(--esc-fundo) !important;
color: var(--esc-texto);
}
body.tema-escuro .page-wrapper,
body.tema-escuro .container-fluid { background-color: var(--esc-fundo) !important; }
/* Cartões, tabelas e caixas */
body.tema-escuro .card,
body.tema-escuro .modal-content,
body.tema-escuro .dropdown-menu,
body.tema-escuro .list-group-item,
body.tema-escuro .right-sidebar { background-color: var(--esc-cartao) !important; color: var(--esc-texto); border-color: var(--esc-borda) !important; }
body.tema-escuro .card-body,
body.tema-escuro .card-header,
body.tema-escuro .card-footer { background-color: transparent !important; color: var(--esc-texto); }
body.tema-escuro table,
body.tema-escuro .table { color: var(--esc-texto) !important; }
body.tema-escuro .table thead th { background-color: rgba(255,255,255,.04); color: var(--esc-texto); border-color: var(--esc-borda) !important; }
body.tema-escuro .table td,
body.tema-escuro .table th { border-color: var(--esc-borda) !important; }
body.tema-escuro .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025); }
body.tema-escuro .table-hover tbody tr:hover { background-color: rgba(255,255,255,.06); }
/* Formulários */
body.tema-escuro .form-control,
body.tema-escuro input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.tema-escuro select,
body.tema-escuro textarea,
body.tema-escuro .select2-selection,
body.tema-escuro .select2-dropdown {
background-color: var(--esc-campo) !important;
color: var(--esc-texto) !important;
border-color: var(--esc-borda) !important;
}
body.tema-escuro .form-control::placeholder { color: #7c8697; }
/* ── Caixas com fundo branco HARDCODED que quebravam no modo escuro ──
Centralizado aqui (todas as telas carregam este arquivo) para não deixar
nenhuma "caixa branca com texto cinza" ilegível no escuro. */
/* Saídas/resultados de texto (I.A. de descrição/avaliação, etc.) → cor de campo */
body.tema-escuro .ia-result,
body.tema-escuro .resultbox,
body.tema-escuro #div_nova_descricao { background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }
/* Cartões/painéis (auto-config fiscal/boletos, onboarding, kanban de leads, portal) → cor de cartão */
body.tema-escuro .auto-card,
body.tema-escuro .ob-card,
body.tema-escuro .kanban-card,
body.tema-escuro .pc-sec { background-color: var(--esc-cartao) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }
/* ── Kanban de leads (atendimento_index.php, modo Kanban) ──
O cartão já escurecia (regra acima), mas a COLUNA ficava #eef1f5 — faixa clara com
cartões escuros dentro. A coluna usa o tom de fundo da página (mais escuro que o
cartão), pra os cartões continuarem destacados como no tema claro. */
body.tema-escuro .kanban-col { background-color: var(--esc-fundo) !important; border: 1px solid var(--esc-borda); }
body.tema-escuro .kanban-col-head { color: var(--esc-texto) !important; border-bottom-color: var(--esc-borda) !important; }
body.tema-escuro .kanban-count { background-color: var(--esc-borda) !important; color: var(--esc-texto) !important; }
body.tema-escuro .kanban-col-body.drag-over { background-color: rgba(23,99,214,.18) !important; outline-color: #4d8fe6 !important; }
body.tema-escuro .kanban-card .kc-meta,
body.tema-escuro .kanban-card .kc-obs { color: var(--esc-texto2) !important; }
body.tema-escuro .kanban-card .kc-obs { border-top-color: var(--esc-borda) !important; }
/* ── Caixa "Valor de referência de mercado" (requires/fipe_sugestao_imovel) ──
Aparece em adicionar_produto_area.php e produto_editar_area.php. Até
22/09/2026 as cores eram style= inline, inclusive nas strings montadas pelo
JavaScript — e atributo style vence folha de estilo, então no tema escuro a
caixa ficava clara com o texto claro do tema por cima.
O max-width existe porque ela fica FORA do grid dos campos: sem teto, esticava
a linha inteira enquanto os campos ao lado ocupam 3 ou 4 colunas. */
.fipe-sug-box { border:1px solid #d7e3ec; background:#f4f9fc; border-radius:8px;
padding:12px 14px; max-width:560px; }
.fipe-sug-titulo { font-size:13px; color:#0d6f8b; font-weight:600; margin-bottom:4px; }
.fipe-sug-titulo small { font-weight:400; color:#7a8a99; }
.fipe-sug-body,
.fipe-sug-texto { font-size:13px; color:#333; }
.fipe-sug-apagado { color:#8a97ad; }
.fipe-sug-link { color:#0d6f8b; }
.fipe-sug-valor { font-size:20px; font-weight:700; color:#0d6f8b; }
.fipe-sug-aviso { color:#a06a00; }
.fipe-sug-aplicar { color:#27ae60; }
body.tema-escuro .fipe-sug-box { background:var(--esc-campo) !important; border-color:var(--esc-borda) !important; }
body.tema-escuro .fipe-sug-body,
body.tema-escuro .fipe-sug-texto { color:var(--esc-texto) !important; }
body.tema-escuro .fipe-sug-apagado { color:var(--esc-texto2) !important; }
body.tema-escuro .fipe-sug-box b { color:var(--esc-texto) !important; }
/* Os tons de destaque ganham versões mais claras: o azul-petróleo e o verde
originais somem contra o fundo escuro. */
body.tema-escuro .fipe-sug-titulo,
body.tema-escuro .fipe-sug-link,
body.tema-escuro .fipe-sug-valor { color:#6fc4e0 !important; }
body.tema-escuro .fipe-sug-titulo small { color:var(--esc-texto2) !important; }
body.tema-escuro .fipe-sug-aviso { color:#e0b566 !important; }
body.tema-escuro .fipe-sug-aplicar { color:#5fd08a !important; }
/* ── Seletor "Como a foto vira quadrada no site?" ────────────────────────────
requires/miniatura_modo_picker.php, usado em foto_index.php e
condominio_foto_index.php. As cores moraram em style= inline até 22/09/2026 —
e atributo style vence folha de estilo, então no tema escuro a caixa ficava
clara com o texto claro do tema por cima, ilegível. */
.mp-wrap { margin:8px 0 4px; padding:10px 12px; border:1px solid #e0e6ea;
border-radius:8px; background:#fafcfe; max-width:520px; }
.mp-titulo { font-size:13px; font-weight:600; color:#37474f; margin-bottom:2px; }
.mp-opcao { display:block; font-size:13px; margin:4px 0; cursor:pointer; font-weight:400; }
.mp-dica { color:#8a97ad; }
body.tema-escuro .mp-wrap { background:var(--esc-campo) !important; border-color:var(--esc-borda) !important; color:var(--esc-texto) !important; }
body.tema-escuro .mp-titulo { color:var(--esc-texto) !important; }
body.tema-escuro .mp-opcao { color:var(--esc-texto) !important; }
body.tema-escuro .mp-dica { color:var(--esc-texto2) !important; }
body.tema-escuro .mp-wrap strong { color:var(--esc-texto) !important; }
/* ── Bloco "Nota Fiscal dos honorários" (relatorio_editar_area.php) ──────────
As cores vivem aqui, e não em style= na página, justamente para o modo escuro
conseguir trocá-las: atributo style vence folha de estilo, e antes a caixa
ficava clara com o texto claro do tema escuro por cima — ilegível. */
.nf-card { border:1px solid #e0a800; border-radius:8px; background:#fffdf5; }
.nf-box { border:1px solid #f0e2b8; border-radius:6px; background:#fff;
padding:12px 14px; margin-bottom:14px; }
body.tema-escuro .nf-card { background:var(--esc-cartao) !important; color:var(--esc-texto) !important; border-color:#7a6320 !important; }
body.tema-escuro .nf-box { background:var(--esc-campo) !important; color:var(--esc-texto) !important; border-color:var(--esc-borda) !important; }
body.tema-escuro .nf-card .text-muted,
body.tema-escuro .nf-box .text-muted { color:var(--esc-texto2) !important; }
/* Barra de seleção múltipla da aba "Notas do mês" (alert-light do Bootstrap).
Nasce quase branca com texto escuro; no tema escuro virava faixa branca no
meio da tabela. Vale para qualquer .alert-light do painel. */
body.tema-escuro .alert-light { background-color:var(--esc-campo) !important; color:var(--esc-texto) !important; border-color:var(--esc-borda) !important; }
body.tema-escuro .alert-light .text-muted,
body.tema-escuro .alert-light small { color:var(--esc-texto2) !important; }
/* Caixas com fundo claro declarado NA PRÓPRIA PÁGINA (website_oferecemos.php e
website_slider_area.php). O #foco_wrap_N traz o fundo em atributo style=, e
atributo só perde para !important — por isso estas regras levam !important em
vez de simplesmente virem depois. O seletor é por prefixo porque o id carrega
o número do slider (foco_wrap_1, foco_wrap_2, …). */
body.tema-escuro .caixa-row,
body.tema-escuro [id^="foco_wrap_"] { background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }
/* Hub do Assistente I.A.: descrição apagada + borda clara */
body.tema-escuro .ia-hub .card { border-color: var(--esc-borda) !important; }
body.tema-escuro .ia-hub .desc { color: var(--esc-texto2, #9aa6b3) !important; }
body.tema-escuro .select2-selection__rendered,
body.tema-escuro .select2-results__option { color: var(--esc-texto) !important; }
body.tema-escuro .select2-results__option--highlighted { background-color: #2c3648 !important; }
body.tema-escuro .input-group-text { background-color: var(--esc-campo); color: var(--esc-texto2); border-color: var(--esc-borda); }
/* ── Daterangepicker (calendário popup) no MODO ESCURO (2026-09-03) ─────────────
O bootstrap-daterangepicker vem com fundo branco fixo; sem isto o calendário do
"Período do extrato" (e das telas caixa/boletos/contas/aluguel_dia...) aparecia
claro no meio do painel escuro. É anexado ao , então herda .tema-escuro. */
body.tema-escuro .daterangepicker {
background-color: var(--esc-cartao) !important;
border-color: var(--esc-borda) !important;
color: var(--esc-texto) !important;
}
body.tema-escuro .daterangepicker:after { border-bottom-color: var(--esc-cartao) !important; }
body.tema-escuro .daterangepicker:before { border-bottom-color: var(--esc-borda) !important; }
body.tema-escuro .daterangepicker .calendar-table {
background-color: var(--esc-cartao) !important;
border-color: var(--esc-cartao) !important;
}
body.tema-escuro .daterangepicker td,
body.tema-escuro .daterangepicker th { color: var(--esc-texto) !important; }
body.tema-escuro .daterangepicker td.available:hover,
body.tema-escuro .daterangepicker th.available:hover { background-color: #2c3648 !important; }
body.tema-escuro .daterangepicker td.off,
body.tema-escuro .daterangepicker td.off.in-range,
body.tema-escuro .daterangepicker td.off.start-date,
body.tema-escuro .daterangepicker td.off.end-date {
background-color: var(--esc-cartao) !important;
color: #6b7686 !important;
}
body.tema-escuro .daterangepicker td.in-range { background-color: #2a3446 !important; color: var(--esc-texto) !important; }
body.tema-escuro .daterangepicker td.active,
body.tema-escuro .daterangepicker td.active:hover { background-color: #1e88e5 !important; color: #fff !important; }
body.tema-escuro .daterangepicker .ranges li { color: var(--esc-texto) !important; }
body.tema-escuro .daterangepicker .ranges li:hover { background-color: #2c3648 !important; }
body.tema-escuro .daterangepicker .ranges li.active { background-color: #1e88e5 !important; color: #fff !important; }
body.tema-escuro .daterangepicker select.monthselect,
body.tema-escuro .daterangepicker select.yearselect,
body.tema-escuro .daterangepicker select.hourselect,
body.tema-escuro .daterangepicker select.minuteselect,
body.tema-escuro .daterangepicker select.secondselect,
body.tema-escuro .daterangepicker select.ampmselect,
body.tema-escuro .daterangepicker .input-mini {
background-color: var(--esc-campo) !important;
color: var(--esc-texto) !important;
border-color: var(--esc-borda) !important;
}
body.tema-escuro .daterangepicker .drp-buttons { border-top-color: var(--esc-borda) !important; }
body.tema-escuro .daterangepicker .drp-calendar.left { border-color: var(--esc-borda) !important; }
body.tema-escuro .daterangepicker .drp-calendar.right { border-color: var(--esc-borda) !important; }
/* ── Blindagem do texto selecionado do Select2 (2026-08-27) ────────────────────
Garante cor LEGÍVEL sempre no nome escolhido do